Introducción a PhoneGap / Apache Cordova

En este artículo quiero hacer una pequeña introducción al estupendo framework PhoneGap, tecnología que llevo usando y exprimiendo varios años y sobre el que he desarrollado numerosas aplicaciones móviles. Si lo tuyo es el desarrollo web y te gusta la programación frontend, te vas a sentir como en casa desarrollando sobre PhoneGap ya que podrás reutilizar todos tus conocimientos en HTML5, CSS3 y JavaScript.

De momento analizaremos cómo montar nuestro stack de desarrollo para trabajar con PhoneGap, destacando qué elementos debemos instalar y qué posibilidades tenemos para compilar y ejecutar nuestros proyectos en dispositivos o simuladores. No veremos nada de su API interna para poder hacer uso de capacidades nativas no disponibles en HTML5, eso lo dejaré para un segundo artículo. Sin embargo, con lo que veremos en esta introducción podremos encapsular cualquier aplicación HTML5 estándar dentro de una aplicación móvil.

¿Qué es PhoneGap?

PhoneGap es un framework que nos permitirá encapsular una aplicación web desarrollada en HTML5, JavaScript y CSS3 en una versión nativa que podremos instalar y/o publicar en distintas plataformas móviles y plataformas de escritorio.

La estrategia que persigue consiste en sustituir el navegador por una vista web (WebView) embebida en una aplicación nativa, haciendo transparente al usuario que realmente es una aplicación web. Además, gracias a librerías puente adicionales (plugins) podremos acceder a ciertas funcionalidades nativas no disponibles en un navegador web estándar a través de APIs JavaScript .

Mira sobre qué cantidad de plataformas podrás crear versiones nativas de tu aplicación:

•    Android
•    Amazon FireOS
•    Windows Phone (7 y 8)
•    BlackBerry 10
•    Firefox OS
•    iOS
•    Ubuntu
•    Windows 8
•    Tizen

Hay que admitir que pocos frameworks multiplataforma te permiten a día de hoy alcanzar a tantas plataformas. Una pasada.

Aclaración sobre aplicaciones web

El término «aplicación web» es muy amplio, y conviene aclarar qué tipo de aplicaciones podremos encapsular con PhoneGap. El framework está orientado a aplicaciones web que hagan uso de tecnologías de frontend, es decir, HTML5, CSS3 y JavaScript. No podremos usar tecnologías de servidor como PHP, Ruby o similares dentro de nuestra aplicación PhoneGap ya éste pone a nuestra disposición un mini-navegador (el WebView), no un mini-servidor. Obviamente podremos comunicarnos con servidores externos para obtener datos o incluso vistas HTML5, pero toda la lógica de la aplicación debe estar contenida en el cliente.

Es cierto que también podríamos cargar en el WebView interno de PhoneGap una dirección web cualquiera y así obtendríamos una «versión instalable» de dicha web, pero no es la filosofía de la plataforma ya que el efecto sería el mismo que crear un acceso directo a dicha web, con la salvedad que podríamos publicarlo en tiendas.

Aplicaciones de tipo SPA basadas en tecnologías frontend como por ejemplo Angular.js, backbone.js o ember.js, encajarían muy bien dentro de una aplicación que pudiera encapsularse con PhoneGap. Sin embargo, lo más común es hacer uso de frameworks HTML5 específicos para móvil como son Ionic, Framework 7 o Sencha Touch, pues además nos proporcionarán componentes visuales típicos en interfaces móviles.

Arquitectura de PhoneGap

La arquitectura de PhoneGap podemos dividirla  en dos partes: el kernel y los plugins.

El kernel se encarga básicamente de arrancar la aplicación nativa, crear un WebView y cargar dentro de él nuestra aplicación web. También se encargará de establecer la arquitectura básica de comunicación entre dicho WebView y la parte nativa de la aplicación, para que pueda ser utilizada por parte de los plugins.

Por otra parte, los plugins son componentes que podremos añadir para hacer uso de funcionalidades, servicios y APIs nativas que no son accesibles de forma estándar por un navegador web, expuestas ante nuestra aplicación como funciones JavaScript que podremos usar desde nuestra aplicación web.

Entre los plugins oficiales (mantenidos por los desarrolladores de PhoneGap) podemos encontrar los siguientes:

•    Battery Status: Monitorización y consulta de estado de la batería
•    Camera: acceso a la cámara y álbum de fotos del dispositivo
•    Contacts: acceso, creación y modificación de contactos existentes en el dispositivo
•    Device: Información referente al dispositivo (plataforma, versión de S.O., etc.)
•    Device Motion: acceso al acelerómetro del dispositivo
•    Device Orientation: acceso a la brújula del dispositivo
•    Dialogs: mostrar notificaciones en forma de diálogos
•    FileSystem: acceso al sistema de ficheros del dispositivo modelado a través del API File de HTML5
•    File Transfer: soporte para descargas y subidas de ficheros
•    Geolocation: consulta de posición GPS
•    Globalization: soporte para representar distintos objetos según su localización
•    InAppBrowser: abrir URLs dentro de la propia aplicación sin salir al navegador principal del dispositivo.
•    Media: Grabación y reproducción de archivos de audio
•    Media Capture: captura de ficheros multimedia mediante las aplicaciones de captura del dispositivo
•    Network Information: información sobre el estado de la conexión del dispositivo, si está online u offline o si está mediante Wifi, 3G, etc.
•    Splashscreen: control fino sobre el comportamiento de la pantalla de inicio SplashScreen.
•    Vibration: hacer que el dispositivo vibre.

También existen numerosos plugins creados por la comunidad que podremos buscar desde https://plugins.cordova.io, y en última instancia siempre tendremos la posibilidad de crearnos los nuestros propios, aunque en ese caso sí necesitaremos  disponer de conocimientos sobre desarrollo nativo en cada plataforma.

PhoneGap vs Apache Cordova

Antes de empezar a juguetear con el framework quiero aclarar la relación entre PhoneGap y Apache Cordova, pues mucha gente no tiene claro si son lo mismo o no. Para entenderlo mejor haremos un poco de historia.

PhoneGap fue desarrollado por la empresa Nitobi como software libre, pero en 2011 Adobe la adquirió pasando así PhoneGap al control del gigante de software. Por aquel entonces la comunidad alrededor de PhoneGap ya era considerable y tanto Adobe como Nitobi sabían que debían mantenerla para que la plataforma siguiese creciendo, así que decidieron mantener libre el desarrollo bajo el paraguas de la fundación Apache y rebautizaron el proyecto como Apache Córdova.

Como ellos mismos dicen, Apache Cordova es a PhoneGap lo que WebKit es a Chrome o Safari. Por una parte estaría la tecnología en sí y por otra un producto comercial basado en ella. Apache Cordova es y siempre será libre, y los avances que se produzcan sobre la plataforma (nuevas versiones, funcionalidades, etc.) se harán sobre Apache Cordova. Sin embargo, Adobe construirá su propia versión que seguirá llamando PhoneGap y sobre la que ofrecerá servicios complementarios de valor añadido.

Instalando PhoneGap

Para la creación y gestión de nuestro proyecto PhoneGap necesitaremos el cliente de comandos que podremos instalar a través de NMP, el sistema de paquetería de NodeJS que imagino que ya tendrás instalado en tu sistema como buen desarrollador web que eres. Si no es así, visita ambas páginas para informarte de los pasos a seguir para instalarlos en tu plataforma de desarrollo.

Realmente podemos instalar dos versiones de comandos: phonegap o cordova. Personalmente prefiero instalar phonegap porque a día de hoy (no siempre fue así) con el cliente phonegap podremos hacer lo mismo que con el cliente cordova, pero además podremos acceder a los servicios y aplicaciones creadas por Adobe, pues algunos de ellos son gratuitos y siempre puede venir bien.

Para instalarlo ejecutamos en nuestra línea de comandos lo siguiente

$ npm install -g phonegap@latest

Si optásemos por usar el cliente cordova haríamos algo similar

$ npm install -g cordova

Creación de un proyecto ejemplo

Vamos a crear un proyecto PhoneGap haciendo uso de nuestro cliente de comandos que acabamos de instalar y echaremos un vistazo a su estructura interna. Escribimos esto en la línea de comandos

$ phonegap create miApp

Esto creará un directorio miApp con el siguiente contenido:

• config.xml: fichero de configuración donde podremos tunear cositas
• hooks: scripts para realizar operaciones de integración, construcción, etc. Uso avanzado que no veremos aquí.
• plugins: aquí se alojarán los plugins que vayamos instalando (lo haremos más adelante).
• www: aquí es donde está la mandanga, nuestra app web. Este será el contenido que se cargue en el WebView.

Si ojeamos el contenido del directorio www veremos que ya hay una pequeña “app” de ejemplo a modo de aplicación HelloWorld. Esta app es muy básica y no hace uso de ningún plugin externo, pero los chicos de PhoneGap son muy listos y saben que lo que deseas realmente es ejecutar cuanto antes algo en un teléfono o simulador. Así que eso mismo es lo que vamos a hacer ahora, ejecutar esa pequeña aplicación en algún dispositivo.

Ejecutando la aplicación de ejemplo

Opción 1: PhoneGap App

La opción más rápida para ver corriendo nuestra aplicación en un dispositivo móvil es haciendo uso de PhoneGap App, uno de los servicios ofrecidos por Adobe para desarrolladores y que podremos usar gratuitamente siempre que estemos haciendo uso del cliente phonegap, no el cliente cordova.

Esta aplicación está disponible en Google Play, App Store y Windows App Store, así que la instalaremos en el dispositivo donde deseemos hacer las pruebas y tras conectarla con nuestro proyecto a través de nuestra red local podremos ver en vivo el funcionamiento de nuestra app, así como ver reflejado automáticamente cualquier cambio que realicemos en el código.

Instalamos y ejecutamos la aplicación en nuestro dispositivo y veremos nos solicitará que especifiquemos una dirección a la que conectarse

 

Para saber qué dirección es esa debemos ejecutar lo siguiente en nuestro equipo, dentro del directorio miApp:

$phonegap serve
[phonegap] starting app server...
[phonegap] listening on 192.168.10.12:3000
[phonegap]
[phonegap] ctrl-c to stop the server


Introducimos la dirección que se nos indica y voilà, app ejecutándose en el dispositivo. Lo chulo de esto es que mientras tengamos activo esta conexión, cualquier cambio que hagamos en el código hará que recargue la aplicación en el cliente y podamos ver los cambios de forma instantánea.

La única limitación de este esquema es que no podremos probar plugins no oficiales, ya sean plugins de la comunidad o desarrollados por nosotros, pero es un fenomenal punto de partida.

Opción 2: build local

La segunda opción que tenemos es construir localmente los binarios para instalarlos en el dispositivo o ejecutarlos en un simulador. En este caso necesitaremos tener instalados y configurados los SDK de cada plataforma con la que queramos trabajar. En este apartado explicaré los stack básicos para trabajar con Android y con iOS, al ser las plataformas más populares

Stack Android

Necesitaremos los siguientes elementos

• Instalar el SDK de Android: Personalmente recomiendo instalar Android Studio y que éste se encargue de instalar lo necesario. Toda la información en su página de documentación.
• Un dispositivo o emulador donde probar nuestra aplicación, donde tenemos 3 opciones:
  • Usar Android Virtual Device: si no tienes aprecio por tu vida y tu tiempo, puedes configurar un dispositivo virtual sobre el que ejecutar tu aplicación. Es tremendamente lento pero podremos configurar cualquier tipo de dispositivo. Si has instalado Android Studio podrás crear y arrancar emuladores desde Tools -> Android -> AVD Manager.
  • Instalar el fantabuloso Genymotion: esta plataforma de máquinas virtuales Android es realmente rápida. Podremos ejecutar cualquier máquina virtual de las que ofrecen y ser detectada por el SDK como si fuese un dispositivo físico conectado a nuestro equipo. Más información en su página web.
  • Usar un dispositivo físico: si disponemos de un móvil o tablet Android, podremos activar el modo desarrollador en él y conectarlo por USB a nuestro equipo.

Una vez configurado el SDK de Android debemos indicar que deseamos soportar dicha plataforma. Para eso ejecutamos el siguiente comando dentro de miApp:

$phonegap platform add android

Ya solo tendremos que ejecutar la aplicación en el dispositivo que deseemos. Si vamos a hacerlo sobre un AVD que hayamos creado, lo arrancamos previamente desde el AVD Manager y una vez arrancado el dispositivo virtual (después de 2 o 3 cafés) ejecutamos:

$phonegap emulate android

Si en vez de usar una instancia de AVD deseamos cargar la aplicación en una máquina virtual Genymotion previamente arrancada, o en un dispositivo android que tengamos conectado por USB, ejecutaremos esto:

$phonegap run android

Cada vez que lanzamos un ‘emulate’ o un ‘run’, internamente se realiza un ‘build’ que generará la última versión de nuestra app para la plataforma indicada, cuyo proyecto almacenará en el directorio platform/android. Siempre podremos abrir dicho proyecto desde Android Studio si algo no termina de funcionar o necesitamos depurar alguna parte nativa

Stack iOS

El SDK de iOS solo está disponible para MacX, así que necesitarás un equipo de Apple para poder hacer builds locales. Para poder crear la versión iOS de nuestra aplicación tendremos que instalar XCode desde la Mac App Store para que se instale el SDK y los simuladores.

Para que el cliente phonegap sea capaz de arrancar el simulador, es necesario que instales el paquete ios-sim vía npm:

$npm install -g ios-sim

Una vez instalado todo debemos añadir el soporte ios a nuestro proyecto:

$phonegap platform add ios

Ahora sí, podremos ejecutar la app en un simulador usando:

$phonegap run ios

Ejecutando ios-sim showdevicetypes podremos ver un listado de simuladores disponibles (iPhone5, 6, iPad, …), así que podremos indicar cual queremos

Si queremos ejecutarlo en un dispositivo físico, tendremos que poner

$phonegap run ios --device

Para esto último tendremos que habernos dado de alta en el programa de desarrolladores de Apple (99 eureles/año) y haber generado todos los certificados Apple para nuestra aplicación, pero este tema excede el alcance de este tutorial.

Opción 3: generar binario usando PhoneGap Build

PhoneGap Build es otro servicio freemium ofrecido por Adobe donde podremos compilar en la nube nuestro proyecto. Esto tiene la ventaja de no necesitar instalar ningún SDK de ninguna plataforma en nuestro equipo de desarrollo. También es una forma interesante de poder trabajar sobre iOS sin disponer de un Mac, ya que el binario realmente se generará en la nube. Ojo, seguirás necesitando darte de alta en el programa de desarrolladores de Apple, pero al menos te ahorrarás la compra del Mac.

Para usarla hay que darse de alta con un Adobe ID en https://build.phonegap.com/, donde disponen de un plan gratuito que podremos usar para empezar a probarla.

Una vez creada la cuenta, para compilar nuestro binario solo tendremos que indicar la plataforma que deseamos con el siguiente comando:

$phonegap remote build android

Cómo continuar a partir de aquí.

En este momento deberías ser capaz de encapsular cualquier aplicación web que únicamente haga uso de estándares HTML5, CSS3 y JavaScript, incluso podrás verlas funcionando sin muchas complicaciones en la aplicación PhoneGap App olvidándote de la instalación de SDKs nativos.

No hemos entrado en ningún detalle sobre la API interna de PhoneGap y cómo podríamos instalar y hacer uso de los distintos plugins que nos permitirán ir un paso más allá y hacer cosas que HTML5 y un navegador estándar no pueden hacer, como acceder a los contactos, la cámara, notificaciones push,  etc…

En breve haré una segunda parte donde explicaré todo eso pero de momento podrás continuar ampliando tu información en los siguientes enlaces:

• Hello World Explained: explicación detallada de la aplicación ejemplo que se incluye al crear el proyecto y con la que hemos estado jugando.
• Eventos: eventos propios de kernel que no dependen de ningún plugin.
• Añadir plugins: las opciones del interfaz de comandos para la gestión de plugins
• APIs de Plugins: acceso a las APIs de cada uno de los plugins oficiales con ejemplos