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.

[Devoxx Morocco 2015] Apache Cordova In Action

635 views

Published on

Apache Cordova is a platform for building native 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. jQuery mobile is one of the best mobile web application frameworks, which allows the web developers to develop neat mobile web applications. This session discusses why there is a need for Hybrid mobile development, the current challenges of mobile development, and how using Apache Cordova can help in overcoming many of these technical challenges. It also highlights the best practices of using Apache Cordova with jQuery mobile. Finally, it demonstrates a real Cordova mobile app for showing the audience the best practices of designing, developing, and deploying hybrid Android and iOS mobile apps.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

[Devoxx Morocco 2015] Apache Cordova In Action

  1. 1. #DevoxxMA @DevoxxMA#DevoxxMA @DevoxxMA Apache Cordova In Action Hazem Saleh
  2. 2. #DevoxxMA @DevoxxMA About me experience More than ten 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, Devoxx …etc) Advisory Software Engineer in IBM.
  3. 3. #DevoxxMA @DevoxxMA Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview Memo Application Demo Hello World Demo Integration Tips with jQM and Ionic General Performance Tips
  4. 4. #DevoxxMA @DevoxxMA Apache Cordova Introduction Platform HTML CSS JS
  5. 5. #DevoxxMA @DevoxxMA Apache Cordova Introduction Device native functions examples:
  6. 6. #DevoxxMA @DevoxxMA Apache Cordova Introduction Hybrid Application (Cordova) Native Application Can be uploaded to App Store Yes Yes Technology HTML + CSS + JavaScript Native platform Programming Language Cross-mobiles support Yes No Development Speed Faster Slower Uses Device Native Features Yes Yes Hybrid vs Native Application
  7. 7. #DevoxxMA @DevoxxMA Apache Cordova Introduction Cordova is supported on the following platforms:
  8. 8. #DevoxxMA @DevoxxMA Apache Cordova Introduction Challenges of the current mobile apps development: Many platforms and devices. Different skills needed. Different problem types. Huge Development and Testing Effort to have a single application on these platforms. For Android: Java skills needed. For iOS: Objective-C (or SWIFT) skills needed. For Windows: C# skills needed.
  9. 9. #DevoxxMA @DevoxxMA Apache Cordova Introduction Who can use Cordova? If you are a web developer and wants to develop a mobile application that can be deployed on the different app store portals. If you are a mobile native developer and wants to develop a single application on the different mobile platforms without having to re-implement the application code on every platform.
  10. 10. #DevoxxMA @DevoxxMA Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview Memo Application Demo Hello World Demo Integration Tips with jQM and Ionic General Performance Tips
  11. 11. #DevoxxMA @DevoxxMA Configuration 1 2 3 Prerequisites: Node JS. Target SDK. From command line: > sudo npm install -g cordova To know the installed version of Cordova: > cordova -v GIT
  12. 12. #DevoxxMA @DevoxxMA Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview Memo Application Demo Hello World Demo Integration Tips with jQM and Ionic General Performance Tips
  13. 13. #DevoxxMA @DevoxxMA Cordova Command Line To create an application: > cordova create <<app_dir>> <<project_id>> <<app_title>> To add a platform (from the app folder): > cordova platform add <<platform_name>> To build Cordova project: > cordova build To deploy the app on emulator: > cordova emulate <<platform_name>>
  14. 14. #DevoxxMA @DevoxxMA Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview Memo Application Demo Hello World Demo Integration Tips with jQM and Ionic General Performance Tips
  15. 15. #DevoxxMA @DevoxxMA#DevoxxMA @DevoxxMA Hello World Demo
  16. 16. #DevoxxMA @DevoxxMA Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview Memo Application Demo Hello World Demo Integration Tips with jQM and Ionic General Performance Tips
  17. 17. #DevoxxMA @DevoxxMA Cordova APIs Overview Native device functions are represented as plugins that can be added and removed using the command line. Adding camera plugin example: > cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova- plugin-camera.git Removing Camera plugin example: > cordova plugin rm org.apache.cordova.core.camera
  18. 18. #DevoxxMA @DevoxxMA Cordova APIs Overview Device An object that holds information about the device hardware and software. Device information is mainly about:  Device name.  Device Platform.  Device Platform version.  Device model. “deviceready” event is an indicator that Cordova finishes loading and Cordova APIs are ready to be called.
  19. 19. #DevoxxMA @DevoxxMA Cordova APIs Overview Camera An object that provides an access to the device camera. It can be used for:  Capturing a photo using the device’s Camera.  Picking a photo from the device’s gallery. navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL }); function onSuccess(imageData) { var image = document.getElementById('myImage'); image.src = "data:image/jpeg;base64," + imageData; } function onFail(message) { alert('Failed because: ' + message); }
  20. 20. #DevoxxMA @DevoxxMA Cordova APIs Overview Media An object that allows recording and playing back audio files on the device. var my_media = new Media("someFile.mp3", onSuccess, onError); my_media.play(); function onSuccess() { console.log("playAudio():Audio Success"); } function onError(error) { alert('code: ' + error.code + 'n' + 'message: ' + error.message + 'n'); }
  21. 21. #DevoxxMA @DevoxxMA Cordova APIs Overview Notification An object that displays visual, audible, and tactile notification. // Show a native looking alert navigator.notification.alert( 'Cordova is great!', // message 'Cordova', // title 'Ok' // buttonName ); // Beep four times navigator.notification.beep(4); // Vibrate for 3 seconds navigator.notification.vibrate(3000);
  22. 22. #DevoxxMA @DevoxxMA Cordova APIs Overview Storage Provides an access to the W3C Web Storage interface: window.localStorage.setItem("key", "value"); var value = window.localStorage.getItem("key"); window.localStorage.removeItem("key"); window.localStorage.clear(); - Local Storage (window.localStorage). - Session Storage (window.sessionStorage).
  23. 23. #DevoxxMA @DevoxxMA Cordova APIs Overview Storage Provides an access to the device Web SQL Database (Full featured database). Cordova supports IndexedDB for WP8 and Blackberry 10. function populateDB(tx) { tx.executeSql('DROP TABLE IF EXISTS DEMO'); tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)'); tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")'); tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")'); } function errorCB(err) { alert("Error processing SQL: " + err.code); } function successCB() { alert("success!"); } var db = window.openDatabase("Demos", "1.0", "Cordova Demo", 200000); db.transaction(populateDB, errorCB, successCB);
  24. 24. #DevoxxMA @DevoxxMA Cordova APIs Overview Accelerometer (Capture device motion) Compass (Get the device direction) Connection (Get the device connection) Contacts (Access to device contacts database). File (Access to device File system based on W3C File API) Globalization (Access to user locale information) Events (Handle Apache Cordova life cycle events). Geolocation (Know your mobile location. API is W3C based) More APIs:
  25. 25. #DevoxxMA @DevoxxMA Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview Memo Application Demo Hello World Demo Integration Tips with jQM and Ionic General Performance Tips
  26. 26. #DevoxxMA @DevoxxMA Integration Tips with jQM and Ionic Ionic and jQuery Mobile are: Two popular and powerful User Interface frameworks for building Mobile Web applications. Are based on HTML5, CSS3 and JavaScript. Compatible with most of the mobile and tablet browsers. Ionic has the following advantages: • Powered by AngularJS which is a powerful MVVM framework for creating structured JavaScript applications. • Powered by command line tooling and UI templates.
  27. 27. #DevoxxMA @DevoxxMA Integration Tips with jQM and Ionic Cordova does not restrict using any specific JavaScript library but using a JavaScript library will save you a lot of time creating your own widgets from scratch. jQuery Mobile is used in the demo application with Cordova to create the Memo utility. There are also many cool frameworks you can use in your Cordova mobile apps such as: Dojo mobile Sencha Touch Bootstrap
  28. 28. #DevoxxMA @DevoxxMA jQuery Mobile Integration Windows Phone 8 Issues: Fixes: Trimmed header title. Footer is not aligned to bottom. Set ui-header and ui-title classes’ overflow to visible. Hide System Tray using app config (shell:SystemTray.isVisible = “False”).
  29. 29. #DevoxxMA @DevoxxMA jQuery Mobile Integration iOS 8 (and 9) Issues: One of the possible workarounds: Collision between jQM header title and iOS device status bar. Hide the status bar by adding and setting two properties in the app's .plist file: 1. The Status bar is initially hidden property set to the YES value. 2. The View controller-based status bar appearance property set to the NO value
  30. 30. #DevoxxMA @DevoxxMA jQuery Mobile Integration iOS 9 Issues: One of the possible workarounds: Popups are suddenly closed after the first opening time! Use data-history="false” for the data- role="popup” component
  31. 31. #DevoxxMA @DevoxxMA jQuery Mobile Integration iOS 9 Issues: One of the possible workarounds: Back buttons are broken due to UIWebView bug in iOS 9: https://openradar.appspot.com/22186109 if (device.platform === "iOS" && parseInt(device.version) === 9) { $.mobile.hashListeningEnabled=false; } /* when the device is ready */
  32. 32. #DevoxxMA @DevoxxMA jQuery Mobile Integration In order to boost the performance of jQuery mobile with Cordova, it is recommended to disable transition effects as follows: $.mobile.defaultDialogTransition = 'none’; $.mobile.defaultPageTransition = 'none';
  33. 33. #DevoxxMA @DevoxxMA jQuery Mobile Integration • Use cordova-jquery-npm module to speed up adding ready-made jQuery mobile templates to your existing Cordova project. Available templates are: • Multiple pages. • Persistent Navigation bar for three pages. • External Panel Template. • Install it using npm as follows: > npm install –g cordova-jquery • All what you need to do is to run cordova-jquery command from your project root and follow the template creation Wizard. • cordova-jquery-npm module is an open source project that is available in: • https://www.npmjs.com/package/cordova-jquery
  34. 34. #DevoxxMA @DevoxxMA Ionic Integration Use Native Scrolling instead of JavaScript scrolling for gaining the maximum performance. $ionicConfigProvider.scrolling.jsScrolling(false);  (Enabling native scrolling for all app views) overflow-scroll=“true”  (for a single ion-content)
  35. 35. #DevoxxMA @DevoxxMA Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview Memo Application Demo Hello World Demo Integration Tips with jQM and Ionic General Performance Tips
  36. 36. #DevoxxMA @DevoxxMA General Performance Tips Cache Application Data as much as possible to avoid the network access delay. Possible ways to cache application data:  Web Storage (Local Storage), if data size is less than 5 MBs.  Database (IndexedDB / Web SQL), if data size is larger than 5 MBs.  File System. Always cache static data, and define proper caching policies for dynamic data.
  37. 37. #DevoxxMA @DevoxxMA General Performance Tips Avoid the 300ms click event delay on mobile browsers:  Mobile browsers have to wait 300ms to determine if this is a click or a double tap event.  Can make your user feel that your app is slow! Possible Solutions:  If you do not use a specific framework that handles this delay, Use FastClick:  https://github.com/ftlabs/fastclick  If you are using jQuery mobile, use “vClick” event:  https://api.jquerymobile.com/vclick/  If you are using Ionic, use “ngTouch” module:  https://docs.angularjs.org/api/ngTouch
  38. 38. #DevoxxMA @DevoxxMA General Performance Tips Minimize DOM Access and Insertions. Do not do: $("#myButton").on("click", someClickEventHandler); $("#myButton").css("text-decoration", "underline"); $("#myButton").css("color", "blue"); $("#myButton").attr("href", "#"); Do not use JavaScript for layout creation. Instead Do: var myButton = $("#myButton”); myButton.on("click", someClickEventHandler); myButton.css("text-decoration", "underline"); myButton.css("color", "blue"); myButton.attr("href", "#");
  39. 39. #DevoxxMA @DevoxxMA Agenda Apache Cordova Introduction Configurations Cordova Command Line Cordova APIs Overview Memo Application Demo Hello World Demo Integration Tips with jQM and Ionic General Performance Tips
  40. 40. #DevoxxMA @DevoxxMA#DevoxxMA @DevoxxMA GitHub URL: https://github.com/hazems/cordova-mega-app Memo Application
  41. 41. #DevoxxMA @DevoxxMA JavaScript Quiz <script> var someVar = "1"; var someObject = { someVar: 2, someMethod: function () { var someVar = 3; var _this = this; setTimeout(function() { var result = _this.someVar + this.someVar; alert(result); }, 10); } };
  42. 42. #DevoxxMA @DevoxxMA Questions Twitter: @hazems Blog: http://www.technicaladvices.com Email: hazems@apache.org

×