Apache Cordova phonegap plugins for mobile app development
Download as PPT, PDF1 like228 views
Apache Cordova, also known as PhoneGap, provides a container for executing web-based applications on mobile devices, enabling access to native hardware features. It supports various plugins for functionalities like notifications, geolocation, and media capture, and allows easy application development across multiple platforms. The document outlines the setup process, command-line interface commands, and plugin management essential for leveraging Cordova in mobile app development.
Apache Cordova phonegap plugins for mobile app development
- 1. Phonegap / Apache Cordova plugins Connecting with native APIs
- 2. Overview of Apache Cordova /Phonegap
- 3. Webkit Container-Based Applications on Mobile Devices - Apache Cordova When a browser-based application is executed on a mobile device, the JavaScript normally has no access to hardware features of the mobile device such as the accelerometer, GPS location or the camera etc. In order for a web-based application to gain access to these hardware features, it is necessary to run the application within a container that acts both as a browser and provides an API to access the hardware. Apache Cordova (also known as PhoneGap) provides this container.
- 4. Apache Cordova High Level Architecture Mobile Device Native Application Web View JavaScript, CSS, HTML, etc. Plugin JavaScript API Native API Plugin JavaScript API Native API Plugin JavaScript API Native API Plugin JavaScript API Native API
- 5. Apache Cordova’s standard PlugIns • Events • pause, resume, online, offline, backbutton, menubutton, … • Notification • alert, confirm, prompt, beep, vibrate • Capture (Capture media files using device's media capture applications) • Storage (DB device storage interface) • Geolocation • File • Media (audio recording an playback) • Contacts
- 6. Apache Cordova’s User Interface
- 7. Click icon to add picture Phonegap / Apache Cordova Benefits Large Community of Contributors Developer community that needs little ramp-up Supports most devices Better performance at app startup and page loading Config.xml approach to configure web app and turn on/off plugins Network whitelisting approach to handle most web security threats No silly configuration of UI using XML in Android
- 8. Specific plugins for Apache Cordova Provides enterprise capabilities to a Cordova application Fits cleanly within existing Cordova development environments and processes Supports Android (4.0+), iOS (6.0+) and Windows 8.1 / Windows Phone 8.1 A single application can be provisioned into the Webkit Webview container Enterprise app development can use Telerik verified plugins, if required Phonegap / Apache Cordova plugins
- 9. © 2013 SAP AG. All rights reserved. Apache Cordova Command Line Client CLI
- 10. Apache Cordova Before You Start • To get started with Cordova you need a number of things in place and configured. • Node.JS– contains package manager used to install/update Cordova. • http://nodejs.org/ • GIT – used to access source repositories where Cordova plugin’s and resources reside. • Windows – install GIT from here: http://msysgit.github.io/ • OS X – install Xcode command line tools • Gradle – used to build downloaded plugins • Must install using Android Studio on Windows; Comes with Xcode command line tools; http://ant.apache.org/manual/install.html
- 11. Apache Cordova Command Line Interface (CLI) – Add Supported Device Platform Command • Supports iOS, Android and Windows 8.1 platform. Adding platforms to your projects is simple with the Cordova CLI. • Add Platform Command: cordova platform add <android/ios> • Must be in Project’s root directory • Need OS X to work with iOS platform; Windows OS to work with Windows 8.1 • Device specific resources copied (and downloaded if needed) into platforms/<device> directory. • Note: Android SDK tools folder must be defined on the PATH environment variable
- 12. Apache Cordova Command Line Interface (CLI) – Prepare Platform • Once your platform independent resources are developed and placed in the project’s www folder you can prepare the platforms so they are ready for deployment. • Add Prepare Platform Command: cordova prepare <android/ios> • Moves content found in main www folder to platform’s www folder.
- 13. Apache Cordova Run Application on iOS Simulator • For iOS, you can just open the project in Xcode by double clicking on the .xcodeproj file. • Then from Xcode just run it in the Simulator.
- 14. Apache Cordova Run Application on Android Emulator • Run on Emulator: cordova emulate android • Run on Device: cordova run android
- 15. AppUpdate Plugin • Lifecycle Management plugin • Manages remote updating web content within the Webkit container • www folder contents uploaded to server. • No special coding required. • App checks if new update is available – pulls new content from server
- 16. Apache Cordova Push Plugin • Manages the process of registering for push requests plus • Exposes events which help a developer code an application to respond to push notifications • User must be registered with server before registering for push • Must define push settings for application • For list of Apache Cordova plugins:_ • https://www.webprogr.com/phonegap-plugins/
- 17. Push Plugin Add Plugin to Project • Cordova CLI has a command for adding plugins to your project. • It must be executed in the root directory of a Cordova project. • To add the Pushplugin: cordova plugin add cordova-plugin-pushplugin • Plugins are copied into the projects plugin directory, along with dependent plugins.
- 18. Push Plugin Registering API • To receive a notification user must register with APNS/GCM and register their push notification token with server. • <static> registerForNotificationTypes(types, successCallback, errorCallback, notificationlistenerfunc, senderId) • types – Optional; Types of notifications the application wants to receive. The different types of notifications are expressed in notificationType. • successCallback – Optional function; called on successful registration • errorCallback – Optional function; called on registration failure. • notificationlistenerfunc – Optional function; called when the application is open and a notification arrives. • senderId – optional String; only used for GCM – the GCM Sender ID
- 19. Apache Cordova Encrypted Storage Plugin • Adds encrypted local storage to a Cordova application (key-value pair) • Store/Cache application data. • Follows W3C Web Storage API with some exceptions • Works Asynchronously (like most things on a mobile device).
- 20. Encrypted Storage Plugin Add Plugin to Project • Cordova CLI has a command for adding plugins to your project. • It must be executed in the root directory of a Cordova project. • To add the AppUpdate plugin: cordova plugin add cordova-plugin-secure-storage • Plugins are copied into the projects plugin directory, along with dependent plugins.
- 21. Apache Cordova app UX • Supports any 3rd Party HTML5 libraries. Sencha, Ionic, Framework 7, Ratchet. • Ionic bundle based on Model View Controller (MVC) architecture with Google's Angular.js.
- 22. Model View Controller (MVC) View Controller Model
- 23. For your next mobile app development project for multiplatforms Contact us at www.webprogr.com/contactus.html For more on Apache Cordova Phonegap mobile app development here https://www.webprogr.com/phonegap-experts.html Phone: +1 703 495 5847 Email: [email protected]
Editor's Notes
- #19: APNS = Apple Push Notification Service GCM = Google Cloud Messaging