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

Artículos Relacionados
¿Qué es Ionic?, Un espectacular framework multiplataforma

Ionic es un SDK front-end de código abierto para desarrollar aplicaciones móviles híbridas que utilizan tecnologías web como HTML, CSS y JavaScript. Proporciona componentes basados ​​en tecnología web optimizada para dispositivos móviles, así como API nativas que utilizan Cordova e Ionic Native. ¿Qué es ¡SEGUIR LEYENDO!

Colección de Recursos para React Hooks #1

Documentación oficial ? Documentación oficial Listas impresionantes relacionadas General Artículos Tutorial de React Js Resize, Comprimir y Recortar Tamaño de Imagen Cómo usar React useReducer Hook como un profesional Cree una cartera NPX CLI en menos de 5 minutos React Router: una guía para ¡SEGUIR LEYENDO!

Apache Cordova para crear aplicaciones de escritorio macOS

CordovaLib es un framework que permite a los usuarios incluir Cordova en sus proyectos de aplicaciones OS X fácilmente, y también crear nuevos proyectos de aplicaciones OS X basados ​​en Cordova. Debes tener en cuenta que el enfoque actual de esta plataforma Cordova es ¡SEGUIR LEYENDO!

Angular 11: Conociendo las próximas novedades del framework

Una nueva actualización de Angular, fue lanzada la primera quincena de este Noviembre 2020: Angular 11 llega con nuevos e interesantes cambios. Si bien, en Junio, hablamos del lanzamiento de Angular 10; en Noviembre, ya recibimos una nueva actualización del framework de Angular. Traducción: ¡SEGUIR LEYENDO!

¿Cómo usar la línea de tiempo de DevTools con Flutter?

A continuación sigue la guía de uso sobre las herramientas de desarrollo para Flutter, en este caso vamos a conocer la línea de tiempo. ¿Qué es la línea de tiempo de DevTools? La vista de línea de tiempo es una muestra de información sobre ¡SEGUIR LEYENDO!

Microsoft lanza el Framework .NET 6 Previa 2

Microsoft lanza el framework .NET 6 Preview 2. La nueva versión previa incluye nuevas API, mejoras de rendimiento en tiempo de ejecución y versiones iniciales de .NET MAUI. Además, se incluyen compilaciones para Apple Silicon, que faltaban para la versión previa preliminar 1. Después ¡SEGUIR LEYENDO!

Angular e Ionic alimentan las tiendas de aplicaciones y la web

¿Sabías que Ionic y Angular alimentan aproximadamente el 10% de las aplicaciones en iOS y casi el 20% de las aplicaciones en Android? Sí, Angular impulsa una gran cantidad de aplicaciones en las tiendas de aplicaciones. ¿Por qué es útil saber esto? Bueno, si ¡SEGUIR LEYENDO!

Comparte tu opinión