Mobile Development with PhoneGap & HTML5
-
Upload
kuro-hsu -
Category
Technology
-
view
4.680 -
download
7
Transcript of Mobile Development with PhoneGap & HTML5
Mobile Development with PhoneGap & HTML5
Kuro Hsu @ JS Carnival 2012
2012/10/27
• A Front-End Engineer.
• Admin of PhoneGap TW Community Page - http://www.facebook.com/PhoneGapTW
Kuro Hsu (a.k.a kurotanshi)
Why ?
Mobile is Growing
Mobile development is mess.
Android Java
BlackBerry Java
iOS Objective-C
Palm OS C, C++, Pascal
Symbian C++
Windows Phone C#
http://mobilehtml5.org/
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 */ }
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.
• Media Queries
@media only screen and (max-width: 480px) { /* small screen styles */ } @media only screen and (min-width: 481px) { /* large screen styles */ }
Cross Platform
http://mediaqueri.es
• User agent Detection
Cross Platform
var isIphone = !!(navigator.userAgent.match("iPhone")); if(isIphone){ // do something... }
• 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... }
• 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
• 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
• 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
• Events - DeviceMotion:
window.addEventListener("devicemotion", accel, false);
function accel(ev){ // ev.acceleration.x/y/z; // do something… }
Build Mobile Web with HTML5
• 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
• 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
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
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
PhoneGap
Started in 2008
iPhoneDevCamp
Working prototype with geolocation
PhoneGap
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…
Apache Cordova
( From PhoneGap 1.5.0 )
Apache Cordova
Cordova is the open source project
PhoneGap is the implementation
Like Webkit for Chrome/Safari
http://incubator.apache.org/cordova/
• Basically just a webkit browser with all the chrome removed, even the menu bar, and dose everything a browser does.
What is PhoneGap / Cordova ?
• Basically just a webkit browser with all the chrome removed, even the menu bar, and dose everything a browser does.
What is PhoneGap / Cordova ?
• 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 ?
Write Once, Run Anywhere?
So, it means...?
NO
Write Once, Debug Everywhere.
The Truth Is...
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?
…
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
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
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
• 1. Write a web app using HTML5 technologies: HTML5 / CSS / JS
How does PhoneGap work?
• 2. Package your web app into PhoneGap
How does PhoneGap work?
• 2. Package your web app into PhoneGap
How does PhoneGap work?
• 3. Deploy your Native App to multiple devices ( iOS, Android, Blackberry, WP 7..., and so on. )
How does PhoneGap work?
How does PhoneGap work?
PhoneGap API / Plugins:
Accelerometer
Camera
Capture
Compass
Connection
Contacts
Device
Events
File
Geolocation
Media
Notification
Storage
http://phonegap.com/about/feature
• Custom Plugins: Terrible support across platforms, and you can make it on you own!
PhoneGap API / Plugins:
https://github.com/phonegap/phonegap-plugins
• An interface to the most common set of device functionality.
• All APIs features are plugins.
• All accessible through JavaScript (PhoneGap Bridge).
PhoneGap API / Plugins:
Get Started !
Demo
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);
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(); }
Custom Alert / Confirm
function showConfirm() { navigator.notification.confirm ( ‘remove user?', onConfirm, ‘Clear', ‘OK, NOOOOO!!' ); } function onConfirm(button) { if( button == '1' ){ // do something } }
Camera
navigator.camera.getPicture( onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL, targetWidth: 300, targetHeight: 200 });
• 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
Mobile Debugging
• Ripple Mobile Environment Emulator (Chrome)
Mobile Debugging
• Weinre / debug.phonegap.com
Mobile Debugging
PhoneGap doesn't bundle a UI framework, but they support any JS framework that works in the browser.
Thanks !
Kuro Hsu
kurotanshi @ gmail.com
http://kuro.tw
http://www.plurk.com/kurotanshi
http://www.facebook.com/kurotanshi