Ionic + Android - Tu app desde cero, paso a paso.

Con este tutorial vamos a montar desde cero una aplicación para dispositivos móviles en Ionic para Android. Es una guía paso a paso que va a recorrer el proceso de preparación de entorno, creación de una nueva app y despliegue en un dispositivo/emulador en Ubuntu 14.04.

Partimos de unos prerequisitos imprescindibles que tendremos que tener instalados en nuestro entorno: NodeJS y Bower

¿Están los ingredientes preparados? pues manos a la obra:


1.- Descargar el ADT Boundle. ¿Porqué el ADT? Pues porque en un solo zip descargamos todas las herramientas necesarias para un entorno de programación Android y además un Eclipse preconfigurado.

2.- Descomprimir en una localización al gusto del programador, en mi caso para que sirva de referencia va a ser dentro del directorio ~/Development

3.- Añadir al $PATH la ruta del SDK de Android. Este tercer paso se puede resolver de diversas maneras. En mi caso voy a explicar como configuro mi path en un fichero aparte:

En primer lugar me voy a crear un nuevo fichero que va a recoger el export de $ANDROID_HOME y posibles configuraciones futuras. El fichero se va a llamar ~/.bash_env y su contenido algo como:

export ANDROID_HOME=~/Development/adt-bundle-linux-x86_64-20140702/sdk

export ANDROID_HOME_TOOLS=$ANDROID_HOME/tools

export PATH=$PATH:$ANDROID_HOME:$ANDROID_HOME_TOOLS

Prestad atención a a la distribución adt-bundle-linux-x86_64-20140702 que coincida con la vuestra.

El siguiente paso es la referencia a este nuevo fichero en ~/.bashrc y para ello vamos a agregar las siguientes líneas:

if [ -f ~/.bash_env ]; then
    . ~/.bash_env
fi

y finalmente para refrescar los cambios en las variables de entorno:

$ source ~/.bashrc

Bien, ahora deberíamos ser capaces de invocar en Android Package Manager tecleando en consola:

$ android

si es así, ya que lo tenemos abierto tendremos que descargar al menos la API 19 de android. Marcamos he instalamos el SDK Platform y Build Tool.


4.- Instalación de Apache Cordova e Ionic

$ npm install -g cordova ionic

Para probar si todo está marchando bien, una vez instalado podemos teclear el comand:

$ ionic 

y deberíamos obtener en nuestra consola el siguiente prompt:

 (_)           (_)     
  _  ___  _ __  _  ___ 
 | |/ _ \| '_ \| |/ __|
 | | (_) | | | | | (__ 
 |_|\___/|_| |_|_|\___|  CLI v1.2.8

Usage: ionic task args

=======================

Available tasks: (use --help or -h for more info)

   start  ..........  Starts a new Ionic project in the specified PATH
   serve  ..........  Start a local development server for app dev/testing
   platform  .......  Add platform target for building an Ionic app
   run  ............  Run an Ionic project on a connected device
   emulate  ........  Emulate an Ionic project on a simulator or emulator
   build  ..........  Locally build an Ionic project for a given platform
   plugin  .........  Add a Cordova plugin
   package  ........  Package an app using the Ionic Build service (beta)
   upload  .........  Upload an app to your Ionic account
   lib  ............  Gets Ionic library version or updates the Ionic library
   setup  ..........  Configure the project with a build tool (beta)

5.- La siguiente fase va referida a la aplicación en si. Ionic framework provee de; varios tipos de armazones que podemos emplear como punto de partida, para ello donde vayamos a crear la app tecleamos:

$ ionic start myNewIonicApplicationTest sidemenu

Ya tenemos nuestra aplicación Ionic, entramos en el directorio myNewIonicApplicationTest y a continuación  traemos las dependencias específicas de este proyecto con:

$ bower install

$ npm install

Ya está completa, ahora para empezar podríamos lanzar el la app en el navegador, extremadamente útil para agilizar el proceso de desarrollo:

$ ionic serve 

y para dotar nuestra aplicación con la plataforma Android tecleamos:

$ionic platform add adroid

si tenemos un dispositivo móvil conectado con los permisos de desarrollo ya estamos en disposición de desplegar nuestra app, simplemente tecleamos:

$ionic run

En caso contrario tendríamos que configurar un dispositivo virtual en el emulador. Una vez se ha ejecutado el compilado, empaquetado y despliegue la aplicación arrancará automáticamente.

Yo recomiendo para ganar tiempo, si no es imprescindible, ya sea por motivos de acceso a funcionalidad expresa del propio dispositivo, trabajar lo máximo posible vía navegador.

Tola la documentación necesaria sobre el framework la podréis encontrar para vuestros desarrollos aquí.

Por cierto he encontrado un plugin para eclipse para AngularJS que le va genial, ya que como nos hemos podido percatar el el framework javascript que se esconde dentro de Ionic. Instrucciones para su instalación.

A disfrutar, saludos!