Phonegap / Apache Cordova plugins Connecting with native APIs

Overview of Apache Cordova /Phonegap

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.

Apache Cordova High Level Architecture

Mobile Device

Native Application

Web ViewJavaScript, CSS, HTML, etc.

Plugin JavaScript API

Native API

Plugin JavaScript API

Native API

Plugin JavaScript API

Native API

Plugin JavaScript API

Native API

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

Apache Cordova’s User Interface

Click icon to add picture

Phonegap / Apache Cordova Benefits

Large Community of ContributorsDeveloper community that needs little ramp-upSupports most devicesBetter performance at app startup and page loadingConfig.xml approach to configure web app and turn on/off pluginsNetwork whitelisting approach to handle most web security threatsNo silly configuration of UI using XML in Android

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

© 2013 SAP AG. All rights reserved.

Apache Cordova Command Line Client CLI

Apache CordovaBefore 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

Apache CordovaCommand 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

Apache CordovaCommand 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.

Apache CordovaRun 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.

Apache CordovaRun Application on Android Emulator

• Run on Emulator: cordova emulate android• Run on Device: cordova run android

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

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

/

Push PluginAdd 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.

Push PluginRegistering 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

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).

Encrypted Storage PluginAdd 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.

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.

Model View Controller (MVC)

View

Controller

Model

For your next mobile app development project for multiplatformsContact us at www.webprogr.com/contactus.html

For more on Apache Cordova Phonegap mobile app development herehttps://www.webprogr.com/phonegap-experts.html

Phone: +1 703 495 5847 Email: mktg@webprogr.com