Este es el tercer artículo del Manual de PhoneGap, hasta este punto conocemos una gama amplia de ventajas que tenemos al desarrollar aplicaciones web móviles, las cuales se convierten de forma muy fácil en una aplicación nativa de los dispositivos, con la utilización de PhoneGap, sin importar el sistema operativo, los cuales hay que decirlo no son pocos, hay que pensar en los que lideran el mercado, pero cada uno tiene una arquitectura completamente ajena a la de los demás, sin mencionar aun el lenguaje que usan para desarrollar sus aplicaciones, esto es un gran reto para quienes vemos al mundo móvil como una excitante aventura de negocio y aprendizaje, pero que debido a su variedad se convierte en una tarea de grandes retos, que demanda una gran responsabilidad y dedicación. Para el presente artículo vamos desarrollar nuestra primera aplicación, para tal empresa nos basaremos en la guía de "Get Started Guide" disponible en el siguiente enlace http://phonegap.com/start donde podemos encontrar con lujos de detalles la forma, requisitos y pasos para comenzar a compilar aplicaciones PhoneGap en cada uno de los siete sistemas operativos compatibles con el framework, que recordemos son los siguientes: iOS, Android, BlackBerry OS, Windows Phone, Web OS , Bada y Symbian, los cuales hay que decirlos son los más importantes en la actualidad.

Escogiendo plataforma de desarrollo

Para llevar a feliz término la culminación de este articulo, vamos a escoger uno de los siete sistemas operativos compatibles con PhoneGap para desarrollar nuestra primera aplicación, esta elección no fue fácil, pero debo decir que Android es el indicado por su naturaleza libre y la gran cuota de mercado que sobre pasa a los demás, aunque debo aceptar que también es mi favorito. Damos por supuesto que ya sabes como desarrollar aplicaciones Android, además de sus estructura de trabajo y arquitectura de las aplicaciones de no ser así dale una repasada la guía disponible en developer.android.com, aunque no es indispensable por los menos hay que saber cómo compilar una aplicación. Como debes saber vas a necesitar eclipse en su versión 3.4 en adelante, el Android SDK y el ADT plugin de eclipse, todo esto es necesario para desarrollar aplicaciones Android. Por último debemos descargar la última versión de PhoneGap en phonegap.com/download. Con esto tenemos las herramientas necesarias para iniciarse en el desarrollo de aplicaciones Android basadas en PhoneGap.

Comenzando con el proyecto

Una vez tenemos nuestro entorno de desarrollo Android montado procedemos a crear un nuevo proyecto Android que podemos llamarlo inicioPhoneGap. En el directorio que alberga el proyecto creamos una nueva carpeta con el nombre libs, y otra dentro del directorio assents con el nombre www. En libs copiamos el archivo cordova-1.x.x.jar disponible en el directorio Android de tu versión de PhoneGap que acabas de descargar, en la mayoría de los casos eclipse no te va a reconocer la librería Java por lo que debes hacer clic derecho sobre el directorio libs ir a la opcion Build paths> Configure Build paths, entonces en la etiqueta de libraries agregue a cordova-1.x.x.jar. Dentro del directorio assents/www irá dispuesto todo los que vamos a necesitar de nuestra aplicación web, por ende aquí va el archivo cordova-1.x.x.js.

Ahora debemos hacer algunos cambios en el código Java de la clase principal, primero esa clase debe heredar DroipGap y no a Activity, remplazamos el setContentView() con la siguiente línea super.loadUrl("file:///android_asset/www/index.html") y agragamos los siguientes paquetes:

import org.apache.cordova.*;

Removemos en la importación del paquete:

import android.app.Activity;

La otra configuración va en el manifiesto donde se deben escribir los siguientes permisos:

<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_LOCATIO>
<uses-permission
android:name="android.permission.ACCESS_FINE_LOCATION">
<uses-permission
android:name="android.permission.ACCESS_LOCATION_EXTRA>
<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_STORAG>
<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" />

Trabajando en la aplicación Web

Una vez realizadas todas las configuraciones, solo nos resta hacer nuestra aplicación Web, que en este caso será muy sencilla, pues solo hará un saludo. Para facilitar las cosas vamos a recurrir a jQuery Mobile para que nuestras primera aplicación se vea mejor, por eso debemos copiar todo los archivos que requiere jQuery Mobile al directorio www, además de crear un archivo index.html, el cual será el main de nuestra aplicación, dentro de ese archivo .html vamos a escribir el siguiente código.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
<script src="jquery.min.js">
</script>
<script src="jquery.mobile-1.1.0.min.js">
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Mas saludos
</h3>
</div>
<div data-role="content">
<h2>primera app con PhoneGap</h2>
   <a href="#msj" data-role="button" data-theme="b" data-rel="dialog">Saludar a PhoneGap</a>

</div>
<div data-theme="a" data-role="footer">
<h3>
Saludos
</h3>
</div>
</div>
<div data-role="page" id="msj">
    <div data-theme="a" data-role="header">
<h3>
Más saludos
</h3>
</div>
<div data-role="content">
<a href="https://desarrolloweb.com">DesarolloWeb.com</a> saludando a PhoneGap
<a href="#" data-role="button" data-theme="e" data-rel="back">Aceptar</a>
</div>
</div>
</body>
</html>

Como puedes ver es una página web normal, que hace uso de jQuery Mobile, framework del que se había advertido el uso y del que se ha escrito un manual en DesarrolloWeb.com. Una vez tengas tu index.html preparado con el código anterior, puedes compilar tu aplicación Android, ejecutarla en el emulador.
Para terminar resta decir que el proceso es un tanto confuso, y largo para cada aplicación, pero en el próximo capitulo veremos como construir nuestras aplicaciones móviles sin instalar SDKs, y entornos de desarrollo para cada plataforma.