Introducción

PouchDB es una base de datos que se sincroniza. Permite trabajar offline y online, con una sincronización de la cual no tenemos que encargarnos nosotros. Esto viene perfecto para desarrollar sistemas que trabajan tanto con y sin internet.

Es importante notar que si no queremos la sincronización, no pasa nada. Por lo que no estamos obligados a sincronizar ningún sólo dato.

Además, la base de datos se sincroniza entre todos los dispositivos. Esto es algo muy genial, aunque claro, tampoco es tan poderosa como MySQL, MS SQL Server, etcétera.

Finalmente cabe mencionar que todo se guarda en el navegador del usuario, evitando así tener que programar el lado del servidor.

En este tutorial vamos a estar trabajando para crear una agenda, de esas en donde guardas el teléfono, dirección y nombre de tus conocidos.

Ejemplo práctico: app de agenda

Si quieres descargar el código completo puedes ir a GitHub: https://github.com/parzibyte/agenda_pouchdb

También existe una demo en esa misma página: https://parzibyte.github.io/agenda_pouchdb/

Finalmente aquí dejo un GIF de cómo se ve al usarla:

Preparando scripts

Simplemente tenemos que incluir la librería de PouchDB en nuestro archivo html y listo. En este caso no utilizaremos ningún framework. Así que para descargar la última versión (independientemente de cuándo se consulte este tutorial) podemos ir a https://pouchdb.com/download.html y copiar el quick start.

En mi caso, incluiré el archivo http://cdn.jsdelivr.net/npm/pouchdb@6.4.1/dist/pouchdb.min.js

Una vez incluido el archivo, vamos a ver si PouchDB está definido para comenzar a trabajar. Así que ejecutaremos este código:

Si al abrirlo nos dice “Correcto” entonces todo está bien. Si no, por favor revisa que hayas incluido bien el script y que tengas una conexión a internet, o el archivo descargado.

Vamos a ver todas las operaciones como lo son crear, leer, actualizar y eliminar datos. Además de ver cómo los índices y los prefijos nos van a ayudar.

Lo que no veremos será la sincronización y los selectores (si vienes de una base de datos relacional, los selectores son el equivalente a la cláusula WHERE) ya que se alargaría mucho este post.

Instanciar base de datos

En PouchDB sólo tenemos una base de datos que alberga documentos. No existen las tablas. Así que todo se guarda en un mismo lugar.

Una vez dicho esto, para usar PouchDB simplemente tenemos que llamar al constructor con el nombre de la base de datos deseada. Si no existe, se creará y se devolverá la instancia en donde ya podremos guardar.

Insertar, create o agregar

La primera operación que tenemos que hacer para poder hacer todas las demás, porque si no existen datos, ¿qué cosas se eliminan o actualizan?

Vamos a comenzar creando el formulario por donde entrarán los datos. No pondré estilos, pues creo que hacen que el lector se confunda. Así que vamos a enfocarnos únicamente en el funcionamiento de la app.

Podemos ejecutar lo que llevamos hasta el momento, y se debe ver así:

Listar, o mostrar

Ya insertamos datos, pero para editar o eliminar hay que primero poder verlos para interactuar con ellos. Así como fue fácil insertar, será fácil recuperar los documentos.

Dejaré el código y lo explicamos abajo.

Comencemos viendo que al script le agregamos una nueva variable, la cual es el elemento que apunta al cuerpo de la tabla.

Creamos una función que obtiene los documentos de la base de datos, que más o menos funciona como lo dice la documentación oficial.

Recorremos las filas y a una variable le vamos añadiendo código HTML para la tabla. Una vez que el ciclo termina asignamos todo ese HTML al elemento declarado previamente. Y así de fácil es.

Finalmente cabe mencionar que añadimos la hoja de estilos para los bordes de las tabla, pero podemos no incluirlos si no queremos.

Veamos ahora cómo editar.

Editar

Una vez que ya hemos creado nuestros datos es hora de poder editarlos. Dejaré la operación de eliminación para más tarde, ya que, según yo, es la más fácil.

Por ahora hay que agregar un botón a la tabla para escucharlo más tarde y consultar el contacto.

Una vez que hayamos consultado el contacto, tenemos que llenar automáticamente los campos de texto. Es decir, vamos a reutilizarlos.

Y para guardar cambios al editar crearemos otro botón que está oculto y que se muestra sólo cuando hacemos click en editar en un campo de la tabla de contactos.

Analicemos las nuevas cosas del código. Para editar un documento usamos el método put de PouchDB. Pero para ello necesitamos el id y la revisión de dicho documento, los cuales almacenamos en una variable temporal global.

También estamos ocultando y mostrando botones, así como leyendo datos con los atributos data-*. Sigamos para ver ahora el último paso: eliminar.

Eliminar

Finalmente añadiremos el botón de eliminar. El proceso es el mismo que para editar, sólo que ahora la clase de los botones será btn-eliminar en lugar de btn-editar. De ahí simplemente obtenemos el contacto usando el id recuperado de los atributos data.

Mandamos una confirmación y en caso de que se acepte, se elimina completamente. Después refrescamos la tabla y limpiamos el formulario.

El código final queda así: