BASISCURSUS APPS ONTWIKKELEN · Mark Aalderink Basiscursus Apps ontwikkelen Apps maken voor iPhone,...

BASISCURSUSAPPS ONTWIKKELEN

MARK AALDERINKM

ARK AALDERINKAPPS ONTW

IKKELEN

Snel en eenvoudig een eigen app bouwen? Geschikt voor iPhone, iPad, Android en HTML 5? Geen probleem! Met deze Basiscursus publiceer je jouw app in slechts een week tijd!

Je bouwt je app in Appcelerator Titanium. Dit is het meest uitgebreide framework waarmee je apps kunt ontwikkelen voor meerdere platformen, waaronder Android en iOS. Jouw app is straks dus beschikbaar voor de meest gebruikte mobiele apparaten!

Het boek is speciaal geschreven voor beginnende gebruikers van Titanium. Je hebt geen ervaring nodig om met het boek aan de slag te gaan. Stap voor stap leer je hoe je de meest belangrijke functionaliteiten kunt gebruiken. Denk bijvoorbeeld aan GPS, kaarten en routes, het opslaan van gegevens in databases en bestanden en opslag van gegevens in de cloud. Uiteraard leer je ook hoe je jouw app publiceert in Apple’s App Store en de Android Market, zodat iedereen jouw app kan downloaden en gebruiken.

Deze tweede editie van Basiscursus Apps ontwikkelen is volledig vernieuwd. De tekst is aangepast aan Titanium versie 3.1. Daarnaast is het boek uitgebreid met praktische informatie over het bouwen van HTML 5 webapps en over de Appcelerator cloud.

OVER DE AUTEUR Mark Aalderink is eigenaar van WorldWise Learning en heeft verschillende apps ontwikkeld voor iPhone, iPad en Android. Hij is gespecialiseerd in het ontwikkelen van educatieve applicaties.

BASISCURSUS

980

978 90 12 58593 4

7192 SDU Cover_AppsOntw_iOS.indd 1 19-09-13 11:11

Mark Aalderink

BasiscursusApps ontwikkelen

Apps maken voor iPhone, iPad, Android en HTML 5

Basiscursus Apps bouwen 2013.indd iBasiscursus Apps bouwen 2013.indd i 17-09-13 16:0317-09-13 16:03

Meer informatie over deze en andere uitgaven kunt u verkrijgen bij:

BIM Media B.V.Postbus 16262,2500 BG Den Haagtel.: (070) 304 67 77www.bimmedia.nl

© 2013 BIM Media B.V., Den Haag

Academic Service is een imprint van BIM Media B.V.

Vormgeving en zetwerk: az grafi sch serviceburo, Den Haag, Omslagontwerp: LandGraphics, Amsterdamisbn 978901258 593 4nur 991

Alle rechten voorbehouden. Alle intellectuele eigendomsrechten, zoals auteurs- en databankrechten, ten aanzien van deze uitgave worden uitdrukkelijk voorbehouden. Deze rechten berusten bij BIM Media B.V. en de auteur.Behoudens de in of krachtens de Auteurswet gestelde uitzonderingen, mag niets uit deze uitgave worden verveelvoudigd, opgeslagen in een geautomatiseerd gegevens-bestand of openbaar gemaakt in enige vorm of op enige wijze, hetzij elektronisch, mechanisch, door fotokopieën, opnamen of enige andere manier, zonder voorafgaande schriftelijke toestemming van de uitgever.Voor zover het maken van reprografi sche verveelvoudigingen uit deze uitgave is toege-staan op grond van artikel 16 h Auteurswet, dient men de daarvoor wettelijk verschul-digde vergoedingen te voldoen aan de Stichting Reprorecht (Postbus 3051, 2130 KB Hoofddorp, www.reprorecht.nl). Voor het overnemen van gedeelte(n) uit deze uitgave in bloemlezingen, readers en andere compilatiewerken (artikel 16 Auteurswet) dient men zich te wenden tot de Stichting PRO (Stichting Publicatie- en Reproductierechten Orga-nisatie, Postbus 3060, 2130 KB Hoofddorp, www.cedar.nl/pro). Voor het overnemen van een gedeelte van deze uitgave ten behoeve van commerciële doeleinden dient men zich te wenden tot de uitgever.Hoewel aan de totstandkoming van deze uitgave de uiterste zorg is besteed, kan voor de afwezigheid van eventuele (druk)fouten en onvolledigheden niet worden ingestaan en aanvaarden de auteur(s), redacteur(en) en uitgever deswege geen aansprakelijkheid voor de gevolgen van eventueel voorkomende fouten en onvolledigheden.

All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photo-copying, recording or otherwise, without the publisher’s prior consent.

While every effort has been made to ensure the reliability of the information presented in this publication, BIM Media B.V. neither guarantees the accuracy of the data con-tained herein nor accepts responsibility for errors or omissions or their consequences.

Basiscursus Apps bouwen 2013.indd iiBasiscursus Apps bouwen 2013.indd ii 17-09-13 16:0317-09-13 16:03

iii

Inhoud

Inleiding 1

Hoofdstuk 1 Titanium, iOS, Android en HTML 5 webapps: introductie en installatie 71.1 In dit hoofdstuk 71.2 Apps ontwikkelen voor iPhone, iPad, Android en

HTML 5 71.3 Het Titanium framework 10

1.3.1 Inleiding 101.3.2 Hoe Titanium het eindpakket maakt 11

1.4 Installeren van Titanium en Titanium Studio 121.4.1 Installatie 121.4.2 Testen van de installatie in de emulator 131.4.3 Testen op het toestel 14

1.5 iOS: installatie en tools 141.5.1 Installeren van de iOS SDK 141.5.2 De ontwikkeltools 14

1.6 Android: installatie en tools 161.6.1 Installeren van de Android SDK 161.6.2 De ontwikkeltools 17

1.7 Titanium Studio gebruiken 201.8 Appcelerators voorbeeldapplicatie: KitchenSink 21

Hoofdstuk 2 Het Titanium-project 232.1 In dit hoofdstuk 232.2 De opbouw van een Titanium-project 23

2.2.1 De projectmap 232.2.2 Instellingen voor de app 242.2.3 De Resources-map 262.2.4 Begin van uitvoering van programmacode: app.js 28

2.3 Titanium en JavaScript 302.3.1 Objecten en namespaces 302.3.2 Geheugengebruik 312.3.3 Titaniums uitbreidingen van JavaScript 32

Basiscursus Apps bouwen 2013.indd iiiBasiscursus Apps bouwen 2013.indd iii 17-09-13 16:0317-09-13 16:03

Basiscursus Apps ontwikkeleniv

2.4 Architectuur van Titanium 342.4.1 Modules 342.4.2 Het ontwerppatroon achter Titanium:

het factory pattern 372.4.3 Online documentatie: API Docs 37

2.5 Debuggen 382.6 Het ontwerp van de app 402.7 Verschillen tussen iOS, Android en HTML 5 webapps

oplossen 41

Hoofdstuk 3 De gebruikersinterface: views, windows en widgets 453.1 In dit hoofdstuk 453.2 Het ontwerp van gebruikersinterfaces voor apps 453.3 Omgaan met events 483.4 Indeling van Titaniums gebruikersinterface-

componenten: views, widgets en windows 503.5 Views en labels 51

3.5.1 Het View-object 513.5.2 Presentatie van tekst: labels 57

3.6 Het hoofdmenu: de tabgroep 603.6.1 De tabgroep 603.6.2 Tabbladen 62

3.7 Windows 663.7.1 De elementen van een window 663.7.2 ‘Zware’ windows 70

3.8 Lay-out en schermoriëntatie 733.8.1 Lay-out 733.8.2 Schermoriëntaties 74

Hoofdstuk 4 Tabeloverzichten 774.1 In dit hoofdstuk 774.2 Het eenvoudige tabeloverzicht 774.3 Werken aan de opmaak 86

4.3.1 Rijen 864.3.2 Secties 88

4.4 Sorteren en filteren 924.4.1 Sorteren met een tabbalk 924.4.2 Filteren van informatie met een zoekbalk 964.4.3 Gegevens filteren met een picker 97

Hoofdstuk 5 Invoer en presentatie 1055.1 In dit hoofdstuk 1055.2 Knoppen en balken 105

5.2.1 Knoppen 1055.2.2 Werkbalk (iOS) 106

5.3 Afbeeldingen: de imageview 109

Basiscursus Apps bouwen 2013.indd ivBasiscursus Apps bouwen 2013.indd iv 17-09-13 16:0317-09-13 16:03

vInhoud

5.4 Invoer 1135.4.1 Tekstveld en tekstgebied 1135.4.2 De switch 117

5.5 Scrolviews, scrollable-views en coverflowviews 1215.5.1 De scrolview 1215.5.2 De scrollable-view 1235.5.3 De coverflowview (iPhone) 126

5.6 De webbrowser 1285.6.1 De webview 1285.6.2 De externe browser openen 133

Hoofdstuk 6 Location-based services: GPS, kaarten en routes 1356.1 In dit hoofdstuk 1356.2 Locatiegegevens: GPS 135

6.2.1 Inleiding 1356.2.2 Titanium-events voor het kompas,

de bewegingssensor en locatiebepaling 1366.2.3 Filteren op afstand 1426.2.4 De slider 142

6.3 Kaarten 1466.3.1 De kaart 1466.3.2 Annotaties 1506.3.3 Routes op kaarten 154

Hoofdstuk 7 Opslag van gegevens 1577.1 In dit hoofdstuk 1577.2 Inleiding 1577.3 URL’s en de toegankelijke mappen 1587.4 Applicatie-properties 1597.5 Werken met (lokale) bestanden 163

7.5.1 Module Titanium.Filesystem 1637.5.2 Het File-object 165

7.6 Databases: SQLite 3 1677.6.1 Inleiding 1677.6.2 Aanmaken, installeren en openen van

de database 1687.6.3 Methodes van het DB-object 1687.6.4 SQLite-datatypen 1697.6.5 Voorbeelden 170

Hoofdstuk 8 Testen en publiceren 1738.1 In dit hoofdstuk 1738.2 Testen 173

8.2.1 Android en schermtypen 1738.2.2 Andere testen 1758.2.3 Testversie naar bètatesters 175

8.3 Publiceren in de App Store 1768.4 Publiceren in Google’s Play Store 177

Basiscursus Apps bouwen 2013.indd vBasiscursus Apps bouwen 2013.indd v 17-09-13 16:0317-09-13 16:03

Basiscursus Apps ontwikkelenvi

8.5 Publicatie van webapps 1798.6 Updates verzorgen 180

Hoofdstuk 9 Aanpassingen voor de iPad 1839.1 In dit hoofdstuk 1839.2 Verschillen in ontwerp tussen iPhone en iPad 1839.3 Het splitwindow 1849.4 De popover 189

Hoofdstuk 10 Appcelerators clouddienst: Appcelerator Cloud Services (ACS) 19310.1 In dit hoofdstuk 19310.2 De Appcelerator Cloud 19310.3 Mogelijkheden en werkwijze 19410.4 Voorbeelden 196

Hoofdstuk 11 Hoe nu verder? 201

Referenties 203

Appendices 205I. Kleuren 205II. Problemen oplossen 205III. De ontwikkelversie van Titanium verkrijgen:

continuous builds 206

Register 207

Basiscursus Apps bouwen 2013.indd viBasiscursus Apps bouwen 2013.indd vi 17-09-13 16:0317-09-13 16:03

1

Inleiding

Je kunt je tegenwoordig niet meer op straat begeven zonder iemand bezig te zien met zijn of haar smartphone. Het geavanceerde toestel is mateloos popu-lair. In Nederland bezit inmiddels meer dan 60 procent van de bevolking een smartphone. Ook tabletcomputers zijn sterk in opmars: juni 2013 kon 44 pro-cent van de Nederlanders zich eigenaar noemen van een dergelijke computer.

Smartphones en tablets zijn vooral populair om de apps, kleine applicaties die gebruikmaken van de technische mogelijkheden van het toestel. Apps werken vaak beter dan mobiele websites en hebben meer mogelijkheden.

Wereldwijd wordt er door bedrijven en particulieren miljarden uitgegeven aan apps. In 2013 bedraagt de omvang van de markt voor apps ongeveer 68 miljard dollar en die zal naar verwachting doorgroeien tot 143 miljard dollar in 2016. Dit is een belangrijke reden om apps te ontwikkelen – naast uiteraard de uitdaging om bezig te zijn met het verder uitbouwen van de mogelijkheden van dit geavanceerd apparaat.

Een groot probleem is echter de versnippering van platformen. Je hebt tegen-woordig Apple’s iPhone en iPad met het besturingssysteem iOS, Android, Windows Phone en BlackBerry OS. Binnenkort komt daar waarschijnlijk Tizen bij. Bovendien draaien de telefoons verschillende versies van het besturings-systeem. Omdat zoveel verschillende besturingssystemen en andere specifi -caties van toestellen op de markt zijn, is het ontwikkelen van dezelfde applicatie voor meerdere telefoontypen bijzonder moeilijk.

Al deze platformen hebben een eigen ontwikkelomgeving. Daarnaast is elk platform toegesneden op een bepaalde programmeertaal. Voor iOS program-meer je in Objective-C of C++, terwijl Android en BlackBerry Java verwachten en Windows Phone gericht is op C#. Het vertalen van een app naar een andere taal is tijdrovend (en saai!) en vereist veel aanpassingen door verschillen in de API’s – de functiebibliotheken. Dit maakt het voor bedrijven moeilijk om dezelfde app voor verschillende platformen uit te brengen zonder hoge kosten te maken. Voor de zelfstandige ontwikkelaar is dit helemaal niet weggelegd.

Voor dit probleem is gelukkig een oplossing beschikbaar: het ontwikkelen van apps met een cross-platform ontwikkeltool. Verschillende van zulke

Basiscursus Apps bouwen 2013.indd 1Basiscursus Apps bouwen 2013.indd 1 17-09-13 16:0317-09-13 16:03

Basiscursus Apps ontwikkelen2

tools hebben zich inmiddels aangediend, zoals Adobe’s PhoneGap ( www. phonegap.com) en Corona (www.coronalabs.com). Er is echter maar één cross-platform ontwikkeltool beschikbaar die je in staat stelt om van bijna alle mogelijkheden van iPhone, iPad, Android en BlackBerry en HTML 5 gebruik te maken. Deze tool heet Titanium en is ontwikkeld door het Ameri-kaanse bedrijf Appcelerator (www.appcelerator.com).

TitaniumAppcelerator is in 2006 opgericht met als doel ‘webontwikkelaars in staat te stellen om intuïtieve, contentrijke applicaties te bouwen voor mobiele en desktopplatformen’. Appcelerator is ervan overtuigd dat je met webtechnie-ken (voornamelijk Javascript) applicaties niet alleen veel sneller kunt bou-wen, maar ook voor verschillende platforms. Inmiddels richt Appcelerator zich vooral op enterprises, waarbij ze een platform willen bieden voor de volledige lifecycle van appontwikkeling. Voor dit enterpriseplatform moeten (veel) dollars betaald worden, maar Titanium blijft volledig gratis en open source.

Titanium werkt alleen met de programmeertaal JavaScript. JavaScript is een eenvoudige objectgerichte taal die veel gebruikt wordt door webontwikke-laars. Het is ook een taal die door zijn eenvoudige syntaxis makkelijk is te leren. Tegelijkertijd is het een krachtige programmeertaal.

In de huidige versie van Titanium kunnen apps ontwikkeld worden voor iPhone en iPad, Android (vanaf Android 2.3.3), BlackBerry, Tizen en HTML 5. In dit boek behandelen we alleen het ontwikkelen van apps voor iPhone, iPad, Android en HTML 5 webapps. Hoewel Titaniums Windows Phone SDK in een vergevorderd stadium is, is hij nog niet beschikbaar gesteld.

Voordelen van TitaniumElke ontwikkeltool heeft zijn voor- en nadelen. De nadelen van Titanium betroffen vooral het gebrek aan documentatie, problemen met de installatie en bugs. Inmiddels zijn deze problemen grotendeels opgelost. Daarnaast is JavaScript altijd langzamer dan Objective-C of C++. Toch zijn de prestaties aanmerkelijk verbeterd in vergelijking met vroegere versies van Titanium. Titanium biedt veel voordelen, waarvan de belangrijkste hier worden opge-somd:• Je maakt native apps, geen webapps: het eindproduct is een volwaardige

app die niet te onderscheiden is van apps die met de platformeigen ontwikkeltools zijn gebouwd (hoewel ze iets langzamer kunnen zijn, maar dat is, mits goed ontworpen en ontwikkeld, met de snelle toestellen van tegenwoordig niet of nauwelijks meer te merken).

• Je kunt met hergebruik van 80 tot 90 procent van dezelfde code jouw app compileren voor iPhone, iPad, Android, BlackBerry en HTML 5.

• Titanium maakt gebruik van een algemeen bekende en eenvoudige pro-grammeertaal: JavaScript. Je hoeft dus geen Objective-C of Java te leren en ook geen ingewikkelde SDK’s en API’s te beheersen.


3Inleiding

• Je kunt razendsnel ontwikkelen met Titanium: maak binnen een week jouw eigen app!

• Appcelerator is een fl exibel bedrijf dat inspeelt op de laatste ontwikkelin-gen: zij maken plug-in-modules waarmee je gebruik kunt maken van de laatste technieken.

• Titanium is gratis en open source.• Titanium heeft een grote gebruikersgroep die nieuwe functies suggereert,

bugs signaleert en oplossingen voor problemen aandraagt.• Titanium wordt getest voor en aangepast op de nieuwste versies van

besturingssystemen.• Je kunt online volgen waarmee Appcelerators team bezig is en de laatste

gebouwde versies van Titanium (continuous builds) zijn dagelijks beschik-baar.

De voorbeeldapp: Utrecht InsideDe applicatie die we in dit boek gaan ontwikkelen heet Utrecht Inside. Deze app geeft informatie over interessante locaties in Utrecht, toont wandelroutes tussen locaties en presenteert aanvullende gegevens over de stad. Je kunt bij locaties denken aan restaurants, cafés en andere uitgaansgelegenheden, maar ook aan culturele instellingen zoals musea. Voor de app maken we gebruik van enkele veelgebruikte functies van de mobiele telefoon: de belang-rijkste componenten van de gebruikersinterface, GPS, kaarten en de interne internetbrowser (een webview). In het vervolg wordt met Utrecht Inside aan deze app gerefereerd. Om de Titanium-API’s zo goed mogelijk onder de knie te krijgen is het aan te raden om de voorbeeldapplicatie stap voor stap na te bouwen.

Voor wie dit boek bedoeld isDit boek is gericht op (web)ontwikkelaars, beginnende programmeurs en hobbyisten die apps willen ontwikkelen voor iPhone, iPad, Android en/of het mobiele web. Het is ook geschikt voor onderwijsinstellingen.

Voor dit boek wordt redelijke kennis van JavaScript en minimale kennis van HTML en XML voorondersteld. Dit houdt in dat je op de hoogte moet zijn van de JavaScript-keywords, datatypen en programmastructuren. Ook komt het van pas als je overweg kunt met SQL en relationele databases. Mocht je nog geen ervaring hebben met JavaScript, gebruik dan de Basiscursus Java-Script 1.5 (Den Haag: Sdu, 2008) om het onder de knie te krijgen.

Als je dit boek hebt doorgewerkt, heb je alles in huis om een eigen app te bouwen voor iPhone, iPad, Android en het mobiele web. Je hebt de basis van Titanium onder de knie en kunt gaan werken aan het uitbouwen van jouw kennis door aan meer complexe projecten te werken. De wereld van apps staat voor je open!



Wat je nodig hebt voor dit boekJe kunt zowel een Apple- als Windows-computer gebruiken. Ontwikkelen voor iPhone en iPad vereist een Apple-computer met OS X vanaf versie 10.6.4. Android-apps kunnen zowel op een Mac- als een Windows-computer gebouwd worden. Het draaien van Titanium onder Windows vereist een rede-lijk snelle computer. Titanium draait ook onder Linux, maar het installatie-proces voor Linux wordt niet beschreven in dit boek.

Wij raden een snelle Apple-computer aan. Het ontwikkelen van apps voor Android is moeizaam door de traagheid van de Android-compiler en emulator. Veel ontwikkelaars maken daarom eerst een app voor de iPhone en passen die daarna aan voor Android.

Daarnaast heb je de iPhone SDK nodig. Hiermee kun je iPhone apps ontwik-kelen en uitproberen in de iPhone Simulator. Om de app te laten draaien op een iPhone is het nodig om mee te doen aan het iPhone Developer Program (kosten: 80 euro per jaar). Ook is deelname aan het Developer Program nodig om apps te kunnen publiceren in de App Store.

De Android SDK is gratis te downloaden. Hiermee kun je ook apps installeren op een Android-telefoon. Om apps te kunnen publiceren in Google’s Play Store moet je eenmalig 25 dollar betalen.

Afspraken in dit boek• Nieuwe termen, URL’s, e-mailadressen, bestandsnamen en code-elemen-

ten zoals namen van variabelen, functienamen, datatypen, omgevings-variabelen, statements en keywords worden in de lopende tekst cursief weergegeven.

• Programmacode en commando’s (die je letterlijk moet intypen) staan in dit lettertype.

• Navigatie in menu’s, mappen en schermen is vaak aangegeven met een pijl: →

• Regelmatig zijn opmerkingen, tips en waarschuwingen te lezen. Deze zijn te herkennen aan de icoontjes:

= waarschuwing

= tip

= opmerking

Gebruik van voorbeeldcodeJe mag de code in dit boek gebruiken in je eigen apps. Zelfs als je grote stukken code gebruikt, hoef je geen contact op te nemen voor toestemming. We stellen het uiteraard wel op prijs als je een verwijzing naar dit boek opneemt in je app. Daarbij geef je gewoonlijk de titel, auteur, uitgever en het jaar van uitgave op. Bijvoorbeeld Basiscursus Apps ontwikkelen, Mark Aalderink. 2e ed. Den Haag: Sdu, 2013.


9 • Inleiding 5

Alle code en data kun je vinden op de website van WorldWise Learning (www.worldwiselearning.org/basiscursus). Naast de code die in dit boek is afgedrukt, vind je hier uitgebreidere voorbeelden. Soms slaan we in dit boek code over. Deze code kun je dan van de website halen.

FeedbackWij hopen dat dit boek je goed op weg helpt met het ontwikkelen van apps en houden ons aanbevolen voor suggesties en opmerkingen. Die nemen we dan mee in toekomstige drukken. Stuur hiervoor een e-mailbericht naar [email protected].

Nieuw in deze tweede editieSinds Titanium 1.6 is het platform sterk gewijzigd. Het belangrijkst is onge-twijfeld het toevoegen van een eigen ontwikkelomgeving Titanium Studio. Dit heeft ook het installeren van Titanium makkelijker gemaakt. Een andere grote vernieuwing is de integratie van een clouddienst met Titanium: de App-celerator Cloud Services (ACS). Afgezien van het up-to-date brengen van de hele tekst aan Titanium 3.1, schenken we aandacht aan deze twee onderwer-pen.

Ten slotte wens ik de lezer veel programmeerplezier!

Augustus 2013Mark Aalderink


7

11

1 Titanium, iOS, Android en HTML 5 webapps: introductie en installatieiOS en Android zijn twee veelgebruikte besturingssystemen voor mobiele

telefoons en tabletcomputers. Hoewel deze systemen zeer verschillend zijn, kun

je in Titanium toch met dezelfde code apps compileren die op beide systemen

draaien. In dit hoofdstuk gaan we kort in op deze besturings systemen en

vertellen we hoe je hun ontwikkeltools (de SDK’s) installeert. Ook gaan we kort

in op de mogelijkheid om met Titanium HTML 5 webapps te ontwikkelen. Eerst

installeren we Titanium (Studio) en testen we deze installatie.

1.1 In dit hoofdstuk

• Inleiding op het ontwikkelen van apps voor iPhone, iPad, Android en HTML 5

• Overzicht van Titanium• Installatiehandleiding voor Titanium Studio• Installatiehandleiding voor de iOS (iPhone/iPad) en Android SDK• Introductie op de ontwikkeltools voor iOS en Android• Appcelerators voorbeeldapplicatie: KitchenSink

1.2 Apps ontwikkelen voor iPhone, iPad, Android en HTML 5

Apps ontwerpen en bouwen verschilt in een aantal essentiële opzichten van het bouwen van desktopapplicaties. Het belangrijkste verschil is de beperkte schermgrootte en de sterk afwijkende gebruikersinterface. Zowel bij de iPhone en iPad als bij het Android-systeem hoort een heel eigen gebruikers-interface, die je als ontwikkelaar goed moet leren kennen. Daarnaast is het grote verschil tussen het ontwikkelen voor desktopcomputers en smart-phones de snelheid waarmee nieuwe versies van het besturingssysteem gelanceerd worden. Ten slotte heb je in het geval van Android en webapps te maken met grote verschillen tussen toestellen waarop het systeem draait.



iOS: iPhone en iPad-appsApple’s iPhone heeft ervoor gezorgd dat smartphones in 2008 en 2009 zijn doorgedrongen tot een breed publiek. Ondanks de opmars van Android is de iPhone zeer populair gebleven. Door het aantrekkelijke design van zijn pro-ducten en de hoge kwaliteit van de gebruikersinterface (en het besturings-systeem) heeft Apple zijn klanten aan zich weten te binden.

Figuur 1.1: De App Store

De App Store , Apple’s distributieplatform voor iPhone en iPad-apps, is zeer in trek. Er zijn al meer dan 50 miljard apps gedownload. Dat maakt het tot een interessant medium voor jouw apps. Publiceren in de App Store is echter stressvol. Het kan enkele weken duren voordat je een uitslag hebt over Apple’s beoordeling van jouw app. Van te voren is ook niet goed in te schatten of de app door de procedure komt. Als dit niet het geval is, moet je, na de nodige wijzigingen, de app opnieuw indienen en begint de procedure weer van voor af aan.

iOS is het besturingssysteem dat draait op de iPhone, iPod Touch en iPad. In Titanium kun je apps ontwikkelen voor al deze toestellen en voor de meest recente versies van iOS (op dit moment iOS 7). Titanium maakt hiervoor gebruik van de compiler en tools van de ontwikkelomgeving voor iOS: de iOS SDK.

De iOS SDK biedt de geavanceerde ontwikkelomgeving (IDE) Xcode en verschillende andere tools. Zo kun je gebruikersinterfaces visueel ontwerpen met de Interface Builder. In paragraaf 1.5.2 worden enkele tools van de iOS SDK uitvoeriger onder de loep genomen, omdat je die soms nodig hebt als Titanium-ontwikkelaar.

Apple heeft uitvoerige documentatie beschikbaar gesteld voor ontwikkelaars. Deze kun je vinden in het iOS Dev Center (developer.apple.com/devcenter/ios). Deze documentatie heb je als Titanium-ontwikkelaar zelden nodig. Er is één uitzondering: Je moet de iOS Human Interface Guidelines lezen. Hierin vind je richtlijnen voor het ontwerp van de gebruikersinterface voor iPhone en iPad. Dit helpt je een fl ink eind op weg met het ontwerp van de gebruikersinterface voor jouw app. Daarnaast geeft het essentiële informatie over technische specifi caties voor pictogrammen en afbeeldingen.

De iPhone en iPad verschillen niet veel van elkaar, behalve de schermgrootte en het ontbreken van een telefoon op de iPad. Door de grotere schermgrootte zijn er twee gebruikersinterface-componenten beschikbaar op de iPad die je niet hebt op de iPhone: het splitwindow en de popover. In hoofdstuk 9 gaan we hierop in.


1 • Titanium, iOS, Android en HTML 5 webapps: introductie en installatie 9

Android apps Android is Google’s besturingssysteem voor mobiele telefoons en tablet-computers. Het is dé concurrent van iOS. Inmiddels draait Android op de meest verkochte smartphones. Op het moment van dit schrijven is de laatste Android-versie 4.3 (Jelly Bean). Titanium 3.1 apps draaien op toestellen met Android 2.3.3 of hoger.

Figuur 1.2: Het Android-logo

Evenals Apple biedt Google een distributieplatform voor apps: de Play Store . Het is makkelijker om apps hierin te publiceren dan in de App Store, want voor publicatie in de Play Store is geen langdurige testen toelatingsproce-dure vereist.

Technisch gezien is Android een op de programmeertaal Java gebaseerd systeem dat draait op een Linux 2.6/3.x kern. Hoewel Android veel functies heeft, is het, zoals gebruikelijk bij besturingssystemen voor mobiele toestel-len, een licht systeem. Dit is nodig omdat mobiele toestellen weinig geheugen hebben en omdat het processorgebruik zo gering mogelijk moet zijn. Anders zou de batterij te snel leeglopen.

Elke Android-applicatie wordt uitgevoerd in een eigen virtuele machine, een instantie van de Java virtuele machine Dalvik VM , die de applicatiecode uitvoert. Hiervoor is gekozen omdat dit het systeem veilig en stabiel houdt. Als gevolg hiervan kan een applicatie alleen via het Android-systeem commu-niceren met andere apps. Dalvik VM is speciaal ontworpen en geoptimali-seerd voor Android om batterijconsumptie te beperken en om te gaan met het CPU-vermogen van een mobiele telefoon.

Hoewel het mogelijk is om Android-apps te ontwikkelen in C(++), gebeurt dat meestal in Java. Naast dat je een goede beheersing van Java dient te hebben, moet je op de hoogte zijn van de architectuur van Android. Voor het werken met Titanium hoef je geen kennis te hebben van Java noch van de Android- architectuur. Alleen als je ingewikkelder apps wilt maken, die bijvoorbeeld bewerkingen op de achtergrond uitvoeren of met het systeem communice-ren, heb je kennis van het Android-systeem nodig. In dit inleidende boek beperken we ons tot functionaliteit waarvoor deze kennis niet nodig is. Mocht je je in het Android-systeem willen verdiepen, dan kun je in de referenties achter in dit boek verwijzingen vinden naar boeken en websites. In ons Handboek apps ontwikkelen bevindt zich een hoofdstuk waarin we het Android-systeem toelichten.



Voor het testen van jouw applicatie is het wel aan te raden om iets te weten over de Android-ontwikkeltools. In paragraaf 1.6.2 zullen we hierover het nodige vertellen.

HTML 5 webapps Een webapp is een mobiele webpagina die gebruik maakt van de laatste mogelijkheden van HTML. HTML 5 is de meest recente standaard van HTML en biedt geavanceerde mogelijkheden om te werken met bijvoorbeeld video en locatiegegevens (GPS). In mobiele browsers is de meeste functionaliteit van HTML 5 al ingebouwd. Daarom is het mogelijk om webapps te bouwen met Titanium die goed draaien in browsers van vrijwel alle recente mobiele toestellen.

Vanaf Titanium 2.0 kun je met dezelfde code HTML 5 webapps compileren. Deze apps kun je vervolgen hosten op een webserver. Voordat je dit doet kun je de app testen in de browser op jouw machine. Titanium Studio zorgt voor de lokale webserver. In vergelijking met Android en iOS dient opgemerkt te worden dat veel widgets ontbreken, evenals sommige platformspecifi eke functies zoals push-berichten.

1.3 Het Titanium framework

1.3.1 Inleiding

Figuur 1.3: Het logo van Titanium

Titanium is een ontwikkelframework waarin je code voor mobiele apps kunt schrijven in JavaScript. Daarna is die code te compileren voor meerdere mobiele platformen. Op dit moment zijn iOS (iPhone/iPad), Android, Black-Berry, HTML 5 en Tizen beschikbaar. Het ligt in de planning om binnenkort ook Windows Phone te ondersteunen – de ontwikkeling hiervan is in een vergevorderd stadium.

Titanium biedt uitgebreide functionaliteit. Je kunt in Titanium gebruikmaken van de meeste functies die smartphones bieden zoals GPS, de internetverbin-ding, kaarten en de bewegingssensor. Daarnaast wordt Titanium voortdurend uitgebreid met nieuwe functies. Ook kun je zelf modules schrijven in de plat-formspecifi eke programmeertaal en daarbij gebruikmaken van platform-bibliotheken.

Met uitzondering van HTML 5 webapps zijn Titanium-apps geen webapps (mobiele sites) of native apps die bestaan uit een wrapper rond een webapp. Code wordt dus niet uitgevoerd in een webview, een kleine in-app browser. Titanium maakt daarentegen gebruik van de native gebruikersinterface en het eindpakket is een volwaardige native app. Jouw apps zijn niet te onder-



scheiden van apps die met platformspecifi eke ontwikkeltools zijn ontwikkeld. Ook is Titanium zo gemaakt dat apps zo snel mogelijk uitgevoerd worden. Vooral in de laatste versies van Titanium is de snelheid drastisch verbeterd.

Titanium heeft een eigen ontwikkelomgeving (IDE): Titanium Studio. Met Titanium Studio kun je Titanium-projecten aanmaken, bewerken, debuggen en draaien in de simulator of op het toestel. Ook kun je hiermee het eind-pakket voor distributie genereren. In paragraaf 1.7 gaan we nader op Titanium Studio in.In de volgende paragraaf wordt uitgelegd hoe Titanium technisch werkt. Hoe-wel je dit niet hoeft te weten om apps te kunnen bouwen, helpt het om te begrijpen wat er onder de kap gebeurt.

1.3.2 Hoe Titanium het eindpakket maakt

Titanium optimaliseert jouw JavaScript-code, combineert die met native applicatiecode en gebruikt dan de tools van het geselecteerde platform om het eindpakket te maken.

Meer specifi ek start Titanium achtereenvolgens de volgende drie componen-ten:1 de pre-compiler,2 de front-end compiler,3 de platform compiler en packager.

In de pre-compiler fase optimaliseert Titanium jouw JavaScript-code en bepaalt het welke Titanium-modules in het pakket opgenomen moeten wor-den. Dit zorgt ervoor dat het eindpakket zo klein mogelijk blijft. Omdat Titanium de code optimaliseert is het niet nodig om een JavaScript-minifi er te gebruiken zoals JSMin of YUI Compressor.

Daarna produceert de front-end compiler de platformspecifi eke native code en het native project, en produceert het de extra code die nodig is om Titanium te kunnen compileren door de platformcompiler.

Ten slotte gebruikt Titanium de tools van het geselecteerde platform om het eindpakket te compileren met de platform compiler . Daarna wordt de app in de emulator geïnstalleerd en opgestart of op het toestel geïnstalleerd, al naar gelang jouw keuze.

De door jou geschreven JavaScript-code wordt bij het eindpakket ingesloten en bij uitvoering van de app geïnterpreteerd door de ingebakken Java Script-engine. Voor iOS wordt gebruikgemaakt van de JavaScriptCore interpreter (die ook gebruikt wordt door WebKit) en voor Android van Google’s V8-engine . Al deze engines verschaffen een standaard JavaScript-interpreter die vrijwel alle functionaliteit biedt die je verwacht bij een webbrowser. Alleen heb je geen beschikking over functies die specifi ek zijn voor browsers zoals het DOM. In het volgende hoofdstuk gaan we in op uitbreidingen op JavaScript in Titanium.



1.4 Installeren van Titanium en Titanium Studio

1.4.1 Installatie

Het installeren van Titanium is eenvoudig. Doorloop de volgende stappen om Titanium installeren:• Ga naar www.appcelerator.com/developers.• Klik op de knop Download Titanium. Vervolgens moet je een Appcelera-

tor-account aanmaken. Dit is een voorwaarde voor het downloaden van Titanium. Vul je gegevens in en klik op Sign Up. Bevestig de link in de e-mail die je van Appcelerator krijgt en wijzig je profi el.

• Rechts zie je een tabblad waarin je de regel ‘Download Titanium Studio’ vindt. Klik op het gewenste besturingssysteem en download Titanium Studio. Start vervolgens het gedownloade bestand. In het geval van Windows start je hiermee het installatieprogramma en op een Apple- computer open je het disk image en sleep je de Titanium Studio map naar de applicatiemap.

• Na het installeren verschijnt in het geval van Windows een snelkoppeling naar Titanium Studio op het bureaublad en bij een Mac ga je naar de appli-catiemap en dan naar de Titanium Studio map. Klik op het Titanium- icoontje om het programma te starten.

• Allereerst geef je de workspace op. Dit is een map op jouw schijf waar je Titanium-projecten wilt bewaren. Vink vervolgens aan dat je een Appcele-rator-account hebt en geef jouw e-mail en wachtwoord op. Klik op Login.

• Titanium Studio vraagt je om de laatste Titanium SDK te installeren, even-als enkele andere tools. Zorg dat alles is aangevinkt en klik op Next. Laat Titanium Node.js installeren als dit nog niet op jouw machine staat. Als het versiebeheersprogramma Git nog niet op jouw computer staat, zal Titanium dit ook installeren.

• Wacht tot alles is geïnstalleerd. Dan verschijnt er een dashboard met een toegang tot installatiewizards onder het tabblad ‘Get Started’. Bovenaan vind je enkele belangrijke instellingen: het kleurenthema van Titanium Studio (light is prettig) en het basisperspective voor Titanium Studio (advanced is te prefereren). Daaronder zie je welke native SDK’s succesvol zijn geïnstalleerd en vind je knoppen of links om ze installeren. Over het algemeen verloopt die installatie vlekkeloos. Mocht dit niet het geval zijn, dan kun je de installatiehandleidingen voor de iOS en Android-SDK in dit hoofdstuk volgen.

Voor Titanium heb je Node.js nodig. Node.js is een platform om webserver-code te schrijven in JavaScript. Titanium gebruikt Node.js voor het compileren en bouwen van de app. Titanium Studio installeert Node.js automatisch. Mocht onverhoopt de installatie mislukken, ga dan naar nodejs.org om Node.js zelf te installeren.



1.4.2 Testen van de installatie in de emulator

Figuur 1.4: Afbeelding van de Android-emulator na het opstarten van het project

Om te testen of de installatie van Titanium in orde is, gaan we het project Utrecht Inside aanmaken.• Klik op de New Project-knop in de werkbalk. • Selecteer het type Mobile Project en druk op Next.• Vervolgens kiezen we een template voor het project. Ga naar Classic,

selecteer dan Default Project en klik op Next.• Nu verschijnt een invoerscherm. Geef als Project name ‘UtrechtInside’ op.• Het App Id heeft de vorm com.bedrijfsnaam.applicatienaam, bijvoorbeeld

‘com.worldwiselearning.utrechtinside’. Het is gebruikelijk om alleen kleine letters te gebruiken.

• Als alle velden in orde zijn, klik je op de knop Finish.

Titanium maakt nu alle projectbestanden aan in de opgegeven locatie. Titanium opent het project automatisch en laat de TiApp Editor zien. In deze editor kun je de instellingen van het project wijzigen, met uitzondering van de projectnaam.

Nu gaan we het Utrecht Inside-project draaien.• Klik in de Project Explorer op de groene startknop en dan op de menu-

keuze Android Emulator of iPhone Simulator.

Als de emulator nog niet geopend is, zal Titanium die, in het geval van Android, eerst opstarten. Dit kost enige tijd – hold tight. Daarna worden de benodigde bestanden voor de emulator aangemaakt (eenmalig per telefoontype). Dit duurt even en daarom zal het installeren van de app in de emulator de eerste keer vaak niet lukken. Als dit het geval is, klik dan nog eens op de Run-knop.



Wanneer de Android-emulator eenmaal geopend is, kun je die open laten staan. Titanium detecteert of de emulator al geopend is en zal die niet opnieuw openen. Je kunt dan veel sneller wijzigingen van jouw project uit-proberen.

1.4.3 Testen op het toestel

Om een iPhone of iPad-app op een toestel te installeren moet je deelnemen aan het iOS Developer Program . De kosten hiervan bedragen, voor een indivi-duele ontwikkelaar 99 dollar (74 euro) per jaar. Als je hieraan meedoet kun je ook apps publiceren in de App Store. Op het adres www.worldwiselearning.org/ basiscursus vind je een document met een overzichtelijke beschrijving van de procedures die je moet doorlopen om een app op een Apple-toestel te installeren. Ook de veel eenvoudiger manier om een app te installeren op een Android-toestel wordt hierin beschreven.

1.5 iOS: installatie en tools

1.5.1 Installeren van de iOS SDK

Op de Mac kun je mobiele apps maken voor iPhone, iPad en Android. Hier-voor heb je OS X Snow Leopard (10.6.4) of hoger nodig.

Het is eenvoudig om de iOS SDK te installeren omdat hij beschikbaar is in de App Store onder de naam Xcode. Het installeren verloopt zoals bij elk pro-gramma en wijst zich vanzelf.

Daarnaast moet je een ontwikkelaarsaccount aanmaken:• Ga naar developer.apple.com.• Registreer je als een Apple Developer als je dat nog niet bent (gratis). Het

kan enkele uren duren voordat de registratie in orde is.

1.5.2 De ontwikkeltools

De iOS SDK bevat verschillende ontwikkeltools. Deze tools hoef je als Titanium-ontwikkelaar niet te gebruiken. Soms kan het handig zijn om dit wel te doen. In deze paragraaf geven we een kort overzicht van de meest gebruikte tools.

XcodeXcode is de geïntegreerde ontwikkelomgeving (IDE) voor iOS en is vergelijk-baar met bijvoorbeeld Eclipse voor Java. Hierin schrijf je de code en compi-leer, draai en debug je de applicatie. Als Titanium-ontwikkelaar hoef je Xcode niet te gebruiken. Titanium gebruikt Xcode om de app te compileren.



Interface BuilderInterface Builder wordt gebruikt om de interface van de app bij elkaar te klikken en slepen. Dit programma produceert Xib-bestanden. Dit zijn XML-bestanden die uiteindelijk omgezet worden in zogenaamde Nib- bestanden, die door de compiler gebruikt worden. Helaas kunnen we voor Titanium de Interface Builder niet gebruiken. Ook is er (nog) geen alternatief voor deze tool. Je kunt de Interface Builder wel gebruiken om mock-ups te maken. Maar hiervoor zijn veel goede alternatieven beschikbaar.

iOS-Simulator De simulator lijkt op de iPhone of iPad, maar vertoont toch enkele essentiële afwijkingen waar je rekening mee moet houden. Hieronder vind je de drie belangrijkste:• De CPU die in de simulator wordt gebruikt is op Intel gebaseerd, het pakket

voor de iPhone wordt gecompileerd voor de ARM-processor.• De simulator is veel sneller dan het toestel.• De simulator heeft meer geheugen dan het toestel.

Figuur 1.5: De iPhone Simulator

De bediening van de simulator spreekt grotendeels voor zich. Er zijn twee opties die hier onderstreept moeten worden:1 Je kunt kijken of de melding van een binnenkomend gesprek goed verwerkt

wordt door de app: selecteer hiervoor Hardware → Actief gesprek in status-balk aan/uit. Je ziet dan bovenin een melding van een binnen komend gesprek verschijnen. Controleer of de gebruikersinterface van jouw app hier goed mee omgaat.

2 Je kunt een waarschuwing voor laag geheugen simuleren via Hardware → Simuleer geheugenwaarschuwing. Op het toestel is maximaal 128 mega-byte beschikbaar.

Maak bij het testen van jouw app gebruik van deze twee opties.



Instruments Dit is een zogenaamde tracing en profi ling-tool. Dit houdt in dat je hiermee het gedrag van de applicatie tijdens de uitvoering kunt volgen. Voor ons zijn vooral het geheugenverbruik, de CPU-activiteit en het schijfverbruik van belang. Door het geheugengebruik te monitoren kunnen we geheugenlekken op het spoor komen. Deze tool is vanuit Xcode op te starten. Instruments is een complexe tool en vereist dus bestudering van de documentatie.

1.6 Android : installatie en tools

1.6.1 Installeren van de Android SDK

Voordat de Android SDK kan worden geïnstalleerd, moet Sun Java Develop-ment Kit 6 (JDK) op de computer staan. Android gebruikt de Java-ontwikkel-omgeving. Dit is niet de Java-runtime die op de meeste computers is geïnstalleerd. Het is niet nodig om Java te installeren op een Mac-computer. Java is standaard geïnstalleerd en wordt regelmatig geüpdatet.

Als het goed is, installeert Titanium Oracle’s Sun Java Development Kit ver-sie 6 als dit nog niet op de machine aanwezig is. Mocht dit niet het geval zijn of is de installatie mislukt, volg dan de onderstaande instructies.

Kijk voordat je overgaat op het installeren van de JDK of het al op jouw computer is geïnstalleerd. Dit doe je door naar de opdrachtsprompt te gaan en daar de commando’s java -version en javac –version uit te voeren. Het versienummer moet 1.6.0_21 of hoger zijn. Als dit het geval is, kun je door-gaan naar de Android-installatie. Let erop dat níét Java 7 wordt gebruikt.

Sun Java 6 JDK installerenDoorloop voor het installeren van de Java 6 JDK de volgende stappen:• Ga naar: java.sun.com/javase/downloads/widget/jdk6.jsp.• Klik op de downloadknop. Selecteer als platform Windows (let op: kies níét

de versie voor 64-bit processoren) en kies Continue. Download het aange-geven exe-bestand (ca. 75 MB).

• Start het installatieprogramma. Verander de installatiemap in C:\Java\jdk1.6.0_21\. Ga verder. Het is niet nodig om de Java-runtimemap te veranderen.

• Nadat de JDK is geïnstalleerd moet het beschikbaar worden in de omgeving (environment). Daarvoor moeten de omgevingsvariabelen aangepast worden. Ga hiervoor naar Confi guratiescherm → Systeem → Geavanceerde systeeminstellingen. Klik dan op Omgevingsvariabelen.

• Voeg bij Systeemvariabelen aan de Path-variabele ‘\%JAVA_HOME%\bin;’ toe. Vergeet de puntkomma’s niet om deze waarde van andere te onder-scheiden.

• Maak ook binnen systeemvariabelen de nieuwe variabele ‘JAVA_HOME’ aan en geef die de waarde ‘C:\Java\jdk1.6.0_21’.



Je kunt nu proberen of JDK voor de omgeving beschikbaar is door een opdrachtsprompt te openen en het commando javac –version uit te voeren. Als de omgeving in orde is, verschijnt na enige tijd het versienummer op het scherm.

Android SDK en Google Maps API’s installerenDoorloop de volgende stappen:• Ga naar developer.android.com/sdk om de Android SDK te installeren. • Kies voor het downloaden van het Windows of Mac OS X-pakket. Down-

load het zip-bestand en pak deze uit. Verplaats het pakket naar de root van jouw harde schijf en wijzig, indien nodig, de naam in android-sdk- windows (Windows) of android-sdk-mac (Apple).

• Navigeer naar deze map en dan naar de submap tools en voer android uit. Wacht even en de Android SDK Manager wordt zichtbaar.

• Je ziet nu een lijst met pakketten die geïnstalleerd kunnen worden. In deze lijst staan alle Android SDK-versies. Je mag meerdere pakketten selecte-ren, maar je hebt in ieder geval SDK Platform Android 2.3.3, API 10 nodig. Installeer naast het SDK Platform ook de Google Play Services. Selecteer ook Android SDK Platform-tools en indien beschikbaar Android SDK Tools. Installeer deze pakketten. Accepteer de voorwaarden. Na het downloaden en uitpakken kun je zien of dit gelukt is.

• Na het installeren van de Android SDK is het nodig om in Windows de omgevingsvariabelen te wijzigen. Voer de stappen uit die bij de installatie van Java zijn beschreven en voeg aan de systeemvariabele Path de vol-gende waarde toe: ‘;C:\android-sdk-windows\tools; C:\android-sdk-win-dows\platform-tools;’.

• Op de Mac voeg je als volgt de Android-tools toe aan de PATH-variabele. Open de Terminal en type cd ~. Vervolgens open je of maak je het bestand .profi le aan met de teksteditor Pico: type pico .profile. Als er al een regel in dit bestand bestaat die begint met ‘export PATH =’ moet je daaraan het pad toe-voegen van de Android-tools (/android-sdk-mac/tools en /android-sdk-mac/ platform-tools). Anders moet je dit zelf intypen op een nieuwe regel: de regels worden dan export PATH=/android-sdk-mac/tools:$PATH en export PATH=/android-sdk-mac/platform-tools:$PATH. Sla het bestand op en sluit de Terminal af. Als je de Terminal nu opnieuw start zijn de Android-tools beschikbaar. Je kunt kijken of de PATH-variabele in orde is door echo $PATH in te typen.

• Open de opdrachtsprompt of Terminal om te kijken of de installatie gelukt is. Geef de volgende commando’s: aapt v en daarna android list. Als deze commando’s werken, is alles gereed om Titanium te installeren.

1.6.2 De ontwikkeltools

De Android SDK biedt een grote hoeveelheid tools. Hoewel Titanium het gebruik van deze tools grotendeels overbodig maakt, kun je sommige ervan toch goed gebruiken bij het ontwikkelen. In deze paragraaf vind je een korte beschrijving van de belangrijkste tools.



Android SDK en AVD ManagerBij het installeren van de Android SDK heb je al kennis gemaakt met de SDK Manager. Je kunt deze ook opstarten door het commando android in te typen in de opdrachtsprompt of Terminal.

Met de AVD Manager kun je virtuele toestellen, Android Virtual Devices (AVD’s), aanmaken, repareren, starten en wissen. Omdat Titanium Studio virtuele toe-stellen aanmaakt en start, is het over het algemeen niet nodig om deze tool te gebruiken. Alleen voor het wissen en repareren van virtuele toestellen is het handig en je kunt hier enkele instellingen van een virtueel toestel aanpassen. Je start de AVD Manager door in het menu Tools → Manage AVDs… aan te klikken.

Bij elke nieuwe installatie of verwijdering van Android-pakketten moet je alle virtuele toestellen (AVD’s) verwijderen.

Android Debug Monitor (ADM)• Starten met monitor in de opdrachtsprompt of Terminal.

De Android Debug Monitor is vooral belangrijk omdat je hiermee een scherm-afdruk kunt maken, telefoontjes kunt simuleren en een GPS-signaal kunt verzenden.• In de linkertabel zie je een lijst met de draaiende emulators. Selecteer hier

de emulator die je wilt monitoren.• Door op het camerapictogram te klikken kun je een schermafdruk maken

van jouw app, die je vervolgens kunt bewaren.• In de rechtertabel kun je in het tabblad Emulator Control een telefoon-

oproep simuleren of een SMS-bericht verzenden naar de emulator. Ook kun je door GPS-coördinaten in te voeren een locatie instellen als de huidige locatie (location controls).

• Je kunt bestanden bekijken en kopiëren met de File Explorer.

Android Emulator • Starten met emulator in de opdrachtsprompt of Terminal.

De Android-emulator werkt met virtuele toestellen (AVD’s), die aangemaakt zijn door Titanium Studio of die je zelf hebt aangemaakt met de AVD Manager.

Hieronder vind je enkele opties van de emulator:• Je kunt het netwerk (internetverbinding) aan/uitzetten met de F8-toets.• Gebruik toets 7 en 9 van het numerieke toetsenbord (of Ctrl-F11 en

Ctrl-F12) om te switchen tussen de liggende en staande schermoriëntatie.



Figuur 1.6: De Android-emulator

Naast de instellingen die ingebakken zijn in de AVD, kun je bij het starten van de emulator ook instellingen opgeven zoals de netwerksnelheid. Dit kun je echter niet in Titanium Studio doen. Wil je van deze opties gebruikmaken, dan zal je na het compileren en installeren van jouw app de emulator moeten afsluiten en zelf de emulator moeten opstarten met het commando emulator met daarachter de gewenste instellingen.

De Android-emulator is over het algemeen stukken langzamer dan de echte toestellen.

Android Debug Bridge (ADB) • Starten met adb in de opdrachtsprompt of Terminal.

Android Debug Bridge is de debugtool van Android. Het is een client-server tool die ontwikkelaars in staat stelt om Android-codes te debuggen op de emulator. Je kunt deze tool ook gebruiken om met het besturingssysteem op het virtuele toestel te communiceren. Daarvoor moet je een shell openen met het commando adb shell. In deze shell kun je het bestandssysteem benaderen en bijvoorbeeld een database openen. In de shell kun je POSIX-commando’s gebruiken zoals cd, ls en rm. Daarnaast biedt de Android Debug Bridge het logsys-teem logcat, maar dit wordt al door de Titanium Studio benut.

Met ADB kun je de server starten en stoppen met de commando’s adb kill- server en adb start-server. Ook kun je met ADB apps installeren en verwijde-ren. Tevens kun je bestanden kopiëren van en naar de emulator.



1.7 Titanium Studio gebruiken

Zoals gezegd is Titanium Studio de ontwikkelomgeving van het Titanium framework. Titanium Studio is gebouwd op Eclipse , een ontwikkelomgeving die vooral wordt gebruikt door Java-ontwikkelaars.

Figuur 1.7: Titanium Studio

De basale elementen van Titanium Studio zijn dezelfde als die van Eclipse. Titanium Studio is in wezen niets anders dan Eclipse uitgebreid met speci-fi eke functies voor Titanium-ontwikkeling. Hier gaan we kort in op enkele basisconcepten van Eclipse: de workspace, workbench, views, editors en perspectieven.

De workspace is een plaats op de harde schijf waar instellingen en projecten, met alle daarbij behorende bestanden, worden opgeslagen. Met Titanium Studio kun je de workspace opruimen en andere bewerkingen hierop uitvoe-ren. Ook wordt de workspace automatisch geïndexeerd, waardoor je er goed in kunt zoeken.

Het hoofdscherm van Studio wordt de workbench genoemd. Het bevat een aantal veelgebruikte interfacecomponenten zoals views en editors.

Een view is een scherm waarmee je een bepaalde taak kunt uitvoeren. Eclipse heeft veel soorten views, waarvan slechts een deel van belang is voor Titanium-ontwikkelaars. Om een view te openen gebruik je Window → Show View. Naast het werkgebied hebben de meeste views een titelbalk, pictogram, menu en werkbalk. Hulpteksten (tooltips) verschijnen als je met de muis-cursor boven een knop zweeft. Je kunt meerdere views stapelen in één scherm: elke view krijgt dan een tabblad waarvan de titel zichtbaar is in de titelbalk.



Belangrijke views zijn de console view, waarin logberichten van een applicatie en de compilatietools verschijnen en de navigator view. Deze view toont alle projecten in een workspace. De Project Explorer geeft hiervan een ander over-zicht. Over het algemeen zal je werken met deze explorer.

Editors gebruik je om code te schrijven of XML-bestanden te wijzigen. Ze zijn gekoppeld aan bestandstypen: zo wordt de JavaScript-editor geopend bij een bestand met de js-extensie.

Ten slotte is een perspectief een bepaalde ordening van schermen. Het meest relevante perspectief is Studio (extended). Je kunt ook eigen perspectieven maken en opslaan. Als je gaat debuggen met Studio, wordt het Debug perspective geopend.

Zoals je hebt gezien, maak je een nieuw project aan via de menukeuze File → New → Mobile Project. Daarna kies je een template voor het project. Als het project is aangemaakt wordt het getoond in de Project Explorer. Je kunt in de mappen bladeren en als je met rechtsklik op een map klikt, verschijnt een snelmenu waarin je bijvoorbeeld een nieuw bestand kunt toevoegen en het project kunt draaien of debuggen. Vaak zijn dezelfde functies toegankelijk via pictogrammen in de werkbalk van de Project Explorer.

We gaan hier verder niet in op alle mogelijkheden van Titanium Studio. Alleen willen we wijzen op de mogelijkheden om een project te draaien, de zoge-naamde Run Confi gurations.

Als je in de Project Explorer een bestand in een project selecteert kun je het project draaien via de run-knop in de werkbalk van de explorer. Als je op die knop drukt, verschijnt er een menu. Onderaan het menu vind je de optie Run Confi gurations… Wanneer je hierop klikt verschijnt een tabel met alle moge-lijke wijzen waarop je een project kunt draaien. Als je bijvoorbeeld het project wilt draaien in de Android-emulator, klik je hier twee keer op en dan wordt een nieuwe confi guratie aangemaakt voor het geselecteerde project. Je kunt nu een Android-versie voor de emulator opgeven, evenals het schermtype. Door op de Run-knop te drukken kun je jouw project met deze instellingen draaien.

1.8 Appcelerators voorbeeldapplicatie: KitchenSink

Naast de API-documentatie en overige documentatie heeft Titanium een voorbeeldapplicatie beschikbaar gesteld waarin bijna alle API’s uitvoerig gedemonstreerd worden. De broncode van deze app kun je makkelijk importeren in Titanium Studio.

Op het dashboard dat getoond wordt als je Titanium Studio start, vind je het tabblad Develop. Vervolgens zie je bovenaan Samples. Dit zijn verschillende voorbeeldapplicaties. Klik op de knop Import naast KitchenSink. In het



dialoogscherm klik je op Finish, wacht totdat het project is gedownload, en voilà, KitchenSink is toegevoegd aan jouw projecten.

Start het project door op een bestand te gaan staan in het KitchenSink-project en klik op de groene Run-knop. Kies als doel een emulator of simulator.

Het is wel eens lastig om KitchenSink aan de praat te krijgen in de emulator en bovendien kan het lang duren om het project te compileren. Houd daar rekening mee.

Zoals gezegd demonstreert KitchenSink vrijwel alle Titanium-functies. Het is dan ook de ideale app om Titanium mee te leren kennen. Je zult ongetwijfeld onder de indruk zijn van de mogelijkheden. Als je de app goed bestudeert, leer je ook de gebruikersinterface-componenten van het platform goed kennen.

Voor het ontwikkelen is de map ui in de Resources-map van KitchenSink essentieel. Deze map bevat veel JavaScript-bestanden. In elk bestand wordt een bepaalde functie of module gedemonstreerd. Bovendien bevatten de JavaScript-bestanden talloze commentaren die duidelijk maken hoe je de functie in kwestie implementeert. Als je ergens niet uitkomt, kijk dan – uiter-aard na dit boek te hebben geraadpleegd – in de code van KitchenSink.


207

Register

B

backend 193balk 106basiswindow 51bewegingssensor 137Blob 34

C

callback-functie 49cloud 193constructor-methodes 37continuous builds 206coverfl owview 126

D

Dalvik VM 9database 167data-eigenschap van tabeloverzicht 81DB-object 168density 27

E

Eclipse 20event 48

simuleren van 50event-handler 49event-object 49executiecontext 28, 70externe browser

openen van 133

A

accelerometer 137afstandsberekening 142alert-functie 32Amazon Web Services 193Android

installeren van 16Android apps 9Android Debug Bridge (ADB) 19Android Debug Monitor 18Android Emulator 18Android-manifestbestand 26Android SDK

installeren van 17animatie 109annotaties 150API documentatie 38Appcelerator Cloud Services (ACS) 193

admin gebruikers 196 authenticatie 195 beheer 195 dashboard 196 gebruiker inloggen 198 objecten 194 query operatoren 200 Titanium-module 196 zoeken 199

app.js 28applicatie-icoon 27, 48

iPad 184applicatie-properties 157, 159application defi nition statement 41App Store 8architectuur van Titanium 34AVD Manager 18



F

factory pattern 37File-object 165fi lteren

met picker 97met zoekbalk 96op afstand 142

fi reEvent 50fotoview 126front-end compiler 11functielijst 41

G

garbage collection 32gebruikersinterface

ontwerp van 45gebruikersprofi el 41geheugen

loggen van 39geheugengebruik 31geocoder 136Google Maps

routegegevens via 154Google Maps API’s

installeren van 17GPS 135

H

home screen icon 48HTML 5 10

I

imageview 109include-methode 30index 81instellingen

beheer van 24Instruments 16Interface Builder 15iOS 8iOS Developer Program 14iOS-Simulator 15iPad 183iPhone Human Interface Guidelines 46

J

JavaScript 30JavaScriptCore interpreter 11JSON 33

K

kaarten 146routes op 154

kalibratie 141kleuren 205kleurgebruik 48knop 105kompas 136

L

labels 57van knoppen 48

lay-out 47, 73leesbaarheid 48locatiegegevens 135, 137loggen 39lokaal bestand 163

M

mock-ups 47modaal window 67

iPad 184modules van Titanium 34Module Titanium.Filesystem 163

N

name 42namespaces 30, 31navigatiegroep 62navigatiemodel 46Node.ACS 194Node.js 193, 194


Register 209

O

object literal notation 30ontwerp

van app 40van gebruikersinterfaces voor apps 45

P

picker 98kolom 100rij 101

pictogram 48platform compiler 11Play Store 9popover

iPad 189pre-compiler 11presentatie van tekst 57privésleutel 178problemen oplossen 205publiceren

in App Store 176in Google s Play Store 177

R

regio 146removeEventListener 50Resources-map 26rij 86routes op kaarten 154

S

Sandbox 158schermdichtheid 27schermoriëntatie 74

-event 75schermtypen

testen 173scrollable-view 123scrolview 121secties 88slider 142sorteren 92splash-scherm 27

iPad 183splitwindow

iPad 184

SQLite 3 167Sun Java 6 JDK

installeren van 16switch 117

T

tabbalksorteren met 92

tabblad 62tabel

aanmaken van 170tabelindex 81tabeloverzicht 77

navigeren met 85tabgroep 60tekstgebied 113tekstpresentatie 57tekstveld 113testen 48, 173timers 32Titanium 10

installeren van 12Titanium-project

opbouw van 23toetsenbord 113

U

updates 180URL 158

V

V8 JavaScript Engine 11View-object 51views 50visueel ontwerp 47

W

waarschuwingsvenster 32, 39wandelroutes 154webapps 10webbrowser 128WebKit 128webview 128werkbalk 106widgets 51



window 51, 66schermoriëntatie 74

wireframes 47

X

Xcode 14XML 33

Z

zIndex 55zoekbalk 96z-orde 55zwaar window 70


BASISCURSUSAPPS ONTWIKKELEN

MARK AALDERINK

MARK AALDERINK

APPS ONTWIKKELEN

Snel en eenvoudig een eigen app bouwen? Geschikt voor iPhone, iPad, Android en HTML 5? Geen probleem! Met deze Basiscursus publiceer je jouw app in slechts een week tijd!

Je bouwt je app in Appcelerator Titanium. Dit is het meest uitgebreide framework waarmee je apps kunt ontwikkelen voor meerdere platformen, waaronder Android en iOS. Jouw app is straks dus beschikbaar voor de meest gebruikte mobiele apparaten!

Het boek is speciaal geschreven voor beginnende gebruikers van Titanium. Je hebt geen ervaring nodig om met het boek aan de slag te gaan. Stap voor stap leer je hoe je de meest belangrijke functionaliteiten kunt gebruiken. Denk bijvoorbeeld aan GPS, kaarten en routes, het opslaan van gegevens in databases en bestanden en opslag van gegevens in de cloud. Uiteraard leer je ook hoe je jouw app publiceert in Apple’s App Store en de Android Market, zodat iedereen jouw app kan downloaden en gebruiken.

Deze tweede editie van Basiscursus Apps ontwikkelen is volledig vernieuwd. De tekst is aangepast aan Titanium versie 3.1. Daarnaast is het boek uitgebreid met praktische informatie over het bouwen van HTML 5 webapps en over de Appcelerator cloud.

OVER DE AUTEUR Mark Aalderink is eigenaar van WorldWise Learning en heeft verschillende apps ontwikkeld voor iPhone, iPad en Android. Hij is gespecialiseerd in het ontwikkelen van educatieve applicaties.

BASISCURSUS

980

978 90 12 58593 4

7192 SDU Cover_AppsOntw_iOS.indd 1 19-09-13 11:11

BASISCURSUS APPS ONTWIKKELEN · Mark Aalderink Basiscursus Apps ontwikkelen Apps maken voor iPhone,...

Documents

Transcript of BASISCURSUS APPS ONTWIKKELEN · Mark Aalderink Basiscursus Apps ontwikkelen Apps maken voor iPhone,...