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.

Para esta entrada hemos preparado y subido ya listo un vídeo webinar totalmente gratuito de una hora que podréis ver y consultar en cualquier momento. 

En esta clase 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.  Completa el formulario más abajo simplemente con tu nombre y disfruta ahora mismo de nuestro vídeo webinar.

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).

En nuestro vídeo webinar totalmente gratuito explicaremos más en detalle los puntos descritos arriba y mediante un ejemplo práctico os enseñaremos paso a paso cómo crear vuestra primera aplicación en Ionic 4.

Además, en este webinar podrás ver:

• Una introducción a Ionic 4 y los cambios respecto a la versión anterior.
• Cómo iniciar un proyecto y crear páginas con ionic cli.
• Cómo usar angular router con ionic, configuración de rutas, paramMaps, navegación y lazy loading.
• ReactiveForms de angular en ionic.
• Componentes de Ionic como listas, items editables, botones, slides, etc.
• Componentes de Ionic como toasts.
• Theming de Ionic: Colores y variables de componentes.

Así que no lo pienses más, completa ahora mismo el formulario y resuelve todas tus dudas con esta clase totalmente gratuita.

Apéndice

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

Entonces, os espero en spero que con nuestra clase gratuita aprendéis algo útil para vuestros futuros proyectos ahora que hemos creado una aplicación funcional con Ionic 4.