PhoneGap en pocas palabras es un framework para el desarrollo de aplicaciones móviles que posibilita a los desarrolladores a que implementen sus proyectos utilizando las tecnologías estándar de web: HTML5, CSS3 y Javascript, y este las convierte a aplicaciones híbridas, es decir, aplicaciones nativas de las diferentes plataformas móviles existentes que tienen acceso a gran parte del API nativo.

Tomado de http://www.phonegap.com/

Esto lo logra empaquetando la aplicación web original con un navegador basado en webkit para desplegarla como si fuera una aplicación verdaderamente nativa.

Actualmente este framework soporta seis de las principales plataformas móviles del mercado: iOS, Android, Blackberry, PalmOS, Windows Mobile y Symbian.  Para mas información acerca del estado actual del soporte en cada una de estas plataformas consultar las características soportadas.

Existen otros frameworks similares a este entre los que se destacan Appcelerator Titanium, Mobl y Sencha Touch de los cuales espero estar escribiendo mas adelante.

En este artículo se describirá el proceso de instalación de PhoneGap, la creación de un proyecto base para el desarrollo con este framework y la elaboración de un ejemplo simple.

Instalar PhoneGap.

Descargar la última versión disponible del framework desde la siguiente ubicación.

https://code.google.com/p/phonegap/downloads/list

Para efectos de la documentación se utilizará la versión 0.9.5.1 que corresponde con las mas reciente para esta fecha.

$ wget http://phonegap.googlecode.com/files/phonegap-0.9.5.1.zip

Se descomprime el paquete recién descargado y se mueve a su ubicación final.

$ unzip phonegap-0.9.5.1.zip

$ mkdir ~/phonegap

$ mv phonegap-0.9.5.1 ~/phonegap/0.9.5.1

Crear la plantilla base de un proyecto Android.

A continuación se relacionan los pasos que se deben realizar para crear un proyecto PhoneGap para Android utilizando Eclipse y el plugin ADT instalados anteriormente.

Iniciar Eclipse y crear un nuevo proyecto a través del menú File > New > Android Project.

Crear un nuevo proyecto Android

En el diálogo de información del proyecto a crearse especificar al menos los siguientes campos y presione el botón Finish para continuar.

1. Nombre del proyecto (project name).
2. API de Android a utilizarse (build target).  En este caso se utilizará el API 2.2.
3. Nombre de la aplicación (application name).
4. Crear una actividad (create activity).

Información básica del proyecto Android

En el Explorador de Paquetes (package explorer)  de Eclipse crear bajo el proyecto una carpeta /assets/www y otra /libs.

Copiar en la carpeta /assets/www el archivo phonegap.0.9.5.1.js y copiar en /libs el archivo phonegap.0.9.5.1.jar.  Ambos archivos se encuentran bajo el directorio ~/phonegap/0.9.5.1/Android creado durante el paso de instalación anterior.

Estructura del proyecto Android

Hacer clic derecho sobre el directorio /libs y seleccionar el menú Build Path > Configure Build Path… Allí en la pestaña Libraries agregue la referencia a /libs/phonegap.0.9.5.1.jar presionando el botón Add JARs…

Agregar al proyecto la referencia al JAR de PhoneGap.

Realizar las siguientes modificaciones al código fuente de la actividad.  Este archivo se ubica bajo la carpeta /src del proyecto (/src/com.jimezam.phonegap.demo/App.java en este caso).

1. Reemplazar la línea 3 (import android.app.Activity;) con la siguiente: import com.phonegap.*;
2. En la línea 6 cambiar la superclase de App de Activity a DroidGap.
3. Reemplazar la línea 11 (setContentView(R.layout.main);) con la siguiente: super.loadUrl("file:///android_asset/www/index.html");

Hacer clic derecho sobre el archivo AndroidManifest.xml y seleccionar el menú Open With… > Text Editor.  A este documento realizar las siguientes modificaciones.

1. Agregar el siguiente texto entre la apertura de la etiqueta <manifest> y la apertura de la etiqueta <application>.

<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

2. Agregar el siguiente atributo a la etiqueta <activity>.

android:configChanges="orientation|keyboardHidden"

Modificaciones al documento AndroidManifest.xml.

Finalmente crear el archivo /assets/www/index.html con el código fuente para la demostración.

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap demostration with Android</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<h1>Hello Android's World with PhoneGap</h1>
</body>
</html>

Ejecutar el proyecto en el emulador.

Seleccionar el menú Run > Run As > Android Application.

Ejecutar como aplicación Android.

Estos son un par de ejemplos de aplicaciones web simples ejecutándose con PhoneGap en el emulador de Android.

Hola Mundo web con Android

The Simple List 0.1

Enlaces.

• PhoneGap.
  http://www.phonegap.com/
• PhoneGap get starter guide.
  http://www.phonegap.com/start#android
• PhoneGap, Android and Eclipse quickstart.
  http://wiki.phonegap.com/w/page/30862722/phonegap-android-eclipse-quickstart
• PhoneGap documentation directory.
  http://wiki.phonegap.com/w/page/35502422/Documentation-Directory

Esta es una aplicación muy sencilla que se desarrolló en PHP para el sexto Congreso Colombiano de Computación.  Todo comenzó cuando no me resultó cómoda la manera como el sitio web desplegaba la programación del evento: por bloques de auditorios siendo las filas conferencias y las columnas los días de las mismas.

Programación del 6CCC (versión original)

Este estilo de presentación no es conveniente ya que no me permite visualizar fácilmente que conferencias se están realizando en un momento dado para poder decidir a cual de ellas asisto, es decir, el estilo idóneo de presentación de las conferencias debería ser en el que cada bloque representa un día del evento, cada fila un rango de tiempo específico y cada columna un auditorio donde se estén realizando las conferencias.  De esta manera, una vez ubicado el rango de tiempo que se desea consultar sólo será necesario revisar las columnas para determinar las conferencias a las que se puede asistir.

Ya que manipular manualmente esta información  para poder determinar cuales eran las conferencias que quería ver era demasiado engorroso decidi implementar una solución computacional muy simple.  Inicialmente la iba a desarrollar en Javascript por completo manipulando el árbol DOM pero me dí cuenta que podría serle de utilidad a otras personas también y preferí no sobrecargar al navegador del cliente con las operaciones de transformación del contenido del programa.  El resultado final fue el siguiente.

Programación del 6CCC (versión mejorada)

El prototipo.

Las premisas eran las siguientes.

• No sobrecargar al cliente con cálculos en Javascript para facilitar la consulta desde móviles.
• No requerir que se ingrese la información de la programación nuevamente, se debería tomar de la programación existente directamente.
• Actualizarse automáticamente a la par de la programación original (esta última debería respetar su estructura HTML).
• Facilitar la lectura de la información.
• Facilitar la consulta de las conferencias presentándose en un momento específico del día y cuales se están presentando en este mismo momento.
• Permitir la personalización de la presentación (esto se obtuvo mediante la implementación de una vista independiente de la lógica de procesamiento y de clases CSS).

El prototipo se implementó en PHP sin ningún tipo de framework especializado y utilizando la técnica de web scraping para obtener directamente la información de la página web original de la programación, de ahí que fuera necesario que esta respetara su estructura HTML durante las actualizaciones.  Para esto se utilizó la librería phpQuery la cual permite entre otras cosas obtener secciones de código HTML mediante rutas de selectores CSS de manera similar a jQuery.

Conclusiones.

• El uso de phpQuery para las necesidades del prototipo no fue tan simple ni intuitivo como lo es el uso de jQuery, sin embargo una vez entendida su implementación, permitió desarrollar la funcionalidad necesaria.
• La programación original contaba con múltiples inconsistencias: diferentes formatos de fecha, la presencia de un día adicional en la programación general, la presencia de las temáticas generales de los bloques de conferencias en el mismo contenido de las conferencias, conferencias sin hora específica y, filas y columnas vacías para generar espacios en las tablas.  Por este motivo el prototipo incluye varias validaciones para solventar estos problemas que dificultan la adquisición de la información.
• El prototipo toma la fecha y hora del sistema para determinar las conferencias que se están presentando actualmente (tanto para resaltarlas en el listado como para mostrarlas al inicio de la programación).  No se tuvieron en cuenta diferencias en la zona horaria.
• El prototipo no pudo ser incluído en el sitio web del congreso ya que fue desarrollado utilizando PHP 5.3 (utiliza una función anónima en PHP) mientras que el hosting utilizado por la página era 5.2 y no se contaba con la información necesaria para convertir la sintáxis de la función anónima al estilo antiguo.
• El código fuente del prototipo fue liberado bajo la licencia Creative Commons Attribution 3.0.

Enlaces.

• Demostración del prototipo, versión 0.1.
  http://demo.jorgeivanmeza.com/PHP/6CCCProg/0.1/
• Obtener el código fuente del prototipo.
  http://demo.jorgeivanmeza.com/PHP/6CCCProg/
• Librería phpQuery.
  http://code.google.com/p/phpquery/
• Sexto Congreso Colombiano de Computación (6CCC).
  http://www.6ccc.org/

Preparé el prototipo de esta aplicación web muy simple para experimentar con algunas librerías que tenía por revisar, que a pesar de ser muy sencillas de utilizar es bueno ir conociendo para determinar mas adelante cual de todas las disponibles es la idónea.

Esta es de manera resumida la funcionalidad del prototipo.

• Obtiene cierta cantidad de tweets de ciertos usuarios predefinidos.
• Los tweets son alamcenados en caché por una cantidad específica de tiempo.
• El acceso a la página no requiere de ningún tipo de autenticación por parte del usuario.
• Cuando el usuario accede al sitio web, el sistema elige un tweet azar y lo muestra.
• La elección del tweet se realiza sobre los almacenados en el caché.  Si no hay caché o este es demasiado viejo, entonces se renueva automáticamente.
• Los mensajes que no se encuentran escritos en español son traducidos automáticamente a este idioma.
• Se prepara un enlace corto a la información del tweet.
• Se presenta un QRCode con el enlace corto al tweet para ser fácilmente consultado por dispositivos móviles.

Herramientas.

Estas fueron las herramientas utilizadas durante el desarrollo del prototipo.

1. Netbeans (IDE).
2. SQLite (persistencia del caché).
3. Blueprint CSS Framework (framework para la presentación).
4. PHP (lenguaje de programación).
5. Yii PHP Framework (framework de desarrollo web).
6. Extensión de CURL para Yii (acceder al servicio REST fácilmente).
7. API REST de Twitter (obtener los mensajes).
8. Google Translate Service (servicio de traducción de textos).
9. jquery-qrcode para la generación de los códigos QR.
10. jquery-urlshortener que utiliza el servicio de bit.ly (acortador de URLs).

Prototipo.

Prototipo de Give Me a Tweet

Instalación.

El código fuente del protitpo puede obtenerse desde la siguiente ubicación.

https://github.com/jimezam/Give-Me-a-Tweet/tree/v1.0

Para la ejecución de la aplicación web se requiere que se cuente además de la infraestructura web, con PHP con soporte para SQLite y CURL, y la distribución del Yii PHP Framework (1.1.7 o similar) en una ubicación conocida.

Finalmente se deberán modificar los siguientes archivos para ajustarlos a la infraestructura local.

index.php:

$yii=dirname(__FILE__).’/../../yii-1.1.7.r3135/framework/yii.php’;
$config=dirname(__FILE__).’/protected/config/main.php’;

Ajustar estas rutas a la ubicación real del framework.

protected/views/tweet/show.php:

$.shortenUrl.settings.login  = ‘USUARIO‘;
$.shortenUrl.settings.apiKey = ‘LLAVE DEL API‘;

Modificar estos valores para que correspondan con la información del propietario del servicio.  Esta información se puede obtener de manera gratuita en el sitio web de bit.ly para desarrolladores.

Enlaces.

• Netbeans.
  http://netbeans.org/
• SQLite.
  http://sqlite.org/
• jQuery.
  http://jquery.org/
• Blueprint CSS Framework.
  http://www.blueprintcss.org/
• PHP.
  http://php.net/
• Yii PHP Framework.
  http://www.yiiframework.com/
• Extensión CURL para Yii.
  http://www.yiiframework.com/extension/curl/
• Introduction to developing with @twitterapi.
  http://dev.twitter.com/pages/intro-to-twitterapi
• Twitter, get statuses and user timeline.
  http://dev.twitter.com/doc/get/statuses/user_timeline
• Plugin jquery.qrcode.js.
  http://jeromeetienne.github.com/jquery-qrcode/
• Plugin jquery-urlshortener.
  https://bitbucket.org/jiaaro/jquery-urlshortener/wiki/Home

Después de instalar y configurar los módulos para mantener las traducciones del contenido en el portal basado en Drupal 6, el siguiente paso era crear la barra de banderas que permitiera cambiar fácilmente entre los distintos idiomas del portal.

Procedimiento.

1. Instalar el módulo Consistent Language Interface que provee al bloque Consistent Language Interface block (languageinterface).
   http://drupal.org/project/languageinterface
2. Editar page.tpl.php e incluír el siguiente fragmento de código donde se desea la barra de banderas.

   <?php
       $flags = module_invoke('languageinterface', 'block', 'view', 0);
       print $flags['content'];
   ?>

3. Personalice la presentación de la barra con CSS ya que su estructura es básicamente una lista no ordenada.  Para establecer la distribución horizontal como la de la imagen propuesta, agregue el siguiente código en la hoja de estilos del tema.

   #language-interface
   {
       padding: 0;
       margin: 0;
   }
   
   #language-interface li
   {
       display: inline;
       list-style-type: none;
       padding: 0;
       margin: 0px 5px 0px 0px;
       height: 12px;
   }

4. Si desea puede además establecer estilos particulares para cada idioma, la clase CSS deberá llamarse igual que el código del idioma.  Además es posible resaltar al idioma actual utilizando la clase active.

Enlaces.

• Consistent Language Interface.
  http://drupal.org/project/languageinterface

El primer paso para desarrollar cualquier interfaz de usuario basada en HTML debería ser el remover los estilos introducidos por defecto por el navegador web, con esto podríamos estar [un poco mas] seguros que los estilos implementados van a tener un igual comportamiento entre los diferentes tipos de navegadores web.

Hacer esto es muy fácil, sólo es necesario incluír el siguiente estilo provisto por Yahoo! al inicio de la hoja de estilos principal (la primera que se carga).

/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}body{text-align:center;}#doc,#doc2,#doc3,#doc4,.yui-t1,.yui-t2,.yui-t3,.yui-t4,.yui-t5,.yui-t6,.yui-t7{margin:auto;text-align:left;width:57.69em;*width:56.25em;}#doc2{width:73.076em;*width:71.25em;}#doc3{margin:auto 10px;width:auto;}#doc4{width:74.923em;*width:73.05em;}.yui-b{position:relative;}.yui-b{_position:static;}#yui-main .yui-b{position:static;}#yui-main,.yui-g .yui-u .yui-g{width:100%;}.yui-t1 #yui-main,.yui-t2 #yui-main,.yui-t3 #yui-main{float:right;margin-left:-25em;}.yui-t4 #yui-main,.yui-t5 #yui-main,.yui-t6 #yui-main{float:left;margin-right:-25em;}.yui-t1 .yui-b{float:left;width:12.30769em;*width:12.00em;}.yui-t1 #yui-main .yui-b{margin-left:13.30769em;*margin-left:13.05em;}.yui-t2 .yui-b{float:left;width:13.8461em;*width:13.50em;}.yui-t2 #yui-main .yui-b{margin-left:14.8461em;*margin-left:14.55em;}.yui-t3 .yui-b{float:left;width:23.0769em;*width:22.50em;}.yui-t3 #yui-main .yui-b{margin-left:24.0769em;*margin-left:23.62em;}.yui-t4 .yui-b{float:right;width:13.8456em;*width:13.50em;}.yui-t4 #yui-main .yui-b{margin-right:14.8456em;*margin-right:14.55em;}.yui-t5 .yui-b{float:right;width:18.4615em;*width:18.00em;}.yui-t5 #yui-main .yui-b{margin-right:19.4615em;*margin-right:19.125em;}.yui-t6 .yui-b{float:right;width:23.0769em;*width:22.50em;}.yui-t6 #yui-main .yui-b{margin-right:24.0769em;*margin-right:23.62em;}.yui-t7 #yui-main .yui-b{display:block;margin:0 0 1em 0;}#yui-main .yui-b{float:none;width:auto;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf,.yui-gc .yui-u,.yui-gd .yui-g,.yui-g .yui-gc .yui-u,.yui-ge .yui-u,.yui-ge .yui-g,.yui-gf .yui-g,.yui-gf .yui-u{float:right;}.yui-g div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first,.yui-ge div.first,.yui-gf div.first,.yui-g .yui-gc div.first,.yui-g .yui-ge div.first,.yui-gc div.first div.first{float:left;}.yui-g .yui-u,.yui-g .yui-g,.yui-g .yui-gb,.yui-g .yui-gc,.yui-g .yui-gd,.yui-g .yui-ge,.yui-g .yui-gf{width:49.1%;}.yui-gb .yui-u,.yui-g .yui-gb .yui-u,.yui-gb .yui-g,.yui-gb .yui-gb,.yui-gb .yui-gc,.yui-gb .yui-gd,.yui-gb .yui-ge,.yui-gb .yui-gf,.yui-gc .yui-u,.yui-gc .yui-g,.yui-gd .yui-u{width:32%;margin-left:1.99%;}.yui-gb .yui-u{*margin-left:1.9%;*width:31.9%;}.yui-gc div.first,.yui-gd .yui-u{width:66%;}.yui-gd div.first{width:32%;}.yui-ge div.first,.yui-gf .yui-u{width:74.2%;}.yui-ge .yui-u,.yui-gf div.first{width:24%;}.yui-g .yui-gb div.first,.yui-gb div.first,.yui-gc div.first,.yui-gd div.first{margin-left:0;}.yui-g .yui-g .yui-u,.yui-gb .yui-g .yui-u,.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u,.yui-ge .yui-g .yui-u,.yui-gf .yui-g .yui-u{width:49%;*width:48.1%;*margin-left:0;}.yui-g .yui-g .yui-u{width:48.1%;}.yui-g .yui-gb div.first,.yui-gb .yui-gb div.first{*margin-right:0;*width:32%;_width:31.7%;}.yui-g .yui-gc div.first,.yui-gd .yui-g{width:66%;}.yui-gb .yui-g div.first{*margin-right:4%;_margin-right:1.3%;}.yui-gb .yui-gc div.first,.yui-gb .yui-gd div.first{*margin-right:0;}.yui-gb .yui-gb .yui-u,.yui-gb .yui-gc .yui-u{*margin-left:1.8%;_margin-left:4%;}.yui-g .yui-gb .yui-u{_margin-left:1.0%;}.yui-gb .yui-gd .yui-u{*width:66%;_width:61.2%;}.yui-gb .yui-gd div.first{*width:31%;_width:29.5%;}.yui-g .yui-gc .yui-u,.yui-gb .yui-gc .yui-u{width:32%;_float:right;margin-right:0;_margin-left:0;}.yui-gb .yui-gc div.first{width:66%;*float:left;*margin-left:0;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf .yui-u{margin:0;}.yui-gb .yui-gb .yui-u{_margin-left:.7%;}.yui-gb .yui-g div.first,.yui-gb .yui-gb div.first{*margin-left:0;}.yui-gc .yui-g .yui-u,.yui-gd .yui-g .yui-u{*width:48.1%;*margin-left:0;}.yui-gb .yui-gd div.first{width:32%;}.yui-g .yui-gd div.first{_width:29.9%;}.yui-ge .yui-g{width:24%;}.yui-gf .yui-g{width:74.2%;}.yui-gb .yui-ge div.yui-u,.yui-gb .yui-gf div.yui-u{float:right;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf div.first{float:left;}.yui-gb .yui-ge .yui-u,.yui-gb .yui-gf div.first{*width:24%;_width:20%;}.yui-gb .yui-ge div.first,.yui-gb .yui-gf .yui-u{*width:73.5%;_width:65.5%;}.yui-ge div.first .yui-gd .yui-u{width:65%;}.yui-ge div.first .yui-gd div.first{width:32%;}#hd:after,#bd:after,#ft:after,.yui-g:after,.yui-gb:after,.yui-gc:after,.yui-gd:after,.yui-ge:after,.yui-gf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}#hd,#bd,#ft,.yui-g,.yui-gb,.yui-gc,.yui-gd,.yui-ge,.yui-gf{zoom:1;}

Otra forma de hacerlo es simplemente hacer una referencia a esta hoja de estilos desde los servidores de Yahoo!.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css">

Enlaces.

• YUI Reset CSS.
  http://developer.yahoo.com/yui/reset/
• Basic Test Suite for YUI Reset.
  http://developer.yahoo.com/yui/examples/reset/reset-simple.html
• Using reset stylesheets.
  http://www.webmonkey.com/tutorial/Using_Reset_Stylesheets