PhoneGapBouw cross-platform mobiele apps met HTML5, CSS3 en JavaScript

Dion Olsthoorn

Wat is PhoneGap?• …open source platform• …bouw cross-platform mobiele

apps• …met HTML, CSS en JavaScript• …werkt met Visual Studio, Xcode,

Eclipse

Wat doet PhoneGap?1. Het start jouw HTML+CSS+JS als native

app. Voor iOS, Android, BB, WP, Windows 8

2. Het biedt toegang tot native functies d.m.v. een cross-platform JavaScript API

?

Dit is je user interface:een web browser instantie.

100% hoogte100% breedte

JavaScript

Native

… Whatever.js

Web browser op je mobiel

Native mobiele functies

PhoneGap

PhoneGap of Cordova?• PhoneGap is een distributie van Cordova• Timeline:– 2008: Nitobi maakt PhoneGap (open source)–mid 2011: PhoneGap 1.0– eind 2011: Adobe koopt Nitobi– PhoneGap verhuist naar Apache SF

en krijgt nieuwe naam:

PhoneGap JavaScript API• Sensors– GPS, accelerometer, Kompas, Camera, Netwerk

• Data– Contacts, Media, Filesysteem, Notificaties,

Storage

• Events– deviceready, online, offline, volumedown, etc.

Native App - .xap .apk. ipa

Cordova engine (+ toegang native functies)

Mobiele web-browser

cordova.js?

PhoneGap onder de motorkap

PhoneGapis een hack!

• Windows Phone– JavaScript:

window.external.notify– Browser object:

ScriptNotify

• iOS– JavaScript:

“gap://class/method/args”– UIWebView vangt dit af

• Android– Http callback server

PhoneGap Plugins• BarcodeScanner• Text-to-Speech• System Notifications• Live Tiles (Windows Phone only)• …en nog veel meer!

Bouw je eigen PhoneGap PluginAanroep vanuit

JavaScriptWindows Phone .NET

Is PhoneGap de “Silver Bullet”?

Dezelfde HTML op alle platformen

Slechte reputatie PhoneGap?1. UI is traag; niet responsive2. Eenheidsworst; geen native UI3. Niet de “proven way” om apps te

bouwen4. Nauwelijks aansprekende apps

Mobiele browser apps niet snappy?

• Click event in mobiele browser..– …heeft 300ms vertraging– …is nodig voor bijv. dubbel-klik zoom

• Windows Phone– CSS: “-ms-touch-action: none;”

• iOS en Android– fastclick.js (“touchup” event i.p.v. “click”)

Native UI’s “rock”

NFC? Augmented Reality? Go Native!

App

PhoneGap

Debugging• Weinre– debug.phonegap.com

• Ripple– emulate.phonegap.com

• console.log(‘…’);

PhoneGap Build

Wanneer _wel_ PhoneGap?• Eenvoudige apps.

“Native” gevoel niet het belangrijkste.

• Gebruik je HTML en JavaScript kennis

• Deploy naar meerdere platformen• App store en offline data

Wanneer _niet_ PhoneGap?• Native look & feel nodig (bijv.

panorama)• Complexe UI en API’s• Maximale snelheid nodig (games!)• Als je target naar één platform

Start links• http://phonegap.com/developer• http://jquerymobile.com – NuGet JQueryMobile for Windows

Phone

http://www.macaw.nl/werkenbijmacaw/vacatures