build cross-platform mobile application with phonegap
DESCRIPTION
TRANSCRIPT
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