Esta herramienta maneja APIs que permiten el acceso y control de elementos como el acelerómetro, cámara, contactos en el dispositivo, red, almacenamiento, notificaciones, entre otras.

PhoneGap cuenta con dos grandes ventajas al momento del desarrollo: se pueden ejecutar las aplicaciones en nuestro navegador web, sin depender de un simulador dedicado a esta tarea, y por otra parte, tenemos la posibilidad de soportar funciones sobre frameworks como Sencha Touch o JQuery Mobile.

Actualmente PhoneGap se encuentra en un proceso de “re identificación”, pues se conocen planes de cambiar su nombre, debido a que esta tecnología fue adquirida por la compañía Adobe, y ellos desean re-nombrar esta herramienta como “Cordova”.

Manos a la obra.

Explicaremos cómo llevar a cabo una aplicación nativa en  las principales plataformas móviles Android, Windows Phone e IOS.

Así que primero realizaremos el clásico “hola mundo” con un simple html

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Hola mundo en Phonegap</title>
</head>
<body>
<h1>HOLA MUNDO!</h1>
</body>
</html>

Android

Para desarrollar en android lo haremos con el software Eclipse entonces:

  • Descargar e instale la ultima versión de Eclipse Classic aunque sirve desde la versión 3.4 hacia adelante.
  • Descargar e instalar el SDK de Android
  • Descargar e instalar el plugin ADT
  • Descargar la última versión de Phonegap y extraiga su contenido. Vamos a trabajar con el directorio de Android así que puede eliminar los otros directorios dentro de la carpeta lib.

Luego de instalar los elementos anteriores, abrimos Eclipse y creamos Nuevo> Proyecto de Android y completamos las ventanas con los datos que ocuparemos.

En el directorio raíz del proyecto debemos crear 2 nuevos directorios

  • / Libs
  • activos / www

Copiar archivos

  • copiar el archivo Córdoba-1.7.0.jar dentro de Libs,
  • Córdoba-1.7.0.js dentro de activos / www
  • Copiar xml carpeta de la descarga anterior a Córdoba / RES

Para cargar los nuevos archivos dentro de la solución del proyecto apretamos (F5)

Editar el archivo principal de su proyecto de Java se encuentra en el src carpeta en Eclipse:

  • Añadir import org.apache.cordova *.;
  • Cambie el de la clase se extienden desde la actividad de DroidGap
  • Vuelva a colocar la setContentView () de acuerdo con super.loadUrl (“file :/ / / android_asset / www / index.html”);

Click derecho sobre AndroidManifest.xml y seleccione Abrir con> Editor XML y Pegar los siguientes permisos entre el <uses-sdk…/> y <application…/> etiquetas.

<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" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />

Luego para finalizar entrar a assets/www y abrir el archivo index.html para luego copiar el código que teníamos anteriormente agregando el script.

<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js">
</script>

Para probar nuestro código hacemos click derecho al proyecto y ejecutamos la aplicación.

Windows Phone

El desarrollo en esta plataforma se realizará en SDK de Windows Phone con lo cual programaremos en Visual Studio con lo cual una de las limitante para los que no tengan un PC con windows especialmente de windows vista Servipack 2 hacia adelante.

Abra Visual Studio Express para Windows Phone y crea un Nuevo proyecto, seleccione CordovaStarter , coloque el nombre del proyecto que desee y aceptar.

Luego revisamos dentro de la carpeta assets/www en el explorador de soluciones para abrir el archivo index.html y copiamos el código html que teníamos anteriormente, agregando el script.

<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js">
</script>

Para probar nuestro código simplemente ejecutamos la aplicación en el emulador que deseemos a que posee 2 uno con 256 mb y otro con 512 mb.

IOS

El desarrollo  plataforma IOS la realizaremos sobre Xcode que la pueden descargar desde la Mac App Store y con el directorio de Lib/ios de Cordova. Al igual que en windows phone aquí también existe una limitante la cual es que se debe trabajar sobre un MAC, y además es necesario tener la certificación de developer de IOS.

Abrimos Xcode y creamos un nuevo proyecto basado en Cordova-based Application.
Cuando nuestro proyecto ya está instalado realizamos click derecho a la solución y abrimos la carpeta con el nombre “www”, debemos arrastrar a esta solución (específicamente donde está el nombre que nosotros le damos en el explorador de la solución) y nos aparecerá una ventana donde debemos seleccionar donde dice
crear referencias de carpetas para las carpetas de agregado
o en inglés

create folder references for any added folders

y colocamos Finalizar.

y para finalizar buscamos el archivo index.html que se encontrara dentro de la carpeta ”www” y copiamos el código html que teníamos anteriormente, agregando el script.

<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js">
</script>

Para probar nuestro código simplemente seleccionamos que tipo de dispositivo queremos usar y ejecutamos la aplicación (en la parte superior izquierda del Xcode).

APRENDAMOS MÁS

En Mejorando.la puedes ver el Curso de Android y PhoneGap con @ykro.

Te recomendamos echar un vistazo al Curso de Android y a la guía de desarrollo en IOS5