Ionic 2 CLI

Nota: En este post se habla sobre el CLI de Ionic 2, como lo dice el título, ya hay una nueva versión de este CLI, les recomiendo siempre leer la documentación del CLI.

Desde hace un tiempo quería empezar a escribir posts sobre Ionic ya que he empezado a utilizarlo y quería compartir un poco lo que he aprendido y obtener retroalimentación de otros sobre cómo hacer mejor las cosas o quizás algunos tips and tricks.

Ionic es un framework de desarrollo de aplicaciones web progresivas (PWA) e híbridas basadas en Cordova o PhoneGap. En la versión 1 se utilizaba Angular 1 para desarrollar la aplicación y en la recien lanzada versión 2 se utiliza Angular 2. En estos posts vamos a utilizar la versión 2 de Ionic y Angular.

En este primer post, vamos a hacer algo sencillo, crear una nueva aplicación y ver varios comandos del CLI de Ionic 2.

El CLI, del inglés (Command Line Interface), es una de las herramientas principales utilizada durante el proceso de desarrollo de aplicaciones con Ionic, agrupa muchas herramientas bajo una misma interfaz de consola, la cual contiene comandos como start, serve, build y run, los cuales vamos a ver más adelante.

¿Cómo empezamos?

Primeramente tenemos que instalar Node.js para luego instalar el CLI de Ionic y Cordova pues cómo ya mencionamos Ionic depende de Cordova.

Nota: En este post no vamos a cubrir cómo instalar Node.js y npm, hay cientos de artículos en la Web que explican cómo hacerlo, una vez que los hayas instalado puedes continuar.

Una vez instalados Node.js y npm podemos instalar el CLI  de Cordova y el de Ionic ejecutando el siguiente comando en la consola (Terminal en OSX o Consola de comandos en Windows), le vamos a llamar “consola” de ahora en adelante:

npm install -g cordova ionic

Esperamos a que npm haga su trabajo y luego podemos verificar la versión de Ionic:

ionic -v

Y la de Cordova:

cordova -v

En mi caso el resultado es:

El primer comando que vamos a ver es start, el cual nos permite crear una nueva aplicación/proyecto Ionic:

ionic start --v2 ejemplo tabs

Todos los comandos del CLI de Ionic se ejecutan utilizando la palabra ionic y luego el comando, como vemos en el ejemplo anterior ionic start, con el primer parámetro “–v2” estamos especificando que vamos a utilizar la versión 2 de Ionic, luego el nombre del proyecto, en este caso “ejemplo” y finalmente la plantilla que queremos utilizar para crear el proyecto, en este caso vamos a crear una aplicación con tabs, es por eso que utilizamos la palabra “tabs” para seleccionar dicha plantilla.

El comando start tiene más parámetros, los cuales pueden ver en la documentación de Ionic, por ejemplo, utilizando “-l” o “–list” podemos ver todas las plantillas disponibles para crear proyectos:

ionic start -l

Si lo ejecutan, pueden ver un resultado como este:

Una vez terminado de ejecutarse el comando “ionic start –v2 ejemplo tabs”, el CLI crea una nueva carpeta con el nombre del proyecto. En la consola, para cambiarnos a la carpeta recien creada podemos ejecutar el comando “cd ejemplo”.

Ionic serve

El comando serve, permite iniciar un servidor local de desarrollo, el cual es útil porque te permite probar la aplicación en el navegador de tu maquina o el navegador de un dispositivo móvil que se encuentre en la misma red. Serve también inicia LiveReload, esta es una herramienta que monitorea constantemente el sistema de archivos (sólo donde se encuentra tu proyecto) en cuanto modificamos un archivo el navegador se actualiza automáticamente para reflejar el cambio, lo cual es muy conveniete mientras desarrollamos.

Para iniciar el comando serve, simplemente ejecutamos en la consola, desde la carpeta del proyecto:

ionic serve

Te darás cuenta que cuando ejecutes serve, este también ejecuta las tareas gulp, en su conjunto lo que hacen, a grandes rasgos, es construir la aplicación; podrás ver como automáticamente la aplicación se ejecuta en el navegador, por defecto en la dirección http://localhost:8100. Muchas de estas cosas pueden ser configuradas a través de parámetos que se les pasa al comando serve, puedes leer más sobre ello en la documentación de Ionic.

Ionic platform

Como mencionamos al inicio, con Ionic puedes construir aplicaciones para iOS y Android, pero para ello debes adicionar estas plataformas a tu proyecto para luego poder construir la aplicación para dichas plataformas; aquí es cuando el comando platform nos puede ayudar. Para adicionar iOS ejecutamos:

ionic platform add ios

Y para Android:

ionic platform add android

Ionic info

Con info podemos ver información útil sobre el entorno de desarrollo, como por ejemplo, versión del CLI de Cordova, versión del CLI de Ionic, versión del framework de Ionic, versión de Xcode (si estas en OSX), sistema operativo, etc., lo cual puede ser de gran ayuda a la hora de enviar un issue al equipo de Ionic. Para ver dicha información ejecutamos:

ionic info

Ionic emulate

Este comando permite emular el proyecto Ionic en una emulador o simulador; emulate despliega la aplicación en el simulador o emulador de la plataforma deseada (para ello primeramente debes utilizar el comando platform que vimos anteriormente para adicionar la plataforma al proyecto).

Al igual que otros de los comandos, emulate tiene varias parámetros que puedes revisar en la documentación aunque la forma más sencilla de ejecutarlo es solamente pasando la plataforma deseada, por ejemplo, para iOS:

ionic emulate ios

Para Android:

ionic emulate android

Para poder emular en iOS necesitas OSX, para Android puede ser tanto en OSX como Windows aunque hay algunas dependencias que necesitas instalar, lo cual veremos en detalles en otro post.

Ionic run

El comando run permite ejecutar el proyecto Ionic en un dispositivo contectado a la PC o Mac; cuenta de varios parámetros, todos muy similares a los de emulate.

Tanto emulate como run soportan LiveReload aunque no por defecto como serve.

La forma de utilizarlo para iOS es:

ionic run ios

Y para Android:

ionic run android

Ionic build

El último comando que vamos a ver es build, este permite construir localmente el código del proyecto Ionic para una plataforma dada y el resultado es generado en la carpeta “platform”, donde creará una carpeta por plataforma.

La forma de utilizarlo para iOS es:

ionic build ios

Y para Android:

ionic build android

Por ejemplo, el resultado de construir para la plataforma iOS no es más que un proyecto Xcode, el cual puedes perfectamente abrir y modificar como desees, siempre ten en cuenta que cuando vuelvas a construir puedes perder cualquier cambio que hayas realizado.

Hasta aquí los comandos de Ionic CLI, o por lo menos algunos de los más útiles, en próximos post vamos a ver otros comandos, como por ejemplo plugin, y generate.