Bueno, bueno, bueno! Después de unos meses ya era hora de desempolvar el blog y continuar escribiendo, que ya me hacía falta 😉

Esta vez vengo a hablaros de un framework que me está gustando especialmente: Ionic Framework

¿Qué es Ionic?

Ionic es un SDK basado en HTML5 y su objetivo es facilitar el desarrollo y distribución de aplicaciones nativas para dispositivos móviles. ¿Cuál es su característica principal? Que es capaz de trabajar con las funcionalidades específicas de los diferentes sistemas operativos (Android, iOS…) empleando tecnologías intuitivas y amigables como HTML, CSS y Javascript.

A pesar de que se puede trabajar perfectamente sólo con CSS y HTML, Ionic utiliza AngularJS para lograr el máximo rendimiento.

Instalación de Ionic

1. Instalar Node.js

Para gestionar los paquetes necesarios, vamos a utilizar Node.js. Así que si no lo tenemos instalado, lo primero que tenemos que hacer descargarlo e instalarlo desde: https://nodejs.org/

2. Instalar Apache Cordova

Una vez instalado Node.js, es necesario instalar Apache Cordova, que básicamente es un conjunto de APIs que permiten acceder a las funcionalidades nativas (sensores, cámara, teléfono…) desde Javascript.

Para ello, accedemos a la consola (Command Prompt) de Node.js

Cuando estemos en la consola, nos ubicamos en la carpeta de trabajo que queramos:

Y finalmente instalamos Apache Cordova escribiendo la siguiente instrucción:

OS = Windows
npm install -g cordova

OS != Windows
sudo npm install -g cordova

3. Instalar Ionic

Cuando hayamos instalado Apache Cordova, es momento de instalar Ionic Framework. Para ello, desde la misma consola de Node.js, ejecutamos la siguiente instrucción:

OS = Windows
npm install -g ionic

OS != Windows
sudo npm install -g ionic

4. Instalar Gulp

Teniendo ya Ionic instalado, y de cara a trabajar con los archivos .scss, es necesario instalar Gulp y sus dependencias. Para ello, desde la misma consola de Node.js, ejecutamos la siguiente instrucción:

OS = Windows
npm install -g gulp
npm install -g sass
ionic setup sass

OS != Windows
sudo npm install -g gulp
sudo npm install -g sass
ionic setup sass

Creación de un proyecto de prueba

Para crear un proyecto nuevo con Ionic Framework, desde la consola de Node.js ejecutamos la siguiente instrucción (NOTA: Esta instrucción creará la carpeta del proyecto, por lo que es necesario ubicarnos en la carpeta de trabajo)

ionic start programandoConRupert tabs

Al ejecutarlo, nos preguntará si queremos crear una cuenta de ionic.io para enviar notificaciones Push y utilizar la App Ionic View.

Para este ejemplo voy a responder que No. En posteriores artículos trabajaremos con dicha App.

Al terminar la ejecución tendremos ya el proyecto en nuestra carpeta de trabajo.

Por último, para comprobar que nuestro proyecto funciona correctamente, ejecutamos la siguiente instrucción, que creará una URL que servirá de emulador para iOS y Android. Se debe lanzar desde la carpeta del proyecto:

ionic serve –lab

Esto abrirá automáticamente el navegador con la visión de prueba en los dos sistemas operativos:

Con esto ya hemos visto cómo instalar Ionic Framework y cómo crear un proyecto de prueba. En los siguientes artículos explicaremos más a fondo las opciones de proyecto que tenemos y cómo trabajar con ellas.

¡Hasta la próxima!
Rupert.