Electiva II y III - Clase: Arquitectura Cliente-Servidor & API REST

El paquete base con los archivos del proyecto y la base de datos se encuentra alojado en el siguiente enlace:/p> 📦 Descarga del Kit de Laboratorio (kit.zip) 🠗

🏢 La Arquitectura Cliente-Servidor

En el desarrollo web moderno, la Separación de Responsabilidades es la regla de oro. En lugar de tener un solo sistema monolítico que haga todo, dividimos la aplicación en dos roles independientes que se comunican a través de la red:

El Cliente (Frontend)

Ubicación: Servidor Apache (C:\xampp\htdocs\frontend)

Es la interfaz visual con la que interactúa el usuario. Su trabajo es capturar datos, validar entradas y mostrar resultados. No procesa lógica de negocios crítica ni toca la base de datos directamente.

El Servidor (Backend)

Ubicación: Node.js + Express (/backend)

Es el cerebro del sistema. Escucha peticiones por la red, aplica reglas de negocio, lee/escribe en la base de datos MySQL y responde datos puros (generalmente JSON).

¿Por qué usamos esta arquitectura?

Desacoplamiento: Puedes cambiar el Frontend (ej. hacer una app móvil) sin tocar una sola línea del Backend.
Seguridad: Las credenciales de MySQL y la lógica del servidor quedan ocultas dentro del Backend y nunca se exponen al navegador.
Escalabilidad: El servidor backend puede atender a miles de clientes en simultáneo.

🔌 Entendiendo la API REST

Una API REST (Application Programming Interface) es un "contrato de comunicación" entre el Cliente y el Servidor utilizando el protocolo HTTP estándar.

1. El Idioma Universal: JSON

El cliente y el servidor no se envían pantallas ni archivos gigantes, se envían texto plano estructurado llamado JSON (JavaScript Object Notation):

// Petición que envía el Cliente al Servidor:
{
  "txtnombre": "Ana Pérez",
  "txtemail": "ana@correo.com",
  "txtphone": "0412-1234567"
}

2. Anatomía del Endpoint en nuestro Proyecto

En la práctica de hoy estaremos consumiendo la siguiente ruta del servicio:

Método HTTP: POST (Utilizado para enviar/crear nuevos recursos)
URL del Endpoint: http://localhost:3000/api/usuarios
Formato de envío: Content-Type: application/json

3. Flujo de Respuesta de la API

Una vez procesados los datos en MySQL, el servidor Express responde un JSON con el estado de la operación:

// Respuesta del Servidor al Cliente (HTTP 200 OK):
{
  "exito": true,
  "mensaje": "¡Usuario guardado con éxito!",
  "idInsertado": 12
}

📁 Ubicación de Archivos en el Laboratorio

Frontend (Apache)

Copiar en: C:\xampp\htdocs\frontend
Abrir en navegador: http://localhost/frontend/index.html

Backend (Node.js)

Copiar en: C:\Users\Alumno\Desktop\backend
API escuchando en: http://localhost:3000

🚀 Pasos para Ejecutar el Proyecto

Paso 0: Importar la Base de Datos desde phpMyAdmin

Inicia XAMPP Control Panel y arranca el servicio MySQL (y Apache).
Abre el navegador e ingresa a: http://localhost/phpmyadmin.
Crea una nueva base de datos llamada exactamente: ejemplodb.
Haz clic en la pestaña Importar, presiona Seleccionar archivo y elige el archivo ejemplodb.sql que viene dentro del archivo kit.zip.
Haz clic en el botón Continuar al final de la página para ejecutar la creación de tablas.

Paso 1: Configurar Backend y Frontend

Copia la carpeta frontend/ a C:\xampp\htdocs\frontend.
Coloca la carpeta backend/ en tu Escritorio o directorio de trabajo. Asegúrate de que contenga el archivo de entorno .env.
Abre una consola (CMD) dentro de la carpeta backend/ y ejecuta:
```
node server.js
```
Abre tu navegador e ingresa a: http://localhost/frontend/index.html para probar el envío de registros desde el formulario.

Buenas Prácticas de Seguridad (.env)

Recuerda que las credenciales de la base de datos viven exclusivamente en el archivo .env del Backend. El Frontend jamás conoce las contraseñas del motor de base de datos ni interactúa directamente con MySQL.