bouw cross-platform mobiele apps met phonegap
DESCRIPTION
Dit zijn de slides van mijn presentatie over PhoneGap op de TechDays 2013. PhoneGap is een Open Source framework waarmee je mobiele apps kunt ontwikkelen met alleen HTML, CSS en JavaScript. Via een set van device APIs kunnen native device functies, zoals de camera of de acceleratiemeter met JavaScript worden aangestuurd. Bouw je app één keer voor alle mobiele platformen: o.a. iOS, Android, Blackberry, Windows Phone en Windows 8. In deze sessie leer je wat PhoneGap is en hoe het van binnen werkt. Daarna wordt een eenvoudige voorbeeld applicatie gebouwd die zonder aanpassingen werkt voor zowel iPhone, Android als Windows Phone.TRANSCRIPT
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