Creando una aplicación multiplataforma para móviles con jquery y phonegap - parte 2

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP PARTE 2

Giancarlo TRUJILLO - PERU

[email protected] @GianMarin

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

PARTE 2

Hola a todos nuevamente, a continuación mostraré como COMPILAR y EMULAR nuestra aplicación nativa. Para ello haremos uso de la aplicación que realizamos en la publicación anterior; si no viste o desconoces como crear un aplicación nativa, te sugiero que lo chequees AQUÍ   http://www.scribd.com/doc/122534911. Ahora pasaremos a realizar lo siguiente: 1. Configurar los meta-datos, para ello creamos un archivo llamado config.xml [este archivo sigue un estándar de la W3C conocido como ‘widgets y que tiene que ser .xml’]

IFXPERU - DEMO Aplicacion Nativa demostrativa! v-1.0 Giancarlo Marin

Giancarlo Marín Gaitán

Nombre del Proyecto Descripción del Proyecto Datoss del Autor Dato Autor del del Pro ecto

Plataformas que deseamos que se Plataformas ejecute la aplicación

- La versión del phonegap = 2.3.0 - La duración del Splash Screen = 20000 miliseg - El tiempo de espera de carga = 60000 miliseg

1

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP



Giancarlo Marín Gaitán

PARTE 2

Uso de los Iconos según la plataforma en que se ejecutarán

Uso de las Pantallas de Bienvenida según la plataforma y resolución en que se ejecutarán

Características que usará el móvil Permite todo acceso a Internet

2

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

PARTE 2

2. Luego procederemos a compilar la aplicación, para ello primero debemos acceder a ‘Configuración del Phonegap Build’ y proporcionar las rutas del SDK para la emulación

Giancarlo Marín Gaitán

3

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

3.

PARTE 2

Una vez configurado la ruta de nuestro sdk, nos logueamos con nuestra cuenta adobe; si no tienes créatelo en AQUÍ  [https://build.phonegap.com/plans/free]

Giancarlo Marín Gaitán

4

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

4. Una vez logueado nos aparecerá lo siguiente y seleccionamos ‘Crear como nuevo proyecto’ y continuar:

Giancarlo Marín Gaitán

PARTE 2

5. El tiempo de compilación demora así que a tener paciencia! Y el resultado será éste. Como observamos si toda compilación fue satisfactoria nos mostrará como [Build Complete] , si se encontró un error aparecerá [Build Error]

5

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

PARTE 2

6. ¿Cómo verificar la compilación de la aplicación? La respuesta está en nuestra cuenta que previamente previamente nos hemos creado!!

Giancarlo Marín Gaitán

6

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

PARTE 2

7. Una vez compilado Phonegap Build nos brinda 3 diferentes maneras de ejecutar la aplicación: [EMULAR]-[VER CODIGO QR]-[DESCARGAR]. En esta ocasión, primero lo emularemos en Android, para ello hacemos clic en el botón de emular[ ] y luego, una vez de esperar, hacemos clic en ‘Iniciar’

Giancarlo Marín Gaitán

7

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

PARTE 2

8. Y el resultado será el siguiente:

Giancarlo Marín Gaitán

8

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

Giancarlo Marín Gaitán

PARTE 2

9

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

Giancarlo Marín Gaitán

PARTE 2

10

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

Giancarlo Marín Gaitán

PARTE 2

11

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

Giancarlo Marín Gaitán

PARTE 2

12

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

PARTE 2

9. A continuación lo procederemos a ejecutarlo desde un Emulador de Windows Phone para ello hacer lo siguiente: descargar la aplicación .xap

Giancarlo Marín Gaitán

13

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

PARTE 2

10. Una vez descargado, accedemos a esta ruta y ejecutamos el XapDeploy.exe: XapDeploy.exe:

11. Luego nos aparecerá esta interfaz y seleccionamos seleccionamos lo siguiente: el tipo de emulación y la ruta de nuestra aplicación que hemos descargado

Giancarlo Marín Gaitán

14

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

PARTE 2

12. Y éste es el resultado de emularlo en Windows Phone:

Giancarlo Marín Gaitán

15

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

Giancarlo Marín Gaitán

PARTE 2

16

CREANDO UNA APLICACIÓN NATIVA PARA MÓVILES CON JQUERY MOBILE + PHONEGAP

Giancarlo Marín Gaitán

PARTE 2

17