Ionic 4: Ejemplo práctico aplicación completa

¡Bienvenidos a una nueva entrada de Ionic 4! Como ya saben hemos hecho publicaciones anteriores sobre Ionic en su versión 4 en este mismo blog, hablando un poco acerca de diferencias respecto a la versión anterior, así como sus nuevas funcionalidades.

En esta entrada se dará un enfoque orientado tanto a usuarios primerizos como a aquellos que estén buscando migrar de la versión 3 a la 4 de Ionic.

Cambios en la nueva versión

Como breve recapitulación es importante tener presentes los siguientes conceptos y cambios en la nueva versión:

• Ionic 4 puede ser utilizado con cualquier framework o con ninguno (Angular, React, Vue o Javascript), por ejemplo creando una nueva aplicación para react utilizando ionic CLI sería: ionic start myAppName blank –type=react.
• El punto anterior es posible debido a la incorporación de web components con Stencil.
• Se añade Capacitor, una alternativa a Cordova que además es compatible con los plugins para este.
• Ionic 4 usa angular router, en v3 usaba stack con push y pop.
• “ion-navbar” ahora es obsoleto.
• Debido a que ahora es independiente del framework utilizado han habido cambios en la estructura del proyecto, así como en los componentes.
• A diferencia de versiones anteriores crece la importancia en Web-app projects y Desktop apps.
• Se eliminan (ionViewDidLoad, ionViewCanLeave y ionViewCanEnter) pero se conservan (ionViewWillEnter, ionViewDidEnter, ionViewWillLeave, and ionViewDidLeave)
• Anteriormente componentes como  Loading, Toast, Alert… eran creados de forma síncrona, ahora se crean de forma asíncrona usando promesas o async/await.

Migración

Adicional a esto en caso de que lo que busquen sea una serie de pasos para migrar de la versión 3 a la 4, Ionic tiene instrucciones de los pasos recomendados para llevar a cabo este proceso. Sin embargo a manera de resumen serían los siguientes: 

• Es recomendable utilizar ionic CLI para generar y crear todos los elementos.
• Primero se genera un blank project.
• Es importante tener en cuenta los cambios en la estructura del proyecto.
• Un detalle importante es notar que hubo cambios en nombre del paquete “npm install @ionic/angular”.
• Al crear el proyecto, verificar el tipo en “ionic.config.json”.
• Estar atentos a los cambios en markup (debido a la incorporación de web components).

Explicaremos más en detalle los puntos descritos arriba mediante el ejemplo práctico en esta entrada en el que ustedes podrán ir siguiendo paso a paso un video para crear su primera aplicación en Ionic 4.

Aquí les dejo un enlace con los ficheros utilizados para nuestra Office App.

Para finalizar cabe recalcar que como siempre, si tienen duda de alguna cosa o para continuar aprendiendo el mejor lugar es la documentación de Ionic 4. También les comparto un enlace para todos aquellos desarrolladores ya relacionados con la versión 3 y que estén buscando una guía completa de los cambios en su versión más actual.

Espero que hayan aprendido algo nuevo y que les sean de mucha utilidad los conocimientos para sus futuros proyectos ahora que hemos creado una aplicación funcional con Ionic 4.

¡Hasta la próxima!