Cuanto más fácil sea crear código, más difícil será para los humanos entender todos los detalles, y la presión para enviar nuevas características rápidamente pondrá una tensión en la calidad del código.
Teniendo esto en cuenta, empecé a utilizar un enfoque diferente. Utilizo el LLM para generar primero la documentación de la arquitectura y los diagramas para resolver el problema, y LUEGO empiezo a codificar. Esto tiene muchos beneficios:
Hace que el LLM piense en una estructura limpia y una integración fluida de varias partes del código antes de codificar realmente.
Ayuda a mantener una comprensión general de los principales componentes de la aplicación a medida que crece.
La documentación (no sólo la del código, sino también los diagramas de secuencia, los diagramas de clases, etc.) refleja el código real y se mantiene sincronizada.
A la larga, esto hace que el código sea mucho más fácil de mantener.
Yo llamo a este enfoque generación de código basada en la arquitectura.
En este post, exploraremos este novedoso enfoque para la generación de código basada en la arquitectura.
Para demostrar la idea, te llevaré a través de un breve tutorial en la creación de un mapa mental utilizando el enfoque de la arquitectura en primer lugar, y la adición de características de forma incremental utilizando el mismo enfoque. Al final, deberíamos terminar con algo como esto: https://mindmapper-rho.vercel.app/
Para este tutorial, elegí Claude porque, en mi opinión, es el mejor generador de código que existe. Y con el plugin Claude Dev en VSCode, las actualizaciones incrementales del código son mucho más fáciles que usando Copilot o copiando y pegando entre el chat y mi base de código.
El plugin Claude Dev puede descargarse aquí. Por supuesto, puedes utilizar cualquier otro plugin adecuado si lo deseas.
Ten en cuenta que durante este tutorial, podrías obtener resultados diferentes porque los LLMs pueden ser impredecibles, pero la estrategia general debería funcionar con cualquier LLM que esté bien entrenado para la generación de código.
Así que empecemos...
Los requisitos funcionales son muy simples:
«Quiero ser capaz de crear un mapa mental a partir de lenguaje natural y ser capaz de actualizar el mapa mental con actualizaciones que se introducen automáticamente en el mismo mapa mental». Por último, deberíamos poder guardar y cargar el mapa mental para hacer actualizaciones incrementales del mismo. Eso es todo.
Aquí hay un ejemplo de entrada para empezar:
Lunes por la mañana sesión de gimnasia
Martes por la tarde clase de cocina
Miércoles comida con compañeros de trabajo
Jueves por la noche reunión del club de lectura
Viernes por la tarde cita con el terapeuta
Sábado por la mañana visita al mercado
Domingo cena familiar
Meditación diaria de 30 minutos
Cita quincenal con la pareja
Revisión mensual del presupuesto
Revisión trimestral del dentista
Planificación anual de las vacaciones
Configure el plugin Claude Dev:
Asegúrese de configurar la lectura automática; de lo contrario, tendrá que confirmar muchas veces.
Solicitar a Claude que genere los diagramas de arquitectura
Usted es un desarrollador y arquitecto de ayuda.
Utilice Mermaid para crear un diagrama de secuencia y arquitectura para una aplicación con los siguientes requisitos:
El usuario introduce un texto,
Usted llama a OpenAI en segundo plano y le pide que cree un mapa mental de Mermaid.
Usted muestra este mapa mental en la interfaz de usuario.
Entonces le pedí explícitamente a Claude que usara Next.js.
Si todo se ve bien, podemos seguir adelante y dejar que Claude genere el código basado en el diagrama de arquitectura. Ten en cuenta que como estamos en la misma sesión de chat, ya sabe «qué hacer».
Crear una aplicación Next.js basada en el diagrama de arquitectura.
Claude Dev leerá todos los archivos existentes y te pedirá que generes y edites archivos y ejecutes código para crear la aplicación Next.js. Haz clic en Aceptar/Crear/Guardar.
Algunas cosas a tener en cuenta antes de iniciar la aplicación
En algunos casos puede que tengas que hacer algún pequeño trabajo manual. Aquí hay algunas cosas que tuve que ajustar antes de ejecutar la aplicación.
Asegúrate de ejecutar npm install antes de iniciar la aplicación.
npm installSi OpenAI no está instalado, asegúrese de instalarlo.
npm install openaiY establece tu clave API de OpenAI
export OPENAI_API_KEY=sk-xxxxAsegúrese de reemplazar gpt-3.5 en caso de que se utilice con gpt-4.0-mini. Lo mismo en caso de que Claude utilizara cualquier otro modelo obsoleto o caro no necesario para nuestro caso de uso, por ejemplo, gpt-4.
Ahora puedes iniciar la aplicación.
npm run devAhora veamos el resultado en localhost:3000.
Cuando todo esté dicho y hecho, deberías poder ver algo como esto. La aplicación debería ser una aplicación Next.js completamente funcional en línea con la arquitectura acordada.
Pero parece un poco aburrida y aún no es perfecta, así que vamos a retocarla un poco.
El usuario debe ser capaz de introducir texto, enviarlo a OpenAI, y pedirle que genere un mapa mental Mermaid, y luego mostrarlo al usuario: crear un diagrama de secuencia en Mermaid para demostrar este comportamiento en primer lugar. No codifique todavía.De nuevo, actualicemos primero nuestro diagrama de secuencia y asegurémonos de que los requisitos que tenemos en la cabeza coinciden con lo que Claude ha entendido.
En mi caso, sí. Si obtienes diferentes resultados insatisfactorios, haz unas cuantas iteraciones hasta que cumpla tus expectativas. Recuerda, esta es la referencia para la generación de código, el contrato entre tú y Claude.
Ahora miremos de nuevo en localhost:3000. Se ve mejor.
Después de algunas iteraciones más, podemos obtener algo como esto con sólo unas pocas iteraciones más.
Ahora queremos añadir una nueva función: guardar el mapa mental. Y de nuevo, empezamos con la arquitectura.
Actualizar todos los diagramas para reflejar una nueva característica:
El usuario debe poder guardar y cargar el archivo localmente.
Como se puede ver en los diagramas (diagrama de secuencia y gráfico de estados), ha añadido la nueva función de guardar en el almacenamiento local con éxito. Tiene buena pinta.
Si no cumple sus expectativas, este es el lugar para iterar y refinar la arquitectura hasta que tenga una arquitectura clara para implementar.
Ahora vamos a implementar la nueva característica de acuerdo con la documentación.
Asegúrate de permanecer en el mismo chat, para que Claude tenga algo de contexto sobre la nueva característica a implementar.
Implementa la nueva función en el código.
Después de toda la aplicación está bien, ahora podemos ver los resultados.
Como se puede ver, el nuevo botón se añade, y funciona como un encanto.
Ahora vamos a editar el archivo (aquí test.json) e importarlo para probar la función de carga.
Cambiaré la sesión de gimnasia del lunes a «codificación con Claude».
{"topic":"Weekly Schedule","children":[{"topic":"Monday","children":[{"topic":"Coding with Claude"}]},{"topic":"Tuesday","children":[{"topic":"Evening Cooking Class"}]},{"topic":"Wednesday","children":[{"topic":"Lunch with Coworkers"}]},{"topic":"Thursday","children":[{"topic":"Night Book Club Meeting"}]},{"topic":"Friday","children":[{"topic":"Afternoon Therapy Appointment"}]},{"topic":"Saturday","children":[{"topic":"Morning Farmers Market Trip"}]},{"topic":"Sunday","children":[{"topic":"Family Dinner"}]},{"topic":"Daily","children":[{"topic":"30-minute Meditation"}]},{"topic":"Bi-Weekly","children":[{"topic":"Date Night with Partner"}]},{"topic":"Monthly","children":[{"topic":"Budget Review"}]},{"topic":"Quarterly","children":[{"topic":"Dentist Check-up"}]},{"topic":"Yearly","children":[{"topic":"Vacation Planning"}]}]}
Como puedes ver, después de editar y cargar el mapa mental modificado, funciona.
Ahora vamos a añadir otra función para añadir incrementalmente nuevos pensamientos y dejar que GPT decida dónde ponerlos.
Conclusión
Esto muestra cómo se puede mantener la documentación de la arquitectura en sincronía con el código, y mantener un ojo en la implementación de código coherente que los nuevos desarrolladores o arquitectos puedan entender fácilmente antes de profundizar en el código, por lo que es fácil de mantener.
Bonificación:
Despliegue con un solo clic en Vercel.
Despliegue en Vercel.
vercel login
vercel deploy
Asegúrese de añadir la OPENAI_API_KEY antes del despliegue.
Aquí hay algunos consejos más sobre esto y la generación de código en general:
- Asegúrate de comprobar los modelos LLM (por ejemplo, gpt-4, Sonnet, etc.) utilizados; a veces Claude reemplaza los modelos sin «decírtelo».
- Asegúrate de confirmar tu código después de cada corrección de una característica o error, para que puedas volver fácilmente a una versión anterior, aunque Claude te preguntará antes de guardar de todos modos.
- Intenta mantener tu código lo más modular posible; los archivos monolíticos con demasiadas funciones son difíciles de editar debido al síndrome de pereza de Claude (y de otros LLMs).
- Asegúrate de hacer pruebas a fondo, ya que los cambios masivos pueden romper el código que funcionaba antes y volver atrás (consulta la versión git anterior para deshacer).
Aunque Claude se ha vuelto relativamente barato, vigila los costes; cuanto más generes (especialmente leyendo archivos), más no será gratis. Pero creo que para la mayoría de nosotros el tiempo ahorrado justifica el coste por un factor X...
Puedes implementar y luego generar la documentación, pero en este caso...
¡Feliz generación de código! 😄
