Vibe Coding ด้วย AlloyDB: จาก 0 ถึง Prod ด้วย Antigravity

1. บทนำ

การเขียนโค้ดแบบไวบ์ได้ปฏิวัติความเร็วและวิธีที่เราพัฒนาส่วนหน้า แต่ก็มักจะติดขัดเมื่อไปถึงฐานข้อมูล โดยปกติแล้ว นักพัฒนาซอฟต์แวร์ต้องสลับบริบท เขียนสคีมา SQL ที่ซับซ้อน จัดการกลุ่มการเชื่อมต่อ และกำหนดค่าส่วนขยายฐานข้อมูลด้วยตนเอง

ใน Codelab นี้ คุณจะได้สัมผัสเวิร์กโฟลว์การพัฒนาฐานข้อมูลแบบสนทนาที่ราบรื่น การใช้ Model Context Protocol (MCP) และ IDE แบบเอเจนต์จะช่วยให้คุณใช้เอดิเตอร์เป็นวิศวกรข้อมูลที่มีประสบการณ์ได้ โดยเปลี่ยนจากไอเดียที่เรียบง่ายไปเป็นแอปพลิเคชันฐานข้อมูลที่เชื่อมต่ออย่างเต็มรูปแบบ ปรับให้เหมาะสม และเปิดใช้ AI ได้ในไม่กี่นาทีโดยไม่ต้องออกจากพื้นที่ทํางาน

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะได้สร้างและติดตั้งใช้งานไกด์แนะนำอาหารที่ขับเคลื่อนด้วย AI ซึ่งเป็นแอปพลิเคชัน Next.js สมัยใหม่ที่ทำงานบน AlloyDB แอปพลิเคชันจะรองรับสิ่งต่อไปนี้

  • การส่งผ่านข้อมูลแคตตาล็อกแบบไดนามิก: การนำเข้าและจัดโครงสร้างข้อมูลร้านอาหารจากไฟล์ CSV ดิบโดยอัตโนมัติ
  • การค้นหาตามคีย์เวิร์ด: การค้นหาฐานข้อมูลแบบไดนามิกโดยใช้การค้นหาข้อความแบบเต็ม
  • การค้นหาเชิงความหมายที่ทำงานด้วยระบบ AI: ค้นหาร้านอาหารโดยอธิบาย "บรรยากาศ" (เช่น "ที่ที่อบอุ่นเหมาะกับการออกเดต" หรือ "หาอะไรกินด่วนๆ ตอนดึก") โดยใช้การฝังแพลตฟอร์มตัวแทน

e74cb0eb7e17d6da.png

สิ่งที่คุณจะได้เรียนรู้

  • การจัดสรรอินสแตนซ์ Google Cloud AlloyDB ด้วยการกำหนดค่า IP สาธารณะและเครือข่าย VPC
  • การเชื่อมต่อ Antigravity IDE กับ AlloyDB โดยตรงโดยใช้ Model Context Protocol (MCP) Toolbox
  • การเชื่อมต่อส่วนหน้าของ Next.js กับฐานข้อมูลแบบเรียลไทม์โดยใช้ตัวแปรสภาพแวดล้อมและการเชื่อมต่อ SSL ที่ปลอดภัย
  • การเปิดใช้การผสานรวมแพลตฟอร์ม Agent ในฐานข้อมูลเพื่อสร้างการฝังเวกเตอร์โดยใช้ text-embedding-004
  • ทำการค้นหาความคล้ายกันของเวกเตอร์โดยใช้โอเปอเรเตอร์ระยะทางโคไซน์ (<=>)
  • การเพิ่มประสิทธิภาพฐานข้อมูลเพื่อการผลิตในระดับการผลิตโดยใช้การจัดทำดัชนี HNSW และการแบ่งตาราง ซึ่งทำหน้าที่เป็น DBA เสมือน

สิ่งที่คุณต้องมี

คุณต้องมีสิ่งต่อไปนี้จึงจะทำ Codelab นี้ให้เสร็จสมบูรณ์ได้

  • ติดตั้ง Antigravity Desktop IDE บนเครื่อง
  • โปรเจ็กต์ Google Cloud ที่เปิดใช้การเรียกเก็บเงิน
  • ติดตั้งและตรวจสอบสิทธิ์ Google Cloud CLI (gcloud) และ Git ในเครื่องของคุณ
  • เว็บเบราว์เซอร์ (แนะนำให้ใช้ Chrome)

Codelab นี้ออกแบบมาสำหรับนักพัฒนาซอฟต์แวร์ทุกระดับ รวมถึงผู้เริ่มต้น

2. ก่อนเริ่มต้น

ส่วนนี้จะแนะนำการตั้งค่าเริ่มต้นที่จำเป็นในโปรเจ็กต์ Google Cloud ก่อนที่คุณจะเริ่มสร้างคู่มือร้านอาหาร AI Berlin

สร้างโปรเจ็กต์

  1. ในคอนโซล Google Cloud ให้เลือกหรือสร้างโปรเจ็กต์ Google Cloud ในหน้าตัวเลือกโปรเจ็กต์
  2. ตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินสำหรับโปรเจ็กต์ Cloud แล้ว ดูวิธีตรวจสอบว่าได้เปิดใช้การเรียกเก็บเงินในโปรเจ็กต์แล้วหรือไม่

ติดตั้งข้อกำหนดเบื้องต้นในเครื่อง

ตรวจสอบว่าคุณได้ติดตั้งเครื่องมือต่อไปนี้ในเครื่องของคุณแล้ว

  • Antigravity IDE: ติดตั้ง Antigravity Desktop IDE
  • Google Cloud SDK: ดาวน์โหลดและติดตั้ง Google Cloud CLI
  • Git: ดาวน์โหลดและติดตั้ง Git

ตรวจสอบสิทธิ์และตั้งค่าโปรเจ็กต์

คุณจะดำเนินการตามวิธีการทั้งหมดในบรรทัดคำสั่งได้โดยตรงภายใน IDE

  1. เปิด Antigravity IDE ในเครื่องภายใน
  2. เปิดเทอร์มินัลของ Antigravity แล้วโคลนที่เก็บโปรเจ็กต์
git clone https://github.com/mtoscano84/vibe-coding-postgres-mcp.git
  1. เปิดโฟลเดอร์โปรเจ็กต์โดยทำดังนี้
  2. ไปที่ไฟล์ > เปิดโฟลเดอร์ (หรือเปิด...)
  3. ไปที่โฟลเดอร์ vibe-coding-postgres-mcp ที่เพิ่งโคลน แล้วเลือกโฟลเดอร์ดังกล่าว
  4. เมื่อโฟลเดอร์โปรเจ็กต์เปิดขึ้นแล้ว ให้เปิดใช้เทอร์มินัลแบบผสานรวมใหม่ใน Antigravity ตั้งค่าตัวแปรสภาพแวดล้อม PROJECT_ID และกำหนดค่า gcloud CLI ให้ใช้ตัวแปรดังกล่าว (แทนที่ [YOUR_PROJECT_ID] ด้วยรหัสโปรเจ็กต์ GCP จริง)
export PROJECT_ID=[YOUR_PROJECT_ID]
gcloud config set project $PROJECT_ID
  1. เข้าสู่ระบบ Google Cloud CLI โดยทำดังนี้
gcloud auth login
  1. วิธียืนยันบัญชีที่ใช้งานอยู่
gcloud auth list

เปิดใช้ API ที่จำเป็น

เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล Antigravity เพื่อเปิดใช้บริการ Google Cloud ที่จำเป็น

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. สร้างอินสแตนซ์ AlloyDB

ในส่วนนี้ คุณจะได้เรียกใช้สคริปต์อัตโนมัติในเทอร์มินัล Antigravity เพื่อจัดสรรคลัสเตอร์และอินสแตนซ์ AlloyDB ใน Google Cloud

ในเทอร์มินัล Antigravity ที่ผสานรวมซึ่งใช้งานอยู่ (ซึ่งอยู่ในไดเรกทอรีโปรเจ็กต์ vibe-coding-postgres-mcp อยู่แล้ว) ให้เรียกใช้สคริปต์การจัดสรร AlloyDB ดังนี้

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

หมายเหตุ: กระบวนการจัดสรรจะใช้เวลาประมาณ 10-15 นาที

สคริปต์การจัดสรรจะทำสิ่งต่อไปนี้

  • สร้างเครือข่าย VPC ชื่อ default (หากไม่มีในโปรเจ็กต์)
  • ตั้งค่าการเข้าถึงบริการส่วนตัวสำหรับ AlloyDB
  • ติดตั้งใช้งานคลัสเตอร์และอินสแตนซ์หลักของ AlloyDB โดยเปิดใช้ทั้ง IP ส่วนตัวและ IP สาธารณะ
  • มอบสิทธิ์ที่จำเป็นของแพลตฟอร์ม Agent ให้กับ Agent บริการ AlloyDB

เอาต์พุตควรมีลักษณะคล้ายกับตัวอย่างต่อไปนี้

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

โปรดคัดลอกและบันทึกรายละเอียดต่อไปนี้

  • IP ส่วนตัวของ AlloyDB: ใช้โดยแอปพลิเคชัน Cloud Run เพื่อเชื่อมต่ออย่างปลอดภัยภายใน VPC
  • IP สาธารณะของ AlloyDB: ใช้โดย IDE Antigravity ในเครื่องเพื่อเชื่อมต่อโดยตรง
  • รหัสผ่านฐานข้อมูล: รหัสผ่านที่สร้างขึ้นโดยอัตโนมัติสำหรับผู้ใช้ postgres

4. ทำให้ฟรอนท์เอนด์ใช้งานได้

ในส่วนนี้ คุณจะติดตั้งใช้งานส่วนหน้าของ Next.js พื้นฐาน (สถานะ 0) ใน Google Cloud Run โดยใช้เทอร์มินัลที่ผสานรวม Antigravity เวอร์ชันเริ่มต้นนี้ใช้ข้อมูลจำลองและยังไม่ได้เชื่อมต่อกับฐานข้อมูล

ก่อนอื่น ให้เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล Antigravity โดยตรงเพื่อมอบบทบาท IAM ที่จำเป็นให้กับบัญชีบริการเริ่มต้นของ 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"

จากรูทของไดเรกทอรี vibe-coding-postgres-mcp ในเทอร์มินัล Antigravity ให้เรียกใช้คำสั่งต่อไปนี้เพื่อคอมไพล์และทำให้แอปพลิเคชัน Next.js ใช้งานได้ในเครือข่าย VPC

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

เมื่อการติดตั้งใช้งานเสร็จสมบูรณ์ ระบบจะพิมพ์ URL ของบริการ

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

คัดลอก URL แล้วเปิดในเบราว์เซอร์

ตรวจสอบว่าคุณเห็นหน้าเว็บ Berlin AI Gastronomy Guide ที่แสดงการ์ดร้านอาหารจำลอง

16d3649d19796847.png

5. เชื่อมต่อ Antigravity กับ Google Cloud

หากต้องการอนุญาตให้เอเจนต์ AI ใน IDE (Antigravity) ที่ทำงานในเครื่องโต้ตอบกับฐานข้อมูล เราจะใช้เซิร์ฟเวอร์ MCP ของ AlloyDB ใน Google Cloud อย่างเป็นทางการ

เนื่องจากเราเปิดใช้ IP สาธารณะในอินสแตนซ์ AlloyDB ระหว่างการจัดสรร IDE ในเครื่องจึงเชื่อมต่อกับอินสแตนซ์ได้โดยตรงผ่านอินเทอร์เน็ต การเชื่อมต่อจะปลอดภัยโดยใช้การตรวจสอบสิทธิ์ SSL และรหัสผ่าน และเซิร์ฟเวอร์ MCP จะใช้ข้อมูลเข้าสู่ระบบ Google Cloud ในเครื่องเพื่อให้สิทธิ์การเชื่อมต่อ

กำหนดค่าเซิร์ฟเวอร์ MCP ใน Antigravity

  1. ใน Antigravity IDE ให้คลิกเมนู 3 จุด (...) ที่มุมขวาบนของหน้าต่างแชท
  2. เลือกเซิร์ฟเวอร์ MCP แล้วคลิกเซิร์ฟเวอร์ MCP ที่มีการจัดการ (หรือดูการกำหนดค่าดิบ / แก้ไขไฟล์การกำหนดค่า)
  3. เพิ่มบล็อก JSON ต่อไปนี้ภายในออบเจ็กต์ mcpServers โปรดตรวจสอบว่าได้แทนที่ [YOUR_PROJECT_ID] และ [YOUR_ALLOYDB_PASSWORD] ด้วยรหัสโปรเจ็กต์จริงและรหัสผ่านฐานข้อมูลที่คุณบันทึกไว้จากขั้นตอนการจัดสรร 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. บันทึกไฟล์การกำหนดค่า
  2. IDE จะเริ่มเซิร์ฟเวอร์ MCP โดยอัตโนมัติ คุณควรเห็นจุดสีเขียวข้าง alloydb-postgres ในแผง MCP ซึ่งแสดงว่าเชื่อมต่อสำเร็จแล้ว

6. Vibe Coding: การนำเข้าฐานข้อมูล

ตอนนี้ IDE ของ Antigravity เชื่อมต่อกับอินสแตนซ์ AlloyDB ผ่านเซิร์ฟเวอร์ MCP แล้ว คุณก็เริ่มประสบการณ์การเขียนโค้ดแบบมีฟีลได้เลย

ในขั้นตอนนี้ คุณจะสั่งให้เอเจนต์ AI อ่านไฟล์ CSV ในเครื่องที่มีแคตตาล็อกร้านอาหารในเบอร์ลินและโหลดลงในฐานข้อมูล AlloyDB

งาน

คุณจะใช้แชทกับเอเจนต์ใน Antigravity เอเจนต์จะอ่านไฟล์ วิเคราะห์ประเภทข้อมูล เชื่อมต่อกับฐานข้อมูล สร้างตาราง และแทรกระเบียนโดยอัตโนมัติ

ใน Antigravity ให้เปิดแผงแชทของตัวแทน (โดยปกติจะอยู่ทางด้านขวาของเอดิเตอร์)

จากนั้นคัดลอกและวางพรอมต์ต่อไปนี้ลงในแชท แล้วกด Enter

Read the headers of database/seed_data_berlin.csv to determine column data types and create the restaurants table using the MCP tool execute_sql. Then, read the CSV rows locally and insert all 100 records into remote AlloyDB using a single batched multi-row INSERT INTO ... VALUES (...), (...), ...; statement via execute_sql. Do not print the CSV contents, row payloads, or SQL statements to the chat transcript.

การยืนยัน

ตัวแทนจะทำสิ่งต่อไปนี้

  • อ่านส่วนหัวของไฟล์ CSV และแถวตัวอย่างบางแถวเพื่อกำหนดสคีมาที่เหมาะสม
  • เรียกใช้เครื่องมือ MCP ของ AlloyDB เพื่อสร้างตารางร้านอาหาร
  • แทรกบันทึกร้านอาหาร 100 รายการจากไฟล์ CSV ลงในฐานข้อมูลแบบเป็นกลุ่ม

7. Vibe Coding: เชื่อมต่อส่วนหน้ากับฐานข้อมูล

ในส่วนนี้ คุณจะเชื่อมต่อฟรอนต์เอนด์ Next.js กับฐานข้อมูล AlloyDB ที่ใช้งานจริง คุณจะสั่งให้ Agent แทนที่ข้อมูลจำลองด้วยการค้นหาฐานข้อมูลจริงและใช้การค้นหาคีย์เวิร์ด

งาน

คุณจะแจ้งให้เอเจนต์เขียนโค้ดการเชื่อมต่อและอัปเดตหน้าแรก เนื่องจากเราได้คอมมิตกฎ SSL ของฐานข้อมูลใน .agents/AGENTS.md แล้ว เอเจนต์จะกำหนดค่า Connection Pool โดยอัตโนมัติให้ใช้ SSL สำหรับการเชื่อมต่อระบบคลาวด์โดยที่คุณไม่จำเป็นต้องระบุในพรอมต์

ในแชทของ Antigravity Agent ให้คัดลอกและวางพรอมต์ต่อไปนี้ แล้วกด Enter (แทนที่ [YOUR_PASSWORD] ด้วยรหัสผ่านฐานข้อมูลจริง)

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. When testing or verifying queries, always use LIMIT 3 and suppress quiet npm/build logs.

สังเกต Agent ขณะที่ทำงาน

  • ซึ่งจะติดตั้งแพ็กเกจ pg และประเภท TypeScript (@types/pg)
  • โดยจะสร้างไฟล์การเชื่อมต่อฐานข้อมูล (หรือการดำเนินการฝั่งเซิร์ฟเวอร์ของ Next.js) และกำหนดค่ากลุ่มการเชื่อมต่อ
  • โดยจะอ่านกฎ AGENTS.md และเพิ่มการกำหนดค่า SSL สำหรับโฮสต์ที่ไม่ใช่ในเครื่องโดยอัตโนมัติ
  • โดยจะเขียน page.tsx ใหม่เพื่อค้นหาฐานข้อมูลและกรองผลลัพธ์ตามคำค้นหา

การยืนยัน

หากต้องการทดสอบการเปลี่ยนแปลง คุณต้องทำให้ส่วนหน้าใช้งานได้อีกครั้งใน Cloud Run เนื่องจากเราใช้ขั้นตอน "Cloud-Only" จึงจัดส่งรหัสใหม่ดังนี้

เปิดเทอร์มินัลที่ผสานรวมใน Antigravity (ตรวจสอบว่าคุณอยู่ในไดเรกทอรีราก)

เรียกใช้คำสั่งการติดตั้งใช้งาน โดยส่ง IP ส่วนตัวและรหัสผ่านของ AlloyDB เป็นตัวแปรสภาพแวดล้อม (แทนที่ตัวยึดตำแหน่งด้วยค่าจริง)

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

เมื่อการติดตั้งใช้งานเสร็จสมบูรณ์แล้ว ให้เปิด URL ของบริการในเบราว์เซอร์

ลองค้นหาคำว่า "Burgermeister" หรือ "Kebab" คุณควรเห็นร้านอาหารจริงที่โหลดจากฐานข้อมูล

โปรดสังเกตว่าตอนนี้การ์ดร้านอาหารแสดงรูปภาพ GCS จริง (เนื่องจากระเบียนฐานข้อมูลมี URL GCS สาธารณะที่เราอัปโหลดไว้ก่อนหน้านี้)

8. Vibe Coding: เปิดใช้การค้นหาเชิงความหมาย

ในส่วนนี้ คุณจะอัปเกรดแอปพลิเคชันเพื่อรองรับการค้นหาเวกเตอร์เชิงความหมายที่ทำงานด้วยระบบ AI ผู้ใช้จะค้นหาได้โดยอธิบาย "ฟีล" หรือประสบการณ์ที่ต้องการ (เช่น "ร้านอาหารมื้อค่ำสุดโรแมนติก" หรือ "หาอะไรกินด่วนๆ หลังไปเที่ยวคลับ") แทนที่จะจับคู่คีย์เวิร์ดที่ตรงกันทุกประการ

งาน

คุณจะสั่งให้ Agent เปิดใช้การค้นหาเชิงความหมายในตารางร้านอาหาร เอเจนต์จะใช้ประโยชน์จากทักษะที่กำหนดเอง add-vector-search-alloydb ในที่เก็บเพื่อจัดการส่วนขยายฐานข้อมูล การลงทะเบียนโมเดลแพลตฟอร์มเอเจนต์ การสร้างการฝัง และการอัปเดตคิวรีโดยอัตโนมัติ

ในแชทของ Antigravity Agent ให้คัดลอกและวางพรอมต์ต่อไปนี้ แล้วกด 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. Execute embedding generation quietly without printing embedding vectors or SQL progress logs to chat.

สังเกต Agent ขณะที่ทำงาน

  • โดยจะเชื่อมต่อกับ AlloyDB และเปิดใช้ส่วนขยายเวกเตอร์ (pgvector) และ google_ml_integration
  • ซึ่งจะลงทะเบียนโมเดลการฝัง Agent Platform (text-embedding-004) ภายในฐานข้อมูล
  • ซึ่งจะเป็นการเพิ่มคอลัมน์การฝังใหม่ลงในตารางร้านอาหาร
  • โดยจะเรียกใช้การค้นหาในฐานข้อมูลเพื่อสร้างการฝังสำหรับคำอธิบายร้านอาหารทั้ง 100 รายการ
  • โดยจะอัปเดตโค้ดส่วนหน้าเพื่อสร้างการฝังสำหรับคำค้นหาของผู้ใช้ และทำการค้นหาความคล้ายคลึงของเวกเตอร์โดยใช้ตัวดำเนินการระยะทางโคไซน์ (<=>)

การยืนยัน

ติดตั้งใช้งานโค้ดที่อัปเดตแล้วอีกครั้งใน Cloud Run

ในเทอร์มินัลแบบผสานรวมของ Antigravity ให้เรียกใช้คำสั่งการติดตั้งใช้งาน (แทนที่ตัวยึดตำแหน่งด้วยค่าจริง)

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

เมื่อการติดตั้งใช้งานเสร็จสมบูรณ์แล้ว ให้เปิด URL ของบริการในเบราว์เซอร์

ทดสอบการค้นหาเชิงความหมายโดยป้อนคำอธิบายภาษาที่เป็นธรรมชาติ เช่น

  • "a romantic dinner spot"
  • "หาอะไรกินด่วนๆ หลังไปเที่ยวคลับ"

โปรดสังเกตว่าระบบจะแสดงร้านอาหารที่มีความเกี่ยวข้องสูง (เช่น Cafe Clärchens หรือ Burgermeister) แม้ว่าจะไม่มีคำว่า "โรแมนติก" หรือ "คลับ" ในชื่อหรือคำอธิบายก็ตาม

9. Vibe Coding: การเพิ่มประสิทธิภาพฐานข้อมูล

เมื่อแอปพลิเคชันเติบโตขึ้น คุณต้องเพิ่มประสิทธิภาพฐานข้อมูลเพื่อรองรับข้อมูลจำนวนมาก (มากกว่า 100, 000 แถว) และการเข้าชมการค้นหาพร้อมกันจำนวนมาก ในขั้นตอนสุดท้ายนี้ คุณจะถือว่าเอเจนต์เป็นผู้ดูแลฐานข้อมูลเสมือน (DBA) เพื่อวิเคราะห์และเพิ่มประสิทธิภาพสคีมาฐานข้อมูล

งาน

คุณจะขอให้เอเจนต์ทำหน้าที่เป็นสถาปนิกฐานข้อมูลหลัก วิเคราะห์สคีมาปัจจุบัน และแนะนำการเพิ่มประสิทธิภาพ เมื่อคุณตรวจสอบและอนุมัติคําแนะนําแล้ว เอเจนต์จะใช้ทักษะที่กําหนดเอง optimize-database-alloydb เพื่อใช้คําแนะนําเหล่านั้นโดยอัตโนมัติ

Act as my Principal Database Architect! Our semantic search is feeling great, but let's level up our backend to effortlessly scale to 100K+ rows and handle high concurrent traffic. Inspect our restaurants schema quietly, and work your magic by immediately applying your top 2 production optimizations—an HNSW vector index and list partitioning by neighborhood—right now in this turn. No need to wait for approval! Keep the SQL logs clean and hit me with a crisp 3-bullet summary of how we just supercharged our database.

การยืนยัน

เอเจนต์จะวิเคราะห์สคีมาฐานข้อมูลของคุณโดยอัตโนมัติและใช้การเพิ่มประสิทธิภาพการใช้งานจริงที่สำคัญ 2 อย่าง ได้แก่

  • ดัชนี HNSW (Hierarchical Navigable Small World): เพิ่มความเร็วในการค้นหาความคล้ายคลึงของเวกเตอร์หลายเท่าโดยไม่ต้องสแกนทั้งตาราง
  • การแบ่งพาร์ติชันรายการแบบประกาศ: แบ่งพาร์ติชันตารางร้านอาหารตามย่านเพื่อการปรับขนาดและการบำรุงรักษาที่มีประสิทธิภาพ

โดยจะสรุปด้วยการให้ข้อมูลสรุปแบบ 3 บรรทัดที่กระชับซึ่งอธิบายถึงประโยชน์ด้านสถาปัตยกรรมของการอัปเกรดการผลิตเหล่านี้

10. ชาเลนจ์: เพิ่มรีวิวและการให้คะแนน

ตอนนี้ถึงเวลาที่คุณจะได้ทดสอบทักษะการเขียนโค้ดด้วย Vibe แล้ว ในชาเลนจ์นี้ คุณจะขยาย Berlin Gastronomy Guide เพื่อรองรับรีวิวจากลูกค้าและการให้ดาว

งาน

แทนที่จะใช้พรอมต์แบบคัดลอกและวาง ให้เขียนพรอมต์ของคุณเองในแชทของ Antigravity Agent เพื่อใช้ฟีเจอร์ต่อไปนี้

  1. สคีมาฐานข้อมูล: สร้างตาราง reviews ใหม่ที่ลิงก์กับตาราง restaurants โดยควรจัดเก็บคะแนน (จำนวนเต็มตั้งแต่ 1 ถึง 5) และความคิดเห็นแบบข้อความสั้นๆ
  2. การสร้างข้อมูล: สร้างรีวิวจากลูกค้าที่สมจริง 3-4 รายการสำหรับร้านอาหารแต่ละร้านจาก 100 ร้านในฐานข้อมูล
  3. การผสานรวมส่วนหน้า: อัปเดตส่วนหน้าของ Next.js เพื่อคำนวณและแสดงคะแนนดาวเฉลี่ย (เช่น ⭐⭐⭐⭐☆) ในการ์ดร้านอาหารแต่ละรายการ
  4. การกรอง: เพิ่มตัวกรองแบบเลื่อนลงที่ด้านบนของหน้าเพื่อกรองร้านอาหารตามคะแนน (เช่น "แสดงทั้งหมด" "4 ดาวขึ้นไป" "3 ดาวขึ้นไป")

การยืนยัน

เมื่อตัวแทนทำงานเสร็จแล้ว ให้ติดตั้งใช้งานแอปพลิเคชันไปยัง Cloud Run อีกครั้ง (แทนที่ตัวยึดตำแหน่งด้วยค่าจริง)

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

เมื่อการติดตั้งใช้งานเสร็จสมบูรณ์ ให้รีเฟรชเบราว์เซอร์และตรวจสอบว่าคุณให้คะแนนดาวในบัตรแล้ว

1433b3c589f08f2a.png

11. ผลลัพธ์

เมื่อทำตามขั้นตอนเสร็จแล้ว คุณก็สร้างและเพิ่มประสิทธิภาพแอปพลิเคชัน AI ยุคถัดไปที่ใช้ฐานข้อมูลโดยใช้ Vibe Coding ได้สำเร็จ ส่วนนี้จะไฮไลต์ความสามารถหลักด้านสถาปัตยกรรมที่คุณได้ติดตั้งใช้งาน

การผสานรวมฐานข้อมูลของเอเจนต์ (โปรโตคอลบริบทของโมเดล)

โดยปกติแล้ว การเขียนโค้ดฐานข้อมูลเป็นกระบวนการที่ต้องสลับบริบทระหว่าง IDE, เอกสารประกอบ และไคลเอ็นต์ฐานข้อมูลด้วยตนเอง

ใน Lab นี้ คุณได้ใช้ Model Context Protocol (MCP) Toolbox เพื่อเชื่อมช่องว่างนี้ การเปิดเผยการตรวจสอบสคีมาของฐานข้อมูลและการเรียกใช้ SQL เป็นเครื่องมือโดยตรงต่อเอเจนต์ AI ทำให้เอเจนต์สามารถทำสิ่งต่อไปนี้

  • ตรวจสอบข้อมูล CSV ดิบและออกแบบสคีมาฐานข้อมูล
  • สร้างและเรียกใช้ DDL เพื่อสร้างตาราง
  • เชื่อมต่อ Connection Pool ในแอปพลิเคชัน Next.js

ซึ่งแสดงให้เห็นว่า MCP ช่วยให้การพัฒนาฐานข้อมูลเป็นประสบการณ์การสนทนาที่รวดเร็ว ในขณะเดียวกันก็ช่วยให้นักพัฒนาแอปควบคุมได้อย่างเต็มที่ภายใน IDE

AI ในฐานข้อมูล (แพลตฟอร์มเอเจนต์และการค้นหาเชิงความหมาย)

แอปพลิเคชันของคุณใช้ประโยชน์จากการผสานรวมดั้งเดิมของ AlloyDB กับแพลตฟอร์มเอเจนต์ของ Google Cloud เพื่อสร้างการฝังเวกเตอร์ภายในฐานข้อมูลโดยตรงโดยใช้ SQL ดังนี้

  • การสร้างการฝังแบบออนไลน์: AlloyDB จะเรียกใช้โมเดล text-embedding-004 ในฐานข้อมูลผ่านฟังก์ชัน SQL แทนการดึงข้อมูลไปยังบริการ Python ภายนอก
  • การค้นหาเวกเตอร์เชิงความหมาย: การใช้ส่วนขยาย pgvector และโอเปอเรเตอร์ระยะทางโคไซน์ (<=>) ช่วยให้เอเจนต์จับคู่ "ฟีล" ของภาษาธรรมชาติของผู้ใช้ (เช่น "อาหารค่ำสุดโรแมนติก") กับการแสดงเวกเตอร์ที่ใกล้ที่สุดในแคตตาล็อกร้านอาหารได้ ซึ่งจะแสดงผลลัพธ์ที่เกี่ยวข้องเชิงความหมายในหน่วยมิลลิวินาที

การเพิ่มประสิทธิภาพฐานข้อมูลระดับการผลิต (HNSW และการแบ่งพาร์ติชัน)

เพื่อให้มั่นใจว่าแอปพลิเคชันจะปรับขนาดได้ถึง 100, 000 แถวขึ้นไปและรองรับการเข้าชมสูง คุณจึงทำหน้าที่เป็น DBA เสมือนเพื่อใช้การเพิ่มประสิทธิภาพฐานข้อมูลขั้นสูง 2 รายการ ดังนี้

  • ดัชนี HNSW (Hierarchical Navigable Small World): คุณสร้างดัชนี HNSW ในคอลัมน์เวกเตอร์ HNSW สร้างกราฟหลายเลเยอร์ที่ช่วยให้ค้นหาเพื่อนบ้านที่ใกล้ที่สุดโดยประมาณ (ANN) ได้อย่างรวดเร็วมากและมีการเรียกคืนสูง ซึ่งแตกต่างจากดัชนีแบบเรียบ
  • การแบ่งพาร์ติชันตารางแบบประกาศ: คุณแบ่งพาร์ติชันตารางร้านอาหารตามย่าน วิธีนี้ช่วยให้มั่นใจได้ว่าคําค้นหาที่กําหนดเป้าหมายไปยังพื้นที่หนึ่งๆ จะสแกนเฉพาะพาร์ติชันที่เกี่ยวข้องแทนที่จะสแกนทั้งตาราง ซึ่งจะช่วยลด I/O ของดิสก์และเวลาในการตอบสนองของคําค้นหาได้อย่างมาก

ในฐานะนักพัฒนาแอปพลิเคชัน เรามักหลีกเลี่ยงการกำหนดค่าฐานข้อมูลที่ซับซ้อน คณิตศาสตร์เวกเตอร์ และกลยุทธ์การจัดทำดัชนีเชิงลึก เนื่องจากต้องใช้ความเชี่ยวชาญเฉพาะทางของ DBA การใช้ประโยชน์จาก Vibe Coding ร่วมกับ IDE แบบเป็น Agent จะช่วยลดช่องว่างนี้ได้ ตอนนี้เราสามารถออกแบบ สร้าง และเพิ่มประสิทธิภาพแอปพลิเคชันฐานข้อมูลระดับการผลิตได้อย่างมั่นใจโดยใช้ภาษาธรรมชาติ ซึ่งช่วยเร่งรอบการพัฒนาของเราได้อย่างมาก และช่วยให้เรามุ่งเน้นไปที่สิ่งที่สำคัญที่สุด นั่นคือการสร้างประสบการณ์การใช้งานที่ยอดเยี่ยมให้กับผู้ใช้

12. ล้าง

โปรดทำตามขั้นตอนต่อไปนี้เพื่อเลี่ยงไม่ให้เกิดการเรียกเก็บเงินกับบัญชี Google Cloud สำหรับทรัพยากรที่ใช้ใน Lab นี้

  1. ใน Google Cloud Console ให้ไปที่หน้าจัดการทรัพยากร
  2. ในรายการโปรเจ็กต์ ให้เลือกโปรเจ็กต์ที่ต้องการลบ แล้วคลิกลบ
  3. ในกล่องโต้ตอบ ให้พิมพ์รหัสโปรเจ็กต์ แล้วคลิกปิดเพื่อลบโปรเจ็กต์

13. ขอแสดงความยินดี

คุณสร้างและทําให้แอปพลิเคชันที่ทำงานด้วยระบบ AI ซึ่งอิงตามข้อมูลใช้งานได้โดยใช้ Vibe Coding เรียบร้อยแล้ว

ในแล็บนี้ คุณจะได้ทำสิ่งต่อไปนี้

  • จัดสรรฐานข้อมูล AlloyDB ที่มีการเข้าถึงทั้ง IP ส่วนตัวและสาธารณะ
  • เชื่อมต่อ Antigravity IDE กับฐานข้อมูลโดยตรงโดยใช้ Model Context Protocol (MCP) Toolbox
  • ใช้ภาษาที่เป็นธรรมชาติเพื่อส่งแคตตาล็อก CSV, เชื่อมต่อส่วนหน้าของ Next.js กับฐานข้อมูล และติดตั้งใช้งานใน Cloud Run
  • เปิดใช้การผสานรวมแพลตฟอร์มเอเจนต์ในฐานข้อมูลเพื่อสร้างการฝังเวกเตอร์และทำการค้นหาเชิงความหมาย
  • ทำหน้าที่เป็น DBA เสมือนเพื่อเพิ่มประสิทธิภาพฐานข้อมูลสำหรับการปรับขนาดการผลิตโดยใช้การจัดทำดัชนี HNSW และการแบ่งตาราง

ทั้งหมดนี้ทำได้ผ่านการสนทนาที่เป็นธรรมชาติกับ AI Agent โดยไม่ต้องเขียน SQL ด้วยตนเองแม้แต่บรรทัดเดียวหรือเปิดไคลเอ็นต์ฐานข้อมูลภายนอก

ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบของผลิตภัณฑ์