0
Build Cross-Platform
Mobile Application with
PhoneGap
allanhuang@eSobi.com
Agenda
 Overview
 Architecture
 Features
 15

Recipes for PhoneGap
 PhoneGap Plug-in
 JQueryMobile Integration
 Con...
Overview


An open-source mobile development framework for
building cross-platform mobile applications with
HTML5, CSS3 a...
Overview
 UI,

Logic, and Communication with server is
based on HTML5/CSS3/JavaScript
 PhoneGap provide the JavaScript A...
Architecture
Run within UIWebView


Applications are built as normal HTML pages and
packaged up to run as a native application within ...
Android WebView Code
Project Structure
Feature
 Accelerometer


Enables the application to sense change in the
Device’s Orientation

 Camera


API

API

Allo...
Feature
 Compass


Help the application know the Phone’s Bearing

 Contact


API

Enables the application to read and ...
Feature
 Geolocation


Helps the applications to retrieve the Device’s
Geolocation

 Media


API (as HTML5 ?)

Enables...
Feature
 Notification


Allows the application to notify the user by making
a Sound, Vibration, or Alert

 Storage


A...
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…
...
PhoneGap Plug-in
 JavaScript

has certain inherent limitations
when implementing complex processing and
background work
...
PhoneGap Plug-in


When designing your plug-in…



PluginResult.execute() is your core native function
Phonegap.exec() ...
Advantages
 Faster

to develop across platforms basically, code once and distribute to multiple
platforms
 Its also easi...
Disadvantages
 Distributing

it to multiple platforms is not as
seamless as they'd like you to believe
 Your application...
App Development Comparison
Device
Access

Speed

Development
Cost

App Store

Approval
Process

Full

Very Fast

Expensive...
Conclusion
 PhoneGap

was called by the name Apache
Callback, but now Apache Cordova
 Say goodbye to SDKs, Compilers and...
Upcoming SlideShare
Loading in...5
×

Build Cross-Platform Mobile Application with PhoneGap

741

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
741
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
43
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • <number>
    So to summarize, let’s look at all 3 development approaches compared to each other.
    Native excels in performance and device access, but suffers in cost and updates.
    Web is much simpler, less expensive, easier to update, but is currently more limited.
    Hybrid provides a middle ground, which in many situations is the best of both worlds – especially if you’re targeting multiple operating systems.
    Which should you choose? That really depends on your specific needs. There isn’t a single approach that works for everyone.
    So to provide you with a few more tips that will help you decide, I’d like to transfer the microphone over to Jonathan - who will examine the approaches from a business perspective, and discuss how they fit into the bigger picture of defining the mobile strategy of your organization.
  • Transcript of "Build Cross-Platform Mobile Application with PhoneGap"

    1. 1. Build Cross-Platform Mobile Application with PhoneGap allanhuang@eSobi.com
    2. 2. Agenda  Overview  Architecture  Features  15 Recipes for PhoneGap  PhoneGap Plug-in  JQueryMobile Integration  Conclusion
    3. 3. Overview  An open-source mobile development framework for building cross-platform mobile applications with HTML5, CSS3 and JavaScript for Smartphone / Tablet
    4. 4. 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
    5. 5. Architecture
    6. 6. Run within UIWebView  Applications are built as normal HTML pages and packaged up to run as a native application within a UIWebView or WebView
    7. 7. Android WebView Code
    8. 8. Project Structure
    9. 9. Feature  Accelerometer  Enables the application to sense change in the Device’s Orientation  Camera  API API Allows the application to retrieve a picture from either the Camera or fetch the images from already existing Photo Galleries
    10. 10. Feature  Compass  Help the application know the Phone’s Bearing  Contact  API Enables the application to read and write Contacts  File  API API (as HTML5 ?) Allows the application to read, write, and list Directories and Files
    11. 11. Feature  Geolocation  Helps the applications to retrieve the Device’s Geolocation  Media  API (as HTML5 ?) Enables the application to record and playback Audio & Video recordings  Network  API (as HTML5 ?) API Provides the application with the ability to see the state of Network, e.g. 2G/3G/4G/Wi-Fi network
    12. 12. Feature  Notification  Allows the application to notify the user by making a Sound, Vibration, or Alert  Storage  API API (as HTML5 ?) Provides a Built-in SQL database for the application  The features of PhoneGap Overlaps the features of HTML5?!
    13. 13. Supported Features
    14. 14. Recipe No. 1  Determining Whether the Device Is Ready
    15. 15. Recipe No. 2  Retrieving Information About the Device
    16. 16. Recipe No. 3  Detecting the Device’s Network Status
    17. 17. Recipe No. 4  Detecting When the Network Status Changes
    18. 18. Recipe No. 5  Detecting When the App Is Moved to the Background or Foreground
    19. 19. Recipe No. 6  Using the GPS and Displaying a Position on a Map
    20. 20. Recipe No. 7  Using the Compass to Help the User Navigate
    21. 21. Recipe No. 8  Using the Accelerometer to Detect Motion
    22. 22. Recipe No. 9  Retrieving Contacts in the Address Book
    23. 23. Recipe No. 10  Accessing the Camera and Photo Album
    24. 24. Recipe No. 11  Upload a Photo to a Remote Server
    25. 25. Recipe No. 12  Capturing Audio and Video
    26. 26. Recipe No. 13  Notifying the Device with Alert, Confirm, and Vibrate
    27. 27. Recipe No. 14  Storing Data to the Device
    28. 28. Recipe No. 15  Reading Data from the Device
    29. 29. jQueryMobile Integration  Handling PhoneGap’s deviceready event
    30. 30. jQueryMobile Integration  Handling PhoneGap’s deviceready event
    31. 31. jQueryMobile Integration  Access cross-domain pages from within a PhoneGap application is controlled by two key things…  $.support.cors   Set to True to tell $.ajax to load cross-domain pages $.mobile.allowCrossDomainPages  Set to True to $.mobile.loadPage() to allow crossdomain requests and wrapping this in a mobileinit event handler
    32. 32. 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
    33. 33. PhoneGap Plug-in  When designing your plug-in…   PluginResult.execute() is your core native function Phonegap.exec() is your core JS function
    34. 34. 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
    35. 35. 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
    36. 36. App Development Comparison Device Access Speed Development Cost App Store Approval Process Full Very Fast Expensive Available Mandatory Hybrid Full Native Speed as Necessary Reasonable Available Low Overhead Web Partial Fast Reasonable Not Available None Native 36
    37. 37. 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 Build Service and get back app-store ready apps for various mobile devices  Q&A
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×