Quizás te preguntes ¿cómo se instala Ionic en nuestro pc? O ¿qué necesito para hacer una app en este Framework ¿verdad? Pues si es así, tal vez esto te interese. Sigue leyendo.
Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, Y hoy aprenderás cómo se instala, configura y despliega tu primera app en Ionic y lo que necesitas para hacer funcionar todo de la mejora, y más eficiente, manera posible.
Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde aprenderás desarrollo de apps móviles, aso y monetización junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.
Y por si te gusta más ver que leer, el artículo en video. Para ti.
Paso 1 – Instalando NodeJS y NPM
En primer lugar, y para hacer funcionar todo, necesitas la base donde está construido el Framework. Por esto mismo, tienes NodeJS y de su gestor de paquetes NPM.
Resumiendo, NodeJS es lo que te permite hacer correr el server desarrollo de Ionic y más cosas necesarias para su funcionamiento. Y NPM, que te permitirá instalar los módulos y componentes externos que te harán falta para construir tus apps.
Todo esto lo puedes descargar desde la web oficial de Node desde este enlace. Mi consejo es que descargues la versión LTS (Long Time Support). Que, para aclararte las siglas, es una versión estable que será mantenido en el tiempo. No será necesario 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.
Es cómo un puente entre nuestro código TS y el código nativo del sistema para, por ejemplo, que accedas a la cámara o a los sensores del dispositivo.
Para instalarlo vas a utilizar el gestor de paquetes de Node, npm, que has instalado en el paso uno.
Ahora, tienes que abrir una ventana de consola cómo administrador y tirar la siguiente línea:
npm install -g cordova
Dicha línea lo que hará es descargar el paquete, con todo el contenido, e instalarlo globalmente en tu equipo de desarrollo para que puedas usarlo desde donde quieras.
La instalación global se define con el flag "-g".
Ojo, en caso de no usar "-g", Cordova se instalaría de manera local en el directorio en el que estés apuntando con el Shell en ese momento, y solo podrá ser usado desde ahí.
Paso 3 – Instalar Ionic
Llegados a este punto, ya tienes todo lo necesario para poder instalar Ionic en tu dispositivo.
Para hacerlo, vas a utilizar de nuevo NPM tirando la siguiente línea en la consola que has abierto cómo administrador:
npm install -g @ionic/cli
En caso de que tengas instalado una versión anterior de Ionic, es recomendable que la desinstales.
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 vas a poder utilizar los comandos que te provee para poder crear nuevos proyectos, crear nuevas páginas en las apps, servicios, etc…
A parte, lógicamente, también llega el contenido 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, estás en disposición de crear tu primera aplicación.
Para hacer esto, te vas a colocar en el directorio que tu creas oportuno y vas a tirar la siguiente línea de consola:
ionic start <nombre del proyecto>
Cuando realices esto, te va a ir preguntando una serie de cuestiones, cómo, por ejemplo, que tipo de aplicación quieres. Tabs, Menú drawer, etc… tendrás que ir seleccionando lo que quieras para tu app.
Terminado todo este proceso de wizard, vas a esperar a que todo acabe de construirse y a que termine de bajar todo lo necesario para poder construir tu app.
Paso 5 – Levantar la app y ver si todo funciona
Bueno, pues ya has terminado.
Si no ha petado nada, y no hay ningún problema con el equipo donde se está ejecutando, podrás hacer uso del comando que levanta la app y podremos empezar a trabajar con ella.
Primero, coloca el puntero de la consola dentro de directorio raíz del proyecto que acabas de crear:
cd <nombre del proyecto>
Una vez dentro, tirar la siguiente línea:
ionic serve
Después de esperar a que todo levante, tendrás disponible el acceso a la app y ya la podrás ver.
Normalmente, la URL para acceder será la siguiente: http://localhost:8100
Algo más que quizás te interese
Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.
Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.
Y ahora si, me despido. Espero haberte ayudado con la instalación de Ionic y nos vemos en el siguiente artículo. Hasta ese entonces ¡que te vaya bien!