Mobiele ontwikkeling

Transcriptie

1 Departement Technologie Geel Professionele bachelor in de Elektronica - ICT ICT Mobiele ontwikkeling Een multi-platform applicatie voor eventregistratie CAMPUS Geel Swaenen Tim Academiejaar

2 2 VOORWOORD Tijdens de laatste 13 weken van mijn opleiding tot professionele bachelor heb ik stage gelopen bij Eventdrive. Het doel van deze stage is om de verworven competenties in de praktijk toe te passen, en om op deze manier de student, ik dus, klaar te stomen voor een carrière. Dit eindwerk is het verslag van deze stageperiode. Maar dit had nooit tot stand kunnen komen zonder enkele personen die een belangrijke rol hebben gespeeld voor mijn eindwerk. Bij deze wil ik dan ook graag de kans grijpen om die personen te bedanken. Als eerste wil ik mijn ouders en mijn zus bedanken die mij mijn hele leven hebben gesteund in alles wat ik deed en er altijd voor mij geweest zijn. Vervolgens wil ik mijn vriendin bedanken voor het nalezen en corrigeren van mijn eindwerk. Ook wil ik Sven Hellemans, CTO bij Eventdrive, bedanken voor mij te begeleiden en bij te staan waar nodig. Natuurlijk wil ik ook de andere collega s bedanken voor de toffe werksfeer die er al die tijd hing. Tot slot wil ik ook nog Barbara De Weerdt bedanken omdat zij mij zeer goed begeleid heeft tijdens mijn stage en veel tips gegeven heeft over het schrijven van een eindwerk.

3 3 SAMENVATTING Voor mijn stage kwam ik terecht bij Eventdrive. Dit bedrijf richt zich op eventondersteuning en registratie. Voor de registratie moeten gebruikers zich via een website inschrijven voor een evenement. Vervolgens worden deze gegevens in de database geladen en wordt er een ticket naar de persoon die zich inschrijft verzonden. Dit ticket bevat de persoonlijke gegevens van de persoon alsook een barcode. Als de persoon zich naar het evenement begeeft zal hij bij het binnenkomen van het evenement gevraagd worden zijn ticket te tonen. Met een desktopapplicatie die gebruikt maakt van een barcodescanner zal men de gebruiker dan kunnen inchecken en bij het verlaten uitchecken. Het probleem is echter dat de klanten dit systeem ook voor meetings en kleine bedrijfsevenementen willen gebruiken en de desktopapplicatie hier niet voor geschikt is. Mijn taak is dus het ontwikkelen van een mobiele applicatie waarmee de klant zelf de aanwezigen kan inchecken en uitchecken. Omdat de applicatie voor een zo groot mogelijk doelpubliek beschikbaar moet zijn is het de bedoeling dat de applicatie niet platformafhankelijk mag zijn. Om deze reden heb ik dan voor Phonegap gekozen. Phonegap ondersteund 7 verschillende platformen en is daarbij de koploper in de mobiele ontwikkeling. Omdat de applicatie ook connectie moet kunnen maken met een database heb ik een webservice geschreven. Deze webservice gaat de connectie verzorgen tussen de applicatie en de database.

4 4 INHOUDSTAFEL VOORWOORD... 2 SAMENVATTING... 3 INHOUDSTAFEL... 4 INLEIDING EVENTDRIVE Beschrijving Organisatiestructuur MOBIELE APPLICATIE Achtergrondinformatie Probleemanalyse Doelstellingen Algemeen Optioneel Resultaten AANPAK VAN HET PROJECT ONTWIKKELING VAN MOBIELE APPLICATIE Analyse Programmeertaal Applicatie Phonegap Ontwikkeling Deployment Applicatie JQuery Mobile Schermen Login Eventselectie Overzicht Details Webservice connectie Webservice Ontwikkeling Beveiliging Functies BESLUIT LITERATUURLIJST BIJLAGEN... 25

5 5 INLEIDING Tijdens mijn 13 weken durende stage, werkte ik bij Eventdrive te Willebroek. Mijn taak bestond uit het onderzoeken van welke manieren er zijn om een mobiele applicatie te ontwikkelen. Vervolgens zou ik een applicatie ontwikkelen die aan een aantal voorwaarden moet voldoen. Dit houdt in dat de applicatie op meerdere platformen moet kunnen werken, en connectie heeft met de database van het bedrijf. Eventdrive wil namelijk met deze mobiele applicatie gegevens gaan opvragen en aanpassen op een database. Hierdoor kunnen klanten op meetings zelf registreren wie er aanwezig was. Ik ga hiervoor verschillende programmeertalen door elkaar gebruiken zoals HTML5, CSS, Javascript en C#. Deze verscheidenheid maakt de ontwikkeling moeilijker en trager maar je leert er veel uit. Op deze manier leer je elke dag weer nieuwe dingen bij. In dit eindwerk ga ik je meer informatie geven over het stagebedrijf en het project waar ik aan gewerkt heb. Vervolgens ga ik uitleggen hoe ik dit project aangepakt heb en hoe het ontwikkelingsproces verlopen is.

6 6 1 1 EVENTDRIVE 1.1 Beschrijving Eventdrive is een bedrijf dat zich, zoals de naam al doet vermoeden, met eventing bezighoudt. Het is gericht op het ondersteunen van eventmanagers bij het organiseren van een evenement. Eventdrive is opgericht door Danny Stevens, die in zijn vorige carrière eventmanager was. Hij ondervond aan den lijve dat er tekortkomingen waren aan de tools voor eventmanagers. Hierna besloot hij om een bedrijf op te richten dat deze tekortkomingen zal wegwerken. Om dit te realiseren heeft Eventdrive een online platform ontwikkeld om deze ondersteuning te bieden. Enkele van de toepassingen zijn een eigen evenementwebsite ontwikkelen, registratieformulieren opstellen, uitnodigingen versturen via alle mogelijke kanalen, statistieken over een event, tafelplanning op een visuele manier, testritten solution, Aangezien ik mij specifieker ga bezighouden met de ticketing/badging, geef ik hierover wat meer uitleg. Eventdrive beschikt over een module waarin organisators gastenlijsten kunnen uploaden, of waarin mensen zich kunnen inschrijven voor een bepaald evenement. Eens aangekomen op het event zien de gasten de balies staan waar ze zich kunnen aanmelden. Dit aanmelden gebeurt aan de hand van een naam of een barcode. Eens ingecheckt kan de hostess ook onmiddellijk zien of het om een gewone gebruiker gaat of om een VIP, Artiest, Aan de hand hiervan krijgen de gasten een bepaalde kleur bandje of badge. Dit wordt vooral gebruikt op grote events zoals beurzen maar ook voor kleinere bussinessevents. Het grote voordeel van Eventdrive is dat alle toegangskaarten/badges ter plaatse geprint worden door zeer snelle printers en niet alles voorgedrukt is. Dit houdt in dat als er een deel mensen niet komen opdagen hier dus ook geen badge voor geprint is. Dit bespaart de organisator printkosten. Verder kan 1 balie tot 250 gasten per uur inchecken. Dit platform wordt door vele grote bedrijven gebruikt zoals ING, Delta Lloyd, AXA, BMW, Aston Martin Brussels, Coca Cola, Besix, Ook is er in de Lessius hogeschool Mechelen bij de richting Communication & Event management een vak volledig aan het Eventdrive platform gewijd.

7 Alexis De Graeve Production Manager Productie Danny Stevens CEO Stijn Van Belle Event Solutions Manager Sales Yongquin Sven Hellemans Development Manager Lead Dev. Development Consultants Eelco Organisatiestructuur Matthias Julie Steven Figuur 1: Organisatiestructuur Zoals je in de bovenstaande afbeelding ziet is Eventdrive een redelijk klein bedrijf. Eventdrive is opgedeeld in 3 afdelingen: Productie, sales en development. De afdeling productie gaat klanten ondersteunen bij het opzetten van hun evenement in Eventdrive. Verder hebben we de salesafdeling die nieuwe klanten aanhaalt. En als laatste is er de developmentafdeling waar ik deel van uitmaak. Deze afdeling ondersteunt productie met klantspecifieke wensen en met nieuwe ontwikkelingen. Voor deze nieuwe ontwikkelingen werkt Eventdrive ook vaak met consultants.

8 8 2 MOBIELE APPLICATIE 2.1 Achtergrondinformatie Zoals in vorig hoofdstuk besproken werd is het dus mogelijk om eventregistratie te doen. Dit houdt concreet in dat bezoekers ingecheckt en uitgecheckt zullen worden bij het binnenkomen en verlaten van de locatie. Deze registratie gebeurt met de balies vermeld in vorig hoofdstuk. Deze balie bestaat uit een netbook met een barcodescanner en een badgeprinter. Doordat ze geregistreerd worden kan de organisator na afloop van het event direct zien hoeveel personen niet zijn komen opdagen, maar ook hoelang de bezoekers gebleven zijn. Op deze manier kan de organisator zijn volgende events beter plannen. Deze registratie gebeurt volledig offline doordat de gastenlijst op voorhand afgehaald kan worden en lokaal opgeslagen wordt. Dit is noodzakelijk omdat er niet op elk evenement een degelijke internetverbinding mogelijk is. Dit systeem wordt voornamelijk gebruikt op grote events zoals beurzen en grote bedrijfsevents, maar soms ook voor meetings met vaak maar enkele tientallen deelnemers. 2.2 Probleemanalyse Voor deze meetings en kleinere events is het teveel werk om een balie op te stellen waardoor het hiervoor bijna nooit gebruikt wordt. Eventdrive wil deze tekortkoming wegwerken door een mobiele applicatie te ontwikkelen die het werk van de balie overneemt. Deze applicatie zou op meerdere platformen moeten werken zodat gebruikers van Eventdrive deze applicatie op hun mobile device kunnen installeren ongeacht welk toestel ze gebruiken. Via deze applicatie kunnen ze dan de registratie gaan doen. Alvorens ik hiermee kan starten is het noodzakelijk om een uitgebreide analyse te maken. Dit houdt in dat er een functionele en een technische analyse gemaakt wordt. Voor de technische analyse zal ik onderzoeken op welke manier ik de applicatie het beste kan ontwikkelen. Er zijn namelijk meerdere mogelijkheden om een applicatie te ontwikkelen. Je kan native programmeren, dit wilt zeggen dat je platformgericht een applicatie gaat ontwikkelen. Voor IOS maak je dan gebruik van Objective-C, voor Android van Java, De andere mogelijkheid is gebruik maken van multiplatform-tools. De 2 bekendste zijn ongetwijfeld Adobe AIR en Nitobi Phonegap(nu overgenomen door Adobe). Voor de functionele analyse zal ik bespreken hoe de schermen eruit gaan zien, welke functionaliteiten knoppen in de applicatie hebben en welke acties er moeten gebeuren bij het drukken op de knoppen. Vervolgens is het nodig dat ik begrijp hoe de databasestructuur van Eventdrive werkt en hoe ik hier gegevens kan uithalen en aanpassen. Dit alles gebeurt d.m.v. een webservice. Het moet ook mogelijk zijn om deze data tijdelijk lokaal op te slaan zodat je niet continu in verbinding moet staan met de online database. De applicatie gaat een zoekveld bevatten waarmee je gasten kan zoeken op hun naam, bedrijf of barcode. Deze functie kan optioneel nog uitgebreid worden zodat je de gegevens niet zelf hoeft in te voeren maar dit kan doen d.m.v. een barcodescanner. Zo kunnen gasten nog sneller ingecheckt worden. Ook optioneel is de mogelijkheid om te printen. Bij het inchecken zou de printer aangesproken moeten worden en wordt er een badge geprint met de gegevens van

9 9 deze persoon. Zo kan onze applicatie een vervanger/aanvulling zijn van de huidige balies. 2.3 Doelstellingen Hieronder volgen enkele doelstellingen die ik voor mezelf opgesteld heb. Er is een onderscheid gemaakt tussen algemene doelstellingen die nodig zijn voor de basisfunctionaliteit van de applicatie en de optionele doelstellingen die een meerwaarde kunnen bieden aan de applicatie maar niet noodzakelijk zijn voor de algemene werking Algemeen -Lay-out voorzien voor de applicatie -Database connectie mogelijk maken -Inloggen op webservice en data ophalen -Data lokaal opslaan en bewerken -Data synchroniseren met online database -Zoeken in de lijst met personen Optioneel -Werking Barcodescanner analyseren -Barcodescanner integreren in applicatie -Werking Printen analyseren -Printfunctie integreren in applicatie 2.4 Resultaten Het resultaat is een werkende applicatie waarmee je data kan afhalen van de database en hier deelnemers/bezoekers mee kan in- en uitchecken en dit vervolgens kan synchroniseren met de online database d.m.v. een webservice. Optioneel zou het nog mogelijk moeten zijn om barcodes te scannen en te printen.

10 3 AANPAK VAN HET PROJECT Zodra mijn stageopdracht gekend was ben ik direct begonnen met opzoeken hoe ik deze opdracht het beste kon aanpakken. Er zijn namelijk verschillende manieren zijn om een mobiele applicatie te ontwikkelen. In de eerste fase heb ik mij dus voornamelijk beziggehouden met het onderzoeken en testen van deze verschillende mogelijkheden. Toen ik dit allemaal getest had, begon ik met een analyse te maken van de applicatie. Dit wil zeggen een technische en functionele analyse. Aangezien we dit onderdeel van het programmeren in onze studierichting nooit gezien hadden was het toch wel moeilijk om hieraan te beginnen. De technische analyse houdt in welke programmeertalen je gebruikt en waarom. Ook leg je hierin uit hoe een andere programmeur verder kan gaan met de applicatie. In de functionele analyse bespreek ik alle schermen en welke acties er moeten gebeuren als je op een knop drukt. Ook staat hierin een beschrijving van de aanwezige velden. Daar de applicatie redelijk uitgebreid was heb ik dit onderverdeeld in een basisversie waar we al mee aan de slag kunnen en enkele extra s waar het leuk van zou zijn als we deze hebben maar niet noodzakelijk voor de basisfunctionaliteit. Door deze analyse weet ik en het stagebedrijf zeker dat we op dezelfde lijn denken en we niet op het einde van de stage tot de vaststelling komen dat het niet is wat er van verwacht wordt. Na deze analyse kon het echte werk beginnen, programmeren. Als eerste was ik begonnen met de lay-outs te maken van alle verschillende schermen. Dit was vaak moeilijk omdat we ontwikkelen op de pc. Maar bij het testen op een fysiek toestel ziet alles er toch weer net iets anders uit dan gewenst. Verder moeten we er ook op letten dat we niet teveel resources gebruiken omdat dit meer processorcapaciteit vraagt en dit bij mobiele toestellen niet altijd beschikbaar is. Na de lay-out klaar te hebben ben ik begonnen met de juiste pagina s en functies achter de knoppen te plaatsen. Zodra dit gebeurd was moesten we natuurlijk nog connectiviteit met de webservice voorzien. Dit was toch moeilijker dan voorheen gepland. Dit omdat de webservice met specifieke certificaten werkt en over deze certificaten weinig te vinden was voor javascript. Na hier lang mee bezig geweest te zijn en veel opzoekingen gedaan te hebben zijn we tot de conclusie gekomen dat dit teveel tijd in beslag zou nemen om hiermee verder te gaan. Daarom hebben we besloten dat ik zelf een basis webservice moet schrijven die specifiek voor mijn applicatie gebruikt gaat worden. Om hiermee te kunnen beginnen heb ik uiteraard de nodige opzoekingen moeten uitvoeren omdat we dit op school nooit gezien hebben. De webservice is geschreven in C# en gaat gegevens uit de database halen en deze in JSON-formaat teruggeven. Uiteraard kunnen we de data niet zonder enige vorm van beveiliging doorsturen omdat hier privégegevens van gebruikers inzitten. Deze JSON string gaan we daarom met base64 encryptie beveiligen. Zo wordt het toch al iets moeilijker om de data te achterhalen. Zodra deze webservice geschreven is moeten we specifieke functies gaan schrijven zodat we deze functies kunnen aanroepen en deze de gepaste data terugsturen. Op deze manier hoeven we niet alle data binnen te trekken omdat dit zeer veel data is. En aangezien we op een mobiel toestel werken moeten we rekening houden met de performantie. Als deze webservice helemaal gereed is koppelen we de juiste functies van de webservice aan de knoppen van de applicatie. Zo halen we de gegevens pas op als deze nodig zijn. Ook halen we niet alle data uit de database op. We nemen bijvoorbeeld alleen maar de voornaam en de naam van een persoon op en niet zijn andere persoonlijke gegevens. Als we alle gegevens steeds zouden ophalen, zou dit een overhead betekenen voor onze applicatie. Verder kan het ook zijn dat het mobiele toestel via een mobiel datanetwerk verbonden is met het internet. En omdat deze

11 11 pakketten meestal gelimiteerd zijn in downloadvolume moeten we de overhead zoveel mogelijk beperken. Verder heb ik alle code zo goed mogelijk gedocumenteerd. Dit is natuurlijk zeer belangrijk als je met meerdere mensen samenwerkt of als iemand anders je werkt nog gaat verderzetten en uitbreiden.

12 12 4 ONTWIKKELING VAN MOBIELE APPLICATIE 4.1 Analyse Het eerste deel van mijn stage heb ik voornamelijk besteed aan opzoeken en analyseren. Dit is een zeer belangrijke stap in een proces omdat je analyse bepaalt hoe je alles gaat aanpakken. Verder geeft een goede analyse ook de zekerheid dat de gedachten van de opdrachtgever en de uitvoerder op dezelfde lijn zitten Programmeertaal Als eerste heb ik geanalyseerd met welke taal ik mijn applicatie ga schrijven. Na wat opzoeken kwam ik tot de conclusie dat er 3 methodes zijn die zeer vaak gebruikt worden. Als eerste heb je natuurlijk de logische manier en dit is native programmeren. Dit houdt in dat je voor elk OS in een andere taal gaat schrijven en voor elk OS dus research zal uitvoeren en bugtesten. Deze methode sprak mij het meeste aan omdat je op deze manier de beste prestaties krijgt van de applicatie. Het nadeel is echter dat het veel tijd in beslag neemt. Omdat mijn Stagebedrijf de applicatie voor zoveel mogelijk mogelijke toestellen wou ontwikkelen viel deze optie voor deze reden af. De tweede methode is Adobe AIR. Dit is een multiplatform deployment platform. Dit betekent dat je de applicatie 1 keer schrijft en naar meerdere platformen kan deployen. Dit heeft natuurlijk als grote voordeel dat je veel tijd kan besparen met ontwikkeltijd. En aangezien de stage maar een beperkte tijd is leek mij dit wel een interessante methode. Adobe AIR werkt zoals flash in een speler, dit wilt zeggen dat je om de applicatie te kunnen runnen een speler nodig hebt. Je kan deze speler ook in je applicatie verwerken maar dan wordt de applicatie wel direct een stuk groter. Omdat je vaak gebruik maakt van mobiele datanetwerken leek dit mij geen goed idee. Verder heb ik een basisapplicatie gemaakt in AIR maar ik vond dit niet zo goed werken. Ook vond ik niet zo heel veel duidelijke informatie over de functionaliteit die ik nodig had. Om deze redenen leek mij dit geen goede keuze. Als laatste heb ik Phonegap bekeken. Deze methode werkt met HTML5 in combinatie met Javascript libraries. De library van Phonegap gaat ervoor zorgen dat de functies van het toestel aangeroepen kunnen worden. Zo kunnen we bijvoorbeeld opvragen of het toestel in portret of landschap mode is, maar ook kunnen we gegevens lokaal opslaan en later terug opvragen. Een andere JS librarie waar ik gebruik van maak is JQuery mobile. Deze maakt het eenvoudig om lay-outs te creëren en heeft enkele leuke features ingebouwd. Over deze methode was zeer veel informatie te vinden waardoor het ook eenvoudiger was om hiermee aan de slag te gaan. Ook ondersteunt Phonegap meer platformen dan Adobe AIR. Daarom heb ik phonegap gekozen als ontwikkelmethode.

13 13 Tabel 1: Overzicht voor en nadelen native Phonegap AIR Voordelen +Totale controle +Crossplatform +Crossplatform +Goede performantie +Veel informatie +Grafisch sterk +HTML5/CSS Nadelen -Langere ontwikkeltijd -slechtere performantie dan native -Heeft een speler nodig -Verschillende talen -niet snel ondersteuning voor nieuwe features -slechtere performantie dan native -Mac nodig voor IOS -niet snel ondersteuning voor nieuwe features Taal Java(Android), Objective- C(IOS) HTML5,CSS3,JS Actionscript,Flex,HTML,JS DBconnectie Webservice Webservice Webservice Lokale DB SQLite SQLite SQLite Applicatie Zodra de analyse van de ontwikkelmethode gemaakt was volgde een analyse van de applicatie. Deze heb ik in bijlage toegevoegd zodat je de opbouw hiervan kan bekijken. Een analyse bestaat uit 3 delen, een inleiding, een technische analyse en een functionele analyse. In de inleiding gaat we kort beschrijven wat de applicatie moet doen. In de technische analyse wordt er besproken met welke methode we gaan werken en hoe dit juist in zijn werk gaat. Tot slot volgt er nog de functionele analyse die beschrijft hoe de schermen eruit moeten zien, welke acties er worden uitgevoerd als je op een bepaalde knop drukt en welke velden er aanwezig moeten zijn. Deze analyse beschrijft de werking van de gehele applicatie uitvoerig.

14 Phonegap Zoals eerder vermeld is phonegap een multiplatform deployment platform. Dit wil zeggen dat je slechts eenmaal je code moet schrijven en je deze vervolgens naar meerdere platformen kan deployen. Zo biedt Phonegap ondersteuning aan wel 7 platformen zijnde IOS, Android, Blackberry, WebOS, Symbian, WP7 en Bada. Door deze grote verscheidenheid kan je met 1 applicatie het overgrote deel van de mobiele toestellen ondersteunen. Dit is zeer handig als je op een korte tijd een applicatie moet maken dat voor zoveel mogelijk personen beschikbaar is Ontwikkeling Een applicatie voor Phonegap maakt gebruikt van HTML5 en CSS in combinatie met Javascript libraries. Het voordeel hiervan is dat je op elk toestel kan ontwikkelen ; je hebt geen speciale software nodig om HTML of JS te kunnen schrijven. Notepad zou zelfs al voldoende zijn. De phonegap library zorgt dat functies van het device aangesproken kunnen worden. In je javascript code kan je dus een functie oproepen van Phonegap, en de JS library gaat de code uitvoeren die voor dat toestel geschreven is. De code voor een waarde lokaal op te slaan is als volgt: window.localstorage.setitem("username", username); Hier gaan we een veld username aanmaken en deze vullen met de variabele username. Phonegap zal er vervolgens voor zorgen dat de juiste code voor het toestel waar de applicatie op runt gebruikt zal worden Deployment Zodra onze code geschreven is moeten we deze natuurlijk nog deployen naar de verschillende platformen. Dit kan je voor elk platform afzonderlijk doen door de bijhorende SDK te downloaden en nog enkele stappen uit te voeren. Op de website van Phonegap vind je een tutorial voor elk platform apart. Maar de eenvoudigste manier is Phonegap:Build. Dit is een cloudservice die al dat werk voor ons gaat doen. Je moet gewoon eenvoudigweg al je code en resources in een file zippen en deze file vervolgens op Phonegap:Build uploaden. Vervolgens gaat de service de code uitpakken en voor elk platform deployen. Eens dat gebeurd is krijg je een overzichtspagina waar je de code voor elk platform kan downloaden. Je kan de applicatie dus downloaden door met je toestel de QR-code te scannen en zo da applicatie te installeren maar je kan de code ook naar je pc downloaden en deze dan via USB of dergelijke installeren op je device. Als je deze applicatie echter op de markt wilt brengen is het handiger om deze via de App-store te verdelen. Voor ios is het echter noodzakelijk om een developers licence aan te vragen en de hieraan vasthangende kost te betalen. Op die manier kan je pas beschikken over een sign key om voor ios te deployen.

15 15 Hieronder zie je een overzichtscherm van de applicatie die Phonegap:Build gemaakt heeft. Zoals je ziet heb ik voor deze applicatie nog geen sign key toegevoegd voor ios en voor deze reden geeft hij dus een foutmelding. Figuur 2 : Phonegap:Build(

16 Applicatie De applicatie zelf wordt dus geschreven in HTML5 in combinatie met CSS en JS voor de lay-out en de dynamische functionaliteit. Omdat wij op school altijd met Adobe Dreamweaver hebben gewerkt heb ik besloten om dit ook te gebruiken om de applicatie te ontwikkelen. Dit omdat dit reeds vertrouwd aanvoelt en je bepaalde functies al weet staan. Om te beginnen aan een applicatie maak je een nieuw project aan in Dreamweaver en je maakt een nieuw html bestand aan. In dit bestand leg je dan links naar de JS libraries die je wilt gebruiken. <script type="text/javascript" charset="utf-8" src="cordova js" /> <script type="text/javascript" src="jquery js" /> <script type="text/javascript" src="jquery.mobile js" /> Zodra deze links gelegd zijn kan je beginnen met je applicatie JQuery Mobile Voor de lay-out en schermovergangen heb ik gebruik gemaakt van JQuery mobile. Deze maken zeer goede producten en werden door mijn stagebedrijf aangeraden. JQuery beschikt over zeer veel mogelijkheden van simpele buttons tot uitgebreide lijsten en databaseconnecties. Voor mijn applicatie heb ik hier dan ook veelvuldig gebruik van gemaakt. De opbouw van een applicatie op deze manier verschilt echter wel ten opzichte van een website. Bij een website maak je voor elke pagina ook een html bestand aan en bij JQuery mobile heb je slechts 1 html bestand met daarin de verschillende pagina s. In onderstaande code zien we een voorbeeld van een applicatie met 2 schermen/pagina s. Zo zien we dat de div-tag een data-role attribuut bevat dat nieuw is sinds HTML5. Met dit attribuut kunnen we meegeven welke rol de tag speelt. Zo zien we verschillende rollen zoals page, header en content. <div data-role="page" id="page1"> </div> <div data-role="header" data-theme="e"> Header page 1 </div> <div data-role="content"> <p>body page 1</p> </div> <div data-role="page" id="page2"> </div> <div data-role="header" data-theme="e"> Header page 2 </div> <div data-role="content"> <p>body page 2</p> </div>

17 Schermen Onze applicatie bevat verschillende schermen met elk hun eigen functionaliteit. Deze leg ik wat grondiger uit om een goed beeld te krijgen van hoe alles is opgebouwd Login Hier moet de gebruiker zijn gebruikersnaam en wachtwoord van Eventdrive invoeren. Zodra deze zijn ingegeven gaan we op de server kijken of deze gebruiker bestaat. Bestaat deze niet of zijn de gegevens incorrect dan tonen we een foutmelding. Als deze correct zijn krijgen we van de server een positief antwoord en gaan we door naar de volgende pagina. Ook is er de mogelijk om de gebruikersnaam en het wachtwoord op te slaan. Dit is vooral gedaan voor het gebruiksgemak.

18 Eventselectie Als de gebruiker succesvol is ingelogd krijgen we onderstaand scherm te zien. Hier worden de evenementen getoond waar de gebruiker eigenaar van is. Als hij een evenement selecteert worden de basisgegevens opgehaald van zijn gekozen evenement. Er wordt wel gevraagd of hij zeker is van zijn keuze want sommige evenementen hebben zeer veel deelnemers. Als je dan per ongeluk het verkeerde selecteert haal je onnodig veel data binnen.

19 Overzicht Zodra de gebruiker het gewenste evenement gekozen heeft wordt de data opgehaald van de server en wordt er een overzicht opgebouwd. Dit overzicht bestaat uit een zoekveld om snel een deelnemer te kunnen zoeken uit een lijst met deelnemers. De knop is in 2 gedeeld zodat we een deelnemer snel kunnen inchecken zonder meer informatie te hoeven tonen. Moest het toch nodig zijn kan de gebruiker meer informatie opvragen over de deelnemer en deze op de andere pagina inchecken. Op deze manier moeten we dus niet alle data ophalen en besparen we de overhead. We kunnen werken met een absolute basis aan gegevens. We hebben slechts de voornaam, naam, bedrijf, barcode, en de status ingecheckt nodig. Verder is er ook een mogelijkheid voorzien om ter plaatse nog een gebruiker aan te maken.

20 Details Als de gebruiker toch nog meer informatie over een persoon wil kan hij deze opvragen en krijgt hij het volgende scherm te zien. In het veld extra info krijg je extra informatie te zien zoals is deze persoon alleen of met partner, is hij een VIP, enz. Op deze pagina kunnen we deze persoon alsnog in/uitchecken een badge printen en nog meer details opvragen. Hier komt dan alle informatie te staan waarover we beschikken Webservice connectie De webservice connectie gaan we met een Jquery functie verzorgen. Zoals je ziet is de functie in de URL verwerkt. Als we deze functie oproepen krijgen we alle gegevens van de persoon met het ID gelijk aan 550 en dit in JSON formaat. Als we gegevens terugkrijgen roepen we de callback functie op. Als er een fout is gaan we hier een melding voor geven. var query = " $.ajax({ datatype: "text", url: query, success: callback, error: function(xhr, ajaxoptions, thrownerror) { alert("foutmelding: " + thrownerror); } });

21 Webservice Aangezien ik de bestaande webservice niet kon gebruiken was ik genoodzaakt om er zelf één te schrijven. Het voordeel is wel dat we nu geen overhead hebben en ik zelf kan instellen welke data ik moet teruggeven Ontwikkeling Aangezien ik nog nooit een webservice geschreven had heb ik hierover eerst veel informatie moeten opzoeken. Aangezien de huidige webservice in C# geschreven is heb ik besloten dit ook te doen. Op die manier kan ik delen van de huidige webservice in mijn service integreren. Nadat ik veel informatie opgezocht had en de huidige webservice goed bestudeerd had begon ik aan mijn eigen webservice. Dit was toch moeilijker dan ik verwacht had. Je moet met veel rekening houden en functies toelaten om opgeroepen te worden. Ook vond ik het eenvoudiger om met JSON te werken dan met XML, dus moest ik dit ook voorzien in de webservice Beveiliging Omdat we natuurlijk niet willen dat iedereen zomaar onze gegevens kan zien moeten we onze server beveiligen. Omdat dit meestal met certificaten werkt en dit te complex was om op korte tijd zelfstandig te leren hebben we besloten om de data te encrypteren/coderen. AES leek mij een goede encryptie dus ben ik nagegaan hoe ik dit moest implementeren in de webservice en in de applicatie. Op serviceniveau lukte dit vrij snel, maar het decrypteren op cliëntniveau bleek wel wat lastiger. Omdat ik hier niet teveel tijd mee wou verliezen en hier al even mee bezig was heb ik besloten om een andere codering te gebruiken. Na wat zoeken kwam ik tot een Base64 codering. Deze codering is standaard aanwezig in C# dus moest ik enkel nog een functie zoeken om het in javascript te decoderen. Na wat zoekwerk heb ik dit ook kunnen implementeren in javascript.

22 Functies Login verifiëren: De gebruikersnaam en het wachtwoord van de klant worden gecontroleerd op de server. Als dit correct is wordt er een ID opgehaald waarmee we verder kunnen. Indien dit foutief is krijgen we een foutmelding teruggestuurd. Evenementen ophalen: Aan de hand van het ID dat we bij het aanmelden verkregen hebben gaan we de events ophalen die bij dit ID horen. Zo zijn we zeker dat we enkel toegang krijgen tot onze eigen evenementen. Deelnemers ophalen: Hier gaan we de deelnemers ophalen van het evenement dat we geselecteerd hebben. Hier gaan we enkel de noodzakelijke gegevens ophalen: Voornaam, Achternaam, Bedrijf en checkin status. Dit om niet teveel data te versturen over het telefoonnetwerk. Details ophalen: Als we toch meer informatie willen over een bepaalde deelnemer kunnen we met deze functie alle informatie van de deelnemer opvragen. Deelnemer toevoegen: Deze functie zal een nieuwe deelnemer toevoegen bij het evenement waarmee we aan het werken zijn. Deelnemer updaten: We gaan gebruikers in- en uitchecken en we willen deze veranderingen natuurlijk ook op onze database doen. Hiervoor gaan we een deelnemer updaten met zijn checkin-status.

23 BESLUIT. Het doel van mijn stage was het ontwikkelen van een mobiele applicatie voor meerdere platformen. Hiervoor heb ik eerst moeten analyseren met welke techniek we het beste kunnen werken. Voor dit project heb ik voor Phonegap gekozen welke de meeste platformen ondersteunt en waar veel informatie over te vinden was. Phonegap is een Javascript library welke de functies van de smartphone kan aanspreken. De applicatie zelf is in HTML5/CSS ontwikkeld. Na het ontwikkelen kan je het project gaan deployen naar de ondersteunde platformen. Ook moest er connectiviteit zijn met een database. Dit is standaard niet mogelijk dus heb ik hiervoor moeten werken met een webservice als tussenstap. Deze webservice heb ik geschreven in C#. Het project is geslaagd omdat er een werkende basisversie is afgeleverd. Verdere uitbreidingen heb ik niet kunnen realiseren door het tijdstekort.

24 24 LITERATUURLIJST Adobe Systems Inc(2012) Phonegap toepassingen en ondersteuning. Gevonden op 13 maart 2012: Motorola(2012) RhoElements Specificaties. Gevonden op 14 april 2012: pplication_development_framework/rhoelements/_documents/_staticfiles/rhoelemen ts-spec-sheet-english.pdf Scott Hanselman(2010) Webservice in C#. Gevonden op 8 mei 2012: djsonin30minutes.aspx Sam Croft(2010) JQuery: webservice aanroepen. Gevonden op 17 april 2012: JQuery(2011) JQuery demo s. Gevonden op 16 maart 2012: Adobe Systems Inc(2012) Adobe AIR toepassingen. Gevonden op 15 maart 2012:

25 BIJLAGEN Als bijlage heb ik mijn analyse voor de applicatie toegevoegd.

26 26 Analyse Introductie EventDrive is een online platform om eventmanagers te ondersteunen. Zo wordt het mogelijk om een website voor je event te maken, uitnodigingen te versturen, registratie te doen, Door deze registratie is het eenvoudig om statistieken te trekken na het event. Zo kan je snel zien hoeveel percent er niet is komen opdagen, hoelang de gasten gebleven zijn, enzovoort. De registratie gebeurt nu via een balie die bestaat uit een netbook, een barcodescanner, een badgeprinter en een scherm. Maar voor de kleinere events of voor meetings is het teveel werk om een balie op te stellen. Hiervoor zou een mobiele applicatie de geschikte oplossing zijn. Op deze manier kunnen we mensen met een smartphone of tablet in/uitchecken. Ook kunnen bedrijven de registratie voor kleine events of meetings zelf gaan doen met behulp van EventDrive We gaan dit realiseren door een applicatie voor mobile devices te ontwikkelen dat meerdere platformen ondersteunt. Op deze manier kunnen we op een relatief korte tijd een zeer ruim doelpubliek bereiken.

27 27 Technische analyse We gaan gebruik maken van HTML5 en dit in combinatie met Javascript libraries. Zo gebruiken we JQuery mobile voor de lay-out van de applicatie en phonegap om functies van het toestel op te roepen. Phonegap zorgt er ook voor dat de applicatie voor meerdere platformen gebruikt kan worden. Verder gebruiken we voor onze webservice odata, deze zorgt voor de connectiviteit tussen onze applicatie en de online database. We hebben voor deze technologieën zodat we verschillende platformen kunnen hanteren. Verder hebben we de 2 meest gebruikte Multi platform deployment technologieën bekeken zijnde Adobe AIR en Phonegap. Deze zijn erg aan elkaar gewaagd en scoren beide goed. Voor onze applicatie echter leek Phonegap mij het geschiktste omdat deze meer platformen ondersteunt dan AIR. Verder was er over Phonegap ook veel meer informatie te vinden dan over AIR voor mobiele applicaties. native Phonegap AIR Voordelen +Totale controle +Crossplatform +Crossplatform +Goede performantie +Veel informatie +Grafisch sterk +Ondersteund snel nieuwe +HTML5/CSS +HTML5/CSS/flex functies +WP7 Nadelen -Langere ontwikkeltijd -slechtere performantie -Soort VM, veel resources -Verschillende talen -niet snel -slechtere performantie ondersteuning voor nieuwe features -Mac nodig voor IOS -niet snel ondersteuning voor nieuwe features Taal? Java(Android), Objective-C(IOS) HTML5, CSS3, JS Actionscript, Flex, HTML, JS Data-con? Web service Web service Web service Lokale DB SQLite SQLite SQLite Enkele nuttige websites: Tot slot heb ik ook RhoElements van Motorola bekeken, maar aangezien dit framework voorlopig enkel toestellen van Motorola ondersteunt was dit voor mij geen optie. Ook vond ik geen mogelijkheid om zonder fysisch toestel te testen. Verder wordt er geprogrammeerd met HTML5/JS dus kunnen we in de toekomst eenvoudig de overstap maken. (Motorola) In Dreamweaver of een andere applicatie maak je een html pagina aan, deze vormt samen met je Javascript libraries de applicatie. De Phonegap library maakt het mogelijk om functionaliteiten van je toestel aan te spreken. Je kunt op verschillende manieren deployen, namelijk OS gericht gaan

28 deployen of voor alle platformen tegelijkertijd. Om OS gericht te deployen heb je de SDK nodig van het gekozen OS. Op deze manier kan je met Dreamweaver e.d. je applicatie emuleren en wordt een installatiebestand aangemaakt dat je op je fysisch toestel kan plaatsen. Maar de eenvoudigste manier is om te werken met Phonegap:Build( Hier moet je simpelweg je code zippen en je zip-archief uploaden naar hun website. De servers van Phonegap gaan dan op hun beurt jouw code builden voor alle ondersteunde platformen. Op dit moment is WP7 nog niet ondersteund bij Phonegap:Build, maar dit gaat de komende maanden komen staat op hun blog vermeld( Voor WP7 zullen we dus voorlopig via een SDK moeten deployen. 28

29 29 Functionele analyse De applicatie dient de gebruiker in staat te stellen om op basis van zijn reeds bestaande EventDrive gebruikersnaam en paswoord aan te loggen. Op basis van deze gebruikersgegevens gaat de applicatie de bij deze persoon horende events ophalen via de odata webservice. Er moet wel gecontroleerd worden of de gebruikersgegevens correct zijn of foutief. Pas als deze correct zijn krijgt de gebruiker toegang tot zijn events. Vervolgens kiest de gebruiker één van zijn events en wordt de data die bij het gekozen event hoort opgehaald via de odata webservice en lokaal opgeslagen in een SQLite database. Aan de hand van deze gegevens krijgt de gebruiker een lijst te zien van de deelnemers van het event. In deze lijst kan er gezocht worden op deelnemers via de naam of de barcode. Tot slot kan de gebruiker deelnemers in/uitchecken of meer informatie over deze persoon opvragen. Bij het in/uitchecken moet deze verandering ook op de online database aangebracht worden. -User login -Event retrievement -Listview -Check-in/check-out -synchronisation

30 30 User login Hier moet de gebruiker zijn gebruikersnaam en wachtwoord van EventDrive invoeren. Zodra deze zijn ingegeven kan de gebruiker connectie maken met de database om zo zijn events op te halen. Beschrijving velden Username: Hier komt de gebruikersnaam van EventDrive Password: Hier komt het wachtwoord van EventDrive horende bij de ingegeven gebruikersnaam. Werking Vink de checkboxen aan/uit naar gelang je keuze o Remember username aangevinkt Gebruikersnaam wordt lokaal opgeslagen na klik op login o Remember password aangevinkt Gebruikersnaam en wachtwoord wordt lokaal opgeslagen na klik op login Klik op login om aan te loggen o Gebruikersgegevens correct Verder naar overzicht van events o Gebruikersgegevens foutief Foutmelding en terug naar het login scherm

31 31 Event retrievement De gebruiker zijn login was correct en de events die bij deze persoon horen worden opgehaald. Aan de hand van de gebruikersnaam worden de betrokken events opgehaald en getoond in een listview. Werking Bovenaan de listview wordt de naam van de gebruiker getoond Hieronder wordt een lijst opgebouwd met events die bij deze persoon horen Klik op een Event Melding om te vragen of je zeker bent dat je de data wilt ophalen Bij bevestiging Data die bij dit event hoort afhalen met de odata Webservice en lokaal opslagen in onze SQLite database

32 32 Listview Zodra de gebruiker een evenement gekozen heeft en de data opgehaald is wordt de listview gecreëerd. Hierin staan alle personen die in de database staan. Elke rij uit de listview bestaat uit 2 buttons, de linkse button is een snelknop om een persoon in/uit te checken. De rechtse button dient om meer informatie over de desbetreffende persoon te krijgen. Verder staat er bovenaan een zoekbalk waarmee je snel deelnemers kan zoeken en met de knop met het plusteken kan je snel nog een deelnemer toevoegen. Beschrijving velden Zoekveld: Hierin kan deelnemers gaan zoeken aan de hand van de naam of een barcode Werking Klik op de linkse knop(check-in/check-out) deelnemer wordt in/uitgecheckt en de kleur en tekst veranderd zodat je snel kan zien wie er ingecheckt is en wie uitgecheckt. Klik op de rechtse knop(naam + bedrijf) Nu komen we op een venster waar je meer informatie over deze persoon zien. Klik op de plus knop(rechts naast de zoekbalk) We krijgen een venster waarmee we een nieuwe deelnemer kunnen aanmaken.

33 33 Check-in/check-out Hier krijgen we bovenaan wat extra informatie over de gekozen persoon, verder kunnen we de persoon ook in/uit-checken of alle details opvragen. Als uitbreiding is ook een badge uitprinten voorzien. Beschrijving velden Extra info hier komt een korte samenvatting van de belangrijkste details Werking Klik op check-in de persoon wordt ingecheckt Klik op check-out de persoon wordt uitgecheckt Klik op print badge er wordt een badge uitgeprint voor de persoon Klik op details alle details over de persoon worden getoond Synchronisation Bij het uitvoeren van acties gaan we moeten synchroniseren met de database. De connectie gaan we met het odata protocol verzorgen.

34 34 Screens Hier vragen of hij zeker is van het gekozen event