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