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

Ionic 4 (parte 2) – Primeros pasos

  • marzo 8, 2019
  • Lucie Wu
  • No Comments
  • Consejos tecnológicos, Desarrollo de software, Tecnologías

¡Bienvenidos a Ionic 4 de nuevo! Como ya sabéis, Ionic es un framework de código abierto para la creación de aplicaciones móviles, que nos permite construir fácilmente aplicaciones móviles multiplataforma (cross-platform, tales como apps para móvil -smart phone-, páginas web para móvil, páginas web de aplicaciones mixtas, aplicaciones progresivas o PWAs, etc) de alta calidad mediante el empleo de tecnologías web (JavaScript / Typescript, HTML, CSS, SASS). La última versión publicada es la 4, sobre la cual ya hicimos una introducción acerca de  algunas de sus principales características en uno de nuestros anteriores blogs.

Podéis encontrar la entrada “Ionic 4 (parte 1) – Introducción” en este enlace: https://tech.tribalyte.eu/bolg-ionic-4-parte1-introducion

En esta publicación, entraremos más en detalle de esa nueva versión del framework, basándonos en un ejemplo sencillo. Supongamos que tenemos un proyecto basado en el starter de «tabs» (pestañas) de Ionic, basado en Angular.

1.Creando una página y un salto de página

1.1 Crear una página en Ionic v4 es similar a crearla en la v3. Sólo tienes que utilizar la sintaxis “ionic g page nombrePagina”, como se muestra en en la figura 1-1. En el ejemplo crearemos una página llamada «button».

image 1

Figura 1-1: creando el botón de página en Ionic 4

1.2 Después de crear la página, ahora tenemos un directorio «button» contenido en el directorio «src», como muestra la figura 1-2. El directorio «button» contiene el componente que en este caso es una página de nuestra aplicación.

image 2

Figura 1-2: el botón página (componente)

1.3 Si queremos añadir un enlace en la pestaña 1 (componente «tab1») para poder navegar a nuestra nueva página «button», podemos utilizar el router de Angular, con enlaces («reouterLink») como se muestra en la figura 1-3. La ruta en Ionic 4 está totalmente basada en Angular, y los métodos son prácticamente iguales a los de Angular.

image 3

Figura 1-3: salto al botón página

1.4 En esta versión del framework, al navegar a otra página no se añadirá el botón de «Ir atrás» por defecto. Por lo tanto, si queremos añadir un botón de retroceso a nuestra página «button», necesitamos añadir «ion-back-button» en el componente «ion-header».

 

2. Añadiendo una nueva pestaña en nuestra app

En este paso vamos a añadir una nueva pestaña y su correspondiente botón en la barra de navegación. Para ello seguimos estos pasos:

2.1 Crear el componente tab4 con: «ionic g page tab4».

2.2 Cambiar la configuración de ruta en app-routing.module.ts, y eliminar la ruta de manera predeterminada, como sigue:

image 4

 

 

 

2.3 Añadir el nuevo botón en la barra inferior. Para ello modificamos tabs.page.html como muestra la figura 2-1, y la figura 2-2 muestra el efecto.

image 5

 

Figura 2-1: añade el nuevo toggle button

image 6

Figura 2-1: el nuevo toggle button display

3. Migración de páginas en Ionic 4

A fin de migrar una página creada en Ionic 3 a Ionic 4, es muy sencillo seguir los siguientes pasos:

3.1 Primero, crea la página correspondiente del proyecto original. Por ejemplo una página de «login», con el comando: «ionic g page pages/login«.

3.2 Ésto generará una carpeta login en el directorio «src/app/pages», el cual incluye 5 archivos. Comparado con Ionic 3, en Ionic 4, además de un archivo nombrado diferente, hay un archivo de pruebas automatizadas. Comparando la principal estructura de login.ts en Ionic 3 y login.page.ts en Ionic 4:

image 7

Figura 3-1: diferencia de estructura principal de una página entre Ionic 3 e Ionic 4

En general las diferencias no son tan grandes, siendo la principal la parte «@Component», el nombre del selector, la referencia del archivo plantilla y el archivo de estilo. La parte «@IonicPage» de la versión 3 ha sido eliminada en la 4, y algunas funciones están colocadas en Angular router.

 

4. Estandarización de componentes 

Ionic 4 tiende al uso del estándar de componentes web (Web Components). Debido a ello, muchos de los componentes y atributos en la versión 4 han cambiado. Por ejemplo:

image 8

Figura 4-1: diferencia de los atributos entre ambas versiones

Además de que la etiqueta «button» se reemplaza por «ion-button«, algunas propiedades también han cambiado, por ejemplo, todas las propiedades del botón han sido reemplazadas, el atributo item-start ha sido reemplazado por slot=“start” (aquí se puede encontrar más información sobre cómo utilizar los «slots») y además el uso de radio-group ha cambiado. Para más información sobre la migración a Ionic 4, las siguientes fuentes son de utilidad:

  • https://blog.ionicframework.com/a-guide-for-migrating-to-ionic-4-0/
  • https://www.joshmorony.com/my-method-for-upgrading-from-ionic-3-to-ionic-4/

Esperamos que este segundo artículo os haya hecho conocer un poquito más Ionic v4, en futuras entregas profundizaremos un poquito más en él. Si tenéis cualquier duda sobre este framework, no dudéis en preguntarnos. ¡Esperamos vuestros comentarios!

Artículos Relacionados:

  • API REST | ¿Qué es una API REST? Características y usos - Tribalyte Technologies Blockchain y vacunas COVID-19 | Tribalyte Technologies | Alessandro Barbera Formica¿Qué es una API REST?
  • Autenticación nativa con Facebook en Ionic 3.xAutenticación nativa con Facebook en Ionic 3.x
  • Crypto tracker React_Initial_0Creando un Crypto Tracker con React: un tutorial paso a paso
  • imagen 1Lanzamiento de BrightByte v0.4
  • revisión códigoLa importancia de la revisión de código como parte de la política de calidad de la organización
  • Facebook
  • Twitter
  • LinkedIn
  • E-Mail

About The Author

Lucie Wu es ingeniera de software en Tribalyte, posee experiencia en los sectores financieros y matemáticos. Se dedica al desarrollo de software y blockchain basado en TypeScript, Angular e Ionic. Su objetivo de futuro es la combinación de economía y tecnología.

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
  • General
  • 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 919 049 820 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