El desarrollo de soluciones web desde siempre se ha enfrentado a diversos desafíos de implementación pero la llegada de HTML5 dió una frescura a estos diversos ambientes como es el almacenamiento desconectado.

El nivel de interacción de las soluciones Web actuales requiere sin lugar a dudas de estas características de almacenamiento desconectado. La idea es poder implementar mecanismos semi-conectados o desconectados de una forma mucho más flexible.

En este artículo vamos a abordar el tema de IndexedDB, donde resolveremos una simple implementación paso a paso de un administrador de tareas que independiente de la conexión sigue funcionando.

Para realizar la solución propuesta tendremos que pensar en abrir el repositorio de datos y generar los objetos de persistencia, luego establecer el mecanismo para agregar y visualizar los datos, finalmente establecer la estrategia de eliminación de los objetos.

Construyendo la solución

Para ejemplificar de la mejor manera posible vamos a implementar un caso concreto de implementación en donde pondremos en práctica la tecnología de IndexedDB para el manejo del almacenamiento desconectado.

Diseño de la interfaz de usuario

En esta sección haremos un diseño a muy alto nivel de lo que queremos lograr para el usuario final.
Fig. 1 - Diseño de alto nivel de la interfaz de usuario.
Este diseño será el representado en nuestro HTML genérico para generar la solución propuesta.
Abrir el modelo de datos y creando los objetos de persistencia

Completo el diseño de alto nivel de la solución, vamos a generar los scripts necesarios para interactuar con el modelo IndexedDB para abrir el repositorio de datos y dejar establecido el mecanismo para generar los objetos, que en este ejemplo serán Tareas.

html5redtask.indexedDB.open = function() {
var request = indexedDB.open("Redtask","Nuestras tareas en rojo como el día laboral");
//Si la operación para abrir es correcta.
request.onsuccess = function(e) {
var v = "1.99";
html5redtask.indexedDB.db = e.target.result;
var db = html5redtask.indexedDB.db;
if (v!= db.version) {
            var setVrequest = db.setVersion(v);
            setVrequest.onerror = html5redtask.indexedDB.onerror;    
            setVrequest.onsuccess = function(e) 
              {
                  if(db.objectStoreNames.contains("task")) 
                  {
                    db.deleteObjectStore("task");
                }
              var store = db.createObjectStore("task",
                {keyPath: "timeStamp"});
             e.target.transaction.oncomplete = function() {
                 html5redtask.indexedDB.getTaskItems();
                 };
             };
          }
          else {
           request.transaction.oncomplete = function() {
            html5redtask.indexedDB.getTaskItems();
          };
          }
        };
        request.onerror = html5redtask.indexedDB.onerror;
      }
Código 1 - Escenario de apertura de los datos y mecanismo de creación de objetos. 

Tengan en cuenta que utilizamos otro método html5redtask.indexedDB.getTaskItems(); como muestra el Código 1 para ir al repositorio actual y verificar si existen elementos en el inicio de la operación de la solución.

Agregando datos al contenedor y visualizando resultados

Al recibir el estímulo de botón de agregar tarea debemos generar el mecanismo de generación de un nuevo objeto Tarea. Esta función se muestra en el Código 2. Esta función recibe un parámetros “todoText” que utiliza para establecer en "text": todoText,. Luego se construye la solicitud y se impacta en el repositorio mediante store.put(data);

// Agregar una tarea
      html5redtask.indexedDB.addTask = function(todoText) {
        var db = html5redtask.indexedDB.db;
        var trans = db.transaction(["task"], "readwrite");
        var store = trans.objectStore("task");
      
        var data = {
          "text": todoText,
          "timeStamp": new Date().getTime()
        };
      
        var request = store.put(data);
      
        //Si todo salió bien
        request.onsuccess = function(e) {
          html5redtask.indexedDB.getTaskItems();
        };      
        //Si ocurrieron errores
        request.onerror = function(e) {
          console.log("Error: ", e);
        };
      };
Código 2 - Escenario insertando objetos

Eliminando elementos del repositorio

También debemos planificar el mecanismo de eliminación de los objetos del repositorio, para esta actividad la fucnión deleteTask recibe como parámetros el id de la tarea que se dese eliminar y se procede con las mismas simples actividades genéricas de minipulación del repositorio de datos, manejo de la transacción y el objectstore para finalmente impactar la operación con store.delete(id);

 //Para Borrar una tarea 
      html5redtask.indexedDB.deleteTask = function(id) {
        var db = html5redtask.indexedDB.db;
        var trans = db.transaction(["task"], "readwrite");
        var store = trans.objectStore("task");
      
        var request = store.delete(id);
      
        //La operación de borrado es correcta
        request.onsuccess = function(e) {
          html5redtask.indexedDB.getTaskItems();
        };
      
        //La operación de borrado o eliminación no es correcta
        request.onerror = function(e) {
          console.log("Error: ", e);
        };
Código 3 - Escenario de eliminación de objetos

Luego de la eliminación se hace una llamada a la visualización genérica de  html5redtask.indexedDB.getTaskItems();  como muestra el Código 3 para recargar y actualizar la interfaz del usuario final.

Esta tecnología muestra una simpleza y flexibilidad muy interesante que permite iniciar el camino en donde las aplicaciones Web se transforman en aplicaciones muy amigables para los escenarios de persistencia.

Nicolás Bortolotti   Perfil | Twitter | Blog

Nicolás es director de relaciones para desarrolladores en latinoamérica región sur para Google. El ha desarrollado comunidades académicas y de investigación en varios países de Latinoamérica sobre la plataforma de desarrollo web y mobile de Google. Además Nicolas es profesor universitario, donde trabaja fuertemente en arquitecturas de software, ambientes emergentes e innovación en modelos de ingeniería de software


Hemos abordado el tema en detalle en nuestra sesión semanal de Developers Live para desarrolladores en español. La Web del mañana HTML5, persistencia fuera de línea.

Nivel: Intemedio
Les dejo el video de implementación con la demostración paso a paso:

Referencias