Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
•
8 likes•3,489 views
Build mobile cross platform apps with HTML5, JS & CSS3 Avoiding each mobile platforms’ native development language
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (19)
Similar to Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
Similar to Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS (20)
Recently uploaded
Recently uploaded (20)
Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
- 2. Layout • Introduc5on • Cordova – Hello World – Plugins • Advanced examples • Phonegap • Adobe build • Other SDKs: Android Studio, Ionic, Intel XDk,…
- 3. INTRODUCTION
- 4. Resources • hSp://cordova.apache.org/ • www.phonegap.com – FAQ: hSp://phonegap.com/about/faq/ • hSps://build.phonegap.com/ INTRODUCTION
- 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. 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. 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. 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. 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. 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. 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. 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
- 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. 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. 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. CORDOVA
- 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. 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. 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
- 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. Add environment variables • Edit PATH • Add ANDROID_HOME ANT_HOME • If running on a 32bit system: ANDROID_EMULATOR_ FORCE_32BIT=true CORDOVA
- 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. 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. Simple example explained (I) cordova create hello com.example.hello HelloWorld • Hello: folder • Com.example.hello: package • HelloWorld: webapp name CORDOVA
- 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
- 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
- 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. 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
- 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. 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
- 46. Local Plugin • Specify the path to the directory where the plugin.xml is located $ cordova plugin add ../my_plugin_dir CORDOVA
- 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. 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
- 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. 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. 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. 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. Geolocaliza5on: methods (III) • geoloca5on.clearWatch – Stop watching process – Parameters • WatchID: iden5fier of previous watch process – No further ac5on if invalid ID ADVANCED EXAMPLES
- 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
- 62. PHONEGAP
- 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. 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. 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
- 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. Using PhoneGap Desktop App (II) • One project served at a 5me • Click here to stop serving a project • IP and port data
- 73. ADOBE BUILD
- 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. $ 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
- 77. ADOBE BUILD
- 79. ADOBE BUILD
- 80. SDKS
- 82. Ejecución en Android Studio • Select Import Project (Eclipse ADT, Gradle, etc) SDKS: ANDROID STUDIO
- 86. Thank for aSending! • G. Huecas • TwiSer: @ghuecas • www.dit.upm.es/~gabriel