Comenzando a tirar codigo en PhoneGap/Cordova

El desarrollo para diferentes plataformas siempre ha sido una fuente de quebraderos de cabeza. Todos los programadores lo hemos sufrido, y los móviles no están exentos del problema. Por eso, iniciativas como PhoneGap son una grandísima noticia.
PhoneGap es una herramienta que nos permite escribir aplicaciones para móviles en Javasscript, una iniciativa que recuerda mucho a la forma de desarrollar para el nuevo WebOS de Palm. La idea es aprovechar el conocimiento que tiene cualquier creador de aplicaciones web para desarrollar aplicaciones más “tradicionales”.
Desarrollando una aplicación con PhoneGap, podremos utilizarla sin cambios en Android, IPhone y Blackberry. O lo que es lo mismo, en la mayor parte de los dispositivos móviles del mercado. ¿Se pude pedir más?
PhoneGap nos dá soporte multiplataforma para poder usar la geolocalización, la vibración, el sonido y la información del acelerómetro de nuestro teléfono. Todo ello usando estandares perfectamente conocidos, y totalmente libre, abierto.
Aquí tenemos varios enlaces interesantes para empezar:

Página del proyecto: http://www.phonegap.com/
Descarga: http://www.phonegap.com/download

Aplicaciones:

http://github.com/bowserj/phonegap/archives/contacts
http://www.phonegap.com/projects

Tutorial de uso:

http://phonegap.pbworks.com/Getting-started-with-Android-PhoneGap-in-Eclipse-(Tested)
http://phonegap.pbworks.com/Getting+Started+with+PhoneGap+(Android) 

Vamos a crear nuestra primera aplicación con Phonegap para Android.
La primera parte es crear nuestro proyecto vacío y todas las dependencias necesarias

1. Crear un proyecto Android normal y corriente desde el Wizard de Eclipse
2. Añadir dos nuevos directorios al proyecto:
   • /libs
   • assets/www
3. Copiar cordova-1.8.0.js al directorio assets/www (desde el directorio donde instalamos el SDK de Phonegap)
4. Copiar cordova-1.8.0.jar al directorio libs (desde el directorio donde instalamos el SDK de Phonegap)
5. Actualizar el proyecto en Eclipse para que reconstruya el Build Path e incluya la nueva librería que hemos copiado

Con ésto ya tendremos todo configurado para desarrollar nuestra aplicación usando el SDK de Phonegap. Ahora vamos a cambiar el contenido de nuestra primera actividad por una web gracias a Phonegap:

1. Editar la actividad que haya creado el wizard de Eclipse de ésta forma:
   1. Añadir import org.apache.cordova.*; a los import
   2. Cambiar la clase de la que hereda la atividad de Activity a DroidGap
   3. Reemplazar setContentView() por super.loadUrl(“file:///android_asset/www/index.html”);
   Quedará de ésta forma:
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   package com.seroton.phonegap.statuslist;   import android.app.Activity; import android.os.Bundle; import org.apache.cordova.*;   public class statusListPhoneGapActivity extends DroidGap {     @Override     public void onCreate(Bundle savedInstanceState)     {         super.onCreate(savedInstanceState);         super.loadUrl("file:///android_asset/www/index.html");     } }

2. Editar AndroidManifest.xml y añadir éstos dos cambios:
   1. Añadir lo siguiente:

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

      <supports-screens     android:largeScreens="true"     android:normalScreens="true"     android:smallScreens="true"     android:resizeable="true"     android:anyDensity="true" />       <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" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />

   2. Hacer que la actividad soporte el cambio de orientación añadiendo:

      1	android:configChanges="orientation|keyboardHidden|screenSize"

3. Crear el archivo index.html en el directorio assets/www:

   1 2 3 4 5 6 7 8 9 10

   <!DOCTYPE HTML> <html> <head> <title>Cordova</title> <script type="text/javascript" charset="utf-8" src="cordova-1.8.0.js"></script> </head> <body> <h1>Hello World</h1> </body> </html>

Crear el archivo res/xml/plugins.xmlcon éste contenido:


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<?xml version="1.0" encoding="utf-8"?> <plugins>     <plugin name="App" value="org.apache.cordova.App"/>     <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>     <plugin name="Device" value="org.apache.cordova.Device"/>     <plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>     <plugin name="Compass" value="org.apache.cordova.CompassListener"/>     <plugin name="Media" value="org.apache.cordova.AudioHandler"/>     <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>     <plugin name="Contacts" value="org.apache.cordova.ContactManager"/>     <plugin name="File" value="org.apache.cordova.FileUtils"/>     <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>     <plugin name="Notification" value="org.apache.cordova.Notification"/>     <plugin name="Storage" value="org.apache.cordova.Storage"/>     <plugin name="Temperature" value="org.apache.cordova.TempListener"/>     <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>     <plugin name="Capture" value="org.apache.cordova.Capture"/>     <plugin name="Battery" value="org.apache.cordova.BatteryListener"/>     <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/> </plugins>

Ya podemos ejecutarlo en el emulador o en nuestro terminal conectado por USB y veremos corriendo nuestra primera aplicación Phonegap. Pronto desarrollaremos ejemplos más complejos.
¡Happy coding!