Instalar Ionic 2

  • Por
Cómo instalar Ionic 2, para comenzar a desarrollar con el framework de aplicaciones híbridas en local.

Después de haber explicado en líneas generales qué es Ionic y haber conocido varios de los conceptos con los que vamos a trabajar en este manual, en el presente artículo vamos a comenzar a preparar nuestro entorno de desarrollo para comenzar a trabajar. Nos ocuparemos de la instalación del framework, un proceso bastante sencillo de realizar.

Pero antes de comenzar tenemos que aclarar que, para poder realizar todo el flujo de desarrollo de una app con Ionic 2, se requieren dos pasos diferentes. El primero es la instalación de todo el SDK de Ionic 2 y las herramientas de trabajo con la línea de comandos. El segundo es la instalación del entorno que nos permitirá compilar una aplicación desarrollada con Ionic en un archivo que podamos subir a la tienda de aplicaciones.

Por el momento vamos a limitarnos a instalar Ionic 2 para poder trabajar en local, es decir, realizar el desarrollo de nuestra aplicación, pero no su compilación para subir a las stores de aplicaciones. Para compilar el proceso es un poco más largo y complejo, que depende directamente de Apache Cordova (que es quien realmente realiza el empaquetado de la app en un archivo nativo) y requiere los SDK de Android o iOS y veremos más adelante.

Para todo este proceso necesitaremos tener NodeJS instalado en nuestro sistema, al menos en su versión 6 en adelante. No vamos a entretenernos explicando cómo instalar Node, ya que es un tema que se trata en el Manual de NodeJS.

Instalar Ionic CLI y Cordova

Comenzamos instalando los paquetes de Ionic CLI (intérprete por línea de comandos de Ionic) y Apache Cordova. Lo hacemos vía npm con el siguiente comando:

npm install -g ionic cordova
Nota: En algunos casos podrías necesitar la instalación de ese comando usando "sudo", para usarlo como superusuario. Obviamente no aplica a Windows.

En el caso de Windows puede que te sea necesario instalar iniciando la consola de línea de comandos en modo administrador (clic derecho en el icono de tu terminal preferido y "abrir como administrador". Además en algunos casos te podría solicitar instalar el Visual Studio (versión community que es gratuito).

El gestor de dependencias npm se encargará de traerse todas las librerías necesarias para hacer funcionar Ionic CLI y Cordova, de manera automática para nosotros

Una vez instalado puedes usar el intérprete de línea de comandos de Ionic para realizar diversas tareas necesarias durante la etapa de desarrollo.

Crear nuestro primer proyecto Ionic 2

Podemos crear nuestro primer proyecto de Ionic usando el Ionic CLI con el comando "ionic start", indicando después el nombre de tu app. El único detalle es que Ionic sigue dando soporte al desarrollo de aplicaciones con Ionic 1, por lo que estamos obligados a indicarle que nuestro proyecto debe usar la versión 2.

ionic start mi-primera-app-ionic --v2
Nota: En este momento te pueden salir unos warnings, indicando que necesitas otras dependencias. Podemos simplemente dejar pasar esos avisos (no son errores, simplemente warnings), ya que no vamos a ocuparnos todavía de la compilación de los proyectos.

Al acabar el proceso te preguntará si quieres crear una cuenta en Ionic (Create a free Ionic account). Este paso no es necesario por el momento, pero tampoco resultaría de más crearnos esa cuenta.

Ahora podemos entrar en la carpeta de nuestra aplicación. En mi caso la llamé "mi-primera-app-ionic", por lo que la carpeta tendrá su mismo nombre:

cd mi-primera-app-ionic

Una vez dentro de la carpeta de nuestro proyecto, podemos servir la aplicación en el navegador con el comando "ionic serve".

ionic serve

Después de unos instantes en los que el sistema está produciendo los archivos de nuestro proyecto para que se puedan ver bien en el navegador, se nos abre directamente el navegador, mostrando la aplicación que acabamos de iniciar. Como verás, ya tiene algunos componentes sencillos, con algo de texto y unas tabs para navegación por diversas pantallas.

Nota: Ionic 2 tiene algunos templates para implementar en las apps recién creadas. El predeterminado incluye el sistema de navegación por pestañas, pero en el siguiente artículo aprenderemos a crear un proyecto vacío para marearnos con menos código para comenzar.

La aplicación se abre en toda la pantalla del navegador y se verá muy muy grande. Una alternativa para verla de otra manera es usar el "ionic lab".

Puedes salir del proceso que está sirviendo la aplicación con CRTL + C, en la consola, y luego correr el comando:

ionic serve --lab

En este caso verás que la aplicación se ve en un lienzo más estrecho, con lo que podremos apreciar mejor las condiciones de visualización que tendría al mostrarse en la pantalla de un móvil.

Además arriba a la derecha podemos seleccionar otras plataformas, para ver cómo se mostraría nuestra aplicación en un Android / iOS y Windows Phone.

En la siguiente imagen podemos ver cómo nuestra aplicación tiene ligeras diferencias al visualizarse en las distintas plataformas, algo que sin duda es una de las características más asombrosas de Ionic, el proveer de experiencias de usuario adaptadas a cada sistema operativo donde estemos produciendo nuestra app.

Conclusión

Hemos conseguido instalar Ionic en local e iniciar un primer proyecto. Hemos ocupado pocos minutos y ya tenemos algo funcionando que podemos tocar, lo que resulta bastante asombroso.

En el siguiente artículo pondremos manos en el código y crearemos nuestro "hola mundo" en Ionic 2.

Recuerda que lo que has hecho de momento solo te permite trabajar con Ionic en tu ordenador y no producir archivos para ejecutar apps en el móvil. Para conseguir eso requiere instalar otra serie de programas y SDK de los que hablaremos más adelante en este manual, pero siempre puedes estudiar la documentación (o hacerte el curso de Ionic 2 que tenemos en EscuelaIT, claro).

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Eduardo

20/3/2017
Instalación
¿Cómo es la instalación en Windows 7?

Mijail

06/6/2017
W7
Tengo entendido que sólo se puede de W10 , si me equivoco por favor disculpame

Lolo4

22/7/2017
Error siguiendo el curso en ionic start prueba1 --v2
Buenas tardes.
Comentar que ha cambiado ionic 2 y si seguimos el curso, al poner
ionic start prueba1 --v2
No dirá que --v1 y --v2 han sido removidos, que se usa --type.
Hay 3 --types: ionic1, ionic2 y ionic-angular.
Lo que quiero es ionic2, no sé bien para qué está ionic-angular

Y ahora hay otro problema porque cuando hago:
ionic start Prueba1 --type=ionic2
Me pregunta: "what starter would you like to use?" y que lo elija con las flechas del cursor, que si las muevo se queda en negro, y si pulso enter da un error.

Total, que no puedo ni crear un ejemplo vacío.
Os agradecería que me ayudarais.

Felicitaros por los cursos, que son de los mejores que hay.
Gracias, un saludo.