Planifier et créer des applications avec Gemini CLI Conductor

1. Introduction

Dans cet atelier de programmation, vous allez apprendre à planifier et à créer des applications logicielles avec l'extension Gemini CLI Conductor. 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 Gemini CLI et l'extension Conductor
  • Créer une application Web "Picker Wheel" à partir de zéro à l'aide des fonctionnalités de planification et d'implémentation de Conductor
  • Personnaliser 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"

Prérequis

  • 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 tel que Visual Studio Code

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 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 au niveau global à l'aide de npm :
    npm install -g @google/gemini-cli
  2. Redémarrez votre terminal pour que gemini soit ajouté à votre PATH.
  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 créerons un projet dans un répertoire picker-wheel. Créez ce répertoire et accédez-y :
    mkdir picker-wheel
cd picker-wheel
  5. S'authentifier :
    • Démarrez Gemini CLI.
      gemini
    • Lorsque le message "Faites-vous confiance aux fichiers de ce dossier ?" s'affiche, sélectionnez Faire confiance au dossier (sélecteur).
    • Lorsque vous êtes invité à choisir une méthode d'authentification 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 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. Elle permet d'utiliser des fonctionnalités de développement axées sur le contexte, comme 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 pour afficher une liste de commandes telles que setup, newTrack, implement, etc.
  3. Quittez Gemini CLI : saisissez /quit dans le terminal CLI pour mettre fin à votre session Gemini CLI en direct avant de continuer.

4. 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 au hasard.

Configurer le contexte du produit

  1. Vérifiez que vous êtes dans le répertoire picker-wheelque vous avez créé dans la section précédente :
    pwd
  2. Démarrer 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 échafauder le projet et configurer l'environnement Conductor.
    /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 un titre

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

  1. Créez une piste à l'aide de /conductor:newTrack. 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. Examiner 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. Commencer l'implémentation :
    /conductor:implement
    Conductor va maintenant suivre le plan et écrire le code du projet.
  2. Validez 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. Examiner 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 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 de "brownfield" suivant, nous utiliserons 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/gemini-cli-extensions/firebase
  2. Démarrer Gemini CLI : démarrez une nouvelle session Gemini CLI à partir du répertoire de votre projet.
    gemini
  3. Démarrer 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 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. Examiner 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émenter : si tout semble correct, vous pouvez commencer l'implémentation.
    /conductor:implement
  7. Valider : actualisez 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.

6. 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.

7. Félicitations

Félicitations ! Vous avez utilisé l'extension Gemini CLI Conductor pour créer une application Web à partir de zéro, puis l'avez itérée avec des fonctionnalités complexes telles que l'authentification et l'intégration de base de données.

Étapes suivantes