Stacks Tecnológicos y Arquitectura del Proyecto

🚀 Clases en Vivo — Inicio: Domingo 6 de Septiembre ($200 MXN / clase). Aprende a programar desde cero con acompañamiento directo y construye el proyecto ShortURL.

Apartar mi Lugar en las Clases en Vivo

En la Lección 4: Paradigmas de Programación (L4) dominamos la Programación Orientada a Objetos, las funciones puras y el manejo de tareas asíncronas con async / await.

Hasta ahora hemos ejecutado código en la consola de nuestro navegador. Pero para construir una aplicación real que funcione en internet y que cualquier persona en el mundo pueda usar desde su teléfono o computadora, necesitamos conectar múltiples piezas de software que colaboren en equipo. A este conjunto integrado de tecnologías lo llamamos Stack Tecnológico.

En esta sesión intensiva de 4 horas, comprenderemos la anatomía de un Stack, analizaremos la arquitectura Cliente-Servidor y daremos el banderazo oficial a nuestro gran proyecto práctico del curso: ShortURL (un acortador de enlaces web profesional estilo Bitly).

🗺️ Estructura de la Sesión

Cada una de nuestras sesiones semanales sigue una metodología pedagógica dividida en 5 fases:

Estructura de la Sesión
├── ☕ Fase 1: Revisión del Tema Anterior y Conclusiones
├── 🎯 Fase 2: Introducción al Tema y Fundamentos
├── 💻 Fase 3: Práctica Asistida en Vivo
├── 🗣️ Fase 4: Exposición, Debate y Debugging
└── 🏠 Fase 5: Reto Semanal y Práctica en Casa

☕ Fase 1: Revisión del Tema Anterior y Conclusiones

Iniciamos la sesión analizando el simulador asíncrono y conectando con la necesidad de almacenar datos de forma global.

1. Puesta en Común del Reto de la Lección 4

En la sesión anterior construimos el “Simulador Asíncrono de Restaurante”, coordinando pedidos con clases y pausas de tiempo con async / await:

Discusión en grupo: ¿Cómo modelaste los cambios de estado del pedido a medida que avanzaba el reloj?
¿Qué ocurrió cuando intentaste consultar un pedido que había sido cancelado por el bloque try / catch?
Si recargaste la página de tu navegador… ¿notaste que todos los pedidos desaparecieron instantáneamente de la memoria?

2. El Puente Conceptual: De Scripts Aislados a Aplicaciones Completas

La memoria RAM de tu navegador es volátil: en cuanto cierras la pestaña o recargas la página, las variables mueren. Además, si tú creas un pedido en tu computadora, otra persona en su teléfono celular no puede verlo.

Para que una aplicación sea verdaderamente útil en el mundo real, necesitamos tres capas esenciales:

Una cara visual donde el usuario interactúe (Frontend).
Un cerebro central en la nube que reciba peticiones de miles de usuarios al mismo tiempo (Backend).
Una bóveda permanente donde los datos queden guardados para siempre (Base de Datos).

La combinación armoniosa de estas tres capas es lo que llamamos un Stack.

🎯 Fase 2: Introducción al Tema y Fundamentos Teóricos

Analicemos cómo se organiza un stack y diseñemos la arquitectura de nuestro proyecto.

1. ¿Qué es un Stack Tecnológico? La Analogía de la Hamburguesa

Imagina una hamburguesa gourmet en un restaurante:

El Pan Superior (Frontend): Es lo que ves primero, el diseño, la textura y los colores. En la web, es el HTML, CSS y JavaScript que corre en el navegador del cliente.
La Carne y Aderezos (Backend): Es el corazón del sabor y donde ocurre la preparación principal. En la web, es el servidor (Node.js y Express) que procesa la lógica, la seguridad y las reglas de negocio.
El Pan Inferior (Base de Datos): Es la base sólida que sostiene todos los ingredientes para que no se caigan. En la web, es el motor de persistencia (SQLite) que guarda los registros en el disco duro.

┌────────────────────────────────────────────────────────┐
│ 🎨 FRONTEND (Cliente: Navegador Web)                   │
│ HTML5 (Estructura) + CSS3 (Estilo) + JavaScript (DOM)  │
├────────────────────────────────────────────────────────┤
│ ⚙️ BACKEND (Servidor: Lógica en la Nube)               │
│ Node.js + Servidor Web Express (API REST)              │
├────────────────────────────────────────────────────────┤
│ 🗄️ BASE DE DATOS (Persistencia de Datos)               │
│ SQLite (Tablas relacionales y consultas SQL)           │
└────────────────────────────────────────────────────────┘

2. El Proyecto Central del Curso: ShortURL

A partir de esta lección y hasta el final del curso, construiremos una aplicación web completa y real: ShortURL (un acortador de enlaces web).

¿Qué problema resuelve ShortURL?

Seguramente has visto enlaces gigantescos y feos en internet:

https://tienda.com/productos/categoria/electronica/ofertas-verano?id=8492048&ref=facebook_ads_campaign_2026

ShortURL transformará ese enlace kilométrico en uno limpio, elegante y fácil de compartir:

https://short.ly/a8B9x

Los 2 Flujos Clave del Sistema:

Flujo 1: Acortar Enlace
[Usuario pega URL larga] ──► [Backend genera código "a8B9x"] ──► [Se guarda en SQLite] ──► [Devuelve URL corta]

Flujo 2: Redirección Instantánea
[Visitante entra a short.ly/a8B9x] ──► [Backend busca "a8B9x" en SQLite] ──► [Redirige a URL larga original 🚀]

3. El Stack Elegido para el Curso

Para construir ShortURL utilizaremos el stack más limpio, potente y estándar de la industria:

Frontend: HTML5 Semántico + CSS Flexbox + JavaScript Vanilla (sin frameworks pesados para entender los fundamentos puros).
Backend: Node.js con Express (JavaScript en el servidor).
Base de Datos: SQLite (base de datos relacional compacta y ultra rápida).
Control de Versiones y Nube: Git, GitHub y despliegue gratuito en la nube.

🔍 Experimento en Vivo: Simulando una Redirección en la Consola

Vamos a experimentar cómo funciona el “truco” de la redirección web:

Abre la consola de tu navegador (F12).

Ejecuta este comando en la consola:

// Le ordenamos al navegador que viaje inmediatamente a otro sitio web
window.location.href = "https://astro.build";

Observa qué ocurre: El navegador cambia de página al instante. Ese mismo comportamiento es el que programaremos en nuestro servidor Backend cuando un usuario visite un enlace corto.

💻 Fase 3: Práctica Asistida en Vivo

Abriremos la consola y crearemos los algoritmos fundacionales de ShortURL.

🧩 Reto 1: Definición del Modelo de Datos de ShortURL

Objetivo: Diseñar la estructura de datos que representará cada enlace acortado en el sistema.

// Diseñamos la ficha técnica (Objeto) de un enlace
function crearFichaEnlace(urlOriginal, codigoCorto) {
  return {
    id: Date.now(), // Identificador numérico único basado en milisegundos
    urlOriginal: urlOriginal,
    codigoCorto: codigoCorto,
    clics: 0,
    fechaCreacion: new Date().toISOString()
  };
}

// Probamos creando nuestro primer registro:
const enlaceEjemplo = crearFichaEnlace(
  "https://developer.mozilla.org/es/docs/Web/JavaScript",
  "mdn-js"
);

console.log("Ficha del enlace en memoria:", enlaceEjemplo);

🧩 Reto 2: Algoritmo Generador de Códigos Cortos Aleatorios

Objetivo: Crear una función que genere códigos aleatorios únicos de 6 caracteres (ej. "x7K9p2").

function generarCodigoCorto(longitud = 6) {
  // Caracteres permitidos: letras minúsculas, mayúsculas y números
  const caracteres = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  let codigo = "";

  for (let i = 0; i < longitud; i++) {
    // Escogemos una posición al azar dentro del alfabeto
    const indiceAleatorio = Math.floor(Math.random() * caracteres.length);
    codigo += caracteres[indiceAleatorio];
  }

  return codigo;
}

// Probamos generando varios códigos:
console.log("Código 1:", generarCodigoCorto()); // Ej: "8kF2qA"
console.log("Código 2:", generarCodigoCorto()); // Ej: "p9M1zL"
console.log("Código personalizado de 8 caracteres:", generarCodigoCorto(8));

🧩 Reto 3: Validador de URLs Seguras

Objetivo: Asegurar que los usuarios solo ingresen enlaces web válidos que comiencen con http:// o https://.

function validarURL(urlIngresada) {
  const urlLimpia = urlIngresada.trim();

  // Validamos que no esté vacía
  if (urlLimpia.length === 0) {
    return { valida: false, motivo: "La URL no puede estar vacía." };
  }

  // Validamos que comience con protocolo web seguro
  const tieneProtocolo = urlLimpia.startsWith("http://") || urlLimpia.startsWith("https://");

  if (!tieneProtocolo) {
    return { valida: false, motivo: "La URL debe comenzar con http:// o https://" };
  }

  // Validamos que contenga al menos un punto para el dominio
  if (!urlLimpia.includes(".")) {
    return { valida: false, motivo: "La URL debe incluir un dominio válido (ej. .com, .org)." };
  }

  return { valida: true, urlNormalizada: urlLimpia };
}

// Casos de prueba:
console.log(validarURL("https://google.com"));       // { valida: true, ... }
console.log(validarURL("mi-sitio-sin-protocolo.com")); // { valida: false, motivo: "..." }
console.log(validarURL("   "));                       // { valida: false, motivo: "..." }

🧩 Reto 4: Estructura de Carpetas del Proyecto ShortURL

Objetivo: Diseñar la arquitectura de archivos en el disco para separar claramente Frontend de Backend.

proyecto-shorturl/
├── package.json          # Archivo de configuración del proyecto Node.js
├── server.js             # Servidor Backend (Express y rutas)
├── /data/                # Almacenamiento permanente
│   └── shorturl.db       # Base de datos SQLite
└── /public/              # Interfaz gráfica (Frontend estático)
    ├── index.html        # Estructura visual de la página
    ├── styles.css        # Diseño y estilos responsivos
    └── app.js            # Lógica interactiva del cliente (fetch y DOM)

🗣️ Fase 4: Exposición de Resultados, Debate y Debugging

Analizamos en conjunto el diseño de la arquitectura y desarmamos los posibles puntos débiles del sistema.

🐞 Debate y Trampas de Arquitectura en Sistemas Web

1. ¿Por qué no guardar las URLs en el `localStorage` del navegador?

El dilema: localStorage permite guardar datos en el navegador del usuario sin configurar servidores.
El problema crítico: Si guardas el enlace en el navegador de Juan, cuando María abra short.ly/a8B9x en su propio teléfono, su navegador no tendrá ese dato. Un acortador exige una base de datos centralizada compartida.

2. La trampa de las colisiones de códigos aleatorios

El riesgo: ¿Qué pasa si el generador aleatorio crea dos veces el mismo código "abc123" para dos URLs distintas?
La solución arquitectónica: Antes de guardar un código nuevo en la base de datos, el servidor debe verificar si ya existe. Si existe, genera uno nuevo de inmediato.

3. URLs relativas vs absolutas

El error: Intentar redirigir a "google.com" en lugar de "https://google.com".
Consecuencia: El navegador creerá que es una página interna (short.ly/google.com) y dará error 404.

🏠 Fase 5: Definición de Práctica en Casa / Reto Semanal

Construirás el motor lógico completo de ShortURL funcionando en memoria.

🏆 Proyecto Semanal: “El Prototipo en Memoria de ShortURL”

Descripción del Problema: Antes de armar el servidor web y la base de datos en las próximas clases, crearemos un programa en JavaScript que simule todo el sistema ShortURL en la consola.

Especificaciones Técnicas del Script:

Base de Datos Simulada:
- Crea un arreglo global const baseDeDatos = [];.
Función acortarURL(urlLarga):
- Valida la URL con el validador del Reto 3.
- Genera un código corto de 6 caracteres con el generador del Reto 2.
- Crea el objeto de la ficha del enlace (con clics: 0) y lo guarda con push() en baseDeDatos.
- Devuelve un mensaje con la URL corta generada (ej. "https://short.ly/" + codigo).
Función visitarEnlace(codigoCorto):
- Busca en baseDeDatos el enlace que tenga ese codigoCorto (usa find()).
- Si no existe, devuelve "❌ Error 404: Enlace no encontrado.".
- Si existe, incrementa su contador enlace.clics++ y devuelve "🚀 Redirigiendo a: " + enlace.urlOriginal.
Función mostrarEstadisticas():
- Muestra en consola la tabla completa de enlaces y clics acumulados con console.table(baseDeDatos).

Prueba en Consola:

console.log(acortarURL("https://wikipedia.org"));
console.log(acortarURL("https://github.com"));

// Simulamos que dos usuarios hacen clic en el primer enlace:
visitarEnlace("CODIGO_GENERADO");
visitarEnlace("CODIGO_GENERADO");

// Mostramos el reporte:
mostrarEstadisticas();

📚 Recursos y Videos Recomendados

Para profundizar en la arquitectura web y stacks de desarrollo:

Cómo crear una APP: Guía completa del Stack Tecnológico Explicación clara de qué es un tech stack, capas Frontend, Backend, bases de datos y servicios en la nube.

¿Qué es un Servidor Web? Desglose técnico de la diferencia entre hardware de servidor, software HTTP y alojamiento de archivos.

Visión General de la Arquitectura Cliente-Servidor Análisis del ciclo de vida de peticiones y respuestas dinámicas en el lado servidor.

Cómo Funciona la Web por Dentro Explicación paso a paso de DNS, paquetes TCP/IP y renderizado de páginas en el navegador.

🚀 Conclusión y Próximos Pasos

¡Felicidades! Hemos sentado las bases arquitectónicas de nuestro proyecto. Ahora entiendes con total claridad cómo interactúan el Frontend, el Backend y la Base de Datos, y cómo funcionará el flujo de ShortURL.

En la próxima sesión construiremos la cara visual del proyecto: Lección 6: Frontend - HTML, CSS y Manipulación del DOM (L6), donde maquetaremos una interfaz interactiva y adaptable a teléfonos celulares.