Introducción al desarrollo para plataformas móviles con Phonegap Si queremos desarrollar aplicaciones para móviles, qué herramienta conviene utilizar y para qué plataforma móvil? 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 programación (muy diferentes) para desarrollar una sola aplicación. Además, cada plataforma requiere del uso de un IDE diferente. Qué es lo ideal? Desarrollar para todas las plataformas usando un único código, así las aplicaciones abarcan un número mayor de posibles usuarios y todo ello con un ahorro de esfuerzo considerable. Hay una forma de desarrollar aplicaciones con una tecnología única? PhoneGap es un framework que funciona como una solución multi-plataforma y que permite usar las últimas tecnologías web: HTML5, CSS3 y JavaScript. Los desarrolladores web pueden desarrollar aplicaciones nativas para dispositivos móviles usando tecnologías familiares y fáciles de usar. Con PhoneGap, con un solo código cuya lógica de programación está sustentada en el lenguaje de programación web JavaScript, obtendremos la aplicación para varias plataformas móviles. 1. INTRODUCCIÓN PhoneGap es un framework para el desarrollo de aplicaciones móviles. Actualmente pertenece a Adobe Systems. PhoneGap permite a los programadores desarrollar aplicaciones para dispositivos móviles utilizando herramientas genéricas tales como JavaScript, HTML5 y CSS3.
Las aplicaciones resultantes son híbridas, 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 acelerómetro, cámara, contactos en el dispositivo, red, almacenamiento, notificaciones, etc. PhoneGap es compatible con frameworks de desarrollo web móvil: 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 página web oficial: http://phonegap.com/download Además disponemos de una sección para desarrolladores con instrucciones para comenzar a usarlo. Aunque Phonegap es el más 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 librería JavaScript y otra en el lenguaje nativo para comunicar la aplicación web con el dispositivo. Podemos descargar la última versión disponible del framework de: http://phonegap.com/download/
Actualmente la versión más nueva es la 2.8.0. 4. CREAR LA PRIMERA APLICACIÓN (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 continuación, 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 través del menú File > New > Project Eclipse nos guiará en el proceso de crear la aplicación. Básicamente debemos rellenar las diferentes ventanas como mostramos a continuación. Crearemos un proyecto Android nuevo:
A continuación indicamos el nombre del proyecto: Pulsamos siguiente en los siguientes cuadros de diálogo:
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 recién creado y pulsando con el botón 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 están en la carpeta obtenida al descomprimir el paquete descargado. Sólo 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 compilación 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 aplicación): Al mismo tiempo que se realiza la compilación, se lanzará el emulador, que arrancará Android como lo hace cualquier dispositivo físico:
Una vez haya arrancado, nos mostrará la aplicación en ejecución. En nuestro caso veremos la pantalla en la que mostramos el mensaje Holita vecino. Si hubiéramos incluido enlaces a otras páginas, imágenes o elementos de formulario, podríamos interaccionar con la aplicación:
5. DESCRIPCIÓN DE LAS APIS DE PHONEGAP Como primera aplicación hemos hecho algo muy sencillo, pero PhoneGap ofrece varias APIS para desarrollar aplicaciones que tengan acceso al hardware del dispositivo móvil: Acelerometer: brinda acceso al acelerómetro del dispositivo si es que cuenta con él. Camera: Brinda acceso a la aplicación de la cámara para tomar una foto u obtenerla de la galería. Capture: Brinda acceso a aplicaciones de capturas de audio y video. Compass: Esta API es útil para hacer verificación en cambio de la orientación 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 físicas del dispositivo, además de manejar los diferentes eventos generados en el ciclo de vida de una aplicación. File: Su implementación facilita el acceso a los archivos del dispositivo, con esta API se puede crear, editar y leer archivos binarios. Geolocation: Útil para obtener la posición geográfica del dispositivo, ya bien sea a través 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: además de ser útil para crear cuadros de diálogos como alertas nativas del sistema, también brinda acceso al vibrador si el dispositivo lo posee. Storage: Facilita el uso de base de datos basadas en el estándar 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 compilación 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 número de apliaciones (privadas y públicas). 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: sólo tenemos que subir el código de nuestra aplicación en forma de archivo.zip teniendo en cuenta que el inicio de nuestra aplicación debe ser el archivo index.html PhoneGap Build nos avisa de posibles errores si los hay, de no ser así, obtenemos un paquete de instalación para cada uno de los sistemas operativos móviles soportados. BIBLIOGRAFÍA 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