Las siguientes tareas ser realizadas por todos los miembros del equipo:

1. Instalación de NodeJS: enlace.
2. Lectura sobre PhoneGap: enlace.
3. Instalación de PhoneGap: enlace. En caso de haber problemas con la instalación de PhoneGap en el instituto, ejecutar los siguientes comandos (consultar fuente):
   • npm config set strict-ssl false
   • npm cache clean
   • Volver a instalar PhoneGap con npm install -g phonegap

Estas tareas deberán ser realizada por una sola persona del equipo (el resto del equipo debe observar cómo se hace):

1. Creación de una aplicación PhoneGap: enlace (no es necesario ejecutar el comando run).
2. Copia de los archivos del cliente web desarrollado en la práctica anterior (respetar la organización de directorios creada por PhoneGap). Los archivos de la aplicación se encuentran en el directorio www dentro de la carpeta de la aplicación. Es conveniente guardar el archivo index.html con otro nombre para consultarlo posteriormente.
   • Modificación del punto de entrada a la API en el cliente (archivo cjlib.js). Al final del archivo se deberá poner la ruta de acceso a la API del servicio web desarrollado en la práctica anterior que está alojado en OpenShift (por ejemplo: http://proyecto-equipo.rhcloud.com/api. Ojo: no se debe incluir la barra final). Esto es necesario porque la API ya no está alojada en el mismo servidor que el cliente.
   • Si se hizo uso de algún framework adicional (como Bootstrap), deberá eliminarse para que no haya problemas de compatibilidad entre ambos frameworks (si se desea, se puede testear la aplicación tal como está para ver cómo funciona y después eliminarlo).
3. Instalación de la aplicación PhoneGap Developer en un teléfono móvil: enlace.
4. Testeo de la aplicación en el móvil y en el explorador web: enlace. PhoneGap se encarga de crear un servidor web que escucha en la IP del equipo en que se esté ejecutando de manera que pueda accederse a la aplicación a través del explorador web o del dispositivo móvil conectado a la misma red local.
5. Creación de un repositorio en la carpeta de la aplicación PhoneGap y subida al repositorio del equipo: procedimiento.
6. Clonado del repositorio por el resto de miembros del equipo.
7. Prueba de la aplicación por el resto de miembros del equipo.

A partir de este momento se puede seguir el flujo de trabajo con Git que se ha venido practicando durante el curso.

Definición de terminado

Todos los miembros del equipo tienen instalado PhoneGap. El código base se ha subido correctamente al repositorio del equipo en GitHub. Todos los miembros del equipo han clonado el repositorio y han probado que la aplicación funciona correctamente en sus equipos / teléfonos móviles.

PhoneGap proporciona la tecnología para emular una aplicación web como si se tratara de una aplicación nativa. Sin embargo, si no se utiliza alguna librería adicional, la aplicación tendría el aspecto de una página web convencional. Por tanto, es necesario utilizar alguna otra tecnología que adapte la apariencia visual de dicha página para que tenga el aspecto de una aplicación móvil nativa.

Existen varias opciones para realizar esta tarea. Algunas de ellas son muy interesantes, como Ionic, basada en AngularJS. Sin embargo, dado que no se dispone de suficiente tiempo como para estudiar AngularJS, utilizaremos la librería JQuery Mobile. Aquellas personas que quieran profundizar en otros frameworks pueden consultar algunos recursos al final de la página.

Todos los miembros del equipo deben leer los siguientes artículos:

1. Introducción a JQuery Mobile: enlace.
2. Páginas en JQuery Mobile: enlace.
3. Formularios con JQuery Mobile: enlace.
4. Listas con JQuery Mobile: enlace.
5. Barras de navegación con JQuery Mobile: enlace.

Definición de terminado

Se han leído y comprendido los artículos propuestos.

Se debe modificar el cliente web para personalizar el interfaz y que éste se asemeje lo más posible a una aplicación nativa. Para ello se deberá consultar la API y posiblemente las demos de JQuery Mobile. Se proponen los siguientes pasos:

1. Descarga e instalación de JQuery y JQuery Mobile en la aplicación.
2. Configuración de la etiqueta viewport.
3. Creación de una página JQuery Mobile para albergar la lista con los elementos de la colección.
4. Creación de una segunda página JQuery Mobile para albergar el formulario de edición del ítem. Para ello es posible que sea necesario modificar el código del cliente proporcionado.
5. Comprobación de las transiciones al navegar entre las páginas y al abrir y cerrar el formulario.
6. Creación de una barra de navegación para acceder a cada una de las cuatro categorías de elementos de la aplicación.
7. Modificación de la lista de elementos para que se muestren como listas JQuery Mobile.
8. Modificación del formulario para que los controles se muestren como formularios JQuery Mobile.
9. Formateo de los formularios para que se muestren las imágenes y los vídeos que contienen.

Definición de terminado

Se han realizado los cambios pedidos en el cliente. Cada tipo de elemento se muestra de manera personalizada. El cliente funciona correctamente con los cuatro tipos de elementos de la aplicación. La apariencia del cliente se corresponde con la de una aplicación móvil nativa.

Una vez completados los apartados anteriores se pueden realizar las siguientes mejoras en la aplicación:

1. Creación de un icono personalizado para la aplicación.
2. Personalización de las animaciones entre páginas.
3. Personalización de los campos de fecha para que en los dispositivos móviles se pueda introducir la fecha simulando una aplicación nativa (al pulsar en el campo de fecha se abrirá la ventana de selección de fecha mediante día, mes y año).
4. Diálogos de confirmación al intentar borrar un elemento.
5. Cualquier otra mejora que se considere interesante para mejorar la interfaz de usuario.

Definición de terminado

Se han realizado los cambios pedidos en el cliente. La apariencia del cliente se corresponde con la de una aplicación móvil nativa.

En este último punto se generará la aplicación en formato APK para poder ser instalada de manera nativa en el dispositivo. Para ello hay que instalar el SDK de Android (sólo es necesario el SDK, no es necesario el paquete Android Studio a no ser que se vaya a editar el código Java generado). En este enlace se explican los pasos a seguir.

Una vez configurado correctamente el SDK se puede realizar la prueba en un emulador o crear la APK con el comando phonegap build.

Para instalar la aplicación hay que copiarla al dispositivo vía USB (o descargarla de la web), habilitar las aplicaciones de terceros en los ajustes y proceder a su instalación.

Definición de terminado

Se ha generado la aplicación en formato APK y se ha probado en el dispositivo. Se ha comprobado su correcto funcionamiento.