Instalar Ionic

Para instalar ionic necesitamos tener varios componentes instalados en nuestro ordenador:

  • Node: que es la plataforma base que utilizaremos para crear los proyectos de Ionic utilizando npm
  • Android SDK: Para poder crear aplicaciones en la plataforma Android necesitamos su SDK
  • Cordova e Ionic: Son los SDK necesarios para trabajar con Ionic, y se explican en esta entrada.

Instalando el SDK de Android y Genymotion

Es muy importante tener bien instalado estos dos elementos y para ello os aconsejo este magnifico tutorial de la universidad Galileo de México

Instalando Cordova e Ionic

Una vez que tenemos instalado Node y el SDK de android, nos vamos a nuestra consola y escribimos:

npm install -g cordova ionic

Con esto ya tendremos de forma general instalados Apache Cordova e Ionic en nuestro sistema. Puede tardar un poco, no te desesperes.

Creando aplicaciones

A la hora de crear nuestras aplicaciones podemos optar por comenzarlas de tres formas:

  • Con pestañas (tabs)
  • En blanco (blank)
  • Con menú lateral (sidemenu)

La selección se realiza en las consola de comandos cuando queremos crear la aplicación. Vamos a verlo poco a poco:

Pasos para crear una aplicación con Ionic

Si queremos usar Ionic con un sistema de pestañas en la cabecera y un para de pantallas con funcionalidades, usaremos esta plantilla.

Nos colocamos en la consola donde queramos crear la aplicación y escribimos según quedemos:

ionic start miApp tabs

ionic start miApp blank

ionic start miApp sidemenu

Donde miApp es el nombre de nuestra aplicación y tabs le indica que queremos la instalación de las plantilla por pestañas.

instalaciontabs

Esto nos crea el directorio miApp con toda su estructura de carpetas, pero aun no tenemos instalada la plataforma de encapsulamiento para nuestra aplicación, por lo que entramos en la carpeta raíz de nuestro proyecto y escribimos;

ionic platform add android

Lo cual instalará no solo el encapsulador de Android, también los servicios de Cordova. Este paso tambien nos permitirá ejecutar la aplicación en el emulador o en el dispositivo android.

instalacion de la plataforma

Una vez que hemos hecho esto ya solo nos queda construir nuestra aplicación con la siguiente instrucción:

ionic build android

Y estar atentos de que no nos de fallos, ya que estos pueden ser de que no esté bien instalado el SDK de Android.

construirApp

Ya solo nos queda ejecutar la aplicación que se iniciara en el dispositivo móvil conectado o en el emulador por defecto si no hay ningún dispositivo conectado. El emulador por defecto es lento por lo que se sugiere instalar Genymotion o algún otro emulador.

Para ejecutar la aplicación utilizamos el siguiente comando:

ionic run android

Lo que nos dará como resultado:

resultado

Probar la app en el explorador

Al estar trabajando con JavaScript podemos ejecutar la aplicación en cualquier navegador web. Esto puede acelerar el proceso de desarrollo pero hay que tener en cuenta que siempre es recomendable probar la aplicación en emuladores y dispositivos nativos ya que puede haber errores o cosas inesperadas.

Para probar la app en el navegador utilizamos:

ionic serve

Activando Genymotion con Ionic

Para conectar Ionic con Genymotion tenemos que crear una máquina virtual con Genymotion, para poder hacer las pruebas y ver como se ejecutaría la aplicación. Para ello, una vez que abrimos la aplicación tan solo tenemos que elegir que tipo de dispositivo queremos emular haciendo click en add:

genymotion

Una vez que ya tenemos seleccionada nuestra máquina y se descargue los archivos para activarla, tan solo tenemos que ejecutarla pulsando en start, lo cual la cargará y la dejará lista para trabajar, tanto desde ella misma como esperando que ejecutemos la instrucción ionic run android que hemos visto más arriba.

De esta forma podemos instalar Ionic, y crear proyectos para trabajar. En la siguiente entrada observaremos la estructura de directorios y archivos antes de empezar a utilizar elementos de desarrollo.