Ik geef training in frontend tools en stacks als HTML, JavaScript, TypeScript, React, Angular en Vue. Ik schrijf boeken en artikelen over tal van (ICT-) onderwerpen. Ik was lead developer en directeur bij Yindo - Jouw digitale bibliotheek. Je kunt mij volgen op Twitter(@PeterKassenaar).

In dit blog vind je persoonlijke artikelen, die niet noodzakelijk tech-gerelateerd zijn.

Views and expressions are my own.

Terug naar de algemene site.

24april

Web Development Library–PhoneGap

Als je – zoals ik – al bijna twintig jaar ICT-boeken schrijft, is het uitkomen van een nieuwe titel toch een beetje business as usual geworden. Je raakt er aan gewend, dat de PostNL-bus de straat in draait om weer een doos met auteursexemplaren af te leveren.

Web Development Library - PhoneGap

Maar soms verschijnt er een uitgave waar je toch extra trots op bent. Dat was het geval bij het boek over AngularJS, maar beslist ook nu, bij het uitkomen van Web Development Library – PhoneGap.

Het is een vreselijk leuk boek geworden – al zeg ik het zelf - en het is bij mijn weten het eerste oorspronkelijk Nederlandstalige (=niet vertaalde) werk over PhoneGap en Cordova.

Waar gaat het boek over? In één zin: je leert apps maken voor Android, iOS en Windows Phone op basis van HTML, CSS en JavaScript. Deze apps kun je vervolgens publiceren in Google Play of de Apple App Store (oké, dat zijn toch twee zinnen).

Hoewel het boek nog geen 300 pagina’s is, leer je toch alles over het gebruiken van PhoneGap Build (de cloud-tool om apps te maken, dan hoef je zelf niks te installeren), het zelf installeren van PhoneGap/Cordova op je pc of Mac, het maken van basis-apps en het testen ervan in de emulator of op je eigen smartphone of tablet, het werken met standaardplug-ins voor camera, kompas, GPS en dergelijke, het werken met aanvullende plug-ins (met een speciale rol voor plug-ins van de Nederlander Eddy Verbruggen) als een barcodescanner, social sharing en het plaatsen van advertenties in je app, tot het signeren en publiceren van je app in de diverse app stores.

De app die je zelf maakt in dit boek kun je alvast downloaden in de store:

Android app on Google Play 

Kortom: “Web Development Library – PhoneGap is een totaalwerk als het gaat om het maken, onderhouden en publiceren van je eigen mobiele apps.”

Voor de volledigheid de algemene kenmerken van het boek:

9789059407862Specificaties

  • Boek, paperback, 280 pagina’s.
  • ISBN-13: 978-90-5940-786-2 (9789059407862)
  • Geschikt voor opleidingen en zelfstudie
  • Onafhankelijk van gebruikte platform en browser
  • Prijs: EUR 24,95

Van de flaptekst

“PhoneGap (of Cordova) is een JavaScript-bibliotheek om op basis van de webstandaarden HTML, CSS en JavaScript mobiele apps te ontwikkelen voor Android, iOS en Windows Phone. Apps die met PhoneGap worden gemaakt, kunnen desgewenst worden gepubliceerd in de diverse app stores. Maar naast het realiseren van standalone apps kunt u met PhoneGap ook gebruikmaken van de apparaatmogelijkheden zoals de camera, GPS, contactenlijst, delen op sociale media en meer. In dit boek komen al deze functies aan de orde. U eindigt met een eigen app in de store. Tot de behandelde onderwerpen behoren:

  • Kennismaken met PhoneGap.
  • Een eerste PhoneGap-app schrijven.
  • Werken met de cloudomgeving PhoneGap Build.
  • PhoneGap lokaal installeren en gebruiken.
  • Werken met de basisplug-ins en third-party plug-ins.
  • Apps publiceren in Google Play en in de Apple App Store.

Meer informatie en downloads vind je op www.webdevelopmentlibrary.nl  De app die je in dit boek maakt, is ook beschikbaar in Google Play en de Apple App Store. Zoek naar de app WDL – PhoneGap.

Direct bestellen

Peter Kassenaar
-- 24 april 2015

27februari

PhoneGap-apps handmatig signeren

Het maken en testen van PhoneGap/Cordova-apps op je eigen computer is niet lastig. De apps worden dan gesigneerd met een (tijdelijke, machinegebonden) debug-key en met deze key op je device geplaatst. phonegap-to-googlePlay

Anders wordt het als je je apps wilt publiceren in de Google Play Store. Dan moeten ze met een ‘echt’ certificaat worden ondertekend. Nu is dat proces niet zo lastig als bij Apple, waarbij je verplicht via het Apple Developer Portal moet werken, maar het kan toch nog een hele klus zijn.

Opties

Als je app gereed is, heb je verschillende opties:

  • Signeren via Eclipse en de Android Developer Tools (als je met deze IDE werkt).
  • Signeren via Android Studio. Android Studio gebruikt echter een andere build-tool (Gradle) dan PhoneGap/Cordova (Apache Ant), reden waarom het ook niet eenvoudig is een PhoneGap-app vanuit Android Studio te signeren.
  • Handmatig signeren vanaf de command line.

Deze laatste optie is de optie die altijd werkt, ongeacht het platform (Mac/Pc/Linux) en de tool die je gebruikt. Ik heb van het complete proces een YouTube-video gemaakt. Daaronder worden de stappen nog kort samengevat, maar bekijk de video (15 min.) voor een complete walkthrough.

http://www.youtube.com/watch?v=EAzFAntSM3Q

Stappen

1. Maak een keystore. Bewaar de keystore op een veilige plaats. Onthoud je wachtwoord voor de keystore. Elke app heeft zijn eigen keystore. Maak nieuwe builds van de app (updates) met dezelfde keystore.

De opdracht luidt (vervang […] door gegevens van je eigen app)

keytool -genkey -v -keystore [appname-key].keystore -alias [alias_appName] -keyalg RSA -keysize 2048 -validity 10000

2. Compileer de app in release-mode. Maak hiervoor een bestand ant.properties in de root van je android-projectmap. Dit is de inhoud van ant.properties:

key.store=[/Pad/Naar/Jouw/keystores/hello-key.keystore]
key.alias=alias_[appname]

3. Typ de opdracht ant release. Ant maakt nu in de \bin map van het project een release-versie van de app.

3a. Krijg je de foutmelding sdk.dir is missing ? Dit vooral het geval als je de app voor het eerst in release-modus wilt maken, zo heb ik gemerkt. Bij updates gaat het meestal goed. Draai dan eerst een update van het project. De opdracht hiervoor is

android update project –p [/Pad/Naar/Jouw/Project/platforms/android] –subprojects

Typ daarna opnieuw de opdracht ant release.

Typ je wachtwoord (uit stap 1) als daar om gevraagd wordt.

4. Draai jarsigner. De opdracht hiervoor is:

cd \bin

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore [Pad/Naar/Appname-key.keystore] CordovaApp-release-unsigned.apk alias_[appName]

4a. Verifieer eventueel de apk. Deze stap is niet verplicht. De opdracht hiervoor is:

jarsigner -verify -verbose -certs CordovaApp-release-unsigned.apk

5. Draai zipalign. Dit comprimeert de app verder en zet alle bytes in de goede volgorde. De opdracht is:

zipalign -v 4 CordovaApp-release-unaligned.apk FinalAppName.apk

Dan heb je uiteindelijk een gesigneerde, uitgelijnde versie van je app in het bestand FinalAppName.apk. Deze versie kun je uploaden naar Google Play.

Bovenstaande is een verkorte (en ik hoop duidelijker) weergave van de pagina op http://developer.android.com/tools/publishing/app-signing.html.

Succes er mee!

Peter Kassenaar
-- 27 februari 2015

05september

PhoneGap voor Android (compleet) installeren op Windows

PhoneGapLogo

[English version of this article? Use Google Translate!]

PhoneGap is een uitstekende tool voor het maken van apps op basis van HTML, CSS en JavaScript. Ik schreef al eerder over PhoneGap:

Als je snel op weg wilt zonder zelf iets te installeren, kun je gebruik maken van de cloudservice PhoneGap Build. Maar zodra je vanaf je eigen computer aan het werk wilt, zul je PhoneGap en alle aanvullende development tools zelf moeten installeren. Op een Mac verloopt dat redelijk vlot is mijn ervaring; maar op een Windows-pc moet je vaak wat meer handelingen verrichten om alle aanvullende tools (Java Development Kit, Ant en meer) te installeren.

En: de PhoneGap-documentatie blinkt niet echt uit in ondersteuning voor Windows-developers…

logo-windows7Dit artikel bespreekt van A-Z zien hoe je vanaf een blanco Windows 7-installatie alle software en tools installeert om zelf PhoneGap-apps voor Android te kunnen compileren en testen. De termen PhoneGap en Cordova worden hierbij vaak door elkaar gebruikt.

Als je deze stappen volgt: het kan zijn dat op jouw pc sommige onderdelen al geïnstalleerd zijn (bijvoorbeeld wel de Java Development Kit, maar nog niet Ant). Ik geef aan hoe je test of de betreffende component goed werkt. Als dat het geval is, kun je de installatie daarvan overslaan.

Stap 1. Check Java

Android apps worden geschreven in Java. Je moet daarom de Java C-compiler javac.exe op je computer hebben staan. Deze moet bovendien in het pad (PATH) te vinden zijn. Check dit op de volgende manier.

  • Open een command-venster, bijvoorbeeld via Start, Cmd, Enter.
  • typ de opdracht javac. Als Java al goed is geinstalleerd en bovendien bereikbaar is via het pad, dan zie je een scherm met uitleg over de verschillende command line options voorbij flitsen. Als dat niet het geval is, ziet je scherm er zo uit:

Installatie PhoneGap Android - Check Java

Een melding als bovenstaande hoeft niet te betekenen dat Java nog niet geïnstalleerd is. Het kan op dit moment alleen nog niet worden gevonden in het pad. Check daarom via Windows Verkenner of Java misschien al aanwezig is op de computer.

  • Ga naar C:\Program Files (x86)\ en check of hier de mappen \Java en \Java\jdk1.7.0_xx aanwezig zijn. Op de plek van de xx staat het versienummer van de huidige library. Bij mij is dat op dit moment 25, maar bij jou kan dat natuurlijk alweer een hoger getal zijn.
    • Als je op een 32-bits versie van Windows werkt, kijk dan in C:\Program Files\ en vergeet de (x86).
  • Er kan ook een map \Java\jre7 aanwezig zijn. Dit is niet de goede versie voor PhoneGap-development. De jre staat voor Java Runtime Environment. Je moet echt de JDK, Java Development Kit-versie hebben.

Check je Java-versie via Windows Verkenner

Stap 1a. Installeer Java

Als Java bij jou nog niet aanwezig is, download en installeer dan de meest recente versie van de Java Development Kit.

Download en installeer Java Developmen Kit via Oracle

  • Ga daarna opnieuw naar Windows Verkenner en controleer of de mappen nu goed aanwezig zijn.
  • Belangrijk is de map \bin. Hierin staan de uitvoerbare bestanden. Check deze.

Stap 2 – Java aan PATH toevoegen

De installatieprocedure voegt Java niet automatisch aan het pad toe (tenminste, niet toen ik het probeerde). Dit moet je daarom zelf aanpassen. De PhoneGap-documentatie geeft aan dat je de variabele JAVA_HOME moet toevoegen en vervolgens %JAVA_HOME%\bin aan het pad kunt toevoegen, maar dat werkte bij mij niet goed (?). Ik voeg daarom het volledige pad naar java.exe toe.

  • Klik met de rechtermuisknop op Computer en kies Eigenschappen.
  • Kies Geavanceerde systeeminstellingen.
  • Selecteer indien nodig het tabblad Geavanceerd.
  • Kies Omgevingsvariabelen.
  • Selecteer in het vak Systeemvariabelen de variable Path.
  • Kies Bewerken.

Java toevoegen aan PATH

Ik zelf vind het handig om het pad even te kopieren naar een externe editor, bijvoorbeeld Kladblok. Dan heb je beter zicht op de complete samenstelling, in plaats van in het minuscule tekstvak van Windows.

  • Voeg de map met Java achteraan toe aan de Path-variabele.
  • Vergeet niet een puntkomma als scheidingsteken te plaatsen na de vorige (laatste) verwijzing. Je voegt dus bijvoorbeeld dit toe aan het pad: ;C:\Program Files (x86)\Java\jdk1.7.0_25\bin.

pg_05

  • Dit kun je desgewenst ook rechtstreeks in het venster Systeemvariabele bewerken doen, zoals je hieronder ziet.
  • Als je in Kladblok het pad hebt aangepast (het kan veel langer zijn dan hier in de afbeeldingen te zien is), vergeet het dan niet terug te kopiëren naar het Windows-venster. Er mogen geen regelovergangen (‘Enters’) in de variabelenaam zitten. Let hier goed op.

Systeemvariabele uitbreiden met pad naar Java

  • Sluit alle vensters met OK.
  • In principe hoef je de pc niet opnieuw op te starten na het aanpassen van het pad. Maar als je twijfelt, kan het ook geen kwaad.
  • Test nogmaals via het opdrachtvenster of de opdracht java nu beschikbaar is als algemene systeemopdracht. Als het goed is, zie je nu een venster waarin alle commandline opties worden genoemd. 
    • Let op: als je Path hebt aangepast, moet je altijd een nieuw opdrachtvenster cmd.exe openen.

Java is nu globaal beschikbaar

We kunnen verder met de volgende stap.

Stap 3 – Apache Ant toevoegen

Voor een goede werking van Eclipse (zie verderop) en PhoneGap, moet ook Apache Ant geïnstalleerd zijn. Standaard is dat in Windows niet het geval. Vraag me niet waarvoor Ant noodzakelijk is of gebruikt wordt; ik heb geen idee. Ik ben webdeveloper, geen Java-developer ;-).

Maar in ieder geval moet je het erbij plaatsen, anders werkt het niet. Dat kan op deze manier.

  • Check eerst of Ant al op je pc geïnstalleerd is en/of in het pad staat. Dat kan door de opdracht ant in een opdrachtvenster te typen. Waarschijnlijk ziet je scherm er zo uit.

Check of Ant al geinstalleerd is

  • Als je venster er uitziet zoals hierboven, is Ant nog niet aanwezig.
  • Ga naar http://ant.apache.org/bindownload.cgi
  • Kies voor het downloaden van het zip-bestand en plaats het bijvoorbeeld op je bureaublad.

Apache Ant downloaden en uitpakken

  • Apache Ant hoef je niet te installeren, alleen maar uit te pakken.
  • Kopieer bijvoorbeeld de map apache-ant-1.9.2 naar C:\Program Files (x86). De structuur ziet er dan als volgt uit.

Apache Ant als submap van C:\Program Files

Ant aan Path toevoegen

  • Herhaal de stappen zoals je hiervoor bij Java hebt gedaan, en voeg de locatie van Ant\bin toe aan het Path.
  • Na afloop kan je Path er als volgt uitzien(in werkelijkheid staat alles op één regel, in de afbeelding is regelterugloop ingeschakeld).

Apache Ant toegevoegd aan het Path

  • Test na afloop opnieuw of Ant nu wel via de opdrachtregel beschikbaar is.
    • Vergeet niet een nieuw opdrachtvenster cmd.exe te openen!

Apache Ant testen via de opdrachtregel

Het lijkt nu alsof de opdracht nog niet is geslaagd, maar je ziet nu een andere foutmelding dan voorheen. Ant zelf wordt in ieder geval gevonden. Maar nu wordt er geklaagd dat er geen bestand build.xml aanwezig is. Prima. Dat wordt later wel door Eclipse verzorgd, in ieder geval zijn nu de randvoorwaarden compleet.

Omgevingsvariabelen instellen

Behalve het pad aan te passen, moet je ook de omgevingsvariabelen ANT_HOME en JAVA_HOME toevoegen. Zonder deze variabelen (ook al gebruik je ze verder niet in het pad), werkt de Command Line Interface (CLI) van PhoneGap/Cordova niet goed.

  • Open opnieuw via Computer, Geavanceerde systeeminstellingen, Omgevingsvariabelen het venster om pad en variabelen te beheren.
  • Gebruik de knop Nieuw om twee Gebruikersvariabelen toe te voegen.
    • ANT_HOME verwijst naar de ant-directory, dus bijvoorbeeld C:\Program Files (x86)\apache-ant-1.9.2\
    • JAVA_HOME verwijst naar de Java-directory, bijvoorbeeld C:\Program Files (x86)\Java\jdk1.7.0_25 

Omgevingsvariabelen ANT_HOME en JAVA_HOME instellen

Sluit alle vensters met OK.

Stap 4 – Android SDK (= Eclipse + Android Developer Tools) installeren

Voorheen was de installatie van Eclipse als editor/IDE en binnen Eclipse de Android Developer Tools (kortweg ADT) altijd een apart proces. Tegenwoordig is alles door Google gelukkig in één proces gebundeld.

Android SDK (Eclipse + ADT) downloaden en installeren

  • Ga naar http://developer.android.com/sdk/index.html en klik op Download the SDK.
  • Accepteer op de volgende pagina de gebruikersovereenkomst en kies 32- of 64-bits.
  • Download het complete zip-pakket. Dit is ruim 440MB, dus het kan even duren.
  • Pak de map adt-bundle-windows-x86_64-xxxxxx uit het zipbestand uit naar een centrale locatie, bijvoorbeeld weer naar C:\Program Files en geef de map een iets eenvoudiger naam.
    • Ik heb de map eenvoudig hernoemd naar \adt-bundle.

De Android Developer Tools (ADT) in de map Program Files geplaatst

  • Net als bij Ant is er verder geen aparte installatieprocedure.
  • Binnen de map \adt-bundle\eclipse\ staat het programma eclipse.exe. Hiervan kun je bijvoorbeeld een snelkoppeling op het bureaublad plaatsen.

pg_15

Pad aanpassen voor de android tools

Het wordt een een eentonig verhaal, maar ook nu moet het pad worden aangepast, zodat de PhoneGap Command Line Tools de Android Developer Tools kunnen vinden.

  • Breid het pad uit met verwijzingen naar \adt-bundle\sdk\platform-tools en adt-bundle\sdk\tools.

Het pad uitgebreid met variabelen voor de ADT-tools en -platform tools.

Je kan eventueel ook in een (nieuwe) opdrachtprompt testen wat het huidige pad is. Typ hiervoor de opdracht path en windows laat zien welk pad op dit moment is ingesteld.

Het pad opvragen via de command line

Leek dit al heel wat werk? Je bent nu halverwege! ;-)

Stap 5 – node.js installeren

Met ingang van PhoneGap/Cordova 3.0 wordt een nieuw PhoneGap-project gemaakt via de PhoneGap Command Line Interface, of kortweg de CLI. De installatieprocedure voor PhoneGap 2.9 en eerder is volkomen anders, deze behandelen we hier niet.

De CLI is een module die draait onder node.js. Je moet dus node.js installeren voordat je ook maar iets met PhoneGap kunt gaan doen. Over node.js is enorm veel te vertellen, ik beperk me hier tot de meest noodzakelijke stappen. Check eerst of node toevallig al op je pc is geïnstalleerd.

  • Open een opdrachtvenster cmd.exe en typ node achter de opdrachtprompt.
  • Als je scherm er uitziet zoals hieronder is node nog niet aanwezig.

pg_18

Installeer node.js

  • node.js wordt als .msi-bestand gedownload; open dit zodra het helemaal opgehaald is.
  • Doorloop de installatiewizard en neem alle standaardinstellingen over.

Installeer node.js met de standaardinstellingen

De installatieprocedure van node.js is slim genoeg om wel direct de gewenste parameters aan het Path toe te voegen. Check dit door de opdracht path uit te voeren in een nieuwe opdrachtprompt.

pg_21

Er zijn verwijzingen aangebracht naar zowel de nodejs programmadirectory als naar de Node Package Manager, npm. Hiermee installeer je nieuwe modules binnen node. En dus ook PhoneGap!

Stap 6 – Cordova/PhoneGap installeren

Eindelijk kun je Cordova of PhoneGap gaan installeren (zie voor meer informatie over de verschillen in naamgeving tussen Cordova en Phonegap bijvoorbeeld dit PhoneGap blog).

Installeer Cordova op de volgende manier.

  • Open een opdrachtprompt. Via npm installeer je de gewenste node-modules.
  • Typ npm install –g cordova.
    • De switch –g installeert PhoneGap als globale module. Zo kun je  vanuit elke gewenste directory een nieuw PhoneGap-project maken.
    • UPDATE: Let op: Er is een verschil tussen de modules phonegap en cordova. Je kunt ze beiden installeren via npm. In dit artikel installeer ik cordova. Zie bijvoorbeeld dit artikel van Raymond Camden voor meer informatie.

Cordova installeren via NPM

De package manager gaat aan de slag en haalt alle benodigde modules en bestanden op vanuit https://registry.npmjs.org. Dit kan enige tijd duren.

Cordova is aanwezig en kan worden gebruikt

Na afloop keer je terug in de standaard opdrachtprompt, de benodigde Cordova-bestanden zijn nu aanwezig.

We beginnen op te schieten. De resterende stappen zijn nu  als volgt.

  1. Maak en build een nieuw project via de opdrachtprompt.
  2. Open het project in Eclipse
  3. Draai het project in de emulator of op je Android-device.

Stap 7 – een Cordova project maken

We gaan er van uit dat de Cordova/PhoneGap-projecten in een aparte map worden opgeslagen. Voor dit doel heb ik even de map C:\work gemaakt.

  • Open een opdrachtprompt in C:\work
  • Typ de opdracht cordova create hello com.kassenaar.HelloWorld "Hello World".
    • Met create maak je een nieuw project in een nieuwe map \hello.
    • De package name van het project wordt com.kassenaar.HelloWorld. Gebruik in jouw geval je eigen domeinnaam + projectnaam (in omgekeerde volgorde, ook dat is een afspraak)
    • Geef als derde parameter de naam van het project op. Als deze naam spaties bevat (zoals “Hello World”) moet hij tussen aanhalingstekens staan.
    • UPDATE: Let op - het lijkt er op dat de quotes ERG BELANGRIJK zijn. Als je deze weg laat rondom de projectnaam, kan het project niet goed worden gecompileerd omdat het configuratiebestand dan fouten bevat. Zet voor de zekerheid dus altijd quotes rondom de projectnaam.

pg_28

  • Na afloop wordt de opdrachtprompt weer getoond.
  • Ga naar de nieuw gemaakte map met cd hello.
    • Je moet nu aangeven dat het Android-platform wordt toegevoegd aan het project.
  • Typ cordova platform add android.

pg_29

Foutmelding?

Het kan zijn dat je op dit moment een foutmelding te zien krijgt. Ik kreeg dat althans wel, de eerste keer. Dat kwam omdat Eclipse/ADT standaard de API versie 18 installeerde (de nieuwste versie), terwijl Cordova de API versie 17 verwacht. Mocht er bij jou ook een foutmelding optreden, los dit dan op door de API versie 17 te installeren (wie zei dat Android eenvoudig was?)

  • Typ android achter de opdrachtprompt. Dit opent de Android SDK Manager.
  • Vouw de boomstructuur achter Android 4.2.2 (API17) open.
  • Selecteer minimaal SDK Platform en ARM EABI v7a System Image.
  • Klik op Install 2 packages.

Installeer zonodig de juiste Android API

Selecteer in het volgende venster de License en klik op Install.

Installeer de nieuwe API-bestanden

  • De pakketten worden gedownload en geïnstalleerd. Na afloop is dit te zien in de SDK Manager.
  • Sluit de SDK Manager en probeer nogmaals de opdracht cordova platforms add android.
  • Lukt het nog niet? Controleer dan of je wel in de goede map staat. Je moet de opdracht in de projectdirectory uitvoeren (in dit voorbeeld in C:\work\hello).

Nu zijn de juiste API's voor Cordova geinstalleerd

Build

Build het project voor de eerste keer. Dan worden de goede libraries naar het project gekopieerd en is het klaar om later in Eclipse geopend te worden.

  • Typ de opdracht cordova build.
    • Als je meer gedetailleerde uitvoer wilt zien, gebruik dan de opdracht cordova --verbose build.

pg_35

Tussentijdse evaluatie

Laten we even kijken wat er tot nu toe op schijf aanwezig is.

  • Open Windows Verkenner en blader naar je codedirectory (bij ons: C:\work).
  • Hierin staat nu een map \hello met daarin het algemene PhoneGap-project
  • In de map Platforms is één platform toegevoegd, \android (je zult begrijpen dat je een CLI-opdracht als cordova platforms add ios, iOS toevoegt aan het project – al heb je daarop een Windows-computer natuurlijk niet veel aan).

Het tussentijdse resultaat in Windows Verkenner

Stap 8 – Project openen in Eclipse

Je kunt nu het gemaakte project openen in Eclipse, wijzigingen aanbrengen en het gaan compileren en testen.

  • Open Eclipse via de snelkoppeling die je op het bureaublad had geplaatst, of door rechtstreeks op eclipse.exe te dubbelklikken in de programmamap.
  • Als Eclipse voor de eerste keer gestart wordt, vraagt het waar het de werkruimte (workspace) moet opslaan. Neem de standaardsuggestie over en klik op OK.

Open Eclipse voor de eerste keer en geef een Workspace-locatie op

  • Eclipse toont een venster over Usage statistics en een welkomstscherm. Sluit beiden.
  • Kies File, New, Project.
  • Open in de wizard de tak Android en kies Android Project from Existing Code.
  • Kies Next.

Een nieuw Android project maken op basis van bestaande code.

  • Kies in het vervolgvenster achter Root Directory de map waarin het Android project door Cordova/PhoneGap is geplaatst. In ons voorbeeld is dat C:\work\hello\.
  • Klik op Finish.

pg_36

Fouten herstellen

Vaak gaat het goed.

Soms gaat het ook niet goed (ik heb nog niet. Mochten er rode kruisjes bij het project staan, dan betekent dit dat Eclipse het project niet direct kan compileren. Als dit optreedt, probeer het dan als volgt te herstellen

  • Klik met de rechtermuisknop op de projectnaam (Hello World) en kies Properties.
  • Kies Android en selecteer de hoogste API-versie die op je computer beschikbaar is (bijvoorbeeld level 18). Sluit het venster met OK.
  • Kies het menu Project, Clean.
  • Als het goed is zijn daarna de kruisjes verdwenen.

pg_34

Stap 9 – project openen in emulator

Om een project te kunnen draaien, moet je een Android device aansluiten (je telefoon, of tablet) of een emulator starten. In Eclipse maak je op de volgende manier een Android-emulator (AVD, Android Virtual Device). Dit hoef je alleen te doen na een eerste installatie. Als er al een emulator beschikbaar is, wordt deze automatisch gebruikt.

Android Virtual Device Manager starten

  • Kies in Eclipse de knop Android Virtual Device Manager.
  • Selecteer het tabblad Device Definitions om snel een emulator te maken op basis van bestaande toesteldefintie.
  • Ik kies nu de eerste optie (Nexus S) en klik op Create AVD.
  • Neem in het volgende venster de standaardinstellingen over en klik op OK.

 

Een AVD maken op basis van bestaande device-informatie

 

Definitie van een AVD

  • Sluit het venster met OK om terug te keren naar de Eclipse-werkomgeving.

Emulator starten

Het starten van de Emulator/AVD is een langdurig klusje. Je kunt het beste de emulator eenmalig opstarten, en vervolgens gewoon in de taakbalk laten staan. Als je de app hebt gewijzigd en hem opnieuw start, wordt hij op de emulator vanzelf bijgewerkt. Het telkens afsluiten en opnieuw starten van de emulator zou erg veel tijd kosten.

  • Klik in de werkbalk van Eclipse op de knop Run en kies Run As, Android Application.

Run as Android Application

Als alles goed is gegaan verschijnt na enige tijd het standaard Cordova/PhoneGap-startscherm. Waarschijnlijk moet je de emulator eerst ontgrendelen voordat je app ziet.

Mogelijk verschijnt in Eclipse ook het venster Auto Monitor Logcat. Kies hierin Yes, om zoveel mogelijk meldingen te zien. Dat is altijd handig bij het debuggen.

Fouten en informatie tonen in LogCat wordt aanbevolen

Hoera! Je eerste zelf-gecompileerde Cordova/Android-app draait in de emulator.

Hoera! Je app draait in de emulator

Stap 10 – App verder uitbreiden

Vanaf dit moment is het een invuloefening, en kun je in Eclipse – of in een andere editor naar keuze – de app gaan aanpassen. Je doet dit uiteraard door de code in index.html te wijzigen, JavaScript en CSS toe te voegen, enzovoort.

De HTML-code aanpassen in Eclipse

Maak bijvoorbeeld een kleine aanpassing in \assets\www\index.html en kies opnieuw de knop Run. In de emulator wordt de nieuwe versie van de app getoond.

  • Standaard is in Eclipse geen HTML-editor aanwezig. Klik daarom met de rechtermuisknop op index.html en kies Open With, Text Editor om de tekst te kunnen wijzigen.
  • In een volgende blogpost zal ik dieper ingaan op de manier waarop je Eclipse kunt aanpassen om goed te werken als HTML/JavaScript/webeditor.
  • Als je in Cordova PhoneGap 3.0 device-opties wilt gebruiken (zoals het kompas, de camera en andere apparaatafhankelijke functies), moet je hiervoor apart de plug-ins installeren. Ook hier kom ik in een apart artikel op terug.

De app is aangepast met eigen wijzigingen

 

Conclusie

Het is een heel werk om PhoneGap/Cordova voor Android werkend te krijgen op een Windows-systeem. De standaard PhoneGap-documentatie blinkt niet uit in aanwijzingen voor Windows-gebruikers. Gelukkig hoef je veel zaken, zoals de installatie van Java en ADT maar eenmalig uit te voeren. Daarna kun je je concentreren op het maken van projecten en programmeren van leuke apps!

Mocht je meer willen weten over PhoneGap en de mogelijkheden die je na installatie op je eigen computer hebt, dan kun je altijd contact opnemen voor een cursus. Hierin bespreek ik behalve de installatie alle extra mogelijkheden van PhoneGap/Cordova en uiteraard de publicatie van je app in de diverse App stores.

Ondertussen veel succes met PhoneGap!

Peter Kassenaar
-- 6 september 2013

 

26augustus

Paradise Island, The Tribez– review mobile simulatie games

gameinsight Dit is een wat langer artikel geworden, ik heb het verdeeld in de volgende hoofdstukken:

 

Inleiding

Mijn eerste contact met simulatiegames dateert uit 1989 – inderdaad, de eerste versie van Sim City. Enkele weken was ik volkomen in de ban van blokkerige huisjes, wegen en flatgebouwen en probeerde ik als een goede burgemeester iedereen van water, stroom, infrastructuur en onderwijs te voorzien. Net zo snel als het gekomen was, verdween mijn interesse echter weer. Ik had er eenvoudigweg geen geduld voor. Het bouwen van huizen en zittend achter het beeldscherm wachten totdat de belasting kon worden geïnd duurde me te lang.

Fast forward 25 jaar.

Sim City speel ik niet meer, maar we zijn ondertussen in het tijdperk van tablet en mobiele telefoon aanbeland. Games speel je even op een verloren moment tussendoor. Op het station, in de bus of in de pauze. Talloze andere simulaties hebben het licht gezien, uiteenlopend van Facebook-games als Farmville en klonen daarvan tot het nabouwen van complete sterrenstelsels. Geen daarvan kon mij echt boeien, totdat ik in aanraking kwam met apps van de firma Game Insight. Deze in 2010 opgerichte Russische gamesuitgever heeft zich gespecialiseerd in sociale- en simulatiegames voor iOS en Android en heeft in korte tijd een indrukwekkend portfolio opgebouwd. Een aantal games heb ik nader bekeken.

Geschikt voor kinderen

Het leuke van de apps van Game Insight is dat ze zonder meer ook geschikt zijn voor kinderen, terwijl je er ook als volwassene veel plezier aan kunt beleven. De games zijn in beginsel gratis, bevatten geen geweld, en je kunt in-app aankopen (het verdienmodel waar dit type games op gebaseerd is) eenvoudig uitschakelen. Bovendien – maar dat is mijn mening, gebaseerd op persoonlijke observatie, niet op enig wetenschappelijk onderzoek – is dat kinderen er op speelse manier veel van kunnen leren.

Afwegingen en strategieën

Zo moet je als bestuurder van je stad (of eiland, of vliegveld, of spoorweg, zie verderop) immers beslissingen nemen over het aankopen en verkopen van goederen en moet je – ook als kind – afwegingen maken waar je bronnen als menskracht of beschikbare energie voor inzet. Als je een nieuw huis bouwt, kun je diezelfde energie niet nogmaals gebruiken om een boom te kappen of een schommel te bouwen.

Elke beslissing in een simulatiegames is een klein afweegmomentje waarop je iets kunt leren en die – als het goed is – de loop van het spel beïnvloed. Dat is letterlijk spelend leren voor kinderen. Ondertussen pikken ze een aardig mondje Engels mee, want veel simulatiegames zijn niet vertaald in het Nederlands.

Voorafgaande kennis van het Engels is echter niet beslist nodig, want vaak wordt ook met gearceerde gebieden en wijzende pijlen wel duidelijk gemaakt wat de speler moet doen. Zonder al te veel Engelse bagage konden mijn zoon (9 jaar) en dochter (6) moeiteloos aan de slag. Verrassend, ook voor mij! Dit is ook een compliment aan de makers, want kennelijk lukt het ze op visuele wijze de werkwijze van het spel uit te leggen, zonder dat hierbij veel tekstuele toelichting nodig is.

Dit viel mij in positieve zin op aan de simulaties van Game Insight. Ze zijn op deze wijze gevarieerd en bieden een goede balans tussen voortgang, beloning en beslismomenten.

Sjabloonfunctie

Een tweetal games bespreek ik hier nader. Ze dienen tevens als sjabloon voor de overige spellen uit het oeuvre van Game Insight. Paradise Island is een wat eenvoudiger, rechttoe-rechtaan simulatie die geschikt is om mee te beginnen. The Tribez is een meer complexe game, waarin ook een voortgangsverhaal zit verweven. Beide games (en ook de andere games uit het portfolio van Game Insight) bieden functies om voortgang te delen via Twitter en Facebook en je vrienden op de hoogte te houden van je prestaties. Ook hierbij geldt: verplicht is dit niet. Wel levert het vaak extra bonussen op als je verbinding maakt met je Facebook- of Twitteraccount. De (publiciteits-)kassa moet natuurlijk wel blijven rinkelen.

Paradise Island - voorbeeldeiland

Paradise Island

Als eigenaar van een vakantieresort op een tropisch eiland is het jouw taak het eiland uit te bouwen zodat het een attractief park wordt voor bezoekers die het eiland aandoen op hun cruise. Je kunt hiertoe tal van gebouwen plaatsen. Dit varieert van eenvoudige hutjes tot complete hotels, pretparken en uitgebreide attracties. Periodiek vinden er vanuit Game Insight acties plaats waarmee je kunt sparen voor speciale gebouwen (kerst, valentijn, vakantie) die je vrienden niet hebben.

Duurdere gebouwen komen in de hogere levels beschikbaar. Je voortgang in de levels vind plaats door huur te innen van de gebouwen en toeristen te helpen waar nodig. Ook zijn tal van missies beschikbaar die je voortgang in het spel markeren (‘bouw vijftien cabins’, ‘haal vijfhonderd keer de huur op’, ‘help honderd toeristen’, enzovoort). Dit is een buitengewoon slim voortgangssysteem, waarbij je telkens een klein succesmomentje ervaart, en zo wordt getriggerd door te spelen (‘nog even dat gebouw opwaarderen, dan heb ik weer een missie extra’).

Je kunt echter niet zonder meer het eiland volplempen met disco’s, hotels en casino’s, want elk gebouw heeft een aantal personeelsleden nodig en verbruikt energie. En dus zul je ook personeel moeten inhuren en stroomvoorzieningen regelen door windmolens of zonnecellen te bouwen. Bovendien willen toeristen graag ook wel wat groen zien. Je moet dus ook bomen, struiken en decoraties planten. Al deze deze items kosten ook weer (fictief) geld dat je gedurende het spel verdient. Je moet dus een goede afweging maken in je investeringen voor de meest optimale voortgang.

De in-app aankopen bestaan voor een groot deel uit de lokale munteenheid van het eiland (‘piasters’). Zo kun je bijvoorbeeld voor 10 euro echt geld – te betalen via je creditcard van je Apple Account, of de Google Play store – extra piasters kopen, waarmee je allerlei gebouwen en flora en fauna kunt bijkopen. Die piasters kun je ook in het spel bij elkaar sparen door missies te volbrengen en door bankgebouwen te laten bouwen, maar op deze wijze kan het dagen of zelfs weken duren totdat je het gevraagde bedrag bij elkaar hebt gespaard. Game Insight mikt er dus heel slim op dat spelers het geduld niet kunnen opbrengen dit af te wachten. En de portemonnee trekken om hun eiland vooruit te stuwen in de vaart der volkeren. Dat dit een geslaagd verdienmodel is, blijkt wel uit het feit dat Paradise Island in 2012 meer dan een half jaar op nummer 1 stond als ‘meest opbrengende app in de Google Play store’.

Paradise Island - Diverse typen gebouwen voor je eiland

sociale component

Behalve een mooi uiterlijk, krijgt je eiland ook een comfortscore. Deze kun je desgewenst vergelijken met vrienden via sociale media als Twitter of Facebook. Het spreekt voor zich dat Games Insight hiermee mikt op de jaloezie-factor om nog meer geld uit ons, arme eilandbebouwers te kloppen. Verplicht is dit echter niet, het eerder een leuke bijkomstigheid.

Voordelen

  • Snel op weg, voor alle leeftijden
  • Duidelijk
  • Mooie graphics
  • Geschikt voor beginners

Nadelen

  • Soms trage voortgang door de levels, als je geen in-app aankopen wilt doen om het spel te versnellen
  • Herhalend gedrag noodzakelijk (gebouw plaatsen, opwaarderen, slopen en weer opnieuw) om aan bepaalde missies te voldoen.
  • Niet al te complex, gebouwen die je plaatst hebben geen duidelijke invloed op het spel of de leefbaarheid of sfeer op het eiland. Minder ‘realistisch’ daardoor.

Vergelijkbare games

Als een tropisch eiland je niet zo aanspreekt, zijn er tal van andere games die een vergelijkbare gameplay bieden en hetzelfde uitgangspunt hebben. Je bestuurt dan bijvoorbeeld een haven, een treinstation, een vliegveld of een casino. Kijk in dat geval eens naar de volgende games:

The Tribez - Help een oude wereld te ontdekken en ontwikkelen

The Tribez

Bij The Tribez ga je terug in de tijd. Duizenden jaren om precies te zijn. Je wordt als tijdreiziger op een eiland uit de steentijd gedropt. Daar bouw je eerst hutten en leg je vuurtjes aan om de bewoners te beschermen tegen de barre koude. Langzamerhand werk je er aan je bevolking uit te breiden.

Dat ‘oertijd’-principe moet je overigens met een flinke korrel zout nemen, want The Tribez flirt graag met een knipoog naar de moderne tijd. Zo kun je ook hot tubs plaatsen om de bevolking van een lekker warm bad te voorzien, trampolines neerzetten of dinosaurusnesten plaatsen om de bewoners een dinoritje te laten maken. Al deze acties leveren geld op, waarmee je weer nieuwe gebouwen plaatst. Voorzieningen zijn er weer in verschillende categorieën: objecten die voedsel opleveren, gebouwen die hout, steen en marmer produceren en nog veel meer.

Het verschil met een game als Paradise Island is dat er veel meer een verhaal in zit en je eiland- en karakterontwikkeling veel complexer is. Er is een lokale gids (Aurora) die je van alles uitlegt over het eiland en een geheimzinnige professor die je zo nu en dan opbelt om verschillende opdrachten door te geven, of aanwijzingen te geven over de omgeving (‘onderzoek het neergestorte vliegtuig’, ‘kijk in de grot’, ‘zoek 5 object ABC of XYX’, enzovoort).

Zo leer je steeds meer over de verschillende eilanden en hun achtergronden. Bij Paradise Island beheer en bebouw je één eiland, bij The Tribez moet je maar liefst zeven verschillende werelden beheren. Deze worden langzamerhand, een voor een ontsloten. The Tribez is dan ook een veel uitgebreider spel dan Paradise Island. Sommige grondstoffen (marmer, zand), zijn slechts op bepaalde eilanden te winnen, maar heb je wel op andere eilanden nodig om gebouwen te plaatsen, of bijvoorbeeld een brug te repareren. Je moet dus manieren verzinnen om goederen tussen de werelden te transporteren.

Toch wordt het geheel heel luchtig gebracht, met uiterst grappige graphics die ook na maanden nog niet gaan vervelen. Als een holbewoner een boom omhakt, zie je hem snel een helmpje opzetten (het schild van een schildpad) en op een holletje naar de betreffende boom rennen. Daar gaat hij met een bijl in de weer, waarbij ook de boom elke keer een beetje schudt als er in wordt gehakt. Hetzelfde geldt voor het zagen van hout, het plukken van bessen, het hoeden van varkens en meer. Alles wordt op cartoonachtige wijze uitvergroot en is daarmee een genot om naar te kijken.

Ontwikkel het eiland met akkers, huizen, steengroeven en vermaaksitems

Er is veel aandacht besteed aan de visuele funfactor. Geen moment is het angstaanjagend of te realistisch. Game Insight heeft hierbij goed gespiekt bij Nintendo (Mario Kart, Donkey Kong), is mijn indruk, zonder overigens directe klonen te fabriceren. Het is erg knap gedaan.

Voordelen

  • Meer, en gevarieerder spelplezier dan Paradise Island.
  • Meer verschillende opdrachten en langere speelduur per opdracht/missie.
  • Snel en uitdagend voortgangssysteem. Zeer veel triggers om te blijven doorspelen. Als je even vast zit op een wereld, is er altijd wel wat te doen in een andere wereld.

Nadelen

  • Langere laadtijd van het spel voordat je kunt spelen. Loopt soms vast op iPad.
  • Soms erg lange duur van een missie. Onduidelijk in welke volgorde je de missies moet spelen om voortgang te (blijven) boeken.
  • Meer kennis van Engels nodig.

Vergelijkbare games

Houd je van meer uitgebreide games en ben je bereid hier tijd in te investeren (reken al snel op enkele weken tot maanden), kijk dan ook eens naar de volgende titels. Voor al deze titels geldt dat ze mijns inziens minder geschikt zijn voor jongere kinderen (<12 jaar), vanwege het meer complexe karakter en uitgebreider gebruik van Engels.

Conclusie

The Tribez is een uiterst grappig spel, met een meer complexe verhaallijn dan Paradise Island. Het is daarmee meer geschikt voor als je al wat meer ervaring hebt met dit type games. Het komt overduidelijk uit dezelfde koker, maar is iets lastiger te volgen als je Engels nog niet zo goed beheerst. Er is meer uitleg nodig voor de verschillende onderdelen. Voor mijn kinderen moest ik regelmatig de uitleg en opdrachten van Aurora en de professor vertalen. Het spel is visueel erg leuk uitgewerkt. Beide games zijn beschikbaar in de Google Play store en de Apple App Store, voor zowel telefoons als tablets.  Paradise Island (en ook My Railway) zijn erg geschikt om eens kennis te maken met het genre mobiele simulatiegames en om te ontdekken of dit iets voor jou is.

Hyperlinks

Heb je zelf nog tips of opmerkingen over mobiele (simulatie)games? Laat het weten door een berichtje achter te laten onder dit artikel.

Veel speelplezier,

Peter Kassenaar
-- 26 augustus 2013

23mei

Webapp toevoegen aan Android Homescreen

Bij de onthulling van de iPhone in 2007 werd ook het concept webapps geïntroduceerd. Dit betekent dat je een koppeling naar een website op je startscherm kunt plaatsen, waardoor het net een app lijkt. Met één klik kun je daarna de site openen alsof het een app is. Het enige wat de website in kwestie daar voor hoeft te doen is de regel

<meta name="apple-mobile-web-app-capable" content="yes">

toevoegen aan de header van de site. Met

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

kun je bovendien aangeven welke afbeelding als icon wordt gebruikt voor de webapp. Bezoekers kunnen op een iPhone of iPad in de browser Voeg toe aan beginscherm kiezen om de site als app te plaatsen.

Webapp toevoegen aan startscherm

Maar hoe gaat dat op Android?

Android heeft echter geen 1-klikoptie om websites of webapps toe te voegen aan het startscherm. Er zijn wat meer stappen voor nodig. In deze beschrijving gaan we uit van Google Chrome als browser, maar in andere browsers zal het vergelijkbaar werken.

  1. Open op je Android-device de browser (Google Chrome).
  2. Ga naar de gewenste pagina. Hier gebruiken we www.boekenwolk.nl als voorbeeld.
  3. Klik in Chrome op het pictogram met de ster in de adresregel om een favoriet te maken van de website.
  4. Volg de aanwijzingen in de browser om de favoriet op te slaan. In Chrome kun je bijvoorbeeld de naam aanpassen en een locatie opgeven waar de snelkoppeling wordt opgeslagen.

Favoriet maken van website in Chrome voor Android

  • Open het menu met instellingen in Chrome en kies Bladwijzers. Hierin staat minimaal de bladwijzer die je zojuist hebt gemaakt.

Bladwijzers openen in Chrome voor Android

  • Tik op de bladwijzer en houdt je vinger ingedrukt. Na ongeveer een seconde verschijnt een snelmenu met mogelijkheden.
  • Kies hierin de optie Toevoegen aan startscherm.

Bladwijzer toevoegen aan Android Startscherm

  • Dat is alles. Ga terug naar het Android startscherm. Hierin staat de snelkoppeling. Sleep hem naar de plek waar je hem graag wilt hebben.
  • Android houdt zoals je ziet (net zoals Apple iOS) rekening met het pictogram dat is aangegeven in de code van de site.
    • Als de maker van de site geen apart pictogram heeft opgegeven, wordt het standaard webpagina-pictogram van de browser gebruikt.
  • Tik op de snelkoppeling om de website/webapp snel te openen.
    • Anders dan in iOS wordt de site niet in het volledige scherm geopend (dus zonder dat de browsertabbladen en adresregel zichtbaar zijn). In Android is altijd de omliggende browser zichtbaar. Misschien wordt dit in een volgende versie van Android nog aangepast?

Snelkoppeling op Android Startscherm

Veel succes er mee!

--Peter Kassenaar
23-mei-2013

16mei

Introductie PhoneGap

Cover PC-Active 269Wat is er leuker dan een eigen app op uw telefoon te plaatsen? Met relatief nieuwe diensten als PhoneGap en PhoneGap Build maakt u apps met bekende technieken als HTML, CSS en JavaScript. Na het uploaden van de code krijgt u een kant-en-klare app retour. In dit artikel maakt u in vijftig regels code een werkende app met geïntegreerde Google Maps.

[Dit artikel verscheen eerder in PC-Active 269, mei 2013]

Download de voorbeeldcode bij dit artikel


Inleiding

Het mobiele landschap is hot. Het marktaandeel van smartphones is in Nederland al ruim 60%. Voor het grootste deel draaien deze op Android (ook ruim 60%). De rest wordt verdeeld tussen iOS, Windows Phone en andere platforms. En als u ook nog weet dat zo goed als iedereen die een smartphone heeft daar meerdere apps voor download, beginnen uw vingers natuurlijk te jeuken. Uw app moet daar ook bij! Maar waar moet u beginnen? Elders in deze PC-Active vindt u een artikel over de Corona SDK en bijvoorbeeld in PC-Active 266 las u meer over het maken van een Android app met Java en Eclipse.

In dit artikel bespreken we een ander alternatief. Want ook met webdesigntechnieken als HTML, CSS en JavaScript kunt u in combinatie met de tool PhoneGap eigen apps maken. Deze kunt u verspreiden onder vrienden en bekenden, of – als u een developer account afsluit bij Apple of Google – in de diverse app stores publiceren. Een developer account kost geld, maar het begin is gratis. Het enige dat u nodig hebt is een editor (Kladblok is al voldoende), enige voorkennis van HTML, CSS en JavaScript en een account bij Adobe. Het is het handigst als u een Android-telefoon bij de hand hebt, want hierop kunt u zonder beperkingen apps toevoegen. Voor iPhones en iPads is dat een stuk ingewikkelder door de beperkingen die Apple oplegt.

PhoneGap of Cordova?

Het project PhoneGap is oorspronkelijk gestart door Nitobi. In 2011 werd PhoneGap overgenomen door Adobe. Om de continuïteit en het opensourcekarakter te garanderen, werd de codebase ondergebracht bij Apache, waar het de naam Cordova heeft gekregen. U kunt de huidige versie van PhoneGap zien als een distributie van de Cordova core. Ingewikkeld? Tja. Ook op de PhoneGap-site zelf komt u beide termen nog tegen! Online vind u de officiële uitleg. Met PhoneGap schrijft u één keer de HTML-code. Deze kan worden omgezet naar apps voor liefst zeven verschillende mobiele platformen.

PhoneGap en andere diensten

PhoneGap is niet de enige dienst die webcode kan omzetten naar apps. Andere bekende namen zijn bijvoorbeeld AppMobi (onlangs overgenomen door Intel) en Sencha Touch. PhoneGap kunt u op twee manieren gebruiken.

  • Ten eerste kunt u PhoneGap downloaden (het is immers open source) en per platform zelf de juiste versie installeren. Zo compileert u apps op uw eigen pc of Mac. Hiermee hebt u de volledige controle over elk platform, maar het kost wel tijd en moeite om dit goed te doorgronden.
  • De andere manier is de cloudgebaseerde service gebruiken. U maakt de app, test hem in de browser en als u tevreden bent upload u een zipbestand naar PhoneGap Build. Dan wordt uw code op de servers van Adobe naar een app omgezet. Na enkele ogenblikken (meestal binnen één a twee minuten) kunt u een kant-en-klare app downloaden. Dit is de route die we in dit artikel bewandelen.

PhoneGap-workflow

Hybride apps

Het soort app dat PhoneGap maakt staat ook wel bekend onder de noemer hybride apps. Een gemeenschappelijk kenmerk van elk mobiel platform is namelijk dat ze het mogelijk maken binnen een app een mini-browservenster te openen. Hier maakt PhoneGap handig gebruik van door per platform een lege kapstok-app te maken en hierin direct het browservenster te openen. Binnen deze browser draait vervolgens uw (HTML-, CSS- en JavaScript-)code. PhoneGap zorgt voor de koppeling van uw code met de native bibliotheken van het besturingssysteem. Op die manier kunt u in uw app ook gebruik maken van systeembronnen op het mobiele apparaat, zoals de camera, de GPS-sensor, de contactenlijst en meer. Alle beschikbare onderdelen worden uitgebreid en met codevoorbeelden beschreven in de PhoneGap API. Omdat u geen code schrijft die rechtstreeks het besturingssysteem aanspreekt (native code), maar de PhoneGap-omweg neemt, spreken we van hybride apps.

Code structureren en schrijven

Laten we van start gaan en PhoneGap Build verkennen via een eenvoudige app. De structuur van een PhoneGap-app ligt voor een deel vast.

  1. Maak eerst een map www, bijvoorbeeld op het bureaublad. Dit is het startpunt.
  2. Open uw favoriete editor (Dreamweaver, Eclipse, Visual Studio of Kladblok) en maak het bestand index.html.
  3. Sla het op in de map www. Dit zijn de enige twee vereisten, het zijn de punten (hooks) die PhoneGap herkent en waaraan de rest van de app wordt gekoppeld. In de overige bestandsnamen, mappen en locaties voor scripts, afbeeldingen en meer bent u volkomen vrij.
  4. Neem de code over zoals in de afbeelding staat (of download de voorbeeldcode bij dit artikel).

Figuur 1 toont de code voor een minimale PhoneGap-app.

phonegap_01_correct

Het enige dat in deze HTML-pagina opvalt, is het attribuut onload=”onLoad();” in de tag <body> en de lege <div> met id=”divResult”.

Op regel 10 en op regel 13 staan de JavaScriptfuncties die worden uitgevoerd op het moment dat de pagina wordt geladen en het apparaat (device) gereed is. De standaardnaam hiervoor in PhoneGap is OnDeviceReady(). In deze functie wordt een tekst in divResult geplaatst en wordt een alert-venstertje getoond waarin is te zien dat PhoneGap goed werkt.

We doen op dit moment nog niets aan mooie opmaak of foutcontrole, iets wat u in een echte app uiteraard wel zult doen. Let er verder op dat op regel 8 een verwijzing naar <script src="phonegap.js"></script> staat. U hoeft dit bestand echter niet zelf te plaatsen. Het wordt door PhoneGap Build dynamisch ingevoegd.

Uploaden

Toegegeven, het stelt nog niet veel voor, maar we kunnen de code nu omzetten naar een app en testen. Maak een zip-bestand van de code die u tot nu toe hebt: index.html in de map \www. Ga dan naar https://build.phonegap.com/ en meldt u aan met een Adobe ID. Als u dit nog niet hebt, registreer dan een nieuwe account.

Figuur 2 - PhoneGap Build

  1. Als u bent ingelogd bij PhoneGap Build, klik dan rechtsboven +new app.
  2. Kies Upload a zip file en blader naar het zipbestand dat u zojuist hebt gemaakt. Zodra het bestand is verzonden kunt u de gegevens invullen.
  3. Wij kiezen nu als naam Mijn demo-app en type een korte beschrijving. De overige opties mogen op dit moment uitgeschakeld blijven.
  4. Klikt tot slot op Ready to build. Dit proces is ook te zien in figuur 3.

Figuur 3 - PhoneGap app builden

Build en download

Uw code wordt nu bij PhoneGap Build omgezet naar een app. Dit kost hooguit enkele minuten. Er zijn vervolgens twee manieren om de app te downloaden en te installeren (figuur 4). De eerste manier is om onder de appnaam te klikken op de blauwe knop van het betreffende platform. U download dan een .apk-bestand voor Android, een .ipa-bestand voor iOS, een .xap-bestand voor Windows Phone, enzovoort. De app kunt u vervolgens naar uw telefoon kopiëren, ook weer volgens de regels van het betreffende platform. Voor Android betekent dit bijvoorbeeld dat u het bestand via USB kunt kopiëren en openen. Voor iOS zult u het bestand naar iTunes moeten slepen en dan uw iPhone synchroniseren, want dit is nu eenmaal de wijze waarop Apple werkt. Maar de tweede manier is waarschijnlijk veel eenvoudiger: scan de QR-code die PhoneGap toont, en de app wordt automatisch gedownload.

Figuur 4 - PhoneGap app downloaden

Geen app voor iOS?

U zult zien dat de knoppen voor Android en andere platforms al snel blauw worden, het teken dat u de app kunt downloaden. Voor iOS gaat dit echter niet op. De knop blijft rood. Hiervoor zult u eerst uw developerscertificaat en een provisioning profile moeten uploaden naar PhoneGap Build. Pas dan kan de app voor iOS met dit certificaat worden ondertekend en gecompileerd. Dit is (helaas) een omslachtig proces dat verplicht is gesteld door Apple als u apps wilt ontwikkelen voor iOS. Meer informatie over het signeren van iOS-apps vindt u bij PhoneGap Build op http://build.phonegap.com/docs/ios-builds en bij Apple op https://developer.apple.com/programs/ios/.

Installeren

We gaan er zoals gezegd van uit dat u de demo-app installeert op een Android-telefoon. Stel eerst in dat ook apps uit andere bronnen dan de Google Play Store mogen worden geïnstalleerd. Dit gaat via Instellingen, Toepassingen, Onbekende bronnen (figuur 5). Daarna kunt u uw QR-scanner richten op de QR-code op het scherm en de applicatie downloaden en installeren. Bij het installeren worden de benodigde machtigingen voor de app getoond, zie figuur 6. Deze kunt u eventueel zelf nauwkeurig instellen via een optioneel config.xml-bestand. Meer hierover leest u in de documentatie van PhoneGap Build. Klik op Installeren en daarna op Openen om de app te starten.

Stel op uw telefoon in dat toepassingen uit andere bronnen geïnstalleerd mogen worden.

Figuur 5 - Android telefoon instellen

De basisinstelling is dat de app om alle machtigingen vraagt. Via config.xml kunt u dit desgewenst finetunen.

Figuur 6 - Machtigingen voor Android app

En zo draait de eerste versie van onze app op de telefoon.

Figuur 7 - Eenvoudige PhoneGap app op telefoon

Google Maps integreren

Nu u weet dat de basisapp goed werkt, kunt u de code naar believen uitbreiden. Als voorbeeld voegen we een kaart toe die werkt met Google Maps.

  1. In index.html plaatsen we een koppeling <a href="maps.html">Toon kaart</a> . Deze verwijst naar een nieuwe pagina maps.html.
  2. Een voorbeeld van de code staat in figuur 8.
  3. In de commentaarregels wordt uitgelegd hoe de code werkt. Belangrijk is uiteraard dat de juiste bibliotheken voor jQuery en Google Maps worden ingevoegd.
  4. U kunt nu het zipbestand bijwerken en daarna in PhoneGap Build de knop Update code gebruiken. Er wordt een nieuwe versie van de app gemaakt die u weer kunt downloaden en testen.

Figuur 8 - Voorbeeldcode van Google Maps met PhoneGap

Finetuning van de app

Klik in het hoofdscherm van PhoneGap Build op de naam van uw app om een venster met detailgegevens te openen. Hier kunt u op verschillende tabbladen bijvoorbeeld het versienummer en de naam van uw app aanpassen, eigen pictogrammen uploaden en meer. Dit is ook de plek waar u uw app kunt verwijderen als u helemaal opnieuw wilt beginnen.

Geschikte typen PhoneGap-apps

Met PhoneGap maakt u snel en eenvoudig apps, maar dat wil niet zeggen dat dit het aanbevolen platform voor alle typen apps is. Als u apps maakt die intensief de hardware aanspreken zoals games of audio- en videobewerking, dan bent u waarschijnlijk beter af met een oplossing als Corona SDK. Door de hybride laag van PhoneGap levert u altijd iets in op de performance. PhoneGap is vooral geschikt voor informatieve- en business apps en is bijvoorbeeld erg goed in het werken met AJAX- en JSON-data. Dit betekent trouwens niet dat uw app er saai uit hoeft te zien. Met aanvullende bibliotheken als Twitter Bootstrap, jQuery en/of jQuery Mobile kunt u apps een fantastische look en feel geven.

Conclusie

Met de online dienst PhoneGap Build maakt u in een handomdraai apps voor tal van mobiele platformen op basis van de webtechnieken HTML, CSS en JavaScript. De apps kunt u makkelijk downloaden en op een telefoon installeren. Bekijk bij PhoneGap Build vooral de optie Docs in het hoofdmenu om meer te leren over de manier waarop u apps via PhoneGap Build kunt finetunen. Het daadwerkelijk publiceren van (vooral Apple) apps in de app store heeft wat meer voeten in de aarde, maar hiervoor vind u bij Apple, Google en Microsoft veel aanvullende informatie.

<shameless plug>
Meer weten over PhoneGap of een van de andere technieken die in dit artikel werden besproken? Ik verzorg hierin trainingen of help uw organisatie bij het beslissen welk type apps (web-, hybride-, native-) in uw situatie de beste keuze zijn. Neem contact op!
</shameless plug>

-- Peter Kassenaar
16-mei-2013

29oktober

Kennismaken met PhoneGap – introductie

cordova_256Eerder schreef ik in dit blog een artikel over Mobiele apps zonder programmeren? en een van de conclusies was dat het met de huidige online tools zeker mogelijk is een basisapp voor gebruik op iOS (Apple) of Android (Samsung, HTC, vele anderen) te maken. Het betreft dan altijd wel een app die niet veel meer kan dan een serie statische pagina’s en afbeeldingen tonen. In veel gevallen is dit onvoldoende.

Maar het volledig zelf programmeren van een app in de programmeertaal van het betreffende platform brengt een lange leercurve met zich mee. Zelfs ervaren Java-programmeurs vinden het lastig om de overstap van ‘gewoon’ Java naar Android-Java en alle daarbij horende bibliotheken en controls te maken. Ook het (leren) programmeren in Objective C en/of C# is niet voor iedereen weggelegd. Dit zijn de tools en programmeertalen waarmee apps worden geschreven:

  • iOS – je programmeert in Objective C, een afgeleide van C.
  • Android – je programmeert in Java.
  • Windows Phone – je programmeert in C#.

Als je uitgebreide achtergrondkennis in deze talen hebt, gefeliciteerd! Start Xcode, Eclipse of Visual Studio en begin met programmeren. Maar zelfs als je één van deze talen kent, dan ben je vaak nog geen expert in de andere. Als je zodoende een iOS-applicatie in elkaar kunt sleutelen, betekent dit nog niet dat je dezelfde app ook voor Android kunt maken. Idem dito voor het Windows Phone-platform.

Want dat is een algemeen kenmerk. Een app die je voor platform A hebt gemaakt, draait niet op platform B of C. En omgekeerd. Je moet je app dus letterlijk drie keer bouwen, als je hem op de drie populairste platforms van dit moment wilt aanbieden.

Hybride apps

Sinds een jaar of twee is het mogelijk om via externe bibliotheken zogenoemde hybride apps te bouwen. Dit zijn apps die weliswaar zijn gecompileerd voor het betreffende doelplatform, maar op de achtergrond gebruik maken van een kale kapstok-app en hierin een intern browservenster openen. In de browser-binnen-de-app draait dan je complete applicatie.

Het kenmerk is dan ook dat dit type apps geheel is gebouwd met de webstandaarden HTML, CSS en JavaScript. Opeens hoef je geen platformdeveloper meer te zijn om apps te maken, maar kun je als webdeveloper ook apps maken!

Redenen voor hybride apps

Er zijn verschillende redenen om op deze manier apps te bouwen (nog afgezien van de reden ‘ik ken wel HTML maar geen Objective C of Java). Ik noem er enkele:

  • Kostenbeheersing – door een hybride app te bouwen kun je vaak één codebase gebruiken voor je app en hoef je de app niet drie keer (of vaker) opnieuw te bouwen voor elk platform dat je wilt ondersteunen. Lichte aanpassingen per platform blijven vaak echter noodzakelijk.
  • Native apparaatsensors en API’s  – Hybride bibliotheken geven de webdeveloper toegang tot de native apparaatsensors zoals het kompas, de camera, GPS-informatie, de contactenlijst op de telefoon en meer. Voorheen was dit alleen voorbehouden aan native apps. Met een bibliotheek kun je nu ook vanuit JavaScript bijvoorbeeld een fotobeheer app schrijven. Dit geldt zowel voor telefoons als voor tablets (iPad en andere).
  • Plaatsing in de app store – last but not least, kunnen hybride apps net als ‘gewone’ apps worden aangeboden voor plaatsing in de Apple App Store, Google Play (voorheen Android Market) of de Windows Store. Hiervoor is weliswaar een (betaald) developeraccount nodig, maar daarna kun je toch redelijk eenvoudig met voldoende kennis van HTML, CSS en JavaScript je eigen apps in de diverse app stores publiceren.

Nadelen?

Natuurlijk is het niet allemaal goud wat er blinkt. Er zijn ook enkele nadelen verbonden aan hybride apps. Zo is de performance vaak minder dan bij native apps die rechtstreeks in de programmeertaal voor het betreffende platform zijn geschreven (je wilt echt geen 3D-game schrijven als hybride app!). Ook zul je qua look-en-feel soms wat moeten inleveren. iOS-terugknoppen zien er nu eenmaal anders uit dan Android-terugknoppen. Je moet sneller terugvallen op een grootste gemene deler. Het debuggen van hybride apps is lastiger, omdat je werkt binnen een browser binnen een native app (ofschoon tools als Weinre hier langzamerhand verbetering in brengen).

Enter PhoneGap

Er zijn inmiddels diverse bibliotheken beschikbaar waarmee je op deze wijze hybride apps kunt maken. Een aantal werken volledig cloudgebaseerd (je upload de HTML-broncode en krijgt een app terug), een aantal andere kun je op je eigen pc of Mac installeren om zo de app-ontwikkeling volledig lokaal te kunnen doen. Enkele bekende namen zijn onder meer AppMobi, Appcelerator, VSNomad en RhoMobile.

De bekendste en meest uitgebreide is echter Cordova, of PhoneGap (over die naamsverandering is veel geschreven en ze zijn er kennelijk nog steeds niet helemaal uit wanneer welke term nu gebruikt wordt). Dit is een project dat oorspronkelijk door het bedrijf Nitobi is gestart, maar in de zomer van 2011 is overgenomen door Adobe.

Door de overname is de naamsbekendheid enorm gegroeid en ook de (financiële) mogelijkheden zijn flink toegenomen. De cloudservice PhoneGap Build is zelfs opgenomen in de laatste versies van onder meer Dreamweaver CS6 en andere producten in de CS6-suite.

PhoneGap is een actief open sourceproject. Ook na de overname door Adobe is PhoneGap open source gebleven, hetgeen betekent dat je de bibliotheek gratis kunt downloaden en gebruiken. Ook voor commerciële applicaties. Er zijn talloze mensen mee bezig en de mogelijkheden worden zo ongeveer dagelijks uitgebreid.

Sinds april 2011 heb ik vele PhoneGap-cursussen gegeven, waarbij we de cursus soms begonnen met PhoneGap 1.2 om enkele weken later te eindigen met PhoneGap 1.5! Dat zijn dynamische weken, dat kan ik je wel vertellen ;-). Op het moment van schrijven van dit artikel is PhoneGap 2.1.0 de meest recente versie en staat 2.2.0 in de steigers.

De werking van PhoneGap laat zich als volgt samenvatten:

phonegap_flow

Twee manieren om PhoneGap te gebruiken

In alle gevallen bestaat de basis van een PhoneGap-app uit HTML, CSS en JavaScript. Dit mag eventueel in combinatie met een framework als jQuery Mobile, maar verplicht is dit zeker niet. Je kunt ook je eigen app volledig met de hand schrijven en de opmaak helemaal zelf verzorgen met CSS en JavaScript.

Als je app in HTML gereed is (dit kun je eenvoudig testen in een browser), dan kun je kiezen uit twee manieren om hem te laten ‘phonegappen’.

  • PhoneGap Build – maak een account bij Adobe en upload je app naar https://build.phonegap.com/ . Als je al eerder software bij Adobe hebt gedownload (ook trial-versies) dan heb je al een Adobe ID, bestaande uit je e-mailadres en een wachtwoord. Als je dat nog niet hebt, kun je op PhoneGap Build ter plekke een Adobe ID maken. Je upload dan je app als zip-bestand en enkele ogenblikken later kun je een app downloaden. Op Android-apparaten is die app direct te installeren. Op Apple-apparaten (iPhone, iPad) heeft het wat meer voeten in de aarde. Dan moet je eerst bij Apple een developer account aanmaken en een developer key downloaden en exporteren naar een .p12-bestand. Dit kun je vervolgens gebruiken om je app bij PhoneGap Build te signeren. Dat werkt allemaal ook, maar het is een stuk ingewikkelder dan bij niet-Apple-apparaten.

    Een demo-app via PhoneGap build ziet er dan bijvoorbeeld zo uit:
    pg_build2


    Klik op een van de knoppen om de app voor het betreffende platform te downloaden, of scan de QR-code met je telefoon. Hij wordt dan direct gedownload en geïnstalleerd als het platform dit toestaat. Particulieren kunnen tot drie apps per dag gratis publiceren via PhoneGap Build. Voor veeleisende gebruikers zijn er verschillende abonnementsvormen beschikbaar.
  • Zelf installeren – je kunt een zip-bestand downloaden op www.phonegap.com en dit uitpakken. Hierin staan per platform de verschillende bibliotheken. Let op: je hebt dan weliswaar maar één codebase nodig (met jouw app met HTML, CSS en JavaScript), maar je moet wel PhoneGap per platform installeren.

    Je moet dus zelf Xcode installeren (jazeker, op een Mac) om iOS apps te maken; je moet de Java SDK en Eclipse installeren om Android-apps te maken en je moet het .NET-framework en Visual Studio Express installeren om Windows Phone-apps te maken. Ook deze requirements zijn allemaal beschikbaar als gratis downloads, maar het kost wel meer tijd en uitzoekwerk. Je krijgt er echter een stuk flexibiliteit en controle voor terug.
    install-08

    PhoneGap heeft per platform uitgebreide Getting Started Guides om je met deze eerste stappen op weg te helpen.

Maar als je de installatiestappen eenmaal hebt genomen, is het relatief eenvoudig om je HTML-app om te zetten naar een hybride app voor het betreffende platform. De volgende afbeelding toont een voorbeeld van een speelkaartenapp die ik momenteel aan het maken ben en in Xcode met PhoneGap wordt gecompileerd naar een hybride iOS-app (binnenkort in de App Store! :-).

xcode_phonegap

Mocht je nog vragen hebben, dan kun je altijd contact opnemen.

Of je schrijft je bijvoorbeeld in voor een PhoneGap-cursus. Dan leer je korte tijd de belangrijkste kenmerken van PhoneGap en ga je zelf aan de slag met het installeren van PhoneGap en het maken van eigen apps via PhoneGap Build en met verschillende platforms.

 

Peter Kassenaar
-- 29 oktober 2012