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.

Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS

3,126 views

Published on

Build mobile cross platform apps with HTML5, JS & CSS3
Avoiding each mobile platforms’ native development language

Published in: Technology

Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS

  1. 1. Cordova/PhoneGap Mobile Applica5on Development with HTML/JS/CSS Gabriel Huecas December 3, 2015
  2. 2. Layout •  Introduc5on •  Cordova – Hello World – Plugins •  Advanced examples •  Phonegap •  Adobe build •  Other SDKs: Android Studio, Ionic, Intel XDk,…
  3. 3. INTRODUCTION
  4. 4. Resources •  hSp://cordova.apache.org/ •  www.phonegap.com – FAQ: hSp://phonegap.com/about/faq/ •  hSps://build.phonegap.com/ INTRODUCTION
  5. 5. Goal •  Build cross plaorm mobile apps with HTML5, JS & CSS3 – Avoiding each mobile plaorms’ na5ve development language •  Even the SDK through Adobe Phonegap Build INTRODUCTION
  6. 6. Use if you are: •  A mobile developer –  want to extend an applica5on across more than one plaorm, without having to re-implement it with each plaorm's language and tool set. •  A web developer –  want to deploy a web app that's packaged for distribu5on in various app store portals. •  A mobile developer –  interested in mixing na5ve applica5on components with a WebView (browser window) that can access device-level APIs, –  or if you want to develop a plugin interface between na5ve and WebView components. INTRODUCTION
  7. 7. Framework for •  Plaorm for building na5ve mobile apps using HTML, JS & CSS •  Set of Device APIs – Allows mobile app developer to access na5ve device func5ons from JS •  Combined with UI framework – Jquery Mobile, Dojo Mobile, Sencha Touch INTRODUCTION
  8. 8. Supported OS Amazon FireOS Android Bada Blackberry10 FirefoxOS iOS Symbian Tizen Ubuntu WebOS Windows 8 Windows Phone 7 Windows Phone 8 INTRODUCTION hSp://cordova.apache.org/docs/en/latest/guide/support/index.html
  9. 9. Packaging & Distribu5on •  Na5ve-installed applica5on – iOS -> .ipa (iPhone Applica5on Archive) – Android -> .apk (Android Applica5on Package) – Windows Phone -> .xap (Microsoj Window Phone OS applica5on package) •  Distributed through corresponding channels: •  iTunes, Google Play, Amazon Market, BlackBerry App World, Windows Phone Marketplace, etc. INTRODUCTION
  10. 10. Interface •  The app UI created with HTML, CSS & JS –  100% x 100% •  Just one display User Interface Browser-based WebView 100% x 100% INTRODUCTION
  11. 11. Na5ve Web view •  Several rendering engined –  Result may differ •  Development •  Tes5ng •  UX S.O. Componente iOS UIWebView Android Android.webkit- WebView Etc. Etc. INTRODUCTION
  12. 12. Client-Server •  Cordova client App connects with server app – Data send/receive, bussines login, Data Base communica5on – Server: any •  Apache, IIS, nginx,… •  Server App: Java, PHP, Ruby, Node.js, … •  Cordova client app independant of backend technology – Standard web protocolos INTRODUCTION
  13. 13. Data Bases •  Cordova client app (usually) do not interact directly with the data base – Through the server – Standard HTTP requests •  REST-ful, XML, JSON, SOAP, websockets –  Same techniques AJAX-based apps INTRODUCTION
  14. 14. Frameworks •  Facilitate our app behaves like na5ve – JQuery Mobile, Sencha Touch,… INTRODUCTION
  15. 15. Device APIs •  Accelerometer •  BaSery Status •  Camera •  Capture •  Compass •  Connec5on •  Contacts •  Device •  Events •  File •  Geoloca5on •  Globaliza5on –  Locale, language, and 5mezone •  InAppBrowser •  Media •  No5fica5on •  Splash Screen •  Status Bar •  Storage •  Vibra5on hSps://cordova.apache.org/plugins/ INTRODUCTION
  16. 16. Running the app 1.  Local build: runs in a device or emulator 2.  Through a local server PhoneGap Desktop App & PhoneGap Mobile App 3.  Compiled in the cloud hSps://build.PhoneGap.com 4.  From SDKs/IDEs: Android Studio/Intel XDK/ others… •  We’ll see them all… INTRODUCTION
  17. 17. Summary •  Act as an app container –  Mobile apps HTML/JS/CSS, packaged as na5ve app •  Consistent JS API across supported devices •  Major device plaorms have good support •  Cordova is the engine of PhoneGap •  Cordova can be used straight-up, bypassing the PhoneGap-branded download •  Extensible via plugins •  Free & open source INTRODUCTION
  18. 18. CORDOVA
  19. 19. Basic requirements •  ANT (Another Neat Tool) J – hSp://ant.apache.org/ •  Download •  Unpack •  ANT_HOME path to ant folder •  PATH add ANT_HOMEbin to PATH env var –  Depends on OS •  GIT client (hSps://git-scm.com/ ) •  Node.js (hSps://nodejs.org/ ) – Be sure node and npm can be executed CORDOVA
  20. 20. Advanced requirements •  Android SDK •  iOS: Xcode •  Windows: Windows Phone SDK •  See details and more mobile OSs: hSps://cordova.apache.org/docs/en/latest/ guide/plaorms/index.html
  21. 21. Configura5on (OSX Unix) ANDROID_HOME=/opt/google/android-sdk-linux ANT_HOME=/opt/Apache/apache-ant-1.9.6 ANDROID_EMULATOR_FORCE_32BIT=true export ANDROID_HOME export ANT_HOME export ANDROID_EMULATOR_FORCE_32BIT PATH=${PATH}:${ANDROID_HOME}/tools:$ {ANT_HOME}/bin export PATH CORDOVA
  22. 22. Configuring Linux •  Some versions of Linux come with ‘node’ command, not related with ‘node.js’ •  Solu5ons: – sudo apt-get install nodejs-legacy – sudo ln –s /usr/bin/node /usr/bin/nodejs – Stackoverflow and hSps://github.com/nodejs/node-v0.x-archive/ issues/3911 gives you more informa5on
  23. 23. Configura5on (Windows) WinXP/Vista Start-> My PC (right click)-> Properties Advanced Options -> Environment variables Win 8/10 Start -> Computer (right click)-> properties Advanced system settings -> Environment variables (Note: view may differ upon WinOS version) CORDOVA
  24. 24. Add environment variables •  Edit PATH •  Add ANDROID_HOME ANT_HOME •  If running on a 32bit system: ANDROID_EMULATOR_ FORCE_32BIT=true CORDOVA
  25. 25. Installing Cordova •  Flavours OSX UNIX: $ sudo npm install –g cordova Windows : C:> npm install –g cordova •  Without –g: local installa5on, user only CORDOVA
  26. 26. Simple example $> cordova create hello com.example.hw HelloWorld $> cd hello $ hello> cordova platform add android $ hello> cordova build $ hello> cordova emulate android CORDOVA
  27. 27. Simple example explained (I) cordova create hello com.example.hello HelloWorld •  Hello: folder •  Com.example.hello: package •  HelloWorld: webapp name CORDOVA
  28. 28. Simple example explained (II) $> cd hello $ hello> cordova platform add android $ hello> cordova build $ hello> cordova emulate android Go to hello folder Add plaorm android Build android na5ve app Emulate app See next slide to configure emulator CORDOVA
  29. 29. Comnfiguring android emulator •  Install android SDK – android command must be available •  Create an AVD (Android Virtual Device) –  cordova emulate android will use the first AVD •  May specify a specific one: cordova emulate android --target “<AVD name>” CORDOVA
  30. 30. Installing in Android emulator $> cordova emulate android ... BUILD SUCCESSFUL Total time: 34.789 secs Built the following apk(s): /Users/gabriel/Docencia/PhoneGap/Ejemplos/hello/ platforms/android/build/outputs/apk/android-debug.apk Installing app on emulator... Using apk: /Users/gabriel/Docencia/PhoneGap/Ejemplos/ hello/platforms/android/build/outputs/apk/android- debug.apk INSTALL SUCCESS Unlocking screen... Launching application... LAUNCH SUCCESS CORDOVA
  31. 31. CORDOVA Execu5ng the app
  32. 32. Commands Global Commands create ................... Create a project help ..................... Get help for a command Project Commands info ..................... Generate project information requirements .............. Checks and print out all the requirements for platforms specified platform .................. Manage project platforms plugin .................... Manage project plugins CORDOVA
  33. 33. Commands prepare ........... Copy files into platform(s) for building compile ........... Build platform(s) clean ............. Cleanup project from build artifacts run ............... Run project (including prepare && compile) serve ............. Run project with a local webserver (including prepare) aliases: build -> cordova prepare && cordova compile emulate -> cordova run --emulator CORDOVA
  34. 34. iOS •  Emulator MUST be installed •  XCode CORDOVA
  35. 35. iOS $> sudo npm install -g ios-sim $> cordova platform add ios $> cordova emulate ios Building project : /Users/gabriel/Docencia/PhoneGap/Ejemplos/hello/ platforms/ios/HelloWorld.xcodeproj Configuration : Debug Platform : emulator ... === BUILD TARGET CordovaLib OF PROJECT CordovaLib WITH CONFIGURATION Debug === ... ** BUILD SUCCEEDED ** No target specified for emulator. Deploying to iPhone-6 simulator es.upm.dit.iweb.hello: 9088 ** RUN SUCCEEDED ** CORDOVA
  36. 36. iOS emulator $> cordova platform add ios $> ./platforms/ios/cordova/lib/list-emulator-images iPhone-4s, 9.1 iPhone-5, 9.1 ... $> cordova emulate ios --target="iPhone-4s" $> cordova emulate ios --target="iPad-Air" $> cordova emulate ios --target="iPhone-6" $> cordova emulate ios --target="iPhone-6-Plus” $> ios-sim showdevicetypes iPhone-4s, 9.1 iPhone-5, 9.1 ... CORDOVA
  37. 37. Browser •  Run app on a (chrome) browser cordova plaorm add browser cordova run browser CORDOVA
  38. 38. Installing on Android device •  USB connected devices – adb devices: list connected devices – Be sure developer op5ons are enabled in device •  hSp://developer.android.com/intl/es/tools/device.html o cordova run --device android o adb -s <deviceId> install –r plaorms/android/ build/outputs/apk/<choose-one>.apk •  May distribute the apk via cloud storage (drive, drop-box, one,…), by e-mail, … CORDOVA
  39. 39. Installing on iOS device •  Unfortunately, I do not know… yet CORDOVA
  40. 40. Communica5ng with the HW •  Plugins: add-on code that provides an interface to na5ve components hSp://cordova.apache.org/plugins/ •  Registered in registry.cordova.io –  Also third-party plugins •  Commands and op5ons: cordova plugin ls: lista los plugins instalados cordova plugin search <word>: busca plugin cordova plugin add <name>: añade el plugin <name> cordova plugin remove <plugin>: elimina un plugin instalado CORDOVA
  41. 41. Available plugins (I) •  Basic device informa5on (Device API): $ cordova plugin add cordova-plugin-device •  Network Connec5on and BaSery Events: $ cordova plugin add cordova-plugin-network-informa5on $ cordova plugin add cordova-plugin-baSery-status •  Accelerometer, Compass, and Geoloca5on: $ cordova plugin add cordova-plugin-device-mo5on $ cordova plugin add cordova-plugin-device-orienta5on $ cordova plugin add cordova-plugin-geoloca5on CORDOVA
  42. 42. Available plugins (II) •  Camera, Media playback and Capture: $ cordova plugin add cordova-plugin-camera $ cordova plugin add cordova-plugin-media-capture $ cordova plugin add cordova-plugin-media •  Access files on device or network (File API): $ cordova plugin add cordova-plugin-file $ cordova plugin add cordova-plugin-file-transfer CORDOVA
  43. 43. Available plugins (III) •  No5fica5on via dialog box or vibra5on: $ cordova plugin add cordova-plugin-dialogs $ cordova plugin add cordova-plugin-vibra5on •  Contacts: $ cordova plugin add cordova-plugin-contacts •  Globaliza5on: $ corova plugin add cordova-plugin-globaliza5on CORDOVA
  44. 44. Available plugins (IV) •  Splashscreen: $ cordova plugin add cordova-plugin-splashscreen •  Open new browser windows (InAppBrowser): $ cordova plugin add cordova-plugin-inappbrowser •  Debug console: $ cordova plugin add cordova-plugin-console CORDOVA
  45. 45. From GIT •  If not registered in registry.cordova.io cordova plugin add hSps://github.com/apache/cordova-plugin-console.git •  And all git op5ons: tag, branch, in parts, … $ cordova plugin add hSps://github.com/apache/cordova-plugin-console.git#r0.2.0 $ cordova plugin add hSps://github.com/apache/cordova-plugin-console.git#CB-8438cordova- plugin-console $ cordova plugin add hSps://github.com/apache/cordova-plugin- console.git#f055daec45575bf08538f885e09c85a0eba363ff If the plugin (and its plugin.xml file) is in a subdirectory within the git repo, you can specify it with a : character. Note that the # character is s5ll needed: $ cordova plugin add hSps://github.com/someone/aplugin.git#:/my/sub/ dir CORDOVA
  46. 46. Local Plugin •  Specify the path to the directory where the plugin.xml is located $ cordova plugin add ../my_plugin_dir CORDOVA
  47. 47. plugman •  The CLI adds plugin code as appropriate for each plaorm. •  If you want to develop with lower-level shell tools or plaorm SDKs –  Use plugman u5lity to add plugins separately for each plaorm •  Instale with: npm install –f plugman hSps://cordova.apache.org/docs/en/latest/plugin_ref/ plugman.html CORDOVA
  48. 48. plugman •  Adding: $ plugman --plaorm <ios|amazon- fireos|android|blackberry10|wp8> --project <directory> --plugin <name|url|path> [-- plugins_dir <directory>] [--www <directory>] [-- variable <name>=<value> [--variable <name>=<value> ...]] •  Removing: $ plugman --uninstall --plaorm <ios| amazon-fireos|android|blackberry10|wp8> -- project <directory> --plugin <id> [--www <directory>] [--plugins_dir <directory>] •  And much more… out of our scope J CORDOVA
  49. 49. Plaorm Support •  hSp://phonegap.com/about/feature/ CORDOVA
  50. 50. ADVANCES EXAMPLES
  51. 51. Examples •  Camera – Takes photos and displays them as a gallery •  Doc – API: hSps://github.com/apache/cordova-plugin- camera – Examples in GIT: hSps://github.com/jesurod09/PFC.git – Several examples, let’s use camara(OK) ADVANCED EXAMPLES
  52. 52. Examples ADVANCED EXAMPLES •  Samples in GitHub, by J. Rodríguez & G. Huecas – hSps://github.com/jesurod09/PFC.git – One small app per characteris5c •  Sensors, geoloca5on, connec5vity, storage and file system, chips and other hw, na5ve sojware,…
  53. 53. Example: take a picture $ /> git clone https://github.com/jesurod09/PFC.git $ /> cordova create camera es.upm.dit.iweb.cam CameraBasic $ /> cp -r “./PFC/Camera(OK)/www/*” ./camera/www/ $ /> cd camera $ camera/> cordova platform add android ios $ camera/> cordova plugin add cordova-plugin-camera $ camera/> cordova build android $ camera/> cordova emulate android $ camera/> cordova build ios $ camera/> cordova emulate ios ADVANCED EXAMPLES
  54. 54. Geolocali5on •  Objet geoloca'on: loca5on informa5on – GPS based – Also IP network, RFID, WiFi, Bluetooth MAC, GSM/ CDMA •  Without warranty •  Based on W3C geoloca5on specifica5on ADVANCED EXAMPLES
  55. 55. Privacity •  The browser does not reveal loca5on to the server •  Different UX for each browser •  ALL OF THEM ask, pasively or ac5vely, for user permission –  User is informed: •  Website wants to access •  Which website ask for data •  User chooses to share… or not –  Browser may remember for further requests ADVANCED EXAMPLES
  56. 56. Geolocaliza5on: methods (I) •  geoloca5on.getCurrentPosi5on – Returns the device loca5on in a Posi5on object – Parameters: •  geoloca5onSuccess: callback if geoloca5on succeed, posi5on is passed as parameter •  geoloca5onError: (Op5onal) callback in case of error •  geoloca5onOp5ons: (Op5onal) loca5on op5ons ADVANCED EXAMPLES
  57. 57. Geolocaliza5on: methods (II) •  geoloca5on.watchPosi5on – Inmediately returns a WatchID (string) – Asynchronously watches changes in device posi5on – Parameters: •  geoloca5onSuccess: callback when device posi5on differs significantly from previous one –  Posi5on as a parameter •  geoloca5onError: (Op5onal) callback in case of error •  geoloca5onOp5ons: (Op5onal) geoloca5on op5ons ADVANCED EXAMPLES
  58. 58. Geolocaliza5on: methods (III) •  geoloca5on.clearWatch – Stop watching process – Parameters •  WatchID: iden5fier of previous watch process –  No further ac5on if invalid ID ADVANCED EXAMPLES
  59. 59. Geolocaliza5on: objects (I) •  Read-only objects: Position and PositionOptions •  Position has two fields, the posi5on (coords) and the 5me (5mestamp) – cords: Coordinates – 5mestamp: DOMTimeStamp ADVANCED EXAMPLES
  60. 60. Geoloca5on: objects (II) •  Coordinates –  la5tude: La5tude in decimal degrees. (Number) –  longitude: Longitude in decimal degrees. (Number) –  al5tude: Height of the posi5on in meters above the ellipsoid. (Number) –  accuracy: Accuracy level of the la5tude and longitude coordinates in meters. (Number) –  al5tudeAccuracy: Accuracy level of the al5tude coordinate in meters. (Number) –  heading: Direc5on of travel, specified in degrees coun5ng clockwise rela5ve to the true north. (Number) –  speed: Current ground speed of the device, specified in meters per second. (Number) ADVANCED EXAMPLES
  61. 61. Geoloca5on: objects (III) •  Posi5onOp5ons: – enableHighAccuracy: boolean – 5meout: unsigned long – maximunAge: unsigned long ADVANCED EXAMPLES
  62. 62. PHONEGAP
  63. 63. What is PhoneGap •  hSps://build.phonegap.com/ •  PhoneGap wraps cordova with some differences cordova build -> local, requires proper SDKs phonegap: same interface (commands/op5ons) than cordova, BUT: phonegap remote [command] -> execute commands against the Phonegap Build Service -> Adobe cloud No local installed SDK requirement!! phonegap cordova <command>: enforces specific version of cordova command PHONEGAP
  64. 64. Descrip5on •  1 Phonegap – Desktop App •  Visual interface •  Drag & drop – CLI (Command Line Interface) •  2 Phonegap Developer App – is a mobile app that runs on devices and allows you to preview and test the PhoneGap mobile apps you build across plaorms without addi5onal plaorm SDK setup PHONEGAP
  65. 65. Installing PhoneGap •  Few simple requirements –  node.js & git – Then: npm install –g phonegap •  Install Mobile App – Locate PhoneGap Developer app and install •  iTunes, Google Play, Windows Phone Store
  66. 66. Serving an App •  phonegap serve [op5ons] – Start a local web server to host the applicaiton for the PhoneGap Developer app (or any browser) to consume $ phonegap serve $ phonegap serve --port 1337 $ phonegap serve --no-autoreload $ phonegap serve --localtunnel $ phonegap app PHONEGAP
  67. 67. Simple example $> phonegap create helloPG com.examples.hw HelloWorldPG $> cd helloPG/ $> phonegap platform add android $> phonegap platform add ios $> phonegap build android [phonegap] executing 'cordova build android'... [phonegap] completed 'cordova build android' $> phonegap run android [phonegap] executing 'cordova run android'... [phonegap] completed 'cordova run android’ $> phonegap serve [phonegap] starting app server... [phonegap] listening on 138.4.13.47:3000 [phonegap] listening on 138.4.4.193:3000 [phonegap] [phonegap] ctrl-c to stop the server [phonegap]
  68. 68. Running the example
  69. 69. Installing Desktop App •  Mac OS X o Windows installer: hSp://docs.phonegap.com/ ge€ng-started/1-install- phonegap/desktop/ PHONEGAP
  70. 70. Using PhoneGap Desktop App (I) •  Click here to create a new project or add an exis5ng one •  Click here to change the default se€ngs – Server port •  Default: 3000 – Send anonymous diagnos5c & usage data
  71. 71. Using PhoneGap Desktop App (II) •  One project served at a 5me •  Click here to stop serving a project •  IP and port data
  72. 72. Again, run the example
  73. 73. ADOBE BUILD
  74. 74. PhoneGap Build en la nube •  phonegap remote build android – (cordova plaorm add android; cordova build) – Requires account in Phonegap Build •  One private app limit •  QR code generated, can be scanned by a mobile device to install app ADOBE BUILD
  75. 75. $ phonegap remote login $ phonegap remote build ios $ phonegap remote install android $ phonegap remote run ios $ phonegap remote logout PhoneGap remote commands •  login: login to PhoneGap Build –  requires an account and your creden5als •  logout: logout of PhoneGap Build •  build <plaorm>: build a specific plaorm •  install <plaorm>: install a specific plaorm –  returns a generated QR code in the terminal •  run <plaorm>: build and install a specific plaorm ADOBE BUILD
  76. 76. ADOBE BUILD hSps://build.phonegap.com
  77. 77. ADOBE BUILD
  78. 78. Remote build $> phonegap create helloPG com.examples.hw HelloWorldPG $> cd helloPG/ $> phonegap platform add android $> phonegap remote build android [phonegap] compressing the app... [phonegap] uploading the app... [phonegap] building the app... [phonegap] Android build complete $>
  79. 79. ADOBE BUILD
  80. 80. SDKS
  81. 81. Ejecución en Android Studio •  Once android plaorm is added, project can be opened within Android Studio cordova build android •  Launch the Android Studio applica5on SDKs: ANDROID STUDIO
  82. 82. Ejecución en Android Studio •  Select Import Project (Eclipse ADT, Gradle, etc) SDKS: ANDROID STUDIO
  83. 83. Ejecución en Android Studio •  Select loca5on of the android plaorm (project/platforms/ android) •  For the Gradle Sync ques5on you can simply answer Yes SDKS: ANDROID STUDIO
  84. 84. Intel XDK •  SDK: hSps://sojware.intel.com/es-es/intel-xdk •  AppPreview: para iOS, android, Windows phone
  85. 85. ionic •  hSp://ionicframework.com
  86. 86. Thank for aSending! •  G. Huecas •  TwiSer: @ghuecas •  www.dit.upm.es/~gabriel

×