Recientemente ha saltado con fuerza a la cyber-palestra un framework para mobile apps que une las ventajas de jQuery Mobile y las de Bootstrap junto con los avances en programación web de la mano de Angular.js. Hablamos de Ionic.

Ionic Framework

Si bien su getting started es muy claro y sencillo, hemos creado esta pequeña continuación de nuestro tutorial sobre la instalación y configuración de Cordova 3 porque consideramos que en breve esta será la manera de trabajar con Cordova 3.

Pasos 1-3

Corresponden a la instalación de todo el entorno Android y Java. Son los pasos 1 a 3 de nuestro mencionado artículo sobre la instalación y configuración de Cordova 3.

En cuanto al IDE de desarrollo, podemos optar por el Eclipe ADT que aparece en nuestro tutorial, o podéis probar el flamante, aunque todavía en fase beta, Android Studio.

Paso 4

Queremos trabajar con Cordova utilizando Ionic y Angular, de manera que instalaremos ambos a la vez. Abrimos la consola y escribimos:

$ npm install -g cordova ionic

De hecho van tan unidos que a partir de la instalación de ionic, vamos a hacer las tareas de Cordova en su CLI mediante el comando ionic.

Paso 5

Creamos nuestra primera app. Ionic ofrece algunas plantillas de base para empezar. Algunas con elementos que probablemente utilicemos, y una vacía.

Nos situamos en la carpeta de neustro workspace (el comando de ionic creará por nosotros la carpeta del proyecto) y escribimos:

$ ionic start "nombre de la app" "plantilla"

Así, si queremos iniciar una app vacía:

$ ionic start miPrimeraApp blank

Si queremos iniciar una nueva app con tabuladores:

$ ionic start miPrimeraApp tabs

Si queremos iniciar una con menú lateral:

$ ionic start miPrimeraApp sidemenu

Paso 6

No olvidemos que queremos trabajar con Cordova y Ionic, pero también con Android, de manera que tenemos que añadir también al proyecto la plataforma Android y hacer un build. Para ello nos siatuamos en la nueva carpeta (en este caso miPrimeraApp):

$ cd miPrimeraApp

Añadimos la plataforma Android:

$ ionic platform add android

Lo mismo haríamos con su equivalente ios. Para Windows Phone podéis consultar este link al foro de Ionic.

Hacemos build:

$ ionic build android

Y ya podemos deployar. Con emulate para emulador o run para dispositivo:

$ ionic emulate android

$ ionic run android

Paso 7

Para trabajar con Ionic podemos utilizar cualquier editor de texto, como nuestro preferido Sublime 3, o el más caro pero al parecer más adecuado para javascript y preferido por muchos desarrolladores de Angular WebStorm.

En todo caso, para trabajar con Android sí queremos el mencionado Eclipse ADT o el Android Studio. Para ver cómo cargamos en nuestro Eclipse esta primera aplicación Cordova con Android, lo abrís desde el Eclipse como un Nuevo Proyecto Android desde Código Existente, tal y como se ve en nustro artículo sobre Córdova 3.

Y hasta aquí. ¡Buena suerte, y a disfrutar de este nuevo framework!