Apps mit der Conductor-Erweiterung für die Gemini CLI planen und erstellen

1. Einführung

In diesem Codelab erfahren Sie, wie Sie Softwareanwendungen mit der Gemini CLI Conductor-Erweiterung planen und erstellen. Sie beginnen mit der Entwicklung einer „Greenfield“-Anwendung von Grund auf. Anschließend behandeln Sie es als „Brownfield“-Projekt und iterieren es, um Authentifizierung und Speicher hinzuzufügen.

Aufgaben

  • Gemini CLI und die Conductor-Erweiterung installieren
  • „Picker Wheel“-Web-App von Grund auf mit den Planungs- und Implementierungsfunktionen von Conductor erstellen
  • Personalisierung der Anwendung durch Hinzufügen von Authentifizierung und Speicher mit Firebase

Lerninhalte

  • Verwendung der Conductor-Erweiterung zum Planen, Implementieren und Überprüfen einer neuen Anwendung
  • Conductor-Erweiterung verwenden, um einer bestehenden Anwendung Funktionen hinzuzufügen

Voraussetzungen

  • Ein Webbrowser wie Chrome
  • Ein Google Cloud-Projekt mit aktivierter Abrechnung
  • Node.js ist installiert (Version 18 oder höher wird empfohlen).
  • Ein lokaler Code-Editor wie Visual Studio Code

2. Hinweis

Google Cloud-Projekt erstellen

  1. Wählen Sie in der Google Cloud Console auf der Seite zur Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.
  2. Die Abrechnung für das Cloud-Projekt muss aktiviert sein. So prüfen Sie, ob die Abrechnung für ein Projekt aktiviert ist.

Cloud Shell starten

Cloud Shell ist eine Befehlszeilenumgebung, die in Google Cloud ausgeführt wird und mit den erforderlichen Tools vorinstalliert ist.

  1. Klicken Sie oben in der Google Cloud Console auf Cloud Shell aktivieren.
  2. Prüfen Sie nach der Verbindung mit Cloud Shell Ihre Authentifizierung:
    gcloud auth list
  3. Prüfen Sie, ob Ihr Projekt konfiguriert ist:
    gcloud config get project
  4. Wenn Ihr Projekt nicht wie erwartet festgelegt ist, legen Sie es fest:
    export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

APIs aktivieren

Aktivieren Sie die Firebase Management API in Ihrem Google Cloud-Projekt.

gcloud services enable firebase.googleapis.com

Firebase zum Projekt hinzufügen

Die Firebase CLI ist in Cloud Shell vorinstalliert. Melden Sie sich in Cloud Shell mit demselben Google-Konto an, mit dem Sie auf das Google Cloud-Projekt zugreifen. Wenn Sie lokal arbeiten, installieren Sie die Firebase CLI gemäß der Anleitung.

firebase login

Führen Sie den folgenden Befehl aus, um Firebase zu Ihrem Google Cloud-Projekt hinzuzufügen:

firebase projects:addfirebase

Wenn Sie die firebase CLI zum ersten Mal ausführen, beantworten Sie alle Fragen, die Ihnen gestellt werden.

Cloud Shell beenden

Sie können das Cloud Shell-Fenster schließen. Im folgenden Abschnitt konfigurieren wir Ihre lokale Umgebung.

3. Gemini CLI und Conductor lokal installieren

In diesem Schritt bereiten Sie Ihre lokale Entwicklungsumgebung vor, indem Sie die Gemini CLI und die Conductor-Erweiterung mit Ihrem lokalen Code-Editor und Terminal installieren.

Gemini CLI installieren

  1. Installieren Sie die neueste Version der Gemini CLI global mit npm:
    npm install -g @google/gemini-cli
  2. Starten Sie das Terminal neu, damit gemini Ihrem PATH hinzugefügt wird.
  3. Prüfen Sie, ob bei der Installation die neueste Version installiert wurde:
    gemini --version
  4. Neues Projektverzeichnis erstellen und dorthin wechseln: In einem späteren Abschnitt erstellen wir ein Projekt im Verzeichnis picker-wheel. Erstellen Sie dieses Verzeichnis jetzt und wechseln Sie dorthin:
    mkdir picker-wheel
cd picker-wheel
  5. Authentifizieren
      :
    • Starten Sie die Gemini CLI.
      gemini
    • Wenn Sie gefragt werden, ob Sie den Dateien in diesem Ordner vertrauen, wählen Sie Ordner vertrauen (Auswahlrad) aus.
    • Wenn Sie gefragt werden, wie Sie sich für dieses Projekt authentifizieren möchten, wählen Sie Vertex AI aus. Folgen Sie dem Authentifizierungsleitfaden, um einen Google Cloud-API-Schlüssel zu erhalten und die Umgebungsvariable GOOGLE_API_KEY festzulegen. Sehen Sie sich die verschiedenen Nutzungsstufen und die entsprechenden API-Ratenbegrenzungen an.
  6. Gemini CLI beenden: Geben Sie im CLI-Terminal /quit ein, um die aktive Gemini CLI-Sitzung zu beenden, bevor Sie fortfahren.

Conductor-Erweiterung installieren

Conductor ist eine von Google entwickelte Open-Source-Gemini CLI-Erweiterung, die kontextbezogene Entwicklungsfunktionen wie die Planung und die Implementierungsverfolgung ermöglicht.

  1. Erweiterung installieren:
    gemini extensions install https://github.com/gemini-cli-extensions/conductor
  2. Installation überprüfen:
    • Starten Sie die Gemini CLI. 
      gemini
    • Geben Sie /conductor ein. Daraufhin wird eine Liste mit Befehlen wie setup, newTrack, implement usw. angezeigt.
  3. Gemini CLI beenden: Geben Sie im CLI-Terminal /quit ein, um die aktive Gemini CLI-Sitzung zu beenden, bevor Sie fortfahren.

4. Greenfield-Entwicklung: Das Picker Wheel

Nachdem Sie Ihre Umgebung eingerichtet haben, erstellen Sie eine neue Anwendung von Grund auf neu. Sie erstellen ein „Glücksrad“ – eine einfache Web-App, die sich dreht, um eine zufällige Option auszuwählen.

Produktkontext einrichten

  1. Prüfen Sie, ob Sie sich im Verzeichnis picker-wheel befinden, das Sie im vorherigen Abschnitt erstellt haben:
    pwd
  2. Gemini CLI starten: Starten Sie eine neue Gemini CLI-Sitzung über Ihr Projektverzeichnis.
    gemini
  3. Conductor initialisieren: Führen Sie den Einrichtungsbefehl aus, um das Projekt zu erstellen und die Conductor-Umgebung einzurichten.
    /conductor:setup
  4. Folgen Sie den interaktiven Aufforderungen: Die interaktiven Aufforderungen, die Sie sehen, stimmen nicht genau mit diesen Beispielen überein. Konzentrieren Sie sich auf ein einfaches Design, um sich mit dem Conductor-Workflow vertraut zu machen.
    • Produktzielvorhaben: Eine Webanwendung, in der ein konfigurierbares Glücksrad angezeigt wird, mit dem ein zufälliges Element aus einer Liste ausgewählt werden kann.
      • Zielgruppe → Öffentlichkeit
      • Interaktion → Tippen/Klicken zum Drehen
      • Anpassung → Einfach
      • Plattform → Desktop-First
    • Produktrichtlinien: Automatisch generieren.
    • Tech-Stack:
      • Sprachen → TypeScript/JavaScript – Ideal für Full-Stack-Webentwicklung
      • Frontend → Vue.js – Intuitive Weboberflächen
      • Backend → Express.js – Schnelles Node-Backend
      • Datenbank → Keine – Keine Datenbank erforderlich
    • Workflow: Standard.
    • Produktanforderungen:
      • User Stories → Anpassbare Optionen, deutliche Anzeige des Gewinners
      • Wichtige Funktionen → Bearbeitbare Optionsliste, zufällige Farben
      • Einschränkungen → Nur clientseitig, hohe Leistung
      • Nicht funktional → Hohe Testabdeckung, TypeScript & Vue.js, responsives Design
    Conductor generiert Kontextdateien in einem conductor/-Verzeichnis.

Neuen Track erstellen

Ein „Track“ in Conductor stellt eine Funktion oder eine Arbeitseinheit dar.

  1. Neuen Track starten mit /conductor:newTrack Conductor schlägt möglicherweise einen ersten Titel basierend auf dem Produktkontext vor. Alternativ können Sie einen eigenen Titel vorschlagen oder den Dirigenten bitten, einen Titel vorzuschlagen.
  2. Generierten Plan prüfen: Conductor generiert in conductor/tracks/{track-id}/ eine index.md, eine spec.md und eine plan.md. Nehmen Sie sich einen Moment Zeit, um sie zu lesen. Wenn alles in Ordnung ist, werden Sie von Conductor aufgefordert, die Dateien für die Ersteinrichtung zu speichern und zu übertragen.

Track implementieren

  1. Implementierung starten:
    /conductor:implement
    Conductor arbeitet jetzt den Plan durch und schreibt Code für das Projekt.
  2. Anwendung überprüfen: Während der Implementierungsphase werden Sie von Conductor aufgefordert, die Anwendung manuell zu testen. Sie werden beispielsweise aufgefordert, den lokalen Webserver zu öffnen, die Anwendung in Ihrem Browser in der Vorschau anzusehen und die Änderungen zu bestätigen. Wenn die Implementierung abgeschlossen ist, sollte ein funktionsfähiges Auswahlrad angezeigt werden.Picker Wheel-Anwendung
  3. Implementierung überprüfen: Als letzten Schritt können Sie Conductor bitten, die Implementierung zu überprüfen. Der Quellcode sollte überprüft, die Projektdokumentation synchronisiert und der Track archiviert werden.
    /conductor:review

5. Brownfield-Iteration: Personalisierung hinzufügen

Jetzt wechseln Sie zur Brownfield-Entwicklung. Sie verbessern die Picker Wheel-Webanwendung aus dem vorherigen Abschnitt, sodass angemeldete Nutzer ihre Picker Wheel-Konfigurationen speichern und wiederherstellen können.

Personalisierungs-Track erstellen

  1. Im folgenden Beispiel für eine bestehende Anwendung verwenden wir Firebase für die Authentifizierung und Speicherung. Installieren Sie die Firebase-Erweiterung für die Gemini CLI, damit Conductor sie verwenden kann.
    gemini extensions install https://github.com/gemini-cli-extensions/firebase
  2. Gemini CLI starten: Starten Sie eine neue Gemini CLI-Sitzung über Ihr Projektverzeichnis.
    gemini
  3. Neuen Track starten: Starten Sie einen neuen Track.
    /conductor:newTrack "I want users to be able to log in to their accounts and
save their picker wheel configurations."
  4. Folgen Sie den interaktiven Aufforderungen: Die interaktiven Aufforderungen, die Sie sehen, stimmen nicht genau mit diesen Beispielen überein. Konzentrieren Sie sich auf ein einfaches Design, um sich mit dem Conductor-Workflow vertraut zu machen.
    • Zielvorhaben:
      • Autorisierungsanbieter → Firebase Auth
      • „Gespeicherte Konfigurationen“ → „Radoptionen“
      • Datenspeicher → Firestore
      • Firestore-Anmelde-UI → Modales Overlay
    Conductor generiert Kontextdateien für einen neuen Track in conductor/tracks/{track-id}.
  5. Generierten Plan prüfen: Nehmen Sie sich einen Moment Zeit, um sich eine index.md, eine spec.md und eine plan.md in conductor/tracks/{track-id}/ anzusehen.
  6. Implementieren: Wenn alles in Ordnung ist, können Sie mit der Implementierung beginnen.
    /conductor:implement
  7. Bestätigen: Laden Sie Ihre Anwendung neu. Sie sollten eine aktualisierte Anwendung sehen. Auswahlrad mit Anmeldung

Hier finden Sie den Golden Code für eine Referenzimplementierung. Sie müssen Ihr Firebase-Projekt in .firebaserc und Ihre Firebase-Konfigurationen in firebase.ts angeben, damit Ihre Anwendung ordnungsgemäß gestartet werden kann.

6. Bereinigen

Löschen Sie die in diesem Codelab erstellten Ressourcen, um laufende Gebühren für Ihr Google Cloud-Konto zu vermeiden.

Firebase-Projekt (und Google Cloud-Projekt) löschen

Am einfachsten bereinigen Sie, indem Sie das Projekt vollständig löschen.

  1. Wählen Sie in der Google Cloud Console das Projekt aus, das Sie erstellt haben.
  2. Klicken Sie auf Delete.

Wenn Sie das Projekt beibehalten, aber Ressourcen löschen möchten, gehen Sie so vor:

  1. Firestore-Datenbank löschen: Rufen Sie die Firebase Console > Firestore auf und löschen Sie die Datenbank.
  2. Authentifizierung löschen: Rufen Sie die Firebase Console > Authentifizierung > Anmeldemethode auf und deaktivieren Sie Google.

7. Glückwunsch

Glückwunsch! Sie haben die Gemini CLI-Erweiterung „Conductor“ erfolgreich verwendet, um eine Webanwendung von Grund auf zu erstellen und dann mit komplexen Funktionen wie Authentifizierung und Datenbankintegration zu iterieren.

Nächste Schritte