Crear una aplicación web con Node.js, MongoDB, Mongoose, Express y EJS - Parte III

En esta tercera parte, daremos continuidad a lo visto en la parte 1 (enlace) y en la parte 2 (enlace), donde aprendimos a crear un CRUD desde cero con un sistema de registro utilizando ExpressJS y MongoDB. En este artículo, profundizaremos un poco más en el concepto de paginación de resultados, haciendo algunas modificaciones tanto en el frontend como en el backend para mejorar la experiencia del usuario. Esto es especialmente útil cuando tu aplicación maneja una gran cantidad de datos, como 500 registros, evitando que todos se muestren de una vez en la pantalla, lo que resultaría incómodo y dificultaría la navegación en una sola vista.

Si no has leído los artículos anteriores, te recomiendo hacerlo para una mejor comprensión del contenido. Pronto compartiré el enlace del repositorio donde podremos ver el código.

Paginación con Node.js y MongoDB

Hoy utilizaremos dos funciones principales. La primera es la función skip que le indicará a MongoDB que debe ignorar un número determinado de resultados en una consulta al devolver los datos desde el servidor. La segunda es la función limit, que instruirá a MongoDB para que devuelva solo una cantidad limitada de documentos, sin importar si la consulta original regresaría más elementos. Estas dos funciones deben aplicarse después de un find.

La lógica que seguiremos para implementar la paginación es la siguiente: primero definiremos un tamaño para la página, por ejemplo, 5 elementos. Luego, calcularemos el total de elementos solicitados, digamos 17 elementos, y dividiremos el total por el tamaño de la página, redondeando siempre hacia arriba. Siguiendo este ejemplo, obtendríamos la cantidad de páginas. Al final, tendríamos 2 páginas con 5 elementos cada una y una tercera página con 2 elementos.

El tamaño "correcto o ideal" de la página deberá ser evaluado por ti, considerando el rendimiento y la mejor experiencia para el usuario. Ten en cuenta que muchas páginas con pocos elementos serán fáciles de devolver para la base de datos, pero puede resultar incómodo para el usuario tener que navegar entre tantas páginas. Por otro lado, si hay pocas páginas con muchos elementos, la experiencia tampoco será agradable. Por lo tanto, encuentra un equilibrio, y ahí es donde está la clave.

Como nuestro ejemplo es de pequeña escala, optaremos por 5 elementos por página.

Paginación de resultados en Node.js

Nuestro primer paso será modificar una función que ya creamos en el módulo db.js en los tutoriales anteriores, para que ahora retorne los resultados paginados.

Como se puede ver arriba, comenzamos definiendo una constante con el tamaño de las páginas, que será 5. Luego, agregamos un parámetro dentro de nuestra función findAll que recibirá la página a mostrar. Con este parámetro, calculamos el skip que indicará cuántos elementos deben ignorarse en la consulta. Si es la primera página, se mostrarán los primeros 10 elementos; si es la segunda, el skip será de 10, y se mostrarán los elementos del 11 al 20, y así sucesivamente, variando según el tamaño de tu aplicación.

El siguiente paso será ir a la carpeta routes, al módulo index.js, donde modificaremos nuestra ruta GET en dos puntos diferentes.

NOTA: Asegúrate de que la ruta mencionada esté al final de tu archivo index.js.

Esta observación es importante porque las rutas en la aplicación se procesan de forma secuencial, de la primera a la última. Colocarla al final evitará interferencias en el procesamiento de la aplicación.

¡Listo! Ahora reinicia tu aplicación y prueba si todo funciona correctamente accediendo a la siguiente URL:

Verifica si el resultado es el esperado. Ten en cuenta que agregué varios registros para asegurar que existiera una segunda página.

A continuación, haremos que el usuario no necesite cambiar los parámetros en la URL para acceder a la lista de documentos.

Paginación con EJS y ExpressJS

Para mostrar al usuario el número de páginas disponibles y permitirle navegar entre ellas, necesitaremos desarrollar una lógica que construya el HTML para la paginación en el frontend, y una segunda lógica para obtener la información desde el backend.

Comenzaremos con el frontend. El archivo que vamos a modificar es index.ejs, que es nuestra vista encargada de mostrar los registros, para que pueda renderizar el total de los elementos y el HTML que contiene la paginación, permitiendo que el usuario navegue libremente entre las páginas.

El siguiente código deberá ser agregado al final del archivo index.ejs, justo antes del botón para registrar un nuevo cliente.

Si ejecutas el código anterior y no funciona, no te preocupes, ya que aún no hemos desarrollado la parte del backend y, por lo tanto, no funcionará todavía.

Ahora pasemos a la parte del backend. Nuestro primer paso será abrir el archivo db.js y añadir una nueva función. Esta función, countAll, será responsable de devolver la cantidad total de documentos en nuestra colección de clientes.

Observa que he modificado el module.exports para incluir la nueva función y también he agregado nuestra constante que define el tamaño de la página.

A continuación, iremos al archivo que se encuentra en la carpeta routes/index.js y haremos algunas modificaciones en la última ruta que creamos anteriormente. Básicamente, construiremos el modelo con la información que necesitaremos recibir desde el frontend.

Como puedes ver en las modificaciones anteriores, estamos utilizando la función countAll para obtener el número total de clientes, y como es una función asíncrona, hemos usado await, para que espere hasta obtener la respuesta.

Finalmente, tenemos la constante que nos devolverá el número de páginas, que es el resultado de dividir el total de documentos entre el tamaño de la página, como lo hicimos anteriormente en nuestro archivo db.js.

Si todo está correcto, nuestras modificaciones ya deberían estar funcionando. Reinicia la aplicación y verifica si el resultado es el esperado:

Al navegar entre las páginas, verás que, a medida que se agregan registros, todo funciona correctamente y, si abres tu MongoDB Compass, podrás ver todos los registros añadidos. Siempre recuerda revisar esto después de realizar una solicitud para asegurarte de que todo está funcionando y que tus rutas y endpoints se están ejecutando correctamente.

El último paso en este artículo será mejorar un poco la visualización de nuestra aplicación, solo para que la experiencia visual del usuario sea más agradable.

Comenzaremos de nuevo con el frontend. Nuestra intención es desarrollar una lógica para que la página en la que el usuario está navegando deje de ser un enlace cuando esté activa, es decir, que el número de la página no se vea como un enlace "azul". Si estás en la página 2, por ejemplo, el número 2 no tendrá la apariencia de un enlace.

Para lograr esto, haremos la siguiente modificación en nuestro código:

Lo que hicimos fue agregar un if que verifica si la variable que se está iterando es diferente de la página actual. Si la variable es diferente, muestra un enlace; si no, simplemente muestra el número.

Nuestro último paso será realizar una pequeña modificación en la última ruta que construimos anteriormente, pero que hará una gran diferencia. Ve al archivo index.js y haz el siguiente cambio:

Como puedes ver, la modificación es mínima; solo añadimos una nueva propiedad pag al JSON. Ahora, cuando pruebes la aplicación, debería verse así:

Observa cómo cambia el resultado: si miras la URL, verás algo como: localhost:3000/2 y el número 2 solo aparece como texto, sin el aspecto de un enlace.

En este artículo, hemos aprendido cómo paginar los resultados de consultas a una base de datos que creamos en artículos anteriores.

Nuestro próximo paso será modularizar mejor estas páginas, utilizando un concepto importante en la construcción de interfaces: la modularización de páginas mediante el uso de vistas parciales en EJS. Modelaremos utilizando la motor de vistas de ExpressJS, donde crearemos los archivos top.ejs y bottom.ejs que serán el encabezado y pie de página de la aplicación. También intentaremos mejorar el estilo visual utilizando el framework de CSS Bootstrap. Si nunca has oído hablar de Bootstrap, te recomiendo investigarlo para entender mejor de qué se trata, ya que mostraré algo básico y podrás estilizarlo como prefieras.

Y por último, para los que disfrutan del lenguaje Java, estoy desarrollando una aplicación en Java con los mismos principios de estos tutoriales. El objetivo final será desarrollar una aplicación de tienda virtual, y pronto traeré nuevos artículos cubriendo desde el CRUD hasta el despliegue de la aplicación, con todo funcionando, además del enlace al repositorio para que podamos seguir todo el proceso.