Ingeniería Systems: Implementando IndexedDB con HTML, CSS y JavaScript

Regresar al índice

¡Suficiente con la teoría! Es momento de crear nuestra primera base de datos y aplicar algunos de los métodos ya mencionados en este capítulo. Vamos a simular una aplicación para almacenar información sobre películas. Puede agregar a la base los datos que usted desee, pero para referencia, de aquí en adelante vamos a mencionar los siguientes:

id: tt0068646 nombre: El Padrino fecha: 1972
id: tt0086567 nombre: Juegos de Guerra fecha: 1983
id: tt0111161 nombre: Cadena Perpetua fecha: 1994
id: tt1285016 nombre: La Red Social fecha: 2010

IMPORTANTE: Los nombres de las propiedades (id, nombre y fecha) son los que vamos a utilizar para nuestros ejemplos en el resto del capítulo. La información fue recolectada del sitio web www.imdb.com, pero usted puede utilizar su propia lista o información al azar para probar los códigos.

Plantilla

Como siempre, necesitamos un documento HTML y algunos estilos CSS para crear las cajas en pantalla que contendrán el formulario apropiado y la información retornada. El formulario nos permitirá insertar nuevas películas dentro de la base de datos solicitándonos una clave, el título y el año en el que la película fue realizada.

Código 11-1. Plantilla para IndexedDB API.

<!DOCTYPE html>
<html lang="es">
<head>
<title>IndexedDB API</title>
<link rel="stylesheet" href="indexed.css">
<script src="indexed.js"></script>
</head>
<body>
<section id="cajaformulario">
<form name="formulario">
<p>Clave:<br><input type="text" name="clave" id="clave"></p>
<p>Título:<br><input type="text" name="texto" id="texto"></p>
<p>Año:<br><input type="text" name="fecha" id="fecha"></p><
<p><input type="button" name="grabar" id="grabar"
value="Grabar"></p>
</form>
</section>
<section id="cajadatos">
No hay información disponible
</section>
</body>
</html>

Los estilos CSS definen las cajas para el formulario y cómo mostrar la información en pantalla:

Código 11-2. Estilos para las cajas.

#cajaformulario{
float: left;
padding: 20px;
border: 1px solid #999999;
}
#cajadatos{
float: left;
width: 400px;
margin-left: 20px;
padding: 20px;
border: 1px solid #999999;
}
#clave, #texto{
width: 200px;
}
#cajadatos > div{
padding: 5px;
border-bottom: 1px solid #999999;
}

Hágalo usted mismo: Necesitará un archivo HTML para la plantilla del Código 11-1, un archivo CSS llamado indexed.css para los estilos del Código 1-2 y un archivo Javascript llamado indexed.js para introducir todos los códigos estudiados a continuación.

Abriendo la base de datos

Lo primero que debemos hacer en el código Javascript es abrir la base de datos. El atributo indexedDB y el método open() abren la base con el nombre declarado o crean una nueva si no existe:

Código 11-3. Abriendo la base de datos.

function iniciar(){
cajadatos=document.getElementById('cajadatos');
var boton=document.getElementById('grabar');
boton.addEventListener('click', agregarobjeto, false);
if('webkitIndexedDB' in window){
window.indexedDB=window.webkitIndexedDB;
window.IDBTransaction=window.webkitIDBTransaction;
window.IDBKeyRange=window.webkitIDBKeyRange;
window.IDBCursor=window.webkitIDBCursor;
}else if('mozIndexedDB' in window){
window.indexedDB=window.mozIndexedDB;
}
var solicitud=indexedDB.open('mibase');
solicitud.addEventListener('error', errores, false);
solicitud.addEventListener('success', crear, false);
}

La función iniciar() del Código 11-3 prepara los elementos de la plantilla y abre la base de datos. La instrucción indexedDB.open() intenta abrir la base de datos con el nombre mibase y retorna el objeto solicitud con el resultado de la operación. Los eventos error o success son disparados sobre este objeto en caso de error o éxito, respectivamente.

IMPORTANTE: Al momento de escribir estas líneas la API se encuentra en estado experimental. Algunos atributos, incluyendo indexedDB, necesitan el prefijo del navegador para trabajar apropiadamente. Antes de abrir la base de datos en la función iniciar() detectamos la existencia de webkitIndexedDB o mozIndexedDB y preparamos los atributos para cada uno de estos navegadores específicos (Google Chrome o Firefox). Luego de que este período experimental termine podremos eliminar el condicional if al comienzo del Código 11-3 y utilizar los métodos reales.

Los eventos son una parte importante de esta API. IndexedDB es una API síncrona y asíncrona. La parte síncrona está siendo desarrollada en estos momentos y está destinada a trabajar con la API Web Workers. En cambio, la parte asíncrona está destinada a un uso web normal y ya se encuentra disponible. Un sistema asíncrono realiza tareas detrás de escena y retorna los resultados posteriormente. Con este propósito, esta API dispara diferentes eventos en cada operación. Cada acción sobre la base de datos y su contenido es procesada detrás de escena (mientras el sistema ejecuta otros códigos) y los eventos correspondientes son disparados luego para informar los resultados obtenidos.

Luego de que la API procesa la solicitud para la base de datos, un evento error o success es disparado de acuerdo al resultado y una de las funciones errores() o crear() es ejecutada para controlar los errores o continuar con la definición de la base de datos, respectivamente.

Versión de la base de datos

Antes de comenzar a trabajar en el contenido de la base de datos, debemos seguir algunos pasos para completar su definición. Como dijimos anteriormente, las bases de datos IndexedDB usan versiones. Cuando la base de datos es creada, un valor null (nulo) es asignado a su versión. Por lo tanto, controlando este valor podremos saber si la base de datos es nueva o no:

Código 11-4. Declarando la versión y respondiendo a eventos.

function errores(e){
alert('Error: '+e.code+' '+e.message);
}
function crear(e){
bd=e.result || e.target.result;
if(bd.version==''){
var solicitud=bd.setVersion('1.0');
solicitud.addEventListener('error', errores, false);
solicitud.addEventListener('success', crearbd, false);
}
}

Nuestra función errores() es simple (no necesitamos procesar errores para esta aplicación de muestra). En este ejemplo solo usamos los atributos code y message de la interface IDBErrorEvent para generar un mensaje de alerta en caso de error. La función crear(), por otro lado, sigue los pasos correctos para detectar la versión de la base de datos y proveer un valor de versión en caso de que sea la primera vez que la aplicación es ejecutada en este ordenador. La función asigna el objeto result creado por el evento a la variable bd y usa esta variable para representar la base de datos (esta variable se definió como global para referenciar la base de datos en el resto del código).

IMPORTANTE: En este momento algunos navegadores envían el objeto result a través del evento y otros a través del elemento que disparó el evento. Para seleccionar la referencia correcta de forma automática, usamos la lógica e.result || e.target.result. Seguramente usted deberá usar solo uno de estos valores en sus aplicaciones cuando las implementaciones estén listas.

La interface IDBDatabase provee la propiedad version para informar el valor de la versión actual y también provee el método setVersion() para declarar una nueva versión. Lo que hacemos en la función crear() en el Código 11-4 es detectar el valor actual de la versión de la base de datos y declarar uno nuevo si es necesario (en caso de que el valor sea una cadena de texto vacía). Si la base de datos ya existe, el valor de la propiedad version será diferente de null (nulo) y no tendremos que configurar nada, pero si esta es la primera vez que el usuario utiliza esta aplicación entonces deberemos declarar un nuevo valor para la versión y configurar la base de datos.

El método setVersion() recibe una cadena de texto que puede ser un número o cualquier valor que se nos ocurra, solo debemos estar seguros de que siempre usamos el mismo valor en cada código para abrir la versión correcta de la base de datos. Este método es, así como cualquier otro procedimiento en esta API, asíncrono. La versión será establecida detrás de escena y el resultado será informado al código principal a través de eventos. Si ocurre un error en el proceso, llamamos a la función errores() como lo hicimos anteriormente, pero si la versión es establecida correctamente entonces la función crearbd() es llamada para declarar los Almacenes de Objetos e índices que usaremos en esta nueva versión.

Almacenes de Objetos e índices

A este punto debemos comenzar a pensar sobre la clase de objetos que vamos a almacenar y cómo vamos a leer más adelante la información contenida en los Almacenes de Objetos. Si hacemos algo mal o queremos agregar algo en la configuración de nuestra base de datos en el futuro deberemos declarar una nueva versión y migrar los datos desde la anterior, por lo que es importante tratar de organizar todo lo mejor posible desde el principio. Esto es debido a que la creación de Almacenes de Objetos e índices solo es posible durante una transacción setVersion.

Código 11-5. Declarando Almacenes de Objetos e índices.

function crearbd(){
var almacen=bd.createObjectStore('peliculas',{keyPath:'id'});
almacen.createIndex('BuscarFecha', 'fecha',{unique: false});
}

Para nuestro ejemplo solo necesitamos un Almacén de Objetos (para almacenar películas) y dos índices. El primer índice, id, es declarado como el atributo clave para el método createObjectStore() cuando el Almacén de Objetos es creado. El segundo índice es asignado al Almacén de Objetos usando el método createIndex(). Este índice fue identificado con el nombre BuscarFecha y declarado para la propiedad fecha (esta propiedad es ahora un índice). Más adelante vamos a usar este índice para ordenar películas por año.

Agregando Objetos

Por el momento tenemos una base de datos con el nombre mibase que tendrá el valor de versión 1.0 y contendrá un Almacén de Objetos llamado peliculas con dos índices: id y fecha. Con esto ya podemos comenzar a agregar objetos en el almacén:

Código 11-6. Agregando objetos.

function agregarobjeto(){
var clave=document.getElementById('clave').value;
var titulo=document.getElementById('texto').value;
var fecha=document.getElementById('fecha').value;
var transaccion=bd.transaction(['peliculas'],
IDBTransaction.READ_WRITE);
var almacen=transaccion.objectStore('peliculas');
var solicitud=almacen.add({id: clave, nombre: titulo, fecha:
fecha});
solicitud.addEventListener('success', function(){
mostrar(clave) }, false);
document.getElementById('clave').value='';
document.getElementById('texto').value='';
document.getElementById('fecha').value='';
}

Al comienzo de la función iniciar() habíamos agregado al botón del formulario una escucha para el evento click. Esta escucha ejecuta la función agregarobjeto() cuando el evento es disparado (el botón es presionado). Esta función toma los valores de los campos del formulario (clave, texto y fecha) y luego genera una transacción para almacenar un nuevo objeto usando esta información.

Para comenzar la transacción, debemos usar el método transaction(), especificar el Almacén de Objetos involucrado en la transacción y el tipo de transacción a realizar. En este caso el almacén es peliculas y el tipo es declarado como READ_WRITE.

El próximo paso es seleccionar el Almacén de Objetos que vamos a usar. Debido a que la transacción puede ser originada para varios Almacenes de Objetos, tenemos que declarar cuál corresponde con la siguiente operación. Usando el método objectStore() abrimos el Almacén de Objetos y lo asignamos a la transacción con la siguiente línea: transaccion.objectStore('peliculas').

Es momento de agregar el objeto al Almacén de Objetos. En este ejemplo usamos el método add() debido a que queremos crear un nuevo objeto, pero podríamos haber utilizado el método put() en su lugar si nuestra intensión hubiese sido modificar un viejo objeto. El método add() genera el objeto usando las propiedades id, nombre y fecha y las variables clave, titulo y fecha.

Finalmente, escuchamos al evento disparado por esta solicitud y ejecutamos la función mostrar() en caso de éxito. Existe también un evento error, por supuesto, pero como la respuesta a los errores depende de lo que usted quiera para su aplicación, no consideramos esa posibilidad en este ejemplo.

Leyendo Objetos

Si el objeto es correctamente almacenado, el evento success es disparado y la función mostrar() es ejecutada. En el Código 11-6, esta función fue llamada dentro de una función anónima para poder pasar la variable clave. Ahora vamos a tomar este valor para leer el objeto previamente almacenado:

Código 11-7. Leyendo y mostrando el objeto almacenado.

function mostrar(clave){
var transaccion=bd.transaction(['peliculas']);
var almacen=transaccion.objectStore('peliculas');
var solicitud=almacen.get(clave);
solicitud.addEventListener('success', mostrarlista, false);
}
function mostrarlista(e){
var resultado=e.result || e.target.result;
cajadatos.innerHTML='<div>'+resultado.id+' - '+resultado.nombre+'
- '+resultado.fecha+'</div>';
}

El Código 11-7 genera una transacción READ_ONLY y usa el método get() para leer el objeto con la clave recibida. No tenemos que declarar el tipo de transacción porque READ_ONLY es establecido por defecto.

El método get() retorna el objeto almacenado con la propiedad id=clave. Si, por ejemplo, insertamos la película El Padrino de nuestra lista, la variable clave tendrá el valor “tt0068646”. Este valor es recibido por la función mostrar() y usado por el método get() para leer la película El Padrino. Como puede ver, este código es solo ilustrativo ya que solo puede retornar la misma película que acabamos de almacenar.

Como cada operación es asíncrona, necesitamos dos funciones para mostrar la información. La función mostrar() genera la transacción y lee el objeto, y la función mostrarlista() muestra los valores de las propiedades del objeto en pantalla. Otra vez, solo estamos escuchando al evento success, pero un evento error podría ser disparado en caso de que el objeto no pueda ser leído por alguna circunstancia en particular.

La función mostrarlista() recibe un objeto. Para acceder a sus propiedades solo tenemos que usar la variable representando al objeto y el nombre de la propiedad, como en resultado.id (la variable resultado representa el objeto e id es una de sus propiedades).

Finalizando el código

Del mismo modo que cualquier código previo, el ejemplo debe ser finalizado agregando una escucha para el evento load que ejecute la función iniciar() tan pronto como la aplicación es cargada en la ventana del navegador:

Código 11-8. Iniciando la aplicación.

window.addEventListener('load', iniciar, false);

Hágalo usted mismo: Es momento de probar la aplicación en el navegador. Copie todos los códigos Javascript desde el Código 11-3 al Código 11-8 en el archivo indexed.js y abra el documento HTML del Código 11-1. Usando el formulario en la pantalla, inserte información acerca de las películas listadas al comienzo de este capítulo. Cada vez que una nueva película es insertada, la misma información es mostrada en la caja de la derecha.