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?
• Va a ser Vue-tiful

¿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