Angular 21 de Cero a Experto / Proyecto final

Arquitectura del tablero: planear antes que codear

Teoría22 min20 XP

Llegaste al proyecto final: un TABLERO COLABORATIVO en tiempo real, donde varios usuarios organizan gastos por columnas (pendiente → aprobado → pagado) y ven los cambios de los demás al instante. Antes de escribir una línea, vas a DISEÑARLO —porque un buen plan evita reescribir—. Hoy aplicas el método de las cinco preguntas que aprendiste en JavaScript (SC-02) y reusaste en React, ahora para arquitecturar una app Angular completa.

Medir dos veces, cortar una

Las cinco preguntas

El método de diseño (SC-02 M17, reutilizado)

Ante cualquier app, respóndete en orden:

¿Qué VISTAS tiene? — el login, el tablero con sus columnas, la tarjeta de cada gasto, la barra de presencia.
¿Dónde vive la FUENTE DE VERDAD? — ¿qué es el estado mínimo del que todo lo demás se deriva? Aquí: la lista de gastos (cada uno con su columna/estado) y quién está conectado.
¿Qué OPERACIONES hay? — crear gasto, mover gasto de columna, borrarlo; un usuario entra/ sale. Cada operación cambia la fuente de verdad.
¿Cómo se RENDERIZA la vista desde el estado? — las columnas se derivan agrupando los gastos por su estado; el total por columna es un computed; la UI es función del estado.
¿Qué EVENTOS disparan las operaciones? — clics (crear, mover), y —lo nuevo— MENSAJES DEL SOCKET (otro usuario movió un gasto). Los eventos locales y los remotos convergen en las mismas operaciones.

Con esas respuestas, el código casi se escribe solo: sabes qué señales necesitas, qué computed derivan la vista, y qué métodos son las operaciones.

Clasificar el estado

El paso más importante en una app de tiempo real: distinguir de dónde viene cada dato.

Tres tipos de estado en el tablero

Estado COMPARTIDO (fuente de verdad, vía socket): la lista de gastos y los usuarios conectados. Es la verdad que TODOS los clientes deben ver igual, sincronizada por el socket. Vive en un store de señales, alimentado por los eventos entrantes.
Estado DERIVADO (computed): las columnas (gastos agrupados por estado), el total por columna, cuántos hay en cada una. Nunca se guarda: se calcula del estado compartido.
Estado LOCAL (solo tuyo): qué gasto estás arrastrando ahora, si el formulario de "nuevo gasto" está abierto, el texto que escribes. No se comparte —es efímero de TU UI—.

El error clásico (que ya viste): meter estado local en lo compartido (¿por qué habrían de saber los demás qué estás arrastrando?), o tratar lo derivado como estado (guardar el total y desincronizarlo). Clasificar bien es la mitad del diseño.

El vocabulario de eventos

En tiempo real, defines un "idioma" de eventos con nombre —el protocolo entre clientes—:

eventos.ts

// eventos que EMITE el cliente (acciones del usuario)
'gasto:crear'   → { nombre, valor, categoria }
'gasto:mover'   → { id, aEstado }         // arrastrar a otra columna
'gasto:borrar'  → { id }

// eventos que RECIBE el cliente (del servidor, difundidos a todos)
'gasto:creado'  → Gasto                    // alguien creó uno (yo u otro)
'gasto:movido'  → { id, aEstado }
'gasto:borrado' → { id }
'presencia'     → { usuarios: string[] }   // quién está conectado ahora

Fíjate en el patrón: el cliente EMITE una intención (gasto:crear) y el servidor difunde el HECHO a todos (gasto:creado), incluido quien lo originó. Así todos convergen a la misma verdad —es lo que viste en el reto colaborativo del módulo 9—.

La estructura por features

Aplicando el módulo 8, el tablero se organiza así:

estructura.txt

features/
auth/
  login.component.ts          // el login-gate
  auth.store.ts               // usuario actual, token
  auth.guard.ts               // protege el tablero
tablero/
  tablero.component.ts        // la vista principal (columnas)
  columna.component.ts        // una columna
  tarjeta-gasto.component.ts  // una tarjeta
  tablero.store.ts            // estado compartido (gastos, presencia)
  socket.service.ts           // conexión de tiempo real
core/
interceptores, config
shared/
componentes reutilizables

En el tablero colaborativo, ¿dónde clasificarías 'qué gasto estás arrastrando ahora mismo'?

Mini-reto

Diseña el tablero en papel con las cinco preguntas: 1) lista sus vistas; 2) define la fuente de verdad (¿cuál es el estado mínimo?); 3) enumera las operaciones; 4) di qué se deriva con computed (columnas, totales); 5) lista los eventos locales y los del socket. Marca cada pieza de estado como local, compartida o derivada. Ese plano es tu guía para el proyecto.

Qué sigue

Tienes el plano. Ahora lo construyes: el proyecto capstone, un tablero colaborativo en tiempo real completo —login-gate, columnas, sincronización por socket, presencia y actualizaciones optimistas—, con el motor corriendo en vivo. La pieza que corona todo el curso.