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


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


Server Internet

Smartphone, Tablet…


Update Tradicional

Server Internet

Smartphone, Tablet…


Instalar Extensión PhoneGap for Brackets [1/3]






Estructura de una aplicación en PhoneGap [1/5]



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>



<meta name="viewport" content="width=device-width, initial-scale=1">

Adicionalmente se modifica el viewport a los siguientes valores


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);


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/


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.


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


PhoneGap & jQuery Mobile [1/]

Abrir la aplicación a actualizar o agregar una nueva en PhoneGap Build


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


Real Estate

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