Mobile App Development met PhoneGap

Mobile app Development zonder programmeer kennis?  Momenteel is het zeker mogelijk om met de beschikbare online tools een basis app voor gebruik op iOS (Apple) of Android (Samsung, HTC, vele anderen) te ontwikkelen. Het betreft dan echter altijd een app die niet veel meer kan dan een serie statische pagina’s en afbeeldingen tonen. In veel gevallen is dit onvoldoende.

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

Mobile App Development – 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 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 van hybride apps

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

App Development met 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 enRhoMobile.

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.

De werking van PhoneGap laat zich als volgt samenvatten:

PhoneGap: Twee manieren om de tool 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’.

1. 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:

Je dient vervolgens op een van de knoppen te klikken om de app voor het betreffende platform te downloaden, of de QR-code te scannen met je telefoon. De App 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.

2 .PhoneGap 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.

PhoneGap heeft per platform uitgebreide Getting Started Guides om je met deze eerste stappen op weg te helpen.  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 momenteel gemaakt wordt en in Xcode met PhoneGap wordt gecompileerd naar een hybride iOS-app.

Wil je zelf met behulp van PhoneGap Mobile Apps gaan ontwikkelen? Schrijf je dan in voor de onze PhoneGap-cursus.  Hier 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.

Auteur:
Peter Kassenaar
Freelance Trainer bij Vijfhart IT Opleidingen