APPS ONTWIKKELEN APPS ONTWIKKELEN

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.

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!

BASISCURSUS

BASISCURSUS APPS ONTWIKKELEN

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.

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.

MARK AALDERINK

OVER DE AUTEUR

MARK AALDERINK

978 90 12 58593 4 980

7192 SDU Cover_AppsOntw_iOS.indd 1

19-09-13 11:11

Mark Aalderink

Basiscursus Apps ontwikkelen

Apps maken voor iPhone, iPad, Android en HTML 5

Basiscursus Apps bouwen 2013.indd i

17-09-13 16:03

Meer informatie over deze en andere uitgaven kunt u verkrijgen bij: BIM Media B.V. Postbus 16262, 2500 BG Den Haag tel.: (070) 304 67 77 www.bimmedia.nl

© 2013 BIM Media B.V., Den Haag Academic Service is een imprint van BIM Media B.V. Vormgeving en zetwerk: az grafisch serviceburo, Den Haag, Omslagontwerp: LandGraphics, Amsterdam isbn 978901258 593 4 nur 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 gegevensbestand 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 reprografische verveelvoudigingen uit deze uitgave is toegestaan op grond van artikel 16 h Auteurswet, dient men de daarvoor wettelijk verschuldigde 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 Organisatie, 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, photocopying, 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 contained herein nor accepts responsibility for errors or omissions or their consequences.

Basiscursus Apps bouwen 2013.indd ii

17-09-13 16:03

Inhoud

Inleiding Hoofdstuk 1

Titanium, iOS, Android en HTML 5 webapps: introductie en installatie 1.1 1.2 1.3

1.4

1.5

1.6

1.7 1.8

Hoofdstuk 2

In dit hoofdstuk Apps ontwikkelen voor iPhone, iPad, Android en HTML 5 Het Titanium framework 1.3.1 Inleiding 1.3.2 Hoe Titanium het eindpakket maakt Installeren van Titanium en Titanium Studio 1.4.1 Installatie 1.4.2 Testen van de installatie in de emulator 1.4.3 Testen op het toestel iOS: installatie en tools 1.5.1 Installeren van de iOS SDK 1.5.2 De ontwikkeltools Android: installatie en tools 1.6.1 Installeren van de Android SDK 1.6.2 De ontwikkeltools Titanium Studio gebruiken Appcelerators voorbeeldapplicatie: KitchenSink

Het Titanium-project 2.1 2.2

2.3

In dit hoofdstuk De opbouw van een Titanium-project 2.2.1 De projectmap 2.2.2 Instellingen voor de app 2.2.3 De Resources-map 2.2.4 Begin van uitvoering van programmacode: app.js Titanium en JavaScript 2.3.1 Objecten en namespaces 2.3.2 Geheugengebruik 2.3.3 Titaniums uitbreidingen van JavaScript

1

7 7 7 10 10 11 12 12 13 14 14 14 14 16 16 17 20 21 23 23 23 23 24 26 28 30 30 31 32

iii

Basiscursus Apps bouwen 2013.indd iii

17-09-13 16:03


iv

2.4

2.5 2.6 2.7

Hoofdstuk 3

De gebruikersinterface: views, windows en widgets 3.1 3.2 3.3 3.4 3.5

3.6

3.7

3.8

Hoofdstuk 4

4.4

In dit hoofdstuk Het eenvoudige tabeloverzicht Werken aan de opmaak 4.3.1 Rijen 4.3.2 Secties Sorteren en filteren 4.4.1 Sorteren met een tabbalk 4.4.2 Filteren van informatie met een zoekbalk 4.4.3 Gegevens filteren met een picker

Invoer en presentatie 5.1 5.2

5.3

Basiscursus Apps bouwen 2013.indd iv

In dit hoofdstuk Het ontwerp van gebruikersinterfaces voor apps Omgaan met events Indeling van Titaniums gebruikersinterfacecomponenten: views, widgets en windows Views en labels 3.5.1 Het View-object 3.5.2 Presentatie van tekst: labels Het hoofdmenu: de tabgroep 3.6.1 De tabgroep 3.6.2 Tabbladen Windows 3.7.1 De elementen van een window 3.7.2 ‘Zware’ windows Lay-out en schermoriëntatie 3.8.1 Lay-out 3.8.2 Schermoriëntaties

Tabeloverzichten 4.1 4.2 4.3

Hoofdstuk 5

Architectuur van Titanium 2.4.1 Modules 2.4.2 Het ontwerppatroon achter Titanium: het factory pattern 2.4.3 Online documentatie: API Docs Debuggen Het ontwerp van de app Verschillen tussen iOS, Android en HTML 5 webapps oplossen

In dit hoofdstuk Knoppen en balken 5.2.1 Knoppen 5.2.2 Werkbalk (iOS) Afbeeldingen: de imageview

34 34 37 37 38 40 41 45 45 45 48 50 51 51 57 60 60 62 66 66 70 73 73 74 77 77 77 86 86 88 92 92 96 97 105 105 105 105 106 109

17-09-13 16:03

Inhoud

v

5.4

5.5

5.6

Hoofdstuk 6

Location-based services: GPS, kaarten en routes 6.1 6.2

6.3

Hoofdstuk 7

7.6

In dit hoofdstuk Inleiding URL’s en de toegankelijke mappen Applicatie-properties Werken met (lokale) bestanden 7.5.1 Module Titanium.Filesystem 7.5.2 Het File-object Databases: SQLite 3 7.6.1 Inleiding 7.6.2 Aanmaken, installeren en openen van de database 7.6.3 Methodes van het DB-object 7.6.4 SQLite-datatypen 7.6.5 Voorbeelden

Testen en publiceren 8.1 8.2

8.3 8.4

Basiscursus Apps bouwen 2013.indd v

In dit hoofdstuk Locatiegegevens: GPS 6.2.1 Inleiding 6.2.2 Titanium-events voor het kompas, de bewegingssensor en locatiebepaling 6.2.3 Filteren op afstand 6.2.4 De slider Kaarten 6.3.1 De kaart 6.3.2 Annotaties 6.3.3 Routes op kaarten

Opslag van gegevens 7.1 7.2 7.3 7.4 7.5

Hoofdstuk 8

Invoer 5.4.1 Tekstveld en tekstgebied 5.4.2 De switch Scrolviews, scrollable-views en coverflowviews 5.5.1 De scrolview 5.5.2 De scrollable-view 5.5.3 De coverflowview (iPhone) De webbrowser 5.6.1 De webview 5.6.2 De externe browser openen

In dit hoofdstuk Testen 8.2.1 Android en schermtypen 8.2.2 Andere testen 8.2.3 Testversie naar bètatesters Publiceren in de App Store Publiceren in Google’s Play Store

113 113 117 121 121 123 126 128 128 133 135 135 135 135 136 142 142 146 146 150 154 157 157 157 158 159 163 163 165 167 167 168 168 169 170 173 173 173 173 175 175 176 177

17-09-13 16:03


vi

8.5 8.6

Hoofdstuk 9

Aanpassingen voor de iPad 9.1 9.2 9.3 9.4

Hoofdstuk 10

In dit hoofdstuk Verschillen in ontwerp tussen iPhone en iPad Het splitwindow De popover

Appcelerators clouddienst: Appcelerator Cloud Services (ACS) 10.1 10.2 10.3 10.4

Hoofdstuk 11

Publicatie van webapps Updates verzorgen

In dit hoofdstuk De Appcelerator Cloud Mogelijkheden en werkwijze Voorbeelden

183 183 183 184 189

193 193 193 194 196

Hoe nu verder?

201

Referenties

203

Appendices

205 205 205

I. II. III.

Kleuren Problemen oplossen De ontwikkelversie van Titanium verkrijgen: continuous builds

Register

Basiscursus Apps bouwen 2013.indd vi

179 180

206 207

17-09-13 16:03

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 populair. In Nederland bezit inmiddels meer dan 60 procent van de bevolking een smartphone. Ook tabletcomputers zijn sterk in opmars: juni 2013 kon 44 procent 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 tegenwoordig 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 besturingssysteem. Omdat zoveel verschillende besturingssystemen en andere specificaties 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 programmeer 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 1

Basiscursus Apps bouwen 2013.indd 1

17-09-13 16:03


2

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 Amerikaanse bedrijf Appcelerator (www.appcelerator.com).

Titanium Appcelerator 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 webtechnieken (voornamelijk Javascript) applicaties niet alleen veel sneller kunt bouwen, 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 webontwikkelaars. 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 Titanium Elke 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 opgesomd: • 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 programmeertaal: JavaScript. Je hoeft dus geen Objective-C of Java te leren en ook geen ingewikkelde SDK’s en API’s te beheersen.


17-09-13 16:03

Inleiding

3

• •

• • • •

Je kunt razendsnel ontwikkelen met Titanium: maak binnen een week jouw eigen app! Appcelerator is een flexibel bedrijf dat inspeelt op de laatste ontwikkelingen: 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 beschikbaar.

De voorbeeldapp: Utrecht Inside De 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 belangrijkste 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 is Dit 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 JavaScript 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!


17-09-13 16:03


4

Wat je nodig hebt voor dit boek Je 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 redelijk snelle computer. Titanium draait ook onder Linux, maar het installatieproces 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 ontwikkelen 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-elementen zoals namen van variabelen, functienamen, datatypen, omgevingsvariabelen, 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 voorbeeldcode Je 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.


17-09-13 16:03

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.

Feedback Wij 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 editie Sinds Titanium 1.6 is het platform sterk gewijzigd. Het belangrijkst is ongetwijfeld 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 Appcelerator Cloud Services (ACS). Afgezien van het up-to-date brengen van de hele tekst aan Titanium 3.1, schenken we aandacht aan deze twee onderwerpen. Ten slotte wens ik de lezer veel programmeerplezier! Augustus 2013 Mark Aalderink


17-09-13 16:03

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

1

iOS 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 besturingssystemen 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 • • • • • •

1.2

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

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 gebruikersinterface, die je als ontwikkelaar goed moet leren kennen. Daarnaast is het grote verschil tussen het ontwikkelen voor desktopcomputers en smartphones 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.

7


17-09-13 16:03


8

iOS: iPhone en iPad-apps Apple’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 producten en de hoge kwaliteit van de gebruikersinterface (en het besturingssysteem) 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 flink eind op weg met het ontwerp van de gebruikersinterface voor jouw app. Daarnaast geeft het essentiële informatie over technische specificaties 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.


17-09-13 16:03

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

9

Android apps Android is Google’s besturingssysteem voor mobiele telefoons en tabletcomputers. 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 toelatingsprocedure 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 toestellen, 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 communiceren met andere apps. Dalvik VM is speciaal ontworpen en geoptimaliseerd 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 Androidarchitectuur. Alleen als je ingewikkelder apps wilt maken, die bijvoorbeeld bewerkingen op de achtergrond uitvoeren of met het systeem communiceren, 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.


17-09-13 16:03


10

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 platformspecifieke 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, BlackBerry, 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 internetverbinding, kaarten en de bewegingssensor. Daarnaast wordt Titanium voortdurend uitgebreid met nieuwe functies. Ook kun je zelf modules schrijven in de platformspecifieke programmeertaal en daarbij gebruikmaken van platformbibliotheken. 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-


17-09-13 16:03


11

scheiden van apps die met platformspecifieke 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 eindpakket voor distributie genereren. In paragraaf 1.7 gaan we nader op Titanium Studio in. In de volgende paragraaf wordt uitgelegd hoe Titanium technisch werkt. Hoewel 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 specifiek start Titanium achtereenvolgens de volgende drie componenten: 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 worden. Dit zorgt ervoor dat het eindpakket zo klein mogelijk blijft. Omdat Titanium de code optimaliseert is het niet nodig om een JavaScript-minifier te gebruiken zoals JSMin of YUI Compressor. Daarna produceert de front-end compiler de platformspecifieke 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 JavaScriptengine. 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 specifiek zijn voor browsers zoals het DOM. In het volgende hoofdstuk gaan we in op uitbreidingen op JavaScript in Titanium.


17-09-13 16:03


12

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 Appcelerator-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 profiel. • 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 Applecomputer 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 applicatiemap en dan naar de Titanium Studio map. Klik op het Titaniumicoontje 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 Appcelerator-account hebt en geef jouw e-mail en wachtwoord op. Klik op Login. • Titanium Studio vraagt je om de laatste Titanium SDK te installeren, evenals 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 webservercode 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.


17-09-13 16:03


1.4.2

13

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


17-09-13 16:03


14

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

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 individuele 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. Hiervoor 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 programma 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.

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


17-09-13 16:03


15

Interface Builder Interface 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 Nibbestanden, 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 statusbalk aan/uit. Je ziet dan bovenin een melding van een binnenkomend 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 megabyte beschikbaar. Maak bij het testen van jouw app gebruik van deze twee opties.


17-09-13 16:03


16

Instruments Dit is een zogenaamde tracing en profiling-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 Development Kit 6 (JDK) op de computer staan. Android gebruikt de Java-ontwikkelomgeving. 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 versie 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 doorgaan naar de Android-installatie. Let erop dat níét Java 7 wordt gebruikt.

Sun Java 6 JDK installeren Doorloop 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 aangegeven 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 Configuratiescherm → 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 onderscheiden. • Maak ook binnen systeemvariabelen de nieuwe variabele ‘JAVA_HOME’ aan en geef die de waarde ‘C:\Java\jdk1.6.0_21’.


17-09-13 16:03


17

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 installeren Doorloop 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. Download 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 selecteren, 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 volgende waarde toe: ‘;C:\android-sdk-windows\tools; C:\android-sdk-windows\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 .profile 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 toevoegen 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=/androidsdk-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.


17-09-13 16:03


18

Android SDK en AVD Manager Bij 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 toestellen 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 schermafdruk 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 telefoonoproep 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.


17-09-13 16:03


19

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 killserver en adb start-server. Ook kun je met ADB apps installeren en verwijderen. Tevens kun je bestanden kopiëren van en naar de emulator.


17-09-13 16:03


20

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 specifieke 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 uitvoeren. 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 muiscursor 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.


17-09-13 16:03


21

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 overzicht. 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 zogenaamde Run Configurations. 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 Configurations… Wanneer je hierop klikt verschijnt een tabel met alle mogelijke 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 configuratie 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


17-09-13 16:03


22

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 – uiteraard na dit boek te hebben geraadpleegd – in de code van KitchenSink.


17-09-13 16:03

Register

A accelerometer 137 afstandsberekening 142 alert-functie 32 Amazon Web Services 193 Android installeren van 16 Android apps 9 Android Debug Bridge (ADB) 19 Android Debug Monitor 18 Android Emulator 18 Android-manifestbestand 26 Android SDK installeren van 17 animatie 109 annotaties 150 API documentatie 38 Appcelerator 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 28 applicatie-icoon 27, 48 iPad 184 applicatie-properties 157, 159 application definition statement 41 App Store 8 architectuur van Titanium 34 AVD Manager 18

B backend 193 balk 106 basiswindow 51 bewegingssensor 137 Blob 34

C callback-functie 49 cloud 193 constructor-methodes 37 continuous builds 206 coverflowview 126

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

E Eclipse 20 event 48 simuleren van 50 event-handler 49 event-object 49 executiecontext 28, 70 externe browser openen van 133

207


17-09-13 16:03


208

F factory pattern 37 File-object 165 filteren met picker 97 met zoekbalk 96 op afstand 142 fireEvent 50 fotoview 126 front-end compiler 11 functielijst 41

G garbage collection 32 gebruikersinterface ontwerp van 45 gebruikersprofiel 41 geheugen loggen van 39 geheugengebruik 31 geocoder 136 Google Maps routegegevens via 154 Google Maps API’s installeren van 17 GPS 135

J JavaScript 30 JavaScriptCore interpreter 11 JSON 33

K kaarten 146 routes op 154 kalibratie 141 kleuren 205 kleurgebruik 48 knop 105 kompas 136

L labels 57 van knoppen 48 lay-out 47, 73 leesbaarheid 48 locatiegegevens 135, 137 loggen 39 lokaal bestand 163

M H home screen icon 48 HTML 5 10

mock-ups 47 modaal window 67 iPad 184 modules van Titanium 34 Module Titanium.Filesystem 163

I imageview 109 include-methode 30 index 81 instellingen beheer van 24 Instruments 16 Interface Builder 15 iOS 8 iOS Developer Program 14 iOS-Simulator 15 iPad 183 iPhone Human Interface Guidelines 46


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

17-09-13 16:03

Register

209

O object literal notation 30 ontwerp van app 40 van gebruikersinterfaces voor apps 45

P picker 98 kolom 100 rij 101 pictogram 48 platform compiler 11 Play Store 9 popover iPad 189 pre-compiler 11 presentatie van tekst 57 privésleutel 178 problemen oplossen 205 publiceren in App Store 176 in Google s Play Store 177

SQLite 3 167 Sun Java 6 JDK installeren van 16 switch 117

T tabbalk sorteren met 92 tabblad 62 tabel aanmaken van 170 tabelindex 81 tabeloverzicht 77 navigeren met 85 tabgroep 60 tekstgebied 113 tekstpresentatie 57 tekstveld 113 testen 48, 173 timers 32 Titanium 10 installeren van 12 Titanium-project opbouw van 23 toetsenbord 113

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

U updates 180 URL 158

V S Sandbox 158 schermdichtheid 27 schermoriëntatie 74 -event 75 schermtypen testen 173 scrollable-view 123 scrolview 121 secties 88 slider 142 sorteren 92 splash-scherm 27 iPad 183 splitwindow iPad 184


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

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

17-09-13 16:03


210

window 51, 66 schermoriëntatie 74 wireframes 47

X Xcode 14 XML 33

Z zIndex 55 zoekbalk 96 z-orde 55 zwaar window 70


17-09-13 16:03

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.

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!

BASISCURSUS

BASISCURSUS APPS ONTWIKKELEN

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.

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.

MARK AALDERINK

OVER DE AUTEUR

MARK AALDERINK

978 90 12 58593 4 980

7192 SDU Cover_AppsOntw_iOS.indd 1

19-09-13 11:11

APPS ONTWIKKELEN APPS ONTWIKKELEN

Recommend Documents