Ma première expérience de création d’un composant personnalisé Qodly à l’aide de l’IA

Dans cet article de blog, je raconte comment j’ai commencé à développer mon premier composant personnalisé pour Qodly sans écrire une seule ligne de code ni créer quoi que ce soit moi-même. Tout le travail a été effectué par l’IA, guidée par des consignes claires.

En quelques consignes bien ciblées, j’ai obtenu mon premier composant personnalisé à l’aide de VSCode et de Github Copilot. Grâce à l’IA, vous pouvez vous concentrer sur la définition de vos besoins et de ce que vous souhaitez, sans vous soucier des aspects techniques complexes du développement.

Poursuivez votre lecture pour en savoir plus.

Avant de commencer

Comme expliqué dans la documentation, si vous avez besoin d’un composant que 4D Qodly Pro ne fournit pas en natif, un composant personnalisé constitue une solution flexible.

Il peut être partagé entre différents projets ou au sein de la communauté Qodly. Une fois disponible, il s’utilise exactement comme n’importe quel composant natif de Qodly.

J’ai d’abord regardé cette démo complète. Une fois que j’ai compris l’idée générale, j’ai suivi ces étapes.

Les deux ingrédients

Télécharger les compétences

Pour fonctionner correctement, l’IA a besoin d’un ensemble de compétences. Les compétences sont les lignes directrices que l’IA doit suivre en tant que méthode. Grâce à ces compétences, l’IA sait comment implémenter un composant personnalisé (framework, architecture, etc.) ainsi que comment écrire des tests automatisés.

J’ai téléchargé ces compétences depuis ce dépôt GitHub.

Dans VS Code, j’ai créé un dossier vide, puis j’ai créé le dossier .github/skills dans lequel j’ai placé les compétences.

Puis ce fut mon tour

Mon rôle consistait à décrire le contrat du composant : ses entrées, les événements à surveiller, son comportement, etc.

À partir de cette brève spécification et des compétences, l’IA implémente le composant personnalisé de manière autonome.

Les informations à fournir sont les suivantes :

– le nom et la fonction du composant

– les propriétés: les propriétés qui déterminent le comportement du composant

– l’apparence: à quoi ressemble le composant en mode conception et en mode rendu

– les événements: les actions de l’utilisateur auxquelles le composant doit réagir

– le comportement: comment le composant se comporte en fonction des événements et de ses propriétés

Toutes ces informations sont fournies à l’IA en langage naturel.

Exemple : un composant personnalisé « copier dans le presse-papiers »

Mon objectif était de disposer d’un composant très simple capable de copier une source de données de type chaîne de caractères Qodly dans le presse-papiers (de la machine sur laquelle le clic a lieu). Ce composant n’existe pas en natif dans 4D Qodly Pro.

Première invite principale

Il est temps de donner une consigne à l’IA. Comme expliqué dans la vidéo, la consigne repose sur une sorte de mini-spécification : un contrat en trois parties principales, comme décrit ci-dessus.

Après avoir installé les compétences, j’ai envoyé ma première instruction :

Voici le texte de la requête à copier-coller :

Nous sommes dans un dossier vide.

Nous avons simplement quelques compétences dans le dossier .gihub.

Ces compétences visent à créer des composants personnalisés pour Qodly.

Nous allons commencer à créer un composant personnalisé.

Utilisez la compétence qodly-custom-component.

Créez une structure de base avec @qodly/cli, puis implémentez le composant en utilisant la structure standard Build / Render / Config / Settings.

Créez un composant à partir de zéro pour Qodly. Le composant doit respecter un contrat en trois parties : Props, Events et Behavior.

Si nécessaire, demandez-moi de saisir le nom du composant, sa version et toute autre information requise

Voici les détails :

Les Props définissent ce qui alimente le composant :
• datasource : source de données Qodly obligatoire sous forme de chaîne de caractères
• Apparence du composant en mode conception et lors du rendu : une icône de copie standard

Les événements définissent ce qui sort du composant :
• onClick : déclenché lorsqu’on clique sur le composant

Comportement:
• Lorsqu’on clique sur le composant, le contenu de la source de données liée est copié dans le presse-papiers local (celui de la machine sur laquelle le clic a eu lieu).
• Si la source de données est vide ou nulle, rien n’est copié et le presse-papiers local de la machine sur laquelle le clic a eu lieu reste inchangé.
• Si le composant n’est pas lié à une source de données Qodly de type String, rien n’est copié et le presse-papiers local de la machine sur laquelle le clic a eu lieu reste inchangé.

Réponse de l’IA

Voici la réponse que j’ai obtenue :

Et mon composant personnalisé « copyclipboard » avait été créé

Tester mon travail

J’ai ensuite demandé comment tester le composant localement. Copilot m’a conseillé d’exécuter :

Le composant personnalisé peut ensuite être testé localement en ouvrant http://localhost:5001/ dans un navigateur

Il est nécessaire d’exécuter une instance 4D

http://localhost:5001/ est l’URL locale du serveur Vite. Il ne sert qu’un environnement de développement local incluant le composant personnalisé. Pour bénéficier de toutes les fonctionnalités de Qodly Studio, telles que les sources Qodly et les fonctions ORDA disponibles, vous devez vous assurer que l’instance de Qodly Studio d’un projet 4D est accessible sur le port HTTPS 7443.

J’ai donc créé et ouvert un projet 4D vide avec les paramètres Web suivants :

Et les paramètres d’administration Web de l’instance 4D sont les suivants :

De cette manière, l’instance de Qodly Studio de mon projet 4D est accessible à l’adresse https://localhost:7443/studio. Elle est utilisée par l’environnement de développement local lors de l’exécution de http://localhost:5001/.

Et voici le résultat !

Compilation et publication

Pour compiler et publier la version finale de mon composant personnalisé, j’ai simplement demandé à Copilot de le compiler comme cela a été fait pour d’autres composants personnalisés déjà existants. J’ai fourni un exemple à Copilot (par exemple : https://github.com/b-fadwa/Qodly-file-download).

Je lui ai également demandé de publier le composant dans un dépôt GitHub donné, avec à la fois le code source et les versions.

Et voilà.

Les perspectives que cela ouvre

Cette première expérience montre que l’IA réduit considérablement les obstacles à l’extension de Qodly Studio. Si vous êtes capable de décrire ce qu’un composant doit faire (ses propriétés, ses événements et son comportement), l’IA peut le créer pour vous.

Les possibilités de personnalisation de Qodly Studio sont donc très vastes : un bouton « Copier dans le presse-papiers » aujourd’hui, mais demain n’importe quel composant dont vos applications auront besoin, sans avoir à être un expert en front-end. La seule véritable limite réside dans la clarté de votre spécification.