Instalar Ionic Framework
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 - |
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: |
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)
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 |
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.
- Ir a Ajustes > Información del teléfono y pulsar siete veces sobre Número de compilación.
- En Ajustes > Opciones de desarrollo habilitar la Depuración USB.
- Conectar el teléfono al PC con un cable USB y permitir la depuración en el popup que aparecerá.
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.