Primeros pasos con PhoneGap para Android

Introducción.

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.

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.

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

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.

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…

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”

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.

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

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