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.

Cross-platform mobile apps with Apache Cordova

2,016 views

Published on

Published in: Technology

Cross-platform mobile apps with Apache Cordova

  1. 1. Ivano Malavolta Cross-platform mobile apps with Apache Cordova
  2. 2. Roadmap •  The Cordova framework •  Cordova CLI •  Debugging Cordova applications •  Examples of Cordova APIs
  3. 3. PhoneGap VS Cordova Adobe/Nitobi donated the PhoneGap codebase to the Apache foundation à wider audience and contributors à transparent governance Better documentation à easier contributions for companies Apache Licensing There was only one problem.... trademark ambiguity à CORDOVA PhoneGap is a distribution of Apache Cordova
  4. 4. Cordova You develop your app using the usual three guys You use the same web view of the native OS •  iOS = UIWebView •  Android = android.webkit.WebView http://phonegap.com/blog/2013/06/20/coming-soon-phonegap30/
  5. 5. Cordova The UI layer is a web browser view •  100% width •  100% height Headless web browser •  No URL bar •  No decorations •  No zooming •  No text selection
  6. 6. Can I use HTML5, JS and CSS libraries I use everyday?
  7. 7. How does Cordova work?
  8. 8. Features coverage
  9. 9. Recurrent app architecture Single-page HTML5 web app Classical web server with server-side scripting language such as Java, .NET, PHP, etc… Communication canbe based on the REST architectural style A standard DB (even deployed in the same machine of the application server) OR an external API App Application server Data repository
  10. 10. Roadmap •  The Cordova framework •  Cordova CLI •  Debugging Cordova applications •  Examples of Cordova APIs
  11. 11. Cordova CLI The main tool to use for the cross-platform workflow It allows you to: •  create new projects •  add platforms •  build a project w.r.t. different platforms •  emulate a project on platform-specific emulators •  run a project on device •  include specific plugins into a project CLI = Command-Line Interface If you prefer to use platform- specific SDKs, you can still use it to initialize your project
  12. 12. Creates template project •  PATH the folder that will contain your project •  ID package identifier in reverse-domain style (optional) •  NAME display name of the app (optional) Project creation
  13. 13. With this command you add a target platform of your project. The platform will appear as subfolder of platforms  containing the platform-specific project mirroring the www folder   •  PLATFORM_NAME the name of the platform (e.g., ios, android, wp8) Add platforms If you do something like this: cordova  platform  remove  ios   you are removing a specific platform You can use an SDK such as Eclipse or Xcode to open the project you created
  14. 14. The emulate command will run the app on a platform-specific emulator The run command will run the app on a previously setup device (e.g., connected via USB and configured for being used as device for testing purposes) •  PLATFORM_NAME the name of the platform to be built (e.g., ios, android, wp8) emulate/run the app
  15. 15. This generates platform-specific code within the project's platforms subdirectory •  PLUGIN_ID the id of the repository containing the source code of the plugin to be added to the project add plugins Wait.... plugins? The list of plugins can be found here http://plugins.cordova.io If the plugin you want to add is not in the cordova.io registry, you can directly refer to the URL of his GitHub repository
  16. 16. When Cordova API is not enough... Sometimes Cordova is not enough as is for our purposes •  unsupported feature •  heavyweight data processing is faster in native code ex. images manipulation •  background processing is better handled natively ex. files sync •  complex business logic à You can develop a Cordova plugin
  17. 17. Cordova plugins Purpose: To expose a native functionality to the browser This is done by developing •  a custom Native Component it will be different for each platform  •  a custom JavaScript API it is always the same Mobile Web app JavaScript Plugin A JavaScript Plugin B iOS Plugin A iOS Plugin B Native Platform
  18. 18. Examples of available plugins
  19. 19. Roadmap •  The Cordova framework •  Cordova CLI •  Debugging Cordova applications •  Examples of Cordova APIs
  20. 20. Simulator •  Officially supported by platform vendors •  You use the “real” device’s browser PRO •  device’s performance is not considered •  this is iOS-specific •  Android’s emulator is a joke CONS
  21. 21. On device •  accurate •  still handy •  real performance tests •  real browser tests PRO •  Deployment takes some time (~6 seconds for iOS) CONS
  22. 22. Ripple •  very quick •  can use Chrome’s Web Development Tools •  You can test Cordova’s API from the Desktop •  browsers’ small differences and bugs •  cannot test the interaction with external apps PRO CONS It is based on Ripple, a Chrome plugin for mobile dev from Cordova 3.0.0, you need to use the Ripple available at Apache npm  install  -­‐g  ripple-­‐emulator   ripple  emulate  
  23. 23. Apache Ripple
  24. 24. My development workflow 1.  Code & test using Ripple (very quick) Quick sketch of layout and complete business logic 2.  Run and debug in the XCode simulator (handy & accurate) Complete the UI for iOS devices and ~99% confidence about business logic 3.  Run and debug on devices (complete control & confidence) Complete the UI for Android too and ~99% confidence about business logic
  25. 25. Roadmap •  The Cordova framework •  Cordova CLI •  Debugging Cordova applications •  Examples of Cordova APIs
  26. 26. Accelerometer navigator.accelerometer   It is a global object that captures device motion in the x, y, and z directions You can call 3 methods on it: getCurrentAcceleration   watchAcceleration   clearWatch  
  27. 27. getCurrentAcceleration getCurrentAcceleration(win,  fail);   It gets the current acceleration along the x, y, and z axis win callback function with an Acceleration parameter fail error callback  
  28. 28. watchAcceleration var  watchID  =  navigator.accelerometer.watchAcceleration(win,  fail,  [options]);   It gets the device's current acceleration at a regular interval win callback function with an Acceleration parameter, it is called at regular intervals fail error callback options the interval is specified in the frequency parameter  
  29. 29. clearWatch clearWatch(watchID);   Stop watching the Acceleration referenced by the watch ID parameter watchID ID returned by accelerometer.watchAcceleration
  30. 30. The Acceleration object It contains accelerometer data captured at a specific point in time Properties  x (Number): Amount of acceleration on the x-axis. (in m/s^2) y (Number): Amount of acceleration on the y-axis. (in m/s^2) z (Number): Amount of acceleration on the z-axis. (in m/s^2) timestamp (DOMTimestamp): Creation timestamp in milliseconds these values include the effect of gravity (9.81 m/s^2)
  31. 31. Accelerometer example    var  options  =  {  frequency:  3000  };                  var  watchID  =  navigator.accelerometer.watchAcceleration(win,  fail,  options);                    function  win(acc)  {                          if((acc.x  ===  0)  &&  (acc.y  ===  0)  &&  (acc.z  ===  9.81))    {                                  console.log('I  am  on  a  table');                                  stop();                          }  else  {                                  console.log('Please,  leave  me  on  the  table');                          }                  }                    function  fail()  {                          alert('error');                  }                    function  stop()  {                          if(watchID)  {                                  navigator.accelerometer.clearWatch(watchID);                                  watchID  =  null;                          }                  }  
  32. 32. Camera navigator.camera     It provides an home-grown API for capturing images from the device’s default camera application It is developed in-house by Cordova in order to provide more options to developers Methods: getPicture cleanup
  33. 33. Getting pictures from the camera camera.getPicture(win,  [fail],  [options]);   Takes a photo using the camera or retrieves a photo from the device's album win callback function with a image data parameter fail error callback options capture parameters The result of getPicture can be: •  a base64 encoded string •  the URI of an image file Encoding the image using Base64 can cause memory issues on some devices
  34. 34. getPicture options getPicture() can be called with the following options { quality : 75, destinationType : Camera.DestinationType.DATA_URL, sourceType : Camera.PictureSourceType.CAMERA, allowEdit : true, encodingType: Camera.EncodingType.JPEG, targetWidth: 100, targetHeight: 100, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false };
  35. 35. Camera example var  options  =  {quality:  50,                          destinationType:  Camera.DestinationType.FILE_URI,                          sourceType:  Camera.PictureSourceType.CAMERA                  };                    setTimeout(function()  {                          navigator.camera.getPicture(win,  fail,  options);                  },  3000);                    function  win(imageURI)  {                          var  element  =  document.getElementById('block');                          element.setAttribute('src',  imageURI);                  }                    function  fail  (error)  {                          console.log(error);  //  this  is  provided  by  the  device’s  native  code                  }  
  36. 36. But... who is using Apache Cordova today?
  37. 37. Conclusions Cordova You develop your app using the usual three guys You use the same web view of the native OS •  iOS = UIWebView •  Android = android.webkit.WebView http://phonegap.com/blog/2013/06/20/coming-soon-phonegap30/ Cordova CLI The main tool to use for the cross-platform workflow It allows you to: •  create new projects •  add platforms •  build a project w.r.t. different platforms •  emulate a project on platform-specific emulators •  run a project on device •  include specific plugins into a project CLI = Command-Line Interface If you prefer to use platform- specific SDKs, you can still use it to initialize your project Cordova plugins Purpose: To expose a native functionality to the browser This is done by developing •  a custom Native Component it will be different for each platform  •  a custom JavaScript API it is always the same Mobile Web app JavaScript Plugin A JavaScript Plugin B iOS Plugin A iOS Plugin B Native Platform But... who is using Apache Cordova today?
  38. 38. Contact Ivano Malavolta | Gran Sasso Science Institute iivanoo ivano.malavolta@gssi.infn.it www.ivanomalavolta.com

×