Hoy vamos a ver los pasos necesarios para instalar PhoneGap 3.2, así como eclipse para Android.

Instalar PhoneGap

Instalando Node.js

Lo primero que necesitamos para poder instalar PhoneGap es tener instalado Node.js, Así que nos lo descargamos desde la web de Node.js

Descomprimimos el archivo en una carpeta, navegamos hasta ella en en terminal y ejecutamos:

./configure
make
sudo make install

El proceso tardará un rato, especialmente en el segundo comando, en el que estará compilando el código.

Instalamos PhoneGap

Una vez instalado Node.js, nos bajamos phonegap desde terminal, como un paquete para Node con el comando:

sudo npm install -g phonegap

Instalando Córdova Command-Line Interface

Hay dos enfoques de programación en PhoneGap. El multiplataforma, y el específico para una plataforma (orientado más hacia la creación de aplicaciones híbridas).

Lo recomendable es comenzar con el enfoque multiplataforma, y para eso necesitaremos la interfaz por linea de comandos de Córdova (que también es un paquete de Node), así como el software de control de versiones Git (lo utiliza a nivel interno, independientemente de que lo uses para tus proyectos o no) así que, desde Terminal:

• Instalamos Git

apt-get install git

• Instalamos la Command-line inteface de Córdova

sudo npm install -g cordova

• Instalamos ant, que nos lo pedirá córdova para algunos comandos:

sudo apt-get -u install ant

Instalamos Eclipse y el SDK de Android

Ya que la idea es que nuestra app esté disponible en Android, necesitaremos su SDK, que lo descargaremos, conjúntamente con el IDE Eclipse, de la web de Android

Una vez hemos descargado el paquete, lo descomprimimos en algún directorio que no sea temporal (recordemos que Eclipse es un ejecutable Java, por lo que no necesitamos ejecutar ningún comando de instalación).

Instalando Java

Como he mencionado, Eclipse está hecho en Java, por lo que si no tenemos instalado el Java Developer Kit, no podremos ejecutarlo. En dicho caso, desde terminal instalamos el JDK con:

sudo apt-get update
sudo apt-get install default-jdk

Instalando las SDKs de Android

Abrimos Eclipse, seleccionamos el icono de Android Manager de la barra superior, y veremos como se carga el Android Manager.

A partir de aquí, seleccionamos los elementos que nos parezcan, si bien, recomiendo:

Instalar las herramientas del SDK más reciente

Abrimos el directorio Tools y seleccionamos

• Android SDK Tools
• Android SDK Platform-tools
• Android SDK Build-tools

Abrimos el directorio con la versión de Android más reciente y seleccionamos:

• SDK Platform
• ARM EABI v7a System Image (o el de intel, da igual, una de las imágenes del emulador)

Instalar la support library

En el directorio Extras, seleccionamos:

• Android Support Repository
• Android Support Library

Finalmente le damos al botón instalar para descargarnos todos los paquetes seleccionados.

Exportamos los paths de Android

Para poder añadir la API Android a un proyecto desde Córdova, necesitaremos exportar los paths al directorio donde hemos descargado la SDK de Android, por lo que abrimos nuestro archivo ~/.bashrc, y añadimos:

#add eclipse android paths
export ANDROID_HOME="/mi_directorio/adt-bundle-linux-x86_64/sdk"
export PATH="$ANDROID_HOME/tools:$PATH"
export PATH="$ANDROID_HOME/platform-tools:$PATH"

Donde evidentemente, para ANDROID_HOME pondremos la ruta relativa a nuestra carpeta con la SDK de android (allí donde la haya descargado Eclipse).

Creando un proyecto Android PhoneGap con Córdova

Abrimos el terminal, y ejecutamos el comando para crear un proyecto

cordova create hello com.example.hello HelloWorld

• hello: Es la carpeta que se creará, y donde se guardará el proyecto
• com.example.hello: El identificador de la aplicación
• HelloWorld: El nombre de la aplicación

Entramos el en directorio de nuestro proyecto y añadimos las librerías de Android:

cd hello
cordova platform add android

Finalmente, ejecutamos el comando build para crear la aplicación:

cordova build

DETALLE:
Es probable que tras hacer el build nos encontremos con un error del tipo: [aapt] /mi_directorio/adt-bundle-linux-x86_64-20140702/sdk/build-tools/19.1.0/aapt: error while loading shared libraries: libz.so.1: cannot open shared object file: No such file or directory

Esto se debe a que la utilidad aapt, depende de la librería zlib, que solo está disponible para arquitectura i386, por lo que, en este caso, deberemos añadir la arquitectura y la librería, mediante los comandos siguientes (para el caso ubuntu 12.04):

sudo dpkg --add-architecture i386
sudo apt-get -qqy update
sudo apt-get -qqy install libncurses5:i386 libstdc++6:i386 zlib1g:i386

Ahora sí, después de instalar Zlib (y sus dependencias), volvemos a ejecutar el comando build:

cordova build

Esto debería crear satisfactoriamente nuestra aplicación.

Importando proyecto PhoneGap 3.x en Eclipse

Una vez creado el proyecto, podemos importarlo desde Eclipse.

Para ello, abrimos Eclipse, seleccionamos New > Project… > Android >
Android Project from existing code.

Introducimos el path al proyecto que acabamos de crear, y de forma automática, Eclipse nos econtrará 2 proyectos Android: HelloWorld y HelloWorld-CordovaLib

En determinados tutoriales he visto que proponen añadir sendos proyectos, e incorporar el segundo como dependencia del primero, por ejemplo aquí, aunque lo cierto es que al hacer el build ya se nos añade la librería (.jar) de cordova al proyecto HelloWorld, y con importar ambos proyectos debería ser suficiente para poder ejecutar nuestro HelloWorld, sobre el simulador que tengamos configurado.

DETALLE: Para poder ver correctamente el directorio www (donde estarán los archivos de la web phonegap) en la carpeta assets (directorio de recursos de nuestra app Android, y por tanto, donde debe estar dicha carpeta), será necesario que vayamos a Proyecto > Propiedades > Recursos > Fitros de Recursos y eliminemos los filtros.

Ejecutando la app en el simulador

Seleccionamos Run as android Application (deberemos tener definido al menos un simulador). Esto nos dará a elegir entre los dispositivos/simuladores disponibles. Elegimos el simulador deseado y deberíamos obtener lo siguiente:

Ejecutando la app en un dispositivo real

Para ejecutar la app en un dispositivo, es recomendable darle un vistazo a la guía de Android al respecto.

Preparando el dispositivo

Veremos que para poder acceder a nuestro dispositivo, primero tendremos que habilitar en el mismo las opciones de desarrollo: para ver el menú Developer, será necesario ir a Settings > About Phone y hacer click varias veces sobre el Build Number.

Desde el menu developer, activamos las opciones de debug por USB:
Settings > Applications > Developer > USB debugging

Detectando el dispositivo desde Ubuntu

Desde Ubuntu, hay que añadir un fichero de reglas udev que contenga la configuración USB para cada dispositivo que queramos usar para desarrollo. En dicho archivo se define cada fabricante con un identificador único (para ver los identificadores de cada fabricante, consultar la guía enlazada anteriormente).

En nuestro caso, definiremos un Nexus 4 (LG) y un Nexus 7 (Samsung):

• Abrimos el archivo de reglas, que debe estar en la siguiente ruta:

sudo vim /etc/udev/rules.d/51-android.rules

• Añadimos el contenido:

#LG - Nexus 4
SUBSYSTEM=="usb", ATTR{idVendor}=="1004", MODE="0666"
#Samsung - Nexus 7 & 10
SUBSYSTEM=="usb", SYSFS{idVendor}=="18d1", MODE="0666"

• Hacemos el archivo de rutas ejecutable:

sudo chmod +x /etc/udev/rules.d/51-android.rules

• Reiniciamos udev:

sudo service udev restart

Esto debería ser suficiente para que al ejecutar nuestra aplicación, nos aparezca un menú de selección con el dispositivo, como vemos a continuación:

Primeros pasos trasteando con PhoneGap

Podemos editar el archivo index.html en la carpeta assets/www/ y al ejecutar el proyecto, veremos los cambios realizados.

Más adelante veremos como desarrollar algo más complejo que un hello world en PhoneGap. ¡Saludos!