Build Cross-Platform Mobile Application with PhoneGap
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
997
On Slideshare
997
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
35
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • <br /> So to summarize, let’s look at all 3 development approaches compared to each other. <br /> Native excels in performance and device access, but suffers in cost and updates. <br /> Web is much simpler, less expensive, easier to update, but is currently more limited. <br /> Hybrid provides a middle ground, which in many situations is the best of both worlds – especially if you’re targeting multiple operating systems. <br /> Which should you choose? That really depends on your specific needs. There isn’t a single approach that works for everyone. <br /> 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. <br />

Transcript

  • 1. Build Cross-Platform Mobile Application with PhoneGap allanhuang@eSobi.com
  • 2. Agenda  Overview  Architecture  Features  15 Recipes for PhoneGap  PhoneGap Plug-in  JQueryMobile Integration  Conclusion
  • 3. Overview  An open-source mobile development framework for building cross-platform mobile applications with HTML5, CSS3 and JavaScript for Smartphone / Tablet
  • 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. Architecture
  • 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. Android WebView Code
  • 8. Project Structure
  • 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. 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. 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. 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. Supported Features
  • 14. Recipe No. 1  Determining Whether the Device Is Ready
  • 15. Recipe No. 2  Retrieving Information About the Device
  • 16. Recipe No. 3  Detecting the Device’s Network Status
  • 17. Recipe No. 4  Detecting When the Network Status Changes
  • 18. Recipe No. 5  Detecting When the App Is Moved to the Background or Foreground
  • 19. Recipe No. 6  Using the GPS and Displaying a Position on a Map
  • 20. Recipe No. 7  Using the Compass to Help the User Navigate
  • 21. Recipe No. 8  Using the Accelerometer to Detect Motion
  • 22. Recipe No. 9  Retrieving Contacts in the Address Book
  • 23. Recipe No. 10  Accessing the Camera and Photo Album
  • 24. Recipe No. 11  Upload a Photo to a Remote Server
  • 25. Recipe No. 12  Capturing Audio and Video
  • 26. Recipe No. 13  Notifying the Device with Alert, Confirm, and Vibrate
  • 27. Recipe No. 14  Storing Data to the Device
  • 28. Recipe No. 15  Reading Data from the Device
  • 29. jQueryMobile Integration  Handling PhoneGap’s deviceready event
  • 30. jQueryMobile Integration  Handling PhoneGap’s deviceready event
  • 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. 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. PhoneGap Plug-in  When designing your plug-in…   PluginResult.execute() is your core native function Phonegap.exec() is your core JS function
  • 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. 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. 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. 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