Build Cross-Platform Mobile Application with PhoneGap
•Download as PPT, PDF•
0 likes•2,053 views
This document provides an overview of building cross-platform mobile applications with PhoneGap. PhoneGap allows developers to create mobile apps using HTML, CSS and JavaScript that can be deployed across various platforms. It provides APIs to access device capabilities like the camera, contacts and more. The document outlines PhoneGap's architecture, features, recipes for common tasks and how to integrate with frameworks like jQuery Mobile. It also discusses advantages like writing code once for multiple platforms, and disadvantages like lower performance compared to native apps.
Report
Share
Build Cross-Platform Mobile Application with PhoneGap
- 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
- 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?!
- 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
Editor's Notes
- <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.