Ejercicio: Parámetros de ruta y consulta

  • 4 minutos

Como ingeniero de Tailwind Traders, cree las API para que sean eficaces tanto para el servidor como para el cliente limitando la cantidad de datos que se envían o devuelven desde la API.

Los datos normalmente residen en una base de datos u otro almacenamiento. El tamaño de los datos puede ser enorme. Cuando un usuario solicita todos los datos de los productos, la respuesta puede contener miles o incluso millones de registros. Una solicitud como esta puede generar una enorme presión en una base de datos. También se tarda mucho tiempo en atender y representar la respuesta en el cliente.

Para evitar este escenario, se recomienda limitar el tamaño de la respuesta:

  • Use parámetros de ruta para solicitar un registro específico
  • Use parámetros de consulta para especificar un subconjunto de registros.

En este ejercicio se enseñan ambas técnicas.

Abrir el proyecto en el contenedor de desarrollo

  1. Inicie el proceso para crear una nueva instancia de GitHub Codespace en la rama main del repositorio de GitHub MicrosoftDocs/node-essentials.

    Abra este proyecto en GitHub Codespaces.

  2. En la página Crear codespace, revise las opciones de configuración de codespace y, después, seleccione Crear nuevo codespace

    Captura de pantalla de la pantalla de confirmación antes de crear un nuevo codespace.

  3. Espere a que se inicie Codespace. Este proceso de startup puede tardar unos minutos.

  4. Abra un nuevo terminal en el codespace.

    Sugerencia

    Puede usar el menú principal para ir a la opción de menú Terminal y, a continuación, seleccionar la opción Nuevo terminal.

    Captura de pantalla de la opción de menú Codespaces para abrir un nuevo terminal.

  5. Compruebe que Node.js está instalado en el entorno:

    node --version

  6. Cierre el terminal.

  7. Los demás ejercicios de este proyecto tienen lugar en el contexto de este contenedor de desarrollo.

Configurar archivos para el proyecto

  1. Para inspeccionar el proyecto de este módulo, abra la carpeta ./nodejs-http/exercise-express-routing/parameters en el editor de código.

    El directorio de parámetros debe contener estos archivos:

    Archivo Fin
    app.js Este archivo contiene la aplicación Express.
    package.json Este archivo contiene las dependencias del proyecto.
    package-lock.json Este archivo contiene las versiones exactas de las dependencias.

  2. Haga clic con el botón derecho en el nombre de la carpeta en el explorador de archivos /nodejs-http/exercise-express-routing/parameters y seleccione Abrir en terminal integrado.

  3. En el terminal, ejecute el siguiente comando para instalar las dependencias del proyecto:

    npm install

  4. Abra app.js para inspeccionarlo. El archivo debería tener este aspecto:

    const express = require('express')
const app = express()
const port = 3000

const products = [
{
  id: 1,
  name: "Ivanhoe",
  author: "Sir Walter Scott",
},
{
  id: 2,
  name: "Colour Magic",
  author: "Terry Pratchett",
},
{
  id: 3,
  name: "The Bluest eye",
  author: "Toni Morrison",
},
];

app.get('/', (req, res) => res.send('Hello API!'));

app.get("/products/:id", (req, res) => {});

app.get('/products', (req, res) => {});

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`));

    Este código JavaScript crea un servidor básico Express.js. Define una matriz de products y configura tres rutas: raíz (/), /products/:id y /products. El servidor escucha el puerto 3000. Las rutas /products/:id y /products son marcadores de posición sin funcionalidad todavía.

    Los datos se codifican de forma rígida para simplificar el ejercicio. En un escenario real, los datos provendrían de una base de datos u otro almacenamiento.

Implementar la ruta del producto para devolver un único producto

El código contiene una aplicación Express. El paso siguiente consiste en implementar dos rutas:

  • /products/:id: esta ruta debe devolver un único producto.
  • /products esta ruta debe devolver todos los productos o tantos como hayan solicitado los parámetros de consulta.

  1. Para implementar la ruta /products/:id, busque el código siguiente en el archivo app.js en el directorio de parámetros:

    app.get("/products/:id", (req, res) => {});

    Reemplácelo por este código:

    app.get("/products/:id", (req, res) => {
  res.json(products.find(p => p.id === +req.params.id));
});

  2. En el terminal, ejecute el comando siguiente para ejecutar la aplicación:

    node app.js

  3. Cuando aparezca la notificación de Visual Studio Code de apertura del explorador, seleccione Abrir en el explorador.

  4. Agregue lo siguiente al final de la dirección URL:

    /products/1

    La salida es la siguiente:

    {
  "id": 1,
  "name": "Ivanhoe",
  "author": "Sir Walter Scott"
}

    ¡Enhorabuena! Ha implementado la ruta correctamente. La aplicación usa el parámetro de ruta id para buscar un producto específico.

  5. En el terminal, seleccione Ctrl+C para detener la aplicación.

Implementar la ruta de productos para devolver una lista de productos

  1. Para implementar la ruta /products, busque el código siguiente:

    app.get("/products", (req, res) => {});

    Reemplácelo por este código:

    app.get("/products", (req, res) => {
  const page = +req.query.page;
  const pageSize = +req.query.pageSize;

  if (page && pageSize) {
    const start = (page - 1) * pageSize;
    const end = start + pageSize;
    res.json(products.slice(start, end));
  } else {
    res.json(products);
  }
});

  2. En el terminal, ejecute el comando siguiente para iniciar la aplicación y probar el código:

    node app.js

  3. Cuando aparezca la notificación de Visual Studio Code de apertura del explorador, seleccione Abrir en el explorador.

  4. Agregue lo siguiente al final de la dirección URL:

    /products?page=1&pageSize=2

    La salida es la siguiente:

    [{
  "id": 1,
  "name": "Ivanhoe",
  "author": "Sir Walter Scott"
},
{
  "id": 2,
  "name": "Colour Magic",
  "author": "Terry Pratchett"
}]

    De los tres registros, en la respuesta se muestran los dos primeros. Esta respuesta significa que los parámetros de consulta page y pageSize, filtran el tamaño de respuesta de la lista completa a dos elementos.

  5. Cambie la dirección URL para usar la siguiente ruta, products?page=2&pageSize=2 para cambiar el número de páginas de uno a dos. La respuesta es:

    [{
  "id": 3,
  "name": "The Bluest eye",
  "author": "Toni Morrison"
}]

Dado que el código solo contiene tres registros, la segunda página solo debería contener un registro.

  1. En el terminal, seleccione Ctrl+C para detener la aplicación.

Ha aplicado correctamente parámetros de consulta para limitar la respuesta.