Cordova / PhoneGap, mobile apps development with HTML5/JS/CSS
8 likes3,496 views
The document provides an overview of Cordova/PhoneGap mobile application development using HTML, JavaScript, and CSS, outlining its purpose, supported platforms, and basic requirements for building cross-platform mobile apps. It discusses the use of plugins to access native device functions as well as various frameworks and tools for packaging and distributing apps. Additionally, it includes detailed instructions for installation, configuration, and running apps on different platforms and devices.
![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](https://image.slidesharecdn.com/phonegap3-151130123452-lva1-app6891/85/Cordova-PhoneGap-mobile-apps-development-with-HTML5-JS-CSS-48-320.jpg)
![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](https://image.slidesharecdn.com/phonegap3-151130123452-lva1-app6891/85/Cordova-PhoneGap-mobile-apps-development-with-HTML5-JS-CSS-63-320.jpg)
![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](https://image.slidesharecdn.com/phonegap3-151130123452-lva1-app6891/85/Cordova-PhoneGap-mobile-apps-development-with-HTML5-JS-CSS-66-320.jpg)
![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]](https://image.slidesharecdn.com/phonegap3-151130123452-lva1-app6891/85/Cordova-PhoneGap-mobile-apps-development-with-HTML5-JS-CSS-67-320.jpg)
![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
$>](https://image.slidesharecdn.com/phonegap3-151130123452-lva1-app6891/85/Cordova-PhoneGap-mobile-apps-development-with-HTML5-JS-CSS-78-320.jpg)
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