Introduccin al desarrollo para

plataformas mviles con Phonegap

Si queremos desarrollar aplicaciones para mviles, qu herramienta conviene
utilizar y para qu plataforma mvil?
Las aplicaciones Android se desarrollan usando Java, iOS usa Objetive C como
lenguaje de desarrollo y Symbiam usa C++...
Esto implica la necesidad de manejar correctamente muchos lenguajes de
programacin (muy diferentes) para desarrollar una sola aplicacin. Adems, cada
plataforma requiere del uso de un IDE diferente.
Qu es lo ideal? Desarrollar para todas las plataformas usando un nico cdigo, as
las aplicaciones abarcan un nmero mayor de posibles usuarios y todo ello con un
ahorro de esfuerzo considerable.
Hay una forma de desarrollar aplicaciones con una tecnologa nica?
PhoneGap es un framework que funciona como una solucin multi-plataforma y que
permite usar las ltimas tecnologas web: HTML5, CSS3 y JavaScript.

Los desarrolladores web pueden desarrollar aplicaciones nativas para dispositivos

mviles usando tecnologas familiares y fciles de usar.
Con PhoneGap, con un solo cdigo cuya lgica de programacin est sustentada en el
lenguaje de programacin web JavaScript, obtendremos la aplicacin para varias
plataformas mviles.

1. INTRODUCCIN
PhoneGap es un framework para el desarrollo de aplicaciones mviles. Actualmente
pertenece a Adobe Systems.
PhoneGap permite a los programadores desarrollar aplicaciones para dispositivos
mviles utilizando herramientas genricas tales como JavaScript, HTML5 y CSS3.

Las aplicaciones resultantes son hbridas, es decir que no son realmente aplicaciones
nativas al dispositivo (ya que el renderizado es realizado mediante vistas web). Sin
embargo, no se tratan tampoco de aplicaciones web puras.
Son empaquetadas para ser desplegadas en el dispositivo trabajando con el API del
sistema nativo.
PhoneGap maneja APIs que permiten tener acceso a elementos como el
acelermetro, cmara, contactos en el dispositivo, red, almacenamiento,
notificaciones, etc.
PhoneGap es compatible con frameworks de desarrollo web mvil: jQuery Mobile,
Sencha Touch, Dojo, jQTouch, SprountCore, GloveBox, XUI, iScroll.

2. DATOS SOBRE PHONEGAP - CORDOVA

Actualmente este framework soporta:
Android
iOS
Windows Phone
BlackBerry OS
Web OS
Symbiam
Bada

Podemos ver el soporte actual para cada una de estas plataformas:

http://www.phonegap.com/features

PhoneGap es completamente libre. Se puede descargar de la pgina web oficial:

http://phonegap.com/download
Adems disponemos de una seccin para desarrolladores con instrucciones para
comenzar a usarlo.
Aunque Phonegap es el ms conocido, existen otros frameworks similares:
Appcelerator Titanium: http://www.appcelerator.com/
Mobl: http://www.appcelerator.com/
Sencha Touch: http://www.sencha.com/products/touch/

3. DESCARGAR PHONEGAP
Al descargar PhoneGap de su sitio web, obtenemos un archivo .zip.
Al descomprimirlo obtenemos una carpeta para cada sistema operativo, con una
librera JavaScript y otra en el lenguaje nativo para comunicar la aplicacin web con
el dispositivo.

Podemos descargar la ltima versin disponible del framework de:

http://phonegap.com/download/

Actualmente la versin ms nueva es la 2.8.0.

4. CREAR LA PRIMERA APLICACIN (PROYECTO ANDROID)

En http://phonegap.com/start podemos encontrar tutoriales detallados para
comenzar a hacer aplicaciones PhoneGap para cada sistema operativo compatible:
iOS, Android, BlackBerry OS, Windows Phone, Web OS , Bada y Symbian.
A continuacin, veamos los pasos necesarios para crear un proyecto PhoneGap para
Android con Eclipse y el plugin ADT instalados.
Iniciar Eclipse y crear un nuevo proyecto a travs del men File > New > Project

Eclipse nos guiar en el proceso de crear la aplicacin. Bsicamente debemos

rellenar las diferentes ventanas como mostramos a continuacin.
Crearemos un proyecto Android nuevo:

A continuacin indicamos el nombre del proyecto:

Pulsamos siguiente en los siguientes cuadros de dilogo:

Una vez creado, estaremos en la pantalla principal de Eclipse, y veremos a la

izquierda el explorador de proyectos.
All vamos a abrir el proyecto recin creado y pulsando con el botn derecho, vamos
a crear una carpeta /assets/www y otra /libs (si no existen).

Debemos copiar en /assets/www el archivo cordova-2.8.0.js y en /libs el archivo

cordova-2.8.0.jar. Ambos archivos estn en la carpeta obtenida al descomprimir el
paquete descargado.
Slo tenemos que arrastrar desde el explorador de ficheros del sistema operativo los
archivos indicados sobre la carpeta que acabamos de crear en nuestro proyecto.

Desplegar la carpeta /src del proyecto para modificar el archivo Java y dejarlo como
sigue (hacemos doble clic en l para cargarlo en el editor):

Y hacer lo propio con el archivo index.html que tendremos en la carpeta www en

assets:

Ya podemos pasar a ejecutar el proyecto en el emulador. Seleccionar el men Run >

Run y en la ventanita, seleccionar Android Application.

Durante la compilacin veremos abajo, en la Consola los mensajes de avance. Si todo

ha ido bien, veremos un mensaje en el que se indica que se ha lanzado el Activity (la
pantalla de la aplicacin):

Al mismo tiempo que se realiza la compilacin, se lanzar el emulador, que

arrancar Android como lo hace cualquier dispositivo fsico:

Una vez haya arrancado, nos mostrar la aplicacin en ejecucin. En nuestro caso
veremos la pantalla en la que mostramos el mensaje Holita vecino. Si hubiramos
incluido enlaces a otras pginas, imgenes o elementos de formulario, podramos
interaccionar con la aplicacin:

5. DESCRIPCIN DE LAS APIS DE PHONEGAP

Como primera aplicacin hemos hecho algo muy sencillo, pero PhoneGap ofrece
varias APIS para desarrollar aplicaciones que tengan acceso al hardware del
dispositivo mvil:

Acelerometer: brinda acceso al acelermetro del dispositivo si es que cuenta

con l.
Camera: Brinda acceso a la aplicacin de la cmara para tomar una foto u
obtenerla de la galera.
Capture: Brinda acceso a aplicaciones de capturas de audio y video.
Compass: Esta API es til para hacer verificacin en cambio de la orientacin
del dispositivo, tambien depende del hardware del dispositivo.
Connection: til para trabajar con las conexiones de red que cuenta el
dispositivo, desde redes WiFi, redes 3G, redes 4G entre otras.
Contacts: proporciona acceso a los contactos almacenados en el dispositivo.
Device: Con esta se pueden obtener datos del dispositivo como el sistema
operativo, el nombre y algunos otros datos relevantes.
Events: con esta APIS es posible manejar eventos de teclas fsicas del
dispositivo, adems de manejar los diferentes eventos generados en el ciclo
de vida de una aplicacin.
File: Su implementacin facilita el acceso a los archivos del dispositivo, con
esta API se puede crear, editar y leer archivos binarios.
Geolocation: til para obtener la posicin geogrfica del dispositivo, ya bien
sea a travs de redes o del GPS satelital si cuenta el cuenta el dispositivo con
uno.
Media: proporciona acceso a reproductores multimedia como sonido y video.
Notication: adems de ser til para crear cuadros de dilogos como alertas
nativas del sistema, tambin brinda acceso al vibrador si el dispositivo lo
posee.
Storage: Facilita el uso de base de datos basadas en el estndar de W3C y el
uso de localStorage.

Todas las APIs se encuentran detalladas, con ejemplos de uso, en la web:

http://docs.phonegap.com/en/2.8.0/index.html

6. PHONEGAP BUILD: COMPILADOR EN LA NUBE

Debido a lo complicado que resulta hacer todas las configuraciones necesarias para
hacer uso de PhoneGap en diferentes plataformas y sistemas de desarrollo,
disponemos de un compilador en la nube que nos facilitar la compilacin de
nuestras aplicaciones.
Por ejemplo, el entorno de desarrollo Windows Phone solo se puede ejecutar en el
sistema operativo Windows, mientras que para desarrollar para iOS es necesario un
sistema operativo OS X de Apple.
El compilador en la nube recibe el nombre de PhoneGap Build y se encuentra en la
siguiente web http://build.phonegap.com/
Para usarlo debemos crear una cuenta:

Desarrollador (gratis).
Starter ($12 mensuales).
Team ($30 mensuales).
Corporativa ($90 mensuales).

Cada uno de esos tipos nos permite mantener y compilar diferente nmero de
apliaciones (privadas y pblicas).
Aunque PhoneGap se puede usar en siete plataformas, PhoneGap Build solo compila
para seis: iOS, Android, BlackBerry OS, Symbiam, Web OS y Windows Phone.
El modo de funcionamiento es sencillo: slo tenemos que subir el cdigo de nuestra
aplicacin en forma de archivo .zip teniendo en cuenta que el inicio de nuestra
aplicacin debe ser el archivo index.html
PhoneGap Build nos avisa de posibles errores si los hay, de no ser as, obtenemos un
paquete de instalacin para cada uno de los sistemas operativos mviles soportados.

BIBLIOGRAFA Y OTROS RECURSOS EN INTERNET

http://www.phonegap.com
http://www.maestrosdelweb.com/editorial/aplicacion-nativa-phonegap
http://www.desarrolloweb.com/manuales/aplicaciones-moviles-phonegap.html
http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-forandroid.html
http://blog.jorgeivanmeza.com/2011/05/primeros-pasos-con-phonegap-para-android/
http://www.tricedesigns.com/2013/03/06/video-intro-to-phonegap-from-mobiledevtu/
http://mobile.tutsplus.com/tutorials/phonegap/phonegap-from-scratch/
http://phonegap.com/2012/03/21/introducing-cordova-js/
http://people.igalia.com/mrego/mfs/2012/phonegap/phonegap.pdf
https://github.com/phonegap/phonegap/wiki