Functioneel Ontwerpen Alex uit Xbox game “Prototype” Wat is hier de relatie met een prototype? 1

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

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

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

‘Functioneel’ Ontwerpen Front-end development ‘Functioneel’ Ontwerpen Ontwerpen wat het systeem voor de gebruiker zal doen (om diens gebruikersdoelen te realiseren) Actoren vaststellen Een persoon, organisatie of systeem, die een bepaalde rol speelt in de interactie met het (te ontwerpen) systeem Use cases vaststellen Alogrithme ontwerpen Wat kan wel een actor zijn en wat niet? De database? Google maps?

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

‘Functioneel’ Ontwerpen Front-end development ‘Functioneel’ Ontwerpen Ontwerpen wat het systeem voor de gebruiker zal doen (om diens gebruikersdoelen te realiseren) Actoren vaststellen 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. Alogrithme ontwerpen

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

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

Bezoeker Functioneel algorithme ontwerpen: Front-end development Front-end development Functioneel algorithme ontwerpen: use case diagram (meer detail dan vorige week) Functie()? actor (gebruiker of applicatie) voert use case uit Het systeem = “black box” use case <<form>> Invoeren Abonnement actor Valideren Abonnement <<include>> <<include>> = noodzakelijk voor succes hoofd- use case <<extends>> = niet noodzaakelijke <<include>> Aanvragen Abonnement <<form>> Invoeren Creditcard <<extend>> = uitbreiding, niet essentieel voor succes hoofd- use case <<include>> Goed dat je hierop een andere actor kan aangeven Kan op white board Bezoeker <<include>> <<extend>> Valideren Creditcard relatie Versturen bevestiging per e-mail Creditcard-maatschappij meer hierover in het boek: “Pragmatisch programmeren met UML” van Sander Hoogendoorn 10

IAD-scenario FED-use case diagram Front-end development IAD-scenario FED-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)

IAD wireframe FED use case diagram Front-end development IAD wireframe FED 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)

Ga naar de gevangenis? Terug naar af? algorithme ontwerpen: Front-end development algorithme ontwerpen: stappenplan Registratieformulier tonen (gebruiker vult gegevens in) Registratiegegevens tijdelijk bewaren Betaaalformulier tonen Controleren bij bank /creditcardmaatschapij Indien accoord: Definitief bewaren registratiegegevens Markeren als abonnee Bevestiging tonen bevestigingsmail sturen Anders Foutmelding tonen Kan in iedere teksteditor Ga naar de gevangenis? Terug naar af?

Eenvoudige flow chart algorithme ontwerpen: activity diagram Front-end development algorithme ontwerpen: activity diagram Goed dat je ook terug kunt Eenvoudige flow chart

 begin Activiteit  Test / keuze  Einde  algorithme ontwerpen: Front-end development algorithme ontwerpen: activity diagram  begin Activiteit  Test / keuze  Goed dat je ook terug kunt Einde 

UML use case diagrammen, UML activity diagrammen, ER diagrammen, Front-end development algorithme ontwerpen: activity diagram 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 Goed dat je ook terug kunt

Nog geen scenario Casus: lonely planet Stel… je doel is: 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. Goed dat je ook terug kunt Nog geen scenario

1. Actoren vaststellen: Stel… je doel is: 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. Goed dat je ook terug kunt

2. Use Cases vaststellen: Front-end development 2. Use Cases 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. Goed dat je ook terug kunt

3. Algorithme ontwerpen: Front-end development 3. Algorithme 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. Goed dat je ook terug kunt

Use Case: Use case (name) Nabij gelegen attracties tonen Actoren: 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): 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 bepalen welke attracties in de buurt zijn juiste kaart opvragen bij kaartenservice (google maps) attracties op de kaart plotten invoerveld alternatieve locatie tonen 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 Goed dat je ook terug kunt

Front-end development 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 9781847196705 Maak het Functioneel Ontwerp voor je Lonely Planet app. Maak activity diagrammen voor alles dat een beetje logica/algorithme heeft