Blazor · Ejercicio guiado con agente de IA · 60 min

Ejercicio DTO de Usuarios (con uso de Agente)

Te damos una aplicación Blazor separada en tres capas (Domain, BusinessLogic y Web) que ya funciona: lista usuarios y permite dar de alta nuevos usuarios. Debés encontrar qué está mal en cómo el frontend usa los datos y corregirlo con un DTO y un mapper, pero esta vez no escribís el código vos: lo dirigís, lo revisás y lo commiteás. El que escribe el código es un agente de IA que corre en la terminal: OpenCode.

agente de consola plan antes de editar revisar el diff commit manual capas entidad de dominio DTO mapper ocultar la contraseña

Antes de arrancar

dotnet --version   # tiene que empezar con 9
git --version      # cualquier versión

Uso de IA

PREDECIR  →  PEDIR  →  REVISAR EL DIFF EN RIDER  →  VERIFICAR (build/tests)  →  COMMIT A MANO
0

Instalar y conectar OpenCode

5 min

terminal de Rider

Abrí LabDTO en Rider y abrí la terminal integrada de Rider (en el panel vertical, por default en el panel izquierdo: [>_ ]).

Antes de instalar: ¿ya tenés OpenCode?

Corré esto:

opencode --version

Si tenés la versión 1: desinstalala

El comando puede variar si en su momento lo instalaste con otro gestor (npm, Homebrew, scoop, etc.).

# Desinstalar la v1
npm uninstall -g opencode-ai

# Instalar la v2 (última versión)
npm install -g @opencode/cli@latest

# Comprobar la versión
opencode --version
Checkpoint opencode --version dice opencode v2…

Elegir el modelo: Big Pickle

Posicionate en la carpeta de la solución si no lo estás ya y arrancá el agente en la terminal:

cd [ruta]/LabDTO
opencode

En la pantalla de OpenCode podés ver en qué modo está el agente, o sea qué permisos sobre los archivos tiene (Build o Plan; Shift+Tab pasa de uno a otro). Al lado te dice qué modelo de IA estás usando.

La ventaja de la interfaz de OpenCode es que podés, según la tarea que quieras hacer, utilizar distintas IAs (Copilot, Claude, Codex, etc.) desde el mismo contexto. OpenCode v2 permite también trabajo de IAs en paralelo.

Dentro de OpenCode escribí /models y elegí Big Pickle. Es un modelo gratuito de OpenCode.

Es gratis, pero con condiciones
  • Los modelos gratuitos tienen límites de uso. Si aparece un error de límite, esperá un rato o cambiá de modelo con /models.
  • Big Pickle es gratis mientras el equipo de OpenCode junta feedback. Por eso no pegues en los pedidos claves, datos personales ni código que no sea de este ejercicio.
Checkpoint Cambiás a modo Plan y escribís una pregunta simple, ¿Qué es este proyecto?, y el agente responde.
Comandos útiles en OpenCode
  • @ adjunta un archivo al pedido: Explicame @LabDTO.Web/Components/Pages/Usuarios.razor.
  • /btw (by the way) te permite hacer preguntas sobre la sesión mientras el agente está trabajando.
  • /new crea una nueva sesión. Cada tarea distinta que quieras hacer, hacela en una sesión nueva.
  • /sessions te permite cambiar entre sesiones.
  • /init analiza la estructura y los archivos de tu repositorio para crear o actualizar automáticamente el archivo AGENTS.md (texto markdown con contexto sobre el proyecto, muy útil para el agente).
  • Si la interfaz completa se ve mal en la terminal de Rider, probá opencode mini, una versión minimalista.

Primer contacto: generar el contexto del agente

Con el agente en modo Build (Shift+Tab hasta que el indicador lo muestre), ejecutá en la terminal de OpenCode:

/init Crea el archivo Agents.md con el contexto del proyecto LabDTO-inicial

/init recorre el repositorio y crea un archivo AGENTS.md en la raíz de la solución. Esperá a que termine y después pedile:

Explicame las tres capas de esta solución y qué proyecto referencia a cuál.

Luego de revisarlo, abrí en Rider (con File System) el AGENTS.md que se acaba de generar y léanlo entre todos:

Revisá si puso prohibiciones para git. Si no lo hizo, agregá esto al AGENTS.md:

## Reglas de git

Podés consultar el estado del repositorio, pero nunca modificarlo ni publicarlo. Eso lo decide siempre una persona.

### Permitido (solo lectura)
- `git status`, `git diff`, `git log`, `git show`, `git blame`

### Prohibido
- **Publicar:** `git push` (con o sin `--force`), `git remote add/set-url/remove`.
- **Reescribir historia:** `git reset --hard`, `git rebase`, `git commit --amend`.
- **Borrar trabajo:** `git clean`, `git checkout .`, `git restore .`, `git stash drop/clear`, `git branch -D`, `git tag -d`.
- **Mover o integrar cambios:** `git merge`, `git cherry-pick`, `git checkout`/`git switch` a otra rama.
- **Guardar por tu cuenta:** `git add -A`, `git add .` y `git commit`. Si hay cambios listos, avisá y sugerí un mensaje de commit; no lo ejecutes.

### Commits
- **Nunca ejecutes `git commit`** (tampoco `git commit --amend`) ni `git add`. Los commits los hace siempre una persona, para que el historial y la lista de contribuidores reflejen solo a quienes escriben y revisan el código.
- No agregues líneas `Co-authored-by` ni ninguna mención al agente en mensajes de commit, ni configures `user.name` / `user.email`.
- Cuando haya cambios listos, avisá y proponé un mensaje de commit en texto para que la persona lo use.

### Si hace falta algo prohibido
Frená, explicá qué comando necesitarías y por qué, y esperá confirmación de la persona. No busques alternativas que logren el mismo efecto por otro camino (por ejemplo, borrar archivos con otros comandos para esquivar `git clean`).
Checkpoint /init generó AGENTS.md, el agente respondió sobre las capas y el grupo sabe contestar: ¿qué dice AGENTS.md? ¿Qué se le prohíbe al agente?
Para pensar Compará el AGENTS.md generado y la respuesta del agente con el diagrama del Paso 1. ¿Acertaron en todo? ¿Qué corregirían en AGENTS.md para que el agente no se equivoque la próxima vez? ¿Por qué conviene arrancar un trabajo nuevo en modo Plan?
1

Diagnóstico: primero ustedes, después el agente

8 min

antes de tocar nada, entender qué hay

Entrá a Usuarios en la app (con ▶ Run sobre LabDTO.Web en Rider, queda en http://localhost:5080), mirá la tabla y agregá un usuario con el formulario.

La solución está separada en capas. Cada flecha es una referencia entre proyectos: el de la izquierda puede usar las clases del de la derecha.

LabDTO.Web  ──▶  LabDTO.BusinessLogic  ──▶  LabDTO.Domain
(frontend)       (lógica de negocio)         (entidades)

LabDTO.Domain/Usuario.cs                       la entidad de dominio
LabDTO.BusinessLogic/UsuarioServicio.cs        lista y agrega usuarios
LabDTO.Web/Components/Pages/Usuarios.razor     la página que acabás de usar

Abrí esos tres archivos en Rider y leelos. Después hagan esto en este orden:

  1. Respondan las tres preguntas sin usar el agente y anótenlo en la columna del grupo.
  2. Recién ahora, pídanle al agente (en modo Plan) que las responda.
  3. Completen las otras dos columnas.
Respondé estas tres preguntas sobre @LabDTO.Web/Components/Pages/Usuarios.razor,
@LabDTO.BusinessLogic/UsuarioServicio.cs y @LabDTO.Domain/Usuario.cs: ...
PreguntaRespuesta del grupoRespuesta del agente¿Coinciden? ¿Quién tenía razón?
¿Qué datos de cada usuario muestra la página? ¿Alguno no debería verse?
El proyecto Web solo referencia a BusinessLogic. ¿Cómo puede entonces usar una clase de Domain?
Cuando agregás un usuario, ¿quién decide su contraseña? ¿En qué capa está esa decisión?
Checkpoint Las tres filas están completas y el grupo puede explicar por qué, si en Usuario renombran Email a Correo, también deja de compilar el frontend.
Para pensar La solución está separada en capas, pero la página trabaja directo con la entidad de dominio. ¿Para qué sirve separar en proyectos si el frontend termina conociendo todo igual? Si el agente coincidió con ustedes en todo, ¿seguirían revisando su trabajo?
2

Plan antes de código

7 min

cambiar al agente Plan, revisar, corregir, y recién ahí aprobar

Antes de pedir nada, dos conceptos. Los necesitan para juzgar si el plan del agente tiene sentido.

Qué es un DTO Un DTO (Data Transfer Object) es una clase sin lógica: solo propiedades (string, int, etc.), pensada para llevar datos de una capa a otra. No hereda de la entidad ni la referencia: es una clase aparte, con las propiedades que elijas.

En este ejercicio es el «formato de intercambio» entre BusinessLogic y Web: el servicio entrega DTOs y recibe DTOs, y la entidad Usuario se queda solamente referenciada en BusinessLogic. Eso sirve para dos cosas:

Desacoplar capas. El frontend depende solo del DTO. Si la entidad cambia, alcanza con ajustar la traducción en BusinessLogic.

Ocultar información. Un dato que no está explícito en el DTO no llega al frontend.
Qué es un mapper Alguien tiene que traducir los datos entre la entidad Usuario y el UsuarioDto, en ambos sentidos. Esa responsabilidad no es del DTO ni de la página. Por eso va en una clase aparte dedicada solo a eso: el mapper. La traducción queda en un único lugar, en la única capa que conoce las dos clases: BusinessLogic.

Con el agente en Plan, pidan:

Quiero que el frontend deje de usar la entidad Usuario. Proponé un plan con
DTO y mapper, sin editar nada. Decime qué archivos vas a crear o tocar.

Revisen el plan con esta lista antes de aprobarlo:

Pregunta sobre el plan¿Cierra?
¿Qué propiedades pone en el DTO? ¿Está la contraseña?
¿En qué proyecto y carpeta pone el DTO y el mapper? ¿Es la capa correcta?
¿El mapper se encarga de las dos direcciones (entidad → DTO y DTO → entidad)?
¿Dice quién va a decidir la contraseña de los usuarios nuevos?
¿Qué archivos toca? ¿Alguno que no debería?

Si algo no cierra, díganselo al agente y que ajuste el plan.

Checkpoint Tienen solamente el plan que el grupo entiende y aprueba, y anotaron al menos una cosa que corrigieron o que el agente hizo bien sin que se la pidieran.
3

Ejecución en tres ciclos

30 min

cada ciclo: predecir → pedir → revisar el diff → verificar → commit a mano

Cómo revisar el diff y commitear en Rider

Escribir buenos pedidos Un pedido útil tiene tres partes:
  • Objetivo: qué quiero lograr.
  • Restricciones: qué no se puede hacer o tocar.
  • Criterio de aceptación: cómo sé que terminó bien (un comando que corre, algo que no debe aparecer).
Un pedido corto como «hacé un DTO» deja todas las decisiones en manos del agente. A veces las acierta, pero no hay forma de saberlo sin leer el diff.

Ciclo A. DTO + mapper 12 min

Predecir. Anotá: ¿qué propiedades creen que va a poner el agente en el DTO? ¿En qué carpeta va a poner el mapper?

Pedir. Armen el prompt con la información brindada, modo Build, Enter.

Revisar el diff. Lean los archivos nuevos en Rider con esta lista:

¿Qué miro?Cómo tiene que estar¿Está bien?
Propiedades del UsuarioDtoSolo lo que necesitan la tabla y el formulario. Sin contraseña.
Referencias del DTONo hereda de Usuario ni usa nada de LabDTO.Domain
Lógica en el DTONinguna: solo propiedades
Ubicación del mapperLabDTO.BusinessLogic/Mappers
Sentidos del mapperToDto(Usuario) y ToEntity(UsuarioDto)
Contraseña de los usuarios nuevosLa decide ToEntity, usando la misma que hoy asigna la página
Archivos tocadosSolo en BusinessLogic: la página todavía no se toca

Si hay algo mal, no lo arreglen a mano: pídanselo con un pedido preciso (objetivo, restricciones, criterio de aceptación). Por ejemplo:

Corregí UsuarioDto y UsuarioMapper.
Objetivo: el DTO lleva solo Id, Nombre y Email; el mapper convierte en los dos sentidos.
Restricciones: el DTO no tiene contraseña, no referencia LabDTO.Domain y no tiene
lógica; el mapper va en LabDTO.BusinessLogic/Mappers; no toques LabDTO.Web.
La contraseña que hoy asigna la página a los usuarios nuevos pasa a decidirse en ToEntity.
Criterio de aceptación: "dotnet build LabDTO.BusinessLogic" compila sin errores.

Verificar y commitear, seleccionando únicamente el archivo verificado. Commit a mano desde Rider.

Checkpoint Compila. El DTO no tiene contraseña, el mapper vive en BusinessLogic y hay un commit hecho por ustedes. El escribano anotó qué decidió mal el agente con el pedido corto (o que no se equivocó, y cómo lo comprobaron).

Ciclo B. El servicio habla en DTOs 8 min

Predecir. Escriban antes de correr nada: si el servicio pasa a devolver y recibir DTOs, ¿qué proyecto va a dejar de compilar y en qué lugares?

Pedir. Armen el prompt con la información brindada, modo Build, Enter.

Revisar y verificar. Leé el diff de UsuarioServicio.cs y comparen con la predicción. ¿El agente ya había hecho estos cambios con el pedido anterior?

Commit a mano.

Ciclo C. Blazor con DTOs 10 min

Predecir. ¿Qué cambios va a tener que hacer el agente en Usuarios.razor? Anótenlos en una lista.

Pedir. Armen el prompt con la información brindada, modo Build, Enter.

Revisar el diff y verificar.

¿Qué miro?Cómo tiene que estar¿Está bien?
@using de la páginaEl de la carpeta de DTOs, no el de Domain
TablaId, Nombre y Email; sin contraseña
AltaArma un UsuarioDto; no asigna contraseña
Mapper en la páginaNo aparece

Después ■ Stop y ▶ Run sobre LabDTO.Web, y prueben listar y dar de alta un usuario.

Commit a mano. ¿El agente ya lo había modificado?

Checkpoint La solución compila entera, la tabla muestra Id, Nombre y Email, el alta funciona y hay tres commits hechos por ustedes (uno por ciclo).
4

Cierre y verificación

10 min

arquitectura, navegador y reglas para el agente

4.1 Chequeo de arquitectura 2 min

Buscá en el proyecto Web (a mano o con el agente en modo Plan) cualquier mención del dominio. No tiene que aparecer nada.

Si encuentran algo, pídanle al agente que lo corrija (con un pedido preciso) y vuelvan a commitear.

Antes de terminar, probá escribir @u.Password en alguna celda de la tabla y mirá qué marca Rider. Después sacalo sin commitear.

4.2 Prueba en el navegador 3 min

Con la app corriendo, listen y agreguen un usuario. La contraseña no tiene que verse en ningún lado.

4.3 Tres reglas para el agente 5 min

Hoy el agente solo conocía la arquitectura y los comandos; no sabía qué es un DTO ni dónde va cada cosa en este proyecto. Con lo que tuvieron que corregir, pídanle al agente que actualice AGENTS.md con tres reglas para que el próximo pedido no tenga esos errores. Por ejemplo:

- Las entidades de Domain no salen de BusinessLogic: los servicios reciben y devuelven DTOs.
- Un DTO es una clase sin lógica ni referencias a Domain, y no incluye contraseñas.

Hagan un último commit a mano.

Checkpoint final El chequeo de arquitectura no encuentra nada, la app funciona y AGENTS.md tiene tres reglas nuevas, escritas por ustedes, con su commit.
Para pensar
  • Si ahora renombran Email a Correo en Usuario, ¿qué proyectos dejan de compilar? ¿Y la página?
  • Borraste el @using, pero Web sigue referenciando a BusinessLogic, que referencia a Domain. ¿Qué le impide a alguien (o a un agente) volver a usar Usuario en la página? ¿Qué cosa lo detecta?
  • ¿Qué habría pasado si commiteaban sin leer el diff?

Registro del grupo

¿Qué hizo bien el agente sin que se lo pidieran?
¿Qué tuvieron que corregir? ¿Cómo lo detectaron?
Reglas que agregaron a AGENTS.md

🏁 Vuelta extra (de tarea)

para los que quieran seguir

Ojo con los archivos de contexto Hasta donde sabemos, Claude Code lee CLAUDE.md y Codex lee AGENTS.md; OpenCode v2 lee solamente AGENTS.md. Verificalo en la documentación de cada uno, porque estas herramientas cambian rápido.