Programmation IA avec 4D et VS Code : un guide pratique

Si vous avez récemment suivi notre webinaire sur le codage IA avec 4D 21, vous avez pu voir comment nous avons développé une application complète d’agence de voyages (structure de base de données, données, formulaires et fonctionnalité basée sur l’IA) presque entièrement à l’aide de prompts en langage naturel. Dans cet article, nous allons vous guider à travers la configuration et vous montrer comment appliquer ce même processus à vos propres projets.

Ce dont vous avez besoin

• 4D 21 (ou version ultérieure)
• Visual Studio Code avec GitHub Copilot activé (voir la configuration ci-dessous)
• L’extension 4D Analyzer (voir ci-dessous)
• Un ensemble de fichiers d’instructions adaptés au développement 4D (voir ci-dessous)

Configuration de GitHub Copilot

Avant toute chose : GitHub Copilot fonctionne via votre compte GitHub, et non directement via OpenAI, Anthropic ou tout autre fournisseur d’IA. Vous n’avez pas besoin d’acheter des crédits auprès de Claude ou de tout autre service. Tout est géré via GitHub.

1. Créez un compte GitHub si vous n’en avez pas : github.com

2. Activez GitHub Copilot sur votre compte à l’adresse github.com/features/copilot. Une offre gratuite avec un quota mensuel généreux est incluse ; aucune carte de crédit n’est requise pour commencer.

3. Connectez-vous depuis VS Code. Ouvrez VS Code, cliquez sur l’icône Comptes dans le coin inférieur gauche, puis connectez-vous avec votre compte GitHub. Une fois connecté, l’icône Copilot apparaît dans la barre d’état et le chat devient disponible.

4. Sélectionnez votre modèle. Dans le panneau Copilot Chat, un sélecteur de modèle vous permet de choisir le modèle d’IA qui alimente vos réponses (GPT-4o, Claude, Gemini et d’autres selon votre forfait). Le modèle par défaut fonctionne très bien pour commencer, vous pourrez changer plus tard.

Pour vérifier votre utilisation et gérer votre forfait : rendez-vous sur github.com/settings/copilot. Vous pouvez voir le nombre de requêtes que vous avez utilisées, passer à un forfait payant et gérer votre facturation si vous avez besoin de plus de capacité.

L’extension 4D Analyzer

L’extension 4D Analyzer permet à VS Code de prendre pleinement en charge le langage 4D. Installez-la depuis le VS Code Marketplace pour bénéficier des fonctionnalités suivantes :

• La coloration syntaxique du code 4D : méthodes, classes, classes de formulaires, etc.
• La complétion de code et l’aide à la signature
• Des diagnostics (erreurs et avertissements) en temps réel au fur et à mesure que vous tapez

C’est très important lorsque vous travaillez avec l’IA. Lorsque GitHub Copilot génère du code 4D, l’Analyzer le valide immédiatement. Les erreurs sont mises en évidence directement dans l’éditeur, ce qui vous permet de les repérer avant même d’essayer d’exécuter le code, et de les renvoyer à Copilot pour obtenir une correction.

Pour l’installer :

1. Ouvrez VS Code
2. Accédez au panneau Extensions (Cmd+Maj+X sur macOS, Ctrl+Maj+X sur Windows)
3. Recherchez « 4D Analyzer »
4. Cliquez sur Installer

C’est tout. Ouvrez n’importe quel dossier de projet 4D et l’extension s’active automatiquement.

Fichiers d’instructions : apprendre à Copilot à écrire du code 4D

Dès son installation, GitHub Copilot connaît de nombreux langages de programmation, mais pas votre style de codage, vos bonnes pratiques ni les subtilités du développement 4D. C’est là que les fichiers d’instructions entrent en jeu.

Les fichiers d’instructions sont des documents Markdown placés dans un dossier .github/instructions/ à la racine de votre projet. Copilot les lit automatiquement et les utilise comme contexte pour chaque réponse. Considérez-les comme un guide que l’IA suit.

Où les trouver

Un ensemble de fichiers d’instructions 4D prêts à l’emploi est disponible sur GitHub :

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

Comment les configurer

1. À la racine de votre projet 4D, créez un dossier .github/instructions/
2. Copiez les fichiers d’instructions du référentiel ci-dessus dans ce dossier
3. Ouvrez Copilot Chat et demandez : « Quelles sont vos normes de codage 4D ? »; il devrait vous répondre en fonction du contenu de vos fichiers d’instructions

Si c’est le cas, vous êtes prêt. Les instructions couvrent des sujets tels que :

• L’utilisation privilégiée des classes par rapport aux méthodes
• Conventions relatives aux classes de formulaires
• Références au schéma JSON pour les formulaires
• Conventions de nommage et structure du code

Conseil : ces fichiers constituent un point de départ. Vous obtiendrez de meilleurs résultats en les adaptant à vos propres habitudes de codage et aux conventions de votre projet. Ajoutez vos propres règles, supprimez ce qui ne s’applique pas et affinez-les au fil du temps.

Mise en pratique : deux exemples

Exemple 1 : Créer une structure de base de données à l’aide de invites

Lorsque vous travaillez avec l’éditeur de structure, les modifications sont répercutées dans le fichier 4DCatalog. Grâce aux fichiers d’instructions du dépôt GitHub, Copilot peut modifier ce même fichier en toute sécurité pour vous (le contexte du schéma est inclus dans ces instructions). Vous continuez à travailler à partir de prompts, et après le redémarrage, les modifications de structure sont immédiatement visibles dans 4D. Voici une séquence réaliste :

Vous : « Crée une table dans le catalogue répertoriant les employés avec leur nom et leur prénom. »

Copilot modifie votre structure. Redémarrez 4D, et vous obtenez une table Employés avec une clé primaire UUID et les champs demandés.

Vous : « Crée une nouvelle table répertoriant les services de l’entreprise. »

Une autre table apparaît.

Vous : « Ajoute une relation entre les employés et les services, chaque employé appartenant à un service. »

Copilot ajoute une clé étrangère et la définition de relation appropriée. Vous construisez ainsi tout un modèle relationnel, étape par étape, simplement en dialoguant avec l’IA.

L’idée clé : vous décrivez votre intention en langage naturel, et l’IA gère les détails du catalogue. Les fichiers d’instructions garantissent que le résultat respecte les conventions attendues (clés UUID, types d’attributs appropriés, syntaxe de relation correcte).

Exemple 2 : Création d’un formulaire et de sa classe

C’est avec les formulaires que les choses deviennent vraiment intéressantes. Vous pouvez décrire une mise en page en une seule instruction :

Vous : « Crée un formulaire 4D qui répertorie les tâches. Je veux une liste déroulante sur le côté gauche avec un résumé, le nom de famille du responsable, le service, la date d’échéance et le statut. Sur le côté droit, affiche une vue détaillée avec toutes ces informations, ainsi que la description de la tâche et le nom du responsable du service. Associe le formulaire à une classe de formulaire. »

Copilot génère :

• Le JSON du formulaire (form.4DForm) avec la liste déroulante, les champs de saisie et la mise en page
• La classe de formulaire (.4dm) avec la gestion des événements et la logique de liaison de données

Le résultat est un formulaire fonctionnel que vous pouvez ouvrir dans 4D et commencer à utiliser. Sera-t-il parfait au premier essai ? Probablement pas. Mais il vous offre une base solide que vous pourrez affiner grâce à des invites de suivi ou des ajustements manuels.

Affiner la conception

Le premier formulaire généré est une base fonctionnelle, pas un produit fini. Il existe plusieurs façons d’amener Copilot vers un meilleur résultat :

• Collez une capture d’écran pour inspirer Copilot. Trouvez une interface utilisateur qui vous plaît, collez-la dans Copilot Chat et dites : « Redessine le formulaire en utilisant ceci comme référence visuelle. » Copilot extraira les schémas de mise en page, les nuances de couleurs et l’espacement de l’image.
• Donnez un brief de conception précis. Décrivez l’intention, l’ambiance et les contraintes : « Repense ce formulaire pour un agent de voyage qui doit traiter rapidement ses e-mails. Privilégie la densité d’informations, des indicateurs d’état à fort contraste et une navigation adaptée au clavier. »
• Spécifiez explicitement les tokens de conception. Si vous disposez d’un Design System, intégrez-le directement : « Utilise un espacement de base de 8 px, des arrière-plans gris neutre (#F5F5F5), du bleu (#1A73E8) pour les actions principales, et des couleurs sémantiques rouge/orange/vert pour l’état des tâches. »
• Demandez la cohérence avec les formulaires existants. Plutôt que de repartir de zéro à chaque fois : « Rends ce formulaire visuellement cohérent avec le formulaire Employé existant : même style d’en-tête, même hiérarchie des boutons et même densité des lignes de liste. »
• Encodez votre style dans les fichiers d’instructions. L’approche la plus durable. Définissez votre palette de couleurs, vos règles d’espacement et vos conventions de composants d’interface utilisateur une seule fois dans .github/instructions/, et tous les formulaires générés par Copilot les respecteront automatiquement, sans demande.

Modes de chat Copilot : Ask, Plan et Agent

Copilot Chat dans VS Code dispose de trois modes, sélectionnables à partir du sélecteur d’agent situé en bas du panneau Chat :

• Ask : Questions-réponses uniquement. Répond à des questions sur votre base de code, les concepts de codage ou VS Code sans toucher à aucun fichier. Utile pour comprendre le fonctionnement d’un élément ou explorer des idées.
• Plan : génère un plan de mise en œuvre structuré, étape par étape, à partir d’une analyse en lecture seule de la base de code, avant d’écrire la moindre ligne de code. Il met en évidence les questions en suspens concernant les exigences ambiguës, afin que vous puissiez clarifier l’intention dès le départ. Une fois que vous êtes satisfait, un bouton « Démarrer la mise en œuvre » transfère directement le plan au mode Agent pour exécution.
• Agent : Le cheval de bataille du codage. Il modifie de manière autonome les fichiers de votre projet, exécute des commandes en terminal, invoque des outils et itère pour corriger les erreurs jusqu’à ce que la tâche soit terminée.

Tous les exemples présentés plus haut dans cet article ont été exécutés en mode Agent, qui est le mode par défaut approprié pour toute tâche modifiant réellement votre projet.

Quand le mode Plan s’avère utile

Jusqu’à présent, nous avons travaillé de manière incrémentale : une invite, une modification, une révision, et ainsi de suite. Pour le travail exploratoire ou les ajouts rapides, c’est parfaitement efficace. Mais pour les fonctionnalités plus importantes qui touchent plusieurs composants à la fois, le mode Plan vaut la peine de faire cet effort supplémentaire.

Le mode Plan analyse votre base de code avant de produire quoi que ce soit. Le résultat est un résumé de haut niveau décomposé en étapes concrètes, incluant toutes les questions soulevées concernant vos exigences. Vous itérez sur le plan dans une conversation simple jusqu’à ce qu’il reflète exactement ce que vous souhaitez, puis vous le transmettez à Agent.

Cela s’avère particulièrement utile dans les projets 4D où une seule fonctionnalité peut toucher à la fois le catalogue, une ou plusieurs méthodes ou classes, un formulaire JSON, une classe de formulaire et des fichiers de ressources. Détecter une hypothèse erronée au stade de la planification coûte bien moins cher que de démêler une exécution multi-fichiers qui a pris une mauvaise direction.

À quoi cela ressemble-t-il en pratique ?

Au lieu de cette séquence incrémentielle :

• « Ajoute un tableau pour les e-mails »
• « Crée un formulaire pour les e-mails »
• « Ajoute un bouton pour traiter les e-mails »
• « Écris la méthode de traitement IA »
• « Ajoute des données d’exemple »

Vous pouvez rédiger une seule instruction bien structurée décrivant l’ensemble de la fonctionnalité, la tester via Plan pour valider l’approche, puis laisser Agent l’exécuter en une seule étape coordonnée. C’est exactement ce que nous avons fait lors du webinaire pour créer la fonctionnalité IA « e-mail vers tâche » : une seule grande instruction couvrant à la fois le tableau, le formulaire, le bouton, la logique de traitement, la configuration de la clé API et les données d’exemple.

Conseils pour un workflow IA efficace

1. Adaptez votre approche à la taille de la tâche. Les invites étape par étape fonctionnent bien lorsque vous explorez ou lorsque le périmètre n’est pas clair, ce qui facilite la révision et la correction de cap. Pour les fonctionnalités bien définies, une seule invite plus longue avec le mode Plan est plus efficace. La documentation de VS Code recommande de décomposer les tâches complexes, mais note également que l’inclusion des résultats attendus (quels fichiers, quel comportement) aide l’agent à vérifier son propre travail.
2. Nommez ce que vous attendez, pas comment le faire. Pour les invites plus longues, lister les fichiers, tableaux ou formulaires que vous vous attendez à voir créés aide à réduire les conjectures. Évitez de trop préciser les détails de mise en œuvre : c’est le travail de l’agent. L’objectif est de fixer des limites claires, pas de rédiger un cahier des charges.
3. Conservez les règles générales dans les fichiers d’instructions, et le contexte ponctuel dans la consigne. Les conventions, les règles de nommage et les préférences architecturales ont leur place dans .github/instructions/, et ne doivent pas être répétées dans chaque consigne. Selon la documentation de VS Code, les fichiers d’instructions se chargent à chaque interaction ; veillez donc à ce qu’ils se concentrent sur ce que l’IA ne peut pas déduire de votre code seul.
4. Signalez les erreurs, en fournissant le contexte pour celles qui ne sont pas évidentes. Coller une erreur d’exécution directement dans Copilot suffit souvent pour les erreurs isolées. Pour les problèmes de logique ou d’architecture, indiquez également le fichier concerné ou expliquez le comportement attendu ; le message d’erreur seul ne fournira pas suffisamment d’informations.
5. Utilisez des captures d’écran pour le diagnostic visuel. Joindre une capture d’écran est plus rapide que de décrire un problème de mise en page avec des mots, et la documentation de VS Code la mentionne comme une technique contextuelle recommandée. Remarque : la prise en charge des images peut nécessiter d’être activée en fonction de votre forfait Copilot et des paramètres de votre organisation.
6. Vérifiez le résultat généré par l’IA : l’importance de cette étape est proportionnelle aux enjeux. Pour les prototypes, une lecture rapide suffit. Pour la production, traitez-le comme n’importe quel code contribué : vérifiez la logique, les cas limites, la validation des entrées et tout ce qui touche aux services externes ou aux identifiants.
7. Gardez les fichiers d’instructions concis et à jour. Des instructions plus ciblées produisent de meilleurs résultats, mais les fichiers d’instructions sont chargés à chaque requête. La documentation de VS Code conseille de se concentrer sur les éléments que l’IA ne peut pas déduire du code : conventions non standard, décisions architecturales, spécificités de l’environnement. Un fichier fourre-tout surchargé commence à diluer le signal.

Aller plus loin : agents et compétences personnalisés

Tout ce que nous avons abordé jusqu’à présent utilise les agents intégrés avec des fichiers d’instructions partagés. Mais VS Code vous permet désormais d’aller plus loin en définissant vos propres agents et compétences personnalisés, stockés dans votre projet sous .github/agents/.

Un agent personnalisé est un fichier Markdown (.agent.md) qui donne à l’IA une personnalité spécifique, limite les outils qu’elle peut utiliser et, éventuellement, l’associe à un modèle particulier. Par exemple, vous pourriez créer un agent dédié à la révision 4D qui se concentre exclusivement sur la qualité du code, les failles de sécurité et les conventions de nommage pour les projets 4D, en utilisant des outils en lecture seule afin qu’il ne modifie jamais rien à moins que vous ne le demandiez explicitement. Ou un agent de création de structure 4D préchargé avec vos modèles de formulaires et de classes, prêt à générer de nouveaux écrans à la demande.

Les compétences (fichiers.skill.md ) vont encore plus loin : ce sont des capacités réutilisables et portables pouvant inclure des scripts et accéder à des ressources externes. Alors qu’un fichier d’instructions contient des règles passives, une compétence contient une logique active que l’agent peut invoquer. Un exemple concret avec 4D : une compétence qui sait interroger le site de documentation 4D et récupérer des exemples de code pertinents directement dans le chat.

La documentation VS Code décrit également les transferts: des workflows en chaîne où un agent transmet le contexte au suivant d’un simple clic. Un agent de planification génère une spécification de fonctionnalité, puis la transfère à un agent d’implémentation, qui la transfère à son tour à un agent de révision. Chaque étape est approuvée par un humain avant d’être exécutée.

Vous pouvez générer tout cela avec l’IA directement dans le chat : tapez /create-agent ou /create-skill et décrivez ce que vous souhaitez. Ils peuvent être stockés au niveau de l’espace de travail (partagés avec l’équipe via le contrôle de source) ou dans votre profil utilisateur (personnel, disponible dans tous les projets).

Au-delà de la génération de code : autres workflows IA utiles

La création de fonctionnalités n’est qu’une des tâches qu’un agent IA accomplit efficacement dans un workflow de développement. Voici d’autres situations dans lesquelles Copilot peut prendre en charge une charge de travail importante :

• Documentation. Demandez à l’agent de rédiger ou de mettre à jour la documentation technique à partir du code source, de générer des chaînes de documentation pour les méthodes et les classes, ou de traduire la documentation existante dans une autre langue. Pour 4D en particulier, cela peut signifier générer du contenu d’aide destiné aux utilisateurs à partir de la logique des classes de formulaires, ou produire une référence API structurée à partir d’un ensemble de méthodes.
• Audit de sécurité. Demandez à l’agent d’analyser une méthode, une classe de formulaire ou une fonctionnalité entière à la recherche de vulnérabilités courantes : entrées non validées, contrôle d’accès manquant, exposition à des injections SQL, identifiants codés en dur. Un agent de sécurité dédié en lecture seule (voir ci-dessus) est tout indiqué dans ce cas. Cela ne remplacera pas un audit de sécurité en bonne et due forme, mais constitue un premier passage rapide.
• Refactoring. Les agents IA gèrent bien les tâches de refactoring mécaniques : renommer les symboles de manière cohérente, extraire la logique répétitive dans des méthodes ou des classes partagées, convertir le code procédural en modèles ORDA, ou moderniser le code 4D hérité selon les meilleures pratiques actuelles.
• Explication du code et intégration. Utilisez le mode « Ask » pour comprendre du code inconnu, suivre le fonctionnement d’une méthode ou obtenir un résumé en langage clair d’une logique complexe. Cela est particulièrement utile lors de la reprise d’un projet existant ou de l’intégration de nouveaux membres de l’équipe.
• Génération de tests. Demandez à l’agent d’écrire des tests unitaires pour une méthode ou une classe donnée, y compris les cas limites et les conditions d’erreur. Copilot peut également exécuter les tests après les avoir générés et les répéter s’ils échouent.
• Messages de commit et descriptions de PR. VS Code inclut des actions intelligentes intégrées pour générer des messages de commit à partir des modifications mises en attente et des résumés de pull requests. De petits gains de temps qui s’accumulent.

Et ensuite ?

Le workflow décrit dans cet article est disponible dès aujourd’hui. Créez votre premier tableau et formulaire à l’aide d’invites, utilisez le mode Plan pour développer une fonctionnalité complète, refactorisez du code hérité, générez de la documentation, effectuez une analyse de sécurité, créez un agent personnalisé pour votre équipe. Il ne vous reste plus qu’à l’essayer.

Voici tout ce dont vous avez besoin pour commencer :

1. Téléchargez 4D 21
2. Installez VS Code avec GitHub Copilot activé
3. Ajoutez l’extension 4D Analyzer
4. Copiez les fichiers d’instructions dans votre projet

Ouvrez le mode Agent, décrivez ce que vous souhaitez créer et voyez jusqu’où vous pouvez aller.

Nous serions ravis de connaître votre expérience. Partagez vos résultats, vos workflows et vos questions sur le Forum 4D, la communauté vous attend !