Construyendo tu primera aplicación de Ionic y Vue

Luego de la noticia, en la que se lanza la Beta del lanzamiento de Ionic Vue, ahora toca el primer tutorial: «Creando tu primera aplicación Ionic para Ionic Vue.

Lo guía va, a través de los fundamentos del desarrollo de aplicaciones Ionic mediante la creación de una aplicación real paso a paso.

Después de completar el tutorial, transformarás la aplicación de inicio Tabs en una galería de fotos interactiva que se ejecuta en la web, iOS y Android, todo desde una misma base de código:

¿Qué vamos a construir?

La aplicación Photo Gallery incluye la capacidad de tomar fotos con la cámara de su dispositivo, mostrarlas en una cuadrícula y almacenarlas permanentemente en el dispositivo.

Los puntos más destacados del tutorial, incluyen:

  • Una base de código basada en Vue que se ejecuta en la web, iOS y Android utilizando componentes de Ionic Framework UI.
  • Implementado como una aplicación móvil nativa de iOS y Android usando Capacitor, el tiempo de ejecución oficial de la aplicación nativa de Ionic.
  • Funcionalidad de galería de fotos impulsada por las API de cámara de condensador, sistema de archivos y almacenamiento.

Va a ser Vue-tiful

Lo que más me gusta de este tutorial es la cobertura de los conceptos de Vue 3, como la API de composición, las referencias reactivas y los ganchos del ciclo de vida, así como las características modernas de JavaScript como la desestructuración, el operador de descanso / propagación y ESModules.

Por ejemplo, para guardar las fotos en un almacenamiento permanente, se usa la función de reloj Vue 3 para ver la matriz de fotos.

Siempre que se modifica la matriz (en este caso, capturando o borrando fotos), cachePhotos se activa la función. No solo podemos reutilizar el código, sino que también garantiza que los datos de las fotos siempre se guarden, incluso si el usuario de la aplicación cierra o cambia a una aplicación diferente:


// Use the Capacitor Storage API to cache photos
const cachePhotos = () => {
Storage.set({
key: "photos",
value: JSON.stringify(photos.value)
});
}

// Anytime the photos array is modified, cache photo data
watch(photos, cachePhotos);

Entonces, en resumen: Si estás buscando un tutorial totalmente práctico para iniciarte con Vue e Ionic, este es el tutorial perfecto.

Fuente: Blog oficial de Ionic

Pablo, Técnico en Sistemas Informáticos y Redes

Compartir
Publicado por
Pablo, Técnico en Sistemas Informáticos y Redes

Entradas recientes

La biografía de Steve Jobs escrita por el biógrafo Walter Isaacson

La biografía más vendida del cofundador de Apple, Steve Jobs; escrita por uno de los…

1 día hace

Cómo la Inteligencia Artificial está Revolucionando los Sistemas de Seguridad en el Hogar

Hubo un tiempo en el que la “seguridad en el hogar” significaba confiar en un…

2 días hace

Elon Musk se asegura una compensación de 1 billón de dólares con Tesla

Elon Musk vuelve a romper todos los esquemas. Los accionistas de Tesla acaban de aprobar…

2 días hace

GTA 6 se retrasa hasta finales de 2026

Los fans de Grand Theft Auto tendrán que esperar un poco más para volver a…

5 días hace

Juego de terror GRATIS este Halloween, sobrevive en Five Nights at Freddy’s Into the Pit

Five Nights at Freddy’s: Into the Pit nos sumerge en un misterioso mundo donde lo…

2 semanas hace

Juego de terror de dibujos animados, Bendy and the Ink Machine GRATIS hasta el 6 de noviembre

Adéntrate en el oscuro y retorcido mundo de Bendy and the Ink Machine, donde los…

2 semanas hace