programa-con-google: ¿La web del mañana? HTML5 y el almacenamiento desconectado

¿La web del mañana? HTML5 y el almacenamiento desconectado

Tuesday, September 18, 2012

IndexedDB

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 resultadosAl 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.