Códice | Entradas sobre «express»

Filtrado múltiple

JavGuerra — Fri, 15 Jul 2022 00:00:00 GMT

Etiquetas: #código, #javascript, #node.js, #express

En programación es habitual trabajar con datos de entrada. Un caso común son los campos (obligatorios o no) que recibimos de un formulario para realizar búsquedas en una base de datos y devolver datos al usuario, o para dar de alta nueva información… pero estos datos de entrada, según las circunstancias, pueden variar. Para un mismo formulario, podemos recibir uno o varios campos, lo que complica la forma en que hacemos las búsquedas de información. En esta entrada veremos como simplificar el filtrado para hacer consultas a los datos.

Supuesto práctico

Tenemos una lista de productos almacenados en un arreglo o lista de objetos. Cada objeto tiene las propiedades nombre, tipo y precio, y deseamos hacer búsquedas sobre esta lista, devolviendo los objetos que cumplan con los datos recibidos desde un formulario. Los datos recibidos pueden ser todos ellos, es decir, valores para cada una de las tres propiedades, o sólo el dato de búsqueda de uno de ellos o dos de ellos (faltando un dato en este último caso). Veamos primeramente la estructura de datos:

let productos = [
    {
        "nombre": "LAVADORA SECAMAS",
        "tipo": "hogar",
        "precio": 700
    },
    {
        "nombre": "TELEVISOR TV",
        "tipo": "video",
        "precio": 1200
    },
    {
        "nombre": "ARMARIO RIO",
        "tipo": "hogar",
        "precio": 300
    }
];

Una búsqueda nombre: 'LAVADORA' me devolvería el primer objeto. Si busco por tipo: 'hogar' me devolverá el primer y el tercer objeto… Y si busco por tipo: 'video' y precio: menor que 1500 me devolverá el segundo objeto.

Comunmente…

Para hacer una búsqueda sobre esta lista, tendría que comprobar si he recibido un valor para cada uno de las propiedades de los objetos de la lista, y si es así, realizar el filtrado por el primer valor para obtener el primer resultado, pasar al siguiente valor si lo hubiese, para obtener el siguiente resultado filtrado, y así con tantos valores como haya recibido del formulario. El código sería algo como esto:

let resultados = productos;

if (nombre || tipo || precio) {
    if (nombre) resultados = resultados.filter(producto => producto.nombre.includes(nombre));
    if (tipo)   resultados = resultados.filter(producto => producto.tipo.includes(tipo));
    if (precio) resultados = resultados.filter(producto => producto.precio < precio);
} else {
    resultados = [];
}

console.log(resultados);

Este encadenado de filtrados me obliga a realizar tres filtrados e ir guardando el resultado para el siguiente filtro, si la entrada de formulario, por tanto la variable que guarda su valor, existe.

Como se aprecia en el código, primeramente copio el contenido de productos a resultados, para ir filtrando el resultado. Esto lo hago porque no sé qué valores recibiré, por lo tanto no sabré donde empezará productos.filter, si en el primer, segundo o tercer if.

Seguidamente compruebo si tengo valores en las variables nombre, tipo y precio. Si alguna de ellas existe, realizo el filtrado sobre los datos, sino, devuelvo un arreglo o lista vacía. Así pues, si existe nombre, filtro por nombre, si existe tipo, filtro por tipo y si existe precio filtro por precio, consecutivamente.

Otra manera de hacerlo

Es posible hacer un sólo filtrado que incluya las tres condiciones. Para ello usaré el operador condicional ternario (?):

const resultados = (nombre || tipo || precio)
? productos.filter(producto =>
    (nombre ? producto.nombre.includes(nombre) : true) &&
    (tipo   ? producto.tipo.includes(tipo) : true) &&
    (precio ? producto.precio < precio : true))
: [];

La lista resultados tendrá el valor del filtro o una lista vacía según reciba o no reciba alguno de los valores para filtrar.

Dentro de filter incluimos ahora los tres criterios de filtrado de una vez, pero igualmente debemos comprobar si cada uno de las variables que recibimos tiene o no valores para filtrar, es decir, si el dato de entrada existe.

Si una variable tiene valor, osea, si hemos recibido sus datos del formulario, entonces se incluirá la condición de filtrado, sino se incluirá un true. Nos fijamos en una de las líneas:

    (nombre ? producto.nombre.includes(nombre) : true) &&

Si la variable nombre tiene datos, entonces se incluirá la comprobación producto.nombre.includes(nombre) en el filtrado, de otra forma se incluirá un true.

Como estamos filtrando por un total de hasta tres condiciones que tienen que ser verdaderas (&&), si alguna de ellas no se cumple, el filter pasará al siguiente elemento de la lista, y no devolverá este elemento.

Imaginemos que sólo hemos recibido el nombre del producto. ¿Qué pasa con las otras dos condiciones derivadas de tipo y precio?. Devolverán true, condicionando la respuesta de filtrado a lo que devuelva la condición de nombre. Por ello los true que no sean resultado de la condición de una o varias de las variables no tendrán ninguna influencia en el valor de la comprobación.

Si tenemos dos variables, la tercera será true, y la condición de filtrado funcionará sólo si las dos condiciones con valores de entrada son true si han pasado la comprobación asociada a esa variable.

Otra manera más

En programación no hay un único camino para hacer las cosas. Tras la lectura de esta entrada, Marcos, de un foro de Discord, me propuso una alternativa aún más simple. Vamos a ver cómo funciona:

const resultados = (nombre || tipo || precio)
? productos.filter(producto =>
      (!nombre || producto.nombre.includes(nombre)) &&
      (!tipo   || producto.tipo.includes(tipo)) &&
      (!precio || producto.precio < precio))
: [];

La lógica de fondo no deja de ser la misma, se basa en un booleano que nos dice si se va a tener en cuenta la condición o se va a incluir un true, pero esta refinada forma de hacerlo consiste en «jugar» con el valor inverso del contenido de una variable, de tal forma que si la variable existe, su valor será false (Ej. !nombre) debiendo aplicar entonces la condición de filtrado (||), y si no existe, el valor de la variable será true. Elegante.

Un poco más allá

La siguiente es una función basada en la codificación anterior y devuelve un objeto que incluye un código de respuesta y el listado de objetos resultante.

function respuesta(nombre = undefined, tipo = undefined, precio = undefined) {
    let codigo = (nombre || tipo || precio) ? 0 : 2;
    const resultados = (codigo == 0)
        ? productos.filter(producto =>
            (!nombre || producto.nombre.includes(nombre)) &&
            (!tipo   || producto.tipo.includes(tipo)) &&
            (!precio || producto.precio < precio))
        : [];
    if (codigo == 0) codigo = (resultados.length) ? 0 : 1;
    return { codigo, resultados };
}

La variable codigo va a contener tres posibles valores:

Valor	Significado
0	Datos encontrados.
1	No se han encontrado datos.
2	No se han recibido datos de entrada.

De tal forma que en:

    let codigo = (nombre || tipo || precio) ? 0 : 2;

se determina si se ha recibido alguna de las variables, asignándole el código correspondiente, y en la línea:

    if (codigo == 0) codigo = (resultados.length) ? 0 : 1;

se determina si se ha obtenido algún resultado tras la búsqueda, si el código era 0, es decir, si había datos de entrada.

por último en la línea:

    return { codigo, resultados };

Devolvemos el objeto con la información de lo sucedido y el resultado de la búsqueda.

La línea anterior es equivalente a:

    return { codigo: codigo, resultados: resultados };

Esta función puede ser útil para, por ejemplo, trabajar con rutas en Node.js/express:

router.get('/', (req, res) => {
    const { nombre, tipo, precio } = req.query;
    res.json( respuesta(nombre, tipo, precio) );
});

Conexión persistente a MongoDB en Node.js

JavGuerra — Sun, 24 Jul 2022 00:00:00 GMT

Etiquetas: #código, #javascript, #node.js, #express, #mongodb

Esta semana tocó aprender sobre MongoDB. Una de las cuestiones que me llamaron la atención en los ejercicios que realizamos era la necesidad de abrir y cerrar la conexión a la Base de Datos (en adelante «BBDD») en cada consulta, algo que supone una sobrecarga importante para el servidor, así que me puse a investigar la manera de hacer que la conexión a la BBDD permaneciese abierta y dando servicio a través de los distintos módulos de la aplicación. Esto es lo que descubrí, con ayuda de la comunidad.

Cambiando el chip

Pasar de manejar datos embebidos en módulos como en el caso de la publicación sobre filtrado múltiple a consultar una base de datos como MongoDB presenta retos importantes. el principal es que debo establecer la conexión al servicio y esperar una respuesta. Una consulta típica a MongoDB tendría esta forma:

if (process.env.NODE_ENV !== 'production') require('dotenv').config();
const mongoClient = require('mongodb').MongoClient;

const url = `${process.env.DB_HOST}:${process.env.DB_PORT}/`;
const db_name = process.env.DB_DATABASE;
const collection = "products";

(url, function(err, database) {
    if (err) throw err;
    const db = database.db(db_name);
    db.collection(collection).find().toArray(function(err, result){
        if (err) throw err;
        console.log(result);
        database.close();
    });
});

En la primera línea, en función de si la aplicación está funcionando en local, en modo desarrollo, o bien en producción en el servidor, cargo o no el módulo dotenv que me permite tener las variables globales que luego usaré en url y db_name por ejemplo definidas en un fichero .env. Puedes ampliar conocimientos sobre este asunto en .dovenv.

Tras importar mongoClient, y definir las variables que se emplearán en la conexión (url a la BBDD, nombre de la BBDD y nombre de la colección) lanzo un mongoClient.connect() que devuelve bien un error de conexión o abre la conexión (cliente) al gestor de BBDD MongoDB. Luego, con const db = database.db(db_name); obtengo acceso a la BBDD, y seguidamente hago una consulta con db.collection(collection).find(). Una vez obtengo el resultado de la búsqueda (en este caso todos los documentos dentro de la colección de la BBDD), los muestro por consola y cierro la base de datos con database.close();.

Pero si deseo hacer otra búsqueda, o en el módulo tengo una serie de rutas, todas ellas apuntando a una consulta a la BBDD, el número de aperturas y cierres de la conexión se multiplica por el número de consultas. Esto en una página personal o con poco tráfico es sostenible, pero no lo es para grandes flujos de acceso o incluso para situaciones de picos concretos de acceso al servidor (horas de más tráfico, momentos del año donde las consultas se incrementan, por ejemplo cuando se solicitan los resultados de un evento, las notas de fin de curso, una noticia que ha tenido popularidad o alcance…).

Mantener la conexión abierta para distintas consultas en un módulo es fácil, pero, ¿cómo abrirla a través de los distintos módulos de la aplicación?

Primer acercamiento: Importar y conectar

Mi primera opción fue que si voy a emplear la conexión en distintos módulos debía extraer el proceso de conexión a un módulo a parte y luego importarlo allá donde lo necesite, y dicho y hecho:

if (process.env.NODE_ENV !== 'production') require('dotenv').config();
const MongoClient = require('mongodb').MongoClient;

const url = `${process.env.DB_HOST}:${process.env.DB_PORT}/`;
const db_name = process.env.DB_DATABASE;

const loadDB = async () => {
    try {
        const client = await MongoClient.connect(url);
        const db = client.db(db_name);
        return db;
    } catch (err) {
        console.log(err);
    }
};

module.exports = loadDB;

Este módulo realiza lo mismo que en el ejemplo anterior, es decir, abre una conexión a MongoDB, pero lo hace exportando la función asíncrona loadDB para que pueda ser llamada desde otros módulos con:

const loadDB = require('../services/DB');
let db;
const collection = "products";

(async () => db = await loadDB())();

db.collection(collection).find().toArray(function(err, result){
    if (err) throw err;
    console.log(result);
});

Tras cargar loadDB, declaro la variable de ámbito global db que contendrá la conexión a la BBDD, y en la línea:

(async () => db = await loadDB())();

Ejecuto la función asíncrona loadDB() para obtener la conexión que se guardará en db, y ya puedo hacer la consulta con db.collection(collection).find().

Esta consulta podría formar parte de una ruta de express:

const express = require('express');
const router = express.Router();
const loadDB = require('../services/DB');
let db;
const collection = "products";

(async () => db = await loadDB())();

router.get('/ejemplo', (req, res) => {
    db.collection(collection).find().toArray(function(err, result){
        if (err) throw err;
        res.json(result);
    });
})

module.exports = router;

Pero claro, esta forma de proceder implica abrir una conexión por cada módulo de rutas que use la función loadDB. No es lo que busco.

Alternativa: función callback al rescate

¿Qué tal si, en vez de intentar traer a cada módulo la conexión a la BBDD llevo las rutas a la función que abre la conexión directamente mediante una función callback? Veamos…

Para que todas las rutas puedan usar la variable db que se declara cuando se lleva a cabo la conexión, podría establecer una única conexión a la base de datos desde index.js (o app.js) osea, desde el fichero principal de la aplicación Node.js, y referenciar las rutas dentro de una función callback que le pase al módulo encargado de abrir la conexión.

Esta idea fue la que me propuso ZeroBl, que se tomó el tiempo de responder a mis preguntas en un foro de Discord, y tras pasarme el código que él usa para establecer su conexión, y buscar un poco más de información en StackOverflow, el resultado fue el siguiente:

Módulo de conexión a la BBDD

if (process.env.NODE_ENV !== 'production') require('dotenv').config();
const MongoClient = require('mongodb').MongoClient;

const url = `${process.env.DB_HOST}:${process.env.DB_PORT}/`;
const db_name = process.env.DB_DATABASE;

let _db;
let _client;

const connectDB = function (callback) {
    try {
        MongoClient.connect(url, {
            useNewUrlParser: true,
            useUnifiedTopology: true
        }, function (err, client) {
            _client = client;
            _db = client.db(db_name);
            return callback(err, client);
        });
    } catch (err) {
        throw err;
    }
}

const getDB = function () {
    if (_db) return _db;
    throw 'BBDD no encontrada.';
}

const disconnectDB = function () {
    if (_db) return _client.close();
    throw 'BBDD no encontrada.';
}

module.exports = { connectDB, getDB, disconnectDB };

Como se aprecia, este módulo devuelve tres funciones: connectDB que abre la conexión, getDB que obtiene la conexión a la BBDD, y disconnectDB, que cierra la conexión a la BBDD.

A connectDB le paso un callback que se ejecutará en el ámbito donde está viva la conexión. Igual deberemos obtener la referencia a _db en cada módulo que usemos. Lo voy a explicar enseguida.

Con disconnectDB puedo cerrar la conexión a la BBDD desde cualquier parte del programa, pero también debo importarlo si queremos usarlo.

El index.js

O cualquier otro js que haga las veces de inicio de nuestra app:

if (process.env.NODE_ENV !== 'production') require('dotenv').config();
const express = require('express');
const app = express();
const port = process.env.PORT;
const mongoDB = require('./services/DB');

mongoDB.connectDB(function (err, client) {
    if (err) throw err;

    // Ej. http:localhost:3000/ejemplo
    const RouteEjemplo = require('./routes/ejemplo');
    app.use('/ejemplo', RouteEjemplo);

    // otras rutas...

    // Ej. http:localhost:3000/exit
    app.get('/exit', function (req, res) {
        client.close();
        res.end('Fin');
        process.kill(process.pid, 'SIGTERM');
    });

    app.use((req, res) => {
        res.status(404).send('Error 404: No encontrado.');
    });

    app.use((err, req, res, next) => {
        console.error(err.stack);
        const status = err.status || 500;
        res.status(status).send(`Error ${status}: ${err.message}.`);
    });

    const server = app.listen(port, function () {
        console.log(`Servidor levantado en el puerto ${port}.`);
    });

    process.on('SIGTERM', function () {
        server.close(() => console.log('Proceso terminado.'))
    });
});

Importo el módulo de mongoDB y conecto a la BBDD con:

mongoDB.connectDB(function (err, client) {
    // Función callback
});

Función a la que le paso como callback todo el manejo de rutas, e incluso levanto el servidor. Recuerda que esta función se ejecutará tras establecer la conexión en la línea:

return callback(err, client);

Al ejecutar la función obtengo dos posibles valores, o bien un error, o bien el cliente para la conexión. Esto me va a permitir hacer uso del cliente desde la misma función callback, para, por ejemplo, cerrar la conexión, como ocurre en la ruta /exit en:

client.close();

Usar una ruta para cerrar la aplicación por supuesto es un ejemplo ilustrativo, y no es la mejor forma de hacerlo. ;)

Si quiero cerrar la aplicación desde dentro de un módulo de, por ejemplo, una ruta, debo usar disconnectDB().

La ruta de ejemplo

Como dije, para poder utilizar la BBDD en las distintas rutas o en los módulos de la aplicación, debo importar la referencia a db en cada módulo con:

const mongoDB = require('../services/DB');
const db = mongoDB.getDB();

y a partir de ahí puedo usar db en todo el módulo. Así de simple.

Esto es posible porque, como hemos visto, estamos llamado a esta ruta dentro del callback que pasamos a la función que abre la conexión.

En resumen

Mediante un módulo que devuelve tres funciones podemos abrir la conexión a la BBDD (recibiendo y ejecutando un callback) obtener la referencia a la BBDD y cerrar la conexión a la BBDD.

Dentro del callback definimos las rutas (app.use) que van a hacer uso de la BBDD, y en cada módulo donde se defina la ruta o las sub-rutas, deberemos obtener la referencia a la BBDD para poder usarla.

En este enlace a StackOverflow (en inglés) podrás obtener más información y alternativas a esta solución.

Tienda 8 bits

JavGuerra — Fri, 18 Nov 2022 00:00:00 GMT

Etiquetas: #portfolio, #web, #formación, #becas, #node.js, #express, #react, #mongodb, #javascript, #accesibilidad, #responsive

Durante el año 2022 cursé el Bootcamp de Desarrollo Web Full Stack que Becas Santander llevó a cabo en colaboración con Fundación Universia, Indra y The Bridge.

El día 17 de noviembre finalizó la formación con un acto de entrega de diplomas on-line en el que tuve ocasión de mostrar mi proyecto final «Tienda 8 bits» junto con Alex, otro de mis compañeros, quien también expuso su proyecto.

A parte de los compañeros y los profesores, asistieron al evento Alejandra Cuenca y Diego Díaz por parte de The Bridge, Cristina Soriano por Minsait/Indra, y Beatriz Arribas y Carlos Sánchez por Universia.

Video

El evento se llevó a cabo de forma presencial y on-line, y de él he rescatado el video de mi presentación que comparto a continuación.

Descripción técnica

Back end

Tecnologías empleadas: Node.js + Express + MongoDB + Mongoose
Módulos: compression, cors, helmet, dotenv, nodemon, mongoose-paginator-v2

Características destacadas de la API:

Emplea módulos ESM.
Está preparada para el versionado de la API.
Está preparada para el uso de BBDD MongoDB local o en remoto (config.js).
Preserva la seguridad del acceso a la API con el uso del módulo helmet.
Devuelve las rutas de los enlaces a las fotos y logos dinámicamente.
Cuenta con documentación de la API.

Front end

Tecnologías empleadas: React + Vite, axios, react-router-dom, react-hook-form
Módulos propios: setSpin, inactiveBtn, compareTwoObjects

Características destacadas de la App:

El diseño es adaptable (responsive) según el dispositivo.
CSS propio. No usa frameworks.
Es accesible (revisado con el complemento WAVE).
Utiliza fuentes de Google Font en los títulos para preservar la accesibilidad.
Implementa el protocolo Open Graph para la correcta inserción de la web en RRSS.
Es compatible con Progessive Web Aplication (PWA) a través de fichero manifest.json, por lo que la página puede ser instalada en dispositivos móviles como una web app.
Ha sido probada con los navegadores web Firefox y Chrome.
Tratamiento de imágenes con software libre: Gimp e InkScape.

Fuentes

Wikipedia
Enciclopedia «Mi Computer», editorial Delta, 1984.

Licencias

Sobre el código fuente: GNU GENERAL PUBLIC LICENSE Version 3
Sobre el contenido de la web: (CC) BY-SA 3.0
Sobre las fotos: Son propiedad de sus respectivos autores.
Sobre las fuentes de letra: Google Fonts
Sobre los iconos: Heroicons
Material usado sin ánimo de lucro bajo criterios didácticos y formativos.

Acceder a la aplicación

Enlaces

Artículos informativos elaborados por el autor relacionados con esta práctica: