FESTIVALINFO MOBIELE APPLICATIE

FESTIVALINFO MOBIELE APPLICATIE

Student : Studentnummer: Cursus:

Datum:

Teun Ingels 1527670 Afstudeerstage Scriptie TEET-VMBACHEX-11 13-03-2012

Festivalinfo mobiele applicatie

2 van 65

FESTIVALINFO MOBIELE APPLICATIE

Student: Studentnummer:

Teun Ingels 1527670

Cursus:

Afstudeerstage Scriptie TEET-VMBACHEX-11 13-03-2012 Amsterdam 0.7

Datum: Plaats: Versie: Begeleider:

Rob van der Zwaan Festivalinfo

1e Examinator: 2e Examinator:

Abdelhak El Jazouli Arjan Kroon


3 van 65

Samenvatting In Nederland en België vinden veel festivals plaats. Een aantal grote festivals heeft een eigen mobiele applicatie. Dit betekent dat je steeds per festival een nieuwe app. moet downloaden. Het kost veel tijd om deze allemaal te downloaden en daarnaast neemt het ook veel plaats in beslag op je mobiel. Festivalinfo wil dit probleem oplossen door zelf een mobiele app. te ontwikkelen, die te gebruiken is voor een aantal grote festivals. Doordeweeks zal deze app. nieuws en een festivalagenda laten zien. Als je op een festival bent, zal deze app. veranderen in een mobiel programmaboekje. Om de app. te ontwikkelen heb ik eerst een enquête gehouden om inzicht te krijgen wat de doelgroep verwacht van een mobiele festival applicatie. Daarnaast is er ook onderzoek verricht naar nieuwe technieken die HTML5 met zich meebrengt en hoe dit toe te passen is op Android en iOS besturingssystemen. HTML5 biedt een aantal handige technieken die ervoor zorgen dat de app. ook offline beschikbaar wordt, na het een eerste keer online bezocht te hebben. Met HTML5 kan er ook gebruik gemaakt worden van bijvoorbeeld GPS om de locatie te bepalen en gebruik te maken van de camera. Dankzij nieuwe technieken die met CSS3 komen, is het makkelijker geworden om de app. beter vorm te geven. Een nadeel van het gebruik van HTML5, is dat dit nog niet ondersteund wordt door alle browsers die beschikbaar zijn. Daarom is er gekozen om voor Android en iOS besturingssystemen ook een deel native te ontwikkelen. Dankzij het native ontwikkelen, kan er gebruik gemaakt worden van de menu knop en de zoom functie die al aanwezig zijn op de mobiel zelf. Aan de hand van de onderzoeken is een functioneel ontwerp gemaakt waarin alle functionaliteiten en de lay-out van de applicatie zijn vastgesteld. Hieruit is ook een technisch ontwerp ontwikkeld die de opbouw van de applicatie weergeeft. Door gebruik te maken van het HTML5 app. platform PhoneGap, is het mogelijk om een native app. aan een webpagina te koppelen. Op deze manier hebben we de app. online kunnen zetten en zal deze beschikbaar zijn voor alle mobiele telefoons die HTML5 ondersteunen en kunnen de gebruikers van Android en iOS gebruik maken van de extra functionaliteit die we met de native applicatie aanbieden. De mobiele festival applicatie zal bij het opstarten een pagina laten zien waar je de keuze hebt om het algemene festival nieuws te bekijken, het overzicht met festivals op te vragen waar een app. van beschikbaar is en algemene informatie over de applicatie en het bedrijf Festivalinfo zelf. Als je een festival app. van een specifiek festival opent, kom je op de hoofdpagina van dat festival. Hier kan er gekozen worden om het nieuws van dit festival te bekijken, de blokkenschema’s per dag te bekijken, informatie over alle artiesten die zullen optreden opvragen, de kaart van het festival bekijken, de twitter-feed van het festival lezen en algemene informatie bekijken zoals wat het voor festival is en hoe je er kan komen. Om ervoor te zorgen dat mensen met weinig tot geen kennis van programmeren ook zelf een app. aan een bestaand festival kunnen koppelen, heb ik een CMS ontwikkeld. Dit CMS laat je via een Excel bestand alle optredens en podia toevoegen aan het festival. Ook is het mogelijk om de lay-out te veranderen en afbeeldingen toe te voegen.


4 van 65

Inhoudsopgave VOORWOORD ........................................................................................................................................................7 INLEIDING ..............................................................................................................................................................8 1.

FESTIVALINFO ................................................................................................................................................9

2.

ORGANISATIE EN WERKWIJZE ...................................................................................................................... 10 2.1 2.2

3.

OPDRACHT ................................................................................................................................................... 11 3.1 3.2 3.3 3.4 3.5

4.

FUNCTIONEEL ONTWERP .................................................................................................................................. 31 TECHNISCH ONTWERP...................................................................................................................................... 36

PROCES EN PLANNING ................................................................................................................................. 39 7.1 7.2 7.3

8.

ENQUÊTE ...................................................................................................................................................... 18 BESTAANDE FESTIVAL-APPS BEKIJKEN EN VERGELIJKEN ............................................................................................ 23 HTML5 + ANDROID EN IOS ............................................................................................................................. 24

ONTWERP .................................................................................................................................................... 31 6.1 6.2

7.

OVERVIEW .................................................................................................................................................... 13 ANALYSE ....................................................................................................................................................... 14 METHODIEK .................................................................................................................................................. 16

ONDERZOEK................................................................................................................................................. 18 5.1 5.2 5.3

6.

PROBLEEMSTELLING ........................................................................................................................................ 11 DOELSTELLING ............................................................................................................................................... 11 HOOFDVRAAG EN DEELVRAGEN ......................................................................................................................... 11 EISEN EN RANDVOORWAARDEN ......................................................................................................................... 12 EINDPRODUCTEN ............................................................................................................................................ 12

ANALYSE ...................................................................................................................................................... 13 4.1 4.2 4.3

5.

ORGANISATIE................................................................................................................................................. 10 WERKWIJZE ................................................................................................................................................... 10

PROJECTAANPAK ............................................................................................................................................ 39 STROKENPLANNING......................................................................................................................................... 39 CALCULATIE UREN EN KOSTEN ........................................................................................................................... 41

REALISATIE................................................................................................................................................... 42 8.1 GLOBALE FASERING ......................................................................................................................................... 42 8.2 REALISATIE PER FASE / MIJLPAAL ........................................................................................................................ 42 8.2.1 Overleggen met de opdrachtgever ....................................................................................................... 42 8.2.2 Onderzoek............................................................................................................................................. 42 8.2.3 Ontwikkelen mobiele website ............................................................................................................... 43 8.2.4 Ontwikkelen CMS .................................................................................................................................. 45 8.2.5 Testen website ...................................................................................................................................... 46 8.2.6 Ontwikkelen mobiele applicatie ........................................................................................................... 46


5 van 65

8.2.7 9.

Testen van de applicatie ....................................................................................................................... 48

EINDPRODUCT ............................................................................................................................................. 49 9.1 9.2 9.3 9.4

10. 10.1 10.2 10.3

RESULTAAT.................................................................................................................................................... 49 EVALUATIE .................................................................................................................................................... 51 CONCLUSIE .................................................................................................................................................... 52 AANBEVELINGEN ............................................................................................................................................ 52 REFLECTIE ................................................................................................................................................ 53 COMPETENTIES VAN DE BACHELOR OF ENGINEERING ............................................................................................. 53 DUBLIN DESCRIPTOREN .................................................................................................................................... 53 PROFIELSCHETS .............................................................................................................................................. 54

AFKORTINGEN EN BEGRIPPEN .............................................................................................................................. 56 AFKORTINGEN ............................................................................................................................................................. 56 BEGRIPPEN ................................................................................................................................................................. 56 BRONNEN ............................................................................................................................................................ 58 BIJLAGE 1 – ENQUÊTE VRAGEN ............................................................................................................................ 59 BIJLAGE 2 – APPCACHE ......................................................................................................................................... 62 BIJLAGE 3 – FUNCTION TIME_DIFFERENCE ........................................................................................................... 63 BIJLAGE 4 - BLOKKENSCHEMA .............................................................................................................................. 64


6 van 65

Voorwoord Deze scriptie is geschreven als eindverslag van mijn afstudeerproject voor de opleiding Mediatechnologie aan de Hogeschool Utrecht. Ik bezoek de website Festivalinfo.nl al meer dan 8 jaar een paar keer per week om te kijken of er nog leuke festivals en concerten zijn in Nederland en België. Tijdens het zoeken van een stageplaats zag ik op deze website een advertentie langs komen dat ze opzoek waren naar nieuwe stagiaires. Na hierop gereageerd te hebben, werd ik uitgenodigd voor een gesprek. Dit gesprek beviel van beide kanten en daarop volgend hebben we ook de afstudeeropdracht geformuleerd. De doelgroep van deze scriptiezijn bezoekers van festivals in voornamelijk Nederland en België, die in het bezit zijn van een smartphone. Daarnaast is deze scriptie bedoeld als onderdeel van het afstudeertraject. Graag wil ik een aantal mensen bedanken voor de hulp bij het realiseren van dit afstudeerproject. Mijn bedrijfsbegeleider Rob van der Zwaan voor alle technische ondersteuning en begeleiding, mijn twee afstudeerdocenten Abdelhak El Jazouli en Arjan Kroon voor de begeleiding vanuit de opleiding en alle collega’s van Festivalinfo voor de gezellige tijd en het helpen bij het meedenken tijdens het hele project.

Amsterdam, 13 maart 2012 Teun Ingels


7 van 65

Inleiding Festivalinfo.nl is een website waar alle informatie over de festivals in Nederland en België te vinden is. Daarnaast bestaan ook de sites Podiuminfo.nl en Cabaretinfo.nl, waar ze respectievelijk alle informatie over concerten en cabaretvoorstellingen berichten. Zij willen dit graag uitbreiden naar de mobile telefoon. Daarom heeft Festivalinfo een plan ontwikkeld om de ultieme festival-app. voor de mobiele telefoon te realiseren. Hiervoor ben ik als Mediatechnologie student aangenomen om deze mobiele festival applicatie te ontwikkelen. Dit verslag zal de volgende punten in chronologische volgorde nader toelichten: 1. Het bedrijf 2. Organisatie en werkwijze 3. Opdracht 4. Analyse 5. Onderzoek 6. Ontwerp 7. Proces en planning 8. Realisatie 9. Eindproduct 10. Reflectie Aan het einde van dit verslag vindt u een afkortingen en begrippenlijst. De eerste keer dat een afkorting of begrip uit de afkortingen en begrippenlijst voorkomt, wordt dit aangegeven met een ster (*).


8 van 65

1.

Festivalinfo

Festivalinfo werd gelanceerd in 2001 en is destijds beg begonnen onnen als hobbyproject van Rob van der Zwaan. Festivalinfo.nl heeft zich ontwikkeld tot de grootste en meest bezochte festivalwebsite van Nederland en Vlaanderen. Begin 2005 werd als uitbreiding op Festivalinfo, Podiuminfo ontwikkeld. n Festivalinfo is het bieden van een zo compleet en betrouwbaar mogelijk overzicht Het primaire doel van van muziekfestivals die gehouden worden in Nederland en Vlaanderen, van elke grootte en in elk denkbaar muziekgenre. Podiuminfo.nl geeft een zo compleet en betrouwbaar mogelijk ijk overzicht van de vele grote en kleine concerten en andere evenementen in Nederland en België. In 2007 werd Cabaretinfo gelanceerd. Net als Festivalinfo en Podiuminfo zorgt Cabaretinfo op haar beurt voor een zo compleet en betrouwbaar mogelijk overzich overzichtt te geven van de vele grote en kleine cabaret voorstellingen in Nederland en België. Festivalinfo bestaat uit de hoofdredacteur Rob, de coördinatoren Harm, Erik, Marcel en Steven, de stagiaires Jeroen, Brian,, Julie, Sophia, René, Lisette en ikzelf (Teun).. Daarnaast zijn er nog meer dan 30 vrijwilligers werkzaam bij Festivalinfo Festivalinfo.

Rob Hoofdredacteur

Harm

Erik

Marcel

Steven

Coordinator live reviews

Coordinator live reviews

Coordinator sfeer foto's

Coordinator cd recensies

Stagiaires

Vrijwilligers

Figuur 1.1: Organigram Festivalinfo

Stagiaires Brian Web development

Jeroen Nieuws en info

Sophia Nieuws en info

Lisette

René

Nieuws en info

Web development

Julie Vormgeving

Teun Mobile development

Figuur 1.2: Organigram stagiaires


9 van 65

2.

Organisatie en werkwijze

In dit hoofdstuk zal de organisatie en werkwijze besproken worden, zoals deze tijdens het afstudeerproject was.

2.1

Organisatie

De opdracht is volledig door mij ontwikkeld. Hierin werd ik ondersteund door mijn bedrij bedrijfsbegeleider Rob van der Zwaan, die ook optreedt treedt als interne opdrachtgever. Daarnaast werden alle werknemers betrokken bij brainstormsessies en feedbackrondes, om op deze manier zo veel mogelijk verschillende meningen en ervaringen op te doen. Naam: Rol: Bedrijf: E-mail:

Rob van der zwaan Opdrachtgever Festivalinfo [email protected]

Naam: Studentnummer: Rol: E-mail:

Teun Ingels 1527670 Ontwikkelaar [email protected]

Rob van der Zwaan

Teun Ingels

Opdrachtgever

Ontwikkelaar

Figuur 2.1: Organigram organisatie

2.2

Werkwijze

Ik heb aan deze opdracht fulltime gewerkt. De eerste maanden heb ik mij voornamelijk bezig gehouden met onderzoek, waarna ik een alpha alpha- en betaversie ontwikkeld heb voor de Festivalinfo-applicatie. Festivalinfo Aan het begin van de stage heb ik de opdracht in detail doorgesproken met de opdrachtgever. De eerste maandag van de maand vond er een vergadering plaats met de opdrachtgever om de voortgang te bespreken om te zorgen dat we op een lijn bleven zitten. Als het nodig was, was er altijd de mogelijkheid om eerder met elkaar te overleggen. De aangestelde examinatoren van de Hogeschool Utrecht heb ik, na het inleveren van mijn startverslag en voor het inleveren van deze scriptie, uitgenodigd voor een bezoek aan het bedrijf om de vo voortgang van mijn stage te bespreken.


10 van 65

3.

Opdracht

In dit hoofdstuk zal de opdracht volledig besproken worden en duidelijk worden wat er verwacht wordt.

3.1

Probleemstelling

In Nederland en België vinden veel festivals plaats. Een aantal grote festivals heeft een eigen mobiele applicatie. Dit betekent dat je steeds per festival een nieuwe app.* moet downloaden. Het kost veel tijd om deze allemaal te downloaden en daarnaast neemt het ook veel plaats in beslag op je mobiel. Festivalinfo wil dit probleem oplossen door zelf een mobiele app. te ontwikkelen, die te gebruiken is voor een aantal grote festivals. Doordeweeks zal deze app. nieuws en een festivalagenda laten zien. Als je op een festival bent, zal deze app. veranderen in een mobiel programmaboekje. Een app. ontwikkelen voor verschillende operating systems is een grote investering, maar het niet doen zou betekenen dat men een aanzienlijke markt laat liggen. De meeste moderne operating systems beschikken over een webbrowser met HTML5*. Omdat HTML5 grotendeels operating system en apparaat onafhankelijk is, blijft de vraag hoe en met welke technieken een app. het beste ontwikkeld kan worden.

3.2

Doelstelling

Festivalinfo wil graag dat hun website beschikbaar wordt op mobiele telefoons, zodat festivalgangers hier gebruik van kunnen maken. Een veel voorkomend probleem op festivals is dat er door de drukte vaak een slechte internetontvangst is en in het slechtste geval zelfs helemaal geen. Hierdoor is het niet mogelijk om altijd naar de website te navigeren. Als oplossing voor dit probleem zal ik een mobiele applicatie ontwikkelen die zorgt dat alles gecashed wordt op je mobiele telefoon en alles gaat updaten als er weer een internetverbinding beschikbaar is. De app. zal het algemene nieuws laten zien zoals dit beschikbaar is op http://www.festivalinfo.nl. Daarnaast zal de app. voor verschillende festivals extra functionaliteiten bevatten zoals: informatie over bands en acts, een blokkenschema met tijdsindicatie en een kaart van het terrein. Op deze manier functioneert de app. als programmaboekje.

3.3

Hoofdvraag en deelvragen

Hoe ontwikkel je het beste een mobiele festival-app., die eenvoudig is in gebruik en een zo compleet mogelijk overzicht geeft, zoals een strokenplanning, nieuws overzicht en een plattegrond, over de verschillende festivals die je bezoekt? De deelvragen zijn: • Wat zijn de mogelijkheden van HTML5 met betrekking tot het ontwikkelen van een mobiele app.? • Zijn er verschillen tussen het ontwikkelen voor Android* en iOS*? • Hoe zorg je ervoor dat de informatie ook beschikbaar is als er geen internet verbinden mogelijk is? • Is de app. het beste te ontwikkelen als native* app. of als web app.?


11 van 65

3.4

Eisen en randvoorwaarden

Aan de hand van de hoofdvraag, de deelvragen en wat de opdrachtgever verwacht van het eindproduct, zijn we tot de volgende eisen en randvoorwaarden gekomen: Eisen • • • •

De app. moet werkend zijn op Android en iOS mobiele telefoons Nieuws-feed en festivalinformatie moet aanwezig zijn in de app. Zo min mogelijk batterijgebruik (Werkend als er geen internet is)

Randvoorwaarden • Het project moet voldoen aan de vier competenties van de Bachelor of Engineering en de vijf Dublin descriptoren moeten in het proces worden betrokken om te voldoen aan het hbo-niveau. • De app. moet binnen de vastgestelde stageperiode minimaal aan de bovenstaande eisen voldoen • Het project zal gebruik maken van bestaande databases van Festivalinfo met de mogelijkheid om zelf nieuwe tabellen eraan toe te voegen. • Het bijwerken van de app. bij aflevering moet via het bestaande CMS* aan te passen zijn.

3.5

Eindproducten

De volgende eindproducten zal ik opleveren aan het einde van mijn stage: • Festivalinfo mobiele applicatie voor iOS en Android toestellen • Technisch ontwerp Festivalinfo-app. • Functioneel ontwerp Festivalinfo-app. • Presentatie over de stage • Afstudeerverslag


12 van 65

4.

Analyse

Dit hoofdstuk zal een analyse geven van de opdracht die gespecificeerd is in het vorige hoofdstuk.

4.1

Overview

Er is nog niet veel onderzoek gedaan naar het ontwikkelen van een app, omdat hier vaak niet de financiële middelen voor zijn. Begin 2011 is contact opgenomen met een derde partij waarvoor een presentatie in PowerPoint is gemaakt. In deze PowerPoint staat een basisconcept uitgewerkt met een grafische vormgeving, workflow en eisen. De presentie is ontwikkeld om sponsors te werven die de ontwikkeling van de app. kunnen financieren. In figuur 4.1 is de workflow te vinden die op 22-02-2011 voor het eerste concept is opgesteld.

Figuur 4.1: Workflow mobiele applicatie – 22-02-2011

In figuur 4.2 is het grafisch design concept te zien van 22-02-2011. Op basis van deze concepten heb ik verder gebouwd en aanpassing gedaan waar nodig.


13 van 65

Figuur 4.2: Concept openingsscherm Festivalinfo-app. Op iPhone – 22-02-2011

4.2

Analyse

Om de deelvraag met betrekking tot de mogelijkheden van HTML5 te kunnen beantwoorden, is er onderzoek hiernaar gedaan. De resultaten van dit onderzoek zijn terug te vinden in het hoofdstuk “Onderzoek”. HTML5 biedt een aantal nieuwe web technieken die daardoor nog niet door iedere browser worden ondersteund. Er moet daarom rekening gehouden worden met welke technieken we wel en niet willen gebruiken, afhankelijk van de verschillende mobiele platformen en browsers we willen ondersteunen. Als bepaalde technieken niet door Android of iOS worden ondersteund, zullen we toch proberen deze technieken voor het ene platform erin te bouwen en te zorgen dat de app. zonder deze techniek ook goed werkt op het andere platform. Een nadeel dat dit kan opleveren, is dat er wat meer tijd besteed moet worden aan het ontwikkelen van de app. voor één enkel platform. Om te weten wat de verschillen zijn tussen het ontwikkelen voor Android en iOS, heb ik daar ook onderzoek naar verricht. De onderzoeksresultaten zijn terug te vinden in het hoofdstuk “Onderzoek”. Dit onderzoek valt samen met het onderzoek naar HTML5, omdat deze techniek platform onafhankelijk is en daardoor de mogelijkheid biedt om de app. aan zo veel mogelijk mensen aan te bieden. Het nadeel is hierbij dus wel dat niet iedere nieuwe techniek door Android en iOS worden ondersteund. De verschillen hiertussen heb ik onderzocht en in een tabel verwerkt. Het antwoord op de deelvraag hoe je ervoor kan zorgen dat de informatie die de app. biedt ook beschikbaar is als er geen internet verbinding mogelijk is, zal aan de hand van de onderzoeken naar HTML5 en het Android en iOS platform behandeld worden. De app. willen we zo up-to-date mogelijk houden op festivals. Hierdoor is het noodzaak dat de app. een internetverbinding heeft om bijvoorbeeld het laatste nieuws op te halen. Het probleem waar we hier tegenaan lopen, is dat er niet op ieder Festivalinfo mobiele applicatie

14 van 65

festival altijd even goed bereik is door de drukte. Hierdoor bestaat de kans dat de app. dus niet te bekijken is zonder internetverbinding. Dit willen we opvangen door een techniek te zoeken die ervoor zorgt dat de app. ook gewoon blijft werken als er geen internetverbinding mogelijk is. Hiervoor kunnen we gebruik maken van twee nieuwe HTML5 technieken: Application Cache en Web SQL Storage. Via Application Cache is het mogelijk om van te voren de pagina’s aan te geven die lokaal op de telefoon opgeslagen zullen worden in het cache en deze worden dan aangeroepen als je de pagina bezoekt zonder netwerkverbinding. Het nadeel van het gebruik van deze techniek, is dat je eerst de pagina al een keer bezocht moet hebben voordat deze ook offline beschikbaar is. Web SQL Storage laat je gegevens opslaan in een lokale database. Met deze techniek is het mogelijk om via een knop en aantal gegevens op de telefoon op te slaan, zonder dat je die informatie eerder hebt bekeken. Zo is het bijvoorbeeld niet wenselijk dat je eerst alle artiesten pagina’s van een festival moet bekijken, wanneer je deze informatie later opnieuw wilt bekijken als er geen netwerkverbinding is. Het nadeel van het gebruik van deze techniek, is dat Web SQL Storage niet meer verder ontwikkeld wordt en daardoor dus beperkt wordt ondersteund door huidige browsers. Omdat beide technieken een aantal voordelen en nadelen bevat, zullen we ze beiden gebruiken in de applicatie. Als je browser bijvoorbeeld geen Web SQL Storage ondersteunt, wordt je nog steeds de mogelijkheid geboden om de artiesten pagina’s die je later wilt terug lezen eerst te bezoeken, zodat ze via Application Cache nog wel lokaal op de mobiele telefoon worden opgeslagen. Als laatste moet er een keuze gemaakt worden tussen twee verschillende type mobiele applicaties: een native applicatie en een web* applicatie. Hieronder zijn de voor- en nadelen te zien van beide types: Native applicatie Voordelen: • Volledige beschikking over het toestel. Dit betekent dat je gebruik kan maken van bijvoorbeeld de camera en GPS. • Hoge snelheid, omdat er geen derde partij tussen zit, zoals internet. • Een native app. is te installeren op je mobiele telefoon en daardoor dus te verspreiden via de App. Store van iPhone en de Marketplace van Android. Nadelen: • Voor iedere operating system moet een eigen app. ontwikkeld worden. Dit neemt veel tijd in beslag en zal daardoor ook veel kosten. • De app. moet goedgekeurd worden door Apple als je hem beschikbaar wil stellen in de App. Store en door Google als je hem beschikbaar wil stellen via Marketplace. • Updates zijn pas zichtbaar na het downloaden van een nieuwe versie van de app. Web applicatie Voordelen: • Er hoeft maar 1 app. ontwikkeld te worden die op Android en iOS te gebruiken is. • Web technieken als HTML en PHP* kunnen gebruikt worden voor de ontwikkeling. • Updates zijn meteen te zien als je de app. opnieuw bezoekt. Nadelen: • Je kunt geen gebruik maken van de camera, GPS, etc.


15 van 65

•

Omdat je de app. niet kan aanbieden via Marketplace en de App Store, moet je zelf reclame maken om je app. onder de aandacht te brengen.

Beide typen bieden een aantal voordelen. Zo kan je met een native applicatie gebruik maken van bijvoorbeeld de camera en GPS. Daar tegenover staat dat je voor ieder besturingssysteem dat je wilt ondersteunen een aparte applicatie zal moeten maken, wat bij het gebruik van een web applicatie niet nodig is. De voordelen van beide type mobiele applicaties zijn samen te voegen door gebruik te maken van het HTML5 app. platform PhoneGap. De reden dat er gekozen wordt om voor een hybride oplossing, is dat we zo veel mogelijk mensen willen voorzien van deze mobiele festival applicatie, maar ook de mogelijkheid willen behouden om gebruik te maken van de menu knop en de GPS functie voor locatiebepaling. Het native onderdeel biedt ook de mogelijkheid om de app. aan te bieden via de Apple App. Store en Google Marketplace. Op deze manier kunnen mensen die niet bekend zijn met Festivalinfo.nl, ook de app. hier vinden als ze zoeken naar een festival-app. van het festival waar zij naartoe gaan. Het web onderdeel zorgt ervoor dat er snel updates kunnen worden doorgevoerd en je altijd op de hoogte bent van het laatste nieuws en veranderingen in bijvoorbeeld de line-up. Een nadeel van een hybride oplossing is dat Google en Apple een aantal eisen stellen aan de app. voordat deze ook in de App. Store en Marketplace mag komen. Ook zal je altijd moet blijven ontwikkelen voor verschillende platformen en dus ook kennis van andere programmeertalen dan HTML moet bezitten. De app. zal gebruik gaan maken van de bestaande database van Festivalinfo.nl. De reden dat hiervoor gekozen wordt, is dat hier alle festivalinformatie al beschikbaar is. Als we hier een aparte database voor zouden aanmaken, moet al het festivalnieuws twee keer worden geplaatst in twee verschillende databases. Daarnaast is er wel de mogelijkheid om nieuwe tabellen toe voegen aan de database, die ik dan weer kan linken aan bestaande tabellen. Dit biedt ook als voordeel dat ik gebruik kan maken van artiest id’s en festival id’s. Als ik gebruik zou maken van een nieuwe database en we willen een festival naam oproepen, zal deze informatie eerst handmatig in de database moeten worden gezet. Deze informatie en meer staat al in de huidige database van Festivalinfo en maakt het dus makkelijker en sneller om hier gebruik van te maken. Een app. voor een specifiek festival moet ook makkelijk aan te maken zijn door mensen zonder kennis van programmeren en coderen. Hiervoor zal er een CMS gemaakt worden. Het resultaat van de antwoorden op de deelvragen zijn de hoofdelementen van deze opdracht, vormen samen het antwoord op de hoofdvraag.

4.3

Methodiek

Al het onderzoek dat ik voor deze opdracht zal doen, valt onder het type constructief onderzoek. Dit houdt in dat het onderzoek dient als voorbereiding voor het opzetten van een plan dat later uitgevoerd zal worden. Als onderzoekmethodes zal ik gebruik maken van surveyonderzoek en secundaire analyse. Het surveyonderzoek doe ik aan de hand van een enquête. Met deze enquête wil ik onderzoeken wat de doelgroep (festival bezoekers) vinden van het huidige aanbod aan festival-apps, wat ze hier goed en slecht aan vinden en wat ze graag terug zien in de app. die ontwikkeld wordt door Festivalinfo zelf. Festivalinfo mobiele applicatie

16 van 65

De andere onderzoeken vallen onder secundaire analyse. Bij deze methode wordt gebruik gemaakt van bestaande onderzoekgegevens, die al door andere onderzoekers zijn verzameld. Ik heb gekozen voor deze methode, omdat dat hier een ruim aanbod van beschikbaar is op het internet. Deze bestaande data kan ik dan met elkaar vergelijken en waar mogelijk ook zelf testen. Daarnaast is het gezien de tijd niet mogelijk om zelf volledige onderzoeken te doen naar alle nieuwe technieken. Ook bezit ik hier de apparatuur niet voor, zoals alle mogelijke mobiele browsers, platformen e.d.


17 van 65

5.

Onderzoek

Dit hoofdstuk zal alle onderzoeken bevatten die ik vooraf heb gedaan aan het ontwikkelen van de applicatie zelf. Ten eerste heb ik een enquête opgesteld, waarna ik ben gaan kijken naar huidige festival applicaties. Vervolgens heb ik onderzoek gedaan naar HTML5 en hoe dit toe te passen is op Android en iOS platformen. Bij alle staafdiagrammen geeft de verticale as het percentage weer van het aantal mensen dat voor die optie heeft gekozen.

5.1

Enquête

Om een beter inzicht te krijgen in wat festivalgangers verwachten van een mobiele festival-applicatie, heb ik een enquête met een dertiental vragen in elkaar gestoken. Deze enquête heeft een aantal weken gedraaid op www.festivalinfo.nl. De vragen in de enquête heb ik opgedeeld in een aantal categorieën en zal ik ook aan de hand van deze categorieën uitgebreid behandelen. Een overzicht van alle vragen is te vinden in Bijlage 1. In totaal hebben er 1077 mensen de enquête ingevuld. Hiervan is 58% man en 42% vrouw. De meeste mensen die de enquête hebben ingevuld zijn tussen de 16 en 25 jaar out. In figuur 5.1 is te zien hoeveel procent van het totale aantal mensen die hebben meegedaan aan de enquête in welke categorie valt. 35 30 0 - 10 25

11 - 15 16 - 20

20

21 -25 15

26 - 30 31 - 40

10

41 - 50 51+

5 0 Leeftijd Figuur 5.1: Leeftijd


18 van 65

Besturingssysteem Als eerste wilde we weten wat de meest gebruikte telefoons zijn onder de bezoekers. Dit is van belang om te weten te komen voor welke platforms er ontwikkeld apps ontwikkeld moesten worden, zodat er zoveel mogelijk mensen gebruik kunnen maken van de app. Daarnaast hebben we ook gevraagd welke type telefoon ze gebruiken. Dit geeft meer inzicht in de schermgrootte en welke versie ze draaien van hun platform. Deze gegevens zijn terug te vinden in figuur 5.2 en 5.3. 30

25 Samsung Apple

20

Nokia HTC

15

Blackberry Sony Ericsson

10

LG Anders

5

0 Telefoon merk Figuur 5.2: Telefoon merk


19 van 65

45 40 35

Android

30

iOS SymbianOS

25

Blackberry OS 20

Sony Ericsson

15

Samsung Windows Phone

10

Other 5 0 Mobiel besturingssysteem Figuur 5.3: Mobiel besturingssysteem

Zoals af te lezen hierboven, zijn de twee meest gebruikte mobiele besturingssystemen Android en iOS. Op basis hiervan is besloten om voor Android en iOS dan ook een deel native te ontwikkelen, zodat deze via de Apple App-store en via de Android Marketplace te downloaden zijn. Op deze manier is het mogelijk wat extra functionaliteit aan te bieden, zoals een menu en lokaal opslaan voor offline gebruik. De scherm grootte van de gebruikers heb ik ook vergeleken met wat Android developers aanbieden op hun website en dit komt sterk met elkaar overeen.

Android screen sizes & densities

Normal / ldpi 1%

Small / hdpi 3% Normal / mdpi 18%

Normal / hdpi 72%

Small / ldpi 1% Xlarge / mdpi 2% Large / ldpi 0% Large / mdpi 3%

Figuur 5.4: Screen Sizes and Densities (bron: Android developers 03-10-2011 http://developer.android.com/resources/dashboard/screens.html) Festivalinfo mobiele applicatie

20 van 65

De meest gebruikte is Normal / hdpi met een resolutie van 480x800. Erop volgend is Normal / mdpi met een resolutie van 320x480 pixels. Om zoveel mogelijk mensen aan te spreken, is er voor geopteerd om de resolutie op minimaal 320x480 pixels er goed te laten uitzien en dat hij mee schaalt voor grotere resoluties.

Figuur 5.5: Resoluties per schermverhouding en pixel-dichtheid

Internet Belangrijk om te weten bij het ontwikkelen van een mobiele applicatie, is de beschikbaarheid van internet op de mobiele telefoon. Figuur 5.6 geeft weer hoeveel gigabyte dataverkeer aan internet de bezoekers hebben. Figuur 5.7 laat zien hoe vaak ze hun internet gebruiken. 30

25

20

< 1GB 1GB - 3GB

15

> 3GB Geen internet

10

Weet niet

5

0 Mobiel internet Figuur 5.6: Heb je internet op je mobiele telefoon?


21 van 65

80 70 60 50

Maandelijks Wekelijks

40

Dagelijks 30

Nooit

20 10 0 Internet gebruik Figuur 5.7: Hoe vaak maak je gebruik van internet op je mobiel?

Zoals te zien in figuur 5.6 zijn er nog redelijk veel mensen zonder internet of hebben ze geen idee hoe veel dataverkeer ze hebben per maand. Hierdoor is het zaak dat de app. zo min mogelijk vraagt van je internet en het liefst ook volledig of deels offline te gebruiken is. Festival-apps De belangrijkste vraag is natuurlijk of mensen al gebruik maken, of van plan zijn gebruik te maken van mobiele festival-apps. De resultaten hiervan vind u terug in figuur 5.8. 40 35 30

Ja, meerdere keren

25 Ja, eenmaal 20 15

Nee, maar dat ben ik wel van plan

10

Nee, dat zou ik nooit doen

5 0 Heb je wel eens een festival-app gebruikt? Figuur 5.8: Heb je wel eens een festival-app. gebruikt? Festivalinfo mobiele applicatie

22 van 65

Vijftig procent geeft aan in het verleden al eens een festival-app. gebruikt te hebben op hun mobiele telefoon. Ook geeft 34 procent aan het wel van plan te zijn. Op de vraag waar mensen de mobiele festival-app. het meest voor gebruikte, kwamen de volgende aspecten het vaakst voor: • Programma • Plattegrond • Timetable / Blokkenschema • Line-up • Laatste updates De meest voorkomende nadelen die de gebruikers ervaren waren: • Batterij verbruikt • Traag • Constante internet verbinding nodig (duur in het buitenland) • Niet beschikbaar voor iedere telefoon De gouden tips van gebruikers: • Offline beschikbaar • Meerdere festivals in 1 app. • Eigen programma samenstellen met bericht voordat artiest start • Less is more • Gratis • Met regelmaat updaten • Beschikbaar op de minder gebruikte telefoons / oudere telefoons

5.2

Bestaande festival-apps bekijken en vergelijken

Omdat ik zelf niet bekend was met mobiele applicaties, heb ik een smartphone* met Android aangeschaft en ben ik verschillende bestaande festival-apps gaan downloaden. Dit om meer inzicht te krijgen in het huidige aanbod aan festival-apps. Hierbij heb ik naar een aantal criteria gekeken: • Welke functies bevatten de apps • Hoe ziet de vormgeving eruit • Werkt de app. offline Welke functies bevatten de apps Het grootste deel van de festival-apps bevat dezelfde basis functies: nieuws pagina, blokkenschema, line-up, artiest informatie en de plattegrond. Nieuws pagina De eerste pagina waar je bij de meeste festival-apps op terecht komt is de nieuws pagina. Hier vind je de algemene informatie over het festival zelf. Bij een aantal apps is hier ook een twitter feed aan toegevoegd, zodat je recente updates van twitter kan lezen. Hiervoor is een internet verbinding wel verplicht.


23 van 65

Blokkenschema De apps bevatten ook allemaal een blokkenschema. Deze blokkenschema’s zijn per dag apart te bekijken. Een blokkenschema zorgt ervoor dat je in een oogopslag kan zien hoe laat een artiest moet optreden en op welk podium dit zal zijn. Een voorbeeld hiervan is te zien in figuur 5.9.

Figuur 5.9: Blokkenschema Graspop Metal Meeting 2011

Line-up De line-up bestaat uit een alfabetische lijst met alle artiesten die op dat festival zullen optreden. Vaak is er de mogelijkheid om zelf de lijst op bepaalde criteria te laten sorteren, zoals: de dag, het podium en het genre.

Artiest informatie Een aantal festival-apps bevat ook pagina’s met uitgebreide informatie over de artiest. Deze pagina’s zijn te bereiken door bij de line-up pagina te drukken op de naam van de artiest. Onder de artiest informatie is vaak te vinden wanneer, welk podium en hoe laat ze moeten optreden op het festival. In sommige gevallen staat er ook een korte biografie bij. Plattegrond Op de plattegrond van het festivalterrein valt te zien waar welk podia zich bevindt. Daarnaast geeft het vaak ook weer waar de EHBO post is, waar de wc’s zijn en waar eten en drinken te halen is. Vormgeving In de vormgeving van de apps zitten grote verschillen. De ene app. bevat alleen maar donkere kleuren, de andere juist hele felle kleuren. Wat de apps vaak wel gemeen hebben, is dat er bovenin een menu te vinden is om te navigeren door de verschillende pagina’s. Als er gebruik gemaakt wordt van veel verschillende afbeeldingen, zorgt dit er ook voor dat de app. een stuk trager laadt en te bedienen is. Werkt de app. offline? Het laatste punt waar ik op gelet heb bij de verschillende festival applicaties, is of deze goed werkt zonder een internet verbinding. Dit viel heel erg tegen. Bij meer dan 90% van de apps was alles slecht, of soms zelfs helemaal niet te openen en bekijken. Aangezien er op festivals meestal geen of beperkt internet verbinding te maken is, is het niet gewenst dat de app. niet bruikbaar is op het festivalterrein.

5.3

HTML5 + Android en iOS

Om meer inzicht te krijgen in de deelvragen “Wat zijn de mogelijkheden van HTML5 met betrekking tot het ontwikkelen van een mobiele app.?” en “Zijn er verschillen tussen het ontwikkelen voor Android en iOS?”, heb ik hier onderzoek naar verricht. Festivalinfo mobiele applicatie

24 van 65

HTML 5 HTML5 wordt steeds meer gebruikt als verzamelterm voor verschillende nieuwe web technieken. Hieronder valt versie 5 van HTML, die een aantal nieuwe elementen biedt om webdocumenten gestructureerd op te kunnen bouwen. HTML versie 5 heeft ook enkele nieuwe functionaliteiten zoals canvas. Hiermee kan een leeg vlak geplaatst worden waar met JavaScript* elementen mee gevisualiseerd kunnen worden. Daarnaast bevat HTML versie 5 ook audio- en videotags waarmee respectievelijk audio en video kan worden afgespeeld zonder dat hier een externe plug-in zoals Flash voor nodig is. Onder HTML5 worden vaak ook nieuwe JavaScript APIs gerekend. De Geolocation API is er hier een van. Met deze API is het mogelijk om de positie van een gebruiker te berekenen door middel van de lengte en breedte graad. CSS3* wordt ook gerekend onder de term HTML5. CSS wordt gebruikt om de vormgeving van webpagina’s los te koppelen van hun feitelijke inhoud en deze centraal vast te leggen. Browser ondersteuning Omdat HTML5 uit allemaal nieuwe technieken bestaat, worden deze nog niet ondersteund door alle browsers. Hierdoor moet er dus getest worden welke functionaliteiten bruikbaar zijn voor de browsers waar de app. het meeste op zal gaan draaien. In figuur 5.10 is af te lezen dat de meeste gebruikte browser in Nederland de afgelopen 12 maanden, de Android browser is. De iPhone browser volgt hier kort op. Ook uit de zelf gehouden enquête is te zien dat iOS en Android het meest gebruikte besturingssystemen zijn. Deze maken respectievelijk gebruik van de iPhone browser en de Android browser. Hierom hebben we gekozen om ons op deze twee browsers te richten.

Figuur 5.10: Mobiel browser gebruik in Nederland

Nu we de browsers weten waarop er ontwikkeld zal worden, moet er nog gekeken worden welke versies er het meeste gebruikt worden van die browser. Uit onderzoek van online-adverteerder Chitika is gebleken dat versie 4.1 en hoger het meest gebruikt worden op de iPhone. Bij Android wordt versie 2.3.3 door 60% van de gebruikers gebruikt. Versie 2.2 wordt nog door 30% gebruikt. Om te zorgen dat Festivalinfo mobiele applicatie

25 van 65

we zoveel mogelijk mensen de mogelijkheid bieden de app. te gebruiken, is bij Android gekozen voor versie 2.2.

Figuur 6.11: Mobiel browser gebruik Android en iPhone

In onderstaande tabel is weergegeven welke nieuwe HTML5 technieken door de verschillende browsers worden ondersteund. De meeste van deze technieken zijn getest op een telefoon met Android of iPhone. Als dit niet mogelijk was, zijn de tests op een emulator uitgevoerd. iPhone versie 4.1

Android versie 3.2

Application Cache Offline package installation

Web storage Persistent and session storage

Web SQL storage Persistent SQLite storage

Geolocation Geolocation & tracking using GPS, cells or Wi-Fi

Multimedia Video & Audio Players

Server-Sent Events EventSource pattern to maintain the connection to the server open

Web Sockets Newbidireccional protocol over HTTP

Web Sockets Newbidireccional protocol over HTTP

Web Workers Threading and background process communications

Canvas API 2D Drawing API

SVG Scalable Vector Graphics

Motion Sensors Accelerometer, Gyroscope, Magnetometer

HTML5 Form Virtual Keyboards Text Inputs with different keyboards

HTML5 Form New Controls At least: Date, Time, Month, Range

Touch Events Festivalinfo mobiele applicatie

26 van 65

Touchstart, touchend, touchmove, touchcancel

CSS 3 BASIC Opacity, backgrounds, text effects, rounded corners

CSS3 Transforms 2D Rotate, translate, scale, skew, matrix

CSS 3 Transforms 3D Scale3d, translate3d, Perspective, Backface

CSS3 Transitions Animations between two states

CSS3 Animations Animations with keyframes

Viewport definition Meta tag support

Position: fixed support Ability to maintain an element fixed in the viewport while scrolling / zooming

Remote Debugger Ability to attach a remote debugger, such as Web Inspector

XMLHttpRequest 2.0 AJAX 2.0: upload files, progress

Navigation Timing API Performance events for WPO

Notifications API Backgrounds alert notifications

Network Information API Connection Type: 2G, 3G, 4G, WiFi

File API Opening local files through input type

CORS Crossing origin Resource Shareing, for cross domain AJAX

request HTML Media Caputure Taking pictures, record video and audio from an input file type

IndexedDB Agnostic database system (replacement for Web SQL)

Figuur 5.12: HTML5 browser ondersteuning voor iPhone en Android

De belangrijkste elementen van HTML5 die gebruik zullen worden voor de app. zijn: • Application cache Met application cache is het mogelijk om bezochte webpagina’s op te slaan op de mobiele telefoon zodat deze gegevens ook beschikbaar worden als er geen internet verbinding aanwezig is. Dit gebeurdt met het zogeheten appcache bestand. Appcache roep je aan in de html tag: ...

Hoe Application cache is opgebouwd, is te zien in Bijlage 2.


27 van 65

• Web SQL storage Door gebruik te maken van web SQL storage wordt het mogelijk om online database bestand lokaal op de mobiele telefoon op te slaan. Dit zullen we gaan gebruiken voor de artiest informatie. Om deze informatie op een festival te lezen zonder internet, is het niet gewenst om eerst alle 100+ artiesten pagina’s een keer te openen, zodat deze informatie offline beschikbaar word. Dankzij web SQL storage kan er op een knop worden gedrukt om alle artiest informatie op je mobiel op te slaan. Als je dan offline bent, is het mogelijk om deze informatie op te vragen door naar de artiesten informatie pagina te gaan. Deze pagina detecteert zelf of je internet hebt en of er data lokaal staat. • Geolocation Met geolocation is het mogelijk om je huidige locatie op te vragen en deze weer te geven op een kaart. Op deze manier kan je zien waar je jezelf op het festival bevindt. • CSS3 CSS3 wordt gebruikt om alle pagina’s mooi weer te kunnen geven. Dankzij de nieuwe mogelijkheden in versie 3, is het mogelijk om teksten schuin op je beeld te laten printen, schaduwen toevoegen, vaste posities instellen, enz. HTML5 app platforms Voor het ontwikkelen van een mobiele app. zijn er twee verschillende mogelijkheden: een native app. en een web app. Bij een native app. draait de gehele applicatie op de mobiel zelf en zal er ontwikkeld moeten worden met de SDK* van het bijbehorend toestel. Met een web app. is het mogelijk om de app. te ontwikkelen met web-talen zoals PHP en HTML. Native applicatie Voordelen: • Volledige beschikking over het toestel. Dit betekent dat je gebruik kan maken van bijvoorbeeld de camera en GPS. • Hoge snelheid, omdat er geen derde partij tussen zit, zoals internet. • Een native app. is te installeren op je mobiele telefoon en daardoor dus te verspreiden via de App. Store van iPhone en de Marketplace van Android. Nadelen: • Voor iedere operating system moet een eigen app. ontwikkeld worden. Dit neemt veel tijd in beslag en zal daardoor ook veel kosten. • De app. moet goedgekeurd worden door Apple als je hem beschikbaar wilt stellen in de App. Store en door Google als je hem beschikbaar wilt stellen via Marketplace. • Updates zijn pas zichtbaar na het downloaden van een nieuwe versie van de app. Web applicatie Voordelen: • Er hoeft maar 1 app. ontwikkeld te worden die op Android en iOS te gebruiken is. • Web technieken als HTML en PHP kunnen gebruikt worden voor de ontwikkeling. • Updates zijn meteen te zien als je de app. opnieuw bezoekt. Nadelen: • Je kunt geen gebruik maken van de camera, GPS, etc. Festivalinfo mobiele applicatie

28 van 65

•

Omdat je de app. niet kan aanbieden via Marketplace en de App Store, moet je zelf reclame maken om je app. onder de aandacht te brengen.

Beide methodes bieden een aantal sterke voordelen. Het beste zou zijn om deze te kunnen combineren. Hiervoor zijn er een aantal producten beschikbaar. Het gebruik van beide methodes maakt het mogelijk om te profiteren van de voordelen van native apps en web apps. Figuur 5.13 laat de meest gebruikte producten zien en welke platformen ze ondersteunen. In figuur 5.14 is te zien of ze HTML5, CSS3 en JavaScript ondersteunen. Android

iOS

BlackBerry

Bada

WindowsPhone

Symbian

Sencha Tourch M-Project Titanium jQTouch JQuery Mobile NimbleKit Wink PhoneGap Figuur 5.13: App platform ondersteuning

HTML 5

CSS 3

JavaScript

Sencha Tourch M-Project Titanium jQTouch JQuery Mobile NimbleKit Wink PhoneGap Figuur 5.14: App platform HTML5, CSS3 en JavaScript ondersteuning

Als we naar onze twee hoofd mobiele platformen kijken, dan zien we dat alle onderzochte producten ondersteuning bieden aan Android en iOS. Het mooiste zou zijn als er in de toekomst verder ontwikkeld kan worden voor meerdere besturingssystemen. In dat geval blijven er twee over: JQuery Mobile en PhoneGap. Vervolgens is het belangrijk om te weten of ze ook HTML5, CSS3 en JavaScript ondersteunen. Kijkend naar JQuery Mobile en PhoneGap, zien we dat alleen PhoneGap alles ondersteund. Voor de ontwikkeling van de mobiele festival applicatie zal er dus gewerkt worden met PhoneGap. Omdat het doel is dat zo veel mogelijk mensen gebruik kunnen maken van de app, hebben we in eerste instantie gekozen voor het maken van een web applicatie. Dit zorgt ervoor dat er maar één applicatie ontwikkeld hoeft te worden die via je mobiele browser te bezoeken is. Een web-app . is ook realtime te updaten. Dit houdt in dat de gebruiker niet handmatig updates hoeft te installeren. Dit gebeurt automatisch als je de webpagina opnieuw bezoekt.


29 van 65

De nadelen die een web-app. met zich meebrengt zijn voor deze app. geen groot probleem. Het gebruik van GPS, de camera en notificaties, zijn niet de hoofdfuncties waar gebruik van gemaakt gaat worden. Het zijn leuke extra’s, maar niet noodzakelijk voor het eindproduct.


30 van 65

6.

Ontwerp

Op basis van de analyse en het onderzoek worden in dit hoofdstuk de functionele en technische aspecten van de opdracht in detail behandeld. Dit zal ik doen aan de hand van een functioneel en technisch ontwerp.

6.1

Functioneel ontwerp

Doel Het doel van de app. is ervoor te zorgen dat festivalgangers altijd up-to-date zijn over het laatste nieuws en andere informatie van hun favoriete festivals in Nederland en België. Doelgroep De doelgroep waar de app. voor ontwikkeld wordt, zijn bezoekers van Nederlandse en Belgische festivals die in het bezit zijn van een Android of iOS smartphone. Afhankelijkheden van andere applicaties Voor de ontwikkeling van de app. ben ik afhankelijk van de aansluiting op het bestaande CMS van Festivalinfo en de daarbij behorende databases. Omdat op de website van Festivalinfo alle nieuws al gecategoriseerd wordt, is het sneller en makkelijker om daarom ook gebruik te maken van die database. Als dat niet zou gebeuren, zou alles dubbel op moeten gedaan worden. Hierdoor zal ik mij moeten schikken naar de huidige database structuur. Overzicht pagina’s Hieronder is een overzicht van de pagina’s die de app. zal bevatten. Deze pagina’s zijn gebaseerd op de eisen, randvoorwaarden en de resultaten van de enquête. Hoe deze pagina’s met elkaar in verbinding staan, is te zien onder het kopje Flowchart. Homepage

Dit is de pagina die je te zien krijgt bij het openen van de app. Via deze pagina kan je navigeren naar Nieuws, Festivals en Artiesten.

Nieuws

Deze pagina geeft alle nieuws over festivals in Nederland en België.

Info

Hier vindt je informatie over de app. zelf en over Festivalinfo. Ook is hier ruimte voor sponsormogelijkheden.

Festivals

Een lijst met alle festivals in Nederland en België. Als er achter het festival een vink (√) staat, betekent dit dat er meer informatie over dit festival in de app. beschikbaar is. Hier kan dan op geklikt worden en word je doorgestuurd naar een nieuwe pagina met de informatie over het festival.

Festival X

Na het klikken op een festival zal je op deze pagina terecht komen. Op de pagina is nieuws te zien met betrekking tot het festival en kan je navigeren naar de volgende pagina’s:

Artiesten


Hier staan alle artiesten die aanwezig zijn op het festival op alfabetische volgorde. 31 van 65

Blokkenschema

Het blokkenschema geeft aan op welke dag, welk podium en op welke tijd de artiesten zullen optreden.

Plattegrond

Dit is de plattegrond van het festival. Hierop zijn de podia, bonnenverkooppunten, stands met eten en drinken, wc’s, etc. te vinden.

Twitter

Hier is de Twitter-feed van het betreffende festival te vinden.

Info

Op deze pagina komt alle overige informatie over het festival te staan. Zoals wat het festival is, waar het is, reisinformatie, enz.

Functionaliteit De functionaliteiten zal ik classificeren naar prioriteit aan de hand van de MoSCoW-methode*. Dit MoSCoW is voortgekomen uit de eisen en randvoorwaarden, die aan het begin van de stageperiode zijn afgesproken. Daarnaast is ook gekeken via de enquête wat de doelgroep graag terug ziet in de app. Must have • Welk festival is wanneer • Wie speelt er op welk festival • Festivalinfo.nl nieuws Should have • Blokkenschema artiesten met tijd van optreden • Plattegrond festival • Inzoomen • Sliden naar vorige en volgende pagina Could have • Blokkenschema met favorieten uitgelicht • Tip vrienden naar welk festival je gaat • Uitgebreide artiest informatie Would have • Stel herinnering in voor mijn favoriete artiesten • Laat mijn vrienden weten waar ik ben op het festival (GPS)


32 van 65

Flowchart De volgende afbeelding geeft schematisch in een flowchart weer hoe de pagina’s met elkaar in verbinding staan:

Artiesten

Nieuws

Homepage

Festivals

Info

Artiest X

Blokkenschema

Festival X

Plattegrond

Twitter

Info Figuur 6.1: Flowchart Festivalinfo-app.


33 van 65

Wireframes Omdat het erg belangrijk is dat de informatie in een duidelijke en intuïtieve manier aan de gebruiker wordt gepresenteerd, zijn er wireframes gemaakt. In een wireframe wordt aangegeven welke positie de verschillende elementen krijgen op het scherm.

Figuur 6.2: Wireframe homepage


Figuur 6.3: Wireframe Nieuws

34 van 65

Figuur 6.4: Wireframe Festivals

Figuur 6.5: Wireframe Festival X

Figuur 6.6: Wireframe Festival X Nieuws

Figuur 6.7: Wireframe Festival X Time Table


35 van 65

Figuur 6.7: Wireframe Festival X Line-up

6.2

Figuur 6.8: Wireframe Festival X Map

Technisch ontwerp

Na het uitvoeren van een onderzoek naar het gebruik van een native app. en een web app (hoofdstuk 5.3 – blz. 28), is er in overleg met de opdrachtgever gekozen om een combinatie van een native en web app. te bouwen. Beide methodes bieden een aantal sterke voordelen. Dankzij het programma PhoneGap is het mogelijk om een combinatie te maken van een native én een web app. Op deze manier kan je profiteren van de meeste voordelen van beide methodes. Zo kan er gebruik gemaakt worden van de Android Market en App Store van Apple, de camera kan gebruikt worden, je kunt van pagina wisselen door middel van het Touch screen en gebruik maken van de cache geheugen van de telefoon. PhoneGap biedt de mogelijkheid om via een native app. een link te leggen naar het web. Hierdoor kan je webpagina’s bekijken in je native app. Een nadeel zal blijven dat er nog een deel apart voor elke telefoon ontwikkeld zal moeten worden. Ook zullen updates van het native deel alsnog als update gedownload moeten worden. Daar tegenover staat wel dat van het web gedeelde snel updates kunnen doorgevoerd worden. De app. maakt voor het grootste deel gebruik van het web gedeelte. Technieken Hieronder zal ik de technieken die gebruikt gaan worden tijdens de ontwikkeling van de mobiele applicatie behandelen:


36 van 65

HTML

HTML zal de basis vormen voor het ontwikkelen van de mobiele applicatie. Het is de standaard op het web. Recentelijk is het uitgebreid met nieuwe elementen (HTML5). Deze nieuwe elementen maken het mogelijk om bijvoorbeeld dynamische content weer te geven zonder gebruik te hoeven maken van externe plug-ins zoals flash.

CSS

Dit is de opmaaktaal voor het vormgeven van de app. Met behulp van CSS is het mogelijk om op een snelle en overzichtelijke manier ervoor te zorgen dat iedere pagina dezelfde structuur en vormgeving heeft. Ook CSS heeft sinds kort een aantal nieuwe elementen aan zijn repertoire toegevoegd.

PHP

Deze scripttaal wordt uitgevoerd op de server en zorgt voor de communicatie tussen de HTML website en de MySQL* database.

MySQL

MySQL wordt gebruikt voor het ontwikkelen van de databases. Dit database systeem wordt ondersteund door PHP, waardoor het perfect samen te gebruiken is. Een database is handig om heel veel verschillende data te gebruiken. Daarnaast is deze database beschikbaar voor meerdere gebruikers en hoeft daardoor maar een keer ingevuld te worden.

JavaScript

De scripttaal die gebruikt wordt voor het native ontwikkelen op Android is JavaScript. Ook zorgt JavaScript voor interactie met de gebruiker.

Smarty

Smarty is een PHP template engine. Dit zorgt ervoor dat je je HTML code kan scheiden van je PHP code en van je grafische vormgeving. Op deze manier is er overzichtelijk te werken en kunnen vormgevers alles grafisch makkelijk aanpassen zonder dat ze zelf enige kennis moeten hebben van programmeren.

Databasemodel De onderstaande databasemodellen geven de datastructuur weer die nodig is om de mobiele applicatie te laten draaien. De data die gebruikt wordt in de app. is via het CMS toe te voegen aan de databases. Door gebruik te maken van databases is het mogelijk om de inhoud van de app. per festival makkelijk aan te passen. De database tabellen zijn gebaseerd op de eerder opgestelde eisen en randvoorwaarden, maar ook op de resultaten uit het functioneel ontwerp. Het databasemodel in figuur 6.9 geeft de datastructuur weer tussen de gebruikte database tabellen om nieuws weer te kunnen geven op de website. In de tabel “news” staat alle nieuws van Festivalinfo.nl, Podiuminfo.nl en Cabaretinfo.nl. Om alleen festivalnieuws te laten zien, zal er een link gelegd moeten worden met de tabel “news2site”. Deze tabel koppelt “news_id” aan “news2site_site_id”. Als het nummer van “news2site_site_id” gelijk is aan 1, dan betekent dit dat het nieuws van Festivalinfo.nl bevat. Om de bijbehorende afbeelding van het nieuws te plaatsen, zal er een link gelegd moeten worden tussen de tabellen “news” en “picture”.


37 van 65

Figuur 6.9: Databasemodel nieuws weergeven

In figuur 6.10 is het databasemodel weergegeven voor de app. als je aanwezig bent op een festival. De verschillende tabellen bevatten de informatie voor de blokkenschema’s, de artiesten die op het festival optreden, de verschillende vormgeving (via de tabel “app_css”), enz.

Figuur 6.10: Databasemodel festival-app.


38 van 65

7.

Proces en planning

In dit hoofdstuk wordt beschreven hoe het project procesmatig beheerst gaat worden.

7.1

Projectaanpak

Het project heb ik zelf gerealiseerd. Hierbij werd ik natuurlijk goed ondersteund door mijn bedrijfsbegeleider Rob van der Zwaan. Ik ben begonnen met onderzoek te doen naar nieuwe technieken en mogelijkheden van zowel HTML5 als het Android en iOS mobiele platform. Om inzicht te krijgen in de verwachtingen van de bezoekers van Festivalinfo.nl, heb ik een enquête gehouden. De resultaten hiervan zijn verwerkt en de belangrijkste feedback is geïmplementeerd in de app. zelf. Als laatste is de mobiele applicatie, voor het Android en iOS platform, ontwikkeld samen met een CMS om de verschillende festival pagina’s aan te maken en vorm te geven. Dit alles is getest door mezelf, mijn collega’s en de opdrachtgever. De urenverantwoording was ik zelf verantwoordelijk voor. Deze zijn dagelijks bijgehouden in een Excelbestand en worden tijdens het voortgangsgesprek met de opdrachtgever besproken.

7.2

Strokenplanning

In figuur 7.1 is een afbeelding te zien van de Gantt-chart die ik heb gemaakt voor mijn stage. Om de taken wat duidelijker te maken, heb ik deze in figuur 7.2 los van de strokenplanning gehaald. Op deze manier zijn de taken beter leesbaar. De bovenste taak (Stage) geeft aan hoe lang de totale duur van de stage is. In figuur 9.2 is één dag rood gekleurd. Dit is 2e Kerst en dus een vrije dag. Door het rood te kleuren valt hij duidelijk op en kan ik er rekening mee houden dat ik die uren een andere dag moet inplannen. De twee lichtblauwe ruiten staan voor milestones. Dit zijn de Alpha en Bèta release van de mobiele website en de Festivalinfo-app. De donker blauwe ruit staat voor de week waarin er een Noorderslag presentatie is, hier zal de app. geshowd worden aan publiek.


39 van 65

Figuur 7.1: Gantt-Chart

Figuur 7.2: Gantt-chart - data

Tijdens het verloop van de stageperiode ben ik niet veel afgeweken van de planning die aan het begin van de stageperiode is opgesteld. Soms was ik wat langer bezig met een onderdeel. Maar dit werd gecompenseerd door onderdelen waar ik soms een dag langer mee bezig was.


40 van 65

De deadline voor een eerste versie die op Noorderslag te zien was, was ook op 19 december af. Hierdoor was er genoeg tijd om deze versie te testen met collega’s.

7.3

Calculatie uren en kosten

Aan dit project heb ik 40 uur per week gewerkt. Dit komt neer op 8 uur per dag, 5 dagen per week. De stage periode duurde 21 weken (5 maanden). Een 40 uur hiervan heb ik aan dit scriptie gewerkt. Dit brengt het totaal aantal uren op 800. Voor de gemaakte personeelskosten ga ik uit van het gemiddelde brutoloon van een net afgestudeerde Bachelor of Engineering. Dit gemiddelde ligt rond de € 2100,00 per maand. Een project van 800 uur kost aan personeelskosten dan: € 10500,00. Hieronder is een lijst van alle materiaal dat nodig was voor de realisatie van dit project: • Windows computer € 968,00 • Apple computer € 1136,45 • Mobiel met Android € 424,00 • Mobiel met iOS € 579,00 • Overige € 500,00 € 3607,45 Aan het project heeft ook nog een vormgever gewerkt. Deze heeft hier 10 uur aan besteed, met een salaris van €10,00 per uur. Dit komt neer op €100,00. Mijn baas/opdracht gever heeft natuurlijk ook tijd gestoken in het project door mij te begeleiden. De geschatte tijd hiervoor leg ik op 15% van mijn totale tijd: 120 uur. Een gemiddelde Bachelor of Engineering verdient € 15,63 per uur. Wat een totaal van € 1875,00 is. Tellen we deze kosten bij elkaar op, heeft de project rond de € 15982,45 gekost.


41 van 65

8.

Realisatie

Dit hoofdstuk zal beschrijven hoe ik tot mijn deel- en eindresultaten ben gekomen.

8.1

Globale fasering

Het project heb ik via de volgende fases doorlopen: 1. Overleggen met de opdrachtgever 2. Onderzoek 3. Ontwikkelen mobiele website 4. Ontwikkelen CMS 5. Testen website 6. Ontwikkelen mobiele applicatie 7. Testen van de applicatie.

8.2

Realisatie per fase / mijlpaal

8.2.1 Overleggen met de opdrachtgever Aan het begin van de stage ben ik gaan zitten met mijn opdrachtgever om de opdracht tot in detail te bespreken. Tijdens dit gesprek, hebben we een brainstormsessie gehouden waarin we de functionaliteiten van de app. hebben besproken. Op basis hiervan is het functioneel ontwerp gemaakt. Daarin valt ook te zien hoe de interface is opgebouwd en hoe de gebruiker de app. zal doorlopen. Vervolgens heb ik een technisch ontwerp gemaakt, waarin beschreven wordt welke technieken er nodig zijn om een mobiele applicatie te ontwikkelen. Ook heb ik een model voor de database ontworpen. Daarna heb ik een grafisch ontwerp gemaakt op basis van de wireframes uit het functioneel ontwerp. Het grafisch ontwerp is nog een aantal keren aangepast tijdens latere fases na feedback. Dit was mogelijk, omdat ik mij eerst heb bezig gehouden met de techniek achter de applicatie. 8.2.2 Onderzoek Om een beter inzicht te krijgen in wat festivalgangers en de bezoekers van festivalinfo.nl vinden van het huidig aanbod aan mobiele festival applicaties en wat zij graag zouden terug zien in de mobiele applicatie van Festivalinfo, heb ik een enquête opgesteld. De enquête vragen zijn te vinden in bijlage 1, de resultaten van de enquête worden in hoofdstuk 5.1 behandeld. Zelf was ik ook nieuw in de wereld van de mobiele festival applicatie. Om die reden ben ik zelf een onderzoek gestart naar het huidige aanbod aan mobiele festival applicaties. Aan de hand van de gestelde eisen en randvoorwaarden heb ik de volgende drie criteria gesteld waar ik de apps op heb beoordeeld: • Welke functies bevatten de apps • Hoe ziet de vormgeving eruit • Werkt de app. offline De resultaten van dit onderzoek is te vinden in hoofdstuk 5.2.


42 van 65

Omdat HTML5 en de ontwikkeling voor Android en iOS voor mij helemaal nieuw waren, heb ik hier ook een onderzoek naar verricht. Bij de nieuwe technieken van HTML5 heb ik mij vooral gericht op degene die van belang zijn bij het ontwikkelen op mobiele telefoons. De onderzoeksresultaten zijn te vinden in hoofdstuk 5.3. 8.2.3 Ontwikkelen mobiele website Omdat het via PhoneGap mogelijk wordt om een native app. te creëren die zorgt dat je internetpagina’s kan bekijken binnen je app, is er besloten om eerst een volledige mobiele website te ontwikkelen. Het voordeel van een volledige online website, is dat deze ook bereikbaar is voor mensen die geen Android en iOS hebben via hun eigen mobiele browser. De website is ontwikkeld met behulp van Smarty. Smarty is een php template engine. Deze zorgt ervoor dat je je HTML code kan scheiden van je php code en van je grafische vormgeving. Op deze manier is er overzichtelijk te werken en kunnen vormgevers alles grafisch makkelijk aanpassen zonder dat ze zelf enige kennis moeten hebben van programmeren. De website is ontwikkeld aan de hand van het vooraf gemaakte functioneel en technisch ontwerp. Ik had zelf nog nooit met Smarty gewerkt en dit maakte het ontwikkelen van de website een uitdaging. Zelf was ik gewend om mijn PHP, HTML en JavaScript in een bestand te zetten. Maar met Smarty is het de bedoeling dat je werkt met een hoofdpagina waar je PHP code in staat. Daarnaast heb je een template file. Hierin wordt met HTML de lay-out van de pagina bepaald. Als derde zijn er de include bestanden. Hierin wordt bijvoorbeeld de connectie met een database gemaakt. Smarty biedt ook zijn eigen manier om Smarty variabelen aan te roepen. Zo kan je een PHP variabele toe kennen aan Smarty variabele: $festival_id = 123 //php variable $smarty->assign(‘festival_id’, $festival_id); De Smarty variabel is nu in je template bestand aan te roepen met {$festival_id}. Op de website moest ook een blokkenschema te bekijken zijn. Deze zal voor ieder festival automatisch gegenereerd moeten worden. Dit was een van de lastigste uitdagingen die ik heb gehad bij het ontwikkelen van de website, omdat er eerst een tijdlijn getekend moet worden waar vervolgens automatisch alle optredens op de tijdlijn moeten komen waar ze ook horen te staan. Dus als een optreden begint om 20:00, moet deze ook op de tijdlijn om 20:00 geplaatst worden. Ten eerste moest ik zorgen dat hij alle gegevens uit de database haalde die nodig waren en deze dan te laten zien op het scherm. Ieder optreden moet hierbij in een blok te komen staan, waaraan je meteen moet kunnen zien hoe lang een optreden duurt. Dit betekent dat we de tijd aan een aantal pixels moeten koppelen, bijvoorbeeld 1 minuut is 2 pixels. Dus als een optreden 1 uur duurt, zal de hoogte van het blok 120 pixels moeten zijn. In de database staat aangegeven hoe laat een optreden begint en hoe laat een optreden eindigt, maar niet hoe lang een optreden duurt. Dit zal dus berekend moeten worden per optreden. Zelf heb ik een functie gemaakt die dit uitrekent en de hoogte in pixels geeft. Deze functie is te vinden in Bijlage 3. In deze functie worden eerst alle uren omgezet naar minuten, om vervolgens de begintijd van de eindtijd af te halen. Omdat 1 minuut overeenkomt met 2 pixels, word alles vervolgens vermenigvuldigd met 2. Festivalinfo mobiele applicatie

43 van 65

Om de optredens op de goede plaats onder elkaar te zetten moet ook de tijd berekend worden tussen twee optredens. Dit kon niet meteen met bovenstaande functie gerealiseerd worden, omdat ik nu gegevens van twee verschillende optredens nodig heb: de eindtijd van optreden 1 en de begintijd van optreden 2. Om deze gegevens op te halen moet ik met PHP door de gehele database tabel lopen en kijken of de eindtijd van het eerste item kleiner is dan de begintijd van het volgende item. Als dit zo is moet hij de eindtijd van optreden 1 invullen in de bovenstaande functie als begintijd en de begintijd van optreden 2 invullen als eindtijd. Om vervolgens alles te herhalen tot hij alle gegevens van de database tabel heeft doorlopen. Dit script is te vinden in Bijlage 4. Het scherm van een mobiele telefoon is niet zo groot als van een computer. Om er toch voor te zorgen dat je veel nieuwsberichten op de hoofdpagina kan lezen, heb ik in JavaScript een code geschreven die ervoor zorgt dat als je op een nieuws titel drukt, het bericht uitklapt en je het volledig kan lezen. Als er een tweede keer op de titel gedrukt wordt, klap deze weer terug in. Tijdens het ontwikkelen van de website in HTML5 liep ik tegen een aantal problemen op. Deze problemen deden zich voornamelijk voor bij het gebruik van CSS. Ik wilde een afbeelding op die achtergrond die zich bleef herhalen over de horizontale en verticale as. De achtergrond moest één kleur hebben en doorzichtig zijn. Omdat het maar één kleur moest zijn, had ik gekozen om de afbeelding 1 x 1 pixel groot te maken, zodat er zo veel mogelijk bandbreedte en batterij bespaard wordt bij het laden van de afbeelding. Dit werkte perfect in alle browsers, behalve in Internet Explorer. Na gericht zoeken op internet, blijkt dat afbeeldingen voor Internet Explorer minimaal 3 x 3 pixels groot moet zijn. Na het vergroten van mijn achtergrondafbeelding werkte het ook goed in Internet Explorer. Met CSS3 is het ook mogelijk om objecten doorzichtig te maken. Dit kan met de ‘opacity’ functie. Hier kan je kiezen voor een getal tussen 0.0 en 1.0. Hoe dichter het getal bij 0.0 komt, hoe doorzichtiger het object wordt. Het nadeel hiervan is dat alle objecten (children) die binnen je doorzichtige object (parent) valt, ook doorzichtig worden. Daarom heb ik gekozen om gebruik te maken van afbeeldingen met een grootte van minimaal 3 x 3 pixels te gebruiken als achtergrond en deze dan in Photoshop doorzichtig te maken. Omdat de app. ook offline beschikbaar moet zijn, heb ik gebruik gemaakt van Web SQL Storage. Dit maakt gebruik van SQLite. Voor al mijn andere databases heb ik gebruik gemaakt van MySQL, omdat dit de standaard is op het web en een aantal dingen versimpeld aanbiedt. Zo bevat de tekst die ik ophaal uit de database van festivalinfo.nl de code
voor enters en soms ook ‘ en “ in namen en teksten. Om ervoor te zorgen dat
ook bij het printen op het scherm ook als enter te zien is, kan ik gebruik maken van de functie nl2br(). Om te zorgen dat er geen fouten optreden als er ‘ of “ in de tekst staan, kan er gebruik gemaakt worden van stripslashes(). Dit blijkt helaas niet te werken met SQLite. Hierdoor ben ik moeten gaan experimenteren hoe ik deze gegevens zonder fouten in mijn database kan zetten, zodat deze als er geen internetverbinding is, toch kan laten zien. Ik heb gekozen om met de functie str_replace() de tekens te vervangen die fouten opleverden. In de eerste array, genaamd $search, zet ik de tekens die vervangen moeten worden. De tweede array, genaamd $replace, die gemaakt moet worden, bevat de tekens die de eerste zullen vervangen. Als laatste heb ik de string $subject, dit zal de invoer zijn die uit de database gehaald wordt.


44 van 65

Op deze manier kan ik dus alle tekens die problemen opleveren vervangen door tekens die goed opgenomen kunnen worden in de database en deze dan netjes zichtbaar maken als er geen internetverbinding tot stand gebracht kan worden. 8.2.4 Ontwikkelen CMS Om te zorgen dat andere mensen ook apps kunnen aanmaken, moest er een CMS ontwikkeld worden. Een CMS is een Content Management System. Dit maakt het mogelijk dat mensen eenvoudig, zonder veel technische kennis, documenten en gegevens op internet kunnen publiceren. Voor de app. bestaat het uit de volgende onderdelen: Aanmaken app. Dit is de eerste pagina. Hier kan je aangeven dat je voor een festival een app. wilt maken. Bij het aanmaken van een app. moet je een aantal dingen opgeven: logo, map en CSS. •

• •

Logo Dit is een afbeelding die je kan uploaden en die wordt gebruikt om bij de app. te zetten als logo van het festival. Map Hier kan je een afbeelding van het festival terrein uploaden, die via de app. terug te kijken is. CSS Voor iedere app. kan je een aantal vooraf gemaakte CSS-en kiezen voor de vormgeving van de app. Je kunt ook zelf een CSS aanmaken van waaruit je een aantal onderdelen kan veranderen: - Achtergrond kleur - Tekst kleur - Letter type

Podia Bij een festival zijn er een aantal verschillende podia. Die kan je via het CMS ook aanmaken en beheren. Ieder podium dat je aanmaakt kan je ook een nummer mee geven. Dit nummer geeft aan in welke volgorde de podia weergegeven moeten worden. Zo geeft je het hoofdpodium nummer 1 mee en een klein podium bijvoorbeeld nummer 4. Als een podium is aangemaakt, kan je op het podium drukken en krijg je een overzicht van het podium. Hier kan je het nummer veranderen van hoe belangrijk het podium is. Ook kan je zien welke optredens er aan het podium gekoppeld zijn. Hier kan je kiezen om deze optredens 1 voor 1 te verwijderen of alles tegelijk. Het podium verwijderen is ook mogelijk. Als je op de knop drukt om het podium te verwijderen als er optredens aan gekoppeld zijn, krijg je een foutmelding dat je het podium niet kan verwijderen. Wanneer er geen optredens aan het podium zijn gekoppeld, krijg je een bericht te zien met de vraag of je zeker weet dat je het podium wilt verwijderen. Optredens Aan een festival kan je natuurlijk ook optredens toevoegen. Dit kan op twee manieren: 1 voor 1 Optredens kan je 1 voor 1 opgeven via de volgende velden: • Artiest


45 van 65

•

• • •

Als je begint met het typen van een naam, en die is al bekend in de database, laat hij suggesties zien van de mogelijke bands de beginnen met het stuk wat je al getypt hebt. Dag Hier krijg je een drop down menu met de dagen waarop het festival is en moet je de dag selecteren wanneer de artiest optreed. Start Hier kan je de tijd selecteren hoe laat het optreden start Einde Hier selecteer je de eindtijd van het optreden Podium Hier krijg je een drop down menu waar je kunt kiezen op welk podium de artiest optreedt. In het menu zijn de podia zichtbaar die zijn aangemaakt via het CMS. Staat het podium waar ze optreden er niet tussen, dan zal je deze eerste moeten aanmaken.

Meerdere tegelijk Het is ook mogelijk om meerdere optredens in een keer te uploaden. Dit kan via een Excel ’95 bestand met de extensie .xls. Een voorbeeld van hoe het Excel bestand eruit moet zien is te vinden in figuur 8.1. Als er een typefout in bijvoorbeeld de naam van de artiest zit, dan wordt dit herkend en krijg je een melding met welke artiesten nog niet zijn toegevoegd aan de database van het festival. Voor die artiesten wordt een lijst met suggesties gegeven waaruit je de juiste artiest kan selecteren, zodat deze alsnog opgenomen kan worden in de database. artist_name Volbeat Scorpions Epica Parkway Drive

day 1 2 1 3

start_time 20:40 23:30 22:25 16:15

end_time 22:15 01:00 23:35 17:25

podium_name Mainstage Mainstage Marquee 1 Marquee 2

Figuur 8.1: Meerdere artiesten toevoegen via Excel ‘95

8.2.5 Testen website Om ervoor te zorgen dat alles goed werkt, heb ik samen met mijn collega’s de functies van de website getest op een aantal belangrijke punten: staan de links naar de verschillende pagina’s goed, is de website goed te bekijken op kleinere schermen, is de website na één keer te bezoeken ook offline te bekijken en is de artiest informatie op te slaan en terug offline op te vragen. Het CMS is ook uitvoerig getest. Het volledig aanmaken van een festival-app. is een tiental keer gedaan om ervoor te zorgen dat alles werkt. Dit is door verschillende mensen gedaan, zodat we ook weten of alles logisch is voor mensen met weinig tot geen verstand van programmeren. 8.2.6 Ontwikkelen mobiele applicatie Toen de website volledig operationeel was, werd het tijd om de mobiele applicatie zelf te gaan ontwikkelen. Dankzij PhoneGap is het mogelijk om je native app. te linken naar een webpagina. Code op webpagina’s kunnen ook functies aanroepen die voor gedefinieerd zijn op het native platform.


46 van 65

Als eerste ben ik gaan ontwikkelen voor Android. De reden hiervoor is dat ik zelf een Android mobiel heb en er voor iOS meer voorwaarden zijn waar Festivalinfo nog niet aan voldeed. Zo is een op Intel gebaseerde Apple computer nodig met Mac OS X Snow Leopard (10.6) en een iOS ontwikkelaars certificaat van $99 per jaar. Android De Android applicatie heb ik ontwikkeld in Eclipse, omdat dit een Android emulator ondersteund. De taal waar mee geprogrammeerd wordt op Android is Java. Omdat er voor Android een deel native ontwikkeld wordt, kan er ook gebruik gemaakt worden van een aantal handige functies die de mobiele telefoon te bieden heeft: •

android.permission.INTERNET

Het aanroepen van deze functie laat ons gebruik maken van de internet connectie op de telefoon. Zonder dit zou de app. niet werken. •

android.permission.ACCESS_NETWORK_STATE

Om te kijken of de app. online of offline is, maken we hier gebruik van. Zo kunnen we verschillende dingen laten zien, afhankelijk van of er netwerk verbinding aanwezig is. •

android.permission.ACCESS_COARSE_LOCATION android.permission.ACCESS_FINE_LOCATION android.permission.ACCESS_LOCATION_EXTRA_COMMANDS

Om te kijken waar je je bevint op het festival, moet GPS beschikbaar worden via de app. Dit is mogelijk door bovenstaande ‘permissions’ aan te zetten •

android.permission.WRITE_EXTERNAL_STORAGE

Dankzij deze functie wordt het mogelijk gemaakt om onderdelen en zelfs hele webpagina’s op te slaan op het lokale geheugen van de mobiele telefoon. PhoneGap biedt ook zijn eigen API voor Android. Dit brengt als nadeel met zich mee, dat soms functies iets anders zijn dan de standaard Android functies. Dat bleek ook zo te zijn voor de zoom functie. Deze was niet werkend te krijgen met de standaard Android code en omdat PhoneGap nog een vrij nieuw product is en regelmatig updates uitbrengt, is er niet overal goede en soms helemaal geen documentatie over beschikbaar. Door te zoeken op internet naar oplossingen en zelf wat dingen proberen door bijvoorbeeld stukken van de standaard code wat aan te passen, is het me toch gelukt om te zorgen dat je met de app. in en uit kan zoomen. Bij de nieuws pagina is het niet gewenst dat je bij het in zoomen ineens opzij moet gaan scrollen om de volledige tekst te lezen. Daarom heb ik er voor gekozen dat de app. niet breder mag zijn dan de maximale breedte van de telefoon zelf. Dit zorgt ervoor dat de tekst altijd goed te lezen is. Bij de blokkenschema’s heb ik dit niet toe gepast. De reden hiervoor is dat er vaak veel podia zijn en je niet wilt dat alles te smal en daardoor niet meer leesbaar wordt. Het native gedeelte biedt ons ook de mogelijkheid om een menu in te bouwen, dat op te roepen is door op de menu knop te drukken op je eigen telefoon. Dit zorgt ervoor dat mensen op de vertrouwde manier van hun eigen mobiele telefoon kunnen navigeren op de website. Hieronder kunnen we ook wat algemene informatie pagina’s kwijt, die niet noodzakelijk zijn op de website. Zoals informatie over de app. zelf en informatie over festivalinfo.nl.


47 van 65

Bij het opstarten van de app. bestaat ook de mogelijk om een afbeelding te laten zien tijdens het laden van de app. Dit is een interessant aspect voor sponsors. Zo kunnen zij hier een reclame voor hun product laten zien.

iOS Op het moment van schrijven is er nog niet specifiek ontwikkeld voor iOS. Dit staat gepland voor de laatste 3 weken van de stage. Hier zullen net als bij Android een zoom functie, een menu en een opstartscherm voor gemaakt worden. Als de app. volledig af is, zal deze ook te downloaden zijn via de Apple App Store en Android Market Place. 8.2.7 Testen van de applicatie Het laatste wat gedaan moet worden aan de mobiele festival applicatie is deze grondig testen. Op dit moment is dit nog druk aan de gang. Iedere werknemer bij Festivalinfo heeft de laatste versie van de app. draaien op zijn mobiel en is gevraagd hier iedere dag volledig door heen te navigeren. Als er iets niet werkt, wordt dat doorgegeven aan mij en zal ik er een oplossing voor zien te vinden. Iedereen op het bedrijf heeft een andere telefoon. Hierdoor draait de app. dus ook op verschillende schermgroottes en kunnen we zien of alles netjes blijft werken op ieder type telefoon.


48 van 65

9.

Eindproduct

In dit hoofdstuk wordt het eindproduct van dit project beschreven. Het resultaat wordt vervolgens geëvalueerd. Dit wordt compleet gemaakt met een conclusie en een aanbeveling voor de opdrachtgever.

9.1

Resultaat

Het uiteindelijke eindproduct bestaat uit een mobiele Festivalinfo applicatie voor Android en iOS. Als ondersteuning is hiervoor een CMS gebouwd, die ervoor zorgt dat mensen met weinig kennis van programmeren ook festivals kunnen toevoegen aan de app. De uiteindelijke resultaten zal ik behandelen door antwoord te geven op de hoofd- en deelvragen die ik in mijn startverslag gesteld heb. Hoe ontwikkel je het beste een mobiele festival-app., die eenvoudig is in gebruik en een zo compleet mogelijk overzicht geeft, zoals een strokenplanning, nieuws overzicht en een plattegrond, van de verschillende festivals die je bezoekt? Wat zijn de mogelijkheden van HTML5 met betrekking tot het ontwikkelen van een mobiele app.? Dankzij een programma als PhoneGap, is het gebruik van HTML5 voor het programmeren van mobiele applicaties mogelijk geworden. Omdat ieder platform gebruik maakt van een andere programeer-taal, is er nu maar kennis nodig van één taal. Dit brengt met zich mee dat er ook maar één iemand aan de app. hoeft te werken voor alle platformen tegelijk. HTML5 biedt ook een aantal functies die gericht zijn op mobiel gebruik, zoals Geolocation. Hiermee is het mogelijk als je GPS op je mobiel hebt, je locatie te berekenen en deze bijvoorbeeld via Google Maps weer te geven. Voor een festival-app. biedt dit de mogelijkheid om je locatie op het festivalterrein weer te geven. Door de app. met HTML te coderen, kan iedereen deze via een internet browser bekijken. Dit helpt om een zo groot mogelijk publiek aan te spreken. Ook kan gebruik gemaakt worden van het nieuwe appcache en web SQL om data lokaal op te slaan op je mobiel om dit later, als je bijvoorbeeld geen internet verbinding hebt, op te vragen. Is de app. het beste te ontwikkelen als native app. of als web app.? Het doel is zo veel mogelijk mensen te bereiken met de app. Dit kan het beste door het als web app. aan te bieden, omdat mensen dan naar een website kunnen surfen via hun mobiele browser. Het grootste nadeel hiervan is dat de app. dan niet via de online winkels te downloaden is en je er geen eigen menu aan kan koppelen. Daarom is er gekozen om voor de twee meest gebruikte platforms, Android en iOS, een native app. te ontwikkelen. Hierdoor kunnen we zelf een menu koppelen aan de app. Deze app. is bovendien te downloaden in de Apple App Store en de Android Market Place en kan je direct openen van je mobiele telefoon zonder dat je eerst naar een webpagina moet navigeren. Zijn er verschillen tussen het ontwikkelen voor Android en iOS? Door gebruik te maken van PhoneGap, zijn er geen hele grote verschillen meer tussen het ontwikkelen voor Android en iOS. Bijna alles kan geprogrammeerd worden in HTML, PHP, MySQL en CSS. Festivalinfo mobiele applicatie

49 van 65

Voor het gebruik van het menu en de zoom in/uit functie zal nog native geprogrammeerd moeten worden. Waar je voor Android met object georiënteerd Java kan werken, moet er voor iOS gebruik van gemaakt worden van non-Objective C of C++. Hoe zorg je ervoor dat de informatie ook beschikbaar is als er geen internet verbinden mogelijk is? Dankzij de nieuwe HTML5 functies Application Cache en Web SQL-storage is het mogelijk om data lokaal op te slaan. Application Cache zorgt ervoor dat je met een .appcache bestand bezochte pagina’s in het cache geheugen kan opslaan. Deze wordt aangeroepen als er geen internet verbinding aanwezig is. Met Web-SQL-storage is het mogelijk om bepaalde gegevens op te slaan in een lokale database. In de app. wordt dit gebruikt om de artiest informatie uit de online MySQL database te halen en deze op te slaan in de lokale SQLite database. Hierdoor hoeft niet iedere artiesten pagina bezocht te zijn om deze informatie offline beschikbaar te stellen. Alle elementen die in het functioneel ontwerp als ‘must have’ en ‘should have’ zijn geclassificeerd, zijn in het eindproduct geïmplementeerd. Van ‘could have’ zit de uitgebreide artiest informatie ook in de applicatie verwerkt. De mobiele Festivalinfo-app. bevat de volgende mogelijkheden: • De homepage met het nieuws van Festivalinfo.nl • Een overzicht van de belangrijkste festivals in Nederland en België en of hier een app. voor beschikbaar is • Als er een app. beschikbaar is, kan je drukken op de festival naam en wordt je doorgestuurd naar de app. van het betreffende festival • Op de festivalpagina is een Twitter rss-feed te vinden • Algemeen festival informatie • Het blokkenschema met alle optredens per dag • Een plattegrond van het festival • Een lijst met alle artiesten die zullen optreden op het festival • Artiest informatie over alle artiesten die optreden • De mogelijkheid om alles op te slaan, zodat de app. ook offline beschikbaar word In figuur 9.1 is de uiteindelijk app. te zien. Op het eerste scherm is de intro pagina te zien. Hier kan je kiezen of je het algemene festival nieuws wilt zien, de festival pagina of info over de app. zelf. De tweede afbeelding krijg je te zien als je een festival kiest waar een app. voor bestaat. Als er op ‘Timetable vert’ gedrukt wordt, krijg je het derde scherm te zien.


50 van 65

Figuur 9.1 – Eindresultaat mobiele festival applicatie

9.2

Evaluatie

Het doel van de opdracht was een mobiele applicatie aanbieden die voor de belangrijkste festivals in Nederland en België relevante informatie zou geven met nieuws, blokkenschema’s van de optredens en een kaart van het festivalterrein. Dit is zeker gelukt, alle onderdelen zitten in de app. en functioneren naar behoren. Kijken we naar de eisen die vooraf zijn gesteld, is daar ook aan voldaan. De app. werkt volledig op Android en iOS platformen en is zelfs via internet op iedere mobiele telefoon te bekijken die HTML5 ondersteund. Er is een nieuws-feed aanwezig die festivalinformatie toont aan de gebruiker. Om te zorgen dat de app. zo weinig mogelijk batterijverbruik heeft, is er gekozen om zo min mogelijk gebruik te maken van plaatjes. Dit bevordert de laadtijden en zorgt dus voor aanzienlijk minder batterijgebruik. De mobiele applicatie werkt ook als er geen internet verbinding is. Het enige nadeel is dat er bij de eerste keer openen van de applicatie wel een internet verbinding nodig is, omdat er gebruik gemaakt wordt van caching. De applicatie is ook gebruiksvriendelijk gebleken uit tests met verschillende mensen die de app. nog niet van te voren hadden gebruikt. De teksten waren goed leesbaar en er was makkelijk te navigeren op een mobiele telefoon. Dankzij het gemaakte CMS, is de app. ook uit te breiden. Zo kan je met één druk op de knop een nieuwe app. maken voor een festival. Alle optredens zijn in één keer allemaal toe te voegen met een Excel bestand.


51 van 65

De app. is alleen niet uit te breiden met nieuwe pagina’s en features zonder kennis van HTML en PHP. Hierdoor moet iedere festival pagina voldoen aan het bestaande format. Er is wel de keuze uit verschillende CSS3 stylesheets voor het uiterlijk van de app. Omdat de app. gebruik maakt van HTML5 wat een nieuwe techniek is, wordt dit nog niet door alle browsers ondersteund. Door sommige browsers wordt het deels ondersteund, door sommigen volledig en door anderen helemaal niet. Hierdoor is het mogelijk dat de app. niet op iedere telefoon volledig werkt. Zo is het niet mogelijk om met een Firefox browser de artiest informatie op te slaan met Web SQL. Het grafische gedeelte laat nog ruimte over voor verbetering. De focus lag voornamelijk op het technische gedeelte. Het grafische gedeelte werkt nu nog voornamelijk functioneel. Op dit moment is er een grafisch vormgever bezig met het ontwikkelen van een design. Hopelijk is deze op tijd af om het voor de presentatie te implementeren.

9.3

Conclusie

Het product is in zijn doel geslaagd om informatie te bieden van de belangrijkste festivals in Nederland en België. Daarnaast voldoet de mobiele festival applicatie aan de eisen die door de opdrachtgever gesteld zijn. De app. is aan het eind van de stageperiode volledig functioneel en bruikbaar voor de huidige situatie. Op het moment van schrijven zijn er nog niet veel festivals beschikbaar, maar hier wordt op dit moment nog hard aan gewerkt. Met het gebouwde CMS kunnen deze festivals snel aangemaakt worden. Vanaf het moment dat een festival wordt aangemaakt, is deze ook meteen te bezoeken via de app. Grafisch gezien had de app. wat meer aandacht kunnen krijgen. Alles is duidelijk weergegeven en te zien, maar het is nog wat aan de saaie kant. Dit is later mocht het gewenst zijn wel eenvoudig te veranderen met het CSS bestand. De app. is mede dankzij het CMS gebruiksvriendelijk gemaakt voor de ontwikkelaar en de gebruiker. Het toevoegen van een nieuw festival is snel te doen, mits je beschikt over de tijden wanneer artiesten optreden. De navigatie binnen de app. sluit aan bij huidige mobiele applicaties.

9.4

Aanbevelingen

Ik zou Festivalinfo aanbevelen om het grafisch design verder uit te werken, zodat deze aantrekkelijker is voor mensen. Daarnaast is het een goed idee om de profielen van Agendainfo.nl te koppelen aan de applicatie, zodat mensen kunnen aangeven dat ze naar een festival gaan. Tot slot zou ik Festivalinfo aanraden om de bestaande functies en de functies gesteld in de MoSCoWmethode verder uit te werken en toe te voegen.


52 van 65

10.

Reflectie

In dit hoofdstuk wordt beschreven hoe ik voldaan heb aan de voorwaarden van de opleiding met behulp van de generieke competenties van de Bachelor of Engineering en de Dublin descriptoren. Daarnaast geef ik een profielschets van mezelf gebaseerd op deze stageperiode.

10.1 Competenties van de Bachelor of Engineering Tijdens de opleiding wordt de focus gelegd op het beheersen van de vier generieke competenties van de Bachelor of Engineering. Hieronder wordt beschreven hoe ik denk dat aan deze competenties voldaan zijn in dit project. Inzicht krijgen Het inzicht heb ik verkregen door een enquête te houden onder de bezoekers van website festivalinfo.nl. Daarnaast heb ik ook onderzoek gedaan naar de nieuwe technieke die HTML5 biedt en hoe deze toe te passen is bij het ontwikkelen van een mobiele applicatie. Omdat ik niet bekend was met het Android en iOS besturingssysteem, heb ik ook hier onderzoek naar gedaan. Vervolgens heb ik gekeken naar bestaande festival-apps. Dit heb ik gedaan om te kijken hoe op dit moment festival-apps worden op gebouwd en hoe ze eruit zien. Hierdoor kunnen we ons onderscheiden van de huidige apps. Ontwerpen In overleg met mijn opdrachtgever zijn de functionaliteiten en de technische specificaties vastgelegd in het functioneel- en technisch ontwerp. Hierbij heb ik gebruik gemaakt van de inzichten die ik heb verkregen om de door mij voorgestelde methodes te beargumenteren. Plannen Voordat ik met het ontwikkelen van de mobiele applicatie ben begonnen, heb ik eerst een plan van aanpak opgesteld. Hierin heb ik het project opgedeeld in fases en beschreven hoe ik die fases wil gaan realiseren om tot het eindproduct te komen. Hierbij heb ik ook een planning gemaakt, die de tijd vastlegt die ik hiervoor verwacht nodig te hebben. Uitvoeren Voor de uitvoering van het project heb ik mij zoveel mogelijk gehouden aan het plan van aanpak en de ontwerpen die van te voren zijn gemaakt. Hier is alleen van afgeweken als er een gegronde reden voor was. Bijvoorbeeld als iets korter duurde dan de verwachte tijd, kon ik eerder beginnen aan de volgende fase. Op deze manier was er ook wat ruimte als iets langer duurde dan verwacht.

10.2 Dublin descriptoren De eindtermen van de bachelor opleiding worden beschreven in de Dublin descriptoren. Hieronder wordt aangegeven hoe ik denk aan deze descriptoren voldaan te hebben in dit project.


53 van 65

Kennis en inzicht De tijdens de opleiding opgedane kennis en inzicht, heb ik nodig gehad om een goed oordeel te kunnen vormen tijdens de ontwerpfase en deze beslissingen te kunnen onderbouwen. Ook tijdens de uitvoering heb ik gebruik kunnen maken van eerder opgedane kennis en inzicht. Daarnaast heb ik kennis en inzicht vergaard door aan het project te werken. Het project bestaat uit een aantal nieuwe technieken, zoals HTML5 en mobiel ontwikkelen. Hierdoor bleef ik op de hoogte van ontwikkelingen en ontdekkingen die invloed kunnen hebben op het project, om deze dan te kunnen onderzoeken en kijken of ze ook te implementeren zijn in het project. Toepassen kennis en inzicht De opgedane kennis en inzicht heb ik toegepast om afgewogen beslissingen te maken en deze ook goed te kunnen onderbouwen waarom ik voor een bepaalde oplossing heb gekozen. Tijdens het ontwikkelen was mijn kennis in programmeren en inzicht in de gebruikte technieken belangrijk om problemen tijdens het ontwikkelen te kunnen oplossen. Oordeelsvorming Om een goed oordeel te kunnen vormen, heb ik onderzoek verricht naar mogelijke oplossingen voor de problemen die ik tegen ben gekomen. Daarnaast heb ik ook zelf geëxperimenteerd om problemen op te lossen. Hiervoor gebruikte ik mijn opgedane kennis en inzicht. Als laatste heb ik ook gevraagd hoe mijn collega’s er over dachten. Om tot een eindoordeel te komen, heb ik de resultaten van de verschillende methodes tegen elkaar afgezet en gekeken op welke vlakken ze raakten. Communicatie Bij het begin van het project is er een brainstormsessie geweest binnen Festivalinfo, om te bepalen welke features er in de app. moeten komen en belangrijk zijn. Ook zijn er brainstormsessies geweest over het grafisch ontwerp. Als er problemen waren met de ontwikkelen, kon ik altijd aankloppen bij mijn begeleider. Hier had ik zelf iets meer gebruik van moeten maken. Ik bleef zelf te lang doorgaan met een probleem dat mijn begeleider zelf relatief snel kon oplossen. Leervaardigheden Het product vereiste van mij dat ik bekend raakte met nieuwe technieken en verschillende mobiele platformen. Hier had ik van te voren zo goed als geen ervaring mee. Daardoor was ik constant bezig met het leren van nieuwe elementen. Van de problemen die ik bij een onderdeel tegen kwam, probeerde ik zoveel mogelijk van te leren, zodat ik bij het tegenkomen van het volgende probleem de kennis en inzicht van het vorige probleem kon toepassen op het huidige probleem.

10.3 Profielschets In mijn werk ben ik resultaat- en doelgericht, maar soms ook iets te snel tevreden. Zo ziet de code die ik tijdens het project heb geschreven er soms wat chaotisch uit, wat bij het oplossen van problemen soms kan zorgen voor meer tijd om het te realiseren. Ik kan goed zelfstandig werken, maar vind het fijner en vooral gezelliger om in teamverband te werken. Bij het vinden van een oplossing of het opdoen van ideeën, blijf ik soms te lang zelfstandig gefocust op het probleem. In zo’n geval kan ik beter sneller de expertise of ideeën van een van mijn collega’s erbij halen.


54 van 65

Variatie en vrijheid is belangrijk in mijn werk. Ik kan niet een hele dag achter mijn bureau zitten te programmeren. Zo vind ik het leuk om bijvoorbeeld ook een deel grafisch design te doen en mee denken over problemen. Ook vind ik het leuk om met nieuwe technieken te spelen. Onderzoeken naar wat kan ik met de nieuwe technieken, hoe kunnen we dit toepassen op huidige projecten, enz. Graag doe ik dingen op mijn eigen manier en wil ik dus ook zelf tot een oplossing zien te komen. Een leidinggevende functie past het beste bij mij. Ik vertel graag mensen wat ze moeten doen. Op deze manier heb ik ook een gevoel van meer vrijheid en dat niet steeds iemand op mijn vingers mee kijkt.


55 van 65

Afkortingen en begrippen Hieronder vind u een alfabetische lijst met alle afkortingen en begrippen die met een * zijn aangeduid in deze scriptie.

Afkortingen App.

Applicatie – Meestal gebruikt om een applicatie binnen een mobiele omgeving aan te duiden.

CMS

Content Management System – Een CMS maakt het mogelijk dat mensen eenvoudig, zonder veel technische kennis, documenten en gegevens op internet kunnen publiceren.

CSS3

Cascading Style Sheets – Door het gebruik van CSS is het mogelijk om de vormgeving van webpagina’s los te koppelen van hun feitelijke inhoud en centraal vast te leggen.

HTML

HyperText Markup Language - Een opmaaktaal voor de specificatie van documenten, voornamelijk bedoeld voor het World Wide Web.

OS

Operating System (Nederlands: Besturingssysteem) – Dit is het programma dat na het opstarten van een computer/mobiele telefoon in het geheugen wordt geladen en de functionaliteiten aanbiedt om andere programma’s uit te voeren.

SDK

Software Development Kit – Een SDK is een verzameling hulpmiddelen die handig zijn hij het ontwikkelen van computerprogramma’s voor een bepaald besturingssysteem of type hardware, of voor het maken van software die een speciale techniek gebruikt.

Begrippen Android

Android is een operating system ontwikkeld door Google voor de mobiele telefoon.

HTML5

Verzamelterm voor verschillende nieuwe, of in ontwikkeling zijnde, web technieken en standaarden.

iOS

Apple iPhone Operating System is het besturingssysteem van de iPhone, iPad en iPod touch.

JavaScript

Een scripttaal die wordt uitgevoerd door de webbrowser van een gebruiker.

MoSCoW-methode

De MoSCoW-methode is een wijze van prioriteiten stellen. De naam is een afkorting voor: Must have, Should have, Could have en Would have.


56 van 65

MySQL

MySQL is een managementsysteem voor online databases.

Native applicatie

Dit betekent dat de mobiele applicatie volledig op de mobiele telefoon zelf draait.

PHP

Hypertext Preprocessor (PHP) is een scripttaal die bedoeld is om op webservers dynamische webpagina’s te creëren.

Smartphone

Een smartphone is een mobiele telefoon die uitgebreidere computermogelijkheden biedt. Een smartphone kan ook beschouwd worden als een handcomputer die tegelijk ook een telefoon is.

Web applicatie

Een web applicatie houdt in dat de mobiele applicatie als een internet pagina wordt aangeboden en via de mobiele telefoon te bereiken is.


57 van 65

Bronnen Google Inc. (2011). Android Developers. 19-12-2011, http://developer.android.com/index.html Apple Inc. (2011). iOS Dev Center – Apple Developer. 19-12-2011, https://developer.apple.com/devcenter/ios/index.action World Wide Web Consortium. (2011). HTML5. 21-11-2011, http://dev.w3.org/html5/spec/Overview.html W3schools. (2011). HTML5 Tag Reference. 21-11-2011, http://www.w3schools.com/html5/html5_reference.asp W3schools. (2011). CSS Reference. 21-11-2011, http://www.w3schools.com/cssref/default.asp Leenheer, N. (2011). The HTML5 test - How well does your browser support HTML5? 21-11-2011, http://www.w3schools.com/cssref/default.asp PhoneGap. (2011). PhoneGap. 19-12-2011, http://phonegap.com/ jQuery. (2011). jQuery: The Write Less, Do More, JavaScript Library. 29-12-2011, http://jquery.com/ Pelgrim, M. (2011). Dive Into HTML5. 20-11-2011, http://diveintohtml5.org/ Fling, B. (2009). Mobile Design and Development. United States of America: O’Reilly Media, inc. Converse, T., Park, J. & Morgan, C. (2009). PHP5 and MySQL Bible. Den Haag: Sdu Uitgevers bv.


58 van 65

Bijlage 1 – Enquête vragen Beste Festivalinfo, Podiuminfo, Cabaretinfo en Agendainfo bezoeker, Dagelijks worden onze sites Festivalinfo, Podiuminfo, Cabaretinfo en Agendainfo door ruim 30.000 mensen bezocht. Om onze sites nog beter op jullie af te stemmen, houden we zo nu en dan een enquête. Aangezien wij druk aan het werk zijn aan een mobiele app voor Festivalinfo, stelt deze enquete vragen over het gebruik van jouw mobiel op festivals. Het invullen neemt ongeveer 3 tot 5 minuten in beslag. Onder degenen die de enquête volledig invullen, verloten we een hele mooie prijs.. Eén van de winnaars ontvangt maar liefst 50 drankmuntjes voor een festival naar keuze. (met een maximum waarde van 150 euro). Wij garanderen dat je informatie vertrouwelijk zal worden behandeld en niet aan derden zal worden verstrekt. Heb je vragen / opmerkingen over deze enquête, dan kan je contact opnemen met: [email protected]

Jouw gegevens 1. Ik ben een: • Man • Vrouw 2. • • • • • • • •

Mijn leeftijd is: 0 – 10 11 – 15 16 – 20 21 – 25 26 – 30 31 – 40 41 – 50 51 of ouder

3. • • •

Ik woon in: Nederland België Ik woon niet in Nederland of België

Mobiele telefoon 4. • • • •

Welk merk telefoon bezit je (en neem je mee naar festivals)? Samsung Apple Nokia HTC


59 van 65

• • • • •

Blackberry Sony Ericsson LG Ik bezit geen mobiele telefoon Anders namelijk

5. Als je een mobiele telefoon bezit (en meeneemt naar festivals), wat is het precieze type van die telefoon (bijvoorbeeld iphone 4s, galaxy s2, HTC Desire etc.)? 6. • • • • •

Heb je internet op je mobiele telefoon? Nee, ik heb geen internet op mijn mobiel Ja, ik heb internet, maar ik weet niet hoeveel dataverkeer Ja, ik heb internet, met minder dan 1GB dataverkeer Ja, ik heb internet, met tussen de 1GB en 3GB dataverkeer Ja, ik heb internet, met meer dan 3GB dataverkeer

7. • • • •

Als je internet op je mobiele telefoon hebt, hoe vaak maak je hier gebruik van? Maandelijks (1 tot 3 keer per maand) Wekelijks (1 tot 3 keer per week) Dagelijks (4 keer per week of meer) Nooit

8. • • • •

Hoe vaak bezoek jij Festivalinfo, Podiuminfo en/of Cabaretinfo met je mobiele telefoon? Maandelijks (1 tot 3 keer per maand) Wekelijks (1 tot 3 keer per week) Dagelijks (4 keer per week of meer) Nooit

9. • • • • • • • • • • • •

Welke social media gebruik je? Ik gebruik geen social media Facebook Hyves LinkedIn Twitter Spotify Last.fm Del.icio.us Netlog Myspace Google+ Anders namelijk

Festivals 10. Hoeveel festivals bezocht je afgelopen jaar? • 0 Festivalinfo mobiele applicatie

60 van 65

• • • •

1 tot 2 3 tot 5 6 tot 10 Meer dan 10

11. Heb je wel eens een festival-app gedownload via bijvoorbeeld de Apple App Store of Android Market? • Ja, meerdere keren • Ja, eenmaal • Nee, maar ik ben dit wel van plan • Nee, dit zou ik nooit doen 12. o o o o o o o o

Voor welke festivals heb je een app. gedownload? (meerdere antwoorden mogelijk) Lowlands Pinkpop Concert at Sea Rock Werchter Pukkelpop Graspop Metal Meeting Lokerse Feesten Anders namelijk

13. Waar gebruikte jij de mobiele festival app. voor? 14. Wat vond je goed aan de festival-app(s) die je gebruikt hebt? 15. Wat vond je slecht aan de festival-app(s) die je gebruikt hebt? 16. Wat is/zijn jouw gouden tip(s) voor een mobiele app van Festivalinfo?


61 van 65

Bijlage 2 – APPCACHE CACHE MANIFEST # 2012-01-03: v1 CACHE: # Hier komen alle bestanden te staan waarvan je wilt dat ze offline beschikbaar zijn. index.php images/logo.jpg images/online.jpg style.css NETWORK: # Bestanden die hier staan hebben altijd en verbinding nodig. Als 1 van deze pagina’s bezocht worden, zal hij appcache niet aanroepen. admin.php login.php FALLBACK: # Fallback zorgt ervoor dat het mogelijk wordt bepaalde pagina’s of pagina onderdelen te veranderen als ze offline zijn tegenover online. Als de afbeelding online.jpg word aangeroepen zal deze bij een internet verbinden altijd zichtbaar zijn. Is er geen internet verbinding, zal deze worden vervangen door offline.jpg images/online.jpg images/offline.jpg


62 van 65

Bijlage 3 – Function time_difference function time_difference ($start, $end) { $hours[0] = date("H.i",strtotime($start)); $hours[1] = date("H.i",strtotime($end)); $hours[0] = ((int)$hours[0])*60 + ($hours[0]-( (int)$hours[0]))*100; $hours[1] = ((int)$hours[1])*60 + ($hours[1]((int)$hours[1]))*100; if($hours[0] > $hours[1]) { $hours[1] += 24*60; } $output = sprintf("%.2f",($hours[1] - $hours[0]) * 2); return ($output); }


63 van 65

Bijlage 4 - Blokkenschema //begintijd $begin_uur1 = $begin_uur .':00:00'; $smarty->assign('begin_uur', $begin_uur1); $smarty->assign('begin_uurr', $begin_uur); $smarty->assign('end_uur', $end_uur); $smarty->assign('aantal_podia_count', $tabel_breedte);

//lege ruimte bereken $total_result_array = array(); $count = 0; foreach($podium_items as $podium) { $sub_result_array = array(); //echo $count . " = " . $podium['podium_name'] . "
"; //festival podium 1 //lege ruimte tot begin eerste band $timetable2_items = $artists->getTimeTable2($festival_id, $day, $podium['podium_id']); $sub_result_array["start_leegte"] = $timetable2_items; //loop met bands $timetable_items = $artists->getTimeTable($festival_id, $day, $podium['podium_id']); $hour_height = 200; $index = 0; $res_array = array(); $aantal_items = count($timetable_items); foreach($timetable_items as $time_item) { $time_diff = time_difference($time_item['time_table_end'], $time_item['time_table_start']); //ervoor zorgen dat bij het laatste array item er niet verder wordt gegaan if($index + 1 < $aantal_items) { $next_index = $index + 1; $next_start_time = $timetable_items[$next_index]['time_table_start']; $next_start_time = $timetable_items[$next_index]['time_table_start']; $height = $hour_height * $time_diff / 60; $time_item[$index]['table_height'] = $height; } $res_array[] = $time_item; if($time_item['time_table_end'] !== $next_start_time) { Festivalinfo mobiele applicatie

64 van 65

$next_item = array(); $next_item['festival_id'] = $time_item['festival_id']; $next_item['festival_name'] = $time_item['festival_name']; $next_item['artist_id'] = ""; $next_item['artist_name'] = ""; $next_item['artist_db_name'] = ""; $next_item['time_table_id'] = $time_item['time_table_id']; $next_item['time_table_start'] = $time_item['time_table_end']; $next_item['time_table_end'] = $next_start_time; $next_item['time_table_day'] = $time_item['time_table_day']; $next_item['time_table_podium_id'] = $time_item['time_table_podium_id']; $next_item['time_table_artist_id'] = ""; $next_item['podium_id'] = $time_item['podium_id']; $next_item['podium_name'] = $time_item['podium_name']; $next_item['podium_festival_id'] = $time_item['podium_festival_id']; $res_array[] = $next_item; } $index = $index + 1; } $sub_result_array["timetable"] = $res_array; $total_result_array[$count] = $sub_result_array; $count = $count + 1; }


65 van 65

FESTIVALINFO MOBIELE APPLICATIE

Recommend Documents