mobile development with phonegap & html5
TRANSCRIPT
![Page 1: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/1.jpg)
Mobile Development with PhoneGap & HTML5
Kuro Hsu @ JS Carnival 2012
2012/10/27
![Page 2: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/2.jpg)
• A Front-End Engineer.
• Admin of PhoneGap TW Community Page - http://www.facebook.com/PhoneGapTW
Kuro Hsu (a.k.a kurotanshi)
![Page 3: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/3.jpg)
Why ?
![Page 4: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/4.jpg)
![Page 5: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/5.jpg)
![Page 6: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/6.jpg)
Mobile is Growing
![Page 7: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/7.jpg)
Mobile development is mess.
Android Java
BlackBerry Java
iOS Objective-C
Palm OS C, C++, Pascal
Symbian C++
Windows Phone C#
![Page 8: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/8.jpg)
![Page 9: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/9.jpg)
![Page 10: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/10.jpg)
http://mobilehtml5.org/
![Page 11: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/11.jpg)
Build Mobile Web with HTML5
• Setup the Viewport
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> @viewport { width: device-width; zoom: 1.0; maximum-scale: 1.0; user-zoom: fixed; /* zoom = 1, fixed = 0 */ }
![Page 12: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/12.jpg)
![Page 13: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/13.jpg)
Build Mobile Web with HTML5
• Mobile CSS Reset
http://www.vcarrer.com/2010/11/css-mobile-reset.html
• CSS Features -webkit-text-size-adjust: none;
-webkit-tap-highlight-color: transparent; position: fixed; /* iOS5 & Android 2.2+ */ overflow: scroll; /* iOS5 */ ……, and more.
![Page 14: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/14.jpg)
• Media Queries
@media only screen and (max-width: 480px) { /* small screen styles */ } @media only screen and (min-width: 481px) { /* large screen styles */ }
Cross Platform
![Page 15: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/15.jpg)
http://mediaqueri.es
![Page 16: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/16.jpg)
• User agent Detection
Cross Platform
var isIphone = !!(navigator.userAgent.match("iPhone")); if(isIphone){ // do something... }
![Page 17: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/17.jpg)
• Feature Detection
Cross Platform
if( !!window.WebSocket ){ var socket = new WebSocket('ws://sample.com:111/so'); // do something... } else{ var fakeSocket = new XmlHttpRequest(); // do something... }
![Page 18: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/18.jpg)
• Events - Orientation:
window.addEventListener('orientationchange', chkOrientation, false); function chkOrientation(ev){
var orient; if (window.orientation) { orient = (Math.abs(window.orientation) === 90) ? 'landscape' : 'portrait'; }
}
Build Mobile Web with HTML5
![Page 19: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/19.jpg)
• Events - Touch events:
window.addEventListener("touchstart", touchEvents, false); window.addEventListener("touchmove", touchEvents, false); window.addEventListener("touchend", touchEvents, false); window.addEventListener("touchcancel", touchEvents, false); function touchEvents(ev){ // do something... }
Build Mobile Web with HTML5
![Page 20: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/20.jpg)
• Events – Gesture events : window.addEventListener("gesturestart", gstEvents, false); window.addEventListener("gestureend", gstEvents, false); window.addEventListener("gesturechange", gstEvents, false); function gstEvents(ev){ // do something... }
Build Mobile Web with HTML5
![Page 21: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/21.jpg)
• Events - DeviceMotion:
window.addEventListener("devicemotion", accel, false);
function accel(ev){ // ev.acceleration.x/y/z; // do something… }
Build Mobile Web with HTML5
![Page 22: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/22.jpg)
• Geolocation API
if(window.navigator.geolocation){ var geo = navigatoe.geolocation(); geo.getCurrentPosition(getPosSuccess); } function getPosSuccess(pos){ var lat = pos.coords.latitude; var lon = pos.coords.longitude; }
window.navigator.geolocation.getCurrentPosition( success, [failure, [options]] );
Build Mobile Web with HTML5
![Page 23: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/23.jpg)
• LocalStorage / SessionStorage
localStorage["bar"] = "hello world!"; var foo = localStorage.getItem("bar"); localStorage.setItem("bar", "Hello JavaScript!"); localStorage.removeItem("bar"); localStorage.clear();
Build Mobile Web with HTML5
![Page 24: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/24.jpg)
Web vs. Native
Web Native
Dev Cost Reasonable Expensive
Dev Time Short Long
Portability High None
Performance Fast Very Fast
Native Functionality No All
App Store Distribution No Yes
Extensible No Yes
![Page 25: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/25.jpg)
Web vs. Hybrid vs. Native
Web Hybrid Native
Dev Cost Reasonable Reasonable Expensive
Dev Time Short Short Long
Portability High High None
Performance Fast Fast Very Fast
Native Functionality No Yes All
App Store Distribution No Yes Yes
Extensible No Yes Yes
![Page 26: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/26.jpg)
PhoneGap
![Page 27: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/27.jpg)
Started in 2008
iPhoneDevCamp
Working prototype with geolocation
PhoneGap
![Page 28: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/28.jpg)
PhoneGap
2008: support iPhone, Android and Blackberry 4
2009: Added Symbian and webOS support. "Rejected" by Apple.
2011: Added Windows Phone 7 support. Adobe officially announced the acquisition of Nitobi Software on October 4. In process to becoming a project under the Apache Software Foundation. And New Name…
![Page 29: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/29.jpg)
Apache Cordova
( From PhoneGap 1.5.0 )
![Page 30: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/30.jpg)
Apache Cordova
Cordova is the open source project
PhoneGap is the implementation
Like Webkit for Chrome/Safari
http://incubator.apache.org/cordova/
![Page 31: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/31.jpg)
![Page 32: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/32.jpg)
• Basically just a webkit browser with all the chrome removed, even the menu bar, and dose everything a browser does.
What is PhoneGap / Cordova ?
![Page 33: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/33.jpg)
• Basically just a webkit browser with all the chrome removed, even the menu bar, and dose everything a browser does.
What is PhoneGap / Cordova ?
![Page 34: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/34.jpg)
• PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best... HTML and JavaScript.
What is PhoneGap / Cordova ?
![Page 35: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/35.jpg)
Write Once, Run Anywhere?
So, it means...?
![Page 36: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/36.jpg)
NO
![Page 37: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/37.jpg)
Write Once, Debug Everywhere.
The Truth Is...
![Page 38: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/38.jpg)
![Page 39: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/39.jpg)
![Page 40: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/40.jpg)
Uses Platforms Native Control
iOS Android Blackberry webOS Symbian Windows Phone 7.0
WebKit 532.9
WebCore Javascript
Core
WebKit with V8
WebKit WebKit
with Piranah
WebKit S60 or Qt?
…
![Page 41: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/41.jpg)
Uses Platforms Native Control
iOS Android Blackberry webOS Symbian Windows Phone 7.0
WebKit 532.9
WebCore Javascript
Core
WebKit with V8
WebKit WebKit
with Piranah
WebKit S60 or Qt? IE7
![Page 42: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/42.jpg)
Uses Platforms Native Control
iOS Android Blackberry webOS Symbian Windows Phone 7.5
WebKit 532.9
WebCore Javascript
Core
WebKit with V8
WebKit WebKit
with Piranah
WebKit S60 or Qt? IE9
![Page 43: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/43.jpg)
Uses Platforms Native Control
iOS Android Blackberry webOS Symbian Windows Phone 7.5
WebKit 532.9
WebCore Javascript
Core
WebKit with V8
WebKit WebKit
with Piranah
WebKit S60 or Qt? IE9
![Page 44: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/44.jpg)
• 1. Write a web app using HTML5 technologies: HTML5 / CSS / JS
How does PhoneGap work?
![Page 45: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/45.jpg)
• 2. Package your web app into PhoneGap
How does PhoneGap work?
![Page 46: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/46.jpg)
• 2. Package your web app into PhoneGap
How does PhoneGap work?
![Page 47: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/47.jpg)
• 3. Deploy your Native App to multiple devices ( iOS, Android, Blackberry, WP 7..., and so on. )
How does PhoneGap work?
![Page 48: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/48.jpg)
![Page 49: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/49.jpg)
How does PhoneGap work?
![Page 50: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/50.jpg)
PhoneGap API / Plugins:
Accelerometer
Camera
Capture
Compass
Connection
Contacts
Device
Events
File
Geolocation
Media
Notification
Storage
![Page 51: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/51.jpg)
http://phonegap.com/about/feature
![Page 52: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/52.jpg)
• Custom Plugins: Terrible support across platforms, and you can make it on you own!
PhoneGap API / Plugins:
https://github.com/phonegap/phonegap-plugins
![Page 53: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/53.jpg)
• An interface to the most common set of device functionality.
• All APIs features are plugins.
• All accessible through JavaScript (PhoneGap Bridge).
PhoneGap API / Plugins:
![Page 54: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/54.jpg)
Get Started !
![Page 55: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/55.jpg)
Demo
![Page 56: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/56.jpg)
![Page 57: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/57.jpg)
Accelerometer API
function onSuccess(acceleration) { alert('Acceleration X: ' + acceleration.x + '\n' + 'Acceleration Y: ' + acceleration.y + '\n' + 'Acceleration Z: ' + acceleration.z + '\n' + 'Timestamp: ' + acceleration.timestamp + '\n'); }; function onError() { alert('onError!'); }; var watchID = navigator.accelerometer.watchAcceleration( onSuccess, onError, options);
![Page 58: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/58.jpg)
Media API
function playAudio(url) { var my_media = new Media(url, // success callback function() { console.log("playAudio(): Audio Success"); }, // error callback function(err) { console.log("playAudio(): Audio Error:" + err); }); // Play audio my_media.play(); }
![Page 59: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/59.jpg)
Custom Alert / Confirm
function showConfirm() { navigator.notification.confirm ( ‘remove user?', onConfirm, ‘Clear', ‘OK, NOOOOO!!' ); } function onConfirm(button) { if( button == '1' ){ // do something } }
![Page 60: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/60.jpg)
![Page 61: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/61.jpg)
Camera
navigator.camera.getPicture( onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL, targetWidth: 300, targetHeight: 200 });
![Page 62: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/62.jpg)
• AppLaud
– A Eclipse Plugin for PhoneGap Android.
– Bundled with PhoneGap 1.9.0
– Bundled with jQuery Mobile 1.1.0
– Support for ADT 20
(the latest release of the Android Development Tools)
http://goo.gl/lwKgX
![Page 63: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/63.jpg)
Mobile Debugging
![Page 64: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/64.jpg)
• Ripple Mobile Environment Emulator (Chrome)
Mobile Debugging
![Page 65: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/65.jpg)
• Weinre / debug.phonegap.com
Mobile Debugging
![Page 66: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/66.jpg)
PhoneGap doesn't bundle a UI framework, but they support any JS framework that works in the browser.
![Page 67: Mobile Development with PhoneGap & HTML5](https://reader034.vdocuments.mx/reader034/viewer/2022052522/554d1870b4c9052c5a8b57bc/html5/thumbnails/67.jpg)
Thanks !
Kuro Hsu
kurotanshi @ gmail.com
http://kuro.tw
http://www.plurk.com/kurotanshi
http://www.facebook.com/kurotanshi