← Retour au plan
Masterclass CodeBuilder : du brief à l'application fonctionnelle avec @oupi · Leçon 1 sur 6

1. Comprendre l'espace de travail Code Builder

Saisissez l'architecture de bout en bout de Code Builder — comment une description en langage naturel devient une application fonctionnelle au sein d'un bac à sable cloud isolé.

Code Builder est un espace de travail de développement IA qui transforme une description en langage naturel en une application fonctionnelle. Le pipeline se déroule en trois étapes :

  1. Brief — Vous décrivez l'application que vous souhaitez : son objectif, ses écrans principaux et ses comportements clés. Plus le brief est riche, plus le premier résultat correspond à votre intention.
  2. Génération et exécution — L'IA écrit le code et l'exécute immédiatement dans un bac à sable cloud isolé. Ce bac à sable est complètement séparé de votre machine locale et de l'environnement de tout autre utilisateur, de sorte que rien de ce que vous exécutez ne peut fuiter ou interférer.
  3. Aperçu en direct — L'application en cours d'exécution s'affiche juste à côté de la conversation. Chaque modification demandée par la suite rafraîchit cet aperçu, vous offrant une boucle de retour instantanée.

Cette architecture signifie que vous ne quittez jamais l'espace de travail pour compiler, déployer ou prévisualiser — l'ensemble du cycle développer-exécuter-voir se déroule au même endroit.

Les profils d'exécution définissent l'environnement d'exécution utilisé par votre bac à sable — considérez-les comme des conteneurs préconfigurés adaptés à différents types de projets. Lorsque vous démarrez un projet, vous choisissez le profil correspondant à ce que vous construisez (par exemple, une application web par rapport à un tableau de bord de données). Vous pouvez créer et gérer les profils depuis les paramètres du builder.

Choisir le bon profil est important, car il détermine les environnements d'exécution et les fonctionnalités disponibles au sein du bac à sable. Si votre projet nécessite une pile technologique spécifique, assurez-vous que le profil la prend en charge avant de commencer à générer du code.

Modèle d'itération — Code Builder est conversationnel. Après la première génération, vous affinez l'application en décrivant les modifications en langage naturel : « rendre l'en-tête fixe », « ajouter un bouton de bascule mode sombre », « remplacer le tableau par une grille de cartes ».

La bonne pratique essentielle : modifiez une seule chose à la fois. Chaque demande déclenche une modification du code et un rafraîchissement de l'aperçu. Regrouper plusieurs modifications sans lien dans une seule demande augmente le risque de régressions. Considérez chaque message comme un commit ciblé — petit, précis et facile à vérifier dans l'aperçu en direct avant de passer à la suite.

Propriété et export — Chaque fichier généré par l'IA vous appartient. Au sein de l'espace de travail, vous pouvez parcourir l'arborescence complète des fichiers, examiner chaque fichier individuellement et télécharger l'ensemble du projet. Cela signifie que Code Builder n'est pas un jardin clos : vous pouvez exporter à tout moment et poursuivre le développement dans votre propre IDE, votre pipeline CI/CD ou votre système de contrôle de version.

Ceci est particulièrement utile lorsque vous souhaitez utiliser Code Builder pour du prototypage rapide, puis transmettre la base de code à un flux de travail traditionnel.

Astuce

Surveillez les coûts au fil de vos itérations. La génération et chaque itération suivante consomment des crédits IA, et le temps d'exécution du bac à sable est facturé séparément. Les deux sont affichés en temps réel dans l'espace de travail, pensez donc à les vérifier avant de commencer une longue session d'affinage.

À vous de jouer

Ouvrez Code Builder (tableau de bord → Code Builder). Créez un nouveau projet, sélectionnez un profil d'exécution, et saisissez un brief tel que : « Un gestionnaire de tâches sur une seule page avec des actions d'ajout, de complétion et de suppression. » Observez l'IA générer le code et l'aperçu en direct apparaître. Demandez ensuite une modification — par exemple, « ajouter un champ de date d'échéance » — et observez l'aperçu se rafraîchir.

Suivre ce cours dans OUPI → Cet exercice se fait dans la plateforme OUPI.
À retenir

L'espace de travail de Code Builder suit une boucle précise : décrire → générer → prévisualiser → itérer → exporter. Votre brief est traduit en code et exécuté dans un bac à sable sécurisé et isolé, avec un aperçu en direct à côté de la conversation. Les profils d'exécution vous permettent d'adapter l'environnement d'exécution au type de votre projet. L'itération est conversationnelle — une modification par message permet de garder les choses claires. Les fichiers générés vous appartiennent entièrement pour examen et téléchargement. Les crédits et le temps de bac à sable sont suivis en temps réel, sans mauvaise surprise de facturation.