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