Sommaire

Pour vous permettre d’apprendre à votre rythme, ce tutoriel est proposé sous deux formats complémentaires. Chacun a ses avantages : la vidéo vous guide pas à pas dans la dynamique, tandis que le texte illustré vous permet de progresser à votre rythme et de revenir facilement sur les points importants.

N’hésitez pas à les consulter conjointement pour une meilleure compréhension !

Vidéo tutoriel

Objectif

L’objectif est de coder un site sur la Forge des communs numériques de l’éducation sans forcément de connaissance en langage de programmation.
J’ai choisi de coder un site pour aider au travail en groupe dans la classe.
Voici le rendu du site "objectif" : https://drane-orleans-tours.forge.apps.education.fr/gestion-du-travail-de-groupe-en-classe/

Présentation de la forge

https://docs.forge.apps.education.fr/

Pré-requis

Installer les logiciels suivants :

• Git Git est un outil qui garde l’historique complet de toutes les modifications d’un projet (souvent du code).
• Node JS Node.js est un environnement qui permet d’exécuter du JavaScript en dehors du navigateur. En gros : Python a son interpréteur python, et JavaScript a maintenant Node.js pour tourner côté machine.
• Antigravity Google Antigravity est un IDE (environnement de développement) lancé par Google en novembre 2025, orienté "agents IA".
  L’idée : donner des objectifs de haut niveau ("crée-moi une app de todo avec authentification") et des agents autonomes s’en chargent. Ils planifient, codent, testent, et corrigent eux-mêmes.

Ensuite, il faudra relier la forge à Antigravity. Pour cela, connectez-vous à la forge, puis accédez à votre profil https://forge.apps.education.fr/-/user_settings/profile
Cliquez sur Jeton d’accès :

Puis créez un nouveau jeton (Ajouter un jeton)
Complétez le nom, sélectionnez une date d’expiration, et cochez au minimum api et read_user

Ensuite, copier le jeton dans un endroit sécurisé, vous en aurez besoin ensuite.
Notez que le jeton peut être ’révoqué’ (c’est à dire annulé et détruit si besoin)

Création d’un projet vide

Créez ensuite un nouveau projet

Sélectionnez "Créer un projet vide"

Voici un lien vers une page qui recense de bonnes pratiques pour nommer un projet : https://docs.forge.apps.education.fr/tutoriels/premierspas/bien-demarrer/

Début du projet sur Antigravity

Une fois le projet créé, ouvrez Antigravity. Puis sur le côté gauche, sélectionnez les extension et installer "Gitlab Workflow"

Une fois l’installation terminée, cliquez sur "Clone Repository" et sélectionnez "Clone from gitlab" (gitlab est le nom du "moteur" de la forge)
Ouvrir la palette de commandes en appuyant sur Ctrl + Maj + P.
Dans la palette de commandes, chercher "GitLab : authenticate" et appuyez sur Entrée.

Dans l’URL de l’instance GitLab, coller l’URL complète de la Forge : https://forge.apps.education.fr
Coller le token d’accès personnel GitLab et appuyer sur Entrée.
Git Workflow est maintenant prêt à l’emploi.

Retourner sur la page d’accueil d’antigravity puis cliquez sur "clone Repository" puis "Clone from gitlab"

Vous devriez alors voir la liste de vos dépôts dans la forge. Sélectionnez votre projet. Puis vous aurez 2 choix, prenez celui qui commence pat https. (C’est là que le jeton intervient, il ne sera pas nécessaire de s’authentifier)

Ensuite, votre projet va être copié sur votre disque dur local. (Ce qui nous permettra de développer l’application en local, de la tester, puis quand nous serons prêts, nous la déploierons vers la forge.)
Choisissez le dossier parent qui contiendra votre projet, puis cliquez sur open
Vous arrivez ensuite sur la page principale de Antigravity.

À droite, nous allons prompter avec un agent IA, vous pouvez choisir le modèle d’IA ou encore dicter avec un micro vos instructions.

Voici le prompt que j’ai employé :
« Je souhaite coder une application qui prend en entrée une liste de prénom et qui forme des groupes aléatoires. Je souhaite que l’application permette de voir visuellement les groupes et des les modifier via des glisser-déposer. Les groupes doivent être exportable sous forme de pdf ou de fichier csv. Cette application sera hébergé sur la https://forge.apps.education.fr qui fonctionne avec gitlab. Je veux la publier avec pages. »

Le modèle choisi vous proposera ensuite un plan d’implémentation

Vous pouvez commenter chaque ligne si vous n’êtes pas satisfait. Une fois vos remarque écrites, vous pouvez dire que vous êtes d’accord dans la zone de prompt (par exemple : "ok")
Autre méthode : vous pouvez ouvrir "Agent manager" (en haut de l’application) et cliquer sur "proceed"

L’agent I.A. va coder et de temps à autre vous devrez accepter de commandes. L’I.A. va parfois se tromper, faire des erreurs, mais via un dialogue dans la fenêtre de prompt, vous devriez obtenir ce que vous souhaiter.
Notez aussi que l’IA installera les packages nescessaire avec node js via la commande npm. Quand l’application sera déployée sur la forge, ces packages seront aussi installés via un fichier .gitlab-ci.ymlqui sera généré automatiquement par l’I.A. si vous avez bien précisé que l’application doit être déployée sur la forge.

Une fois le codage terminé, vous aurez des instructions pour tester l’application en local.

Pour lancer une commande comme npm run dev il faut ouvrir un terminal. Utilisez le raccourci CTRL + J qui ouvrira le panneau en bas de l’application. Vérifiez que vous êtes bien dans l’onglet terminal et entrez la commande

Si une erreur se produit, copiez le code d’erreur dans la fenêtre de prompt.
Si tout fonctionne, vous devriez voir une fenêtre de ce type :

Faites un CTRL + clic sur l’adresse local et vous devriez voir votre site. Attention il n’est accessible que sur votre ordinateur.

J’ai par exemple un problème, l’export en pdf ne marche pas, je le prompte à l’IA qui modifie alors le code.

Premier commit

Une fois satisfait, vous pouvez envoyer votre code sur la forge. Pour ce faire, cliquez sur "Source control" à droite.
Écrivez un descriptif de ce que vous avez changé dans le code. Puis, cliquez sur la flêche à côté de commit et choisissez "commit & push"
Pour comprendre ce qu’il se passe :

• Commit, enregistre vos changement (ce qui permet de revenir en arriêre si il y a un gros problème)
• Push, envoie le code dans la forge.

De retour sur la forge, vous devriez (si tout va bien) avoir une coche verte ✅.

Cliquez sur GitLab Pages pour voir votre site.
Pour avoir une adresse url plus "propre", suivez ce guide :

Améliorations

Vous avez maintenant les bases. La suite, c’est un cycle continu d’amélioration.

J’ai continué avec les consignes suivantes en y allant étape par étape :
« Ajoute une nouvelle page qui détecte (via un micro) le bruit de la salle. La page devra changer de couleur si le bruit dépasse un certain seuil réglable par l’utilisateur. »
« Ajoute un compte à rebours programmable et un espace pour écrire des consignes sur la page Bruit. Renomme la page bruit en "Espace de travail" »
« Les consignes doivent prendre plus d’espace et être plus lisible (par exemple un plus grande police). Place les consigne au centre, le détecteur de bruit à gauche et le minuteur à droite »
« Je veux que l’application prenne plus de place en largeur »
« Ajoute la possibilité de ne pas mettre des élèves dans le même groupe (au moment du tirage aléatoire) »

À chaque fois, je teste et colle le code d’erreur si besoin. Remarquez que même en utilisant les mêmes instructions, le site que vous obtiendrez sera sans doute différent, l’I.A. n’est pas déterministe comme peu l’être un programme "classique" d’instructions séquentielles.

Voici le résultat final : https://drane-orleans-tours.forge.apps.education.fr/gestion-du-travail-de-groupe-en-classe/

Vous pouvez faire une bifurcation (fork) du projet depuis sa page de la forge : https://forge.apps.education.fr/drane-orleans-tours/gestion-du-travail-de-groupe-en-classe
Vous aurez alors votre propre version que vous pouvez importer avec antigravity et modifier comme bon vous semble.