Sesión 8: Agentes IA, Vibecoding y Automatización Inteligent | Codeia

Solo para Founders

Este contenido es exclusivo para miembros Founder.

CodeIA2025 - SESIÓN 8 — Angular 20: Signals + Zoneless + Dashboard ProjectOpsSesión 8 - Angular 20

En esta sesión construiremos un dashboard funcional utilizando las capacidades modernas de Angular 20, trabajando con signals, ejecución zoneless y componentes standalone. El objetivo es comprender cómo orquestamos la IA para levantar de principio a fin un proyecto real en solo dos horas, manteniendo siempre el foco en la ingeniería de contexto: arquitectura, prompting y generación controlada de artefactos. Este dashboard forma parte del proyecto P3 del módulo y será la base para trabajos posteriores.

SesiónTodos

Hace 5 meses2h 11m 27s135 visualizaciones5.0(1 reviews)

Tecnologías

Asistente IA para códigoClean CodeJavaScript

Herramientas IA utilizadas

AntigravityClaudeClaude CodeCursorGeminiGitHub Copilot

Iniciar sesión para comenzar Crear cuenta

Sesión 8 — Angular 20: Signals + Zoneless + Dashboard ProjectOps

Contenido Protegido

Inicia sesión para acceder al contenido completo.

Iniciar Sesión Crear Cuenta

Índice de la sesión

00:008:01

Introducción a Angular 20 y el Proyecto Dashboard

Presentación de la sesión sobre Angular 20 para crear un dashboard full stack. Se explican conceptos clave como Signals, Soundless y componentes Standalone.

08:018:26

Herramientas de IA y Experiencias Previas

Discusión sobre las herramientas de IA que usarán los alumnos (Copilot, Antigravity, Claude) y un repaso de experiencias con sistemas de agentes en clases anteriores.

16:273:05

Configuración Inicial y Preparación del Entorno

Creación de la carpeta del proyecto 'Project Ops Dashboard' y apertura en Visual Studio Code, preparando el entorno para empezar a generar el código con la IA.

19:325:35

Prompt Maestro para Generar la Arquitectura

Elaboración y explicación del primer prompt para generar la arquitectura del proyecto en Angular 20, incluyendo la creación de un archivo JSON de contexto.

25:078:17

Generación del Scaffold y Primeros Archivos con IA

Ejecución del prompt y observación de cómo la IA genera la estructura de carpetas y archivos del proyecto, incluyendo código a pesar de la instrucción inicial.

33:2416:54

Análisis del Código Generado: Componentes y Estructura

Revisión detallada de los archivos generados por la IA. Se explican los componentes de Angular, selectores, templates, estilos CSS y la estructura general del proyecto.

50:188:04

Lanzamiento y Debugging Inicial de la Aplicación

Intento de lanzar la aplicación y resolución de los primeros problemas, como la gestión de dependencias con NPM vs PNPM y diferencias en las versiones de Angular.

58:229:46

Revisión Funcional y Detección de Fallos en el Dashboard

Análisis de la aplicación en funcionamiento para identificar errores y funcionalidades ausentes, como el drag-and-drop en el Kanban y formularios que no operan.

01:08:0817:22

Solución de Problemas con Datos Mock Usando un JSON

Creación de un prompt para implementar un archivo 'data.json' que simule una base de datos, solucionando problemas de carga de datos y unificando la fuente de información.

01:25:304:22

Discusión: Conexión a una Base de Datos Real

Explicación teórica sobre cómo migrar del archivo JSON de datos mock a una base de datos real, discutiendo los prompts necesarios para consumir datos de un backend.

01:29:5210:47

Implementando Mejoras con un Prompt Múltiple

Elaboración de un prompt complejo para corregir varios fallos a la vez: añadir selectores a formularios, arreglar la creación de proyectos y habilitar la edición.

01:40:399:09

Personalización de la Interfaz y Estilos de la UI

Se aborda por qué las interfaces de los alumnos son diferentes y se discute cómo dar instrucciones a la IA para lograr un diseño moderno y una vista Kanban.

01:49:485:16

Introducción al Sistema de Agentes para Automatización

Cambio de estrategia para introducir un sistema de agentes (UX/UI, Base de Datos, Tester) que se encarguen de las mejoras del proyecto de forma más automatizada.

01:55:048:06

Gestión de Límites de Tokens y Flujo de Trabajo Multi-IA

Consejos prácticos para manejar el agotamiento de tokens, incluyendo el uso de repositorios Git para cambiar entre diferentes herramientas de IA sin perder el progreso.

02:03:102:54

Creación Práctica de la Estructura de Agentes

Se muestra cómo la IA genera las carpetas y archivos de configuración para cada agente, definiendo su contexto, habilidades y herramientas específicas.

02:06:045:18

Reflexiones Finales, Productividad y Cierre

Discusión final sobre el aumento de la productividad con IA, comparando el proceso con tareas automatizadas. Se comparten experiencias y se cierra la sesión.

CodeIA2025 - SESIÓN 8 — Angular 20: Signals + Zoneless + Dashboard ProjectOpsSesión 8 - Angular 20

Tecnologías

Herramientas IA utilizadas

Sesión 8 — Angular 20: Signals + Zoneless + Dashboard ProjectOps

Contenido Protegido

Lecciones relacionadas