PhoneGapBuildGeneraciónde

AplicacionesMóvilesNa7vasconHTML/JS/CSS

GabrielHuecas

24deEnerode2016

Obje7vo

•  Construiraplicacionesmóvilesmul7plataformabasadasenHTML5,JS&CSS3– Evitandoeldesarrollona7voparacadaSistemaOpera7vo•  SinnecesidaddeusarloslenguajespropiosdeAndroid/iOS/WindowsPhone/etc.

– Mismodesarrollo(90-95%código)paratodoslosmóviles

– Algunasadaptacionesmenores

•  MediantePhoneGapBuild

Índice

•  Cordova•  PhoneGap•  Caracterís7casbásicas•  ElentornoPhoneGapAdobeBuild•  Generaraplicaciónmóvil– Android,iOS,WindowsPhone

•  Ejemplo:CronómetroSegundero– adaptadoadisposi7vosmóviles

Cordova

•  h\p://cordova.apache.org•  Esunentornopara– Construiraplicacionesna7vasparadisposi7vosmóvilesusandoHTML,JS&CSS

– ConjuntodeAPIsdedisposi7vo:•  permitenalosdesarrolladoresaccederafacilidadesna7vasdeldisposi7vodesdeJS

•  Libreydecódigoabierto– ApacheSo_wareFounda7on

PhoneGap

•  h\p://phonegap.com•  ProductodeAdobe•  IncluyeCordova•  Añadefacilidadesdegeneracióndeaplicacionesna7vas:PhoneGapBuild– obje7vodeestetema

S.O.móvilessoportados

AmazonFireOS Android Bada Blackberry10

FirefoxOS iOS Symbian Tizen

Ubuntu WebOS Windows8 WindowsPhone7

WindowsPhone8

h\p://cordova.apache.org/docs/en/latest/guide/support/index.html

EmpaquetamientoyDistribución

•  Aplicacionesinstaladasenformana7va–  iOS->.ipa(iPhoneApplica7onArchive)– Android->.apk(AndroidApplica7onPackage)– WindowsPhone->.xap(Microso_WindowPhoneOSapplica7onpackage)

•  Distribuidasatravésdelascorrespondientes7endas:

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

Interfaz

•  ElInterfazdeUsuariocreadoconHTML,CSSyJS–  ocupatodalapantalla

•  100%x100%•  Unaúnicaventana

InterfazdeusuariobasadoenWebView

(NavegadorWeb)100%x100%

VistaWebna7va

•  Diferentesmotoresderenderizado–  Elresultadopodríaserdiferenteendis7ntosmóviles•  Desarrollo•  Pruebas•  ExperienciadeUsuario

S.O. Componente

iOS UIWebView

Android Android.webkit-WebView

Etc. Etc.

AccesoalDisposi7voMóvil

•  DesdeJSseaccedeatravésde‘plugins’atodaslasfuncionesdelmóvil– Plugin:códigoqueproporcionafuncionesdeaccesoasensores,conec7vidad,elementosbásicosdeldisposi7vo•  elmismoAPIparaiOS,Android,etc.

– Porejemplo,labrújula,lacámara,lavibración,contactos,geolocalización,…

– h\ps://cordova.apache.org/plugins/

EjecutarunaaplicaciónWeb1.  Compilarlocalmente–  requiereinstalarPhoneGap/Cordova,elentornodecada

plataformamóvil(AndroidSDK,iOSXCode,etc.)–  yconocimientosespecíficosdecadaplataforma

2.  EnunservidorlocalPhoneGapDesktopApp&PhoneGapDeveloperApp

3.  Compilarenlanubeh\ps://build.PhoneGap.com

4.  Apar7rdeEntornosdeDesarrolloNa7vos:AndroidStudio/IntelXDK/otros

•  Veremosel3,quenorequiereinstalaciónniaprenderdetallesespecíficosdecadaplataforma

ResumenCordova/PhoneGap

•  Actúacomouncontenedordeaplicaciones– appsmóvilesHTML/JS/CSS,empaquetadascomosifueranna7vas

•  ProporcionaAPIsdeJSconsistentesparatodoslosdisposi7vossoportados

•  Lasplataformasmóvilesmásimportantesdisponendemuybuensoporte

•  Ex7endeJSatravésde‘plugins’•  CordovaeselmotordePhoneGap

CronómetroconVibración•  Alterminarlacuentaatrás–  Cambiamoslaalarmaporunpi7do–  Añadimosvibración,quitamoselalert

•  Añadimoscordova.js:accesoafuncionesdeldisposi7vo•  Inicializamoseldisposi7vo–  onDeviceReadyfunc7on

•  podríamosmoverelcuerpodeonLoad()aestemétodo

•  Usamosinteract.min.jsparamejorarprestaciones–  alhacer‘click’enlaesferaparaincrementarelsegundero

•  Añadimosconfig.xml–  paradarpermisosyaccesos

•  Incluimosiconosadiferentesresoluciones

Modificaciones(I)

•  Añadimosiconosparalasdiferentesresolucionesdedisposi7vosmóviles–  36,48,62,72,96,173sonlasmáscomunes

–  convienellamarlasasí•  generadasapar7rdelaesferadelreloj

•  Añadimos‘interact.min.js’–  mejorinteracciónconelmóvil

Modificaciones(II)•  incluimos‘interact.min.js’y‘cordova.js’

•  Añadimoses7losespecíficosparamóviles

•  Añadimos‘addEventListener’y‘onDeviceReady()

Modificaciones(III)

•  Cambiamoslareproduccióndesonidoporunpi7doyunavibración

•  Yborramoseldivconelsonidoenelbody

config.xml

•  Elfichero‘config.xml’proporcionado– con7eneelnombredelaapp,sudescripción,informacióndelautor

–  importalasprincipalesbibliotecasdeaccesoahardware•  noseusantodas,vancomoejemplo

– cargalosiconos

PhoneGapBuildenlanube

•  Permitecompilarunaaplicaciónwebaunaaplicaciónna7vamóvil

•  RequierecrearunacuentaenPhonegapBuild•  Sincostepermiteunnúmeroilimitadodeaplicacionespúblicasyunaprivada– sepuedeadquirirlicenciasparamás

•  GenerauncódigoQR,quesepuedeescaneardesdeelmóvilparainstalarlaaplicación

h\ps://build.phonegap.com

Pantallainicial

empaquetadocomoun.zip

subirelcódigo

desdeunrepositoryGIT

Subirelcódigo

•  Hacemosun.zipconelcódigo– elnombreyeliconoaparecenenlazonadeapp

Iconoynombredelaaplicación

pincharaquíparagenerarlasappsna7vas

códigoBidiparadescargaeinstalaciónenelmóvil

paquetescompiladosendis7ntasplataformas

Aplicaciónna7va

iPhone

Android

¡Graciasporsuatención!

•  G.Huecas

•  Twi\er:@ghuecas

•  www.dit.upm.es/~gabriel