Planowanie i tworzenie aplikacji za pomocą narzędzia interfejs wiersza poleceń Gemini Conductor

1. Wprowadzenie

Z tego ćwiczenia dowiesz się, jak planować i tworzyć aplikacje za pomocą rozszerzenia interfejsu wiersza poleceń Gemini Conductor. Zaczniesz od zbudowania aplikacji „od zera”. Następnie potraktujesz go jako projekt „brownfield”, w którym będziesz wprowadzać iteracyjne zmiany, aby dodać uwierzytelnianie i pamięć.

Jakie zadania wykonasz

• Zainstaluj interfejs wiersza poleceń Gemini i rozszerzenie Conductor.
• Tworzenie od podstaw aplikacji internetowej „Picker Wheel” przy użyciu funkcji planowania i wdrażania Conductora
• Dodaj personalizację do aplikacji, dodając uwierzytelnianie i pamięć masową za pomocą Firebase.

Czego się nauczysz

• Jak używać rozszerzenia Conductor do planowania, wdrażania i sprawdzania aplikacji „greenfield”
• Jak używać rozszerzenia Conductor do dodawania funkcji do aplikacji „brownfield”

Czego potrzebujesz

• przeglądarka, np. Chrome;
• projekt Google Cloud z włączonymi płatnościami;
• Zainstalowany Node.js (zalecana wersja 18 lub nowsza)
• Lokalny edytor kodu, np. Visual Studio Code.

2. Zanim zaczniesz

Tworzenie projektu Google Cloud

1. W konsoli Google Cloud na stronie selektora projektu wybierz lub utwórz projekt w chmurze Google.
2. Sprawdź, czy w projekcie Cloud 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 wykonać zadania z tej sekcji bez konieczności instalowania lokalnie narzędzi interfejsu wiersza poleceń gcloud i firebase.

Cloud Shell to środowisko wiersza poleceń działające w Google Cloud, które zawiera niezbędne narzędzia.

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

   gcloud auth list
   

3. Sprawdź, czy 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łączyć interfejs Firebase Management API w projekcie w chmurze Google,

gcloud services enable firebase.googleapis.com

Dodawanie 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

Aby dodać Firebase do projektu Google Cloud, uruchom to polecenie:

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 kolejnej sekcji skonfigurujemy środowisko lokalne.

3. Instalowanie interfejsu wiersza poleceń Gemini i Conductora lokalnie

W tym kroku przygotujesz lokalne środowisko programistyczne, instalując interfejs wiersza poleceń Gemini i rozszerzenie Conductor za pomocą lokalnego edytora kodu i terminala.

Instalowanie interfejsu wiersza poleceń Gemini

1. Zainstaluj najnowszą wersję interfejsu wiersza poleceń Gemini globalnie za pomocą npm:

   npm install -g @google/gemini-cli
   

   Jeśli zobaczysz błędy uprawnień, może być konieczne użycie menedżera wersji, takiego jak nvm, lub uruchomienie tego polecenia jako roota za pomocą sudo.

2. Uruchom ponownie terminal, aby dodać gemini do zmiennej PATH.
3. Sprawdź, czy instalacja obejmuje najnowszą wersję:

   gemini --version
   

4. Utwórz nowy katalog projektu i przejdź do niego: w dalszej części utworzymy projekt w katalogu picker-wheel. Utwórz teraz ten katalog i przejdź do niego:

   mkdir picker-wheel
   cd picker-wheel
   

5. Uwierzytelnianie:
   • Uruchom interfejs wiersza poleceń Gemini.

     gemini
     

   • Gdy pojawi się pytanie „Czy ufasz plikom w tym folderze?”, wybierz Zaufany folder (selektor).
   • Gdy pojawi się pytanie „Jak chcesz uwierzytelnić ten projekt?”, wybierz Vertex AI. Postępuj zgodnie z przewodnikiem uwierzytelniania, aby uzyskać klucz interfejsu API Google Cloud i ustawić zmienną środowiskową GOOGLE_API_KEY. Poświęć chwilę na zapoznanie się z różnymi poziomami wykorzystania i odpowiadającymi im limitami szybkości interfejsu API.
6. Zamykanie interfejsu wiersza poleceń Gemini: aby zakończyć sesję na żywo w interfejsie wiersza poleceń Gemini, wpisz /quit w terminalu interfejsu wiersza poleceń i kontynuuj.

Instalowanie rozszerzenia Conductor

Conductor to opracowane przez Google rozszerzenie interfejsu wiersza poleceń Gemini o otwartym kodzie źródłowym, które umożliwia korzystanie z funkcji programowania opartego na kontekście, takich jak planowanie i śledzenie implementacji.

1. Zainstaluj rozszerzenie:

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

2. Sprawdź instalację:
   • Uruchom interfejs wiersza poleceń Gemini.

     gemini
     

   • Wpisz /conductor, a zobaczysz listę poleceń, takich jak setup, newTrack, implement itp.
3. Zamykanie interfejsu wiersza poleceń Gemini: aby zakończyć sesję na żywo w interfejsie wiersza poleceń Gemini, wpisz /quit w terminalu interfejsu wiersza poleceń i kontynuuj.

4. Greenfield Development: The Picker Wheel

Środowisko jest już skonfigurowane, więc możesz utworzyć nową aplikację od zera. Utworzysz „koło wyboru” – prostą aplikację internetową, która obraca się, aby wybrać losową opcję.

Konfigurowanie kontekstu usługi

1. Sprawdź, czy jesteś w picker-wheelkatalogu utworzonym w poprzedniej sekcji:

   pwd
   

2. Uruchom interfejs wiersza poleceń Gemini: rozpocznij nową sesję interfejsu wiersza poleceń Gemini w katalogu projektu.

   gemini
   

3. Zainicjuj Conductora: uruchom polecenie konfiguracji, aby utworzyć szkielet projektu i skonfigurować środowisko Conductora.

   /conductor:setup
   

4. Postępuj zgodnie z interaktywnymi instrukcjami: interaktywne instrukcje, które zobaczysz, nie będą dokładnie takie same jak w tych przykładach. Skup się na prostszym projekcie, aby zapoznać się z przepływem pracy w Conductorze.
   • Cel produktu: aplikacja internetowa, która wyświetla konfigurowalne koło fortuny do losowego wybierania elementu z listy.
     • Grupa docelowa → Ogół społeczeństwa
     • Interakcja → Kliknij, aby obrócić
     • Dostosowywanie → Podstawowe
     • Platforma → Najpierw komputery
   • Wytyczne dotyczące usługi: generuj automatycznie.
   • Stos technologiczny:
     • Języki → TypeScript/JavaScript – idealne do tworzenia pełnych aplikacji internetowych
     • Frontend → Vue.js - Intuitive web interfaces
     • Backend → Express.js - Fast Node backend
     • Baza danych → Brak – nie jest potrzebna baza danych
   • Przepływ pracy: standardowy.
   • Wymagania dotyczące produktu:
     • Historie użytkowników → Opcje dostosowywania, wyświetlanie zwycięzcy
     • Najważniejsze funkcje → Lista opcji do edycji, losowe kolory
     • Ograniczenia → Tylko po stronie klienta, Wysoka wydajność
     • Niefunkcjonalne → wysoki poziom pokrycia testami, TypeScript i Vue.js, elastyczny projekt
   Conductor wygeneruje pliki kontekstowe w katalogu conductor/.

Tworzenie nowej ścieżki

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

1. Rozpocznij nową ścieżkę, korzystając z /conductor:newTrack. Conductor może zaproponować wstępną ścieżkę na podstawie kontekstu produktu. Możesz też zaproponować własny utwór lub poprosić dyrygenta o sugestię.
2. Sprawdź wygenerowany plan: Conductor wygeneruje index.md, spec.md i plan.md w 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 konfiguracyjnych.

Implementowanie śledzenia

1. Rozpocznij wdrażanie:

   /conductor:implement
   

   Conductor będzie teraz działać zgodnie z planem, pisząc kod projektu.

   Wskazówka: aby uniknąć zawieszania się interaktywnych powłok lub długotrwałych procesów (takich jak serwery deweloperskie lub narzędzia do monitorowania testów), musimy mieć pewność, że Conductor wie, jak 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 obserwowania”, który utrzymuje proces otwarty w nieskończoność. Możesz poinstruować Conductora, aby wyłączył tryb obserwacji lub używał is_background: true podczas wykonywania poleceń, aktualizując workflow.md.

2. Sprawdź aplikację: w trakcie wdrażania Conductor poprosi Cię 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 się wyświetlić działająca tarcza wyboru.

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

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

   /conductor:review
   

5. Iteracja w przypadku istniejącego projektu: dodawanie personalizacji

Teraz przejdziesz do rozwoju „brownfield”. Ulepszysz aplikację internetową z kołem wyboru z poprzedniej sekcji, aby zalogowani użytkownicy mogli zapisywać i przywracać konfiguracje koła wyboru.

Jeśli chcesz od razu przejść do aplikacji brownfield, możesz pobrać złoty kod z ostatniej sekcji, aby uzyskać implementację referencyjną i kontynuować jej rozwijanie.

Tworzenie ścieżki personalizacji

1. W poniższym przykładzie „brownfield” do uwierzytelniania i przechowywania będziemy używać Firebase. Zainstaluj rozszerzenie Firebase interfejsu wiersza poleceń Gemini, aby Conductor mógł go używać.

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

2. Uruchom interfejs wiersza poleceń Gemini: rozpocznij nową sesję interfejsu wiersza poleceń Gemini w katalogu projektu.

   gemini
   

3. Rozpocznij nowy ślad: rozpocznij nowy ślad.

   /conductor:newTrack "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 takie same jak w tych przykładach. Skup się na prostszym projekcie, aby zapoznać się z przepływem pracy w Conductorze.
   • Śledź cel:
     • Dostawca uwierzytelniania → Uwierzytelnianie Firebase
     • Zapisane konfiguracje → Opcje kół
     • Przechowywanie danych → Firestore
     • Interfejs logowania w Firestore → nakładka modalna
   Conductor wygeneruje pliki kontekstowe dla nowego utworu w folderze conductor/tracks/{track-id}.
5. Sprawdź wygenerowany plan: poświęć chwilę na przeczytanie index.md, spec.md i plan.md w conductor/tracks/{track-id}/.

   Wskazówka: zachęcamy do rozmowy z Gemini, aby jak najlepiej zrozumieć i omówić plan przed przejściem do jego realizacji.

6. Wdrożenie: jeśli wszystko wygląda dobrze, możesz rozpocząć wdrożenie.

   /conductor:implement
   

7. Weryfikacja: ponownie załaduj aplikację. 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 dla implementacji referencyjnej. Aby prawidłowo uruchomić aplikację, musisz podać projekt w Firebase w .firebaserc i konfiguracje Firebase w firebase.ts.

6. Czyszczenie danych

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

Usuwanie projektu Firebase (i projektu Google Cloud)

Najprostszym sposobem na zwolnienie miejsca jest całkowite usunięcie 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. Usuwanie uwierzytelniania: otwórz konsolę Firebase > Uwierzytelnianie > Metoda logowania i wyłącz Google.

7. Gratulacje

Gratulacje! Udało Ci się utworzyć od podstaw aplikację internetową za pomocą rozszerzenia Conductor interfejsu wiersza poleceń Gemini, a następnie wprowadzić w niej zmiany, dodając złożone funkcje, takie jak uwierzytelnianie i integracja z bazą danych.

Dalsze kroki

• Poznaj tryb planowania interfejsu wiersza poleceń Gemini, który umożliwia lekkie planowanie.
• Odkryj więcej dodatków do interfejsu wiersza poleceń Gemini