PhoneGap Desktop Ejecución de Aplicaciones Web (HTML/JS/CSS

PhoneGap Desktop Ejecución de Aplicaciones Web (HTML/JS/CSS

PhoneGapDesktop
EjecucióndeAplicacionesWeb
(HTML/JS/CSS)
enDisposiCvosMóviles
GabrielHuecas
26deEnerode2016
ObjeCvo
•  VisualizarnuestrasaplicacionesWeb
desarrolladasconHTML5/JS/CSS3en
disposiCvosmóviles
–  Android,iOS,WindowsPhone,…
–  smartphones,tablets,…
•  UsaremoslasherramientasPhoneGap
DesktopyPhoneGapDeveloperApp
Índice
1.  FlujodeTrabajo
2.  Programasainstalar
a.  UClidaddeComputador(PhoneGapDesktop)
b.  ClienteparaDisposiCvoMóvil(PhoneGap
DeveloperApp)
3.  PrimerProyecto(pordefecto):
a.  Realizacióndelproyecto
b.  VisualizarendisposiCvomóvil
4.  CronómetroSegundero
FlujodeTrabajo
1.  Desarrollamosunaappweb
2.  ServimosconPhoneGapDesktop
3.  AccedemosdesdeeldisposiCvomóvil
mediantePhoneGapDeveloperApp
1
2
3
Programasainstalar
•  PhoneGapDesktopenelordenadorenque
desarrollamoslaappHTML5/JS/CSS3
•  PhoneGapDeveloperAppeneldisposiCvo
móvil,quepermitevisualizaryprobarla
aplicaciónanterior
InstalaciónPhoneGapDesktop
•  h_p://docs.phonegap.com/ge`ng-started/1install-phonegap/desktop/
•  DescargarelinstaladorparaMacOSXo
Windows
–  Puedequehayaquedarpermisosdeejecución
•  ConPhoneGapDesktopharemos“visible”la
aplicaciónweb,deformaqueelclientemóvil
puedaejecutarlaeneldisposiCvodeseado
InstalaciónPhoneGapDevel.App
•  h_p://docs.phonegap.com/ge`ng-started/2install-mobile-app/
•  SeejecutaeneldisposiCvomóvil
–  permitevisualizaryprobarlaaplicación
desarrollada
•  sinnecesidaddeinstalarentornosdecompilación/
desarrollonaCvosdeAndroid,iOS,etc.
–  LocalizareniTunes,GooglePlayoWindowsPhone
Store
PrimerProyecto(I)
•  Abrimoslaaplicación
PhoneGapDesktopen
nuestroordenadory
obtenemosuna
ventanacomoesta
PrimerProyecto(II)
•  Pulsamoselbotón‘+’y
seleccionamos“crear
nuevoproyecto”
PrimerProyecto(III)
•  Introducimosla
informaciónbásicade
nuestroproyecto
–  localizacióneneldisco
–  nombredelaaplicación
–  idenCficador(opcional)
•  Ypulsamos“crear
proyecto”(botónverde)
PrimerProyecto(IV)
•  VemoselproyectoacCvo
(bordeizquierdoverde,
botónejecuciónenverde)
•  ServidoracCvoenverde
–  Semuestraladireccióny
puertoquesirvelaapp
•  hayqueintroducirlaenel
clientemóvil
¡SólounproyectoacCvoala
vez!
•  ¡LISTOPARAACCEDER
DESDEElDISPOSITIVO
MÓVIL!
PrimerProyecto(V)
•  EjecutamosPhoneGap
DeveloperAppenel
disposiCvomóvil
(teléfonootableta)
1.  Pulsamoselicono
2.  Trasunbrevechequeo,
obtenemoslaprimera
pantalla
PrimerProyecto(VI)
•  Nosaseguramosquela
direcciónyelpuertodel
servidorcoinciden
–  ServidorydisposiCvo
handeestarenlamisma
subred
•  Ypulsamos“Connect”
–  Apareceelmensaje
“DOWNLOADING”y
después“EXTRACTING”
PrimerProyecto(VII)
•  ¡Nuestraprimeraaplicación
nohacemucho!
Sólocompruebaqueel
disposiCvo“estálisto”
PrimerProyecto(VIII)
•  …yaesunproyecto
HTML5/JS/CSS3
completo
•  Sepuedeaccederal
código,pinchandoenel
pathdelproyecto
EstructuradelPrimerProyecto
CódigodelPrimerProyecto
CronómetroSegundero
•  Cuentaatráslos
segundos
–  podemoscambiarlopor
minutos,másúCl
•  Incrementaalpulsarel
botón‘+’oenelreloj
–  Decrementaalpulsarel
botón‘-’
•  Alllegaracerosuena
unaalarmaymuestra
unaalerta
HTMLCronómetro
•  Sonidoareproducir
•  Botones‘-’y‘+’
•  Cronómetro
–  esferadelreloj
–  manilladelcronómetro
–  centro
CSSCronómetro
•  Eliminamosmargeny
relleno
•  cajasvgal80%
•  OcupaciónenverCcaly
horizontal
•  Coloresdelsegundero,
delfondoydeleje
JSCronómetro
•  temporizador
•  actualizarcronómetro
•  cuentaatrás
•  incrementarsegundero
•  decrementarsegundero
•  alarma
•  eventos
ProyectoPhoneGap
•  Vamosarealizarun
proyectoPhoneGapcon
elejemplovisto
•  Creamosunnuevo
proyecto,denombre
Cronometro
–  opcionalmente,
añadimoselID
“org.mooc.crono”
ProyectoPhoneGap
•  Tenemosunnuevo
proyectoañadido
–  hayquemodificarel
código
•  Pinchamosen“Local
path”paraobtenerel
folderqueconCeneel
proyecto
–  yluegonossituamosen
eldirectorio“www”
FicherosCronómetroSegundero
•  CopiamoselcódigodelCronómetro
Antesde
copiarlos
ficheros
Despuésde
copiarlos
ficheros
AparienciaCronómetroSegundero
•  Ejecutamosdenuevoel
clienteenelmóvil
–  hayquerearrancarla
aplicaciónmóvil
–  elservidorseactualiza
automáCcamente
EjecucióneniPhone
EjecuciónenAndroid
¡Graciasporsuatención!
•  G.Huecas
•  Twi_er:@ghuecas
•  www.dit.upm.es/~gabriel