02 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles

Desarrollo de Aplicaciones Cross-
Platform para Dispositivos Móviles
Building Cross-Platform Mobile Applications
M.S.C. Raquel Vásquez Ramírez
M.S.C. Cristian A. Rodríguez Enríquez

Contenido
•  Hydration
•  Push Update
•  Update Tradicional
•  Instalar Extension PhoneGap for Brackets
•  Estructura de una aplicación en PhoneGap
•  Ripple Emulator
•  Agregando jQuery Mobile a PhoneGap
•  Conclusiones
Building Cross-Plaftform Mobile Applications – PhoneGap
Slide 02 of 18

Hydration
Slide 03 of 18
It’s a tool that delivers updates directly to your device while
also significantly cutting down compile times during
development.
Hydration is a tool that has two main benifits for developers
and testers:
•  Compilation times are improved significantly.
•  Updates are pushed directly to the application installed on a
device.

Push Update
Slide 04 of 18
Server

Internet

Smartphone,
Tablet…

Slide 05 of 18
Update Tradicional
Server

Internet

Smartphone,
Tablet…

Slide 06 of 18
Instalar Extensión PhoneGap for Brackets [1/3]

Slide 07 of 18

Slide 08 of 18

Slide 09 of 18
Estructura de una aplicación en PhoneGap [1/5]

Slide 10 of 18
Considerando que se está utilizando la “sample starter application” se requiere
eliminar el código innecesario dentro de las etiquetas <body></body>.
Únicamente se mantienen los <script> y se agrega una <div> en el <body>
que contendrá el código de la aplicación.
<div id=”"></div>

Slide 11 of 18
<meta name="viewport" content="width=device-width, initial-scale=1">
Adicionalmente se modifica el viewport a los siguientes valores

Slide 12 of 18
Estructura de una aplicación en PhoneGap: deviceready [4/5]
This is an event that fires when PhoneGap is fully loaded.
Supported Platforms
•  Android
•  BlackBerry WebWorks (OS 5.0 and higher)
•  iPhone
document.addEventListener("deviceready”,
yourCallbackFuncBon,
false);

Slide 13 of 18
Estructura de una aplicación en PhoneGap: phonegap.js [5/5]
The phonegap.js file is automatically injected by
PhoneGap Build at build time.
No es necesario contar con el archivo durante el
desarrollo con PhoneGap Build.

Tip: http://emulate.phonegap.com/
Slide 14 of 18
Ripple Emulator
Apache Ripple™ is a web based mobile environment
simulator designed to enable rapid development of
mobile web applications for various web application
frameworks, such as Apache Cordova™ and
BlackBerry® WebWorks™.
Para emular el API de PhoneGap para propósitos de testing en
un browser se requiere de Google Chrome con la extensión de
Ripple.

Slide 15 of 18
Agregando jQuery Mobile a PhoneGap
1)  Agregar jQuery Mobile al proyecto de PhoneGap
2)  Setup de jQuery Mobile en la aplicación
3)  Integrar el HTML y JS relacionado con jQuery Mobile

Slide 16 of 18
PhoneGap & jQuery Mobile [1/]
Abrir la aplicación a actualizar o agregar una nueva en
PhoneGap Build

Slide 17 of 18
PhoneGap & jQuery Mobile [1/]
1
2

3

Cargar el archivo zip con el proyecto de PhoneGap
4

Conclusiones

•  PhoneGap permite utilizar frameworks Web de
terceros
•  Desarrollo para múltiples plataformas a través de
compilación en la nube
•  Hydra permite actualizar sin reinstalar utilizando
push
Slide 18 of 18

02 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a 02 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles

Semelhante a 02 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles (20)

Mais de Cristian Rodríguez Enríquez

Mais de Cristian Rodríguez Enríquez (9)

02 Building cross platform mobile applications with PhoneGap / Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles