Ionic es un framework que permite crear aplicaciones móviles multiplataforma utilizando tecnologías web actuales, es decir, HTML5, CSS3 y JavaScript.

Uno de sus puntos fuertes es que permite probar la aplicación que estamos desarrollando sobre nuestro móvil de foma muy ágil (con un único comando se compila, empaqueta y transfiere la app al teléfono).

Sin embargo, Ionic requiere una serie de dependencias en el sistema que pueden hacer un poco frustrante su instalación. A continuación voy a detallar los pasos necesarios para configurar un entorno Ionic ready en Debian o distribuciones basadas en Debian (Ubuntu, Linux Mint, ElementaryOS…).

Node.js

Por lo general el repositorio por defecto del sistema trae una versión bastante desfasada de Node, por lo que es recomendable instalarlo del repositorio que provee la comunidad de Node.js.

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs

Cordova e Ionic Framework

Bajo el capó, Ionic utiliza Apache Cordova para empaquetar nuestra aplicación web en una aplicación móvil nativa. Una vez tenemos Node.js en el sistema, Cordova e Ionic se pueden instalar fácilmente con un simple comando.

sudo npm install -g cordova ionic

Para comprobar que todo está correcto podemos ejecutar el comando ionic info y mostrará algo parecido a esto.

Your system information:

Cordova CLI: 6.1.1
Ionic Version: 1.2.4
Ionic CLI Version: 1.7.14
Ionic App Lib Version: 0.7.0
OS: Distributor ID: Ubuntu Description: Ubuntu 14.04.4 LTS
Node Version: v4.4.3

Java Development Kit

Instalamos la última versión de OpenJDK disponible para nuestro sistema. En mi caso es OpenJDK 7.

sudo apt-get install openjdk-7-jdk

SDK de Android

Descargar SDK

En la web de Android Studio se pueden descargar las herramientas SDK sin necesidad de instalar toda la suite. Descargamos el paquete android-sdk_r24.4.1-linux.tgz y lo descomprimimos en nuestra home.

tar -xzvf android-sdk_r24.4.1-linux.tgz -C "$HOME"

Si nuestro sistema es de 64 bits (lo podemos comprobar escribiendo en el terminal uname -m), además vamos a necesitar instalar algunas bibliotecas de 32 bits.

sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6

Establecer las variables de entorno

Para que Cordova sepa donde se encuentra instalado el SDK de Android es necesario establecer la variable de entorno ANDROID_HOME con la ruta donde lo hemos descomprimido.

echo 'export ANDROID_HOME=$HOME/android-sdk-linux' >> ~/.bash_profile

También conviene añadir las herramientas del SDK de Android al PATH.

echo 'export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools' >> ~/.bash_profile

Al añadir todo esto al fichero .bash_profile las variables de entorno estarán configuradas en la próxima sesión de terminal que iniciemos. Para disponer de ellas en las sesión actual solo necesitamos recargar el fichero.

source ~/.bash_profile

Añadir los paquetes del SDK

Lanzamos la aplicación Android SDK Manager con el comando android e instalamos los siguientes paquetes:

  • Android SDK Platform-tools (la última versión)
  • Android SDK Build-tools (la última versión)
  • SDK Platform (de la última versión disponible de la API)
Android SDK Manager

Compilar una App

Para ver que hemos instalado todo como es debido, vamos a crear una App de prueba y generar un fichero apk de Android a partir de ella.

ionic start test
cd test
ionic platform add android
ionic build android

Veremos el log de la compilación y al final el mensaje BUILD SUCCESSFUL y la ruta donde se ha generado el apk.

Habilitar depuración USB

Antes de poder lanzar la aplicación sobre un hardware real será necesario activar el modo de depuración USB en nuestro teléfono Android.

  1. Ir a Ajustes > Información del teléfono y pulsar siete veces sobre Número de compilación.
  2. En Ajustes > Opciones de desarrollo habilitar la Depuración USB.
  3. Conectar el teléfono al PC con un cable USB y permitir la depuración en el popup que aparecerá.
Habilitar depuración USB en Android

Lanzar la App

A partir de ahora, desplegar la aplicación en nuestro dispositivo móvil es tan sencillo como ejecutar el siguiente comando.

ionic run android --device

El proceso de compilar y lanzar la aplicación en un dispositivo IOS (iPhone, iPad) es el mismo, solo que en este caso se precisa de un sistema Mac OS X con XCode 6.0 instalado.