Necesitas TypeScript, Angular, Express y MongoDB a nivel básico. La meta es integrar un flujo vertical, no memorizar otro framework.
CONTENIDO ORIGINAL
Avanza en orden. Cada lección está redactada para Palta es Cool, utiliza ejemplos propios y termina con una actividad cuya respuesta puedes desplegar.
ANTES DE EMPEZAR
Ubícate antes de avanzar
Al terminar deberías poder relacionar Cliente y API con Identidad y permisos y resolver un caso nuevo.
Reserva entre 75 y 120 minutos o divide el laboratorio en dos sesiones.
04 / PREPARA EL LABORATORIO
Utiliza un navegador con herramientas de desarrollo y una versión LTS de Node.js con npm. Angular y MongoDB se preparan cuando llegues a esos bloques.
Abrir la guía de herramientas →Diagnóstico rápido: ¿cómo se relacionan Cliente y API y Identidad y permisos? ＋
No necesitas acertar todavía. Escribe una hipótesis de dos líneas y compárala con tu respuesta al finalizar; si puedes corregirla y justificar el cambio, hubo aprendizaje.
Aprende el tema paso a paso
Seguirás una función de extremo a extremo y mantendrás alineados interfaz, servicio, API y persistencia.
Al terminar podrás
- Construye una función completa antes de multiplicar capas
- La respuesta confirmada actualiza una única fuente de verdad
- Los límites de archivos y componentes necesitan contratos propios
01
Corte vertical
Construye una función completa antes de multiplicar capas
Un corte vertical atraviesa vista, estado, servicio HTTP, ruta, caso de uso y base para una capacidad pequeña. Empieza con contrato, ejemplos y errores; luego implementa backend y cliente. Este recorrido revela incompatibilidades antes de construir muchos archivos que todavía no colaboran.
Define forma de entrada y salida.
Nombra errores esperables.
Prueba el contrato sin depender primero de la interfaz.
¿Qué ventaja tiene terminar crear antes de implementar todas las pantallas?
Mostrar respuesta ＋
Valida temprano que las capas se integran y entrega una función observable en vez de muchas piezas aisladas.
02
Estado y consistencia
La respuesta confirmada actualiza una única fuente de verdad
El cliente distingue estado remoto, edición local y estado derivado. Una mutación puede ser pesimista —esperar confirmación— u optimista —actualizar y revertir si falla—. Después de crear, editar o borrar se actualiza la colección de forma coherente, sin recargar por reflejo ni duplicar datos.
Usa identidades entregadas por el servidor.
Evita doble envío e incorpora idempotencia cuando importa.
Conserva error y reintento sin perder contexto.
¿Por qué no conviene quitar el elemento antes de definir cómo revertir?
Mostrar respuesta ＋
Porque una falla de red o autorización dejaría la vista contradiciendo al servidor y sin un camino claro de recuperación.
03
Archivos y comunicación
Los límites de archivos y componentes necesitan contratos propios
Una subida usa multipart/form-data y no se mezcla sin diseño con JSON. El backend valida y almacena; la base guarda metadatos, no necesariamente los bytes. En Angular, inputs bajan datos y outputs suben eventos; ViewChild se reserva para una referencia concreta, no como canal general de estado.
Muestra progreso y error de subida.
Elimina archivos huérfanos con una política.
No acoples hermanos mediante referencias imperativas.
¿Qué decisión debes tomar si la base confirma el proyecto pero falla la imagen?
Mostrar respuesta ＋
Definir un estado parcial recuperable: conservar el proyecto, informar el fallo y permitir reintento o limpieza, en vez de ocultar la inconsistencia.
Tu recorrido en tres ideas
- Construye una función completa antes de multiplicar capas
- La respuesta confirmada actualiza una única fuente de verdad
- Los límites de archivos y componentes necesitan contratos propios
CIERRE DE LA SECCIÓN
Comprueba que puedes usarlo
Antes de continuar, revisa estos tropiezos frecuentes y resuelve un caso sin copiar los ejemplos.
Construir todas las capas horizontalmente sin terminar una capacidad.
Actualizar la interfaz antes de definir confirmación o reversión.
Ahora hazlo sin guía
Entrega crear, listar, editar y borrar proyectos atravesando Angular, API y MongoDB, con una subida recuperable.
Mostrar pauta de corrección ＋
Una respuesta sólida:
- El contrato es compartido y validado.
- Cada mutación conserva consistencia visible.
- Éxito, vacío, entrada inválida, 404 y red interrumpida están cubiertos.