Eerder 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:
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:
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.
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! :-).
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