Mi primera experiencia creando un componente personalizado Qodly con IA

En esta entrada del blog, cuento cómo empecé a desarrollar mi primer componente personalizado para Qodly sin escribir ni una sola línea de código ni crear nada por mi cuenta. Todo el trabajo lo hizo la IA, guiada por instrucciones claras.

Con solo unas cuantas instrucciones adecuadas, conseguí mi primer componente personalizado utilizando VSCode y Github Copilot. Gracias a la IA, puede centrarse en especificar sus necesidades, en lo que quiere, y olvidarse de los complejos aspectos técnicos del desarrollo.

Siga leyendo para saber más.

Antes de empezar

Tal y como se explica en la documentación, si necesita un componente que 4D Qodly Pro no ofrece de forma nativa, un componente personalizado es una solución flexible.

Se puede compartir entre diversos proyectos o en la comunidad Qodly. Una vez disponible, se utiliza igual que cualquier componente nativo de Qodly.

En primer lugar, vi esta demostración completa. Una vez que comprendí la idea principal, seguí estos pasos.

Los dos ingredientes

Descargar las habilidades

Para funcionar correctamente, la IA necesita un conjunto de habilidades. Las habilidades son las directrices que la IA debe seguir como método. Gracias a estas habilidades, la IA sabe cómo implementar un componente personalizado (marco de trabajo, arquitectura, etc.), así como cómo escribir pruebas automatizadas.

Descargué esas habilidades de este repositorio de GitHub.

En VS Code, creé una carpeta vacía y, a continuación, creé la carpeta .github/skills con las habilidades en su interior.

Luego me tocó a mí

Mi función consistía en describir el contrato del componente: sus entradas, los eventos a los que debe estar atento, su comportamiento, etc.

A partir de esa breve especificación y de las habilidades, la IA implementa el componente personalizado por sí misma.

La información que hay que suministrar es:

• el nombre y la finalidad del componente
• propiedades: las propiedades que determinan el comportamiento del componente
• apariencia: cómo se ve el componente en el modo de diseño y en el de visualización
• eventos: las acciones del usuario a las que debe responder el componente
• comportamiento: cómo se comporta el componente en función de los eventos y sus propiedades

Todo esto se proporciona a la IA en lenguaje natural.

Ejemplo: un componente personalizado «copiar al portapapeles»

Mi objetivo era disponer de un componente muy sencillo capaz de copiar una fuente de datos de cadena de Qodly al portapapeles (del equipo en el que se produce el clic). Este componente no existe de forma nativa en 4D Qodly Pro.

Primera instrucción principal

Es hora de enviar la instrucción a la IA. Tal y como se explica en el vídeo, la instrucción se basa en una especie de miniespecificación: un contrato compuesto por tres partes principales, tal y como se ha descrito anteriormente.

Tras instalar las habilidades, envié mi primera instrucción:

Aquí está el texto de la instrucción para copiar y pegar:

Estamos en una carpeta vacía.

Solo tenemos algunas habilidades en la carpeta .github.

Esas habilidades tienen como objetivo crear componentes personalizados para Qodly.

Vamos a empezar a crear un componente personalizado.

Utiliza la habilidad qodly-custom-component.

Genera el esqueleto con @qodly/cli y, a continuación, implementa el componente utilizando la estructura estándar Build / Render / Config / Settings.

Crea un componente desde cero para Qodly. El componente debe seguir un contrato de tres partes: Props, Events y Behavior.

Cuando sea necesario, pídeme que introduzca el nombre del componente, la versión y cualquier otra información requerida.

Estos son los detalles:

Los Props definen lo que se introduce en el componente:
• datasource: fuente de datos de Qodly en formato de cadena, obligatoria
• apariencia del componente en modo de diseño y al mostrarse: un icono de copia estándar

Los eventos definen lo que sale del componente:
• onClick: se activa al hacer clic en el componente

Comportamiento:
• Al hacer clic en el componente, se copia el contenido de la fuente de datos vinculada al portapapeles local (el portapapeles del equipo en el que se ha realizado el clic).
• Si la fuente de datos está vacía o es nula, no se copia nada y el portapapeles local del equipo en el que se ha realizado el clic permanece sin cambios.
• Si el componente no está vinculado a una fuente de datos Qodly de tipo String, no se copia nada y el portapapeles local del equipo en el que se ha producido el clic permanece sin cambios.

La respuesta de la IA

Esta es la respuesta que obtuve:

Y ya se había creado mi componente personalizado copyclipboard

Probando mi trabajo

A continuación, pregunté cómo probar el componente localmente. Copilot me indicó que ejecutara:

 

A continuación, el componente personalizado se puede probar localmente abriendo http://localhost:5001/ en un navegador

Es necesario ejecutar una instancia de 4D

http://localhost:5001/ es la URL local del servidor Vite. Solo aloja un entorno de desarrollo local que incluye el componente personalizado. Para aprovechar todas las funciones de Qodly Studio, como las fuentes de Qodly y las funciones ORDA disponibles, debe asegurarse de que la instancia de Qodly Studio de un proyecto 4D se sirva en el puerto HTTPS 7443.

Así que creé y abrí un proyecto 4D vacío con esta configuración web:

Y la configuración de administración web de la instancia de 4D es la siguiente:

De esta forma, la instancia de Qodly Studio de mi proyecto 4D se aloja en https://localhost:7443/studio. El entorno de desarrollo local la utiliza al ejecutar http://localhost:5001/.

¡Y aquí está el resultado!

Compilación y publicación

Para compilar y publicar la versión final de mi componente personalizado, simplemente le pedí a Copilot que lo compilara tal y como se había hecho con otros componentes personalizados ya existentes. Le di a Copilot un ejemplo (por ejemplo, https://github.com/b-fadwa/Qodly-file-download).

También le pedí que publicara el componente en un repositorio de GitHub determinado, incluyendo tanto el código fuente como las versiones.

Y eso es todo.

Las posibilidades que esto abre

Esta primera experiencia demuestra que la IA reduce considerablemente las barreras para ampliar Qodly Studio. Si puede describir lo que debe hacer un componente (sus propiedades, sus eventos y su comportamiento), la IA puede crearlo por usted.

Las posibilidades de personalizar Qodly Studio son muy amplias: hoy un botón de «copiar al portapapeles», pero mañana cualquier componente que necesiten sus aplicaciones, sin necesidad de ser un experto en front-end. El único límite real es la claridad de su especificación.