Phonegap maakt het mogelijk om super eenvoudig een app te maken met HTML, CSS en Javascript. Dit voor verschillende mobiele platformen als onder andere Android, iOS, Blackberry OS en Windows Phone. Als je dit voor het eerste hoort zal je denken dat het géén native app is en dus géén functionaliteiten (camera, bestandssysteem, notificaties, enz) kan gebruiken van de telefoon (ik houd het in dit artikel op telefoon, maar hiermee bedoel ik natuurlijk ook tablet). Dit kan juist wél! Om eerst de verschillen even uit te leggen tussen navtive-, web-, en hybride apps:
Soorten apps
Native app
Een platform afhankelijk applicatie. Niet bij elk platform kan je in eenzelfde programmeer taal ontwikkelen en dus zal je voor elk platform een totaal nieuwe app moeten maken. Daarin tegen kan je met een native app wél alle mogelijkheden van een telefoon benutten en is er géén internet noodzakelijk om te functioneren.
Web app
Simpel gezegd; een website in een app jasje, alsof het een echte app is. Een mobiele website wordt ook wel eens een web app genoemd. Nadeel is dat géén functionaliteiten van de telefoon aangesproken kunnen worden en dat wanneer er geen internet is deze niet functioneert. (in een ander artikel heb een methode beschreven om een website wél offline beschikbaar te maken: Website offline beschikbaar maken met een submit fallback)
Hybride app
Een combinatie van een native app en een web app waarbij dus vrijwel alles mogelijk is. Nadeel is dat er ook twee omgevingen bijgehouden dienen te worden, zowel het native als het web gedeelte.
Wat is Phonegap?
Phonegap is een distributie van Apache Cordova. Phonegap maakt het ten opzichte van Cordova enkel wat makkelijker met Phonegap Build en “hydration“. Met Phonegap een app maken behoort tot een hybride app. Phonegap ofwel Cordova is dan het native gedeelte. Dit zorgt ervoor dat via Javascript functionaliteiten van de telefoon aangesproken kunnen worden. Benieuwd welke apps met Phonegap gemaakt zijn? Kijk eens hier.
Wat is Phonegap Build?
Dit maakt het mogelijk om je HTML, CSS en Javascript in te voeren en vervolgens zorgt de Build service ervoor dat er apps uit komen. In het geval van Android dus een apk bestand. Ter verduidelijking:
Wat is Hydration?
Tijdens het testen van een app, in het geval van Android; dien je elke keer een apk op je telefoon te zetten en vervolgens de al aanwezige cq oude app te updaten. Hydration maakt het mogelijk om updates te “pushen”. Door de app opnieuw te starten wordt automatisch de nieuwe versie gedownload en gebruikt. Eventueel kan je ook met Ripple werken, dit is een emulator. Om de emulator te gebruiken dient wel je app “te draaien” ofwel lokaal middels bijvoorbeeld XAMPP of simpelweg bij je hosting partij. Van Ripple is ook een extensie beschikbaar voor Google Chrome.
Eindelijk, beginnen!
Eerst maar een account aanmaken bij Phonegap Build. Hierna downloaden we phonegap-start. Hierin zitten alle basis elementen voor een app. Dit is een soort van boilerplate als ook voor html beschikbaar is: HTML5Boilerplate. Na het downloaden en uitpakken van phonegap-start; pakken we alles gelijk weer in, maar enkel de bestanden in de www map. Terug naar de browser en de Phonegap Build website waar we een nieuwe app gaan maken. Hierbij krijg je de keuze om een open-source app te maken waarbij je de code op Github beschikbaar stelt. De andere optie is een “private” app, eventueel ook via Github te regelen. Wij kiezen voor zelf een zip bestand uploaden waarbij we het zojuist gemaakte zip bestand kiezen.
Na de upload kunnen we de eventueel debugging en hydration aanzetten. Door vervolgens op “ready to build” te klikken worden de apps voor de beschikbare platformen gemaakt! Zodra gereed krijgen de iconen van de platformen kleur en kunnen deze aangeklikt worden om de app te downloaden. In het geval van Android dus het apk bestand. Dit bestand kan je vervolgens op je telefoon zetten, makkelijker is om het QR code te scannen.
App aanpassen
Hartstikke leuk zo’n app die enkel “Device is Ready” zegt maar het kan niks! Om de app aan te passen beginnen we bij het config.xml bestand. Hierin staat alle informatie over de app als de naam, omschrijving, permissies en iconen. Pas dit bestand naar je wensen aan en mochten er onduidelijkheden zijn, lees de documentatie hierover. Voordat je alle gewenste formaten iconen gaat maken voor je app, denk even na voor welke platformen je de app echt gaat gebruiken. Niet alles in het config.xml bestand is namelijk verplicht! Hierna kan je met index.html aan de gang gaan. Gebruik bijvoorbeeld jQuery Mobile om je app er grafisch goed uit te laten zien. Eventueel kan je meerdere html bestanden maken mocht je app uit meerdere “pagina’s” bestaan. Gebruik alles wat je in huis hebt om een mooie app te maken middels HTML, CSS en Javascript. Om te testen kan je zoals eerder aangegeven Ripple gebruiken of je zipt alles in de www map nogmaals en upload dit via de “Update code” knop op de website van Phonegap Build.
Telefoon functies aanspreken
Ga ik nog een keer; hartstikke mooi die app maar ik wil de functies van een telefoon gebruiken! Alle informatie hierover kan je in de documentatie van Phonegap vinden. Ik zal in dit artikel de camera aanspreken en een foto maken. Wat de permissies betreft in de documentatie, dit kan je overslaan gezien Phonegap Build dit regelt in de config.xml. Om de camera permissie te krijgen dien je de volgende regel toe te voegen in config.xml:
<feature name="http://api.phonegap.com/1.0/camera"/>
Zie hiervoor “PhoneGap API Features” in de config.xml documentatie.
Om een foto te maken hebben we een knop nodig, na index.html wat opgeschoond te hebben zou dit er ongeveer zo uit moeten zien:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Foto maken</title> </head> <body> <div class="app"> <h1>Foto!</h1> <button id="maak-foto">Maken</button> </div> <script type="text/javascript" src="phonegap.js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html>
Zoals je ziet worden hier twee javascript bestanden aangesproken. Wat je wellicht is opgevallen is dat phonegap.js niet aanwezig is in de map! Dit klopt, deze wordt middels de Phonegap Build toegevoegd. De vermelding dan ook gewoon laten staan om de mogelijkheden van de telefoon aan te spreken. Door naar het index.js bestand! Middels Javascript kan je uiteindelijk de functies aanspreken, bij websites maak ik graag gebruik van jQuery, laten we dat dan hier ook doen! Ga naar de website van jQuery, download de laatste versie en sla deze op in de “js” map. Vervolgens moet hier nog wel even naar gelinkt worden vanuit het index.html bestand. Voeg na het phonegap.js regel de volgende regel toe:
<script type="text/javascript" src="js/jquery.js"></script>
Vanuit een CDN laden kan natuurlijk ook, maar om de app ook zonder internet te laten functioneren is dit nu geen goed idee. Na ook het index.js bestand wat opgeschoond te hebben en de camera documentatie doorgespit te hebben, het volgende resultaat:
// Anonieme functie openen
(function()
{
// Wachten tot het apparaat klaar is
document.addEventListener('deviceready', onDeviceReady, false);
// Het apparaat is klaar
function onDeviceReady()
{
// Telefoon functies kunnen pas aangesproken worden
// wanneer het apparaat klaar is. Ofwel wanneer deze
// functie aangesproken wordt kunnen deze pas gebruikt
// worden. Aangezien de gebruiker hoogst waarschijnlijk
// niet eerder op de foto maken knop klikt dan dat het
// apparaat klaar is, maak ik hier nu geen gebruik van.
}
// Foto nemen is gelukt
function cameraSuccess(imageData)
{
// Na de foto maken knop de afbeelding weergeven
$('#maak-foto').after('<img src="' + "data:image/jpeg;base64," + imageData + '">');
}
// Foto nemen is mislukt
function cameraError(message)
{
// Foutmelding weergeven
alert('Er ging iets fout! ' + message);
}
// Op de foto maken knop geklikt
$('#maak-foto').click(function()
{
// Eventueel eerder gemaakte foto verwijderen
$('img').remove();
// Foto maken
navigator.camera.getPicture( cameraSuccess, cameraError, {
quality: 50, // Foto kwaliteit
destinationType: Camera.DestinationType.DATA_URL // Base64 gecodeerde afbeelding als resultaat
});
});
// Functie direct uitvoeren
})();
Dit kan natuurlijk aan alle kanten uitgebreid worden. Van netjes vormgeven tot de afbeelding middels Ajax naar een server versturen.
Schoot me net te binnen en klonk wel leuk: App? Use Phonegap!
Updates
11-05-2013 – Inmiddels is er een cursus beschikbaar bij Tutsplus, erg leerzaam: https://tutsplus.com/course/phone-gap-essentials/
