cordova / phonegap, mobile apps development with html5/js/css
TRANSCRIPT
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