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

Modular Development Een App in Facebook

Dennis van der Oost CMD2D 0822118 Module: CMDDEV01-7 Docent: Eric Mahieu Eindverslag v.1.0

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

- Schetsen en eerste versies - Eindontwerp

- Prototype

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.

De (fictieve) opdrachtgever: - Bioscoopketen Pathé

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 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.

Dennis van der Oost / 0822118 / CMD2D / CMDDEV01-7

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

Must/Should have

- Filmoverzicht

Must have

- Vriendenoverzicht (Facebook)

Must have

- Overzicht Events/Kalender

Must have

- Plaatsen van events/ uitnodigingen

Must have

- Trailers, screens en achtergrondinformatie van de films

Should have

- Status updates/Wall Posts, die filmtitels bevatten

Could have

- Mobiele versie van de app

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. Dennis van der Oost / 0822118 / CMD2D / CMDDEV01-7

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 Dennis van der Oost / 0822118 / CMD2D / CMDDEV01-7

Proof of Concept (POC) Wat is een proof of concept ?

-

De tijd laten aflopen ?

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)

x en y coördinaten van het monster en van de koekjes. Kan dit met jquery?

hitTest ?

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

In het kort: Een probleemstelling vaststellen. En onderzoek hiernaar doen of dit te realiseren is. -> Technisch ontwerp

.position -> Ja kan


Proof of Concept

Realisatie:

Functie:

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.

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.

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.


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, (http://film1.cdp.triple-it.nl/content/hd/) 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.


Schetsen Applicatie


Schetsen Applicatie


Schetsen Applicatie


Schetsen Applicatie


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.


+ Set up new App App ID 105716706187153 API Key 73864d3aed80b86940c2671447e8a4d0 App Secret ceeb24500fd9df8d941c992ef31dffad Site URL http://student.cmd.hro.nl/0822118/jaar2/ modulardevelopment/App/

PatheCMD applicatie http://apps.facebook.com/ pathe-cmd/

Site Domain hro.nl Name PatheCMD


Prototype Login

Allow permissions


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

Recommend Documents