Programación de IA con 4D y VS Code: una guía práctica

Si has visto recientemente nuestro seminario web sobre programación con IA en 4D 21, habrás podido comprobar cómo creamos una aplicación completa de agencia de viajes (estructura de la base de datos, datos, formularios y una función basada en IA) casi en su totalidad mediante comandos de lenguaje natural. En esta entrada, te guiaremos a través de la configuración y te mostraremos cómo aplicar ese mismo flujo de trabajo a tus propios proyectos.

Lo que necesitas

• 4D 21 (o posterior)
• Visual Studio Code con GitHub Copilot habilitado (consulta la configuración más abajo)
• La extensión 4D Analyzer (ver más abajo)
• Un conjunto de archivos de instrucciones adaptados al desarrollo con 4D (ver más abajo)

Configuración de GitHub Copilot

Antes de nada: GitHub Copilot funciona a través de tu cuenta de GitHub, no directamente a través de OpenAI, Anthropic ni ningún otro proveedor de IA. No es necesario comprar créditos en Claude ni en ningún otro servicio. Todo se gestiona a través de GitHub.

1. Crea una cuenta de GitHub si aún no tienes una: github.com

2. Activa GitHub Copilot en tu cuenta en github.com/features/copilot. Se incluye un plan gratuito con una generosa asignación mensual; no se requiere tarjeta de crédito para empezar.

3. Inicia sesión desde VS Code. Abre VS Code, haz clic en el icono de Cuentas en la esquina inferior izquierda e inicia sesión con tu cuenta de GitHub. Una vez conectado, aparecerá el icono de Copilot en la barra de estado y el chat estará disponible.

4. Selecciona tu modelo. En el panel de Chat de Copilot, un selector de modelos te permite elegir qué modelo de IA genera tus respuestas (GPT-4o, Claude, Gemini y otros, dependiendo de tu plan). El predeterminado funciona bien para empezar; puedes cambiarlo más adelante.

Para consultar el uso y gestionar tu plan: Ve a github.com/settings/copilot. Puedes ver cuántas solicitudes has utilizado, cambiar a un plan de pago y gestionar la facturación si necesitas más capacidad.

La extensión 4D Analyzer

La extensión 4D Analyzer es lo que hace que VS Code reconozca realmente el lenguaje 4D. Instálala desde VS Code Marketplace y obtendrás:

• Coloreado de sintaxis para el código 4D: métodos, clases, clases de formulario, etc.
• Autocompletado de código y ayuda con las firmas
• Diagnósticos (errores y advertencias) en tiempo real mientras escribes

Esto es muy importante cuando se trabaja con IA. Cuando GitHub Copilot genera código 4D, el Analyzer lo valida inmediatamente. Verás los errores resaltados directamente en el editor, lo que significa que puedes detectar errores incluso antes de intentar ejecutar el código, y enviárselos a Copilot para que los corrija.

Para instalar:

1. Abre VS Code
2. Ve al panel de Extensiones (Cmd+Shift+X en macOS, Ctrl+Shift+X en Windows)
3. Busca «4D Analyzer»
4. Haz clic en Instalar

Eso es todo. Abre cualquier carpeta de proyecto 4D y la extensión se activará automáticamente.

Archivos de instrucciones: enseñar a Copilot a escribir código 4D

De serie, GitHub Copilot conoce muchos lenguajes de programación, pero no tu estilo de codificación, tus mejores prácticas ni los detalles más sutiles del desarrollo en 4D. Ahí es donde entran en juego los archivos de instrucciones.

Los archivos de instrucciones son documentos Markdown ubicados en la carpeta .github/instructions/ en la raíz de tu proyecto. Copilot los lee automáticamente y los utiliza como contexto para cada respuesta. Piensa en ellos como una guía de estilo que sigue la IA.

Dónde conseguirlos

Hay disponible un conjunto de archivos de instrucciones 4D listos para usar en GitHub:

👉 github.com/mathieu-ferry/4D-github-instructions

Cómo configurarlos

1. En la raíz de tu proyecto 4D, crea una carpeta .github/instructions/
2. Copia los archivos de instrucciones del repositorio anterior en esa carpeta
3. Abre Copilot Chat y pregunta: «¿Cuáles son tus estándares de codificación 4D?», y debería responderte basándose en el contenido de tus archivos de instrucciones

Si lo hace, ya estás listo. Las instrucciones cubren temas como:

• El uso preferente de clases frente a métodos procedimentales
• Convenciones de clases de formularios
• Referencias al esquema JSON para formularios y catálogos
• Convenciones de nomenclatura y estructura del código

Consejo: Estos archivos son un punto de partida. Los mejores resultados se obtienen cuando los adaptas a tus propios hábitos de programación y a las convenciones del proyecto. Añade tus propias reglas, elimina lo que no sea aplicable y ve perfeccionándolas con el tiempo.

Poniendo todo en práctica: dos ejemplos

Ejemplo 1: Creación de una estructura de base de datos con indicaciones

Cuando trabajas con el editor de estructura, los cambios se reflejan en el archivo 4DCatalog del catálogo. Con los archivos de instrucciones del repositorio de GitHub, Copilot puede editar este mismo archivo de forma segura por ti (el contexto del esquema está incluido en esas instrucciones). Sigues trabajando a partir de indicaciones y, tras reiniciar, los cambios en la estructura son visibles inmediatamente en 4D. He aquí una secuencia realista:

Usted: «Crea una tabla en el catálogo que enumere a los empleados con su apellido y nombre».

Copilot edita su estructura. Reinicie 4D y obtendrá una tabla «Employee» con una clave primaria UUID y los campos solicitados.

Usted: «Crea una nueva tabla que enumere los departamentos de la empresa».

Aparece otra tabla.

Usted: «Añade una relación entre empleados y departamentos, de modo que cada empleado pertenezca a un departamento».

Copilot añade una clave externa y la definición de relación adecuada. De esta forma, construyes todo un modelo relacional, paso a paso, simplemente hablando con la IA.

La idea clave: describes la intención en lenguaje sencillo y la IA se encarga de los detalles del catálogo. Los archivos de instrucciones mantienen el resultado alineado con las convenciones esperadas (claves UUID, tipos de atributos adecuados, sintaxis de relaciones correcta).

Ejemplo 2: Creación de un formulario y su clase

Los formularios son donde las cosas se ponen realmente interesantes. Puedes describir un diseño en una sola indicación:

Tú: «Crea un formulario 4D que enumere tareas. Quiero un cuadro de lista en el lado izquierdo con resumen, apellido del asignado, departamento, fecha de vencimiento y estado. En el lado derecho, muestra una vista detallada con toda esa información más la descripción de la tarea y el jefe de departamento. Asocia el formulario a una clase de formulario».

Copilot genera:

• El JSON del formulario (form.4DForm) con el cuadro de lista, los campos de entrada y el diseño
• La clase de formulario (.4dm) con la gestión de eventos y la lógica de enlace de datos

El resultado es un formulario funcional que puede abrir en 4D y empezar a utilizar. ¿Será perfecto al primer intento? Probablemente no. Pero le proporciona una base sólida que puede perfeccionar mediante indicaciones de seguimiento o ajustes manuales.

Perfeccionar el diseño

El primer formulario generado es una base funcional, no un producto acabado. Hay varias formas de guiar a Copilot hacia un mejor resultado:

• Pega una captura de pantalla como inspiración. Busca una interfaz de usuario que te guste, pégala en Copilot Chat y di: «Rediseña el formulario utilizando esto como referencia visual». Copilot extraerá patrones de diseño, tonos de color y espaciado de la imagen.
• Proporcione un resumen de diseño preciso. Describa la intención, el estilo y las limitaciones: «Rediseña este formulario para una agencia de viajes que necesita procesar correos electrónicos rápidamente. Prioriza la densidad de la información, los indicadores de estado de alto contraste y una navegación fácil de usar con el teclado».
• Especifica los tokens de diseño de forma explícita. Si tienes un sistema de diseño, introdúcelo directamente: «Utiliza un espaciado base de 8 píxeles, fondos grises neutros (#F5F5F5), azul (#1A73E8) para las acciones principales y rojo/naranja/verde semántico para el estado de las tareas».
• Pide coherencia con los formularios existentes. En lugar de empezar desde cero cada vez: «Haz que este formulario sea visualmente coherente con el formulario de Empleados existente: mismo estilo de encabezado, jerarquía de botones y densidad de filas de la lista».
• Codifica tu estilo en los archivos de instrucciones. El enfoque más duradero. Define tu paleta de colores, reglas de espaciado y convenciones de componentes de la interfaz de usuario una vez en .github/instructions/, y todos los formularios que genere Copilot las seguirán automáticamente, sin necesidad de indicarlo.

Modos de Copilot Chat: Preguntar, Planificar y Agente

Copilot Chat en VS Code tiene tres modos, seleccionables desde el selector de agentes en la parte inferior del panel de chat:

• Preguntar: Solo preguntas y respuestas. Responde a preguntas sobre tu código, conceptos de programación o VS Code sin tocar ningún archivo. Útil para comprender cómo funciona algo o explorar ideas.
• Plan: Genera un plan de implementación estructurado y paso a paso utilizando un análisis de código fuente de solo lectura, antes de escribir una sola línea de código. Pone de manifiesto las cuestiones pendientes sobre requisitos ambiguos, para que puedas aclarar la intención desde el principio. Una vez que estés satisfecho, el botón «Iniciar implementación» transfiere el plan directamente al modo Agente para su ejecución.
• Agente: El caballo de batalla de la programación. Edita de forma autónoma archivos de todo tu proyecto, ejecuta comandos de terminal, invoca herramientas y realiza iteraciones para corregir errores hasta que la tarea se completa.

Todos los ejemplos anteriores de esta publicación se ejecutaron en modo Agente, que es el valor predeterminado adecuado para cualquier tarea que modifique realmente tu proyecto.

Cuándo vale la pena el modo Plan

Hasta ahora hemos estado trabajando de forma incremental: una indicación, un cambio, revisión, repetir. Para trabajos exploratorios o adiciones rápidas, eso es perfectamente eficiente. Pero para funciones más grandes que afectan a varios componentes a la vez, el modo Plan merece ese paso adicional.

El modo Plan lee tu código antes de generar nada. El resultado es un resumen de alto nivel dividido en pasos prácticos, incluyendo cualquier pregunta que surja sobre tus requisitos. Iteras sobre el plan en una conversación sencilla hasta que refleje con precisión lo que quieres, y luego se lo pasas a Agent.

Esto resulta especialmente valioso en proyectos 4D, donde una sola función puede afectar al catálogo, a uno o más métodos o clases, a un formulario JSON, a una clase de formulario y a archivos de recursos, todo a la vez. Detectar una suposición errónea en la fase de planificación es mucho más barato que desenredar una ejecución de múltiples archivos que ha ido por mal camino.

Cómo se ve esto en la práctica

En lugar de esta secuencia incremental:

• «Añadir una tabla de correo electrónico»
• «Crear un formulario para correos electrónicos»
• «Añadir un botón para procesar correos electrónicos»
• «Escribir el método de procesamiento de IA»
• «Añadir datos de muestra»

Puedes escribir una única instrucción bien estructurada que describa la función completa, ejecutarla a través de Plan para validar el enfoque y, a continuación, dejar que Agent la ejecute en una sola pasada coordinada. Esto es exactamente lo que hicimos en el seminario web al crear la función de IA de «correo electrónico a tarea»: una gran instrucción que abarcaba la tabla, el formulario, el botón, la lógica de procesamiento, la configuración de la clave API y los datos de muestra, todo de una sola vez.

Consejos para un flujo de trabajo de IA eficiente

1. Adapta tu enfoque al tamaño de la tarea. Las indicaciones paso a paso funcionan bien cuando estás explorando o cuando el alcance no está claro, lo que facilita la revisión y la corrección del rumbo. Para funciones bien definidas, una única indicación más amplia con el modo Plan es más eficiente. La documentación de VS Code recomienda desglosar las tareas complejas, pero también señala que incluir los resultados esperados (qué archivos, qué comportamiento) ayuda al agente a verificar su propio trabajo.
2. Nombra lo que esperas, no cómo hacerlo. Para indicaciones más extensas, enumerar los archivos, tablas o formularios que esperas que se creen ayuda a reducir las conjeturas. Evita especificar en exceso los detalles de implementación: ese es el trabajo del agente. El objetivo es establecer límites claros, no escribir un pliego de condiciones.
3. Mantén las reglas fijas en los archivos de instrucciones, y el contexto puntual en la indicación. Las convenciones, las reglas de nomenclatura y las preferencias arquitectónicas deben ir en .github/instructions/, no repetirse en cada indicación. Según la documentación de VS Code, los archivos de instrucciones se cargan en cada interacción, así que céntrate en lo que la IA no puede deducir solo a partir de tu código.
4. Informa de los errores, con contexto para los que no sean evidentes. Pegar un error de tiempo de ejecución directamente en Copilot suele ser suficiente para errores aislados. Para problemas de lógica o arquitectura, indica también el archivo relevante o explica el comportamiento esperado; el mensaje de error por sí solo no dará suficiente información.
5. Utiliza capturas de pantalla para el diagnóstico visual. Adjuntar una captura de pantalla es más rápido que describir un problema de diseño con palabras, y la documentación de VS Code lo incluye como una técnica de contexto recomendada. Nota: es posible que sea necesario habilitar la compatibilidad con imágenes dependiendo de tu plan de Copilot y de la configuración de la organización.
6. Revisa el resultado de la IA: la barra se adapta a lo que está en juego. Para prototipos, basta con una lectura rápida. Para producción, trátalo como cualquier código aportado: comprueba la lógica, los casos extremos, la validación de entradas y cualquier cosa que afecte a servicios externos o credenciales.
7. Mantén los archivos de instrucciones concisos y actualizados. Unas instrucciones más específicas producen mejores resultados, pero los archivos de instrucciones se cargan en cada solicitud. La documentación de VS Code aconseja centrarse en aspectos que la IA no puede deducir del código: convenciones no predeterminadas, decisiones arquitectónicas, detalles del entorno. Un archivo abultado que lo abarca todo empieza a diluir la señal.

Más allá: agentes y habilidades personalizados

Todo lo que hemos visto hasta ahora utiliza los agentes integrados con archivos de instrucciones compartidos. Pero VS Code ahora te permite ir más allá definiendo tus propios agentes y habilidades personalizados, almacenados en tu proyecto en .github/agents/.

Un agente personalizado es un archivo Markdown (.agent.md) que le da a la IA una personalidad específica, restringe las herramientas que puede utilizar y, opcionalmente, lo vincula a un modelo concreto. Por ejemplo, podrías crear un agente revisor de 4D dedicado que se centre exclusivamente en la calidad del código, la exposición a riesgos de seguridad y las convenciones de nomenclatura para proyectos 4D, utilizando herramientas de solo lectura para que nunca modifique nada a menos que se le pida explícitamente. O un agente generador de estructuras de 4D precargado con tus plantillas de formularios y clases, listo para crear nuevas pantallas bajo demanda.

Las habilidades (archivos.skill.md ) van un paso más allá: son capacidades reutilizables y portátiles que pueden incluir scripts y acceder a recursos externos. Mientras que un archivo de instrucciones contiene reglas pasivas, una habilidad contiene lógica activa que el agente puede invocar. Un ejemplo práctico de 4D: una habilidad que sabe cómo consultar el sitio de documentación de 4D y extraer ejemplos de código relevantes directamente al chat.

La documentación de VS Code también describe los traspasos: flujos de trabajo encadenados en los que un agente pasa el contexto al siguiente con solo hacer clic en un botón. Un agente de planificación genera una especificación de la función, luego se la pasa a un agente de implementación, que a su vez se la pasa a un agente de revisión. Cada paso es aprobado por un humano antes de ejecutarse.

Puedes generar todo esto con IA directamente en el chat: escribe /create-agent o /create-skill y describe lo que deseas. Se pueden almacenar a nivel del espacio de trabajo (compartidos con el equipo a través del control de código fuente) o en tu perfil de usuario (personales, disponibles en todos los proyectos).

Más allá de la generación de código: otros flujos de trabajo útiles de IA

Crear funciones es solo una de las cosas que un agente de IA hace bien en un flujo de trabajo de desarrollo. Aquí hay otras situaciones en las que Copilot puede asumir una carga significativa:

• Documentación. Pide al agente que redacte o actualice documentación técnica a partir del código fuente, genere cadenas de documentación para métodos y clases, o traduzca la documentación existente a otro idioma. En el caso concreto de 4D, esto puede significar generar contenido de ayuda para el usuario a partir de la lógica de las clases de formulario, o producir una referencia de API estructurada a partir de un conjunto de métodos.
• Revisión de seguridad. Pídele al agente que analice un método, una clase de formulario o una característica completa en busca de vulnerabilidades comunes: entradas no validadas, falta de control de acceso, exposición a SQL o inyección, credenciales codificadas. Un agente de seguridad dedicado de solo lectura (véase más arriba) es la opción ideal aquí. Esto no sustituirá a una auditoría de seguridad adecuada, pero es un primer paso rápido.
• Refactorización. Los agentes de IA gestionan bien las tareas mecánicas de refactorización: renombrar símbolos de forma coherente, extraer lógica repetida a métodos o clases compartidos, convertir código procedimental a patrones ORDA o modernizar código 4D heredado según las mejores prácticas actuales.
• Explicación del código e incorporación. Utilice el modo «Ask» para comprender código desconocido, rastrear lo que hace un método u obtener un resumen en lenguaje sencillo de una parte de lógica compleja. Esto resulta especialmente útil al hacerse cargo de un proyecto existente o al incorporar a nuevos miembros del equipo.
• Generación de pruebas. Pide al agente que escriba pruebas unitarias para un método o clase determinados, incluyendo casos extremos y condiciones de error. Copilot también puede ejecutar las pruebas tras generarlas y repetir el proceso si fallan.
• Mensajes de confirmación y descripciones de PR. VS Code incluye acciones inteligentes integradas para generar mensajes de confirmación a partir de cambios preparados y resúmenes de solicitudes de incorporación de cambios. Pequeños ahorros de tiempo que se acumulan.

¿Qué viene ahora?

El flujo de trabajo descrito en esta publicación ya está a tu disposición. Crea tu primera tabla y formulario mediante indicaciones, utiliza el modo Plan para abordar una característica completa, refactoriza código heredado, genera documentación, ejecuta una revisión de seguridad, crea un agente personalizado para tu equipo. Lo único que queda es probarlo.

Aquí tienes todo lo que necesitas para empezar:

1. Descarga 4D 21
2. Instala VS Code con GitHub Copilot habilitado
3. Añade la extensión 4D Analyzer
4. Copia los archivos de instrucciones en tu proyecto

Abre el modo Agent, describe lo que quieres crear y comprueba hasta dónde llegas.

Nos encantaría conocer tu experiencia. Comparte tus resultados, flujos de trabajo y preguntas en el foro de 4D, ¡la comunidad te está esperando!