Cultura

Instalar IONIC – Curso de Ionic APP desde cero 💪

Vamos a instalar IONIC y comenzar a desarrollar nuestra primera aplicación móvil compatible con Android, Ios y Windows.

Vamos a configurar Ionic en nuestro computador, pero antes vamos a instalar Nodejs y Cordova.

Quiero que se entienda que el proceso de instalar nodejs, cordova y ionic, se realiza solo una vez.

Aquí están los enlaces ocupados en el video tutorial: http://ionic-bluuweb.blogspot.cl/2017/07/como-instalar-ionic-y-crear-nuestra.html

El primer programa será Node js, y esto nos sirve basicamente para trabajar con su paquete de instalación npm, por lo cual iremos al sitio oficial y descargaremos su instalador el cual será siguiente siguiente siguiente…

Una vez que tenemos Nodejs en nuestro computador ya podremos instalar framework a través de npm.

Si nos fijamos en la página de ionic verás que el primer paso dice npm install -g… pero antes nos indica que tenemos que tener instalado Node y Cordova… esto último nos servirá para que nuestra aplicación sea compatible con diferentes dispositivos móviles.

Nos vamos al sitio oficial de Cordova y vemos el instalador a través de npm por lo tanto copiamos esta línea de código y abrimos Visual Studio Code, si tu estás trabajando con otro editor de código tendrás que abrir la linea de comandos que tengas instalada en tu sistema, yo prefiero trabajar con Visual Studio Code ya que así no tendré que tener diferentes ventanas abiertas al momento de trabajar con la terminal.

Una vez que tengamos abierto visual studio ocupamos el atajo ctrl + ñ y se nos abrirá la terminal.
Pegamos lo que previamente habíamos copiado y damos a enter.

Si te aparece algún warning no te preocupes siempre y cuando no te aparezcan alertas de fallos estará todo bien.

Podemos introducir cordova -v para visualizar su versión y hasta aquí todo bien.

Ahora instalaremos ionic en nuestro sistema…
Volvemos al sitio oficial y podremos copiar la línea npm install -g cordova ionic, una nota importante es el -g… esto significa que es una instalación global por lo tanto solo tendremos que hacer este paso una vez…

Así que vamos a nuestra terminal y pegamos el código…después de unos minutos, ya tendremos instalado ionic en nuestro computador.

Verificamos la versión con ionic info y si todo esta ok seguiremos con el siguiente paso que es crear nuestro primero proyecto.

Todo lo que hicimos previamente, como te repito se hace solo una vez… el instalar nuevos proyectos es lo que se repetirá en el futuro.

Nos vamos al paso dos y aquí tenemos el comenzar con una app
dice ionic star myApp tabs
El myApp es el nombre de la aplicación así que puedes cambiarlo y el tabs es una plantilla… ya veremos con mayor detalle esto pero es para no comenzar con un proyecto desde cero.

¿Y donde pegamos este código?, bueno primero nos vamos a una carpeta donde quieras guardar tu proyecto… arrastramos esa carpeta a visual studio code… abrimos la terminal con ctrl + ñ y nos fijamos que automáticamente estamos en la ruta de la carpeta que acabamos de crear, esto es importante ya que es aquí donde vamos a instalar nuestro proyecto.
Pegamos el código y damos a enter.
Este proceso se va a demorar un poco así que paciencia.

Cuando esté todo ok, nos aparecera un aviso de si queremos vincular con la cuenta de ionic, por ahora le decimos que no con la letra n.

Vamos a visualizar nuestra primera aplicación y para eso tendremos que ejecutar un servidor, pero antes tenemos que dirigirnos a la carpeta myApp con cd myApp, verás que la ruta cambia y ahora estamos dentro de nuestra aplicación.
Colocamos ionic serve para visualizar nuestro proyecto… esto nos dará una ruta la cual copiamos en el navegador.

Y waula! ya tenemos nuestra primera aplicación en marcha.
Voy a reducir la pantalla y ver en modo responsive para visualizarla de mejor manera.

Por ahora hemos instalado nuestro primero proyecto llamado myApp y si nos dirigimos a la carpeta verás que son una cantidad de archivos impresionantes pero en el próximo video veremos que no tendrás que tocar casi nada.

Espero que te recuperes después de tanto chamullo y nos vemos en el siguiente video tutorial.

MÁS CURSOS DE BLUUWEB!
📌 HTML Y CSS: https://goo.gl/yoMdMZ
📌 JAVASCRIPT: https://goo.gl/hnQkog
📌 JQUERY: https://goo.gl/Ag7XsG
📌 CSS GRID: https://goo.gl/nR56pT
📌 VISUAL STUDIO CODE: https://goo.gl/cvu57R
📌 BOOTSTRAP 4: https://goo.gl/npezrj
📌 PHOTOSHOP: https://goo.gl/1C9k5n
📌 PSD A HTML: https://goo.gl/VYX2V6
📌 TEMAS WORDPRESS: https://goo.gl/GeiVNm
📌 PHP Y MYSQL: https://goo.gl/oao1QT
📌 FORMULARIOS CON PHP Y AJAX: https://goo.gl/GKpZAH
📌 ANGULAR: https://goo.gl/WJhtnC
📌 FIREBASE/FIRESTORE: https://goo.gl/bpKL9i
📌 PHP LARAVEL: https://goo.gl/iAbPBy
📌 MATERIALIZE CSS: https://goo.gl/7pSFY5
📌 IONIC: https://goo.gl/RNGKTD
📌 SASS: https://goo.gl/ba7mEE
📌 PROGRAMACIÓN BÁSICA: https://goo.gl/HksyVi

¿Te gustó este video?
Puedes regalarme un café aquí: https://www.paypal.me/bluuweb

Finalmente visita mi sitio web: https://bluuweb.org

Author

Moisés Cabrera

Encantado de emprender, el Internet es como pez en el rio para mi y quiero aportar valor a este mundo digital. Si crees que es de interés estos artículos no dudes en comentar.