Ionic CLI es el intérprete por línea de comandos de Ionic, que contiene una serie de herramientas útiles para realizar, de una forma sencilla, muchas tareas habituales en el desarrollo y producción de aplicaciones con Ionic 2.

En este artículo del Manual de Ionic 2 vamos a darle un primer repaso a las opciones con las que contamos, centrándonos en las que son más básicas para comenzar, como la creación de proyectos con distintos templates. Mencionaremos otras opciones fundamentales, aunque se dejarán para más adelante los detalles y las prácticas, pues corresponden a fases adelantadas del desarrollo, como la parte del build.

Instalar Ionic CLI

Para poder contar con Ionic CLI en tu sistema necesitas instalarlo previamente. Básicamente, para poder comenzar a trabajar con Ionic 2 en artículos anteriores, hemos tenido que instalar estas herramientas previamente, así que nos vamos a referir directamente al artículo de instalación de ionic 2.

Puedes comprobar si tienes Ionic CLI instalado lanzando el comando:

ionic -v

Otro comando útil para saber tu entorno de desarrollo completo para Ionic, que te indica no solo la versión del CLI sino también el sistema operativo, NodeJS, etc. es lanzar el comando:

ionic info

Iniciar aplicaciones Ionic 2

El CLI dispone de un comando "start" que nos permite iniciar aplicaciones Ionic e Ionic 2, de modo que, si estamos construyendo aplicaciones para Ionic 2, hay que fijarse de indicar el flag "--v2".

ionic start --v2 nombre-proyecto

Lo que conseguimos con este comando es crear una carpeta llamada "nombre-proyecto" que iniciará una aplicación Ionic 2 con el template de "tabs". Esto incluye una cantidad de subcarpetas con una estructura de proyecto definida para las apps de Ionic 2. Más adelante iremos conociendo esa estructura con detalle.

Templates disponibles en Ionic start

Lo interesante, que no habíamos visto todavía de "ionic start", es la lista de templates que tenemos disponibles para crear aplicaciones, con distinto código base. Nuestras aplicaciones, lejos de comenzar con una página en blanco, pueden crearse en base a distintos tipos de templates, con estructuras de páginas diferentes.

Si ejecutamos el siguiente comando tendremos una lista de los templates disponibles en nuestro sistema:

ionic start --list

Eso nos dará una salida parecida a esta:

Encontrarás varias opciones para comenzar tus aplicaciones, desde una app en blanco, una con tabs, con un completo menú lateral, etc. Sin embargo, estos no son todos los que podrías usar, también existen diversos starters que se encuentran disponibles en Ionic Market, tanto gratuitos como de pago.

Además, puedes encontrar repositorios en Github donde también se encuentran aplicaciones creadas con Ionic 2, que te pueden dar un buen punto de partida para aprender examinando el código del proyecto. Uno interesante que vimos en la clase práctica de presentación de Ionic 2 fue el ionic-conference-app, de los mismos creadores de Ionic.

Correr un proyecto de Ionic en el navegador

Por ser aplicaciones híbridas, realizadas con Javascript, Ionic 2 tiene una ventaja fundamental a la hora de desarrollar apps: permitir desarrollar usando el navegador como entorno de ejecución. Esto es muy interesante, ya que nos permite un flujo de desarrollo muy rápido entre la escritura de código y la visualización de los cambios. Además nos evita tener que instalar muchos programas para comenzar, emuladores, entornos de desarrollo, programas para llevar a producción, etc.

Para mostrar nuestra aplicación en el navegador simplemente tenemos que iniciar un servidor web integrado en Ionic CLI, con el comando "serve".

ionic serve

Este comando lanza todo el proceso de transpilación y abre la app en el navegador. Además contiene un sistema de "LiveReload", que permite refrescar el navegador cuando haya cambios en el código de la app.

Hay opciones interesantes que podemos usar para personalizar el servidor:

• --lab: Nos permite abrir el "ionic lab" con el que podemos ver cómo se presentaría la app en cada tipo de plataforma móvil.
• --port: si queremos cambiar el puerto donde escucha el servidor.
• --address: Si indicas esta opción, asignando tu IP local, el servidor se iniciará sobre esa IP en lugar de localhost. Esto puede ser útil si quieres visualizar el contenido desde otros sistemas, en caso que no lo consiguas ver desde ordenadores o dispositivos externos con "ionic serve" a secas. Por ejemplo usas: ionic serve --address=192.168.1.103
• --platform: Esto te permite iniciar viendo la app tal como se mostraría en una plataforma en concreto (iOS / Android).

Otros comandos de Ionic CLI

Con los comandos que hemos visto hasta ahora tienes los suficientes para comenzar a trabajar con Ionic 2, aunque detrás del intérprete de línea de comandos tienes muchas otras utilidades que facilitarán tu día a día en diversos momentos del desarrollo de una app.

Puedes ver una completa ayuda con la opción -h

ionic -h

Ahora te resumimos otros comandos del CLI muy interesantes, que veremos en su momento en este manual, a medida que vayamos llegando a cada una de las partes involucradas con cada herramienta:

• ionic run: Permite ejecutar la aplicación Ionic que estamos desarrollando en un dispositivo conectado al ordenador con el que estamos trabajando.
• ionic platform: Sirve para añadir una nueva plataforma para realizar el build de una aplicación.
• ionic build: Genera la app para una plataforma especificada (ej: ionic build android), esta parte se realiza gracias a Cordova.
• ionic emulate: lanza el emulador para visualizar en él nuestra aplicación Ionic. Es simular a un ionic serve, solo que usa el emulador disponible en lugar del navegador.
• ionic generate: este es un comando muy extenso, que a su vez tiene una serie de subcomandos para generar distintos tipos de componentes en un proyecto Ionic, como pueden ser páginas, providers, pipes, etc.

Recuerda que no son los únicos comandos del CLI y que podrás encontrar otras opciones con "ionic --help".