Ejercicio: Servidor HTTP con Express

⏱ 60 minutos
📶 Nivel: intermedio

Objetivo

Construir en tu computadora un servidor Express con rutas, parámetros, un POST con JSON, un middleware y un 404, y reproducir con JavaScript puro el mecanismo de rutas y de middleware.

Cómo se trabaja

La parte A es práctica real en tu terminal: es el corazón del ejercicio. La parte B son tres funciones de JavaScript puro que imitan cómo Express empareja rutas, encadena middlewares y nombra estados; las pruebas en el editor y las compruebas abajo. Pega solo el JavaScript, sin <script>.

▶ Prueba tu código aquí (opcional)

Código (edítalo y pulsa Ejecutar)

<script>
// Escribe aquí tus funciones y pruébalas con console.log
function coincide(patron, ruta) {
  // ...
}

console.log(coincide("/usuarios/:id", "/usuarios/5"));
</script>

Página (resultado)

Consola

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

Parte A. Crea un proyecto nuevo (npm init -y, "type": "module", npm install express) y un script dev con node --watch index.js.
Parte A. Crea las rutas GET / (texto), GET /saludo/:nombre (JSON) y GET /suma?a=&b= (devuelve 400 si no son números).
Parte A. Añade express.json() y POST /eco: responde 201 con el mensaje recibido o 400 si falta.
Parte A. Añade un middleware que imprima método y URL de cada petición, y un 404 en JSON al final.
Parte A. Prueba todas las rutas con el navegador y con curl (o Thunder Client). Comprueba los códigos de estado.
Parte B. Escribe coincide(patron, ruta) y describirEstado(codigo).
Parte B. Escribe ejecutar(middlewares, req). Pasa los ocho puntos del comprobador.

💡 Pista 1: ¿qué falla si la petición se queda colgada?

Casi siempre es un middleware que no llama a next() y tampoco responde.

💡 Pista 2: coincide

Divide el patrón y la ruta con split("/"). Si tienen distinta longitud, no coinciden. Si una parte del patrón empieza por :, es un parámetro; si no, debe ser igual.

💡 Pista 3: ejecutar

Guarda un índice i. next toma middlewares[i++] y lo llama con (req, res, next). Crea res con un send que guarde el texto en una variable.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista. Pega solo el JavaScript, sin las etiquetas <script>.

Tu código de JavaScript

✅ Ver una solución posible

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

funciones.js

function coincide(patron, ruta) {
  const p = patron.split("/");
  const r = ruta.split("/");
  if (p.length !== r.length) return null;
  const params = {};
  for (let i = 0; i < p.length; i++) {
    if (p[i].startsWith(":")) {
      params[p[i].slice(1)] = r[i];
    } else if (p[i] !== r[i]) {
      return null;
    }
  }
  return params;
}

function ejecutar(middlewares, req) {
  let enviado = null;
  const res = { send(texto) { enviado = texto; } };
  let i = 0;
  const next = () => {
    const mw = middlewares[i++];
    if (mw) mw(req, res, next);
  };
  next();
  return enviado;
}

function describirEstado(codigo) {
  const estados = {
    200: "OK",
    201: "Creado",
    400: "Petición incorrecta",
    404: "No encontrado",
    500: "Error del servidor"
  };
  return estados[codigo] ?? "Desconocido";
}

💡 🏁 Reto extra (opcional)

Añade a tu servidor una ruta GET /producto/:id que devuelva uno de tres productos de un array y responda 404 si el id no existe. Después mejora coincide para que ignore una barra final (/usuarios/5/).