Downloaded 52 times
Uploaded byAllan Huang
Build Cross-Platform Mobile Application with PhoneGap
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.
More Related Content
![Flutter vs react native head to toe comparison [2021 edition]](https://cdn.slidesharecdn.com/ss_thumbnails/fluttervsreactnativeheadtotoecomparison2021edition-210216110025-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Build Cross-Platform Mobile Application with PhoneGap
Build Cross-Platform Mobile Application with PhoneGap
- 1. Build Cross-Platform Mobile Applicationwith PhoneGap allanhuang@eSobi.com
- 2. Agenda Overview Architecture Features 15 Recipes for PhoneGap PhoneGap Plug-in JQueryMobile Integration Conclusion
- 3. Overview An open-source mobiledevelopment framework for building cross-platform mobile applications with HTML5, CSS3 and JavaScript for Smartphone / Tablet
- 4. Overview UI, Logic, andCommunication 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.
- 6. Run within UIWebView Applicationsare built as normal HTML pages and packaged up to run as a native application within a UIWebView or WebView
- 7.
- 8.
- 9. Feature Accelerometer Enables theapplication 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 theapplication 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 theapplications 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 theapplication 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.
- 14. Recipe No. 1 DeterminingWhether the Device Is Ready
- 15. Recipe No. 2 RetrievingInformation About the Device
- 16. Recipe No. 3 Detectingthe Device’s Network Status
- 17. Recipe No. 4 DetectingWhen the Network Status Changes
- 18. Recipe No. 5 DetectingWhen the App Is Moved to the Background or Foreground
- 19. Recipe No. 6 Usingthe GPS and Displaying a Position on a Map
- 20. Recipe No. 7 Usingthe Compass to Help the User Navigate
- 21. Recipe No. 8 Usingthe Accelerometer to Detect Motion
- 22. Recipe No. 9 RetrievingContacts in the Address Book
- 23. Recipe No. 10 Accessingthe Camera and Photo Album
- 24. Recipe No. 11 Uploada Photo to a Remote Server
- 25. Recipe No. 12 CapturingAudio and Video
- 26. Recipe No. 13 Notifyingthe Device with Alert, Confirm, and Vibrate
- 27. Recipe No. 14 StoringData to the Device
- 28. Recipe No. 15 ReadingData from the Device
- 29. jQueryMobile Integration Handling PhoneGap’sdeviceready event
- 30. jQueryMobile Integration Handling PhoneGap’sdeviceready event
- 31. jQueryMobile Integration Access cross-domainpages 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 hascertain 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 designingyour plug-in… PluginResult.execute() is your core native function Phonegap.exec() is your core JS function
- 34. Advantages Faster to developacross 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 tomultiple 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 AppStore 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 calledby 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
- #37 <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.