Client side Meteor. Parte 3


Esta es la tercera entrega de la serie “Client side Meteor” y con ella te enseñaré a persistir los Contactos que guardas en la caché del navegador, para que los datos permanezcan tras refrescar la página, simulando así una conexión al servidor y por ende una comunicación con la base de datos.

Introducción a GroundDB

GroundDB es una biblioteca que permite hacer exactamente lo que vinimos a hacer en esta entrada. Modifica tus colecciones de manera tal que, si no hay conexión con el servidor, almacena los datos en el navegador.

Es más, GroundDB va más allá, a parte de guardar los datos en el navegador cuando estás sin conexión, guarda también el estado de las transacciones, de manera tal que cuando la aplicación se conecte nuevamente, los datos se sincronizan de manera automática, o sea, los datos en la caché los almacena en la base de datos cuando detecta que el servidor está disponible.

Como la aplicación de guardar contactos no necesita un servidor, solo utilizaremos a GroundDB como forma de persistencia de datos en el navegador. Para utilizar esta excelente biblioteca solo tienes que instalarla y convertir tus ordinarias colecciones a GroundDB:

$ meteor add ground:db

/*
 * fichero colecciones.js
 * antes: Contactos = new Meteor.Collection('contacto');
/* 

Contactos = new Ground.Collection('contacto');

Listo! Solo tienes que cambiar la palabra Meteor por Ground. Esta es la inicialización por defecto, y estoy dotando a la colección con habilidades para resumir transacciones hacia el servidor cuando esté disponible, pero esta es una característica que en realidad no necesita esta aplicación, por lo que le diré a GroundDB que la colección Contactos no necesita ser sincronizada con el servidor:

Contactos = new Ground.Collection('contacto', { connection : null });

¿Funciona?

Inicializa la aplicación con el comando meteor y luego dirígete ha localhost:3000, guarda par de Contactos y refresca el navegador.

¡Boom goes the dynamite! Los datos persisten por arte de magia.

Datos guardados en la caché del navegador

Esta solución es super elegante porque te abstrae de las complicaciones de estar lidiando con la API de LocalStorage y muchas operaciones complicadas como parsear los datos a JSON y viceversa, etc.

¿Ya estamos offline?

Aún No. Aunque los datos persisten al refrescar el navegador ¿Qué pasaría si detuviésemos el proceso que se encarga de servir la aplicación en localhost:3000?

Ve a la consola donde ejecutaste el comando meteor y presiona Control + C, luego refresca el navegador ¿Qué sucedió? La aplicación no está disponible ¿Por qué?

Porque nos falta la pieza final del rompecabezas. Verás, hasta ahora lo único que logré fue persistir los datos que maneja la aplicación, pero no he implementado un mecanismo para que el navegador guarde en su caché los recursos que utiliza dicha aplicación, dígase la estructura, los ficheros CSS, en fin, lo necesario para que la aplicación pueda ser visualizada solo con el navegador.

Introducción a AppCaché

¿Nunca has oído hablar de AppCache? Es la tecnología que permite cachear los recursos de tu aplicación para que pueda verse offline.

Si ya has interactuado con esta característica de HTML5, seguro conoces el fichero Manifiesto app.manifest, el cual debes llenar a mano especificando los recursos que quieres cuando estés desconectado.

En Meteor esto no existe, o sea, me refiero a pasar el trabajo de llenar ese fichero y decirle a la app que lo use. De eso se encarga un paquete de igual nombre: AppCache, el cual se instala de esta forma:

$ meteor add appcache

Y hasta aquí las clases. ¿Pensaste que era más difícil? Lamento decepcionarte. Abre el navegador en http://localhost:3000 y antes de refrescar la aplicación observa lo que sucede en la propia consola del navegador.

Se muestran los logs del paquete AppCache haciendo su magia. Ahora sí, ve a la consola del sistema y detiene el proceso que sirve la aplicación, sí, ese que invocaste con el comando meteor y vuelve al navegador con un flamante F5.

¡Boom goes the dynamite… again! La aplicación abre, está 100% funcional y no tenemos a Meteor sirviéndola .

Datos guardados en la caché del navegador

Conclusiones

Y ahí lo tienes, una aplicación totalmente funcional offline. Puedes ahora conectarte a tu PC por WiFi y abrir la aplicación desde un dispositivo móvil.

La aplicación será cacheada por tu navegador (en el móvil) y la podrás seguir utilizando cuando te desconectes de la red inalámbrica. De esta forma tienes una nueva app de contactos lista para utilizar en cualquier lugar.

Incluso si no quieres ver la app en tu móvil desde el navegador, la puedes convertir a una app nativa utilizando Córdova, pero, ¿No crees que antes debemos maquillarla un poco?

Come on… Ionic Framework!