Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[ApacheCon 2016] Advanced Apache Cordova

3,156 views

Published on


Apache Cordova is a platform for building mobile apps using common Web technologies (HTML, CSS and JavaScript). Apache Cordova offers a set of APIs that allow the mobile app developers to utilize mobile native functions such as (Audio, Camera, Contacts …etc) using JavaScript. This session discusses and demonstrates the advanced aspects of Apache Cordova. Advanced aspects include extending Apache Cordova framework by creating custom plugins in order to access more device hardware features. Advanced aspects also include empowering Apache Cordova apps with Push notifications and Cloud services. Finally, this session demonstrates the power of automated JavaScript unit testing for producing quality Apache Cordova apps.

Published in: Technology
  • Be the first to comment

[ApacheCon 2016] Advanced Apache Cordova

  1. 1. Advanced Apache Cordova Hazem Saleh
  2. 2. 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.
  3. 3. 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
  4. 4. Apache Cordova Custom Plugins Apache Cordova core already provides and covers a lot of important plugins: Other
  5. 5. 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/
  6. 6. 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
  7. 7. 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
  8. 8. Apache Cordova Custom Plugins Use Plugman to scaffold our custom plugin code (Adding platforms):  plugman platform add --platform_name android  plugman platform add --platform_name ios
  9. 9. Apache Cordova Custom Plugins Define the plugin API interface using JavaScript
  10. 10. Apache Cordova Custom Plugins Implement the plugin interface using the platform native programming language
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. CREATING CORDOVA PLUGIN DEMO
  15. 15. 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
  16. 16. 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.
  17. 17. Cordova Cloud Push Notification 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.
  18. 18. Cordova Cloud Push Notification 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
  19. 19. Cordova Cloud Push Notification Setup push notification in Bluemix Android iOS
  20. 20. Cordova Cloud Push Notification Install Bluemix Push Notification Plugin  cordova plugin add ibm-mfp-push Configure plugin for Android and iOS
  21. 21. Cordova Cloud Push Notification Register Device for Push Notifications
  22. 22. Cordova Cloud Push Notification Subscribe in or unsubscribe from tags Receive notifications
  23. 23. Cordova Cloud Push Notification Testing Cloud Push Notifications
  24. 24. 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
  25. 25. CORDOVA PUSH NOTIFICATION DEMO Demo Source: https://github.com/hazems/cordova-bmx-push
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. Unit Testing Cordova Apps 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)
  30. 30. Unit Testing Cordova Apps 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; }); });
  31. 31. Unit Testing Cordova Apps 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).
  32. 32. Unit Testing Cordova Apps 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); }); });
  33. 33. 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
  34. 34. CORDOVA UNIT TESTING DEMO Demo Source: https://github.com/hazems/cordova-js-unit-testing
  35. 35. 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
  36. 36. Questions Twitter: @hazems Blog: http://www.technicaladvices.com Email: hazems@apache.org

×