PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación...
Transcript of PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación...
![Page 1: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/1.jpg)
PhoneGapBuildGeneraciónde
AplicacionesMóvilesNa7vasconHTML/JS/CSS
GabrielHuecas
24deEnerode2016
![Page 2: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/2.jpg)
Obje7vo
• Construiraplicacionesmóvilesmul7plataformabasadasenHTML5,JS&CSS3– Evitandoeldesarrollona7voparacadaSistemaOpera7vo• SinnecesidaddeusarloslenguajespropiosdeAndroid/iOS/WindowsPhone/etc.
– Mismodesarrollo(90-95%código)paratodoslosmóviles
– Algunasadaptacionesmenores
• MediantePhoneGapBuild
![Page 3: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/3.jpg)
Índice
• Cordova• PhoneGap• Caracterís7casbásicas• ElentornoPhoneGapAdobeBuild• Generaraplicaciónmóvil– Android,iOS,WindowsPhone
• Ejemplo:CronómetroSegundero– adaptadoadisposi7vosmóviles
![Page 4: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/4.jpg)
Cordova
• h\p://cordova.apache.org• Esunentornopara– Construiraplicacionesna7vasparadisposi7vosmóvilesusandoHTML,JS&CSS
– ConjuntodeAPIsdedisposi7vo:• permitenalosdesarrolladoresaccederafacilidadesna7vasdeldisposi7vodesdeJS
• Libreydecódigoabierto– ApacheSo_wareFounda7on
![Page 5: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/5.jpg)
PhoneGap
• h\p://phonegap.com• ProductodeAdobe• IncluyeCordova• Añadefacilidadesdegeneracióndeaplicacionesna7vas:PhoneGapBuild– obje7vodeestetema
![Page 6: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/6.jpg)
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
![Page 7: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/7.jpg)
EmpaquetamientoyDistribución
• Aplicacionesinstaladasenformana7va– iOS->.ipa(iPhoneApplica7onArchive)– Android->.apk(AndroidApplica7onPackage)– WindowsPhone->.xap(Microso_WindowPhoneOSapplica7onpackage)
• Distribuidasatravésdelascorrespondientes7endas:
• iTunes,GooglePlay,AmazonMarket,BlackBerryAppWorld,WindowsPhoneMarketplace,etc.
![Page 8: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/8.jpg)
Interfaz
• ElInterfazdeUsuariocreadoconHTML,CSSyJS– ocupatodalapantalla
• 100%x100%• Unaúnicaventana
InterfazdeusuariobasadoenWebView
(NavegadorWeb)100%x100%
![Page 9: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/9.jpg)
VistaWebna7va
• Diferentesmotoresderenderizado– Elresultadopodríaserdiferenteendis7ntosmóviles• Desarrollo• Pruebas• ExperienciadeUsuario
S.O. Componente
iOS UIWebView
Android Android.webkit-WebView
Etc. Etc.
![Page 10: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/10.jpg)
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/
![Page 11: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/11.jpg)
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
![Page 12: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/12.jpg)
ResumenCordova/PhoneGap
• Actúacomouncontenedordeaplicaciones– appsmóvilesHTML/JS/CSS,empaquetadascomosifueranna7vas
• ProporcionaAPIsdeJSconsistentesparatodoslosdisposi7vossoportados
• Lasplataformasmóvilesmásimportantesdisponendemuybuensoporte
• Ex7endeJSatravésde‘plugins’• CordovaeselmotordePhoneGap
![Page 13: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/13.jpg)
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
![Page 14: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/14.jpg)
Modificaciones(I)
• Añadimosiconosparalasdiferentesresolucionesdedisposi7vosmóviles– 36,48,62,72,96,173sonlasmáscomunes
– convienellamarlasasí• generadasapar7rdelaesferadelreloj
• Añadimos‘interact.min.js’– mejorinteracciónconelmóvil
![Page 15: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/15.jpg)
Modificaciones(II)• incluimos‘interact.min.js’y‘cordova.js’
• Añadimoses7losespecíficosparamóviles
• Añadimos‘addEventListener’y‘onDeviceReady()
![Page 16: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/16.jpg)
Modificaciones(III)
• Cambiamoslareproduccióndesonidoporunpi7doyunavibración
• Yborramoseldivconelsonidoenelbody
![Page 17: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/17.jpg)
config.xml
• Elfichero‘config.xml’proporcionado– con7eneelnombredelaapp,sudescripción,informacióndelautor
– importalasprincipalesbibliotecasdeaccesoahardware• noseusantodas,vancomoejemplo
– cargalosiconos
![Page 18: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/18.jpg)
PhoneGapBuildenlanube
• Permitecompilarunaaplicaciónwebaunaaplicaciónna7vamóvil
• RequierecrearunacuentaenPhonegapBuild• Sincostepermiteunnúmeroilimitadodeaplicacionespúblicasyunaprivada– sepuedeadquirirlicenciasparamás
• GenerauncódigoQR,quesepuedeescaneardesdeelmóvilparainstalarlaaplicación
![Page 19: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/19.jpg)
h\ps://build.phonegap.com
![Page 20: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/20.jpg)
![Page 21: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/21.jpg)
Pantallainicial
empaquetadocomoun.zip
subirelcódigo
desdeunrepositoryGIT
![Page 22: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/22.jpg)
Subirelcódigo
• Hacemosun.zipconelcódigo– elnombreyeliconoaparecenenlazonadeapp
Iconoynombredelaaplicación
pincharaquíparagenerarlasappsna7vas
![Page 23: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/23.jpg)
códigoBidiparadescargaeinstalaciónenelmóvil
paquetescompiladosendis7ntasplataformas
![Page 24: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/24.jpg)
Aplicaciónna7va
iPhone
Android
![Page 25: PhoneGap Build Generación de Aplicaciones Móviles Navas con … · 2016. 10. 29. · Generación de Aplicaciones Móviles Navas con HTML/JS/CSS Gabriel Huecas 24 de Enero de 2016](https://reader035.fdocument.pub/reader035/viewer/2022071607/6145875807bb162e665fbf71/html5/thumbnails/25.jpg)
¡Graciasporsuatención!
• G.Huecas
• Twi\er:@ghuecas
• www.dit.upm.es/~gabriel