UI, Uncategorized

Aprendiendo a manejar datos en caché en Xamarin Forms

Hola! 🙋‍♀️ ¡Gracias por estar aquí espero que estes muy bien! En esta ocasión te quiero explicar un tema super útil e interesante cómo es el almacenamiento de datos en caché para nuestras aplicaciones de Xamarin Forms.

¡Imagina que tienes que confirmar tus últimas transacciones en tu cuenta bancaria! Dirás algo así como un “¡¡Ay Perfecto tengo la aplicación banking móvil!!” 😎 … Tienes que dar esa información rápido porque de ello depende una gran oportunidad de compra que se te presentó … Pero de repente internet se va … ¿Y adivina quién no pudo confirmar la información y perdió su compra? …. 🤦‍♀️

Como desarrolladores, es importante hacer experiencia de nuestros usuarios lo más placentera posible y no ayudará a tomar en cuenta este tipo de escenarios y justo aquí es donde entra Monkey Cache con persistencia de datos, para que nuestros usuarios puedan acceder a su información incluso sin tener una conexión a Internet disponible. 😎


¿Qué es Monkey Cache?

Monkey Cache es una biblioteca creada por James Montemagno con el objetivo de permitir a los desarrolladores almacenar en caché fácilmente cualquier dato durante un período de tiempo limitado. Todos los datos de Monkey Cache se almacenan y recuperan en un barril. Puedes ver más información aquí.

MonkeyCache tiene tres proveedores los cuales puedes elegir según la necesidad de tu proyecto (SQLite o LiteBD) o si no tiene ninguno de los anteriores, puede usar FileStore el cual es un respaldo local basado en archivos.

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-09-05-at-8.52.10-PM.pngFinalmente, les muestro  las facilidades que no brinda Monkey Cache. (Usaremos algunos para la implementación de nuestro ejemplo)

This image has an empty alt attribute; its file name is Screen-Shot-2020-09-08-at-2.30.30-PM.png


¡Empecemos!

Para el ejemplo que estaremos desarrollando usaremos FileStore. ⭐ Agrega el siguiente NuGet Package: MonkeyCache.FileStore

La imagen tiene un atributo ALT vacío; su nombre de archivo es Screen-Shot-2020-09-04-at-5.00.54-PM-1024x85.png

⚠  Importante: En este caso ya tengo mi ejemplo previamente preparado en el cual consumo un servicio web  con Refit. Si necesitas más información sobre cómo hacerlo puedes ver ingresar aqui.


Primer paso:  Configurando nuestra aplicación

Para comenzar, es necesario configurar un ApplicationId para nuestra aplicación, una vez configurado se crea una carpeta específicamente para tu aplicación en el disco. (En este caso lo agregaré en el Constructor de mi ViewModel).


Segundo paso: Obteniendo los datos de nuestro servicio web y guardandolos en caché

Para mostrar los datos en la caché primero es necesario tenerlos 🤷‍♀️, por esta razón en este paso veremos el consumo de la API y luego guardaremos estos datos en la caché para posteriormente mostrarlos cuando nuestra App esté Offline.

Crea un método asincrono como lo puedes ver a continuación:

Dentro de él, establezcamos la conexión a la API que estaremos usando:

⭐ En el bloque de código que se muestra arriba agregué un comentario como el siguiente: “Add here the code that is begin explained in the next section ” justo ahí agreguemos la línea de código que nos permitirá guardar los datos que estarán disponibles para cuando no tengamos Internet en nuestro dispositivo.

Haciendo un resumen de lo que hicimos aquí. El método Add recibe tres parámetros:

➖ Key:          Es la URL de nuestro servicio web.

➖ Data:        Es el conjunto de información que devuelve nuestro servicio web y al que en este caso alimenta el ObservableCollection.

➖ ExpireIn: Es el tiempo que deseas que duren los datos en caché.

¡Listo! ¡En este paso ya tenemos nuestros datos guardados en Cache! ¡Veamos ahora cómo mostrarlo una vez que nuestro usuario se haya quedado sin Internet!🤓


Tercer paso: Una vez sin conexión… ¿Cómo puedo mostrar los datos?🧐

En el segundo bloque de código agregado en el paso 2, puedes ver un comentario como el siguiente: “Add here the code that is begin explained in the next step”. En este espacio es donde trabajaremos el paso número 3.

Lo primero que debemos hacer es confirmar dos factores importantes:

➖ Confirma si el dispositivo tiene o no una conexión disponible: Para hacerlo usaré Xamarin Essentials, puedes leer más información sobre conectividad aqui.

Connectivity.NetworkAccess != NetworkAccess.Internet

➖ Confirma los datos guardados en caché  no estan caducados: Una vez realizado el paso anterior, es importante que confirmemos si el tiempo de caducidad de nuestros datos aún no ha finalizado.

Barrel.Current.IsExpired(key: BaseURL)

Aquí implementamos ambos:

Ahora, obtengamos nuestros datos en caché

Dentro del bloque de código anterior agreguemos lo siguiente:

⚠ Como puedes ver usé Barrel.Current.Get<IEnumerable<Fuel>>(key: BaseURL) para pasar en mi ObservableCollection. Nos permitirá recuperar nuestros datos almacenados en caché.

Finalmente, solo para mantener informados a nuestros usuarios, utilicé un PopUp para mostrar el estado de la conexión. Puede leer más información sobre PopUp aquí. ‍ Aquí puedes usar lo que te resulte más cómodo, como los ACR user Dialogs o simplemente jugar con el color de la interfaz de usuario con la conexión inactiva. 🤷‍♀️ (Claro, tomando en cuenta los principios de UX)


Cuarto paso: Trabajando con el XAML

Voilà !!!! 🎊 ¡Nuestros datos ya están almacenados en caché! 🤓


📄 ¿Quieres practicar lo que has aprendido? ¡Hagamos una pequeña prueba! 😎

Created by reyes.leomaris

1 / 7

¿Qué es Monkey Cache?

2 / 7

¿Cómo puedo saber si mis datos en caché ya caducaron?

3 / 7

¿Cómo puedo recuperar mis datos en caché?

4 / 7

Todos los datos de Monkey Cache se almacenan y recuperan en ...

5 / 7

¿Cómo puedes guardar datos en caché?

6 / 7

¿Cómo puedes establecer la configuración inicial de tu aplicación?

7 / 7

Una de las siguientes opciones no es un proveedor de caché de Monkey ...

Your score is

The average score is 66%

0%


Artículo en inglés: https://askxammy.com/learning-to-use-data-caching-in-xamarin-forms/

Para ver la estructura completa del código puedes ingresar a mi repositorio de Github ?

Referencias: https://github.com/jamesmontemagno/monkey-cache

Tagged , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *