Apps mit dem Conductor-Plug-in planen und entwickeln

1. Einführung

In diesem Codelab erfahren Sie, wie Sie Softwareanwendungen mit dem Conductor-Plug-in planen und erstellen. Conductor ist ein von Google entwickeltes Open-Source-Plug-in, das spezifikationsgesteuerte Entwicklungsfunktionen wie die Planung und die Implementierungsverfolgung ermöglicht. 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

  • Installieren Sie das Conductor-Plug-in in der Antigravity CLI oder in Claude Code.
  • Webanwendung „Picker Wheel“ von Grund auf neu mit den Planungs- und Implementierungsfunktionen von Conductor erstellen
  • Personalisierung zur Anwendung hinzufügen, indem Sie Authentifizierung und Speicher mit Firebase hinzufügen

Lerninhalte

  • Conductor-Plug‑in zum Planen, Implementieren und Überprüfen einer neuen Anwendung verwenden
  • Conductor-Plug‑in verwenden, um einer bestehenden Anwendung Funktionen hinzuzufügen

Voraussetzungen

2. Hinweis

Google Cloud-Projekt erstellen

  1. Wählen Sie in der Google Cloud Console auf der Seite der 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. CLI-Coding-Agents installieren und authentifizieren

In diesem Schritt bereiten Sie Ihre lokale Entwicklungsumgebung vor, indem Sie die Antigravity CLI oder Claude Code in Ihrem lokalen Code-Editor mit Ihren Google Cloud-Anmeldedaten installieren und authentifizieren.

Antigravity CLI installieren und authentifizieren

  1. Installieren Sie die neueste Version der Antigravity CLI.
    # 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. Starten Sie das Terminal neu, damit agy zu Ihrem PATH hinzugefügt wird.
  3. Prüfen Sie, ob bei der Installation die neueste Version installiert wurde.
    agy --version
  4. Authentifizieren Sie sich mit Ihren Google Cloud-Anmeldedaten.
    • Starten Sie die Antigravity CLI.
      agy
    • Wenn Sie aufgefordert werden, eine Anmeldemethode auszuwählen, wählen Sie Google Cloud-Projekt verwenden aus. Öffnen Sie die sichere Autorisierungs-URL in einem Webbrowser. Melden Sie sich mit Ihren genehmigten Anmeldedaten an und schließen Sie die Authentifizierung ab. Im Browser wird ein eindeutiger alphanumerischer Autorisierungscode angezeigt. Kopieren Sie diesen Code, kehren Sie zum Terminal zurück und fügen Sie ihn in die Eingabeaufforderung ein.
  5. Antigravity CLI beenden: Geben Sie im CLI-Terminal /exit ein, um die aktive Antigravity CLI-Sitzung zu beenden, bevor Sie fortfahren.

Cloud Code installieren und authentifizieren

Alternativ können Sie das Conductor-Plug-in mit Claude Code verwenden. Hier installieren und authentifizieren wir Claude Code mit Ihren Google Cloud-Anmeldedaten.

  1. Installieren Sie die aktuelle Version von Claude Code.
  2. Authentifizieren Sie sich mit Ihren Google Cloud-Anmeldedaten.
    • Starten Sie Claude Code.
      claude
    • Geben Sie /login ein, um Ihre Anmeldemethode auszuwählen. Wählen Sie die Option Drittanbieterplattform · Amazon Bedrock, Microsoft Foundry oder Vertex AI und Google Vertex AI aus. Wenn Sie Google Vertex AI einrichten möchten, wählen Sie Standardanmeldedaten für Anwendungen (Google-Authentifizierung) aus und folgen Sie der Anleitung.
  3. Claude Code neu starten

4. Conductor-Plug-in installieren

Conductor ist ein von Google entwickeltes Open-Source-Plug-in, das spezifikationsgesteuerte Entwicklungsfunktionen wie die Planung und die Implementierungsverfolgung ermöglicht.

Installation in der Antigravity CLI

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

In Claude Code installieren

  1. Registrieren Sie das Marketplace-Repository und installieren Sie das Conductor-Plug-in direkt in Ihrer Claude Code-Sitzung.
    /plugin marketplace add gemini-cli-extensions/conductor
/plugin install conductor
/reload-plugin
  2. Installation prüfen
    • Geben Sie /conductor ein. Daraufhin wird eine Liste mit Befehlen wie /conductor-setup, conductor-new-track, conductor-implement usw. angezeigt.
  3. CLI beenden: Geben Sie im Claude Code-Terminal /exit ein, um Ihre aktive CLI-Sitzung zu beenden, bevor Sie fortfahren.

5. 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. Neues Projektverzeichnis erstellen und dorthin wechseln: Wir arbeiten jetzt an einem Projekt im Verzeichnis picker-wheel. Erstellen Sie dieses Verzeichnis und wechseln Sie dorthin.
    mkdir picker-wheel
cd picker-wheel
  2. Antigravity CLI starten: Starten Sie eine neue CLI-Sitzung über Ihr Projektverzeichnis mit Antigravity CLI oder Claude Code.
    # Antigravity CLI
agy

# Claude Code
claude
    • Wenn Sie gefragt werden, ob Sie den Dateien in diesem Ordner vertrauen, wählen Sie Ordner vertrauen (Auswahlrad) aus.
  3. Conductor initialisieren: Führen Sie den Einrichtungsbefehl aus, um das Projekt zu erstellen und die Conductor-Umgebung einzurichten.
    # Antigravity CLI
/conductor:conductor-setup

# Claude Code
/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 einfacheres 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älliger Artikel aus einer Liste ausgewählt werden kann.
      • Zielgruppe → Öffentlichkeit
      • Interaktion → Tippen/Klicken zum Drehen
      • Anpassung → Einfach
      • Plattform → Desktop-First
    • Produktrichtlinien: automatisch generieren.
    • Technologie-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 und 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. Starten Sie einen neuen Track mit /conductor-new-rack.Conductor schlägt möglicherweise einen ersten Track 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}/ ein index.md, ein spec.md und ein 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
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
    Conductor arbeitet den Plan jetzt ab 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, eine Vorschau der Anwendung in Ihrem Browser aufzurufen und die Änderungen zu überprüfen. 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. Er sollte den Quellcode prüfen, die Projektdokumentation synchronisieren und den Track archivieren.
    # Antigravity CLI
/conductor:conductor-review

# Claude Code
/conductor-review

6. Brownfield-Iteration: Personalisierung hinzufügen

Jetzt geht es mit der Brownfield-Entwicklung weiter. 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 den Speicher. Installieren Sie die Firebase-Skills, damit Conductor sie verwenden kann.
  2. CLI-Agent starten: Starten Sie eine neue CLI-Sitzung.
    # Antigravity CLI
/new

# Claude Code
/new
  3. Neuen Track starten: Starten Sie einen neuen Track.
    # 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. Folgen Sie den interaktiven Aufforderungen. Die interaktiven Aufforderungen, die Sie sehen, stimmen nicht genau mit diesen Beispielen überein. Konzentrieren Sie sich auf ein einfacheres Design, um sich mit dem Conductor-Workflow vertraut zu machen.
    • Zielvorhaben:
      • Auth Provider → 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.
    # Antigravity CLI
/conductor:conductor-implement

# Claude Code
/conductor-implement
  7. Bestätigen: Laden Sie Ihre Anwendung neu. Sie sollten eine aktualisierte Anwendung sehen. Auswahlrad mit Anmeldung

Hier ist der 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.

7. Bereinigen

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

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

8. Glückwunsch

Das wars! Sie haben das Lab erfolgreich abgeschlossen. Sie haben das Conductor-Plug-in in Ihrem bevorzugten Coding-Agent (Antigravity CLI oder Claude Code) erfolgreich verwendet, um eine Webanwendung von Grund auf zu erstellen und dann mit komplexen Funktionen wie Authentifizierung und Datenbankintegration zu iterieren.

Nächste Schritte