Diseñando aplicaciones multi-plataforma en HTML con PhoneGap

PhoneGap, framework OpenSource adquirido recientemente por Adobe, nos permite crear aplicaciones en un código estándar HTML 5 capaz de ser ejecutado nativamente en los diferentes sistemas operativos móviles del mercado. PhoneGap cubre el diseño de interfaces de usuario mediante HTML y CSS, a la vez que encapsula las características nativas de los terminales móviles haciéndolas accesibles por JavaScript. Por ejemplo, mediante una única función JavaScript podremos acceder a las cámaras incorporadas en cualquier terminal android, iphone, Windows Phone u otras plataformas. La filosofía de este interesante producto es unificar los desarrollos para los distintos terminales móviles, abstrayendo al desarrollador de la programación nativa específica para cada uno de ellos. La siguiente imagen resume bastante bien esta metodología de trabajo de PhoneGap:

PhoneGap permite controlar los siguientes elementos de hardware incluidos en la mayoría de dispositivos móviles (smartphone):

API	Descripción
Accelerometer	Lecturas del sensor de movimiento
Camera	Capturar imagines a través de la cámara de fotos.
Compass	Obtener la dirección en la que apunta el dispositivo.
Contacts	Gestión de contactos.
Device	Información específica del dispositivo.
Events	Capturar eventos nativos.
File	Gestor de ficheros.
Geolocation	Servicios de localización.
Media	Control multimedia de video y audio.
Network	Comprobaciones del estado de la conexión a la red.
Notification	Gestión de notificaciones a nivel de sonidos y vibraciones.
Storage	Control de almacenamiento.

Esta herramienta resulta especialmente beneficiosa para los siguientes actores:

• Aquellos desarrolladores que estén habituados a programar aplicaciones en un ambiente Web. En ocasiones el proceso de adaptación al desarrollo de aplicaciones de “escritorio” puede requerir cierto nivel de esfuerzo y tiempo para el programador.
• Aquellas empresas que no quieren marginar sus aplicaciones a un único sistema operativo, pudiendo así llegar a mayor número de usuarios/consumidores.  No debemos olvidar que los costes del desarrollo de un aplicativo con PhoneGap, que será desplegable en los diferentes sistemas operativos soportados,  serán similares a los costes del desarrollo en código nativo de la aplicación para una única plataforma.
• Aquellas empresas de desarrollo de software. Con un mismo equipo de desarrollo podrán ampliar su oferta de aplicaciones. Es decir, no necesitarán a personas especializadas para cada tipo de plataforma con la que deseen realizar negocio.

  A continuación probaremos en pocos pasos este framework, construyendo una aplicación Android para después aprovechar el servicio on-line “PhoneGap Build” que nos brinda Adobe y empaquetar la aplicación para dispositivos iPhone, BlackBerri, Symbia y WebOs.

Para desarrollar con PhoneGap se pueden elegir cualquiera de los entornos de desarrollo de las propias plataformas soportadas. En nuestro caso, como interesados en Android, elegiremos una instalación estándar de Eclipse junto con el plugin ADT y  la SDK. Puede consultar la configuración del entorno recomendada por Android en la siguiente dirección: http://developer.android.com/sdk/eclipse-adt.html.

El siguiente paso será descargamos la última versión de PhoneGap, actualmente la 1.4.1, a través de la siguiente URL: https://github.com/callback/phonegap/zipball/1.4.1. Del archivo descargado, la parte que nos interesa es la que a Android se refiere:

Dentro de la carpeta Android nos encontramos con los siguientes elementos:

• phonegap-1.4.1.js: Fichero que encapsula todas las funciones JavaScript que usaremos para explotar los componentes del terminal: cámara, sensores, conectividad, etc…
• phonegap-1.4.1.jar: Librería que extenderá y recubrirá el API de Android. Por ejemplo, nuestras pantallas en vez de extender la clase Activity de Android, extenderán la clase DroidGap de esta librería.
• xml: Carpeta que copiaremos al directorio de recursos de nuestra aplicación (/res).
• example: Proyecto de ejemplo. Nos vendrá bien para nuestra primera experiencia con PhoneGap.

Para importar el proyecto de ejemplo haremos lo siguiente:

• File > New > Project…
• Android > Android Project
• Create project from existing source (seleccionar la carpeta example)
• Añadir la librería phonegap-1.4.1.jar al classpath del proyecto

Llegados a este punto nuestro eclipse debería de tener un aspecto similar al siguiente:

Tal y como hemos mencionado anteriormente, si editamos la actividad (PhoneGapExample)  veremos que extiende de la clase DroidGap. Otro aspecto interesante de esta clase, es que hace referencia al fichero HTML donde realmente se encuentra la aplicación diseñada con PhoneGap:

super.loadUrl("file:///android_asset/www/index.html");

Si abrimos el fichero index.html nos encontraremos con un diseño HTML normal y corriente, donde en la parte superior se importan dos javascript:

• Funciones que proporciona phoneGap para controlar el API de android

<script charset="utf-8" src="phonegap-1.4.1.js"></script>

• Funciones propias de la aplicación

<script charset="utf-8" src="main.js"></script>

Si abrimos el fichero main.js encontraremos las funciones JavaScript que utiliza la aplicación para la demo. Por ejemplo, podemos ver funciones para leer las posiciones GPS, control de sensores, visualización de contactos… Aunque tal vez la mejor forma de entender este código sea consultando las referencias JavaScript de la documentación de PhoneGap: http://docs.phonegap.com.

Al ejecutar el proyecto de ejemplo veremos la siguiente pantalla:

Una vez que tenemos creada la aplicación, será el momento de empaquetarla y distribuirla en todas las plataformas soportadas. Para ello, usaremos el servicio PhoneGap Build, en el que nos habremos registrado anteriormente. Se trata de un servicio de pago, pero los desarrolladores tendrán una opción gratuita para generar una aplicación:

Si nuestro objetivo es que la aplicación sea debidamente empaquetada para las diferentes plataformas, debemos de proporcionar nuestro código fuente al servicio PhoneGap Build. Para ello tenemos dos opciones:

• Subir simplemente el index.html o un ZIP con el contenido del proyecto. Generalmente los ficheros ubicados bajo assets/www.
• Utilizar los repositorios GIT de PhoneGap.

 

Cuando pulsemos sobre el botón crear, la aplicación comenzará a compilarse, cuando termine este proceso, nuestra aplicación ya estará disponible para descargar e instalar en los diferentes dispositivos:

 

Tal y como vemos en la imagen anterior, parece que para el iOS necesitamos un fichero de claves que podremos obtener desde el entorno de desarrollo de aplicaciones para este tipo de dispositivos. PhoneGap Build incorpora una serie de herramientas que cualquiera que esté interesado en este tipo de desarrollos le conviene investigar, por ejemplo existe la posibilidad de publicar directamente en los diferentes “Markets” de aplicaciones o una interesante interfaz de  depuración de nuestros programas.

Finalmente, si nos descargamos e instalamos las aplicaciones en sus correspondientes dispositivos, la vista del aplicativo de ejemplo debería ser muy similar en todos ellos:

 

Agradecer a Euro-Help Consulting el interés mostrado y la información proporcionada para elaborar este artículo.

Comments

[jtristan]

Sin duda alguna, una herramienta muy interesante. Tratando de hacer de adivino, creo que el futuro en la programación móvil va a ir por este tipo de herramientas. Ahora mismo, necesitas a expertos al menos en cuatro lenguajes para poder cubrir prácticamente todo el mercado móvil con una misma aplicación. Con estas herramientas, con un sólo equipo, y un sólo desarrollo haces el mismo trabajo.
Además, de las que he podido leer, esta me parece la más interesante. Primero, porque el desarrollo es en HTLM5 y CSS, con lo cual, lo que aprendamos aquí lo podremos utilizar también para los desarrollos web (y estamos hablando de un lenguaje que por lo visto va a ser muy necesario) y segundo, porque pertenece a Adobe. Estamos hablando de una gran empresa, que imagino destinará muchos recursos en hacer una herramienta muy buena (y más ahora que flash tiene las horas contadas).

[Richard]

Este framework es util para aplicaciones tan simples como el mecanismo de un chupete. Si quieres hacer algo serio y potente (empresarial), nada como hacerlo en nativo.

[ivan]

buenas, muy bueno el articulo. Yo soy nuevo en este mundo y deseo convertir mi web en una app, he visto varios videos tutoriales, donde explican, que solo subiendo un fichero .zip, con todo el contenido de mi web, phonegap build es capaz de empaquetarla, ¿ funciona asi o tengo que ejecutar algun paso anterior?. gracias