Saltar al contenido

APRENDE Cómo Instalar Ionic en [2021]

¡Eyyy hola que tal dev! [email protected] a la web, Aitor otra vez por aquí. ¡Y en el artículo de hoy seguimos dando ritmo a los tutoriales de Ionic!

Cómo instalar Ionic

Quizás te preguntes ¿cómo se instala Ionic en nuestro pc? O ¿qué necesito para hacer funcionar Ionic en mi máquina? Pues si es así, no te preocupes, no eres el único. Yo también me lo pregunté en su día.

Cómo ya sabrás, mi nombre es Aitor y soy desarrollador de apps desde hace más de 6 añitos ya. Y hoy te voy a contar cómo se instala y lo que necesitas para hacerlo funcionar de la mejor manera posible.

Pero antes de comenzar, y cómo se que a muchos lectores les gusta más ver que leer, aquí te dejo el artículo hecho video para ti. Lógicamente el del video soy yo, y quiero pedirte una cosa. Que si el video te gusta/ayuda, pues que te suscribas al canal socio, así tendré señales de que el contenido gusta y haré más.

 

Paso 1 – Instalando NodeJS y NPM

En primer lugar, y para hacer funcionar todo, necesitamos la base donde está construido el Framework. Por dicho motivo necesitamos de NodeJS y de su gestor de paquetes NPM.

Resumiendo, NodeJS es lo que nos permitirá hacer correr el server desarrollo de Ionic y alguna cosita más para su correcto funcionamiento y NPM nos permitirá instalar los módulos/componentes externos que nos harán falta para construir las apps.

Todo esto lo podrás descargar desde la web oficial de Node desde este enlace. Mi consejo es que descargues la versión LTS (Long Time Support). Para este fin no será necesaria una superior y siempre estará más madura que la versión actual.

La instalación no tiene pérdida. Será siguiente, siguiente, siguiente, etc… a menos que quieras configurar alguna cosa a tu gusto.

 

Paso 2 – Instalando Apache Cordova

El siguiente paso, una vez instalado lo anterior, es instalar la plataforma de Apache Cordova. Será la encargada de gestionar todas las conexiones de nuestros plugins con la parte nativa del sistema.

Digamos que es cómo un puente entre nuestro código TS y el código nativo del sistema para, por ejemplo, acceder a la cámara o a los sensores del dispositivo.

Para instalarlo vamos a utilizar el gestor de paquetes de Node, npm, que hemos instalado en el paso uno. Y para hacerlo tenemos que abrir una ventana de consola cómo administrador y tirar la siguiente línea:

 

npm install -g cordova

 

Dicha línea lo que conseguirá es descargar el paquete e instalarlo globalmente en nuestro equipo de desarrollo para que podamos usarlo desde donde queramos.

En caso de que no usáramos el flag -g, Cordova se instalaría de manera local en el directorio en el que estemos apuntando con el Shell y solo podría ser usado desde ahí.

Nota: Estoy preparando un curso sobre npm, y su uso, que será muy cortito. Quizás solo tenga 2 o 3 videos/artículos y si no te lo quieres perder te tienes que suscribes al canal, o bien, te pasas por el circulo aquí.

 

Paso 3 – Instalar Ionic

Y llegados a este punto, ya tenemos todo lo necesario para poder instalar Ionic en nuestro dispositivo.

Para tal fin también vamos a utilizar la consola de NPM para instalarlo y para hacerlo tendremos que tirar la siguiente línea:

 

npm install -g @ionic/cli

En caso de que tengamos instalado una versión anterior de Ionic, es recomendable que la desintales. Para hacerlo es necesario el siguiente comando:

 

npm uninstall @ionic

 

Esta línea instalará el paquete que contiene la consola completa de Framework. Una vez haya terminado de instalarse vamos a poder utilizar los comandos que nos provee para poder crear nuevos proyectos, crear nuevas páginas en las apps, servicios, etc…

A parte, lógicamente, del código necesario para hacer correr el servidor de desarrollo de la app, el sistema de building y demás…

 

Paso 4 – Creando nuestra primera app

Con todo lo anterior ya instalado, estamos en disposición de crear nuestra primera aplicación.

Para dicha meta, nos vamos a colocar en el directorio que nosotros creamos oportuno y vamos a tirar la siguiente línea de consola:

 

ionic start <nombre del proyecto>

 

Cuando realicemos esto nos va a ir preguntando una serie de cuestiones, cómo, por ejemplo, que tipo de aplicación queremos. Tabs, Menú drawer, etc… tendremos que ir seleccionando lo que queramos para la app.

Terminado todo este proceso de wizard, vamos a esperar que todo acabe de construirse y de bajar todo lo necesario.

 

Paso 5 – Levantar la app y comprobar que todo funciona

Bueno, pues ya hemos terminado. Si no ha petado nada, y no hay ningún problema con el equipo donde se está ejecutando, podremos hacer uso del comando que levanta la app y podremos empezar a trabajar con ella.

Para poder usar dicho comando, nos vamos a colocar desde la consola en el directorio de la aplicación que acabamos de crear.

 

cd <nombre del proyecto>

 

Una vez dentro, vamos a tirar la siguiente línea:

 

ionic serve

 

Después de esperar a que todo levante, tendremos disponible el acceso a la app y ya la podremos ver. La URL para acceder será la siguiente: http://localhost:8100

 

Solo una cosa más

Recuerda suscribirte al canal de YT si te ha gustado este contenido. Tengo toneladas de este para darte. Y si no te apetece YT siempre te puedes pasar por El Circulo. Si no sabes lo que es, es una comunidad donde te enseñaré a hacerte un sueldo programando apps.

Sin nada más que agregar, y dejando todo funcionando, me despido ya hasta el siguiente artículo. Hasta entonces, que vaya bien.