Planifier et créer des applications avec Gemini CLI Conductor

1. Introduction

L'extension Gemini CLI Conductor a évolué pour fonctionner avec une plus large sélection d'agents de codage, y compris Antigravity CLI et Claude Code. Consultez le nouvel atelier de programmation sur le plug-in Conductor.

Dans cet atelier de programmation, vous apprendrez à planifier et à créer des applications logicielles avec l'extension Gemini CLI Conductor. Vous commencerez par créer une application "greenfield" de A à Z. Ensuite, vous la traiterez comme un projet "brownfield" en l'itérant pour ajouter l'authentification et le stockage.

Objectifs de l'atelier

• Installer Gemini CLI et l'extension Conductor
• Créer une application Web "Picker Wheel" de A à Z à l'aide des fonctionnalités de planification et d'implémentation de Conductor
• Ajouter une personnalisation à l'application en ajoutant l'authentification et le stockage à l'aide de Firebase

Points abordés

• Utiliser l'extension Conductor pour planifier, implémenter et examiner une application "greenfield"
• Utiliser l'extension Conductor pour ajouter des fonctionnalités à une application "brownfield"

Ce dont vous avez besoin

• Un navigateur Web (par exemple, Chrome)
• Un projet Google Cloud avec facturation activée
• Node.js installé (version 18 ou ultérieure recommandée)
• Un éditeur de code local comme Visual Studio Code

2. Avant de commencer

Créer un projet Google Cloud

1. Dans la console Google Cloud, sur la page du sélecteur de 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 pour un projet.

Démarrer Cloud Shell

L'utilisation de Cloud Shell nous permet de terminer cette section sans avoir à installer localement les outils de CLI gcloud et firebase.

Cloud Shell est un environnement de ligne de commande exécuté dans Google Cloud, qui est préchargé 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. Depuis 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 c'est la première fois que vous exécutez la CLI firebase, 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 Gemini CLI et Conductor en local

Dans cette étape, vous allez préparer votre environnement de développement local en installant Gemini CLI et l'extension Conductor à l'aide de votre éditeur de code et de votre terminal locaux.

Installer Gemini CLI

1. Installez la dernière version de Gemini CLI de manière globale à l'aide de npm :

   npm install -g @google/gemini-cli
   

   Si des erreurs d'autorisation s'affichent, vous devrez peut-être utiliser un gestionnaire de versions comme nvm ou exécuter cette commande en tant que racine à l'aide de sudo.

2. Redémarrez votre terminal pour que gemini soit ajouté à votre CHEMIN D'ACCÈS.
3. Vérifiez que l'installation a installé la dernière version :

   gemini --version
   

4. Créez un répertoire de projet et accédez-y : dans une section ultérieure, nous allons créer un projet dans un répertoire picker-wheel. Créez ce répertoire maintenant et accédez-y :

   mkdir picker-wheel
   cd picker-wheel
   

5. Authentifiez-vous :
   • Démarrez Gemini CLI.

     gemini
     

   • Lorsque vous êtes invité à répondre à la question "Faire confiance aux fichiers de ce dossier ?", sélectionnez Faire confiance au dossier (picker-wheel).
   • Lorsque vous êtes invité à répondre à la question "Comment souhaitez-vous vous authentifier pour ce projet ?", sélectionnez Vertex AI. Suivez le guide d'authentification pour obtenir une clé API Google Cloud et définir la variable d'environnement GOOGLE_API_KEY. Prenez le temps d'explorer les différents niveaux d'utilisation et les limites de débit d'API correspondantes.
6. Quittez Gemini CLI : saisissez /quit dans le terminal de la CLI pour mettre fin à votre session Gemini CLI en direct avant de continuer.

Installer l'extension Conductor

Conductor est une extension Gemini CLI Open Source conçue par Google qui permet d'utiliser des fonctionnalités de développement axées sur le contexte, telles que la planification et le suivi de l'implémentation.

1. Installez l'extension :

   gemini extensions install https://github.com/gemini-cli-extensions/conductor
   

2. Vérifiez l'installation:
   • Démarrez Gemini CLI.

     gemini
     

   • Saisissez /conductor. Une liste de commandes s'affiche, comme setup, newTrack, implement, etc.
3. Quittez Gemini CLI : saisissez /quit dans le terminal de la CLI pour mettre fin à votre session Gemini CLI en direct avant de continuer.

4. Développement greenfield : la roue de sélection

Maintenant que votre environnement est configuré, vous allez créer une application de A à Z. 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. Vérifiez que vous vous trouvez dans le picker-wheel répertoire que vous avez créé dans la section précédente :

   pwd
   

2. Démarrez Gemini CLI : démarrez une nouvelle session Gemini CLI à partir du répertoire de votre projet.

   gemini
   

3. Initialisez Conductor : exécutez la commande de configuration pour créer la structure du projet et configurer l’environnement Conductor.

   /conductor:setup
   

4. Suivez les invites interactives : les invites interactives que vous voyez ne correspondent pas exactement à ces exemples. Concentrez-vous sur une conception plus simple pour vous familiariser avec le workflow Conductor.
   • Objectif du produit : une application Web qui affiche une roue 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 → Ordinateur de bureau d'abord
   • Consignes concernant les produits : générer automatiquement.
   • Pile technologique :
     • Langues → 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 nécessaire
   • Workflow: standard.
   • Exigences du produit :
     • Histoires d'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 adaptative
   Conductor génère des fichiers de contexte dans un répertoire conductor/.

Créer une piste

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

1. Démarrez une nouvelle piste à l'aide de /conductor:newTrack. Conductor peut proposer une piste initiale en fonction du contexte du produit. Vous pouvez également proposer la vôtre ou demander à Conductor de suggérer une piste.
2. Examinez le plan généré : Conductor génère un fichier index.md, un fichier spec.md et un fichier 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 initiaux.

Implémenter la piste

1. Démarrez l'implémentation :

   /conductor:implement
   

   Conductor va maintenant suivre le plan et écrire le code du projet.

   Conseil : Pour éviter de rester bloqué sur des shells interactifs ou des processus de longue durée (comme des serveurs de développement ou des observateurs de test), nous devons nous assurer que Conductor sait exactement comment gérer ces commandes spécifiques. Les outils tels que Vite (npm run dev) et Vitest (npm run test) s'exécutent souvent en "mode surveillance" par défaut, ce qui maintient le processus ouvert indéfiniment. Vous pouvez demander à Conductor de désactiver le mode surveillance ou d'utiliser is_background: true lors de l'exécution de commandes en mettant à jour workflow.md.

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.

   Dépannage : Si le code généré se comporte de manière inattendue, vérifiez le fichier conductor/tracks/.../plan.md pour détecter les étapes ignorées ou les erreurs.

3. Examinez l'implémentation : en dernière étape, vous pouvez demander à Conductor d'examiner l'implémentation. Il doit examiner le code source, synchroniser la documentation du projet et archiver la piste.

   /conductor:review
   

5. Itération brownfield : ajouter une personnalisation

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

Si vous souhaitez passer directement à une application brownfield, vous pouvez télécharger le code doré de la dernière section pour une implémentation de référence et continuer à le développer.

Créer une piste de personnalisation

1. Dans l'exemple "brownfield" suivant, nous allons utiliser Firebase pour l'authentification et le stockage. Installez l'extension Firebase de Gemini CLI pour que Conductor puisse l'utiliser.

   gemini extensions install https://github.com/firebase/agent-skills
   

2. Démarrez Gemini CLI : démarrez une nouvelle session Gemini CLI à partir du répertoire de votre projet.

   gemini
   

3. Démarrez une nouvelle piste : démarrez une nouvelle piste.

   /conductor:newTrack "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 voyez ne correspondent pas exactement à ces exemples. Concentrez-vous sur une conception plus simple pour vous familiariser avec le workflow Conductor.
   • Objectif de la piste :
     • 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 fichier index.md, un fichier spec.md et un fichier plan.md dans conductor/tracks/{track-id}/.

   Conseil : Nous vous encourageons à discuter avec Gemini pour comprendre et discuter du plan autant que possible avant de passer à l'implémentation.

6. Implémentez : si tout semble correct, vous pouvez démarrer l'implémentation.

   /conductor:implement
   

7. Vérifiez : rechargez votre application. Vous devriez voir une application mise à jour.

   Si l'IA est bloquée lors du test de l'implémentation de l'authentification, n'oubliez pas d'activer Google Sign-In dans la console Firebase sous Authentification > Mode de connexion.

   

Voici le code doré pour une implémentation de référence. Vous devez fournir votre projet Firebase dans .firebaserc et vos configurations Firebase dans firebase.ts pour démarrer correctement votre application.

6. Libérer de l'espace

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

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. Supprimez la base de données Firestore : accédez à Console Firebase > Firestore et supprimez la base de données.
2. Supprimez l'authentification : accédez à Console Firebase > AuthentificationMode de connexion, puis désactivez Google.

7. Félicitations

Félicitations ! Vous avez utilisé l'extension Gemini CLI Conductor pour créer une application Web de A à Z, puis l'itérer avec des fonctionnalités complexes telles que l'authentification et l'intégration de bases de données.

Étapes suivantes

• Découvrez le mode de planification de Gemini CLI pour une planification légère.
• Découvrez d'autres extensions Gemini CLI.