Fundamentos de Desarrollo Web y Comunicación Cliente-Servidor

1. Conceptos Fundamentales de Arquitectura Web

• ¿Qué es un servidor?
  Es un sistema o programa que recibe peticiones y responde con recursos o servicios a otros (clientes).
• ¿Qué significa front-end?
  Es la parte visible de una aplicación (interfaz), lo que el usuario ve y usa.
• ¿Qué significa 127.0.0.1:1234/ids?
  • 127.0.0.1: localhost (tu equipo).
  • 1234: puerto.
  • /ids: ruta o endpoint al que se hace la petición.
• ¿Qué es un request?
  Es una solicitud que hace un cliente a un servidor para pedir datos o acciones.
• ¿Puede un mismo dispositivo ser cliente y servidor? ¿Por qué?
  Sí, porque puede enviar y recibir peticiones al mismo tiempo dependiendo del proceso que ejecute.
• ¿Qué es la palabra reservada “extends”?
  Se usa para heredar propiedades y métodos de otra clase en Programación Orientada a Objetos (POO).
• ¿Para qué sirve host y puerto?
  El host identifica el servidor (dirección/IP) y el puerto el servicio específico dentro de ese servidor.
• Explica el tipo de dato (arreglos tipo RowDataPacket[] FieldPacket[])
  Son arreglos de objetos, donde cada elemento contiene datos estructurados (como filas o campos de una consulta).
• Diferencia entre console.log("Hola") y res.send("Hola")
  • console.log: muestra información en la consola del servidor.
  • res.send: envía una respuesta HTTP al cliente (navegador).
• Aprendizajes de la unidad 3
  Comprensión del funcionamiento de la comunicación cliente-servidor mediante el intercambio de requests y responses en aplicaciones web.

2. Ejercicios Prácticos de Implementación

1) Configuración de PoolOptions

const access: PoolOptions = {
  host: process.env["DB_HOST"] || "",
  port: Number(process.env["DB_PORT"]) || 0,
  user: process.env["DB_USER"] || "",
  password: process.env["DB_PASSWORD"] || "",
  database: process.env["DB_DATABASE"] || ""
};

2) Endpoint para saludo dinámico

app.get("/hola/:nombre", (req, res) => {
  const { nombre } = req.params;
  res.send(`Hola ${nombre}`);
});

3) Interface para un renglón de tabla

interface Producto {
  id: number;
  producto: string;
  precio: number;
  cantidad: number;
}

4) Contenido del archivo .env

PORT=3000
DB_HOST=localhost
DB_PORT=3306
DB_USER=root
DB_PASSWORD=1234
DB_DATABASE=mi_bd

5) Resultado del console.log

Vamos a conectarnos a root:1234@localhost:3306/mi_bd

6) Manejo de errores al cliente

res.status(500).send("Error en la consulta");

7) Gestión de asincronía (async/await)

const [dbResult] = await conn.query("SELECT * FROM califs");

8) Tipado de entrada y salida

const [dbResult]: [RowDataPacket[], FieldPacket[]] = await conn.query("SELECT * FROM califs");

9) Consulta dinámica segura (evitando SQL Injection)

const dynamicId = 4;
conn.query("SELECT * FROM califs WHERE id = ?", [dynamicId]);

10) Modelo Animal en TypeScript

interface Animal {
  edad: number;
  nombreComun: string;
  nombreCientifico: string;
}