Download Introducción al desarrollo para plataformas móviles con Phonegap

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