Advanced Apache CordovaHazem Saleh

About meexperience

More than eleven years of experience in Java enterprise and mobile solutions.

Apache Committer.

Author of four technical books.

DeveloperWorks Contributing author.

Technical Speaker (JavaOne, ApacheCon, Geecon,JavaLand …etc)

Advisory Software Engineer in IBM.

AgendaApache Cordova Custom Plugins

Custom Plugins Demo

Cordova Cloud Push Notifications Demo

Cordova Unit Testing Demo

Cordova Cloud Push Notifications

Unit Testing Cordova Apps

Questions & Answers

Apache Cordova Custom PluginsApache Cordova core already provides and covers a lot of

important plugins:

Other

Apache Cordova Custom Plugins

Apache Cordova plugin is a package of injected code that allows the Cordova Webview to communicate with the native platform on which it runs.

All the main Cordova API features are implemented as plugins.

In many cases, you do not need to develop your own custom plugin since many quality plugins are available in Apache Cordova Plugin registry website:

https://cordova.apache.org/plugins/

Apache Cordova Custom Plugins

Process of custom plugins development

Use Plugman to scaffold our custom plugin code.

Define the plugin API interface using JavaScript.

Implement the plugin interface using the platform native programming language.

Publish your plugin to NPM registry

Using the custom plugin from a Cordova app

Apache Cordova Custom Plugins

Use Plugman to scaffold our custom plugin code

plugman create --name helloworld123 --plugin_id com.test.xyz.helloworld123 --plugin_version 0.0.1

npm install -g plugman

Install Plugman

Apache Cordova Custom PluginsUse Plugman to scaffold our custom plugin code (Adding platforms):

plugman platform add --platform_name android plugman platform add --platform_name ios

Apache Cordova Custom Plugins

Define the plugin API interface using JavaScript

Apache Cordova Custom PluginsImplement the plugin interface using the platform native programming language

Apache Cordova Custom Plugins

Using the custom plugin from a Cordova app

cordova create testApp

cordova platform add android

plugman install --platform android --project /path/to/my/project/platform --plugin /path/to/my/plugin

Apache Cordova Custom Plugins

Publish your plugin to NPM registry

npm adduser # If you don't have an account yet

npm publish /path/to/your/plugin

plugman createpackagejson /path/to/your/plugin

AgendaApache Cordova Custom Plugins

Custom Plugins Demo

Cordova Cloud Push Notifications Demo

Cordova Unit Testing Demo

Cordova Cloud Push Notifications

Unit Testing Cordova Apps

Questions & Answers

CREATING CORDOVA PLUGIN DEMO

AgendaApache Cordova Custom Plugins

Custom Plugins Demo

Cordova Cloud Push Notifications Demo

Cordova Unit Testing Demo

Cordova Cloud Push Notifications

Unit Testing Cordova Apps

Questions & Answers

Cordova Cloud Push Notification

In Apache Cordova plugins store, there are many plugins to integrate Cordova apps with Push Notifications.

Usually, Cloud PaaS provides a unified platform for managing Push Notifications on the mobile platforms.

As an example of integrated Push Notification Cloud providers with Apache Cordova is the IBM Bluemix thanks to ibm-mfp-push plugin:https://www.npmjs.com/package/ibm-mfp-push

Implementing Push Notifications is a common requirement in mobile apps.

Cordova Cloud Push NotificationIBM Bluemix supports the following types of Push Notifications

Broadcast Push Notification: It is pushed to all devices (you can also specify a specific platform).

Unicast Push Notification: It is pushed to a specific device by id.

Tag based Push Notification: It is pushed to all devices that are registered to tags or topics.

Cordova Cloud Push NotificationSteps for having IBM Bluemix Push Notification in Actions for Cordova Apps:

1. Setup push notification in Bluemix

2. Install Bluemix Push Notification Plugin

3. In JavaScript code1. Register Device for Push Notifications2. Optionally subscribe in or unsubscribe from

tags3. Receive notifications

4. Test Push Notifications

Cordova Cloud Push NotificationSetup push notification in Bluemix

Android iOS

Cordova Cloud Push NotificationInstall Bluemix Push Notification Plugin

cordova plugin add ibm-mfp-push

Configure plugin for Android and iOS

Cordova Cloud Push NotificationRegister Device for Push Notifications

Cordova Cloud Push Notification

Subscribe in or unsubscribe from tags

Receive notifications

Cordova Cloud Push NotificationTesting Cloud Push Notifications

AgendaApache Cordova Custom Plugins

Custom Plugins Demo

Cordova Cloud Push Notifications Demo

Cordova Unit Testing Demo

Cordova Cloud Push Notifications

Unit Testing Cordova Apps

Questions & Answers

CORDOVA PUSH NOTIFICATION DEMODemo Source: https://github.com/hazems/cordova-bmx-push

AgendaApache Cordova Custom Plugins

Custom Plugins Demo

Cordova Cloud Push Notifications Demo

Cordova Unit Testing Demo

Cordova Cloud Push Notifications

Unit Testing Cordova Apps

Questions & Answers

Unit Testing Cordova Apps Since Cordova Apps are based on JavaScript, we need to pick a suitable JavaScript unit testing framework for testing Cordova apps logic.

Requirements for picking a good JavaScript unit testing framework

Executable across browsers (Automated preferred)

Easy to setup

Fast Execution

Easy to configure

Integrated

Provides a good testing mechanism for Asynchronous code

Unit Testing Cordova Apps

Jasmine is a powerful JavaScript unit testing framework

Jasmine describes its tests in a simple natural language

Jasmine tests can be read by Non-programmers

Jasmine provides a clean mechanism for testing synchronous and asynchronous code

Unit Testing Cordova AppsSample Jasmine Test

describe("A sample suite", function() { it("contains a spec with an expectation", function() { expect(true).toEqual(true); });});

Main Jasmine Constructs

Testsuite begins with a call to describe()

Testcase “or spec” begins with a call to it()

Testcase can contain one or more matcher(s)

Unit Testing Cordova AppsJasmine Example

describe("SimpleMath", function() { var simpleMath; beforeEach(function() { simpleMath = new SimpleMath(); }); it("should be able to find factorial for positive number", function() { expect(simpleMath.getFactorial(3)).toEqual(6); }); it("should be able to find factorial for zero", function() { expect(simpleMath.getFactorial(0)).toEqual(1); }); afterEach(function() { simpleMath = null; });});

Unit Testing Cordova AppsAsync Jasmine Tests

Asynchronous JavaScript code refers to the code whose caller will NOT to wait until the execution completes.

In order to get the results, the caller should pass callbacks which will be called with data result parameters in case of operation success or failure.

Asynchronous JavaScript code mainly refers to Ajax code.

In order to support Asynchronous operation testing, Jasmine provides: 1. An optional single parameter for its single spec. 2. This parameter has to be called if the asynchronous operation

completes. 3. If this parameter is not called for by default 5 seconds then the test

will fail (means operation timeout).

Unit Testing Cordova AppsAsync Jasmine Example

describe("when doing asynchronous operation", function() { it("should be able to do the asynchronous operation", function(done) { var data = {}; var successCallBack = function(result) { console.log("success"); /* validate result parameter */ done(); };

var failureCallBack = function() { console.log("failure"); expect("Operation").toBe("passing"); /* force failing test */ done(); };

AsyncObject.asyncOperation(data, successCallBack, failureCallBack); }); });

AgendaApache Cordova Custom Plugins

Custom Plugins Demo

Cordova Cloud Push Notifications Demo

Cordova Unit Testing Demo

Cordova Cloud Push Notifications

Unit Testing Cordova Apps

Questions & Answers

CORDOVA UNIT TESTING DEMODemo Source: https://github.com/hazems/cordova-js-unit-testing

AgendaApache Cordova Custom Plugins

Custom Plugins Demo

Cordova Cloud Push Notifications Demo

Cordova Unit Testing Demo

Cordova Cloud Push Notifications

Unit Testing Cordova Apps

Questions & Answers

Questions

Twitter: @hazemsBlog: http://www.technicaladvices.com Email: hazems@apache.org