De presentatie wordt gedownload. Even geduld aub

De presentatie wordt gedownload. Even geduld aub

1 Functioneel Ontwerpen. 2 Wat houdt dit kwartaal in  Functioneel en technisch ontwerpproces  Functional Requirements Analyse  Functioneel Ontwerpen.

Verwante presentaties


Presentatie over: "1 Functioneel Ontwerpen. 2 Wat houdt dit kwartaal in  Functioneel en technisch ontwerpproces  Functional Requirements Analyse  Functioneel Ontwerpen."— Transcript van de presentatie:

1 1 Functioneel Ontwerpen

2 2 Wat houdt dit kwartaal in  Functioneel en technisch ontwerpproces  Functional Requirements Analyse  Functioneel Ontwerpen  Technisch onderzoeken  Technisch Ontwerpen  Prototypen  Functionele Requirements bijstellen Front-end development Wie? Hoe? Wat?

3 3 ‘Functioneel’ Ontwerpen  Ontwerpen wat het systeem voor de gebruiker zal doen (om diens gebruikersdoelen te realiseren) 1.Actoren vaststellen 2.Use cases vaststellen 3.Alogrithme ontwerpen Front-end development

4 4 ‘Functioneel’ Ontwerpen  Ontwerpen wat het systeem voor de gebruiker zal doen (om diens gebruikersdoelen te realiseren) 1.Actoren vaststellen Wat was een ‘actor’ ook al weer? 2.Use cases vaststellen 3.Alogrithme ontwerpen Front-end development

5 5 ‘Functioneel’ Ontwerpen  Ontwerpen wat het systeem voor de gebruiker zal doen (om diens gebruikersdoelen te realiseren) 1.Actoren vaststellen Een persoon, organisatie of systeem, die een bepaalde rol speelt in de interactie met het (te ontwerpen) systeem 2.Use cases vaststellen 3.Alogrithme ontwerpen Front-end development

6 6 ‘Functioneel’ Ontwerpen  Ontwerpen wat het systeem voor de gebruiker zal doen (om diens gebruikersdoelen te realiseren) 1.Actoren vaststellen 2.Use cases vaststellen Wat was een use case ook al weer? 3.Alogrithme ontwerpen Front-end development

7 7 ‘Functioneel’ Ontwerpen  Ontwerpen wat het systeem voor de gebruiker zal doen (om diens gebruikersdoelen te realiseren) 1.Actoren vaststellen 2.Use cases vaststellen Een use case beschrijft wat het (te ontwerpen) systeem voor een ‘actor’ doet, om een bepaald doel te realiseren Een use case beschrijft niet wat een gebruiker doet (behalve als aanleiding) Een use case beschrijft geen implementatie; Geen schermen Geen programmeertalen, API’s, databasevelden, etc. 3.Alogrithme ontwerpen Front-end development

8 8 ‘Functioneel’ Ontwerpen  Ontwerpen wat het systeem voor de gebruiker zal doen (om diens gebruikersdoelen te realiseren) 1.Actoren vaststellen 2.Use cases vaststellen 3.Alogrithme ontwerpen eh leuk … maar hoe ziet dat verkoopproces er dan uit? Welke stappen zijn er? Welke randvoorwaarden / afhankelijkheden? Front-end development

9 9 ‘Functioneel’ Ontwerpen  Ontwerpen wat het systeem voor de gebruiker zal doen (om diens gebruikersdoelen te realiseren) 1.Actoren vaststellen 2.Use cases vaststellen 3.Alogrithme ontwerpen Verschillende opties: 1.Stappenplan (eenvoudige use case schrijvend uitwerken) 2.Use case diagram (eenvoudige use cases tekenend uitwerken) 3.Activity diagram (voor iets complexere use cases (met condities, iteraties,e.d) Front-end development

10 10 Functioneel algorithme ontwerpen: use case diagram (meer detail dan vorige week) Front-end development 10 Front-end development > Invoeren Abonnement Valideren Abonnement > Invoeren Creditcard Valideren Creditcard Aanvragen Abonnement Bezoeke r actor > Het systeem = “black box” use case relatie > = uitbreiding, niet essentieel voor succes hoofd- use case > = noodzakelijk voor succes hoofd- use case > = niet noodzaakelijke actor (gebruiker of applicatie) voert use case uit meer hierover in het boek: “Pragmatisch programmeren met UML” van Sander Hoogendoorn Versturen bevestiging per > Creditcard- maatschappij Functie()?

11 11 Front-end development IAD-scenarioFED-use case diagram Je schrijft een globaal ‘scenario’ om in kaart te brengen welke interactie op welk moment het meest waarschijnlijk en relevant is In een use case beschrijving staat welke deelfunctionaliteiten er nodig zijn om een use case uit te voeren (een soort mini- / detail- scenario)

12 12 Front-end development IAD wireframeFED use case diagram Een wireframe is een statisch diagram: het beschrijft mogelijke interactie op 1 tijdstip (1 scherm) Een use case diagram is een dynamisch diagram: het beschrijft 1 functionaliteit op meerdere momenten (meerdere schermen) Use case 1 (scherm 1, 2 en 3) Use case 2 (scherm 1 en 4) Use case 3 (scherm 2, 3 en 5) Use case 4 (scherm 2, 6 en 7)

13 13 algorithme ontwerpen: stappenplan Front-end development 1.Registratieformulier tonen 2.(gebruiker vult gegevens in) 3.Registratiegegevens tijdelijk bewaren 4.Betaaalformulier tonen 5.(gebruiker vult gegevens in) 6.Controleren bij bank /creditcardmaatschapij 7.Indien accoord: 1.Definitief bewaren registratiegegevens 2.Markeren als abonnee 3.Bevestiging tonen 4.bevestigingsmail sturen 8.Anders 1.Foutmelding tonen Terug naar af? Ga naar de gevangenis?

14 14 algorithme ontwerpen: activity diagram Front-end development Eenvoudige flow chart

15 15 algorithme ontwerpen: activity diagram Front-end development Einde   begin Activiteit  Test / keuze 

16 16 algorithme ontwerpen: activity diagram Front-end development Cacoo.com = gratis online tool om UML use case diagrammen, UML activity diagrammen, ER diagrammen, Wireframes (ook speciaal voor iPhone / iPad) etc. mee te tekenen

17 17 Front-end development Casus: lonely planet Stel… je doel is: wil een app in de lucht gooien die de lonely's op de planeet de mogelijkheid geven om informatie te delen en elkaar te ontmoeten op de mooiste plekjes van deze aarde. Stel… je idee is: het centrum wordt een kaart waar je alle informatie kan vinden. op deze kaart vind de gebruiker spelde die informatie voorstellen. een andere kleur spelt toont de locatie van andere gebruikers en geeft de mogelijkheid om met hen in contact te komen. Nog geen scenario

18 18 Front-end development 1. Actoren vaststellen: Stel… je doel is: wil een app in de lucht gooien die de lonely's op de planeet de mogelijkheid geven om informatie te delen en elkaar te ontmoeten op de mooiste plekjes van deze aarde. Stel… je idee is: het centrum wordt een kaart waar je alle informatie kan vinden. op deze kaart vind de gebruiker spelde die informatie voorstellen. een andere kleur spelt toont de locatie van andere gebruikers en geeft de mogelijkheid om met hen in contact te komen.

19 19 Front-end development 2. Use Cases vaststellen:vaststellen Stel… je doel is: wil een app in de lucht gooien die de lonely's op de planeet de mogelijkheid geven om informatie te delen en elkaar te ontmoeten op de mooiste plekjes van deze aarde. Stel… je idee is: het centrum wordt een kaart waar je alle informatie kan vinden. op deze kaart vind de gebruiker spelde die informatie voorstellen. een andere kleur spelt toont de locatie van andere gebruikers en geeft de mogelijkheid om met hen in contact te komen.

20 20 Front-end development 3. Algorithme ontwerpen:ontwerpen Stel… je doel is: wil een app in de lucht gooien die de lonely's op de planeet de mogelijkheid geven om informatie te delen en elkaar te ontmoeten op de mooiste plekjes van deze aarde. Stel… je idee is: het centrum wordt een kaart waar je alle informatie kan vinden. op deze kaart vind de gebruiker spelde die informatie voorstellen. een andere kleur spelt toont de locatie van andere gebruikers en geeft de mogelijkheid om met hen in contact te komen.

21 21 Front-end development Use Case: Use case (name)Nabij gelegen attracties tonen Actoren:Reiziger, google maps User goal (doel): (bereikt na use case voltooid) Weten waar naar toe kan gaan om wat te doen / bekijken Use case (beschrijving): 1. kijken of telefoon locatieinformatie heeft en (hiermee) bepalen welke locatie relevant is. Als geen locatieinformatie bekend is vragen gps aan te zetten of laatst bekende locatie te gebruiken 2. bepalen welke attracties in de buurt zijn 3. juiste kaart opvragen bij kaartenservice (google maps) 4. attracties op de kaart plotten 5. invoerveld alternatieve locatie tonen 6.Als kaart op kaart geswiped wordt of invoerveld wordt ingevuld, dan herhalen vanaf 2. Prioriteit:Must Have Uren inschatting: 8 uur: uitzoeken google maps api 8 uur: serverside nabije locaties uit db halen en algorthme bedenken

22 22 Huiswerk Lees hoofdstuk 7, 8, 9 en 10 uit Learning jQuery 1.3: Better Interaction Design and Web Development with Simple JavaScript Techniques Jonathan Chaffer, Karl Swedberg Packt Publishing, ISBN Maak het Functioneel Ontwerp voor je Lonely Planet app. Maak activity diagrammen voor alles dat een beetje logica/algorithme heeft Front-end development


Download ppt "1 Functioneel Ontwerpen. 2 Wat houdt dit kwartaal in  Functioneel en technisch ontwerpproces  Functional Requirements Analyse  Functioneel Ontwerpen."

Verwante presentaties


Ads door Google