Modular Development. Een App in Facebook. Dennis van der Oost CMD2D Module: CMDDEV01-7 Docent: Eric Mahieu. Eindverslag v.1.

Transcriptie

1 Modular Development Een App in Facebook Dennis van der Oost CMD2D Module: CMDDEV01-7 Docent: Eric Mahieu Eindverslag v.1.0

2 Inhoudsopgave - Inleiding - Concept omschrijving - Technisch onderzoek - Functioneel ontwerpen Wat het system moet doen voor de gebruiker om de gebruikersdoelen te realiseren. - Technisch ontwerpen Hoe moet het systeem dat gaan doen 1. Welke techniek(en) Mogelijkheden devices Programmeertalen api s frameworks 2. Proof of concept (PoC) 3. Technisch ontwerpen - Functioneel ontwerp - Actors (use case list) - Use case algorithm - - Visueel ontwerp - Prototype - Schetsen en eerste versies - Eindontwerp

3 Inleiding Concept Websites als Martkplaats, Speurders en ebay hebben de traditionele media ( de zoekertjes) ingehaald als het gaat om snel en goedkoop producten kopen en verkopen. Met de komst van sociale netwerken en mobiel internet, zijn de mogelijkheden inmiddels groter dan alleen een website. Bedenk en ontwikkel een prototype voor een Facebook App die hier een nieuwe dimensie aan geeft. Dit kan door: Gebruik te maken van groepen (ibood/groupon); Het sociale netwerk in te zetten; Extra informatie op te halen om beter een keuze te kunnen maken Locatie (GPS, Facebook Places) informatie te gebruiken Een Facebook App kent vele vormen, denk hierbij niet alleen aan een Facebook pagina, maar een service die gebruik kan maken van het hele platform (wall-posts e.d.). De (fictieve) opdrachtgever: - Bioscoopketen Pathé De Facebook applicatie van Pathé houdt in dat er snel en gemakkelijk bioscoopkaartjes gekocht (moeten) kunnen worden. In de app wordt er informatie gehaald van Facebook en van de website van Pathé. Het idee is dat de gebruiker van de applicatie kaartjes kan reserveren/kopen. Hij gaat natuurlijk niet alleen naar de bioscoop. Dit wilt hij met vrienden gaan doen. Er is wel een probleem. Hij weet niet welke films er nu in de Pathé bioscopen (in zijn omgeving) zijn of komen; welke films zijn vrienden leuk vinden en wanneer zijn vrienden tijd hebben en geen andere dingen gepland hebben voor binnenkort. De applicatie zal de gebruiker bij deze problemen helpen. Dat zal zijn door informatie af te halen van de website van Pathé: Op welke plaatsen staan er Pathé bioscopen; welke films spelen er; welke films zullen er komen; welke informatie is er over een film; achtergrondinformatie, screens, trailers, video s van de film. Daarnaast zal er ook informatie van Facebook afgehaald worden: Je vriendenlijst; Over welke films er gesproken wordt door vrienden; wanneer vrienden events hebben en of ze daar heen zullen gaan.

4 Functioneel ontwerp Actors - Gebruiker van de app - Vriend van de gebruiker op Facebook - Beheerder van de Pathé website Gebruiker van de app Hij moet: - een bioscoop en films uit kunnen kiezen. - informatie over de films te zien krijgen. - vrienden uit kunnen om naar de bioscoop te gaan. - op de kalender / bij events van vrienden kunnen zien wanneer zij niets te doen hebben. - een event kunnen plaatsen. - (met de app) samen met zijn vrienden tot een overeenkomst komen. - de kaartjes daadwerkelijk bestellen Vriend van de gebruiker op Facebook Hij moet: - uitnodigingen kunnen ontvangen om naar de bioscoop te gaan. - op verzoeken/uitnodigingen reageren. - informatie over de gekozen film en/of bioscoop kunnen bekijken Beheerder van de Pathé website Hij moet: - informatie over films op de website plaat sen en up-to-date houden. - er voor kunnen zorgen dat er via de app kaartjes voor een film verkocht kun nen worden MoSCow Wat moet het concept (of: de applicatie) onder andere bevatten: - Bioscoopoverzicht - Filmoverzicht - Vriendenoverzicht (Facebook) - Overzicht Events/Kalender - Plaatsen van events/ uitnodigingen - Trailers, screens en achtergrondinformatie van de films - Status updates/wall Posts, die filmtitels bevatten - Mobiele versie van de app Must/Should have Must have Must have Must have Must have Should have Could have Would like to have Naast deze verschillende elementen voor in de app moet er ook een apart scherm zijn, waarmee er daadwerkelijk bioscoopkaartjes gekocht kan worden. Hier draait de hele applicatie om. Op dit scherm moet de gebruiker kunnen kiezen voor (een) vriend(en), een bioscoop, een film, een datum en tijd. Om de datum en tijd te kiezen, moet de gebruiker weten wanneer de vrienden geen events hebben. Dus ook een overzicht van events.

5 Use Case Algoritme Wat moet de applicatie functioneel gaan doen om de gebruikersdoelen van de actoren te realiseren. In dit geval zijn de actoren: de gebruker van de app, de vrienden van de gebruiker van de app en (de beheerder van) de website Pathé. nl). En de gebruikersdoelen zijn op de vorige pagina genoemd. De functionaliteiten moeten schrijvend en/of tekenend uitgewerkt worden. Op een zodanige manier dat de programmeur begrijpt wat er moet gebeuren. Er is een aantal manieren om de use case algorithme te omschrijven, namelijk: - Een Stappenplan eenvoudige use case schrijvend uitwerken. - Een Use case diagram eenvoudige use cases tekenend uitwerken. - Een Activity diagram voor iets complexere use cases, met condities, iteraties,e.d. Andere voorbeelden Use case diagram Use case Activity diagram Voorbeeld van een Stappenplan: 1.Registratieformulier tonen 2.(gebruiker vult gegevens in) 3.Registratiegegevens tijdelijk bewaren 4.Betaaalformuliertonen 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

6 Proof of Concept (POC) Wat is een proof of concept? Een voorbeeld: Koekiemonster Casus. 1 Welke technieken? Met html en jquery 2 Welke functies / Wat moet er gebeuren en te zien zijn op het scherm? Tijd resterend Aantal Koekjes Monster - Monster moet bestuurbaar zijn met pijltjes. En de koekjes moeten opeetbaar zijn. Is dit mogelijk? -> onderzoeken Met pijltjes besturen? Het opeten vd koekjes? (hittest in flash) 1) Hoe kan je pijltjes laten werken?.keydown (+ nummer knop) -> Ja kan 2) hittest? x en y coördinaten van het monster en van de koekjes. Kan dit met jquery? - De tijd laten aflopen? In het kort: Start knop teller loopt tijd = 0 -> game over - > start knop Start knop teller loopt tijd > 0 -> gewonnen.countdown $( span.countdown ). countdown({seconds: 30, callback: hello_world() }); Hoe laat is het? (bij Start)> variabele Hoe laat is het nu? Date object Epoch -> Ja kan Een probleemstelling vaststellen. En onderzoek hiernaar doen of dit te realiseren is. -> Technisch ontwerp.position -> Ja kan

7 Proof of Concept Functie: In het vak is zichtbaar welke films populair zijn. Bovenin het vak kan de gebruiker op pijltjes klikken om een bioscoop te kiezen. Van link naar rechts en andersom zal er een nieuwe lijst met populaire films (per bioscoop) te zien zijn. Realisatie: Informatie moet worden opgehaald van de pathe website. Op de site staat een top 10 van films bij pathe. Dit is alleen tekst en van pathe in het algemeen. Dus als er informatie te vinden is per locatie kan dit met xml en javascript worden opgehaald en getoond worden in het vak. Met jquery zal de animatie gemaakt kunnen worden. Per bioscoop wordt er een lijst gegenereerd en er wordt er één getoond. De andere lijsten zitten daar links en rechts naast - zij worden niet getoond. Door op de pijltjes te klikken zullen de lijsten doorschijven van links naar rechts of andersom. Bijvoorbeeld bij een onclick dat de verzameling van lijsten +200px of -200px opschuiven.

8 Proof of Concept Functie: Trailers laten zien in de app. In het vak is de trailer te zien. Verschillende opties (play, pause, full screen) zijn te zijn bij een hover. Bij de hover zijn ook 2 pijlen te zien aan de linker- en rechterkant in het vak. Als de gebruiker op de pijl gaat staan, verschijnt er een afbeelding van de film die daarna volgt of daarvoor staat. Realisatie: Op de website van Pathe worden thumbnails van films getoond, hierop kan geklikt worden om de trailer van de film daarna te bekijken. In de app moet dit hetzelfde gaan werken. Alleen moet er één thumbail verschijnen, wanneer er op een pijl overheen gegaan word. De thumnails kunnen gemakkelijk vanuit de website geladen worden. Deze worden ook aangeduid als thumbails. De trailers zelf komen vanaf een andere site, ( maar de links daarnaar worden ook gegeven. Deze kunnen dus ook gemakelijk ingeladen worden. Html Moet de basis vormen voor de functies. Jquery/javascript Moet de thumbails en de trailers inladen. En de features zoals hoveren over de pijlen.

9 Schetsen Applicatie

10 Schetsen Applicatie

11 Schetsen Applicatie

12 Schetsen Applicatie

13 Prototype Het begin van het prototype was het omzetten van het ontwerp in Photoshop naar html en css. De eerste versie van het prototype was een neppe facebookpagina (inloggen en perms en facebook header en footer). Hierin werd het ontwerp voor de app geplaatst. Alle koppen, images, div s waarin echte content in kan komen. Pas later kregen we een introductie in de les voor het aanmaken van een app op facebook.

14 + Set up new App App ID API Key 73864d3aed80b86940c e8a4d0 App Secret ceeb24500fd9df8d941c992ef31dffad Site URL modulardevelopment/app/ PatheCMD applicatie pathe-cmd/ Site Domain hro.nl Name PatheCMD

15 Prototype Login Allow permissions