Cordova/PhoneGapMobileApplica5onDevelopment

withHTML/JS/CSSGabrielHuecas

December3,2015

Layout

•  Introduc5on•  Cordova– HelloWorld– Plugins

•  Advancedexamples•  Phonegap•  Adobebuild•  OtherSDKs:AndroidStudio,Ionic,IntelXDk,…

INTRODUCTION

Resources

•  hSp://cordova.apache.org/•  www.phonegap.com– FAQ:hSp://phonegap.com/about/faq/

•  hSps://build.phonegap.com/

INTRODUCTION

Goal

•  Buildcrosspla\ormmobileappswithHTML5,JS&CSS3– Avoidingeachmobilepla\orms’na5vedevelopmentlanguage•  EventheSDKthroughAdobePhonegapBuild

INTRODUCTION

Useifyouare:•  Amobiledeveloper–  wanttoextendanapplica5onacrossmorethanonepla\orm,withouthavingtore-implementitwitheachpla\orm'slanguageandtoolset.

•  Awebdeveloper–  wanttodeployawebappthat'spackagedfordistribu5oninvariousappstoreportals.

•  Amobiledeveloper–  interestedinmixingna5veapplica5oncomponentswithaWebView(browserwindow)thatcanaccessdevice-levelAPIs,

–  orifyouwanttodevelopaplugininterfacebetweenna5veandWebViewcomponents.

INTRODUCTION

Frameworkfor

•  Pla\ormforbuildingna5vemobileappsusingHTML,JS&CSS

•  SetofDeviceAPIs– Allowsmobileappdevelopertoaccessna5vedevicefunc5onsfromJS

•  CombinedwithUIframework–  JqueryMobile,DojoMobile,SenchaTouch

INTRODUCTION

SupportedOS

AmazonFireOS Android Bada Blackberry10

FirefoxOS iOS Symbian Tizen

Ubuntu WebOS Windows8 WindowsPhone7

WindowsPhone8

INTRODUCTION

hSp://cordova.apache.org/docs/en/latest/guide/support/index.html

Packaging&Distribu5on

•  Na5ve-installedapplica5on–  iOS->.ipa(iPhoneApplica5onArchive)– Android->.apk(AndroidApplica5onPackage)– WindowsPhone->.xap(MicrosojWindowPhoneOSapplica5onpackage)

•  Distributedthroughcorrespondingchannels:•  iTunes,GooglePlay,AmazonMarket,BlackBerryAppWorld,WindowsPhoneMarketplace,etc.

INTRODUCTION

Interface

•  TheappUIcreatedwithHTML,CSS&JS–  100%x100%

•  Justonedisplay UserInterfaceBrowser-based

WebView100%x100%

INTRODUCTION

Na5veWebview

•  Severalrenderingengined –  Resultmaydiffer

•  Development•  Tes5ng•  UX

S.O. Componente

iOS UIWebView

Android Android.webkit-WebView

Etc. Etc.

INTRODUCTION

Client-Server

•  CordovaclientAppconnectswithserverapp– Datasend/receive,bussineslogin,DataBasecommunica5on

– Server:any•  Apache,IIS,nginx,…•  ServerApp:Java,PHP,Ruby,Node.js,…

•  Cordovaclientappindependantofbackendtechnology– Standardwebprotocolos

INTRODUCTION

DataBases

•  Cordovaclientapp(usually)donotinteractdirectlywiththedatabase– Throughtheserver– StandardHTTPrequests

•  REST-ful,XML,JSON,SOAP,websockets–  SametechniquesAJAX-basedapps

INTRODUCTION

Frameworks

•  Facilitateourappbehaveslikena5ve–  JQueryMobile,SenchaTouch,…

INTRODUCTION

DeviceAPIs•  Accelerometer•  BaSeryStatus•  Camera•  Capture•  Compass•  Connec5on•  Contacts•  Device•  Events•  File

•  Geoloca5on•  Globaliza5on

–  Locale,language,and5mezone

•  InAppBrowser•  Media•  No5fica5on•  SplashScreen•  StatusBar•  Storage•  Vibra5on

hSps://cordova.apache.org/plugins/

INTRODUCTION

Runningtheapp1.  Localbuild:runsinadeviceoremulator2.  Throughalocalserver

PhoneGapDesktopApp&PhoneGapMobileApp

3.  CompiledinthecloudhSps://build.PhoneGap.com

4.  FromSDKs/IDEs:AndroidStudio/IntelXDK/others…

•  We’llseethemall…

INTRODUCTION

Summary

•  Actasanappcontainer– MobileappsHTML/JS/CSS,packagedasna5veapp

•  ConsistentJSAPIacrosssupporteddevices•  Majordevicepla\ormshavegoodsupport•  CordovaistheengineofPhoneGap•  Cordovacanbeusedstraight-up,bypassingthePhoneGap-brandeddownload

•  Extensibleviaplugins•  Free&opensource

INTRODUCTION

CORDOVA

Basicrequirements

•  ANT(AnotherNeatTool)J– hSp://ant.apache.org/

•  Download•  Unpack•  ANT_HOMEpathtoantfolder•  PATHaddANT_HOME\bintoPATHenvvar

–  DependsonOS

•  GITclient(hSps://git-scm.com/)•  Node.js(hSps://nodejs.org/)– Besurenodeandnpm canbeexecuted

CORDOVA

Advancedrequirements

•  AndroidSDK•  iOS:Xcode•  Windows:WindowsPhoneSDK

•  SeedetailsandmoremobileOSs:hSps://cordova.apache.org/docs/en/latest/guide/pla\orms/index.html

Configura5on(OSXUnix)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

ConfiguringLinux

•  SomeversionsofLinuxcomewith‘node’command,notrelatedwith‘node.js’

•  Solu5ons:– sudoapt-getinstallnodejs-legacy– sudoln–s/usr/bin/node/usr/bin/nodejs– StackoverflowandhSps://github.com/nodejs/node-v0.x-archive/issues/3911givesyoumoreinforma5on

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:viewmaydifferuponWinOSversion)

CORDOVA

Addenvironmentvariables

•  EditPATH•  AddANDROID_HOME

ANT_HOME

•  Ifrunningona32bitsystem:

ANDROID_EMULATOR_FORCE_32BIT=true

CORDOVA

InstallingCordova

•  FlavoursOSX UNIX: $ sudo npm install –g cordova Windows : C:\> npm install –g cordova

•  Without–g:localinstalla5on,useronly

CORDOVA

Simpleexample

$> cordova create hello com.example.hw HelloWorld

$> cd hello

$ hello> cordova platform add android

$ hello> cordova build

$ hello> cordova emulate android

CORDOVA

Simpleexampleexplained(I)cordova create hello com.example.hello HelloWorld

•  Hello:folder•  Com.example.hello:package•  HelloWorld:webappname

CORDOVA

Simpleexampleexplained(II)$>cdhello$hello>cordovaplatformaddandroid$hello>cordovabuild$hello>cordovaemulateandroid

GotohellofolderAddpla\ormandroidBuildandroidna5veappEmulateapp

Seenextslidetoconfigureemulator

CORDOVA

Comnfiguringandroidemulator

•  InstallandroidSDK– androidcommandmustbeavailable

•  CreateanAVD(AndroidVirtualDevice)–  cordova emulate androidwillusethefirstAVD

•  Mayspecifyaspecificone:cordova emulate android --target “<AVD name>”

CORDOVA

InstallinginAndroidemulator$>cordovaemulateandroid...BUILDSUCCESSFULTotaltime:34.789secsBuiltthefollowingapk(s):/Users/gabriel/Docencia/PhoneGap/Ejemplos/hello/platforms/android/build/outputs/apk/android-debug.apkInstallingapponemulator...Usingapk:/Users/gabriel/Docencia/PhoneGap/Ejemplos/hello/platforms/android/build/outputs/apk/android-debug.apkINSTALLSUCCESSUnlockingscreen...Launchingapplication...LAUNCHSUCCESS

CORDOVA

CORDOVA

Execu5ngtheapp

CommandsGlobalCommandscreate...................Createaprojecthelp.....................GethelpforacommandProjectCommandsinfo.....................Generateprojectinformationrequirements..............Checksandprintoutalltherequirementsforplatformsspecifiedplatform..................Manageprojectplatformsplugin....................Manageprojectplugins

CORDOVA

Commandsprepare...........Copyfilesintoplatform(s)forbuildingcompile...........Buildplatform(s)clean.............Cleanupprojectfrombuildartifactsrun...............Runproject(includingprepare&&compile)serve.............Runprojectwithalocalwebserver(includingprepare)aliases:build->cordovaprepare&&cordovacompileemulate->cordovarun--emulator

CORDOVA

iOS

•  EmulatorMUSTbeinstalled

•  XCode

CORDOVA

iOS$>sudonpminstall-gios-sim$>cordovaplatformaddios$>cordovaemulateiosBuildingproject:/Users/gabriel/Docencia/PhoneGap/Ejemplos/hello/platforms/ios/HelloWorld.xcodeproj

Configuration:DebugPlatform:emulator

...===BUILDTARGETCordovaLibOFPROJECTCordovaLibWITHCONFIGURATIONDebug===...**BUILDSUCCEEDED**Notargetspecifiedforemulator.DeployingtoiPhone-6simulatores.upm.dit.iweb.hello:9088**RUNSUCCEEDED**

CORDOVA

iOSemulator$>cordovaplatformaddios$>./platforms/ios/cordova/lib/list-emulator-imagesiPhone-4s,9.1iPhone-5,9.1...$>cordovaemulateios--target="iPhone-4s"$>cordovaemulateios--target="iPad-Air"$>cordovaemulateios--target="iPhone-6"$>cordovaemulateios--target="iPhone-6-Plus”$>ios-simshowdevicetypesiPhone-4s,9.1iPhone-5,9.1...

CORDOVA

Browser•  Runappona(chrome)browser

cordovapla\ormaddbrowsercordovarunbrowser

CORDOVA

InstallingonAndroiddevice

•  USBconnecteddevices– adbdevices:listconnecteddevices– Besuredeveloperop5onsareenabledindevice

•  hSp://developer.android.com/intl/es/tools/device.html

o cordovarun--deviceandroido adb-s<deviceId>install–rpla\orms/android/build/outputs/apk/<choose-one>.apk

•  Maydistributetheapkviacloudstorage(drive,drop-box,one,…),bye-mail,…

CORDOVA

InstallingoniOSdevice

•  Unfortunately,Idonotknow…yet

CORDOVA

Communica5ngwiththeHW•  Plugins:add-oncodethatprovidesaninterfacetona5vecomponents

hSp://cordova.apache.org/plugins/•  Registeredinregistry.cordova.io– Alsothird-partyplugins

•  Commandsandop5ons:cordovapluginls:listalospluginsinstaladoscordovapluginsearch<word>:buscaplugincordovapluginadd<name>:añadeelplugin<name>cordovapluginremove<plugin>:eliminaunplugininstalado

CORDOVA

Availableplugins(I)

•  Basicdeviceinforma5on(DeviceAPI):$cordovapluginaddcordova-plugin-device

•  NetworkConnec5onandBaSeryEvents:$cordovapluginaddcordova-plugin-network-informa5on$cordovapluginaddcordova-plugin-baSery-status

•  Accelerometer,Compass,andGeoloca5on:$cordovapluginaddcordova-plugin-device-mo5on$cordovapluginaddcordova-plugin-device-orienta5on$cordovapluginaddcordova-plugin-geoloca5on

CORDOVA

Availableplugins(II)

•  Camera,MediaplaybackandCapture:$cordovapluginaddcordova-plugin-camera$cordovapluginaddcordova-plugin-media-capture$cordovapluginaddcordova-plugin-media

•  Accessfilesondeviceornetwork(FileAPI):$cordovapluginaddcordova-plugin-file$cordovapluginaddcordova-plugin-file-transfer

CORDOVA

Availableplugins(III)

•  No5fica5onviadialogboxorvibra5on:$cordovapluginaddcordova-plugin-dialogs$cordovapluginaddcordova-plugin-vibra5on

•  Contacts:$cordovapluginaddcordova-plugin-contacts

•  Globaliza5on:$corovapluginaddcordova-plugin-globaliza5on

CORDOVA

Availableplugins(IV)

•  Splashscreen:$cordovapluginaddcordova-plugin-splashscreen

•  Opennewbrowserwindows(InAppBrowser):$cordovapluginaddcordova-plugin-inappbrowser

•  Debugconsole:$cordovapluginaddcordova-plugin-console

CORDOVA

FromGIT•  Ifnotregisteredinregistry.cordova.io

cordovapluginaddhSps://github.com/apache/cordova-plugin-console.git

•  Andallgitop5ons:tag,branch,inparts,…$cordovapluginaddhSps://github.com/apache/cordova-plugin-console.git#r0.2.0$cordovapluginaddhSps://github.com/apache/cordova-plugin-console.git#CB-8438cordova-plugin-console$cordovapluginaddhSps://github.com/apache/cordova-plugin-console.git#f055daec45575bf08538f885e09c85a0eba363ffIftheplugin(anditsplugin.xmlfile)isinasubdirectorywithinthegitrepo,youcanspecifyitwitha:character.Notethatthe#characteriss5llneeded:$cordovapluginaddhSps://github.com/someone/aplugin.git#:/my/sub/dir

CORDOVA

LocalPlugin

•  Specifythepathtothedirectorywheretheplugin.xmlislocated$ cordova plugin add ../my_plugin_dir

CORDOVA

plugman

•  TheCLIaddsplugincodeasappropriateforeachpla\orm.

•  Ifyouwanttodevelopwithlower-levelshelltoolsorpla\ormSDKs– Useplugmanu5litytoaddpluginsseparatelyforeachpla\orm

•  Instalewith:npminstall–fplugman

hSps://cordova.apache.org/docs/en/latest/plugin_ref/plugman.html

CORDOVA

plugman•  Adding:$plugman--pla\orm<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--pla\orm<ios|amazon-fireos|android|blackberry10|wp8>--project<directory>--plugin<id>[--www<directory>][--plugins_dir<directory>]

•  Andmuchmore…outofourscopeJ

CORDOVA

Pla\ormSupport

•  hSp://phonegap.com/about/feature/

CORDOVA

ADVANCESEXAMPLES

Examples

•  Camera– Takesphotosanddisplaysthemasagallery

•  Doc– API:hSps://github.com/apache/cordova-plugin-camera

– ExamplesinGIT:hSps://github.com/jesurod09/PFC.git

– Severalexamples,let’susecamara(OK)

ADVANCEDEXAMPLES

ExamplesADVANCEDEXAMPLES

•  SamplesinGitHub,byJ.Rodríguez&G.Huecas– hSps://github.com/jesurod09/PFC.git– Onesmallapppercharacteris5c

•  Sensors,geoloca5on,connec5vity,storageandfilesystem,chipsandotherhw,na5vesojware,…

Example:takeapicture$/>gitclonehttps://github.com/jesurod09/PFC.git$/>cordovacreatecameraes.upm.dit.iweb.camCameraBasic$/>cp-r“./PFC/Camera(OK)/www/*”./camera/www/$/>cdcamera$camera/>cordovaplatformaddandroidios$camera/>cordovapluginaddcordova-plugin-camera$camera/>cordovabuildandroid$camera/>cordovaemulateandroid$camera/>cordovabuildios$camera/>cordovaemulateios

ADVANCEDEXAMPLES

Geolocali5on

•  Objetgeoloca'on:loca5oninforma5on– GPSbased– AlsoIPnetwork,RFID,WiFi,BluetoothMAC,GSM/CDMA• Withoutwarranty

•  BasedonW3Cgeoloca5onspecifica5on

ADVANCEDEXAMPLES

Privacity

•  Thebrowserdoesnotrevealloca5ontotheserver

•  DifferentUXforeachbrowser•  ALLOFTHEMask,pasivelyorac5vely,foruserpermission– Userisinformed:

•  Websitewantstoaccess•  Whichwebsiteaskfordata•  Userchoosestoshare…ornot

–  Browsermayrememberforfurtherrequests

ADVANCEDEXAMPLES

Geolocaliza5on:methods(I)

•  geoloca5on.getCurrentPosi5on– Returnsthedeviceloca5oninaPosi5onobject– Parameters:

•  geoloca5onSuccess:callbackifgeoloca5onsucceed,posi5onispassedasparameter•  geoloca5onError:(Op5onal)callbackincaseoferror•  geoloca5onOp5ons:(Op5onal)loca5onop5ons

ADVANCEDEXAMPLES

Geolocaliza5on:methods(II)

•  geoloca5on.watchPosi5on–  InmediatelyreturnsaWatchID(string)– Asynchronouslywatcheschangesindeviceposi5on

– Parameters:•  geoloca5onSuccess:callbackwhendeviceposi5ondifferssignificantlyfrompreviousone–  Posi5onasaparameter

•  geoloca5onError:(Op5onal)callbackincaseoferror•  geoloca5onOp5ons:(Op5onal)geoloca5onop5ons

ADVANCEDEXAMPLES

Geolocaliza5on:methods(III)

•  geoloca5on.clearWatch– Stopwatchingprocess– Parameters

• WatchID:iden5fierofpreviouswatchprocess–  Nofurtherac5onifinvalidID

ADVANCEDEXAMPLES

Geolocaliza5on:objects(I)

•  Read-onlyobjects:PositionandPositionOptions

•  Positionhastwofields,theposi5on(coords)andthe5me(5mestamp)– cords:Coordinates– 5mestamp:DOMTimeStamp

ADVANCEDEXAMPLES

Geoloca5on:objects(II)•  Coordinates–  la5tude:La5tudeindecimaldegrees.(Number)–  longitude:Longitudeindecimaldegrees.(Number)–  al5tude:Heightoftheposi5oninmetersabovetheellipsoid.(Number)

–  accuracy:Accuracylevelofthela5tudeandlongitudecoordinatesinmeters.(Number)

–  al5tudeAccuracy:Accuracyleveloftheal5tudecoordinateinmeters.(Number)

–  heading:Direc5onoftravel,specifiedindegreescoun5ngclockwiserela5vetothetruenorth.(Number)

–  speed:Currentgroundspeedofthedevice,specifiedinmeterspersecond.(Number)

ADVANCEDEXAMPLES

Geoloca5on:objects(III)

•  Posi5onOp5ons:– enableHighAccuracy:boolean– 5meout:unsignedlong– maximunAge:unsignedlong

ADVANCEDEXAMPLES

PHONEGAP

WhatisPhoneGap

•  hSps://build.phonegap.com/

•  PhoneGapwrapscordovawithsomedifferencescordovabuild->local,requiresproperSDKsphonegap:sameinterface(commands/op5ons)thancordova,BUT:phonegapremote[command]->executecommandsagainstthePhonegapBuildService->Adobecloud

NolocalinstalledSDKrequirement!!phonegapcordova<command>:enforcesspecificversionofcordovacommand

PHONEGAP

Descrip5on

•  1Phonegap– DesktopApp

•  Visualinterface•  Drag&drop

– CLI(CommandLineInterface)•  2PhonegapDeveloperApp–  isamobileappthatrunsondevicesandallowsyoutopreviewandtestthePhoneGapmobileappsyoubuildacrosspla\ormswithoutaddi5onalpla\ormSDKsetup

PHONEGAP

InstallingPhoneGap

•  Fewsimplerequirements–  node.js&git– Then:npminstall–gphonegap

•  InstallMobileApp– LocatePhoneGapDeveloperappandinstall•  iTunes,GooglePlay,WindowsPhoneStore

ServinganApp

•  phonegapserve[op5ons]– StartalocalwebservertohosttheapplicaitonforthePhoneGapDeveloperapp(oranybrowser)toconsume

$ phonegap serve

$ phonegap serve --port 1337

$ phonegap serve --no-autoreload $ phonegap serve --localtunnel

$ phonegap app

PHONEGAP

Simpleexample$>phonegapcreatehelloPGcom.examples.hwHelloWorldPG$>cdhelloPG/$>phonegapplatformaddandroid$>phonegapplatformaddios$>phonegapbuildandroid[phonegap]executing'cordovabuildandroid'...[phonegap]completed'cordovabuildandroid'$>phonegaprunandroid[phonegap]executing'cordovarunandroid'...[phonegap]completed'cordovarunandroid’$>phonegapserve[phonegap]startingappserver...[phonegap]listeningon138.4.13.47:3000[phonegap]listeningon138.4.4.193:3000[phonegap][phonegap]ctrl-ctostoptheserver[phonegap]

Runningtheexample

InstallingDesktopApp

•  MacOSXoWindowsinstaller:hSp://docs.phonegap.com/ge�ng-started/1-install-phonegap/desktop/

PHONEGAP

UsingPhoneGapDesktopApp(I)

•  Clickheretocreateanewprojectoraddanexis5ngone

•  Clickheretochangethedefaultse�ngs– Serverport

•  Default:3000– Sendanonymousdiagnos5c&usagedata

UsingPhoneGapDesktopApp(II)

•  Oneprojectservedata5me

•  Clickheretostopservingaproject

•  IPandportdata

Again,runtheexample

ADOBEBUILD

PhoneGapBuildenlanube

•  phonegapremotebuildandroid–  (cordovapla\ormaddandroid;cordovabuild)– RequiresaccountinPhonegapBuild

•  Oneprivateapplimit•  QRcodegenerated,canbescannedbyamobiledevicetoinstallapp

ADOBEBUILD

$phonegapremotelogin$phonegapremotebuildios$phonegapremoteinstallandroid$phonegapremoterunios$phonegapremotelogout

PhoneGapremotecommands•  login:logintoPhoneGapBuild

–  requiresanaccountandyourcreden5als•  logout:logoutofPhoneGapBuild•  build<pla\orm>:buildaspecificpla\orm•  install<pla\orm>:installaspecificpla\orm

–  returnsageneratedQRcodeintheterminal

•  run<pla\orm>:buildandinstallaspecificpla\orm

ADOBEBUILD

ADOBEBUILD

hSps://build.phonegap.com

ADOBEBUILD

Remotebuild$>phonegapcreatehelloPGcom.examples.hwHelloWorldPG$>cdhelloPG/$>phonegapplatformaddandroid$>phonegapremotebuildandroid[phonegap]compressingtheapp...[phonegap]uploadingtheapp...[phonegap]buildingtheapp...[phonegap]Androidbuildcomplete$>

ADOBEBUILD

SDKS

EjecuciónenAndroidStudio

•  Onceandroidpla\ormisadded,projectcanbeopenedwithinAndroidStudiocordovabuildandroid

•  LaunchtheAndroidStudioapplica5on

SDKs:ANDROIDSTUDIO

EjecuciónenAndroidStudio

•  SelectImportProject(EclipseADT,Gradle,etc)

SDKS:ANDROIDSTUDIO

EjecuciónenAndroidStudio

•  Selectloca5onoftheandroidpla\orm(project/platforms/android)

•  FortheGradleSyncques5onyoucansimplyanswerYes

SDKS:ANDROIDSTUDIO

IntelXDK

•  SDK:hSps://sojware.intel.com/es-es/intel-xdk

•  AppPreview:paraiOS,android,Windowsphone

ionic

•  hSp://ionicframework.com

ThankforaSending!

•  G.Huecas

•  TwiSer:@ghuecas

•  www.dit.upm.es/~gabriel