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.
- Nombre del proyecto (project name).
- API de Android a utilizarse (build target). En este caso se utilizará el API 2.2.
- Nombre de la aplicación (application name).
- 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).
- Reemplazar la línea 3 (import android.app.Activity;) con la siguiente: import com.phonegap.*;
- En la línea 6 cambiar la superclase de App de Activity a DroidGap.
- 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
Hola,
Me sirvio mucho el articulo, solo restaria aclarar si puedes editar la primer pantalla donde creas el proyecto ya que al terminar de instalar todo el entorno (java jdk, eclipse, android sdk, adt, etc) si vas a “New” NO figura “Android Project” sino que recien figurara luego de haber creado al menos un proyecto android.
La primer vez uno debe ir a new, project y desplegar Android y seleccionar Androir Project 🙂
Quiza es una tontera pero para el despistado podria pensar que hizo algo mal 🙂
Saludos!
Saludos @nanomo.
Lo que mencionas es claro para alguien que está acostumbrado a utilizar Eclipse. Como dices puede llegar a ser confuso para alguien que no tiene experiencia con el IDE. Muchas gracias por tu precisión.
de pelosssss es lo que estaba buscando, gracias por la info.
Hoy mismo me ha recomendado este framework un desarrollador de facebook, ellos utilizan algo parecido pero de creación interna.
Hola, me gustaria saber como agregar codigo PHP a mi aplicacion.
Podrian ayudarme???
Gracias
Saludos Luz, no puedes incluír tu código PHP ya que este no se ejecuta en el cliente. Este sería invocado a través de la red y ejecutado del lado del servidor.
@luz, @jimezam tiene un poco de razón… No puedes ejecutar php desde la misma app pero si que puedes hacer una llamada a un archivo php a través de Ajax!
Saludos!