Como Crear Una Primera Aplicación Básica con Ionic Framework

Ionic
19-02-2021
18-09-2023
Crear un Post - Eventos Devs - Foro

5 minuto(s)

Demo Github

Con Ionic Framework podemos crear aplicaciones móviles hibridas y si quieres aprender esta herramienta, no hay nada mejor que aprender a crear una aplicación básica como inicio para posteriormente crear aplicaciones más complejas. En este Post te enseñare los pasos que debes seguir para comenzar a crear una nueva aplicación con Ionic, vamos con ello.

Te Puede Interesar:

Que es Ionic y otros Detalles
Que es y Como instalar Node JS
Puedes leer más artículos en la categoría Ionic.

Asimismo te invito a escuchar el Podcast: “Porque Todo Desarrollador Debes Ser Autodidacta”:

Spotify:	Sound Cloud:	Apple Podcasts

Bien ahora continuemos con el Post: Como Crear Una Primera Aplicación Básica con Ionic Framework.

Si no conoces sobre Ionic Framework te recomiendo leer el artículo Que es Ionic y otros Detalles:

Que es Ionic y otros Detalles

Años atrás crear una aplicación con Ionic Framework era cuestión de crearla manualmente como cualquier otro framework, esto es normal, por suerte para los que quieren utilizar Ionic, este cuenta ahora en su página con un Wizard que nos permite crear rápidamente nuestra aplicación con Ionic, esto es genial.

Creación de Nuevo Proyecto

Los pasos que te explicaré en este Post y el orden de las opciones pueden cambiar en el futuro, esto no depende de mi, sino de los Desarrolladores que dan soporte a Ionic Framework y su sitio web.

Lo que haremos primero es dirigirnos a la página oficial de Ionic Framework y hacer clic en el botón Get Started que se encuentra en la parte superior derecha de la pagina web.

Si bajamos o hacemos scroll en la página, nos aparecerá un enlace para iniciar la creación de la App mediante un App Wizard, también encontraremos una Guía de instalación mediante una serie de comandos, entre otros elementos.

Hacemos clic donde dice App Wizard para iniciar el proceso de creación de nuestra aplicación. También podemos hacer clic en el botón que dice Open Wizard.

Ahora nos aparecerá una Página para crear nuestra Aplicación, en ella debemos indicar ciertos datos que se nos pide para la aplicación, como el nombre, icono, color, plantilla y con que herramienta queremos trabajar nuestra aplicación, entre las que tenemos están React JS, Angular y Vue JS, yo elegiré Vue JS y presionamos el botón de abajo que dice Continue para que comience la creación de nuestra aplicación.

Ahora nos va pedir que iniciemos sesión, yo usaré mi cuenta de GitHub para iniciar sesión, Ionic Framework creará un repositorio para el proyecto en mi cuenta de GitHub, tu puedes usar tu cuenta de Bitbucket o GitLab si es que la tienes o crearte una cuenta nueva llenando el formulario de Registro.

Luego de crear una cuenta con GitHub, integraré mi cuenta de GitHub en Ionic, para que este puede crear un repositorio para el proyecto en mi cuenta de GitHub.

Y el sistema comenzará a crear mi aplicación.

Por último luego de terminar de crearse la aplicación, el sistema nos redirige a un Dashboard con información sobre el proyecto.

Allí podemos ver que nos pide que ejecutemos 3 líneas de comandos, cada una por separado, es decir primero ejecutamos un comando y dejamos que termine de hacer su tarea hasta que termine y recién ya pasamos a ejecutar el siguiente comando.

En la imagen anterior el primer comando instala Ionic CLI de manera global, el segundo comando clona el repositorio desde GitHub y el tercer y último comando ingresa al directorio del proyecto que se ha clonado desde GitHub, instala las dependencias respectivas para que nuestro proyecto funcione correctamente e inicia el servidor de Ionic.

A continuación la parte final luego de iniciar el servidor de Ionic Framework.


> vue-cli-service.cmd serve
[vue-cli-service]  INFO  Starting development server...
[vue-cli-service]   App running at:
[vue-cli-service]   - Local:   http://localhost:8100/
[vue-cli-service]   - Network: http://192.168.0.7:8100/
[vue-cli-service]   Note that the development build is not optimized.
[vue-cli-service]   To create a production build, run npm run build.

[INFO] Development server running!

       Local: http://localhost:8100

       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

> vue-cli-service.cmd serve

[vue-cli-service] INFO Starting development server...

[vue-cli-service] App running at:

[vue-cli-service] - Local: http://localhost:8100/

[vue-cli-service] - Network: http://192.168.0.7:8100/

[vue-cli-service] Note that the development build is not optimized.

[vue-cli-service] To create a production build, run npm run build.

[INFO] Development server running!

Local: http://localhost:8100

Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

Entonces si vamos a la dirección local http://localhost:8100/ nos carga nuestra aplicación básica con Ionic Framework. Yo lo abriré en vista de Dispositivo móvil (Celular) en Chrome DevTools.

Puedo navegar por los botones de la aplicación sin problema.

Con esto entonces terminamos de crear de manera rápida nuestra aplicacion móvil híbrida y básica con Ionic Framework.

Conclusión

En este tutorial hemos aprendido a crear una aplicación básica con Ionic Framework, aprendido esto, luego podrás crear aplicaciones más avanzadas o complejas.

Nota

Los pasos mencionadas en este Post pueden ser modificadas o continuar en el futuro, esto no depende de mi, si no de los Desarrolladores que dan soporte a Ionic Framework.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.