Planifier et créer des applications avec le plug-in Conductor

1. Introduction

Dans cet atelier de programmation, vous allez apprendre à planifier et à créer des applications logicielles avec le plug-in Conductor. Conductor est un plug-in Open Source conçu par Google qui permet d'utiliser des fonctionnalités de développement basées sur des spécifications, comme la planification et le suivi de l'implémentation. Vous allez commencer par créer une application "greenfield" entièrement à partir de zéro. Vous le traiterez ensuite comme un projet "brownfield", en l'itérant pour ajouter l'authentification et le stockage.

Objectifs de l'atelier

  • Installer le plug-in Conductor dans l'interface de ligne de commande Antigravity ou Claude Code
  • Créer une application Web "Picker Wheel" à partir de zéro à l'aide des fonctionnalités de planification et d'implémentation de Conductor
  • Ajoutez la personnalisation à l'application en ajoutant l'authentification et le stockage à l'aide de Firebase.

Points abordés

  • Utiliser le plug-in Conductor pour planifier, implémenter et examiner une application "greenfield"
  • Utiliser le plug-in Conductor pour ajouter des fonctionnalités à une application "brownfield"

Prérequis

2. Avant de commencer

Créer un projet Google Cloud

  1. Dans la console Google Cloud, sur la page de sélection du projet, sélectionnez ou créez un projet Google Cloud.
  2. Assurez-vous que la facturation est activée pour votre projet Cloud. Découvrez comment vérifier si la facturation est activée sur un projet.

Démarrer Cloud Shell

Cloud Shell est un environnement de ligne de commande exécuté dans Google Cloud et fourni avec les outils nécessaires.

  1. Cliquez sur Activer Cloud Shell en haut de la console Google Cloud.
  2. Une fois connecté à Cloud Shell, vérifiez votre authentification :
    gcloud auth list
  3. Vérifiez que votre projet est configuré :
    gcloud config get project
  4. Si votre projet n'est pas défini comme prévu, définissez-le :
    export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

Activer les API

Activez l'API Firebase Management dans votre projet Google Cloud.

gcloud services enable firebase.googleapis.com

Ajouter Firebase à votre projet

La CLI Firebase est préinstallée dans Cloud Shell. Dans Cloud Shell, connectez-vous avec le même compte Google qui vous donne accès au projet Google Cloud. Si vous travaillez en local, installez la CLI Firebase en suivant les instructions.

firebase login

Exécutez la commande suivante pour ajouter Firebase à votre projet Google Cloud :

firebase projects:addfirebase

Si vous exécutez la CLI firebase pour la première fois, répondez aux questions qui vous sont posées.

Quitter Cloud Shell

Vous pouvez fermer la fenêtre Cloud Shell. Dans la section suivante, nous allons configurer votre environnement local.

3. Installer et authentifier les agents de codage CLI

Dans cette étape, vous allez préparer votre environnement de développement local en installant et en authentifiant la CLI Antigravity ou Claude Code dans votre éditeur de code local à l'aide de vos identifiants Google Cloud.

Installer et authentifier Antigravity CLI

  1. Installez la dernière version de l'interface de ligne de commande Antigravity.
    # MacOS and Linux
curl -fsSL https://antigravity.google/cli/install.sh | bash

# Windows Powershell
irm https://antigravity.google/cli/install.ps1 | iex

# Windows CMD
curl -fsSL https://antigravity.google/cli/install.cmd -o install.cmd && install.cmd && del install.cmd
  2. Redémarrez votre terminal pour que agy soit ajouté à votre PATH.
  3. Vérifiez que l'installation a bien installé la dernière version.
    agy --version
  4. Authentifiez-vous à l'aide de vos identifiants Google Cloud.
    • Démarrez la CLI Antigravity.
      agy
    • Lorsque vous êtes invité à sélectionner une méthode de connexion, sélectionnez Utiliser un projet Google Cloud. Ouvrez l'URL d'autorisation sécurisée dans un navigateur Web. Connectez-vous avec vos identifiants approuvés et effectuez l'authentification. Le navigateur affiche un code d'autorisation alphanumérique unique. Copiez ce code, revenez à votre terminal et collez-le dans l'invite.
  5. Quittez la CLI Antigravity.Saisissez /exit dans le terminal de la CLI pour mettre fin à votre session en direct de la CLI Antigravity avant de continuer.

Installer et authentifier Claude Code

Vous pouvez également utiliser le plug-in Conductor avec Claude Code. Nous allons installer et authentifier Claude Code à l'aide de vos identifiants Google Cloud.

  1. Installez la dernière version de Claude Code.
  2. Authentifiez-vous à l'aide de vos identifiants Google Cloud.
    • Démarrez Claude Code.
      claude
    • Saisissez /login pour sélectionner votre méthode de connexion. Choisissez l'option Plate-forme tierce : Amazon Bedrock, Microsoft Foundry ou Vertex AI, puis Google Vertex AI. Pour configurer Google Vertex AI, sélectionnez Identifiants par défaut de l'application (authentification Google), puis suivez les instructions.
  3. Redémarrez Claude Code.

4. Installer le plug-in Conductor

Conductor est un plug-in Open Source conçu par Google qui permet d'utiliser des fonctionnalités de développement basées sur des spécifications, comme la planification et le suivi de l'implémentation.

Installer dans la CLI Antigravity

  1. Installez le plug-in :
    • CLI Antigravity 
      agy plugins install https://github.com/gemini-cli-extensions/conductor
  2. Vérifiez l'installation :
    • Démarrez la CLI Antigravity.
      agy
    • Saisissez /conductor pour afficher une liste de commandes telles que /conductor:conductor-setup, /conductor:conductor-new-track, conductor:conductor-implement, etc.
  3. Quittez la CLI.Saisissez /exit dans le terminal pour mettre fin à votre session CLI en direct avant de continuer.

Installer dans Claude Code

  1. Enregistrez le dépôt Marketplace et installez le plug-in Conductor directement dans votre session Claude Code.
    /plugin marketplace add gemini-cli-extensions/conductor
/plugin install conductor
/reload-plugin
  2. Vérifiez l'installation.
    • Saisissez /conductor pour afficher une liste de commandes telles que /conductor-setup, conductor-new-track, conductor-implement, etc.
  3. Quittez la CLI.Saisissez /exit dans le terminal Claude Code pour mettre fin à votre session CLI en direct avant de continuer.

5. Développement Greenfield : le sélecteur

Maintenant que votre environnement est configuré, vous allez créer une application de toutes pièces. Vous allez créer une "roue de sélection", une application Web légère qui tourne pour sélectionner une option aléatoire.

Configurer le contexte du produit

  1. Créez un répertoire de projet et accédez-y.Nous allons maintenant travailler sur un projet dans un répertoire picker-wheel. Créez ce répertoire et accédez-y.
    mkdir picker-wheel
cd picker-wheel
  2. Démarrer Antigravity CLI : démarrez une nouvelle session CLI à partir du répertoire de votre projet avec Antigravity CLI ou Claude Code.
    # Antigravity CLI
agy

# Claude Code
claude
    • Lorsque le message "Faites-vous confiance aux fichiers de ce dossier ?" s'affiche, sélectionnez Faire confiance au dossier (sélecteur).
  3. Initialisez Conductor.Exécutez la commande de configuration pour échafauder le projet et configurer l'environnement Conductor.
    # Antigravity CLI
/conductor:conductor-setup

# Claude Code
/conductor-setup
  4. Suivez les invites interactives. Les invites interactives que vous verrez ne correspondront pas exactement à ces exemples. Concentrez-vous sur une conception plus simple pour vous familiariser avec le workflow Conductor.
    • Objectif du produit : application Web qui affiche une roue rotative configurable pour sélectionner un élément aléatoire dans une liste.
      • Audience cible → Grand public
      • Interaction → Appuyer/Cliquer pour faire tourner
      • Personnalisation → De base
      • Plate-forme → Priorité au bureau
    • Consignes concernant les produits : générer automatiquement.
    • Pile technologique :
      • Langages → TypeScript/JavaScript : idéal pour le Web full stack
      • Frontend → Vue.js : interfaces Web intuitives
      • Backend → Express.js : backend Node rapide
      • Base de données → Aucune : aucune base de données n'est requise
    • Workflow : "Standard".
    • Exigences liées aux produits :
      • Histoires utilisateur → Options personnalisables, affichage clair du gagnant
      • Fonctionnalités clés : liste d'options modifiable, couleurs aléatoires
      • Contraintes → Côté client uniquement, hautes performances
      • Non fonctionnel → Couverture de test élevée, TypeScript et Vue.js, conception responsives
    Conductor génère des fichiers de contexte dans un répertoire conductor/.

Créer une piste

Dans Conductor, un "track" représente une fonctionnalité ou une unité de travail.

  1. Démarrez une nouvelle piste à l'aide de /conductor-new-rack.Conductor peut proposer une piste initiale en fonction du contexte du produit. Vous pouvez également proposer votre propre piste ou demander au chef d'orchestre de vous en suggérer une.
  2. Examinez le plan généré.Conductor génère un index.md, un spec.md et un plan.md dans conductor/tracks/{track-id}/. Prenez le temps de les lire. Si tout semble correct, Conductor vous invite à enregistrer et à valider les fichiers de configuration initiale.

Implémenter le suivi

  1. Commencez l'implémentation.
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
    Conductor va maintenant suivre le plan et écrire le code du projet.
  2. Vérifiez l'application.Tout au long de la phase d'implémentation, Conductor vous invite à tester manuellement l'application. Par exemple, il vous demandera d'ouvrir le serveur Web local, de prévisualiser l'application dans votre navigateur et de vérifier les modifications. Une fois l'implémentation terminée, vous devriez voir une roue de sélection fonctionnelle.Application Picker Wheel
  3. Vérifiez l'implémentation.Pour finir, vous pouvez demander à Conductor de vérifier l'implémentation. Il doit examiner le code source, synchroniser la documentation du projet et archiver la piste.
    # Antigravity CLI
/conductor:conductor-review

# Claude Code
/conductor-review

6. Itération Brownfield : ajouter la personnalisation

Vous allez maintenant passer au développement "brownfield". Vous allez améliorer l'application Web de sélecteur de la section précédente afin que les utilisateurs connectés puissent enregistrer et restaurer leurs configurations de sélecteur.

Créer un parcours de personnalisation

  1. Dans l'exemple "brownfield" suivant, nous utiliserons Firebase pour l'authentification et le stockage. Installez les compétences Firebase pour que Conductor puisse les utiliser.
  2. Démarrez votre agent CLI.Démarrez une nouvelle session CLI.
    # Antigravity CLI
/new

# Claude Code
/new
  3. Démarrer une nouvelle piste : démarrez une nouvelle piste.
    # Antigravity CLI
/conductor:conductor-new-track "I want users to be able to log in to their
accounts and save their picker wheel configurations."

# Claude Code
/conductor-new-track "I want users to be able to log in to their accounts
and save their picker wheel configurations."
  4. Suivez les invites interactives. Les invites interactives que vous verrez ne correspondront pas exactement à ces exemples. Concentrez-vous sur une conception plus simple pour vous familiariser avec le workflow Conductor.
    • Suivre l'objectif :
      • Fournisseur d'authentification → Firebase Auth
      • Configurations enregistrées → Options de la roue
      • Stockage de données → Firestore
      • UI de connexion Firestore → superposition modale
    Conductor génère des fichiers de contexte pour une nouvelle piste dans conductor/tracks/{track-id}.
  5. Examinez le plan généré. Prenez le temps de lire un index.md, un spec.md et un plan.md dans conductor/tracks/{track-id}/.
  6. Implémentez.Si tout semble correct, vous pouvez commencer l'implémentation.
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
  7. Validez, puis rechargez votre application. Une application mise à jour devrait s'afficher. Sélecteur avec connexion

Voici le code d'or pour une implémentation de référence. Pour que votre application démarre correctement, vous devez fournir votre projet Firebase dans .firebaserc et vos configurations Firebase dans firebase.ts.

7. Effectuer un nettoyage

Pour éviter que les ressources créées lors de cet atelier de programmation ne soient facturées en permanence sur votre compte Google Cloud, supprimez-les.

Supprimer le projet Firebase et le projet Google Cloud

Le moyen le plus simple d'effectuer un nettoyage consiste à supprimer complètement le projet.

  1. Dans la console Google Cloud, sélectionnez le projet que vous avez créé.
  2. Cliquez sur SUPPRIMER.

Si vous souhaitez conserver le projet, mais supprimer des ressources :

  1. Supprimer la base de données Firestore : accédez à la console Firebase > Firestore, puis supprimez la base de données.
  2. Supprimer l'authentification : accédez à la console Firebase > Authentification > Méthode de connexion, puis désactivez Google.

8. Félicitations

Félicitations ! Vous avez utilisé le plug-in Conductor dans l'agent de codage de votre choix (Antigravity CLI ou Claude Code) pour créer une application Web à partir de zéro, puis l'améliorer avec des fonctionnalités complexes telles que l'authentification et l'intégration de base de données.

Étapes suivantes