Saltar al contenido principal

Desarrollo de software con Devin: Enviar una rodaja vertical (2ª parte)

Aprende cómo Devin puede ayudarte a construir un patio de juegos Next.js 14 con feedback en vivo de Vitest y un backend NestJS que guarda el progreso del usuario utilizando un UUID anónimo en localStorage.
Actualizado 26 jun 2025  · 12 min de lectura

¡Bienvenido de nuevo! En el primer tutorial de esta serie, Devin desempolvó mi antiguo repositorio fp-ts-exercises y abrió un PR de actualización de dependencias. En esta segunda parte, aumentaremos la dificultad y construiremos funciones de pila completa.

Puedes acceder a todos los tutoriales de la serie Devin aquí:

  1. Configuración y primera Pull Request (Parte 1)
  2. Enviar una rodaja vertical con Devin (2ª parte) 
  3. Integraciones, pruebas y CI/CD (3ª parte) 
  4. Seguridad, implantación y mantenimiento (4ª parte)

Cuando llegues al final de esta segunda parte, ya lo habrás hecho:

  • A Zona de juegos Next.js 14 donde los alumnos editan código en el navegador;
  • Pruebas Vitest en vivo que se vuelven verdes (o rojas) en tiempo real; y
  • A NestJS con base de datos SQL que guarda el progreso con nada más que un UUID anónimo en localStorage.

Por el camino, dejaremos que Devin genere su propia lista de tareas, veremos cómo hace malabarismos con los tickets front-end y back-end, y cómo interviene cuando tropieza con problemas de configuración. Te mostraré dónde gasté (y ahorré) ACUs, qué arreglé a mano y cómo mantener sesiones eficientes.

Recapitulación y requisitos previos

A lo largo de esta serie de tutoriales, trabajaremos en mi (anteriormente) abandonado repositorio de ejercicios fp-ts.

El proyecto es una colección de pequeños retos destinados a enseñar conceptos de programación funcional (como Opción, Cualquiera, etc.) en TypeScript. Ahora mismo, es un repositorio de clonar y ejecutar: los alumnos lo descargan, editan los archivos localmente y ejecutan las pruebas en su propio terminal.

El objetivo es convertir esos ejercicios en un patio de recreo interactivo basado en un navegador, en el que la gente pueda leer una explicación, retocar el código en un editor dentro de la página y ver que las pruebas pasan (o fallan) al instante. Los alumnos también tendrán la oportunidad de iniciar sesión para guardar sus progresos.

Lo que conseguimos en la primera parte

Recuerda que en el primer tutorial:

  • Modernizado el antiguo repositorio fp-ts: últimas dependencias, linting, comprobaciones de tipo.
  • Conecta Devin a GitHub y prueba que puede abrir un pull request limpio.

Herramientas locales que necesitas para la segunda parte

Para este segundo tutorial, necesitaremos

  • Node 20+ y npm 10 (viene con soporte para espacios de trabajo de fábrica).
  • Docker ejecutando un contenedor PostgreSQL (o una instancia PostgreSQL local).

Ajustes recomendados de Devin

Recomiendo los siguientes ajustes para Devin:

  • Establece un tope suave de 5 ACUs por sesión en Configuración > Uso y límitesy crearemos una nueva sesión para cada fase.
  • Mantén visible la pestaña timelapse para pausar o dar un codazo a Devin si se estanca.

Deja que Devin escriba el plan de juego

Pensé que sería interesante empezar poniendo a prueba la capacidad de planificación de Devin. Creé un aviso y le pedí a Devin, utilizando la función "Preguntar" (actualmente gratuita en Beta), que me ayudara a planificar el trabajo que haríamos hoy.

Prompt:

Quiero convertir mi actual repositorio fp-ts-exercises Node + TypeScript (actualmente ejercicios CLI de clonar y ejecutar) en una plataforma de aprendizaje basada en navegador que realice un seguimiento del progreso. 

Experiencia objetivo: 

- Los alumnos abren una aplicación web Next.js, eligen un ejercicio, editan el código en el navegador y ven cómo las pruebas de Vitest pasan o fallan al instante. 

- El progreso (slugs completados) se almacena en el servidor y se recarga en visitas posteriores, pero aún no añadimos cuentas de usuario (utilizamos un UUID anónimo almacenado en el navegador). 

Opciones técnicas por las que me inclino: 

- Frontend: Next.js 14 (React 18, App Router) 

- Editor y ejecutor de código: Sandpack + @vitest/browser 

- API: NestJS 13 con @nestjs/graphql (controlador Apollo) 

- Base de datos: Prisma 5 con PostgreSQL 

- Espacio de trabajo: espacios de trabajo npm simples (apps/web, apps/api, packages/exercises) 

Propón un plan de aplicación paso a paso (lista de tareas) que dé vida a este corte vertical. Estima el coste ACU relativo de cada tarea y señala los pasos de larga duración (por ejemplo, migraciones grandes o instalaciones de dependencias pesadas).

Devin nos devolvió una lista de tareas de seis fases con estimaciones de ACU para cada una, y marcó los pasos de "instalación de dependencia pesada".

Respuesta de Devin:

Fase 1: Configuración del espacio de trabajo (2-3 ACU)

  • Inicializar la estructura del espacio de trabajo npm (1 ACU)
    • Crea apps/web, apps/apiy paquetes/ejercicios directorios
    • Configurar raíz paquete.json con las definiciones del espacio de trabajo
    • Mover los archivos de ejercicios existentes a paquetes/ejercicios/src/
  • Configurar el frontend Next.js 14 (1-2 ACU - Long-running: instalación de dependencias)Inicializa Next.js con App Router en apps/webConfigura TypeScript y Tailwind CSSConfigurar la estructura básica de enrutamiento

Fase 2: Migración del Paquete de Ejercicios (3-4 ACU)

  • Extraer el contenido del ejercicio al paquete compartido (2 ACU)
    • Crea paquetes/ejercicios con extracción de metadatos de ejercicios
    • Analiza los archivos de ejercicios existentes para extraerlos:
      • Instrucciones
      • Código de inicio
      • Soluciones
    • Definir interfaces TypeScript para la estructura del ejercicio
  • Poner en marcha el sistema de detección de ejercicios (1-2 ACU)
    • Construye un escáner del sistema de archivos (como fs.readdirSync en ejercicio.js:17-28)
    • Exportar metadatos del ejercicio: título, descripción, dificultad, pruebas

Fase 3: API Backend (4-5 ACU)

  • Configurar la API NestJS con GraphQL (2 ACU - De larga duración: instalación de dependencias)
    • Inicializa el proyecto NestJS en apps/api
    • Configurar el servidor Apollo GraphQL
    • Configurar puntos finales básicos de comprobación de salud
  • Implementar Prisma + PostgreSQL (2 ACU - De larga duración: configuración de la base de datos)
    • Esquema de diseño para:
      • Sesiones de usuario
      • Ejercicios completados
    • Configurar el cliente Prisma y las migraciones
    • Crear resolvedores de seguimiento del progreso
  • Gestión de sesión de usuario anónimo (1 ACU)
    • Generar UUID y almacenarlo en el navegador localStorage
    • Activar la persistencia del progreso basada en la sesión sin autenticación

Fase 4: Funciones básicas del frontend (5-6 ACU)

  • Interfaz del navegador de ejercicios (2 ACU)
    • Listar ejercicios por categoría (opción, o bien, tareaetc.)
    • Mostrar indicadores de progreso y estado de finalización
    • Habilitar la selección de ejercicios y la navegación
  • Integración del editor de código Sandpack (2-3 ACU - De larga duración: Configuración Sandpack)
    • Configurar Sandpack con soporte TypeScript
    • Carga el código de arranque y fp-ts dependencias
    • Configurar el sistema de archivos para los archivos de ejercicio + prueba
  • Integración del navegador Vitest (1 ACU)
    • Sustituye execSync las llamadas a Vitest (ejercicio.js:45-47) por @vitest/navegador
    • Permite la ejecución de pruebas y la visualización de resultados en tiempo real

Fase 5: Seguimiento del progreso (2-3 ACU)

  • Gestión del progreso del cliente (1 ACU)
    • Configurar el Cliente Apollo para GraphQL
    • Sincroniza el progreso con el backend
  • Detección de finalización del ejercicio (1-2 ACU)
    • Adaptar la lógica de detección de éxito existente (ejercicio.js:48-49)
    • Activar actualizaciones de progreso del backend al pasar la prueba

Fase 6: Pulido y Despliegue (2-3 ACU)

  • Mejoras UI/UX (1-2 ACU)
    • Garantizar un diseño adaptable
    • Añadir estados de carga y gestión de errores
    • Mejorar la visualización de las instrucciones del ejercicio
  • Configuración del despliegue de producción (1 ACU)
    • Configura Docker para ambas aplicaciones
    • Gestionar variables de entorno
    • Configurar el despliegue de la base de datos

Coste total estimado: 18-24 ACU

El plan era bastante bueno en general. He cambiado algunas cosas, sobre todo en la fase seis, ya que abordaremos el despliegue en el cuarto tutorial.

Fase 1: Espacio de trabajo y andamio frontal

Objetivo: Crea espacios de trabajo npm, mueve los archivos heredados y arranca un terminal Next.js 14 en blanco.ACU burn: 3,66 (previsto 1-2).Resultado: El repositorio tiene ahora /apps/web, compartido packages/exercises, y una aplicación Next.js preparada para Tailwind que se ejecuta en localhost:3000.

El aviso

Le pedí a Devin que construyera el plan que hizo para la primera fase. Agentic Devin no tiene contexto de lo que previamente podrías haber preguntado en la función "Preguntar a Devin", así que tienes que crear una pregunta aparte y proporcionar el contexto. 

No voy a pegar todas las indicaciones en este artículo, pero aquí está la primera:

Prompt:

Tarea: Inicializar la estructura del espacio de trabajo npm y el frontend Next.js para la plataforma de navegador fp-ts-exercisesContexto:

Estoy convirtiendo mi actual sistema de aprendizaje basado en CLI fp-ts-exercises en una plataforma basada en navegador. El sistema actual tiene los ejercicios organizados en 10-from-either.exercise.ts:1-3 con la configuración de TypeScript en tsconfig.json:88 y la configuración de Vitest en vitest.config.ts:7 .

Requisitos:

  • Crea la estructura del espacio de trabajo npm:
    • Paquete raíz.json con la configuración del espacio de trabajo para apps/web, apps/api, paquetes/ejercicios
    • Mover los archivos de ejercicios existentes del src/ actual a packages/exercises/src/
    • Conserva la convención actual de nombres de archivos de ejercicios (.ejercicio.ts y .solución.ts)
  • Inicializa el frontend Next.js 14 en apps/web:
    • Utiliza el Enrutador de Aplicaciones (no el Enrutador de Páginas)
    • Configura TypeScript con ajustes estrictos similares a los actuales tsconfig.json:88
    • Añadir CSS de Tailwind para estilizar
    • Crear una estructura básica de rutas para la navegación de ejercicios
  • Mantén la compatibilidad:
    • Asegúrate de que la estructura de ejercicios y las importaciones existentes siguen funcionando
    • Mantener las dependencias fp-ts accesibles en todo el espacio de trabajo
    • Conservar los patrones actuales de configuración de Vitest

Resultados:

  • Paquete.json configurado en el espacio de trabajo en la raíz
  • Aplicación Next.js en apps/web/ con TypeScript y Tailwind
  • Ejercicios migrados en paquetes/ejercicios/
  • Estructura básica de enrutamiento (/ejercicios, /ejercicios/[categoría], /ejercicios/[categoría]/[slug])

Pila tecnológica:

  • Next.js 14 con App Router
  • TypeScript (modo estricto)
  • Tailwind CSS
  • espacios de trabajo npm (no yarn/pnpm)

Presentación:

  • Asegúrate de que el script lint y typecheck pasan
  • Crea un RP con tus cambios

Todos los avisos que escribí posteriormente seguían el mismo patrón: tarea destacada, contexto, requisitos, entregables, pila tecnológica y detalles de presentación.

Lo que Devin hizo en realidad

Tardó bastante en decidir su curso de acción (unos cuatro minutos), pero lo hizo:

  1. Creado el esqueleto del espacio de trabajo
  2. Migrado todas las carpetas de ejercicios a packages/exercises/src.
  3. Arranca Next.js 14 con App Router, TypeScript y Tailwind.
  4. Se han añadido scripts de comprobación de tipo y de pelusa a la aplicación del frontend (después de que le diera un codazo).

Por qué se disparó el coste de la ACU

El coste de la ACU aumentó porque:

  • Devin se pasó un minuto entero haciendo un bucle en npm install reintentos después de que se agotara el tiempo de espera de una réplica.
  • Intentó detener el servidor devs y los procesos con q en Vim, luego Ctrl-C, y ambos fallaron. Le di un poco de tiempo para que intentara arreglarlo por sí mismo, pero acabé interviniendo manualmente y saliendo de los procesos las dos veces. Cada minuto extra significaba ACUs extra, y no habría detectado este problema rápidamente si no hubiera seguido de cerca las acciones de Devin.

Intervenciones humanas y lecciones aprendidas

Aquí tienes un resumen de las correcciones que tuve que hacer:

Fix

Tiempo

Cómo lo hice

Eliminada la tarea de vigilancia del nodo colgado

15 s

Proceso eliminado en el terminal VM.

Reinstalar Tailwind

90 s

npm install tailwindcss postcss autoprefixer --workspace=apps/web y reran tailwind init.

Añadido .next/ a .gitignore

10 s

Comprometido manualmente para evitar PRs hinchados.

Mover grandes árboles de archivos es más rápido a mano, y mucho menos caro, ya que Devin cobra por tiempo/tarea. Arrastré las carpetas, las confirmé y dejé que el agente recogiera la nueva estructura. Pudo extraer mis cambios sin problemas y hacer una fusión por sí mismo.

Dicho esto, tuve que pedirle que ejecutara los scripts lint y typecheck, aunque lo hubiera especificado en mi solicitud inicial. Al final corrió a los dos, pero fracasaron. Aun así, Devin lo consideró un éxito y siguió adelante con las relaciones públicas.

Arreglé ambos problemas localmente, ejecuté los scripts yo mismo y puse en marcha el nuevo servidor de desarrollo web para asegurarme de que se iniciaba como estaba previsto, y envié el commit.

Fase 2: Empaquetar los ejercicios

Objetivo:  Extrae todos los archivos de los retos en un paquete reutilizable packages/exercises y genera metadatos para cada ejercicio.Quema ACU:  0,6 (previsto 2+).Resultado: El paquete compartido exporta metadatos tipificados que la aplicación web y la futura API pueden importar con import { exercises } from '@exercises/registry'.

Lo que Devin hizo en realidad

Creó Devin:

  • Interfaces TypeScript estructuradas para ejercicios, metadatos, categorías y el catálogo completo.
  • Ejercicio analizador sintáctico que:
    • Extrae metadatos de comentarios de código y firmas de funciones
    • Analiza el código de inicio, el código de la solución y los casos de prueba Vitest
    • Genera automáticamente etiquetas a partir del uso de fp-ts
    • Convierte los nombres en camelCase en títulos legibles
  • Sistema de descubrimiento de ejercicios que:
    • Busca en el sistema de archivos los pares .exercise.ts y .solution.ts
    • Construye un catálogo basado en slug (por ejemplo, option-01 )
    • Organiza los ejercicios por categorías con almacenamiento en caché para mejorar el rendimiento
  • Exportaciones cómodas para consultar ejercicios y categorías:
    • getExercises(), getExerciseBySlug(), getExercisesByCategory(), getCategories(), getCategoryBySlug()

Por qué Devin acabó por debajo del presupuesto

Devin consiguió mantener bajo el coste de la ACU: así lo hizo:

  • Sin instalaciones pesadas ni llamadas a la red
  • Los movimientos de archivos fueron sencillos; Devin utilizó git mv (barato) en lugar de copiar-pegar más diff
  • La generación de metadatos era puro TypeScript, rápido de planificar y ejecutar

Intervenciones humanas

Esta vez, ¡nada!

Aprendiendo de la última vez, comprobé la rama de Devin y ejecuté los scripts localmente. Todo se compiló y el registro exporta definiciones de tipos limpias, lo que lo convierte en el material de entrada perfecto para la interfaz de usuario y la API que construiremos a continuación.

Fase 3: NestJS + GraphQL API

Objetivo: Monta un servicio NestJS 13 que exponga el progreso del ejercicio mediante GraphQL y persista los datos en PostgreSQL con Prisma.ACU burn: 4.2 (previsto 4).Resultado: apps/api botas en localhost:4000/graphql. Puedes consultar y modificar los registros de progreso mediante un identificador de sesión anónimo.

Lo que Devin hizo en realidad

Para la tercera fase, Devin:

  1. Creada una API NestJS completa en apps/api con TypeScript y Apollo GraphQL
  2. Integra PostgreSQL con Prisma ORM y configura el esquema con los modelos Session y CompletedExercise
  3. Gestión de sesiones anónimas mediante UUID (sin necesidad de autenticación)
  4. Construimos resolvedores GraphQL para la creación/validación de sesiones, consultas de ejercicio y seguimiento del progreso
  5. Conectado el backend al paquete de ejercicio compartido (packages/exercises ) para el descubrimiento de datos
  6. Configurado CORS para soportar la comunicación con el frontend Next.js
  7. Garantizar la compatibilidad tipográfica entre el esquema GraphQL y las interfaces TypeScript existentes
  8. Establecer scripts de desarrollo, flujo de migración de bases de datos e integración con Prisma Studio

Dónde tropezó Devin

Estos son los problemas que encontré durante la tercera fase y las correcciones que tuve que hacer:

Edición

Fix

Tiempo

Olvidé importar reflect-metadata → la aplicación se bloquea al iniciarse

incitó Devin: "Me encuentro con este error al intentar ejecutar "npm run dev":

La metapropiedad 'import.meta' sólo está permitida cuando la opción --module es 'es2020', 'es2022', 'esnext', 'system', 'node16', 'node18' o 'nodenext'".

1 ACU, 5 minutos

Falta el script Lint

incitó Devin: "Añade el script lint al paquete api y asegúrate de que pasa".

1 ACU, 4 minutos

Cometido accidentalmente .env

git rm --cached apps/api/.env && echo '.env' >> apps/api/.gitignore

20 s

Lecciones aprendidas

Estas son mis conclusiones:

  • Config vs. código: Devin destaca una vez que el framework está en su sitio, pero para diagnosticar problemas de dependencia sigue haciendo falta un ojo humano.
  • Ejecútalo siempre localmente: Ya había creado una base de datos PostgreSQL local en mi máquina, y las instrucciones de PR para ejecutar la migración de Prisma e iniciar el entorno de desarrollo eran claras y fáciles de seguir (véase la imagen siguiente). El comentario de Devin decía que había conseguido ejecutar la API localmente, pero npm run dev se bloqueó hasta que se añadió reflect-metadata .

instrucciones de instalación

  • A Devin se le dan bien los comentarios de relaciones públicas. Comenté el PR, explicando a Devin que había intentado ejecutar la API localmente y había encontrado un error. Inmediatamente me dio un emoji de un ojito, y la sesión se reanudó sola para solucionar el error, y se envió una solución unos minutos después.

devin interactuando con el comentario de PR

devin trabajando en un pull request de github

  • Comprueba siempre si hay archivos secretos: Devin había enviado un archivo .env con una variable DATABASE_URL, que contenía un nombre de usuario y una contraseña ficticios. Una vez extraído localmente, cambié el nombre de usuario y la contraseña por los identificadores de mi base de datos local y me aseguré de eliminar el archivo del sistema de seguimiento git y añadirlo a .gitignore. Veremos en futuros tutoriales cómo manejar los secretos con seguridad.

Fase 4: Zona de juegos Sandpack y pruebas en vivo

Objetivo: Proporciona a los alumnos un editor de navegador que ejecute soluciones fp-ts y comprobaciones Vitest en tiempo real.Quema ACU: 7.2 (previsto 3-4).Resultado: Al visitar /exercises/option-01 se abre una vista dividida: El editor Sandpack a la izquierda, el túnel de pruebas a la derecha, y aparece un mensaje de éxito en el momento en que se superan todas las especificaciones.

Lo que Devin hizo en realidad

Esto es lo que hizo Devin en la cuarta fase:

  • Páginas de navegación y listados de ejercicios con soporte dinámico de categorías y slug
  • Editor Sandpack integrado con TypeScript, fp-ts y compatibilidad con el sistema de archivos en tiempo real
  • Se ha sustituido el ejecutor de pruebas CLI por Vitest en el navegador y comentarios en directo
  • Conecta el frontend al backend a través de Apollo Client para el seguimiento del progreso basado en sesiones
  • Implementación de una interfaz de usuario responsiva con estados de carga y gestión de errores

Donde Devin quemó ACUs extra

Devin quemó más ACUs de lo esperado para esta fase: he aquí por qué:

Causa

Cómo lo he solucionado / mitigado

Dejé código CLI runner obsoleto en apps/web - Sandpack intentó compilar ambas copias y se bloqueó.

Borré pages/index.tsx del andamio original, lo confirmé y volví a ejecutar Devin.

Esperó respuesta pero no preguntó explícitamente → Bucle for.

Escribe "Tiene buena pinta, continúa" en el chat tras tres minutos de silencio.

Lecciones aprendidas

Mis conclusiones esta vez son:

  • Mirar en silencio = quemar dinero. Mantén abierta la pestaña Timelapse, y si Devin hace un bucle, dale un codazo o haz una pausa.
  • Elimina pronto el código muerto. En realidad, Devin no borra el código obsoleto por sí mismo, a menos que tú se lo indiques. Antes cometí el error de pedirle que moviera archivos sin que le dijeraexplícitamente que los borrara, y así acabamos con múltiples puntos de entrada que confundieron mucho al pobre Devin en esta fase.

Devin se tomó un tiempo aquí. Bucle for y bucle for, intentando salvar los mismos problemas, no conectando correctamente el backend y el frontend, haciendo cambios, reiniciando los servidores, comprobando en el navegador si funcionaba, etc. Era como un trabajo de desarrollo normal, supongo...

Ahora tenemos una aplicación funcional. Pude iniciar tanto la API como los servidores web, navegar hasta localhost, editar la función stub, pulsar Guardar y ver cómo el panel de prueba pasaba de rojo a verde. Entonces me di cuenta de que sólo hacía el trabajo a medias, y codifiqué el test y la solución del primer ejercicio en cada página de ejercicios. Se lo señalé y, después de más bucles, pudo corregirlo y enviar sus correcciones.

Fase 5: Sincronización del progreso con UUID

Objetivo: Persiste el estado de finalización de cada alumno y vuelve a pintar la barra lateral al recargar, todo ello sin cuentas de usuario.ACU burn: 2,7 (previsto 2-3).Resultado: Un diminuto gancho de React almacena ahora un UUID generado por el navegador, llama a la API GraphQL en cada pasada de prueba y precarga el progreso cada vez que se monta la zona de juegos.

Lo que Devin hizo en realidad

Para la quinta fase, Devin:

  • Cliente Apollo integrado para la comunicación GraphQL entre el frontend y el backend
  • Implementada la gestión de sesiones anónimas con UUIDs almacenados en localStorage
  • Datos de progreso sincronizados en tiempo real e indicadores visuales tanto a nivel de categoría como de ejercicio
  • Detecta la finalización del ejercicio conectándote al ejecutor de pruebas Vitest en el navegador
  • Se ha añadido compatibilidad sin conexión, actualizaciones optimistas y una sólida gestión de errores con lógica de reintento (que nunca pedí).

Una de las ventajas es que Devin ha añadido la actualización optimista-UI para que las insignias pasen a ✅ al instante. Esto es importante porque mantiene la interfaz ágil incluso en conexiones de alta latencia.

Lecciones aprendidas

Mis conclusiones son:

  • Un alcance pequeño significa errores mínimos: Se trataba de una tarea bastante pequeña y con un alcance muy ajustado, por lo que Devin la ejecutó bien y dentro de un buen plazo.
  • Di lo que quieras, pero también lo que no quieras: Me di cuenta de que Devin tiene tendencia a intentar ampliar el alcance, y una vez más me dio más de lo que le pedí. En este caso, no me importó, pero si hay algo que realmente no quieres que haga, dilo explícitamente. Por ejemplo, en cada uno de los avisos, especifiqué "sin funcionalidad de inicio de sesión" porque supuse que iba a intentar ir allí.

Ahora tenemos la prueba de que nuestra canalización de sesiones anónimas funciona de extremo a extremo. Es hora de darle un buen aspecto en la fase de pulido final.

Fase 6: Pulido de la interfaz de usuario y panel de progreso

Objetivo: Transforma la interfaz utilitaria en una experiencia "aireada" en tonos pastel y añade un panel que visualice la racha de cada alumno, su escala de dificultad y su actividad semanal.ACU burn: 11 (previsto ≈ 3).Resultado: Temas pastel claro / oscuro, tarjetas de ejercicio rediseñadas y un panel de control en vivo que muestra anillos, barras y contadores de rachas. Devin consiguió las líneas generales, pero yo intervine para rescatar los desajustes de nombres y los intercambios de dependencias deshonestos.

En esta fase, amplié deliberadamente el alcance para ver cómo manejaría Devin un conjunto mayor de peticiones. En realidad, pensé que sería mucho más fácil para Devin que la fase 3, con toda la implementación del backend. Alerta de spoiler: Me equivoqué.

Lo que Devin abordó a partir del aviso

Este es el desglose de mis requisitos y el resultado de Devin:

Requisito

Producción de Devin

Sistema de diseño Pastel

Añadidas variables CSS de Tailwind para el primario azul suave, éxito menta, acentos lavanda. Establece esquinas rounded-lg (12 px) y sutiles sombras paralelas.

Tipografía y espaciado

Introducida una clase prose con font-inter, 1,5 rem de ventaja, y generosa px-8 py-6 en las tarjetas.

Panel de progreso

Nueva ruta /dashboard con:

  • Anillo "Módulo actual" (@radix-ui/react-progress ).
  • Barra "X de Y" (anchura animada).
  • Contadores de rachas y tiempo transcurrido mediante temporizador local (que no funcionan) + campos Prisma.

Tarjetas mejoradas

Sustituido Option 01 por "Ninguno y Algunos". Añadido texto sobre el objetivo, pistas e insignia de dificultad. Interfaz de usuario completamente desordenada para los ejercicios.

Ampliación del catálogo

Generados otros 10 ejercicios "stub" con nombres narrativos y plantillas de marcadores de posición. Los metadatos incluyen la dificultad, el tiempo estimado y la categoría.

Dónde se equivocó Devin

Las cosas no salieron a la perfección-Devin:

  1. Cambiados los nombres de los archivos de paquetes de ejercicios sin actualizar el wrapper o el resolver → tiempo de ejecución 500s; parcheando +1 ACU.
  2. Sustituyó silenciosamente Postgres por SQLite "para facilitar el desarrollo local" sin pedirme permiso. No lo habría sabido si no hubiera estado observando.
  3. Dejé docenas de declaraciones console.log en componentes React, y las comprobaciones de pelusa seguían reintentando.

Lecciones aprendidas

Mis conclusiones:

  • La lógica del salpicadero aún necesita trabajo: Devin conectó contadores de rachas y de tiempo, pero los dejó sin funcionar. Las métricas del back-end deben tener al menos una prueba de integración para que la interfaz de usuario del "camino feliz" no se fusione prematuramente.
  • El uso de ACU se acelera en sesiones largas: Después de ~8 ACUs, la sesión se ralentizó notablemente. Las sesiones cortas y limitadas (< 5 ACUs) mantienen el contexto ajustado y al agente receptivo.
  • Devin "ayudará" a intercambiar dependencias: Sustituyó Postgres por SQLite sin preguntar. Fija los servicios críticos en tu aviso: "No cambies el motor de la base de datos; sigue con Postgres".
  • Las tareas de diseño activan la recarga en caliente: Cada actualización de Tailwind/Vite cuenta como tiempo de agente. Quizá una forma mejor de hacerlo sea pausar la sesión antes de editar estilos en masa, y luego despertar a Devin cuando el proyecto se compile limpiamente.

Esa tarea fue larga y costosa, en comparación con el resto del trabajo que hicimos. Al menos Devin es consciente de dónde fueron mal las cosas:

informe devin

Tenemos algo bonito, pero nos ha llevado un poco de tiempo y no es totalmente funcional. Algunas de las métricas del panel de control están codificadas: ¿dos ejercicios en nuestra categoría de opciones? Tenemos 10. Las métricas de rachas y tiempo empleado tampoco están conectadas a nada, y la interfaz de usuario de las páginas de ejercicios individuales es bastante mala.

Coste y Tiempo Retrospectivo

Cómo resultaron los números

He aquí un resumen de cómo fue todo:

Fase

ACUs planificadas

ACUs reales

Delta

Notas

1 - Espacio de trabajo y andamio

1 – 2

3.66

≈ 1.7

Bucle extra en npm install, arreglo manual de Tailwind

2 - Paquete de ejercicios

2

0.60

▼ 1.4

Movimientos de archivos sencillos; sin instalaciones pesadas

3 - API y Prisma

4

4.20

▲ 0.2

Configurar arrugas (falta reflect-metadata )

4 - Parque infantil y pruebas

3 - 4

7.20

▲ ≈ 3.5

Ciclos de recarga en caliente, bloqueo del editor de fusiones

5 - Sincronización del progreso

2 - 3

2.70

▼ ≈ 0.3

Gancho directo + consultas

6 - Pulido de la interfaz de usuario y panel de control

2 - 3

11.00

▲ ≈ 8

Reinstalaciones, intercambio silencioso de BD, grandes recargas de CSS

Total

18 - 24

29.36

▲ ≈ 6 – 11

Aproximadamente un 35 % por encima de la estimación inicial

Coste: 29,36 UCA × 2,25 $ ≈ 1,25 $66 

Ahorro de tiempo frente al trabajo manual

Esta es mi estimación del tiempo ahorrado:

Tarea

Estimación humana

Devin (+ correcciones)

Red

Bootstrapping NestJS + GraphQL + Prisma

4 horas

1 h (inc. arreglos)

-3 horas

Cableado del navegador Sandpack + Vitest

3 horas

1 h 20 min

-1 h 40 min

Rediseño completo en colores pastel

6 horas

2 horas (pero aún no funciona)

−4 h

Tiempo total

~13 horas

~4 h 20 min

-8 h 40 min

Puntos clave

Son cosas que recomiendo:

Tema

Qué hacer

Por qué es importante

Haz que las sesiones sean cortas

- Tapa cada carrera con ≤ 5 ACUs.

- Divide los grandes objetivos en entradas del tamaño de un bocado.

Las sesiones > 8 ACUs son lentas, y las tasas de error saltan a ≈35 %. Las ráfagas cortas mantienen la capacidad de respuesta y son más baratas.

Da un codazo pronto, haz una pausa a menudo

- Mira la pestaña Timelapse; si Devin hace un bucle, escribe "Continuar" o "Dormir".

- Haz una pausa mientras editas en masa CSS o docs, y luego despierta a Devin una vez que el código se compile.

Los bucles en reposo siguen haciendo tictac en el contador; el churn de recarga en caliente durante el trabajo de diseño es pura quema de ACU.

Tratar la configuración como un trabajo manual

- Mueve/renombra tú mismo grandes árboles de archivos (arrastrar y soltar supera a los scripts 0.8 ACU).

- Corrige manualmente los errores del primer paquete, los reintentos son sumideros de ACU.

La E/S de archivos y las instalaciones repetidas representan el ~30 % de los créditos desperdiciados.

Comprobación local de tipo y pelusa

- Ejecuta siempre tus guiones de prueba (en nuestro caso, lint y typecheck) antes de fusionar.

- Añade estos comandos a tu CI (¡más sobre esto en el próximo tutorial!).

Devin declarará el éxito incluso cuando la tubería falle.

Pin tecnología crítica

- Indica lo que no debe cambiar: "Quédate en Postgres, sin inicio de sesión, quédate con Tailwind".

- Lista de variables de entorno necesarias en .env.example.

Devin cambiará "amablemente" Postgres por SQLite o añadirá nuevos ejecutores de pruebas a menos que se le diga que no lo haga.

Ocúpate tú mismo de los secretos

- Elimina los archivos .env de los commits; añádelos a .gitignore.

- Planifica un paso de gestor secreto para tutorías posteriores.

Devin no distingue necesariamente las credenciales ficticias de las reales.

El editor de fusiones se bloquea

- Participa para ayudar con las confirmaciones de fusión y las salidas del proceso.

Los bloqueos de Vim hacen perder minutos y ACUs.

Elimina pronto el código muerto

- Después de los movimientos, git rm archivos obsoletos para que Devin no vea puntos de entrada duplicados.

Los archivos redundantes confunden al agente e inflan los tiempos de construcción.

Añadir pruebas unitarias para la nueva lógica

- Los contadores de rachas, temporizadores o métricas necesitan pruebas de backend, no confíes sólo en la interfaz de usuario. De nuevo, espera tu momento, lo veremos en el próximo tutorial.

Devin cableó el salpicadero pero dejó los contadores sin funcionar hasta que las pruebas dejaron al descubierto el hueco.

Di lo que quieras y lo que no quieres

- Las negativas explícitas ("No auth yet") evitan la ampliación del ámbito.

- Revisa el plan que propone Devin y recorta los extras.

Al agente le gusta excederse en las entregas, genial para las demostraciones, malo para los presupuestos.

¿Y ahora qué?

Ahora tenemos:

  • Un patio de recreo en colores pastel que ejecuta pruebas fp-ts en el navegador
  • Una API NestJS + PostgreSQL que recuerda el progreso con nada más que un UUID
  • Un panel de progreso que realmente resulta divertido

En próximo tutorialpasaremos de las funciones al flujo de trabajo y la colaboración con:

  1. Pruebas continuas: Añade las suites Jest y Playwright, y deja que Devin mantenga ambas en verde con cada RP.
  2. Canalización CI/CD:  Genera Acciones de GitHub que construyan las aplicaciones web y API y ejecuta las pruebas en Headless Chrome.
  3. Integraciones de equipo: Conecta Devin a Jira para actualizar tickets, envía resúmenes de construcción a Slack y experimenta con la nueva función Wiki de Devin para una documentación ligera.

Si estás listo para continuar, haz clic en el tercer elemento de la lista para pasar al siguiente tutorial:

  1. Configuración y primera Pull Request (Parte 1)
  2. Enviar una rodaja vertical con Devin (2ª parte) 
  3. Integraciones, pruebas y CI/CD (3ª parte) 
  4. Seguridad, implantación y mantenimiento (4ª parte)
Temas

Construye agentes de IA con estos cursos:

Curso

Developing LLM Applications with LangChain

3 h
24.4K
Discover how to build AI-powered applications using LLMs, prompts, chains, and agents in LangChain.
Ver detallesRight Arrow
Comienza el curso
Ver másRight Arrow
Relacionado

blog

7 proyectos de IA para todos los niveles

Desarrolla tu portafolio y mejora tus habilidades para crear soluciones innovadoras a problemas complejos trabajando en proyectos de IA.

Abid Ali Awan

8 min

An AI juggles tasks

blog

Cinco proyectos que puedes crear con modelos de IA generativa (con ejemplos)

Aprende a utilizar modelos de IA generativa para crear un editor de imágenes, un chatbot similar a ChatGPT con pocos recursos y una aplicación clasificadora de aprobación de préstamos y a automatizar interacciones PDF y un asistente de voz con GPT.
Abid Ali Awan's photo

Abid Ali Awan

10 min

blog

10 proyectos SQL listos para la cartera para todos los niveles

Selecciona tu primer -o siguiente- proyecto SQL para practicar tus habilidades SQL actuales, desarrollar otras nuevas y crear una cartera profesional sobresaliente.
Elena Kosourova's photo

Elena Kosourova

11 min

Tutorial

Desarrollo de backend en Python: Guía completa para principiantes

Esta completa guía te enseña los fundamentos del desarrollo backend en Python. Aprende conceptos básicos, marcos de trabajo y buenas prácticas para empezar a crear aplicaciones web.
Oluseye Jeremiah's photo

Oluseye Jeremiah

15 min

Tutorial

Tutorial de DeepSeek-Coder-V2: Ejemplos, instalación, puntos de referencia

DeepSeek-Coder-V2 es un modelo de lenguaje de código de código abierto que rivaliza con el rendimiento de GPT-4, Gemini 1.5 Pro, Claude 3 Opus, Llama 3 70B o Codestral.
Dimitri Didmanidze's photo

Dimitri Didmanidze

8 min

Tutorial

Tutorial de DeepChecks: Automatizar las pruebas de aprendizaje automático

Aprende a realizar la validación de datos y modelos para garantizar un sólido rendimiento del aprendizaje automático utilizando nuestra guía paso a paso para automatizar las pruebas con DeepChecks.
Abid Ali Awan's photo

Abid Ali Awan

12 min

Ver másVer más