[ApacheCon 2016] Advanced Apache Cordova

Advanced Apache
Cordova
Hazem Saleh

About me
experience
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.

Agenda
Apache 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 core already provides and covers a lot of
important plugins:
Other

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/

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

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

Use Plugman to scaffold our custom plugin code (Adding
platforms):
 plugman platform add --platform_name android
 plugman platform add --platform_name ios

Define the plugin API interface using JavaScript

Implement the plugin interface using the platform native
programming language

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

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

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.

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

Steps 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 code
1. Register Device for Push Notifications
2. Optionally subscribe in or unsubscribe from
tags
3. Receive notifications
4. Test Push Notifications

Setup push notification in Bluemix
Android iOS

Install Bluemix Push Notification Plugin
 cordova plugin add ibm-mfp-push
Configure plugin for Android and iOS

Register Device for Push Notifications

Subscribe in or unsubscribe from tags
Receive notifications

Testing Cloud Push Notifications

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

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

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

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

Jasmine 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;
});
});

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

Async 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);
});
});

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

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

[ApacheCon 2016] Advanced Apache Cordova

More Related Content

What's hot

Viewers also liked

Similar to [ApacheCon 2016] Advanced Apache Cordova

More from Hazem Saleh

Recently uploaded

[ApacheCon 2016] Advanced Apache Cordova

Editor's Notes