Build Cross-Platform Mobile Application with Ph

oneGap

allanhuang@eSobi.com

Agenda

Overview Architecture Features 15 Recipes for PhoneGap PhoneGap Plug-in JQueryMobile Integration Conclusion

Overview

An open-source mobile development framework for building cross-platform mobile applications with HTML5, CSS3 and JavaScript for Smartphone / Tablet

Overview

UI, Logic, and Communication with server is based on HTML5/CSS3/JavaScript

PhoneGap provide the JavaScript API that allows Your JavaScript Code to access to the device features

Communicate and Control the device is based on the Native Language, e.g. Java, Object-C

Architecture

Run within UIWebView

Applications are built as normal HTML pages and packaged up to run as a native application within a UIWebView or WebView

Android WebView Code

Project Structure

Feature

Accelerometer API Enables the application to sense change in the

Device’s Orientation Camera API

Allows the application to retrieve a picture from either the Camera or fetch the images from already existing Photo Galleries

Feature

Compass API Help the application know the Phone’s Bearing

Contact API Enables the application to read and write

Contacts File API (as HTML5 ?)

Allows the application to read, write, and list Directories and Files

Feature

Geolocation API (as HTML5 ?) Helps the applications to retrieve the Device’s Ge

olocation Media API (as HTML5 ?)

Enables the application to record and playback Audio & Video recordings

Network API Provides the application with the ability to see the

state of Network, e.g. 2G/3G/4G/Wi-Fi network

Feature

Notification API Allows the application to notify the user by making

a Sound, Vibration, or Alert Storage API (as HTML5 ?)

Provides a Built-in SQL database for the application

The features of PhoneGap Overlaps the features of HTML5?!

Supported Features

Recipe No. 1

Determining Whether the Device Is Ready

Recipe No. 2

Retrieving Information About the Device

Recipe No. 3

Detecting the Device’s Network Status

Recipe No. 4

Detecting When the Network Status Changes

Recipe No. 5

Detecting When the App Is Moved to the Background or Foreground

Recipe No. 6

Using the GPS and Displaying a Position on a Map

Recipe No. 7

Using the Compass to Help the User Navigate

Recipe No. 8

Using the Accelerometer to Detect Motion

Recipe No. 9

Retrieving Contacts in the Address Book

Recipe No. 10

Accessing the Camera and Photo Album

Recipe No. 11

Upload a Photo to a Remote Server

Recipe No. 12

Capturing Audio and Video

Recipe No. 13

Notifying the Device with Alert, Confirm, and Vibrate

Recipe No. 14

Storing Data to the Device

Recipe No. 15

Reading Data from the Device

jQueryMobile Integration

Handling PhoneGap’s deviceready event

jQueryMobile Integration

Handling PhoneGap’s deviceready event

jQueryMobile Integration

Access cross-domain pages from within a PhoneGap application is controlled by two key things… $.support.cors$.support.cors

Set to True to tell $.ajax to load cross-domain pages $.mobile.allowCrossDomainPages$.mobile.allowCrossDomainPages

Set to True to $.mobile.loadPage() to allow cross-domain requests and wrapping this in a mobileinit event handler

PhoneGap Plug-in

JavaScript has certain inherent limitations when implementing complex processing and background work

Plug-in is an extension of the PhoneGap feature

In order to write plug-in for each platform, you have to write two parts Native Code that does the heavy lifting JavaScript Code that expose this native code

PhoneGap Plug-in

When designing your plug-in… PluginResult.execute()PluginResult.execute() is your core native function Phonegap.exec()Phonegap.exec() is your core JS function

Advantages

Faster to develop across platforms - basically, code once and distribute to multiple platforms

Its also easier to develop the UI and logic if you have experience in web development

Disadvantages

Distributing it to multiple platforms is not as seamless as they'd like you to believe

Your application will look the same across all platforms

Generated code is not as efficient as natively authored app, so performance is not as great

You do not get access to the full range of features offered by native SDKs

App Development Comparison

36

Hybrid FullNative

Speed as Necessary

Reasonable Available Low Overhead

Native

Device Access Speed App Store Approval

Process

Full Very Fast Available Mandatory

Development Cost

Expensive

Partial Fast Not AvailableReasonable NoneWeb

Conclusion

PhoneGap was called by the name Apache Callback, but now Apache Cordova

Say goodbye to SDKs, Compilers and Hardwares Upload your code package to the PhoneGap Buil

d Service and get back app-store ready apps for various mobile devices

Q&A