Angular 21 de Cero a Experto / Tiempo real y sistemas distribuidos

Reto: panel colaborativo de gastos en tiempo real

Reto40 min100 XP

Este reto integra todo el módulo: un panel de gastos COLABORATIVO en tiempo real, donde varios usuarios agregan gastos que todos ven al instante, con presencia (quién está en línea) y métricas en vivo. Lo construyes sobre un socket simulado con reconexión, el mismo patrón que usarás en el proyecto final del curso. Cuando funcione, tendrás el corazón de una app colaborativa moderna.

Reto

Gastos compartidos en vivo con presencia

Difícil40 min100 XP(×2 sin mirar la solución)

Qué debes construir

Un PanelColaborativo sobre un socket simulado, con:

Gastos compartidos: cuando un usuario emite gasto:crear, el "servidor" confirma con gasto:nuevo a TODOS (incluido quien lo creó), con un id asignado. Todos ven la lista crecer en vivo.
Presencia: eventos usuario:entra / usuario:sale mantienen la lista de conectados.
Métricas en vivo (derivadas): total, por categoría y número de conectados, recalculadas con cada evento.
Otros usuarios simulados: un "bot" que agrega gastos y entra/sale por su cuenta, para que se vea el efecto colaborativo.

Reglas

Modelo Socket.io: on/emit/off con eventos con nombre.
Las métricas deben DERIVARSE del estado, no actualizarse a mano.
Limpia los listeners al terminar (off) para no duplicar.

40:00

Cuando estés listo, arranca el reloj.

El razonamiento. Una app colaborativa en tiempo real se apoya en tres ideas que ya dominas, combinadas: un CANAL de eventos con nombre (el socket) por el que fluyen los cambios; un ESTADO local (la lista de gastos, el conjunto de conectados) que los eventos actualizan; y MÉTRICAS DERIVADAS (total, por categoría) que se recalculan solas. Lo que lo hace "colaborativo" es que el servidor reenvía cada cambio a TODOS los clientes —incluido quien lo originó—, así que la fuente de verdad es compartida y todos convergen al mismo estado. El bot simula a esos otros usuarios para que veas el efecto sin un servidor real. En Angular, el estado serían señales, las métricas computed, y el template se repintaría solo.

Qué observar:

Cuando TÚ agregas "Café", lo emites (gasto:crear) y el servidor te lo reenvía como gasto:nuevo —igual que a todos—: la fuente de verdad es compartida.
Ana y Luis (bots) entran, agregan gastos y salen; TÚ los ves aparecer en vivo en el total, en las categorías y en el conteo de "en línea".
Cada evento recalcula las métricas DERIVADAS (total, por categoría, conectados) —nunca se actualizan a mano—.
Al final, off() limpia los listeners: sin fugas ni duplicados.

Esto es, en esencia, una app colaborativa completa: un canal de eventos compartido, estado que converge en todos los clientes, y métricas reactivas. En Angular real, cambiarías el SocketSimulado por io(url), el estado serían señales y las métricas computed. Es el esqueleto exacto del proyecto final del curso —un tablero colaborativo en tiempo real—.

Qué sigue

Dominas el tiempo real de punta a punta: conexión robusta, eventos, presencia y colaboración en vivo. Tu app puede sentirse viva. El próximo módulo la prepara para el mundo real: nivel producción —SSR e hidratación, zoneless, @defer, testing y monorepos—. Todo lo que convierte una app que funciona en tu máquina en una app rápida, testeada y lista para desplegar.