Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Tribalyte Technologies Tribalyte Technologies
  • Inicio
  • Misión y visión
  • Nuestros expertos
  • Nuestras soluciones
  • Casos de éxito
  • Blog
  • Contáctanos
  • Únete al equipo
Ago 30

Ionic 4: Ejemplo práctico aplicación completa

  • agosto 30, 2019
  • Beto González
  • 2 Comments
  • Consejos tecnológicos, Desarrollo de aplicaciones, Desarrollo de software, Tecnologías

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

Artículos Relacionados:

  • Principios S.O.L.I.D. - Open-ClosedPrincipios S.O.L.I.D. - "Open-Closed"
  • diferencias entre WhatsApp web app y WhatsApp móvil | Alessandro Barbera FormicaWhatsApp web app vs WhatsApp ¿Cuál es la diferencia fundamental?
  • blog_tribalyte_consejo5 Consejos para ahorrar tiempo desarrollando en remoto
  • Introducción a la programación de un Smart ContractIntroducción a la programación de un Smart Contract
  • tribalyte_brightbyte1Lanzamiento de BrightByte Cloud
  • Facebook
  • Twitter
  • LinkedIn
  • E-Mail

About The Author

Soy Ingeniero en Tecnologías Computacionales por el Tecnológico de Monterrey. Actualmente estudio un máster en Desarrollo de Aplicaciones y Servicios en la UPM. Experto en el desarrollo de aplicaciones multiplataforma y frameworks como React, Vue y Angular, cuento con conocimientos de VR, AR y cloud computing.

2 Comments

  1. Camilo Soto
    enero 23, 2021 at 6:30 am · Responder

    Buen dia, las caracteristicas nativas Ionic las maneja, es que es algo que me inquieta para usarlo en mi proyecto

  2. Jhon Tovar
    noviembre 29, 2020 at 8:26 pm · Responder

    Buen dia Beto, como es el proceso de compilar un proyecto similar para android(apk)?

Leave a reply Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

ELIGE UNA CATEGORÍA

  • Blockchain
  • Consejos tecnológicos
  • Desarrollo de aplicaciones
  • Desarrollo de software
  • Sistema embebido
  • Tecnologías
  • Uncategorized

Una compañía dedicada al desarrollo de apps, software y soluciones embebidas para empresas.

SOCIOS

Contacto

Glorieta de Quevedo 8 6º2
28015 Madrid (ESPAÑA)
Phone: +34 910 177 514 E-Mail: contact@tribalyte.com Web: www.tribalyte.com
Sello PYME INNOVADORA 21/01/2025
PYME INNOVADORA
Válido hasta el 21 de enero de 2025
escudo de MEIC 21/01/2025

AYUDA

  • Política de privacidad
  • Política de calidad
  • Política de seguridad
  • Términos de uso

CERTIFICACIONES

⠀⠀⠀⠀⠀⠀⠀⠀⠀

SUBVENCIONES

Tribalyte Technologies S.L. ha    conseguido la ayuda C007/20-ED de Red.es para el impulso y la promoción de actividades de I+i y para el fomento de la inversión empresarial para desarrollar el proyecto iPatia. Así mismo, valoramos muy positivamente la contribución del FEDER, principal fondo de la política de cohesión europea, por lo que supone de impulso a nuestro trabajo y en consecuencia al crecimiento económico y la creación de empleo de esta región y de España en su conjunto.
Esta página web utiliza cookies para mejorar su experiencia de usuario y para recabar estadísticas anónimas de uso. Aceptar Más información