Pierwsze kroki z metodą Spec Driven Development w Antigravity

1. Cel tego modułu

Z tego praktycznego modułu dowiesz się, jak używać Antigravity do tworzenia aplikacji przy użyciu Google Antigravity i wdrażać je w Google Cloud. W tym module poznasz też koncepcję programowania opartego na specyfikacji.

Czego się nauczysz

Poznaj podstawy Google Antigravity.
Podstawy tworzenia oprogramowania na podstawie specyfikacji
Dowiedz się, jak łatwo wdrażać aplikacje w Cloud Run.

Ilustracja 1. Antigravity to opracowane przez Google narzędzie do programowania opartego na agentach.

2. Konfiguracja środowiska

Zainstaluj Antigravity:

                   👉Download the  [Google Antigravity](https://antigravity.google/docs/get-started) for your environment from  [here](https://antigravity.google/).

👉Zainstaluj Antigravity w swoim środowisku.

👉 Otwórz folder, w którym jest zainstalowana aplikacja Antigravity, i kliknij dwukrotnie, aby otworzyć instalator.

👉 Postępuj zgodnie z instrukcjami instalatora, aby zainstalować Antigravity w swoim środowisku.

Instalowanie Pythona

👉 Otwórz stronę https://www.python.org/downloads/ i zainstaluj Pythona w swoim systemie.

Instalowanie gcloud

👉gcloud to narzędzie wiersza poleceń, które umożliwia wykonywanie różnych operacji w Google Cloud. Aby zainstalować gcloud w swoim środowisku, postępuj zgodnie z instrukcjami tutaj.

👉 Po zainstalowaniu przetestuj instalację, otwierając terminal systemowy i wpisując w nim gcloud.

Ilustracja 2. Po zainstalowaniu gcloud możesz przetestować instalację , wpisując gcloud w terminalu.

3. Konfiguracja projektu

Jeśli nie masz jeszcze projektu, którego możesz użyć, musisz utworzyć nowy projekt w konsoli GCP. Wybierz projekt w selektorze projektów (w lewym górnym rogu konsoli Google Cloud) .

Ilustracja 2. Kliknięcie pola obok logo Google Cloud umożliwia wybranie projektu. Sprawdź, czy projekt jest wybrany.

W tym module do wykonania zadań użyjemy edytora Cloud Shell. Otwórz Cloud Shell i ustaw projekt za pomocą Cloud Shell.
Kliknij ten link, aby przejść bezpośrednio do edytora Cloud Shell.
Otwórz terminal, jeśli nie jest jeszcze otwarty, klikając Terminal>Nowy terminal w menu. Wszystkie polecenia z tego samouczka możesz uruchamiać w tym terminalu.
Aby sprawdzić, czy projekt jest już uwierzytelniony, użyj w terminalu Cloud Shell tego polecenia:

gcloud auth list

Aby potwierdzić projekt, uruchom w Cloud Shell to polecenie:

gcloud config list project

Skopiuj identyfikator projektu i użyj tego polecenia, aby go ustawić:

gcloud config set project <YOUR_PROJECT_ID>

Jeśli nie pamiętasz identyfikatora projektu, możesz wyświetlić listę wszystkich identyfikatorów projektów za pomocą polecenia

gcloud projects list

4. Włącz interfejsy API

Aby przeprowadzić to ćwiczenie, musimy włączyć niektóre usługi API. Uruchom w Cloud Shell to polecenie:

gcloud services enable aiplatform.googleapis.com
gcloud services enable cloudresourcemanager.googleapis.com

Przedstawiamy interfejsy API

Interfejs Vertex AI API (aiplatform.googleapis.com) umożliwia dostęp do platformy Vertex AI , dzięki czemu aplikacja może wchodzić w interakcje z modelami Gemini w celu generowania tekstu, prowadzenia sesji czatu i wywoływania funkcji.
Interfejs Cloud Resource Manager API (cloudresourcemanager.googleapis.com) umożliwia zautomatyzowane zarządzanie metadanymi projektów Google Cloud, takimi jak identyfikator projektu i nazwa, które są często wymagane przez inne narzędzia i pakiety SDK do weryfikacji tożsamości i uprawnień projektu.

5. Sprawdzanie, czy środki zostały zastosowane

Na etapie konfiguracji projektu przesłano prośbę o przyznanie bezpłatnych środków, które umożliwiają korzystanie z usług w Google Cloud. Gdy zastosujesz środki, utworzymy nowe bezpłatne konto rozliczeniowe o nazwie „Konto rozliczeniowe w okresie próbnym Google Cloud Platform”. Aby sprawdzić, czy środki zostały zastosowane, wykonaj te czynności w edytorze Cloud Shell:

curl -s https://raw.githubusercontent.com/haren-bh/gcpbillingactivate/main/activate.py | python3

Jeśli operacja się powiedzie, zobaczysz wynik podobny do tego poniżej: jeśli pojawi się komunikat „Successfully linked project” (Projekt połączony), oznacza to, że konto rozliczeniowe zostało prawidłowo skonfigurowane. Wykonując powyższy krok, możesz sprawdzić, czy Twoje konto jest połączone. Jeśli nie, zostanie ono połączone. Jeśli nie masz wybranego projektu, pojawi się prośba o jego wybranie. Możesz też zrobić to wcześniej, wykonując czynności opisane w sekcji Konfigurowanie projektu.

Ilustracja 3. Potwierdzenie połączenia konta rozliczeniowego

6. Wprowadzenie do Google Antigravity

Google Antigravity to narzędzie do tworzenia oprogramowania oparte na AI opracowane przez Google DeepMind. Google Antigravity wykorzystuje wiedzę o tworzeniu oprogramowania zgromadzoną przez długi czas oraz najnowocześniejszą sztuczną inteligencję, aby zapewnić deweloperom płynne i bezproblemowe środowisko programistyczne oparte na AI.

Oto niektóre z najważniejszych funkcji Google Antigravity.

Ilustracja poniżej przedstawia podstawowe elementy Google Antigravity.

👉Otwórz przeglądarkę i zacznij poznawać jej różne części.

Rysunek 4. Podstawowe elementy Google Antigravity, szczegóły w tabeli 1

Tabela 1. Szczegóły podstawowych komponentów w Google Antigravity

`Component Index`	`Component Name`	`Function`
`1`	`Agent Manager`	`Provide access to your agent manager where you can manage all your agents`
`2`	`Toggle Agent Pane`	`Toggles and untoggles your agent pane`
`3`	`New Session`	`Starts a new Agent Conversation while keeping old ones separately.`
`4`	`Past Conversations`	`Retrieve previous conversations`
`5`	`Agent Pane`	`The agent pane where you can have conversation with the AI agent`
`6`	`Explorer`	`File explorer`

Wbudowane modele Gemini 3 i Nanobanana: dzięki Google Antigravity możesz korzystać z najnowszych flagowych modeli Google, takich jak Gemini 3 i Nanobanana. Oprócz tych modeli możesz też używać modeli innych firm, takich jak Claude.

Ilustracja 5. W Google Antigravity 2 możesz używać wielu modeli. Kodowanie oparte na agentach: Antigravity zapewnia natywne kodowanie oparte na agentach, które pozwala programistom zachować produktywność bez przeszkód.

Planowanie i pełna kontrola użytkownika: agent przyjmuje Twoje dane wejściowe i przekształca zadanie w plan, który przed wykonaniem wymaga Twojej zgody. Dzięki temu użytkownik może w dowolnym momencie zmienić kierunek działania agenta przed wykonaniem zadania.
Opinie użytkowników: podczas wykonywania działania przez agenta użytkownik może przekazać mu opinię, jeśli chce podać dodatkowe instrukcje.
Wielu agentów: możesz uruchomić kilku agentów, aby pracowali nad różnymi zadaniami jednocześnie. Na przykład Agent A może refaktoryzować logikę uwierzytelniania, Agent B może pisać testy jednostkowe dla nowego interfejsu API, a Agent C może w tle badać bibliotekę.
Agent w edytorze, terminalu i przeglądarce: agenci Google Antigravity działają w wielu usługach.
Edytor: agenci Google Antigravity piszą kod i prezentują go w Edytorze.
Terminal: w zależności od zadań agenci Google Antigravity mogą potrzebować dostępu do terminala, aby wykonywać niektóre polecenia. W razie potrzeby agenty mogą wykonywać za Ciebie polecenia.
Przeglądarka: pracownicy obsługi klienta mogą też korzystać z przeglądarki. Jest to szczególnie przydatne, jeśli musisz przetestować aplikacje internetowe. Agent może uruchomić aplikację w przeglądarce, przetestować ją i zdebugować.

7. Wprowadzenie do tworzenia oprogramowania opartego na specyfikacjach AI

Spec-Driven Development to nowe podejście do inżynierii oprogramowania, które stawia ustrukturyzowane specyfikacje i agenty AI w centrum cyklu życia rozwoju. W przeciwieństwie do podejścia „prompt-and-patch” (metoda prób i błędów) powszechnego w przypadku podstawowego kodowania AI, SDD priorytetowo traktuje staranne zbieranie wymagań, projektowanie systemu/architektury i planowanie testów. Wykorzystuje rygorystyczne podejście fazy projektowania modelu kaskadowego, ale integruje je z nowoczesną, zwinna pętlą iteracyjną za pomocą automatyzacji. Chociaż ten proces wymaga starannego planowania i dokumentowania, jest to proces iteracyjny, ponieważ agenci AI umożliwiają szybkie wdrażanie i testowanie. Dzięki temu możesz szybciej otrzymywać opinie, które pomogą Ci ulepszać dokumentację.

Podstawowa filozofia

W tym modelu inżynierowie przechodzą od „pisania kodu” do „projektowania systemów”. Głównym zadaniem człowieka jest dokładne opisywanie problemów i rozwiązań. Te szczegółowe dane wyjściowe stanowią jedno źródło danych, z którego agenci AI korzystają do generowania, weryfikowania i ulepszania bazy kodu.

Cykl życia SDD

Proces składa się z tych elementów: Kroki 1–3 są w dużej mierze skoncentrowane na człowieku, a kroki 4–5 – na agencie AI. Jest to proces iteracyjny, w którym po zakończeniu cyklu można wykorzystać opinie do ulepszenia specyfikacji.

Zbieranie wymagań: ostateczne określenie logiki biznesowej, potrzeb użytkowników i ograniczeń systemu.
Projektowanie architektury: określanie struktury systemu, modeli danych i punktów integracji.
Specyfikacja systemu i testów: tworzenie dokumentów w formacie czytelnym dla maszyn (lub wysoce ustrukturyzowanych), które określają co robi system i jak będzie weryfikowany.
Automatyczne generowanie kodu: agenci AI wykorzystują specyfikacje do tworzenia kodu gotowego do wdrożenia.
Testowanie i weryfikacja: automatyczne pakiety weryfikują wygenerowany kod na podstawie specyfikacji testu.

Kluczowe zasady działania

Pętla projektowania i wdrażania

Kroki 1–5 nie są liniową ścieżką, ale pętlą informacji zwrotnych. Generowanie kodu (krok 4) i testowanie (krok 5) są w dużej mierze zautomatyzowane, więc zespół inżynierów może poświęcić większość czasu na pierwsze 3 etapy. Gdy inżynier znajdzie błąd lub zmieni funkcję, aktualizuje specyfikację, a nie kod, i ponownie uruchamia pętlę.

Szczegółowość modułowa

Aby zachować integralność systemu, SDD musi być stosowany do dokładnych modułów, a nie do bloków monolitycznych.

Izolacja: jeśli weryfikacja konkretnego modułu zakończy się niepowodzeniem, wystarczy ponownie określić i wygenerować tylko ten moduł.
Skalowalność: małe, dobrze zdefiniowane moduły zapobiegają „halucynacjom” AI i zapewniają, że okno kontekstowe agenta AI pozostaje skoncentrowane i dokładne.

Kontrola jakości

W tym paradygmacie specyfikacja systemu jest planem, a specyfikacja testu jest sędzią. Specyfikacja testu zapewnia, że wygenerowany kod będzie zawsze zgodny z określonymi wymaganiami dotyczącymi jakości. Cały proces można bezproblemowo zintegrować z istniejącą ścieżką CICD, aby zapewnić, że ogólny stan systemu spełnia wymagania jakościowe.

W tym module poznasz podstawy programowania opartego na specyfikacji za pomocą Google Antigravity.

8. Tworzenie aplikacji internetowej za pomocą Google Antigravity

W tym module utworzymy prostą aplikację do galerii zdjęć. Model generowania obrazów Nanobanana jest wbudowany w Google Antigravity. Użyjemy Nano Banana, aby utworzyć potrzebne obrazy.

Konfigurowanie przeglądarki

Przeglądarka internetowa będzie używana do automatycznego testowania aplikacji. W kolejnych krokach skonfigurujemy przeglądarkę, aby Antigravity mogła automatycznie testować aplikację.

👉 W prawym górnym rogu kliknij przycisk Ustawienia (ikona koła zębatego) i wybierz „Otwórz ustawienia użytkownika Antigravity”.
👉W panelu po lewej stronie kliknij Agent, a w sekcji ARTIFACT (ARTIFAKT) wybierz opcję Review Policy (Sprawdź zasady) i kliknij „Always Proceed” (Zawsze kontynuuj)
👉 W panelu po lewej stronie kliknij Przeglądarka i upewnij się, że opcja Włącz narzędzia przeglądarki jest włączona.

Tworzenie aplikacji za pomocą Google Antigravity

👉Otwórz Google Antigravity, klikając ikonę Google Antigravity.
👉Utwórz folder o nazwie „Galeria” w folderze osobistym, np. komputerze,
👉 W Antigravity kliknij Otwórz folder i wybierz folder Galeria. Spowoduje to otwarcie nowego obszaru roboczego w folderze Galeria.
👉 Jeśli panel agenta nie jest jeszcze otwarty, otwórz go, klikając przycisk „Przełącz panel agenta”. Patrz rysunek 4, przycisk nr 2.
👉 Możesz zacząć pisać kod, wpisując instrukcje w panelu agenta. Instrukcje powinny być jak najbardziej jasne. Wpisz w panelu agenta:
```
 **English Version:**
```

Create a photo granary with following specs.

1. Visual Design & Layout
Title: The gallery must prominently display the title "My photo gallery" at the top.
Modern Grid: Images will be arranged in a responsive grid that spans the full width of the browser.
Clean Aesthetic: Use a minimalist design with consistent spacing (margins/padding) between photos and no heavy borders or shadows.
Image Scaling: Photos will automatically adjust their size to fit any screen (mobile to desktop) while maintaining their focus using modern CSS cropping techniques.

2. Photo Content
Quantity: The page will feature a total of 20 photos. 
Nature Themes: The collection will include a diverse range of nature photography:
Landscape: Mountains, deserts, and forests.
Water: Waterfalls, oceans, and lakes.
Atmosphere: Northern lights, sunsets, and starry skies.
Macro: Close-ups of flowers, leaves, and moss.
Generate all the needed photos

3. Core Functionality (The "Lightroom" Effect)
Full-Screen View: Clicking any photo triggers a "Lightbox" mode where the background dims and the selected image appears in high resolution at the center of the screen.
Manual Navigation:
Right Arrow: Swaps the current view to the next image.
Left Arrow: Swaps the current view to the previous image.
Infinite Loop: Navigation is continuous; moving "next" from the 20th photo returns the user to the 1st photo.
Exit Strategy: Users can exit the full-screen view by clicking a "Close" button or tapping the dimmed area outside the image.

4. Technical Constraints (Strict)
Vanilla JavaScript Only: Absolutely no external libraries or frameworks (like jQuery, React, or Bootstrap). All logic must be written in raw, standard JavaScript.
Native HTML & CSS: Use only the built-in capabilities of modern web browsers to handle the layout and animations.
Zero Dependencies: The app should function perfectly as a standalone project with no need to download or link to outside scripts.

5. Perform the following tests
Open the App in a web browser
Click on the images and see the image opens in the lightbox
Check the navigation

Wersja japońska:

以下の仕様でフォトギャラリーを作成してください。
1. ビジュアルデザインとレイアウト
タイトル: ページ上部に「My photo gallery」というタイトルを大きく表示すること。
モダンなグリッド: ブラウザの全幅に広がる、レスポンシブなグリッドレイアウトで画像を配置すること。
クリーンな審美性: ミニマリストなデザインを採用し、写真間の余白（マージン/パディング）を一定に保つこと。重い枠線やドロップシャドウは使用しない。
画像のスケーリング: モダンなCSSのトリミング技術（object-fitなど）を使用し、モバイルからデスクトップまで、フォーカスを維持したまま画面サイズに合わせて自動調整されるようにすること。

2. 写真の内容
枚数: 合計20枚の写真を掲載。
自然のテーマ: 多様な自然写真のコレクションにすること。
風景: 山、砂漠、森林。
水: 滝、海、湖。
空気・雰囲気: オーロラ、夕焼け、星空。
マクロ: 花、葉、苔の接写。
画像生成: 2枚の画像を生成し、それらを繰り返して20箇所に配置すること。

3. コア機能（ライトボックス・エフェクト）
全画面表示: 写真をクリックすると「ライトボックス」モードが起動し、背景が暗転して選択された画像が画面中央に高解像度で表示されること。
手動ナビゲーション:
右矢印: 次の画像に切り替え。
左矢印: 前の画像に切り替え。
無限ループ: ナビゲーションは連続的であること。20枚目の写真で「次へ」を押すと1枚目に戻る仕様。
終了方法: 「閉じる」ボタンをクリックするか、画像外の暗転したエリアをタップすることで全画面表示を終了できること。

4. 技術的制約（厳守）
純正JavaScript限定: 外部ライブラリやフレームワーク（jQuery、React、Bootstrapなど）は一切使用禁止。すべてのロジックは標準のJavaScript（生コード）で記述すること。
ネイティブのHTML & CSS: レイアウトやアニメーションには、モダンブラウザの標準機能のみを使用すること。
依存関係ゼロ: 外部スクリプトのダウンロードやリンクを必要とせず、単体で完全に動作するプロジェクトにすること。

5. 以下のテストを実行します
ウェブブラウザでアプリを開きます
画像をクリックすると、ライトボックスで画像が開きます
ナビゲーションを確認します

👉 Kliknij przycisk Uruchom. Po uruchomieniu agent powinien wyświetlić plan wykonania podobny do tego poniżej.

Ilustracja 5. Antigravity agent wyświetli plan wdrożenia

👉 Pojawi się prośba o potwierdzenie. Potwierdź, gdy pojawi się monit, jak poniżej. Antigravity automatycznie użyje Nanobanany i wybranego modelu LLM do wykonania zadania.

Ilustracja 6. Antigravity chce uruchomić polecenie. Aby zezwolić na uruchomienie , naciśnij Uruchom.

Ilustracja 7. Po wyświetleniu prośby naciśnij „Zaakceptuj wszystko”.

👉Po wygenerowaniu kodu Antigravity otworzy przeglądarkę i rozpocznie testowanie. Po przeprowadzeniu testu powinny zostać wyświetlone jego wyniki. Ilustracja 8. Antigravity wyświetli wyniki testu
👉Jeśli pojawi się odpowiedni komunikat, kliknij „Akceptuj wszystkie”, aby zapisać cały kod wygenerowany w panelu agenta.
👉W panelu Eksplorator w Antigravity powinien być widoczny nowo wygenerowany kod. Rysunek 9. Kod końcowy
👉Aby przetestować aplikację, kliknij prawym przyciskiem myszy plik index.html, uzyskaj ścieżkę do pliku i wklej ją na pasku adresu przeglądarki.

Ilustracja 10. Aby przetestować aplikację, skopiuj ścieżkę pliku index.html w przeglądarce

9. Konfigurowanie środowiska na potrzeby wdrożenia

👉Uzyskaj identyfikator projektu Google Cloud: otwórz stronę https://console.cloud.google.com.
👉Kliknij w lewym górnym rogu i skopiuj identyfikator projektu. Użyjemy go w następnych krokach. Ilustracja 11. Skopiuj identyfikator projektu i zachowaj go na przyszłość.
👉 W otwartym terminalu Antigravity kliknij Terminal –> Nowy terminal w menu.
👉 Musimy ustawić zmienne środowiskowe, które różnią się w przypadku systemów Windows i macOS/Linux. Zastąp „TWÓJ PROJEKT W CLOUD” nazwą projektu z kroku 2. Uwaga dla użytkowników Windows PowerShell: otwórz PowerShell w trybie administratora.

#This is only for Powershell users.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

#For Windows (Powershell) follow the following steps.
$env:GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
$env:GOOGLE_CLOUD_LOCATION="us-central1"

#For Windows Command Prompt  follow the following steps.
set GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
set GOOGLE_CLOUD_LOCATION="us-central1"


#for Mac/Linux follow the following steps.
export GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
export GOOGLE_CLOUD_LOCATION="us-central1"

👉Zaloguj się w konsoli. Gdy pojawi się prośba o zalogowanie się w Google Cloud w przeglądarce, zaloguj się.

gcloud auth login
gcloud auth application-default login
gcloud config set project YOUR CLOUD PROJECT

Ilustracja 12. Przeprowadzanie uwierzytelniania

👉Zainstaluj serwer MCP Cloud Run. W prawym górnym rogu okna Antigravity kliknij „…”. Powinna się wyświetlić opcja „Serwery MCP”. Kliknij ją. Serwery MCP są jak rozszerzenia agenta, które umożliwiają mu dostęp do zewnętrznych danych i narzędzi.
👉Wpisz „Cloud Run” w polu wyszukiwania i kliknij „Cloud Run”. Rysunek 13. Serwer MCP Cloud Run
👉 Wróć do panelu agenta, naciskając klawisz strzałki wstecz obok tytułu Serwery MCP. Teraz możemy zacząć korzystać z Google Cloud Run. Wpisz w panelu pracownika obsługi klienta te informacje: Powinno to automatycznie użyć serwera MCP Cloud Run i wyświetlić listę usług działających w Cloud Run.

Find me the list of services running in Cloud Run.

👉Wdróż aplikację za pomocą tego polecenia. Możesz po prostu wdrożyć je za pomocą języka naturalnego. Antigravity automatycznie użyje serwera MCP do wdrożenia.

Deploy this gallery static web application to cloud run with service name "photogallery". Use nginx and assume nginx will use port 80

👉 Agent powinien pokazać, gdzie została wdrożona aplikacja. np. https://photogallery-85469421903.us-central1.run.app Serwer Cloud MCP bardzo ułatwia wdrażanie aplikacji internetowej w Cloud Run.

10. Czyszczenie danych

Teraz zwalniajmy miejsce z tego, co właśnie utworzyliśmy.

👉Usuń utworzoną właśnie aplikację Cloud Run. Otwórz Cloud Run, klikając Cloud Run . Powinna być widoczna aplikacja utworzona w poprzednim kroku. Zaznacz pole obok aplikacji i kliknij przycisk Usuń.

Ilustracja 38. Usuwanie aplikacji Cloud Run

11. Podsumowanie

Gratulacje! Udało Ci się utworzyć aplikację za pomocą Google Antigravity zgodnie z zasadami programowania opartego na specyfikacji.Dowiedziałeś(-aś) się też, jak wdrożyć aplikację w Cloud Run. To ważne osiągnięcie, które obejmuje podstawowy cykl życia nowoczesnej aplikacji natywnej dla chmury i zapewnia solidną podstawę do wdrażania własnych złożonych systemów.

Podsumowanie

W tym module nauczyliśmy się:

Tworzenie aplikacji z wieloma agentami za pomocą Google Antigravity
Wdrażanie aplikacji w Cloud Run

Przydatne materiały