Planowanie i tworzenie aplikacji za pomocą wtyczki Conductor

1. Wprowadzenie

W tym ćwiczeniu programowania dowiesz się, jak planować i tworzyć aplikacje za pomocą wtyczki Conductor. Conductor to opracowana przez Google wtyczka typu open source, która umożliwia korzystanie z funkcji programowania opartego na specyfikacji, takich jak planowanie i śledzenie implementacji. Zaczniesz od stworzenia aplikacji „od podstaw”. Następnie potraktujesz ją jako projekt „brownfield”, dodając do niej uwierzytelnianie i pamięć.

Jakie zadania wykonasz

• Zainstalujesz wtyczkę Conductor w Antigravity CLI lub Claude Code.
• Stworzysz od podstaw aplikację internetową „Picker Wheel” za pomocą funkcji planowania i implementacji Conductor.
• Dodasz do aplikacji personalizację, uwierzytelnianie i pamięć za pomocą Firebase.

Czego się nauczysz

• Jak używać wtyczki Conductor do planowania, implementowania i sprawdzania aplikacji „od podstaw”.
• Jak używać wtyczki Conductor do dodawania funkcji do aplikacji „brownfield”.

Czego potrzebujesz

• Przeglądarka internetowa, np. Chrome.
• Projekt Google Cloud z włączonymi płatnościami.
• Node.js zainstalowany (zalecana wersja 18 lub nowsza).
• Lokalny edytor kodu, np. Visual Studio Code.
• Agent kodowania, np. Antigravity CLI lub Claude Code.

2. Zanim zaczniesz

Utwórz projekt Google Cloud

1. W konsoli Google Cloud na stronie wyboru projektu wybierz lub utwórz projekt w chmurze Google Cloud.
2. Sprawdź, czy w projekcie w chmurze włączone są płatności. Dowiedz się, jak sprawdzić, czy w projekcie są włączone płatności.

Uruchamianie Cloud Shell

Korzystanie z Cloud Shell pozwala nam ukończyć tę sekcję bez konieczności instalowania lokalnie narzędzi gcloud i firebase CLI.

Cloud Shell to środowisko wiersza poleceń działające w Google Cloud, które jest wstępnie załadowane niezbędnymi narzędziami.

1. U góry konsoli Google Cloud kliknij Aktywuj Cloud Shell.
2. Po połączeniu z Cloud Shell sprawdź uwierzytelnianie:

   gcloud auth list
   

3. Potwierdź, że projekt jest skonfigurowany:

   gcloud config get project
   

4. Jeśli projekt nie jest ustawiony zgodnie z oczekiwaniami, ustaw go:

   export PROJECT_ID=<YOUR_PROJECT_ID>
   gcloud config set project $PROJECT_ID
   

Włącz interfejsy API

Włącz Firebase Management API w projekcie w chmurze Google.

gcloud services enable firebase.googleapis.com

Dodaj Firebase do projektu

Wiersz poleceń Firebase jest wstępnie zainstalowany w Cloud Shell. W Cloud Shell zaloguj się na to samo konto Google, które daje Ci dostęp do projektu w chmurze Google Cloud. Jeśli pracujesz lokalnie, zainstaluj wiersz poleceń Firebase, postępując zgodnie z instrukcjami.

firebase login

Uruchom to polecenie, aby dodać Firebase do projektu Google Cloud:

firebase projects:addfirebase

Jeśli po raz pierwszy uruchamiasz interfejs wiersza poleceń firebase, odpowiedz na wszystkie pytania.

Zamykanie Cloud Shell

Możesz zamknąć okno Cloud Shell. W następnej sekcji skonfigurujemy środowisko lokalne.

3. Instalowanie i uwierzytelnianie agentów kodowania w interfejsie wiersza poleceń

W tym kroku przygotujesz lokalne środowisko programistyczne, instalując i uwierzytelniając Antigravity CLI lub Claude Code w lokalnym edytorze kodu za pomocą danych logowania Google Cloud.

Instalowanie i uwierzytelnianie Antigravity CLI

1. Zainstaluj najnowszą wersję 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. Uruchom ponownie terminal , aby dodać agy do zmiennej PATH.
3. Sprawdź, czy instalacja zainstalowała najnowszą wersję.

   agy --version
   

4. Uwierzytelnij się za pomocą danych logowania Google Cloud.
   • Uruchom Antigravity CLI.

     agy
     

   • Gdy pojawi się prośba o wybranie metody logowania, wybierz Użyj projektu Google Cloud. Otwórz bezpieczny adres URL autoryzacji w przeglądarce. Zaloguj się za pomocą zatwierdzonych danych logowania i dokończ uwierzytelnianie. Przeglądarka wyświetli unikalny alfanumeryczny kod autoryzacji. Skopiuj ten kod, wróć do terminala i wklej go w wierszu poleceń.

   Możesz też wybrać inne metody logowania. To ćwiczenie programowania ma na celu pokazanie, jak pracować z projektem w chmurze Google Cloud.

5. Zamknij Antigravity CLI.Aby zakończyć sesję Antigravity CLI na żywo, przed kontynuowaniem wpisz w terminalu wiersza poleceń /exit.

Instalowanie i uwierzytelnianie Claude Code

Możesz też używać wtyczki Conductor z Claude Code. W tym ćwiczeniu zainstalujemy i uwierzytelnimy Claude Code za pomocą danych logowania Google Cloud.

1. Zainstaluj najnowszą wersję Claude Code.
2. Uwierzytelnij się za pomocą danych logowania Google Cloud.
   • Uruchom Claude Code.

     claude
     

   • Wpisz /login, aby wybrać metodę logowania. Wybierz opcję Platforma innej firmy · Amazon Bedrock, Microsoft Foundry lub Vertex AI i Google Vertex AI. Aby skonfigurować Google Vertex AI, wybierz Domyślne uwierzytelnianie aplikacji (google auth) i dokończ konfigurację zgodnie z instrukcjami.

   Możesz też wybrać inne metody logowania. To ćwiczenie programowania ma na celu pokazanie, jak pracować z projektem w chmurze Google Cloud.

3. Uruchom ponownie Claude Code.

4. Instalacja wtyczki Conductor

Conductor to opracowana przez Google wtyczka typu open source, która umożliwia korzystanie z funkcji programowania opartego na specyfikacji, takich jak planowanie i śledzenie implementacji.

Instalacja w Antigravity CLI

1. Zainstaluj wtyczkę:
   • Antigravity CLI

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

2. Sprawdź instalację:
   • Uruchom Antigravity CLI.

     agy
     

   • Wpisz /conductor, a zobaczysz listę poleceń, takich jak /conductor:conductor-setup, /conductor:conductor-new-track, conductor:conductor-implement itp.
3. Zamknij interfejs wiersza poleceń.Aby zakończyć sesję interfejsu wiersza poleceń na żywo, przed kontynuowaniem wpisz w terminalu /exit.

Instalacja w Claude Code

1. Zarejestruj repozytorium Marketplace i zainstaluj wtyczkę Conductor bezpośrednio w sesji Claude Code.

   /plugin marketplace add gemini-cli-extensions/conductor
   /plugin install conductor
   /reload-plugin
   

2. Sprawdź instalację.
   • Wpisz /conductor, a zobaczysz listę poleceń, takich jak /conductor-setup, conductor-new-track, conductor-implement itp.
3. Zamknij interfejs wiersza poleceń.Aby zakończyć sesję interfejsu wiersza poleceń na żywo, przed kontynuowaniem wpisz w terminalu Claude Code /exit.

5. Programowanie od podstaw: Picker Wheel

Teraz, gdy masz już skonfigurowane środowisko, możesz stworzyć nową aplikację od podstaw. Utworzysz „Picker Wheel” – lekką aplikację internetową, która obraca się, aby wybrać losową opcję.

Konfigurowanie kontekstu usługi

1. Utwórz nowy katalog projektu i przejdź do niego.Teraz będziemy pracować nad projektem w katalogu picker-wheel. Utwórz ten katalog i przejdź do niego.

   mkdir picker-wheel
   cd picker-wheel
   

2. Uruchom Antigravity CLI.Rozpocznij nową sesję wiersza poleceń w katalogu projektu za pomocą Antigravity CLI lub Claude Code.

   # Antigravity CLI
   agy
   
   # Claude Code
   claude
   

   • Gdy pojawi się pytanie „Czy ufasz plikom w tym folderze?”, wybierz Zaufaj folderowi (picker-wheel).
3. Zainicjuj Conductor.Uruchom polecenie konfiguracji, aby utworzyć szkielet projektu i skonfigurować środowisko Conductor.

   # Antigravity CLI
   /conductor:conductor-setup
   
   # Claude Code
   /conductor-setup
   

4. Postępuj zgodnie z interaktywnymi instrukcjami.Interaktywne instrukcje, które zobaczysz, nie będą dokładnie odpowiadać tym przykładom. Skup się na prostszym projekcie, aby zapoznać się z przepływem pracy Conductor.
   • Cel usługi: aplikacja internetowa, która wyświetla konfigurowalne koło fortuny, aby wybrać losowy element z listy.
     • Docelowi odbiorcy → Ogół społeczeństwa
     • Interakcja → Kliknij, aby zakręcić
     • Dostosowanie → Podstawowe
     • Platforma → Najpierw komputery
   • Wytyczne dotyczące usługi: automatyczne generowanie.
   • Stos technologii:
     • Języki → TypeScript/JavaScript – idealne do pełnego stosu technologii internetowych
     • Frontend → Vue.js – intuicyjne interfejsy internetowe
     • Backend → Express.js – szybki backend Node
     • Baza danych → Brak – nie jest potrzebna żadna baza danych
   • Przepływ pracy: standardowy.
   • Wymagania dotyczące usługi:
     • Historie użytkowników → Opcje dostosowywania, wyraźne wyświetlanie zwycięzcy
     • Najważniejsze funkcje → Lista opcji z możliwością edycji, losowe kolory
     • Ograniczenia → Tylko po stronie klienta, wysoka wydajność
     • Niefunkcjonalne → Wysoki poziom pokrycia testami, TypeScript i Vue.js, responsywny design
   Conductor wygeneruje pliki kontekstu w katalogu conductor/.

Tworzenie nowej ścieżki

„Ścieżka” w Conductor reprezentuje funkcję lub jednostkę pracy.

1. Rozpocznij nową ścieżkę za pomocą /conductor-new-rack.Conductor może zaproponować początkową ścieżkę na podstawie kontekstu usługi. Możesz też zaproponować własną ścieżkę lub poprosić Conductor o jej zasugerowanie.
2. Sprawdź wygenerowany plan.Conductor wygeneruje pliki index.md, spec.md i plan.md w katalogu conductor/tracks/{track-id}/. Poświęć chwilę na ich przeczytanie. Jeśli wszystko wygląda dobrze, Conductor poprosi Cię o zapisanie i zatwierdzenie początkowych plików konfiguracji.

Implementowanie ścieżki

1. Rozpocznij implementację.

   # Antigravity CLI
   /conductor:conductor-implement
   
   # Claude Code
   /conductor-implement
   

   Conductor będzie teraz realizować plan, pisząc kod projektu.

   Wskazówka: aby uniknąć zablokowania w interaktywnych powłokach lub długotrwałych procesach (takich jak serwery deweloperskie lub obserwatory testów), musimy mieć pewność, że Conductor wie, jak dokładnie obsługiwać te konkretne polecenia. Narzędzia takie jak Vite (npm run dev) i Vitest (npm run test) często działają domyślnie w „trybie obserwacji”, co powoduje, że proces pozostaje otwarty na czas nieokreślony. Możesz poinstruować Conductor, aby wyłączył tryb obserwacji lub użył is_background: true podczas wykonywania poleceń, aktualizując workflow.md.

2. Sprawdź aplikację.W fazie implementacji Conductor będzie Cię prosić o ręczne przetestowanie aplikacji. Na przykład poprosi Cię o otwarcie lokalnego serwera WWW, wyświetlenie podglądu aplikacji w przeglądarce i sprawdzenie zmian. Po zakończeniu implementacji powinna być widoczna działająca aplikacja Picker Wheel.

   Rozwiązywanie problemów: jeśli wygenerowany kod zachowuje się nieoczekiwanie, sprawdź plik conductor/tracks/.../plan.md pod kątem pominiętych kroków lub błędów.

3. Sprawdź implementację.Na koniec możesz poprosić Conductor o sprawdzenie implementacji. Powinien on sprawdzić kod źródłowy, zsynchronizować dokumentację projektu i zarchiwizować ścieżkę.

   # Antigravity CLI
   /conductor:conductor-review
   
   # Claude Code
   /conductor-review
   

6. Iteracja „brownfield”: dodawanie personalizacji

Teraz przejdziesz do programowania „brownfield”. Ulepszysz aplikację internetową Picker Wheel z poprzedniej sekcji, aby zalogowani użytkownicy mogli zapisywać i przywracać konfiguracje Picker Wheel.

Jeśli chcesz przejść bezpośrednio do aplikacji „brownfield”, możesz pobrać złoty kod z ostatniej sekcji jako implementację referencyjną i kontynuować jego rozwijanie.

Tworzenie ścieżki personalizacji

1. W poniższym przykładzie „brownfield” do uwierzytelniania i pamięci użyjemy Firebase. Zainstaluj umiejętności Firebase, aby Conductor mógł z nich korzystać.
2. Uruchom agenta wiersza poleceń.Rozpocznij nową sesję wiersza poleceń.

   # Antigravity CLI
   /new
   
   # Claude Code
   /new
   

3. Rozpocznij nową ścieżkę.Rozpocznij nową ścieżkę.

   # 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. Postępuj zgodnie z interaktywnymi instrukcjami.Interaktywne instrukcje, które zobaczysz, nie będą dokładnie odpowiadać tym przykładom. Skup się na prostszym projekcie, aby zapoznać się z przepływem pracy Conductor.
   • Cel ścieżki:
     • Dostawca uwierzytelniania → Uwierzytelnianie Firebase
     • Zapisane konfiguracje → Opcje koła
     • Przechowywanie danych → Firestore
     • Interfejs logowania Firestore → Nakładka modalna
   Conductor wygeneruje pliki kontekstu dla nowej ścieżki w katalogu conductor/tracks/{track-id}.
5. Sprawdź wygenerowany plan.Poświęć chwilę na przeczytanie plików index.md, spec.md i plan.md w katalogu conductor/tracks/{track-id}/.
6. Implementuj.Jeśli wszystko wygląda dobrze, możesz rozpocząć implementację.

   # Antigravity CLI
   /conductor:conductor-implement
   
   # Claude Code
   /conductor-implement
   

7. Sprawdź. Powinna być widoczna zaktualizowana aplikacja.

   Jeśli AI utknie podczas testowania implementacji uwierzytelniania, pamiętaj, aby włączyć Logowanie przez Google w konsoli Firebase w sekcji Uwierzytelnianie > Metoda logowania.

   

Oto złoty kod implementacji referencyjnej. Aby prawidłowo uruchomić aplikację, musisz podać projekt w Firebase w pliku .firebaserc i konfiguracje Firebase w pliku firebase.ts.

7. Zwalnianie miejsca

Aby uniknąć obciążenia konta Google Cloud bieżącymi opłatami, usuń zasoby utworzone podczas tego ćwiczenia programowania.

Usuwanie projektu Firebase i projektu Google Cloud

Najprostszym sposobem na zwolnienie miejsca jest usunięcie całego projektu.

1. W konsoli Google Cloud wybierz utworzony projekt.
2. Kliknij USUŃ.

Jeśli chcesz zachować projekt, ale usunąć zasoby:

1. Usuń bazę danych Firestore: otwórz konsolę Firebase > Firestore i usuń bazę danych.
2. Usuń uwierzytelnianie: otwórz konsolę Firebase > UwierzytelnianieMetoda logowania i wyłącz Google.

8. Gratulacje

Gratulacje! Udało Ci się użyć wtyczki Conductor w wybranym agencie kodowania (Antigravity CLI lub Claude Code), aby stworzyć od podstaw aplikację internetową, a następnie rozwinąć ją o złożone funkcje, takie jak uwierzytelnianie i integracja z bazą danych.

Dalsze kroki

• Zapoznaj się z dokumentacją wtyczek Antigravity CLI.
• Zapoznaj się z dokumentacją wtyczek Claude Code.