[apachecon 2016] advanced apache cordova
TRANSCRIPT
![Page 1: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/1.jpg)
Advanced Apache CordovaHazem Saleh
![Page 2: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/2.jpg)
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.
![Page 3: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/3.jpg)
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
![Page 4: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/4.jpg)
Apache Cordova Custom PluginsApache Cordova core already provides and covers a lot of
important plugins:
Other
![Page 5: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/5.jpg)
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/
![Page 6: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/6.jpg)
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
![Page 7: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/7.jpg)
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
![Page 8: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/8.jpg)
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
![Page 9: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/9.jpg)
Apache Cordova Custom Plugins
Define the plugin API interface using JavaScript
![Page 10: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/10.jpg)
Apache Cordova Custom PluginsImplement the plugin interface using the platform native programming language
![Page 11: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/11.jpg)
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
![Page 12: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/12.jpg)
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
![Page 13: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/13.jpg)
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
![Page 14: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/14.jpg)
CREATING CORDOVA PLUGIN DEMO
![Page 15: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/15.jpg)
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
![Page 16: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/16.jpg)
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.
![Page 17: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/17.jpg)
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.
![Page 18: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/18.jpg)
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
![Page 19: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/19.jpg)
Cordova Cloud Push NotificationSetup push notification in Bluemix
Android iOS
![Page 20: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/20.jpg)
Cordova Cloud Push NotificationInstall Bluemix Push Notification Plugin
cordova plugin add ibm-mfp-push
Configure plugin for Android and iOS
![Page 21: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/21.jpg)
Cordova Cloud Push NotificationRegister Device for Push Notifications
![Page 22: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/22.jpg)
Cordova Cloud Push Notification
Subscribe in or unsubscribe from tags
Receive notifications
![Page 23: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/23.jpg)
Cordova Cloud Push NotificationTesting Cloud Push Notifications
![Page 24: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/24.jpg)
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
![Page 25: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/25.jpg)
CORDOVA PUSH NOTIFICATION DEMODemo Source: https://github.com/hazems/cordova-bmx-push
![Page 26: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/26.jpg)
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
![Page 27: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/27.jpg)
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
![Page 28: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/28.jpg)
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
![Page 29: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/29.jpg)
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)
![Page 30: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/30.jpg)
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; });});
![Page 31: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/31.jpg)
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).
![Page 32: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/32.jpg)
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); }); });
![Page 33: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/33.jpg)
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
![Page 34: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/34.jpg)
CORDOVA UNIT TESTING DEMODemo Source: https://github.com/hazems/cordova-js-unit-testing
![Page 35: [ApacheCon 2016] Advanced Apache Cordova](https://reader034.vdocuments.site/reader034/viewer/2022050614/588318231a28ab31068b699f/html5/thumbnails/35.jpg)
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