Vibe Coding z AlloyDB: od zera do wdrożenia produkcyjnego z Antigravity

1. Wprowadzenie

Kodowanie na podstawie odczuć zrewolucjonizowało szybkość i sposób tworzenia interfejsów, ale często napotyka ograniczenia, gdy dociera do bazy danych. Zazwyczaj deweloperzy muszą przełączać konteksty, pisać złożone schematy SQL, zarządzać pulami połączeń i ręcznie konfigurować rozszerzenia bazy danych.

W tym ćwiczeniu poznasz bezproblemowy, konwersacyjny proces tworzenia bazy danych. Korzystając z protokołu Model Context Protocol (MCP) i zintegrowanego środowiska programistycznego opartego na agentach, możesz traktować swój edytor jak doświadczonego inżyniera danych. W ciągu kilku minut przekształcisz prosty pomysł w w pełni połączoną, zoptymalizowaną i opartą na AI aplikację bazodanową, a wszystko to bez opuszczania swojego obszaru roboczego.

Co utworzysz

W tym ćwiczeniu utworzysz i wdrożysz przewodnik po gastronomii oparty na AI – nowoczesną aplikację Next.js obsługiwaną przez AlloyDB. Aplikacja będzie obsługiwać:

  • Dynamiczne wczytywanie katalogu: automatyczne importowanie i strukturyzowanie danych restauracji z nieprzetworzonych plików CSV.
  • Wyszukiwanie na podstawie słów kluczowych: dynamiczne wysyłanie zapytań do bazy danych za pomocą wyszukiwania pełnotekstowego.
  • Wyszukiwanie semantyczne oparte na AI: znajdowanie restauracji na podstawie opisu „klimatu” (np. „przytulne miejsce na randkę” lub „szybka przekąska późną nocą”) przy użyciu osadzeń Agent Platform.

bc2d98c88c72648e.png

Czego się nauczysz

  • Udostępnianie instancji Google Cloud AlloyDB z publicznym adresem IP i konfiguracjami sieci VPC.
  • Bezpośrednie łączenie IDE Antigravity z AlloyDB za pomocą zestawu narzędzi Model Context Protocol (MCP).
  • Połączenie frontendu Next.js z aktywną bazą danych za pomocą zmiennych środowiskowych i bezpiecznych połączeń SSL.
  • Włączanie integracji z Agent Platform w bazie danych w celu generowania wektorów dystrybucyjnych za pomocą modelu text-embedding-004.
  • Wykonywanie wyszukiwania podobieństwa wektorowego za pomocą operatora odległości cosinusowej (<=>).
  • Optymalizacja wydajności bazy danych na potrzeby skali produkcyjnej za pomocą indeksowania HNSW i partycjonowania tabeli – pełnienie roli wirtualnego administratora bazy danych.

Czego potrzebujesz

Aby ukończyć to ćwiczenie, potrzebujesz:

  • Antigravity zainstalowany na komputerze lokalnym.
  • Interfejs wiersza poleceń Google Cloud (gcloud) i Git zainstalowane i uwierzytelnione na komputerze lokalnym.
  • projekt Google Cloud z włączonymi płatnościami;
  • przeglądarka internetowa (zalecamy Chrome);

To ćwiczenie jest przeznaczone dla deweloperów na wszystkich poziomach zaawansowania, w tym dla początkujących.

2. Zanim zaczniesz

W tej sekcji znajdziesz instrukcje dotyczące początkowej konfiguracji wymaganej w projekcie Google Cloud, zanim zaczniesz tworzyć przewodnik po gastronomii w Berlinie oparty na AI.

Tworzenie projektu

  1. W konsoli Google Cloud na stronie wyboru projektu wybierz lub utwórz projekt Google Cloud.
  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 .

Instalowanie wymagań wstępnych lokalnie

Sprawdź, czy na komputerze lokalnym masz zainstalowane te narzędzia:

  • Antigravity 2.0: zainstaluj Antigravity.
  • Git: pobierz i zainstaluj Gita.
  • Google Cloud CLI: pobierz i zainstaluj gcloud.

Konfigurowanie Antigravity 2.0

Przy pierwszym uruchomieniu Antigravity 2.0 pojawi się prośba o podanie identyfikatora projektu Google Cloud z poprzedniego kroku.

Aby zainicjować obszar roboczy, wpisz identyfikator projektu:

12bf4154b982f21e.png

Konfigurowanie i otwieranie Antigravity IDE

Zainstalujemy i otworzymy Antigravity IDE na komputerze lokalnym, aby móc wykonywać polecenia terminala.

  1. W interfejsie Antigravity 2.0 znajdź i kliknij opcję Install Antigravity IDE (w prawym górnym rogu).

89eb42b2f840b96d.png

  1. Gdy pojawi się prośba o pobranie i zainstalowanie, postępuj zgodnie z instrukcjami kreatora instalacji, używając ustawień domyślnych.
  2. Po zakończeniu instalacji uruchom Antigravity IDE.

Klonowanie repozytorium i uwierzytelnianie w Google Cloud

Wszystkie instrukcje wiersza poleceń wykonasz bezpośrednio w środowisku IDE.

  1. Otwórz Antigravity IDE na komputerze lokalnym.
  2. Otwórz terminal Antigravity i sklonuj repozytorium projektu:
git clone https://github.com/mtoscano84/vibe-coding-postgres-mcp.git
  1. Otwórz folder projektu:
  2. Wybierz Plik > Otwórz folder (lub Otwórz...).
  3. Otwórz nowo sklonowany folder vibe-coding-postgres-mcp.
  4. Gdy otworzy się folder projektu, uruchom nowy zintegrowany terminal w Antigravity IDE. Ustaw zmienną środowiskową PROJECT_ID i skonfiguruj interfejs wiersza poleceń gcloud do jej używania (zastąp [YOUR_PROJECT_ID] identyfikatorem projektu GCP):
export PROJECT_ID=[YOUR_PROJECT_ID]
gcloud config set project $PROJECT_ID
  1. Zaloguj się w interfejsie wiersza poleceń Google Cloud:
gcloud auth login
  1. Zaloguj się przy użyciu domyślnych danych logowania aplikacji (ADC): w ten sposób utworzysz lokalny plik danych logowania wymagany później w tym module przez nasze oprogramowanie sprzęgające bazę danych AI i MCP.
gcloud auth application-default login
  1. Zweryfikuj aktywne konto:
gcloud auth list

Włącz wymagane interfejsy API

Aby włączyć niezbędne usługi Google Cloud, w terminalu Antigravity uruchom to polecenie:

gcloud services enable alloydb.googleapis.com \
                       compute.googleapis.com \
                       servicenetworking.googleapis.com \
                       aiplatform.googleapis.com \
                       run.googleapis.com \
                       artifactregistry.googleapis.com \
                       cloudbuild.googleapis.com

3. Tworzenie instancji AlloyDB

W tej sekcji uruchomisz w terminalu Antigravity automatyczny skrypt, aby udostępnić klaster i instancję AlloyDB w Google Cloud.

W aktywnym zintegrowanym terminalu Antigravity IDE (który znajduje się już w katalogu projektu vibe-coding-postgres-mcp) uruchom skrypt udostępniania AlloyDB:

source database/deploy_alloydb.sh --region us-central1 --public-ip

Uwaga: proces obsługi administracyjnej trwa około 10–15 minut.

Skrypt udostępniania:

  • Utwórz sieć VPC o nazwie default (jeśli nie istnieje w Twoim projekcie).
  • Skonfiguruj dostęp do usług prywatnych dla AlloyDB.
  • Wdróż klaster AlloyDB i instancję główną z włączonymi prywatnymi i publicznymi adresami IP.
  • Przyznaj agentowi usługi AlloyDB niezbędne uprawnienia do platformy agentów.

Dane wyjściowe powinny być podobne do tych:

----------------------------------------
Deployment Process Completed
Cluster:  alloydb-aip-01 (STANDARD)
Instance: alloydb-aip-01-pr
Region:   us-central1
Private IP: XX.XX.XX.XX
Public IP:  XX.XX.XX.XX
Initial Password: XXXXXXXXXX (if new cluster)
----------------------------------------

Skopiuj i zapisz te informacje:

  • Prywatny adres IP AlloyDB: używany przez aplikację Cloud Run do bezpiecznego łączenia się w sieci VPC.
  • Publiczny adres IP AlloyDB: używany przez lokalne środowisko IDE Antigravity do bezpośredniego łączenia się.
  • Hasło do bazy danych: automatycznie wygenerowane hasło użytkownika postgres.

4. Wdrażanie frontendu

W tej sekcji wdrożysz podstawowy interfejs Next.js (stan 0) w Google Cloud Run za pomocą zintegrowanego terminala Antigravity IDE. Ta początkowa wersja korzysta z danych testowych i nie łączy się jeszcze z bazą danych.

Najpierw uruchom te polecenia bezpośrednio w terminalu Antigravity, aby przyznać domyślnemu kontu usługi Compute Engine niezbędne role uprawnień:

PROJECT_NUMBER=$(gcloud projects describe $(gcloud config get-value project) --format="value(projectNumber)")
# Grant Storage Object Viewer (to read source code)
gcloud projects add-iam-policy-binding $(gcloud config get-value project) \
    --member="serviceAccount:${PROJECT_NUMBER}-compute@developer.gserviceaccount.com" \
    --role="roles/storage.objectViewer"
# Grant Log Writer (to write build logs)
gcloud projects add-iam-policy-binding $(gcloud config get-value project) \
    --member="serviceAccount:${PROJECT_NUMBER}-compute@developer.gserviceaccount.com" \
    --role="roles/logging.logWriter"
# Grant Artifact Registry Writer (to push container images)
gcloud projects add-iam-policy-binding $(gcloud config get-value project) \
    --member="serviceAccount:${PROJECT_NUMBER}-compute@developer.gserviceaccount.com" \
    --role="roles/artifactregistry.writer"

W katalogu głównym vibe-coding-postgres-mcp w terminalu Antigravity uruchom to polecenie, aby skompilować i wdrożyć aplikację Next.js w sieci VPC:

gcloud run deploy berlin-gastronomy-guide \
  --source frontend/ \
  --network=default \
  --subnet=default \
  --allow-unauthenticated \
  --region=us-central1

Po zakończeniu wdrażania zostanie wyświetlony adres URL usługi.

Building using Dockerfile and deploying container to Cloud Run service [berlin-gastronomy-guide] in project [vibe-coding-postgres-mcp] region [us-central1]
Building and deploying...
  Validating configuration...done
  Uploading sources...done
  Building Container... Logs are available at [ https://console.cloud.google.com/cloud-build/builds;region=us-central1/46a6e834-d5e9-4dfd-885e-d39e2790f72d?project=734791203988 ]....done
  Setting IAM Policy...done
  Creating Revision...done
  Routing traffic...done
Done.
Service [berlin-gastronomy-guide] revision [berlin-gastronomy-guide-00002-n6k] has been deployed and is serving 100 percent of traffic.
Service URL: https://berlin-gastronomy-guide-[YOUR_PROJECT_NUMBER].us-central1.run.app

Skopiuj adres URL i otwórz go w przeglądarce.

Sprawdź, czy widzisz stronę internetową Berlin AI Gastronomy Guide z przykładowymi kartami restauracji.

16d3649d19796847.png

5. Łączenie Antigravity z Google Cloud

Aby umożliwić agentowi AI w lokalnie działającym środowisku IDE (Antigravity) interakcję z bazą danych, użyjemy oficjalnego serwera MCP Google Cloud AlloyDB.

Ponieważ podczas udostępniania włączyliśmy publiczny adres IP w instancji AlloyDB, lokalne środowisko IDE może łączyć się z nią bezpośrednio przez internet. Połączenie jest zabezpieczone za pomocą protokołu SSL i uwierzytelniania hasłem, a serwer MCP używa lokalnych danych logowania Google Cloud do autoryzacji połączenia.

Konfigurowanie serwera MCP w Antigravity

  1. W IDE Antigravity kliknij menu z 3 kropkami (...) w prawym górnym rogu okna czatu.
  2. Wybierz Serwery MCP, a potem kliknij Zarządzane serwery MCP (lub Wyświetl konfigurację w formacie surowym / Edytuj plik konfiguracji).
  3. Dodaj ten blok JSON do obiektu mcpServers. Zastąp [YOUR_PROJECT_ID] i [YOUR_ALLOYDB_PASSWORD] identyfikatorem projektu i hasłem bazy danych zapisanym w kroku dotyczącym udostępniania AlloyDB:
"alloydb-postgres": {
  "command": "npx",
  "args": [
    "-y",
    "@toolbox-sdk/server@latest",
    "--prebuilt",
    "alloydb-postgres",
    "--stdio"
  ],
  "env": {
    "ALLOYDB_POSTGRES_PROJECT": "[YOUR_PROJECT_ID]",
    "ALLOYDB_POSTGRES_REGION": "us-central1",
    "ALLOYDB_POSTGRES_CLUSTER": "alloydb-aip-01",
    "ALLOYDB_POSTGRES_INSTANCE": "alloydb-aip-01-pr",
    "ALLOYDB_POSTGRES_DATABASE": "postgres",
    "ALLOYDB_POSTGRES_USER": "postgres",
    "ALLOYDB_POSTGRES_PASSWORD": "[YOUR_ALLOYDB_PASSWORD]"
  }
}
  1. Zapisywanie pliku konfiguracji
  2. IDE automatycznie uruchomi serwer MCP. W panelu MCP obok pozycji alloydb-postgres powinien pojawić się zielony punkt, co oznacza, że połączenie zostało nawiązane.

Otwieranie repozytorium w Antigravity 2.0

W dalszej części tego laboratorium będziemy pisać i kompilować aplikację za pomocą Antigravity 2.0.

  1. Wróć do Antigravity 2.0 i otwórz folder projektu, który został przed chwilą sklonowany.
  2. Kliknij Nowa rozmowa > Nowy projekt > Dodaj folder.
  3. Przejdź do nowo sklonowanego folderu vibe-coding-postgres-mcp i go wybierz.
  4. W Antigravity 2.0 zobaczysz teraz interfejs agenta, który wskazuje bezpośrednio na sklonowany obszar roboczy i jest gotowy do kodowania.

e806fdbce47d43f0.png

6. Vibe Coding: pozyskiwanie danych z bazy danych

Gdy Antigravity połączy się z instancją AlloyDB za pomocą serwera MCP, możesz rozpocząć kodowanie wibracji.

W tym kroku wydasz agentowi AI polecenie odczytania lokalnego pliku CSV zawierającego katalog gastronomii w Berlinie i załadowania go do bazy danych AlloyDB.

Zadanie

Będziesz korzystać z czatu z agentem w Antigravity. Agent samodzielnie odczyta plik, przeanalizuje typy danych, połączy się z bazą danych, utworzy tabelę i wstawi rekordy.

Następnie skopiuj i wklej w czacie ten prompt, a potem naciśnij Enter:

Read the headers of database/seed_data_berlin.csv. Connect to the database via the MCP tool, create a table named restaurants with the correct data types, and load all the records from the CSV file into it.

Obserwuje agenta podczas wykonywania zadania:

  • Najpierw odczyta nagłówki pliku CSV i kilka przykładowych wierszy, aby określić odpowiedni schemat.
  • Wywoła narzędzie MCP AlloyDB, aby utworzyć tabelę restauracji.
  • Wstawi do bazy danych 100 rekordów restauracji z pliku CSV.

Weryfikacja

Gdy agent poinformuje Cię, że zakończył działanie, możesz sprawdzić, czy dane zostały wczytane:

Na czacie z agentem zadaj pytanie:

Show me the first 5 records from the restaurants table.

Agent wyśle zapytanie do bazy danych i wyświetli pierwsze 5 restauracji (np. Pub Lia's Kitchen i Cafe Clärchens), potwierdzając, że dane zostały pomyślnie wczytane do bazy.

7. Vibe Coding: łączenie frontendu z bazą danych

W tej sekcji połączysz frontend Next.js z aktywną bazą danych AlloyDB. Poprosisz agenta o zastąpienie danych testowych zapytaniem do bazy danych na żywo i wdrożenie wyszukiwania słów kluczowych.

Zadanie

Poprosisz agenta o napisanie kodu połączenia i zaktualizowanie strony głównej. Ponieważ regułę SSL bazy danych dodaliśmy do pliku .agents/AGENTS.md, agent automatycznie skonfiguruje pulę połączeń tak, aby używała SSL w przypadku połączeń z chmurą. Nie musisz tego określać w prompcie.

Na czacie Antigravity Agent skopiuj i wklej ten prompt, a następnie naciśnij Enter (zastąp [YOUR_PASSWORD] rzeczywistym hasłem do bazy danych):

Connect our Next.js frontend to the restaurants table in the database using the pg library. Use a connection pool configured with environment variables: DB_HOST, DB_USER (postgres), DB_PASS (password is '[YOUR_PASSWORD]'), and DB_NAME (postgres). Replace the mock data in page.tsx with a live query, and implement keyword search on the name, category, and description

Obserwuje agenta podczas wykonywania zadania:

  • Zainstaluje pakiet pg i jego typy TypeScript (@types/pg).
  • Utworzy plik połączenia z bazą danych (lub działanie serwera Next.js) i skonfiguruje pulę połączeń.
  • Odczyta reguły z pliku AGENTS.md i automatycznie doda konfigurację SSL dla hostów innych niż lokalne.
  • Przepiszemy plik page.tsx, aby wysyłać zapytania do bazy danych i filtrować wyniki na podstawie zapytania.

Weryfikacja

Aby przetestować zmiany, musisz ponownie wdrożyć frontend w Cloud Run. Ponieważ używamy procesu „Tylko w chmurze”, w ten sposób wysyłany jest nowy kod.

Otwórz zintegrowany terminal w Antigravity IDE (upewnij się, że jesteś w katalogu głównym).

Uruchom polecenie wdrażania, przekazując prywatny adres IP i hasło AlloyDB jako zmienne środowiskowe (zastąp symbole zastępcze rzeczywistymi wartościami):

gcloud run deploy berlin-gastronomy-guide \
  --source frontend/ \
  --network=default \
  --subnet=default \
--set-env-vars="DB_HOST=[YOUR_ALLOYDB_PRIVATE_IP],DB_USER=postgres,DB_PASS=[YOUR_PASSWORD],DB_NAME=postgres" \
  --allow-unauthenticated \
  --region=us-central1

Po zakończeniu wdrażania otwórz adres URL usługi w przeglądarce.

Spróbuj wyszukać „Burgermeister” lub „Kebab”. Powinny być widoczne prawdziwe restauracje załadowane z bazy danych.

Zwróć uwagę, że karty restauracji wyświetlają teraz rzeczywiste obrazy GCS (ponieważ rekordy bazy danych zawierają publiczne adresy URL GCS, które zostały przez nas wcześniej przesłane).

8. Vibe Coding: włączanie wyszukiwania semantycznego

W tej sekcji uaktualnisz aplikację, aby obsługiwała wyszukiwanie wektorowe oparte na AI. Zamiast dopasowywać tylko dokładne słowa kluczowe, użytkownicy będą mogli wyszukiwać, opisując „klimat” lub wrażenia, których szukają (np. „romantyczna kolacja” lub „szybka przekąska po wyjściu z klubu”).

Zadanie

Wydasz agentowi polecenie włączenia wyszukiwania semantycznego w tabeli restauracji. Agent będzie korzystać z niestandardowej funkcji add-vector-search-alloydb w repozytorium, aby automatycznie obsługiwać rozszerzenia bazy danych, rejestrację modelu na platformie agentów, generowanie wektorów dystrybucyjnych i aktualizacje zapytań.

Na czacie Antigravity Agent skopiuj i wklej ten prompt, a potem naciśnij Enter:

Upgrade our database to support Semantic Vector Search on the restaurants table based on the description column. Then, update our frontend search query to use vector similarity search.

Obserwuje agenta podczas wykonywania zadania:

  • Połączy się z AlloyDB i włączy rozszerzenia wektorowe (pgvector) oraz google_ml_integration.
  • Spowoduje to zarejestrowanie w bazie danych modelu wektorów dystrybucyjnych Agent Platform (text-embedding-004).
  • Spowoduje to dodanie do tabeli restauracji nowej kolumny z wektorami.
  • Uruchomi zapytanie w bazie danych, aby wygenerować wektory dystrybucyjne dla wszystkich 100 opisów restauracji.
  • Zaktualizuje kod interfejsu, aby wygenerować osadzenie dla zapytania użytkownika i przeprowadzić wyszukiwanie podobieństwa wektorów za pomocą operatora odległości cosinusowej (<=>).

Weryfikacja

Ponownie wdróż zaktualizowany kod w Cloud Run.

W zintegrowanym terminalu Antigravity IDE uruchom polecenie wdrażania (zastąp symbole zastępcze rzeczywistymi wartościami):

gcloud run deploy berlin-gastronomy-guide \
  --source frontend/ \
  --network=default \
  --subnet=default \
--set-env-vars="DB_HOST=[YOUR_ALLOYDB_PRIVATE_IP],DB_USER=postgres,DB_PASS=[YOUR_PASSWORD],DB_NAME=postgres" \
  --allow-unauthenticated \
  --region=us-central1

Po zakończeniu wdrażania otwórz adres URL usługi w przeglądarce.

Przetestuj wyszukiwanie semantyczne, wpisując opis w języku naturalnym, np.:

  • „romantyczne miejsce na kolację”,
  • „szybka przekąska po imprezie w klubie”,

Zwróć uwagę, że zwraca on bardzo trafne wyniki (np. Cafe Clärchens lub Burgermeister), nawet jeśli w nazwie lub opisie nie ma słów „romantyczna” lub „klubowa”.

9. Vibe Coding: optymalizacja bazy danych

Wraz z rozwojem aplikacji bazę danych należy zoptymalizować pod kątem obsługi dużych ilości danych (ponad 100 tys. wierszy) i dużego ruchu związanego z wyszukiwaniem współbieżnym. W tym ostatnim kroku potraktujesz agenta jako wirtualnego administratora bazy danych, który przeanalizuje i zoptymalizuje schemat bazy danych.

Zadanie

Poproś agenta, aby pełnił rolę głównego architekta baz danych, przeanalizował bieżący schemat i zarekomendował optymalizacje. Gdy sprawdzisz i zatwierdzisz rekomendacje, agent użyje niestandardowej funkcji optimize-database-alloydb, aby automatycznie je zastosować.

Act as a Principal Database Architect. Our semantic search is working, but we need to optimize the database for production scale. Analyze our current schema. What are the top 2 database-schema optimizations you recommend we implement right now? Explain them to me and wait for my approval before modifying the database.

Agent przeanalizuje bazę danych i prześle 2 rekomendacje:

  • Indeks HNSW: indeks przybliżonego wyszukiwania najbliższych sąsiadów (ANN) w kolumnie wektorów dystrybucyjnych, który umożliwia bardzo szybkie wykonywanie zapytań o podobieństwo wektorów.
  • Partycjonowanie tabeli: partycjonowanie tabeli restauracji (np. partycjonowanie listy według dzielnicy) w celu poprawy wydajności zapytań i łatwiejszego zarządzania.

Przeczytaj wyjaśnienia. Gdy będziesz gotowy(-a), odpowiedz przedstawicielowi na czacie:

Approved, please apply these optimizations.

Obserwuje agenta podczas wykonywania zadania:

  • Utworzy indeks HNSW w kolumnie z wektorami.
  • Podzieli on tabelę restauracji według dzielnic, tworząc tabele partycji podrzędnych dla każdej dzielnicy i migrując istniejące dane.

Weryfikacja

Poproś agenta o sprawdzenie, czy optymalizacje zostały zastosowane. Na czacie z agentem zapytaj:

Show me the list of partitions for the restaurants table and the indexes on it.

Agent wyśle zapytanie do katalogu bazy danych i wyświetli nową strukturę partycji (np.restaurants_mitte, restaurants_kreuzberg) oraz indeks HNSW, potwierdzając, że baza danych jest teraz w pełni zoptymalizowana pod kątem środowiska produkcyjnego.

10. Wyzwanie: dodaj opinie i oceny

Teraz Ty możesz sprawdzić swoje umiejętności kodowania wibracji. W tym ćwiczeniu rozszerzysz przewodnik po gastronomii w Berlinie, aby obsługiwał opinie klientów i oceny w postaci gwiazdek.

Zadanie

Zamiast korzystać z prompta, który można skopiować i wkleić, napisz własny prompt w Antigravity Agent Chat, aby wdrożyć te funkcje:

  1. Schemat bazy danych: utwórz nową tabelę reviews połączoną z tabelą restaurants. Powinna ona przechowywać ocenę (liczbę całkowitą od 1 do 5) i krótki komentarz tekstowy.
  2. Generowanie danych: wygeneruj 3–4 realistyczne opinie klientów dla każdej ze 100 restauracji w bazie danych.
  3. Integracja z frontendem: zaktualizuj frontend Next.js, aby obliczać i wyświetlać średnią ocenę w gwiazdkach (np. ⭐⭐⭐⭐☆) na każdej karcie restauracji.
  4. Filtrowanie: dodaj u góry strony filtr w postaci menu, który umożliwi filtrowanie restauracji według oceny (np. „Pokaż wszystkie”, „4 gwiazdki i więcej”, „3 gwiazdki i więcej”).

Weryfikacja

Gdy agent wykona zadanie, ponownie wdróż aplikację w Cloud Run (zastąp symbole zastępcze rzeczywistymi wartościami) z integrowanego terminala Antigravity IDE:

gcloud run deploy berlin-gastronomy-guide \
  --source frontend/ \
  --network=default \
  --subnet=default \
--set-env-vars="DB_HOST=[YOUR_ALLOYDB_PRIVATE_IP],DB_USER=postgres,DB_PASS=[YOUR_PASSWORD],DB_NAME=postgres" \
  --allow-unauthenticated \
  --region=us-central1

Po zakończeniu wdrażania odśwież przeglądarkę i sprawdź, czy na kartach wyświetlają się oceny w postaci gwiazdek.

1433b3c589f08f2a.png.

11. Wyniki

Po wykonaniu tych kroków udało Ci się utworzyć i zoptymalizować aplikację AI nowej generacji opartą na bazie danych za pomocą Vibe Coding. W tej sekcji znajdziesz najważniejsze wdrożone przez Ciebie możliwości architektury:

Integracja z bazą danych agenta (protokół kontekstu modelu)

Tradycyjnie pisanie kodu bazy danych jest procesem ręcznym, który wymaga przełączania się między IDE, dokumentacją i klientami bazy danych.

W tym laboratorium używasz zestawu narzędzi Model Context Protocol (MCP), aby wypełnić tę lukę. Dzięki udostępnieniu agentowi AI narzędzi do sprawdzania schematu bazy danych i wykonywania zapytań SQL agent mógł:

  • Sprawdź nieprzetworzone dane CSV i zaprojektuj schemat bazy danych.
  • Wygeneruj i wykonaj DDL, aby utworzyć tabele.
  • Połącz pulę połączeń z aplikacją Next.js.

Pokazuje to, jak MCP sprawia, że tworzenie baz danych jest szybkie i interaktywne, a programista zachowuje pełną kontrolę w IDE.

In-Database AI (Agent Platform & Semantic Search)

Aplikacja wykorzystuje natywną integrację AlloyDB z platformą agentów Google Cloud do generowania wektorów dystrybucyjnych bezpośrednio w bazie danych za pomocą SQL:

  • Generowanie osadzania online: zamiast wyodrębniać dane do zewnętrznej usługi Python, AlloyDB wywołuje model text-embedding-004 w bazie danych za pomocą funkcji SQL.
  • Semantyczne wyszukiwanie wektorowe: za pomocą rozszerzenia pgvector i operatora odległości cosinusowej (<=>) agent może dopasować „klimat” użytkownika wyrażony w języku naturalnym (np. „romantyczna kolacja”) do najbliższej reprezentacji wektorowej w katalogu restauracji, zwracając semantycznie trafne wyniki w milisekundach.

Optymalizacja baz danych na potrzeby produkcji (HNSW i partycjonowanie)

Aby mieć pewność, że aplikacja może obsługiwać ponad 100 tys. wierszy i duży ruch, pełnisz rolę wirtualnego administratora bazy danych i stosujesz 2 zaawansowane optymalizacje bazy danych:

  • Indeks HNSW (Hierarchical Navigable Small World): w kolumnie wektorowej utworzono indeks HNSW. W przeciwieństwie do indeksów płaskich HNSW tworzy wielowarstwowy wykres, który umożliwia bardzo szybkie przybliżone wyszukiwanie najbliższych sąsiadów (ANN) z wysokim odtwarzaniem.
  • Deklaratywne partycjonowanie tabeli: tabela restauracji została podzielona na partycje według dzielnicy. Dzięki temu zapytania kierowane na określony obszar skanują tylko odpowiednią partycję, a nie całą tabelę, co znacznie zmniejsza liczbę operacji wejścia/wyjścia na dysku i czas oczekiwania na zapytanie.

Jako deweloperzy aplikacji często unikamy złożonych konfiguracji baz danych, matematyki wektorowej i zaawansowanych strategii indeksowania, ponieważ wymagają one specjalistycznej wiedzy z zakresu administracji bazami danych. Dzięki wykorzystaniu vibe coding w agentowym środowisku IDE możemy zniwelować tę różnicę. Teraz możemy bez obaw projektować, tworzyć i optymalizować aplikacje bazodanowe klasy produkcyjnej, korzystając z języka naturalnego. Znacznie przyspiesza to nasz cykl rozwoju i pozwala nam skupić się na tym, co najważniejsze: tworzeniu niesamowitych wrażeń dla użytkowników.

12. Czyszczenie

Aby uniknąć obciążenia konta Google Cloud opłatami za zasoby zużyte w tym ćwiczeniu, wykonaj te czynności:

  1. W konsoli Google Cloud otwórz stronę Zarządzanie zasobami.
  2. Z listy projektów wybierz projekt do usunięcia, a potem kliknij Usuń.
  3. W oknie wpisz identyfikator projektu i kliknij Wyłącz, aby usunąć projekt.

13. Gratulacje

Udało Ci się utworzyć i wdrożyć aplikację opartą na danych i AI za pomocą metody vibe coding.

W tym module:

  • Udostępniono bazę danych AlloyDB z dostępem przy użyciu prywatnego i publicznego adresu IP.
  • Połącz IDE Antigravity bezpośrednio z bazą danych za pomocą zestawu narzędzi Model Context Protocol (MCP).
  • Użyto języka naturalnego do wczytania katalogu CSV, połączenia frontendu Next.js z bazą danych i wdrożenia go w Cloud Run.
  • Włączono integrację platformy agentów w bazie danych, aby generować wektory dystrybucyjne i przeprowadzać wyszukiwanie semantyczne.
  • Pełnił rolę wirtualnego administratora bazy danych, aby zoptymalizować bazę danych pod kątem skali produkcyjnej za pomocą indeksowania HNSW i partycjonowania tabel.

Wszystko to zostało osiągnięte dzięki naturalnej rozmowie z agentem AI bez pisania ani jednej linii ręcznego kodu SQL czy otwierania zewnętrznych klientów bazy danych.

Więcej informacji znajdziesz w dokumentacji produktu: