[JSDC.tw] Introduction to PhoneGap

Introduction to PhoneGap

Kuro Hsu @ JSDC

2012/05/19

& Building mobile apps with HTML5, CSS3 and Javascript.

Mobile is Growing

• In January 2012, 8.49 percent of website hits/page-views come from a handheld mobile device

-- StatCounter

• Mobile will be bigger than desktop internet in 5 years -- Morgan Stanley

• 2.1 billion mobile devices will have HTML5 browsers by 2016 up from 109 million in 2010 -- ABI Research

Mobile development is mess.

Android Java

BlackBerry Java

iOS Objective-C

Palm OS C, C++, Pascal

Symbian C++

Windows Phone C#

Mobile Users prefer browsers over apps

The Web is awesome!

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 */ }


• Handheld Friendly

<meta name="handheldfriendly" content="true" />

• Mobile Optimized

<meta name= "mobileoptimized" content="320" />


• 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 */ }

http://mediaqueri.es


<input type="number" pattern="[0-9]*" /> <input type="email" required /> <input type="text" autocapitalize="off" autocorrect="off" />

<input type="url" /> <input type="tel" /> <input type="date"> <input type="datetime"> <input type="month"> <input type="time"> <input type="range">

• Advanced Forms in Mobile


• Advanced Forms in Mobile


• Advanced links

<a href="tel:+886987654321"> Call Me</a> <a href="sms:+886987654321"> Send SMS</a>


• Media Support

<video controls width="640" height="368" x-webkit-airplay="allow" src="content/side_with_the_seeds.mov"> </video> <audio controls preload="auto" autobuffer> <source src="elvis.mp3" /> <source src="elvis.ogg" /> </audio>


• Events - Orientation:

window.addEventListener('orientationchange', chkOrientation, false); function chkOrientation(ev){

var orient; if (window.orientation) { orient = (Math.abs(window.orientation) === 90) ? 'landscape' : 'portrait'; }

}


• 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... }


• Events – Gesture events : window.addEventListener("gesturestart", gstEvents, false); window.addEventListener("gestureend", gstEvents, false); window.addEventListener("gesturechange", gstEvents, false); function gstEvents(ev){ // do something... }


• Events - DeviceMotion:

window.addEventListener("devicemotion", accel, false); function accel(ev){ // ev.acceleration.x/y/z; // do something… }


• 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]] );


• Canvas API


• Offline Web Application Cache

<html manifest="/cache.manifest">

# COMMENT THERE CACHE MANIFEST js/* index.html style.css ……

NETWORK: search.php …… FALLBACK: dynamic.php …… CACHE: ……


• LocalStorage / SessionStorage

localStorage["bar"] = "hello world!"; var foo = localStorage.getItem("bar"); localStorage.setItem("bar", "hello JSDC!"); localStorage.removeItem("bar"); localStorage.clear();

Mobile Web Strategy

Mobile Web Strategy

• Evaluate your requirement

Mobile Web Strategy

• Mobile-First, Responsive Design

Mobile Web Strategy

• Progressive Enhancement

Source: Adam Wang

Mobile Web Strategy

• Lighter is better

Mobile Web Strategy

• Evaluate your requirement

• Mobile-First, Responsive Design

• Progressive Enhancement

• Lighter is better

To App or Not to App?

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

PhoneGap

Started in 2008

iPhoneDevCamp

Working prototype with geolocation

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…

Callback (PhoneGap 1.1.0)

Callback

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/

What is PhoneGap ?

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.


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.


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?

…



WebKit 532.9

WebCore Javascript

Core

WebKit with V8

WebKit WebKit

with Piranah

WebKit S60 or Qt? IE7



WebKit 532.9

WebCore Javascript

Core

WebKit with V8

WebKit WebKit

with Piranah




WebKit 532.9

WebCore Javascript

Core

WebKit with V8

WebKit WebKit

with Piranah


1. Write a web app using HTML5 technologies: HTML5 / CSS / JS

How does PhoneGap work?

2. Package your web app into PhoneGap


2. Package your web app into PhoneGap


3. Deploy your Native App to multiple devices ( iOS, Android, Blackberry, WP 7..., and so on. )


Native Web Control


FFI

Common Plugins

Custom Plugins

* FFI = Foreign Function Interface

Common Plugins: Good support across platforms.

PhoneGap API / Plugins:

Accelerometer

Camera

Capture

Compass

Connection

Contacts

Device

Events

File

Geolocation

Media

Notification

Storage

PhoneGap 1.7.0 - http://phonegap.com/about/features

Custom Plugins: Terrible support across platforms, and you can make it on you own!


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).


JDK 1.6+

Android SDK with an Android 2.2+

Eclipse & Android ADT plugin for Eclipse OR Any Text Editor

PhoneGap

Requirements ( for Android )

Get Started !

http://phonegap.com/start

Mobile Debugging

Webkit on PC

Mobile Debugging

Mobile Safari debugging

Mobile Debugging

Ripple Mobile Environment Emulator (Chrome)

Mobile Debugging

Weinre / debug.phonegap.com

Mobile Debugging

Adobe Shadow

Mobile Debugging

Webkit on PC

Mobile Safari debugging

Ripple Mobile Environment Emulator

weinre ( WEb INspector REmote )

Adobe Shadow

Mobile Debugging

PhoneGap doesn't bundle a UI framework, but they support any JS framework that works in the browser.

PhoneGap is just a fancy browser.

Native still gives the best performance.

“The ultimate purpose of PhoneGap is to cease to exist…”

－ Brian LeRoux, Nitobi (now Adobe)

http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/

Web is Native.

JavaScript Rocks !

Thanks!

Kuro Hsu

kurotanshi @ gmail.com

http://kuro.tw

https://twitter.com/kurotanshi

http://www.plurk.com/kurotanshi

Technology

[JSDC.tw] Introduction to PhoneGap