Build Cross-Platform Mobile Application with PhoneGap


Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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.
  • Build Cross-Platform Mobile Application with PhoneGap

    1. 1. Build Cross-Platform Mobile Application with PhoneGap
    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