Vibe Coding dengan AlloyDB: Dari 0 ke Prod dengan Antigravity

1. Pengantar

Pengodean suasana telah merevolusi kecepatan dan cara kami mengembangkan frontend, tetapi sering kali terhambat saat mencapai database. Biasanya, developer harus beralih konteks, menulis skema SQL yang kompleks, mengelola kumpulan koneksi, dan mengonfigurasi ekstensi database secara manual.

Dalam codelab ini, Anda akan merasakan alur kerja pengembangan database percakapan yang lancar. Dengan menggunakan Model Context Protocol (MCP) dan IDE agentik, Anda akan memperlakukan editor sebagai Data Engineer yang berpengalaman—mulai dari ide sederhana hingga aplikasi database yang terhubung sepenuhnya, dioptimalkan, dan berteknologi AI dalam hitungan menit, semuanya tanpa meninggalkan ruang kerja Anda.

Yang akan Anda buat

Dalam codelab ini, Anda akan membangun dan men-deploy Panduan Gastronomi AI—aplikasi Next.js modern yang didukung oleh AlloyDB. Aplikasi akan mendukung:

  • Penyerapan Katalog Dinamis: Mengimpor dan menyusun data restoran secara otomatis dari file CSV mentah.
  • Penelusuran Berbasis Kata Kunci: Mengirim kueri ke database secara dinamis menggunakan penelusuran teks lengkap.
  • Penelusuran Semantik yang Didukung AI: Menemukan restoran dengan mendeskripsikan "suasana" (misalnya, "tempat nyaman untuk kencan" atau "makanan cepat saji larut malam") menggunakan sematan Agent Platform.

bc2d98c88c72648e.png

Yang akan Anda pelajari

  • Menyediakan instance AlloyDB Google Cloud dengan konfigurasi IP Publik dan jaringan VPC.
  • Menghubungkan Antigravity IDE langsung ke AlloyDB menggunakan Model Context Protocol (MCP) Toolbox.
  • Menghubungkan frontend Next.js ke database aktif menggunakan variabel lingkungan dan koneksi SSL yang aman.
  • Mengaktifkan integrasi Agent Platform dalam database untuk membuat embedding vektor menggunakan text-embedding-004.
  • Melakukan Penelusuran Kemiripan Vektor menggunakan operator jarak kosinus (<=>).
  • Mengoptimalkan performa database untuk skala produksi menggunakan pengindeksan HNSW dan Partisi Tabel—bertindak sebagai DBA Virtual.

Yang Anda butuhkan

Untuk menyelesaikan codelab ini, Anda memerlukan:

  • Antigravity diinstal di komputer lokal Anda.
  • Google Cloud CLI (gcloud) dan Git terinstal dan terautentikasi di mesin lokal Anda.
  • Project Google Cloud yang mengaktifkan penagihan.
  • Browser web (Chrome direkomendasikan).

Codelab ini dirancang untuk developer dari semua level, termasuk pemula.

2. Sebelum memulai

Bagian ini memandu Anda melakukan penyiapan awal yang diperlukan di Project Google Cloud sebelum Anda dapat mulai membuat Panduan Kuliner AI Berlin.

Membuat project

  1. Di Konsol Google Cloud, di halaman pemilih project, pilih atau buat project Google Cloud.
  2. Pastikan penagihan diaktifkan untuk project Cloud Anda. Pelajari cara memeriksa apakah penagihan telah diaktifkan pada suatu project .

Instal Prasyarat Lokal

Pastikan Anda telah menginstal alat berikut di komputer lokal Anda:

  • Antigravity 2.0: Menginstal Antigravity
  • Git: Download dan instal Git.
  • Google Cloud CLI: Download dan instal gcloud

Menyiapkan Antigravity 2.0

Saat pertama kali meluncurkan Antigravity 2.0, Anda akan diminta untuk memasukkan Project ID Google Cloud dari langkah sebelumnya.

Masukkan Project ID Anda untuk melakukan inisialisasi ruang kerja:

12bf4154b982f21e.png

Menyiapkan dan Membuka Antigravity IDE

Kita akan menginstal dan membuka Antigravity IDE di komputer lokal agar dapat menjalankan perintah terminal

  1. Di antarmuka Antigravity 2.0, cari dan klik opsi untuk Install Antigravity IDE (di pojok kanan atas).

89eb42b2f840b96d.png

  1. Setelah perintah download dan penginstalan muncul, ikuti wizard penginstalan menggunakan setelan default.
  2. Setelah penginstalan selesai, luncurkan Antigravity IDE

Membuat Clone Repositori dan Mengautentikasi dengan Google Cloud

Anda akan menjalankan semua petunjuk command line langsung di dalam IDE.

  1. Buka Antigravity IDE di komputer lokal Anda
  2. Buka terminal Antigravity dan clone repositori project:
git clone https://github.com/mtoscano84/vibe-coding-postgres-mcp.git
  1. Buka folder project:
  2. Buka File > Open Folder (atau Open...).
  3. Buka dan pilih folder vibe-coding-postgres-mcp yang baru di-clone.
  4. Setelah folder project terbuka, luncurkan terminal terintegrasi baru di Antigravity IDE. Tetapkan variabel lingkungan PROJECT_ID dan konfigurasikan gcloud CLI untuk menggunakannya (ganti [YOUR_PROJECT_ID] dengan project ID GCP Anda yang sebenarnya):
export PROJECT_ID=[YOUR_PROJECT_ID]
gcloud config set project $PROJECT_ID
  1. Login ke Google Cloud CLI:
gcloud auth login
  1. Login ke Kredensial Default Aplikasi (ADC): (Tindakan ini akan membuat file kredensial lokal yang diperlukan oleh konektor database AI dan MCP kita nanti dalam lab)
gcloud auth application-default login
  1. Verifikasi akun aktif Anda:
gcloud auth list

Aktifkan API yang diperlukan

Jalankan perintah berikut di terminal Antigravity Anda untuk mengaktifkan layanan Google Cloud yang diperlukan:

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. Buat Instance AlloyDB

Di bagian ini, Anda akan menjalankan skrip otomatis di terminal Antigravity untuk menyediakan cluster dan instance AlloyDB di Google Cloud

Di terminal terintegrasi Antigravity IDE yang aktif (yang sudah berada di dalam direktori project vibe-coding-postgres-mcp), jalankan skrip penyediaan AlloyDB:

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

Catatan: Proses penyediaan memerlukan waktu sekitar 10-15 menit

Skrip penyediaan akan::

  • Buat jaringan VPC bernama default (jika belum ada di project Anda).
  • Siapkan Akses Layanan Pribadi untuk AlloyDB.
  • Deploy cluster AlloyDB dan instance utama dengan IP Pribadi dan IP Publik yang diaktifkan.
  • Berikan izin Platform Agen yang diperlukan kepada agen layanan AlloyDB.

Output-nya akan terlihat seperti ini:

----------------------------------------
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)
----------------------------------------

Pastikan untuk menyalin dan menyimpan detail berikut:

  • IP Pribadi AlloyDB: Digunakan oleh aplikasi Cloud Run untuk terhubung dengan aman dalam VPC.
  • IP Publik AlloyDB: Digunakan oleh Antigravity IDE lokal Anda untuk terhubung secara langsung.
  • Sandi Database: Sandi yang dibuat otomatis untuk pengguna postgres.

4. Men-deploy Frontend

Di bagian ini, Anda akan men-deploy frontend Next.js dasar (Status 0) ke Google Cloud Run menggunakan terminal terintegrasi Antigravity IDE. Versi awal ini menggunakan data tiruan dan belum terhubung ke database.

Pertama, jalankan perintah berikut langsung di terminal Antigravity Anda untuk memberikan peran IAM yang diperlukan ke akun layanan default Compute Engine:

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"

Dari root direktori vibe-coding-postgres-mcp di terminal Antigravity, jalankan perintah berikut untuk mengompilasi dan men-deploy aplikasi Next.js ke jaringan VPC Anda:

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

Setelah deployment selesai, URL Layanan akan dicetak.

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

Salin URL dan buka di browser Anda.

Pastikan Anda melihat halaman web Berlin AI Gastronomy Guide yang menampilkan kartu restoran tiruan.

16d3649d19796847.png

5. Menghubungkan Antigravity ke Google Cloud

Untuk mengizinkan agen AI di IDE (Antigravity) yang berjalan secara lokal berinteraksi dengan database, kita akan menggunakan Server MCP AlloyDB Google Cloud resmi.

Karena kita mengaktifkan IP Publik di instance AlloyDB selama penyediaan, IDE lokal Anda dapat terhubung langsung ke instance tersebut melalui internet. Koneksi diamankan menggunakan autentikasi sandi dan SSL, dan server MCP menggunakan kredensial Google Cloud lokal Anda untuk mengizinkan koneksi.

Mengonfigurasi Server MCP di Antigravity

  1. Di Antigravity IDE, klik menu tiga titik (...) di pojok kanan atas jendela chat.
  2. Pilih MCP Servers, lalu klik Managed MCP Servers (atau View raw config / Edit Configuration File).
  3. Tambahkan blok JSON berikut di dalam objek mcpServers. Pastikan untuk mengganti [YOUR_PROJECT_ID] dan [YOUR_ALLOYDB_PASSWORD] dengan project ID Anda yang sebenarnya dan sandi database yang Anda simpan dari langkah penyediaan 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. Simpan file konfigurasi
  2. IDE akan otomatis memulai server MCP. Anda akan melihat titik hijau di samping alloydb-postgres di panel MCP, yang menunjukkan bahwa koneksi berhasil.

Membuka Repositori di Antigravity 2.0

Untuk bagian selanjutnya di lab ini, kita akan menulis dan membangun aplikasi menggunakan Antigravity 2.0.

  1. Kembali ke Antigravity 2.0 dan buka folder project yang baru saja Anda clone.
  2. Klik New Conversation > New Project > Add Folder.
  3. Buka dan pilih folder vibe-coding-postgres-mcp yang baru di-clone.
  4. Sekarang Anda akan melihat Antarmuka Agen di dalam Antigravity 2.0 yang mengarah langsung ke ruang kerja yang Anda clone, siap untuk coding.

e806fdbce47d43f0.png

6. Vibe Coding: Penyerapan Database

Setelah Antigravity terhubung ke instance AlloyDB Anda melalui server MCP, Anda dapat memulai pengalaman pengodean getaran.

Pada langkah ini, Anda akan menginstruksikan agen AI untuk membaca file CSV lokal yang berisi katalog gastronomi Berlin dan memuatnya ke dalam database AlloyDB Anda.

Tugas

Anda akan menggunakan Chat Agen di Antigravity. Agen akan secara mandiri membaca file, menganalisis jenis data, terhubung ke database Anda, membuat tabel, dan memasukkan data.

Kemudian, salin dan tempel perintah berikut ke dalam percakapan, lalu tekan 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.

Mengamati agen saat menjalankan tugas:

  • Pertama-tama, Dataflow akan membaca header file CSV dan beberapa baris contoh untuk menentukan skema yang sesuai.
  • Fungsi ini akan memanggil alat MCP AlloyDB untuk membuat tabel restoran.
  • Layanan ini akan memasukkan 100 data restoran dari file CSV ke dalam database secara berkelompok.

Verifikasi

Setelah agen memberi tahu Anda bahwa proses telah selesai, Anda dapat memverifikasi bahwa data telah dimuat:

Di Chat Agen, tanyakan kepada agen:

Show me the first 5 records from the restaurants table.

Agen akan membuat kueri database dan menampilkan 5 restoran pertama (seperti Pub Lia's Kitchen dan Cafe Clärchens), yang mengonfirmasi bahwa penyerapan database berhasil.

7. Vibe Coding: Menghubungkan Frontend ke Database

Di bagian ini, Anda akan menghubungkan frontend Next.js ke database AlloyDB aktif. Anda akan menginstruksikan agen untuk mengganti data tiruan dengan kueri database aktif dan menerapkan penelusuran kata kunci.

Tugas

Anda akan meminta agen untuk menulis kode koneksi dan memperbarui halaman beranda. Karena kita telah melakukan commit aturan SSL database di .agents/AGENTS.md, agen akan otomatis mengonfigurasi kumpulan koneksi untuk menggunakan SSL bagi koneksi cloud tanpa perlu Anda menentukannya dalam perintah Anda.

Di percakapan Antigravity Agent, salin dan tempel perintah berikut, lalu tekan Enter (ganti [YOUR_PASSWORD] dengan sandi database Anda yang sebenarnya):

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

Mengamati agen saat menjalankan tugas:

  • Perintah ini akan menginstal paket pg dan jenis TypeScript-nya (@types/pg).
  • Hal ini akan membuat file koneksi database (atau Tindakan Server Next.js) dan mengonfigurasi kumpulan koneksi.
  • CLI akan membaca aturan AGENTS.md dan otomatis menambahkan konfigurasi SSL untuk host non-lokal.
  • File ini akan menulis ulang page.tsx untuk membuat kueri database dan memfilter hasil berdasarkan kueri penelusuran.

Verifikasi

Untuk menguji perubahan, Anda harus men-deploy ulang frontend ke Cloud Run. Karena kita menggunakan alur "Khusus Cloud", kode baru dikirimkan dengan cara ini.

Buka terminal terintegrasi di Antigravity IDE (pastikan Anda berada di direktori root).

Jalankan perintah deployment, dengan meneruskan IP Pribadi dan Sandi AlloyDB Anda sebagai variabel lingkungan (ganti placeholder dengan nilai sebenarnya):

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

Setelah deployment selesai, buka URL Layanan di browser Anda.

Coba telusuri "Burgermeister" atau "Kebab". Anda akan melihat restoran sungguhan dimuat dari database.

Perhatikan bahwa kartu restoran kini menampilkan gambar GCS sebenarnya (karena catatan database berisi URL GCS publik yang kita upload sebelumnya).

8. Vibe Coding: Mengaktifkan Penelusuran Semantik

Di bagian ini, Anda akan mengupgrade aplikasi untuk mendukung Penelusuran Vektor Semantik yang didukung AI. Pengguna tidak hanya dapat menelusuri dengan mencocokkan kata kunci persis, tetapi juga dapat menelusuri dengan mendeskripsikan "suasana" atau pengalaman yang mereka cari (misalnya, "tempat makan malam romantis" atau "makan cepat setelah clubbing").

Tugas

Anda akan menginstruksikan agen untuk mengaktifkan penelusuran semantik pada tabel restoran. Agen akan memanfaatkan keterampilan kustom add-vector-search-alloydb di repositori untuk menangani ekstensi database, pendaftaran model Platform Agen, pembuatan penyematan, dan pembaruan kueri secara otomatis.

Di percakapan Antigravity Agent, salin dan tempel perintah berikut, lalu tekan 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.

Mengamati agen saat menjalankan tugas:

  • Skrip ini akan terhubung ke AlloyDB dan mengaktifkan ekstensi vektor (pgvector) dan google_ml_integration.
  • Kode ini akan mendaftarkan model embedding Agent Platform (text-embedding-004) di dalam database.
  • Tindakan ini akan menambahkan kolom penyematan baru ke tabel restoran.
  • Langkah ini akan menjalankan kueri dalam database untuk membuat embedding bagi semua 100 deskripsi restoran.
  • Bagian ini akan memperbarui kode frontend untuk membuat embedding untuk kueri penelusuran pengguna dan melakukan penelusuran kesamaan vektor menggunakan operator jarak kosinus (<=>).

Verifikasi

Deploy ulang kode yang telah diupdate ke Cloud Run.

Di terminal terintegrasi Antigravity IDE, jalankan perintah deployment (ganti placeholder dengan nilai sebenarnya):

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

Setelah deployment selesai, buka URL Layanan di browser Anda.

Uji penelusuran semantik dengan memasukkan deskripsi bahasa alami, seperti:

  • "tempat makan malam romantis"
  • "camilan cepat setelah clubbing"

Perhatikan bahwa aplikasi ini menampilkan restoran yang sangat relevan (seperti Cafe Clärchens atau Burgermeister) meskipun kata "romantis" atau "clubbing" tidak ada dalam nama atau deskripsi restoran tersebut.

9. Vibe Coding: Pengoptimalan Database

Seiring berkembangnya aplikasi Anda, database harus dioptimalkan untuk menangani volume data yang besar (lebih dari 100 ribu baris) dan traffic penelusuran serentak yang tinggi. Pada langkah terakhir ini, Anda akan memperlakukan agen sebagai Administrator Database (DBA) Virtual untuk menganalisis dan mengoptimalkan skema database.

Tugas

Anda akan meminta agen untuk bertindak sebagai Arsitek Database Utama, menganalisis skema saat ini, dan merekomendasikan pengoptimalan. Setelah Anda meninjau dan menyetujui rekomendasi, agen akan menggunakan keterampilan kustom optimize-database-alloydb untuk menerapkannya secara otomatis.

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.

Agen akan menganalisis database dan merespons dengan dua rekomendasi:

  • Indeks HNSW: Indeks Approximate Nearest Neighbor (ANN) pada kolom embedding untuk membuat kueri kemiripan vektor sangat cepat.
  • Partisi Tabel: Mempartisi tabel restoran (misalnya, Partisi Daftar menurut lingkungan) untuk meningkatkan performa dan pengelolaan kueri.

Tinjau penjelasannya. Setelah Anda siap, balas agen dalam chat:

Approved, please apply these optimizations.

Mengamati agen saat menjalankan tugas:

  • Tindakan ini akan membuat indeks HNSW pada kolom sematan.
  • Tindakan ini akan memartisi tabel restoran menurut lingkungan, membuat tabel partisi turunan untuk setiap lingkungan, dan memigrasikan data yang ada.

Verifikasi

Minta agen untuk memverifikasi bahwa pengoptimalan berhasil diterapkan. Di Chat Agen, tanyakan:

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

Agen akan membuat kueri katalog database dan menampilkan struktur partisi baru (misalnya, restaurants_mitte, restaurants_kreuzberg) dan indeks HNSW, yang mengonfirmasi bahwa database Anda kini sepenuhnya dioptimalkan untuk produksi.

10. Tantangan: Menambahkan Ulasan dan Rating

Sekarang giliran Anda menguji keterampilan Vibe Coding Anda. Dalam tantangan ini, Anda akan memperluas Panduan Kuliner Berlin untuk mendukung ulasan pelanggan dan rating bintang.

Tugas

Daripada mengikuti perintah salin tempel, tulis perintah Anda sendiri di Chat Agen Antigravity untuk menerapkan fitur berikut:

  1. Skema Database: Buat tabel reviews baru yang ditautkan ke tabel restaurants. Objek ini harus menyimpan rating (bilangan bulat dari 1 hingga 5) dan komentar teks singkat.
  2. Pembuatan Data: Buat 3-4 ulasan pelanggan yang realistis untuk setiap 100 restoran dalam database.
  3. Integrasi Frontend: Perbarui frontend Next.js untuk menghitung dan menampilkan rating bintang rata-rata (misalnya, ⭐⭐⭐⭐☆) di setiap kartu restoran.
  4. Pemfilteran: Tambahkan filter dropdown di bagian atas halaman untuk memfilter restoran berdasarkan ratingnya (misalnya, "Tampilkan Semua", "4+ Bintang", "3+ Bintang").

Verifikasi

Setelah agen menyelesaikan tugas, deploy ulang aplikasi Anda ke Cloud Run (ganti placeholder dengan nilai sebenarnya) dari terminal terintegrasi 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

Setelah deployment selesai, muat ulang browser dan verifikasi rating bintang Anda di kartu

1433b3c589f08f2a.png.

11. Hasil

Setelah menyelesaikan langkah-langkah tersebut, Anda telah berhasil membangun dan mengoptimalkan aplikasi AI yang didukung database generasi berikutnya menggunakan Vibe Coding. Bagian ini menyoroti kemampuan arsitektur inti yang telah Anda terapkan:

Integrasi Database Agentik (Model Context Protocol)

Biasanya, penulisan kode database adalah proses manual yang beralih konteks antara IDE, dokumentasi, dan klien database.

Di lab ini, Anda menggunakan Model Context Protocol (MCP) Toolbox untuk menjembatani kesenjangan ini. Dengan mengekspos inspeksi skema database dan eksekusi SQL sebagai alat langsung ke agen AI, agen tersebut dapat:

  • Periksa data CSV mentah dan rancang skema database.
  • Buat dan jalankan DDL untuk membuat tabel.
  • Hubungkan kumpulan koneksi di aplikasi Next.js.

Hal ini menunjukkan bagaimana MCP menjadikan pengembangan database sebagai pengalaman percakapan berkecepatan tinggi sekaligus mempertahankan kontrol penuh developer dalam IDE.

AI Dalam Database (Platform Agen & Penelusuran Semantik)

Aplikasi Anda memanfaatkan integrasi native AlloyDB dengan Agent Platform Google Cloud untuk membuat embedding vektor langsung di dalam database menggunakan SQL:

  • Pembuatan Embedding Online: Daripada menarik data ke layanan Python eksternal, AlloyDB memanggil model text-embedding-004 dalam database melalui fungsi SQL.
  • Penelusuran Vektor Semantik: Dengan menggunakan ekstensi pgvector dan operator jarak kosinus (<=>), agen dapat mencocokkan "nuansa" bahasa alami pengguna (misalnya, "makan malam romantis") dengan representasi vektor terdekat dalam katalog restoran, sehingga menampilkan hasil yang relevan secara semantik dalam milidetik.

Pengoptimalan Database Tingkat Produksi (HNSW & Partisi)

Untuk memastikan aplikasi dapat diskalakan ke lebih dari 100 ribu baris dan menangani traffic tinggi, Anda bertindak sebagai DBA Virtual untuk menerapkan dua pengoptimalan database lanjutan:

  • Indeks HNSW (Hierarchical Navigable Small World): Anda membuat indeks HNSW pada kolom vektor. Tidak seperti indeks datar, HNSW membangun grafik multi-layer yang memungkinkan penelusuran perkiraan tetangga terdekat (ANN) yang sangat cepat dengan perolehan tinggi.
  • Partisi Tabel Deklaratif: Anda mempartisi tabel restoran menurut lingkungan. Hal ini memastikan bahwa kueri yang menargetkan area tertentu hanya memindai partisi yang relevan, bukan seluruh tabel, sehingga secara drastis mengurangi I/O disk dan latensi kueri.

Sebagai developer aplikasi, kita sering kali menghindari konfigurasi database yang kompleks, matematika vektor, dan strategi pengindeksan mendalam karena memerlukan keahlian DBA khusus. Dengan memanfaatkan Vibe Coding dengan IDE agentik, kita dapat menjembatani kesenjangan ini. Sekarang kami dapat dengan yakin mendesain, membangun, dan mengoptimalkan aplikasi database tingkat produksi menggunakan bahasa alami—sehingga secara signifikan mempercepat siklus pengembangan kami dan memungkinkan kami berfokus pada hal yang paling penting: membangun pengalaman pengguna yang luar biasa.

12. Pembersihan

Agar tidak menimbulkan biaya pada akun Google Cloud Anda untuk resource yang digunakan dalam lab ini, ikuti langkah-langkah berikut:

  1. Di konsol Google Cloud, buka halaman Manage resources.
  2. Dalam daftar project, pilih project yang ingin Anda hapus, lalu klik Hapus.
  3. Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.

13. Selamat

Anda telah berhasil membuat dan men-deploy aplikasi berbasis data yang didukung AI menggunakan Vibe Coding.

Di lab ini, Anda akan:

  • Menyediakan database AlloyDB dengan akses IP Pribadi dan Publik.
  • Menghubungkan Antigravity IDE Anda langsung ke database menggunakan Model Context Protocol (MCP) Toolbox.
  • Menggunakan bahasa alami untuk menyerap katalog CSV, menghubungkan frontend Next.js ke database, dan men-deploy-nya ke Cloud Run.
  • Mengaktifkan integrasi Agent Platform dalam database untuk membuat embedding vektor dan melakukan penelusuran semantik.
  • Bertindak sebagai DBA Virtual untuk mengoptimalkan database Anda untuk skala produksi menggunakan pengindeksan HNSW dan Partisi Tabel.

Semua ini dilakukan melalui percakapan alami dengan agen AI Anda, tanpa menulis satu baris SQL manual pun atau membuka klien database eksternal.

Untuk mengetahui informasi selengkapnya, lihat dokumentasi produk: