PhoneGap Cross the Gap from HTML5 to Mobile

OSCON 2012

Paul BeusterienJuly 19, 2012

Today's Talk● Why Web Development for Mobile? ● Why PhoneGap?● What is PhoneGap?● Technology Map

Slides at http://goo.gl/Uf625

Follow Along

http://www.mobiledevelopersolutions.com● Requires: Eclipse ADT● See Get Started with AppLaud

http://www.applaudcloud.com● Web-based development● Google Chrome● AppLaud App (install from QRcode)

OR

Eclipse Plugin for PhoneGap Android

AppLaud Cloud

About Me - Paul Beusterien

● Creating top-notch mobile development solutions

● paul.beusterien@gmail.com

● @paulbeusterien

● http://www.mobiledevelopersolutions.com● http://www.applaudcloud.com

Who Need Apps?

1 Billion television sets worldwide

Fragmentation

HTML5 to the Rescue

(Hint: There are Lots of Web Developers)

Who Can Write HTML5?

Making Sense of it All

Running as a Web PageBrowser Device Browser

Running as a Native App

Native Vs Web

Why not use both?

Mobile Capabilities

PhoneGap APIs

http://docs.phonegap.com/

PhoneGap Demo

Accelerometer

Captures device motion in the x, y and z direction

Methods:○ getCurrentAcceleration○ watchAcceleration○ clearWatch

Camera

Provide access to default camera application

Methods:○ getPicture

Capture

Provides access to the audio, image, and video capabilities of the device

Methods:○ captureAudio○ captureImage○ captureVideo○ MediaFile.getFormatData

Compass

Obtain the direction the device is pointing

Methods:○ getCurrentHeading○ watchHeading○ clearWatch

Connection

The connection object gives access to the device's cellular and wifi connection information.Properties:

○ connection.type

Constants:○ Connection.UNKNOWN○ Connection.ETHERNET○ Connection.WIFI○ Connection.CELL_2G○ Connection.CELL_3G○ Connection.CELL_4G○ Connection.CELL_NONE

Contacts

Provide access to the device contacts database

Methods:○ create○ find

Device

The device object describes the device's hardware and software

Properties:○ device.name○ device.phonegap○ device.platform○ device.uuid○ device.version

Events

PhoneGap Lifecycle events

Event Types:● deviceready● pause● resume● online● offline● backbutton● batterycritical● batterylow● batterystatus

● menubutton● searchbutton● startcallbutton● endcallbutton● volumedownbutton● volumeupbutton

File

An API to read, write and navigate file system hierarchies.

Objects and Methods for:○ Directory Navigation○ File Read○ File Write○ File Transfer

Geolocation

Provide location information for the device

Methods:○ getCurrentPosition○ watchPosition○ clearWatch

Media

Provide the ability to record and play back audio files on a device

Methods:○ getCurrentPosition○ getDuration○ play○ pause○ release○ seekTo○ startRecord○ stopRecord○ stop

Notification

Visual, audible and tactile device notifications

Methods:○ alert○ confirm○ beep○ vibrate

Storage

Provide access to the device's storage options.

Web Storage Methods:○ openDatabase○ transaction○ changeVersion○ executeSql○ item

Local Storage Methods:○ key○ getItem○ setItem○ removeItem○ clear

PhoneGap Implementation● Embeds a chromeless browser in a native app● Creates a bridge from the browser to native via a set

of JavaScript APIs

Android Implementation

● Was (pre Android 2.3)○ WebView ○ addJavaScriptInterface

● Now○ onJsPrompt override

PhoneGap Bridge

PhoneGap Goals and Principles

● "The purpose of PhoneGap is for PhoneGap to cease to exist."

- Brian LeRoux, Adobe PhoneGap Lead

● Embrace web technology - HTML5● Build a first-class development environment around web technology

PhoneGap and Titanium

PhoneGap vs Titanium

Thanks -> Tony Lukasavage http://savagelook.com/blog/portfolio/phonegap-is-web-based-appcelerator-is-pure-javascript

PhoneGap Platforms

http://phonegap.com/about/features

(all major smart phone OS's!)

PhoneGap Plugins

Extending PhoneGap

● Provide JavaScript APIs for native capabilities

● Examples include Bluetooth, Speech Recognizer, ChildBrowser, TTS, Status Bar Notification and ftp

● Many are open sourced at https://github.com/phonegap/phonegap-plugins

Plugin Basics1. Native Part - Java on Android

○ Add Java Class, Include Java Code2. JavaScript Part

○ Add JS file to project, Edit index.html3. Connect Plugin to App

○ Edit res/xml/plugins.xml4. README file

○ Permissions - AndroidManifest.xml○ Plugin-specific instructions: init calls, resources○ API description and usage examples

Apache Cordova?

(Apache Callback)

Apache Cordova

October 3, 2011

UI Libraries

Mobile UI Paradigm

● Optimized for Touch○ Finger-sized controls○ Minimize typing

■ Smart forms - buttons, sliders, etc.○ Swipe and tap events

■ No mouse-overs and clicks● Orientation/Layout Change● Themes and Transitions

UI Frameworks

Sencha

Jo EmbedJS zepto.js jQ.Mobi

jQuery Mobile

Touch-Optimized Web Framework for Smartphones & Tablets

"A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design."

Simulation/Emulation

App Stores

Ripple Demo

Debug

App Stores

Weinre Demoweinre is WEb INspector REmote

debug.phonegap.com

Jo EmbedJS zepto.js

Pulling it all Together

Sencha

Debug

Emulate

AppLaud Eclipse Plugin

AppLaud Cloud

● Demo

Today's Talk● Why Web Development for Mobile? ● Why PhoneGap?● What is PhoneGap?● Technology Map● Live Demos

Slides at http://goo.gl/qoyk4

More ...

● http://www.phonegap.com ● https://groups.google.com/forum/#!forum/phonegap● http://stackoverflow.com/questions/tagged/phonegap● http://incubator.apache.org/projects/callback.html● http://www.mobiledevelopersolutions.com● http://www.applaudcloud.com● twitter @paulbeusterien

Slides at http://goo.gl/Uf625

* Some images from Creative Commons* Thanks to Brian LeRoux of Adobe for input