สร้าง Agent "คนขายของต่อราคา" ของคุณเองด้วย Gemini 3 และ ADK

1. ภาพรวม

ในโค้ดแล็บนี้ เราจะมาสร้างอะไรสนุกๆ กัน ลองนึกภาพตลาดดิจิทัลที่เอเจนต์ AI ของคุณเป็นเจ้าของร้านที่ฉลาดและมีไหวพริบที่สุด

พบกับ Raju พนักงานร้านค้า AI คนใหม่ของคุณ เขาขายอาร์ติแฟกต์ดิจิทัลที่น่าทึ่ง แต่คุณต้องต่อรองกับเขาเพื่อซื้อ

เราจะใช้ Gemini 3 (สมอง), ADK (Agent Development Kit - ร่างกาย) และ Google Cloud Run (ที่ตั้งร้านค้า) เพื่อสร้างตัวตนของ Raju

Raju the Shopkeeper

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

เราจะสร้างทั้งสแต็กสำหรับแอปพลิเคชันแบบเอเจนต์ยุคใหม่ ดังนี้

สถาปัตยกรรมของเอเจนต์ Raju

  • ร้านค้า (Cloud Run): ที่อยู่ของแอปบนอินเทอร์เน็ต
  • สมอง (Gemini 3): ความอัจฉริยะที่ขับเคลื่อน Raju
  • ร่างกาย (ADK): กรอบงานที่เชื่อมต่อสมองกับเครื่องมือ
  • สินค้าคงคลัง (เครื่องมือ): โค้ด Python ที่ Raju ใช้เพื่อตรวจสอบสต็อก
  • หน้าร้าน (UI): อินเทอร์เฟซที่ลูกค้าเห็น

คุณจะได้เรียนรู้วิธีต่อไปนี้

  • ตั้งค่า "Digital Dukaan" (สภาพแวดล้อม Google Cloud)
  • "จ้าง" Raju (รับคีย์ Gemini 3 API)
  • สอนให้ราจูต่อราคา (คำสั่งระบบและตัวตน)
  • มอบสินค้าคงคลัง (เครื่องมือ ADK) ให้กับ Raju
  • สร้างหน้าร้าน (UI ส่วนหน้า)
  • เปิดให้บริการ (ติดตั้งใช้งานใน Cloud Run)

สิ่งที่ต้องมี

  • โปรเจ็กต์ Google Cloud
  • อารมณ์ขัน (สำหรับการต่อรอง)
  • มีความรู้พื้นฐานเกี่ยวกับ Python

2. การตั้งค่า Dukaan (โปรเจ็กต์ที่อยู่ในระบบคลาวด์)

ก่อนจะสร้าง Raju เราต้องมีที่ตั้งร้านค้า ในระบบคลาวด์ นั่นหมายถึงโปรเจ็กต์ที่มีบัญชีสำหรับการเรียกเก็บเงิน

ขั้นตอนที่ 1: เปิดใช้งานการเรียกเก็บเงิน

ขั้นตอนที่ 1: เปิดใช้งานการเรียกเก็บเงิน

  1. เปิดลิงก์การแลกรับข้อเสนอในหน้าต่างที่ไม่ระบุตัวตน
  2. ลงชื่อเข้าใช้ด้วยบัญชี Gmail ส่วนตัว
  3. คลิกปุ่มเพื่อเข้าถึงเครดิต
  4. ยืนยันอีเมลและยอมรับข้อกำหนดเพื่อเปิดใช้งานช่วงทดลองใช้

ขั้นตอนที่ 2: สร้างโปรเจ็กต์

ขั้นตอนที่ 2: สร้างโปรเจ็กต์

  1. ไปที่หน้าสร้างโปรเจ็กต์
  2. ป้อนชื่อโปรเจ็กต์ที่ไม่ซ้ำ (เช่น raju-shop-agent)
  3. ในเมนูแบบเลื่อนลง "บัญชีสำหรับการเรียกเก็บเงิน" ให้เลือกบัญชีสำหรับการเรียกเก็บเงินช่วงทดลองใช้
  4. คลิกสร้าง แล้วรอให้โปรเจ็กต์พร้อมใช้งาน

ขั้นตอนที่ 3: ยืนยันลิงก์การเรียกเก็บเงิน

  1. ไปที่หน้าบัญชีสำหรับการเรียกเก็บเงินที่ลิงก์
  2. หากเห็นตัวเลือก "ลิงก์บัญชีสำหรับการเรียกเก็บเงิน" ให้คลิกตัวเลือกดังกล่าว
  3. ตรวจสอบว่าได้เลือกบัญชีสำหรับการเรียกเก็บเงินช่วงทดลองใช้แล้ว
  4. ตอนนี้คุณก็พร้อมสร้างแล้ว

สรุป

ในขั้นตอนนี้ คุณจะได้ตั้งค่าโปรเจ็กต์และบัญชีสำหรับการเรียกเก็บเงินของ Google Cloud ซึ่งเป็นการสร้างรากฐานสำหรับแอปพลิเคชัน

จากนั้นเราจะตั้งค่าพื้นที่ทำงานที่คุณจะสร้างโค้ดในการเตรียมสภาพแวดล้อม

3. การสร้างแผงขาย (การตั้งค่าสภาพแวดล้อม)

คุณต้องมีที่สำหรับเรียกใช้โค้ด คุณมี 2 ตัวเลือกดังนี้

Cloud Shell กับเทอร์มินัลในเครื่อง

Cloud Shell เป็นเทอร์มินัลบนเบราว์เซอร์ที่ติดตั้งทุกอย่างที่คุณต้องการไว้ล่วงหน้า (Python, gcloud CLI, git) มีพื้นที่เก็บข้อมูลถาวรและใช้งานได้จากทุกที่

1. เปิดใช้งาน Cloud Shell

คลิกไอคอน "เปิดใช้งาน Cloud Shell" (สัญลักษณ์เทอร์มินัล) ที่ด้านขวาบนของส่วนหัวของ Google Cloud Console

เปิดใช้งาน Cloud Shell

ตอนนี้ Cloud Shell จะเริ่มต้น ซึ่งรวมถึง

  • การให้สิทธิ์: หากได้รับแจ้ง ให้คลิกให้สิทธิ์เพื่อให้ Cloud Shell เรียกใช้ Google Cloud APIs ในนามของคุณได้
  • การจัดสรร: Cloud Shell จะจัดสรรเครื่องเสมือนชั่วคราวสำหรับเซสชันของคุณ
  • การเชื่อมต่อ: จากนั้นจะเชื่อมต่อกับ VM นี้ กระบวนการทั้งหมดนี้อาจใช้เวลา 1-2 นาที

รอจนกว่าจะเห็นพรอมต์คำสั่ง (user@cloudshell:~ $)

2. ยืนยันการตั้งค่าโปรเจ็กต์

โดยปกติแล้ว Cloud Shell จะเลือกโปรเจ็กต์ปัจจุบันโดยอัตโนมัติ โปรดยืนยันเพื่อความปลอดภัย

gcloud config get-value project

หากไม่ได้รหัสโปรเจ็กต์ (raju-shop-agent) ให้ตั้งค่าด้วยตนเองดังนี้

gcloud config set project raju-shop-agent

ตัวเลือกที่ 2: เทอร์มินัลในเครื่อง

หากต้องการใช้เทอร์มินัลของแล็ปท็อป (iTerm, PowerShell ฯลฯ) คุณจะต้องตั้งค่าเพิ่มเติมอีกเล็กน้อย

1. ติดตั้งข้อกำหนดเบื้องต้น

ตรวจสอบว่าคุณได้ติดตั้งสิ่งต่อไปนี้

2. เข้าสู่ระบบและกำหนดค่า gcloud

เริ่มต้น Google Cloud CLI และลงชื่อเข้าใช้บัญชี

gcloud auth login

ตั้งค่าโปรเจ็กต์ (แทนที่ raju-shop-agent ด้วยรหัสโปรเจ็กต์จริง)

gcloud config set project raju-shop-agent

ตั้งค่าข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชัน (ซึ่งจะช่วยให้เครื่องมือในเครื่องสื่อสารกับ Google Cloud ได้)

gcloud auth application-default login

สรุป

ในขั้นตอนนี้ คุณได้เลือกสภาพแวดล้อมในการพัฒนา (Cloud Shell หรือ Local) และกำหนดค่าแล้ว

จากนั้นเราจะมาดูเครื่องมือที่จะช่วยให้เราสร้างแอปได้เร็วขึ้นในการประชุม Gemini CLI

4. พบกับผู้ช่วยของคุณ (Gemini CLI)

ตอนนี้เราขอแนะนำเพื่อนใหม่ที่จะช่วยคุณพัฒนา AI นั่นก็คือ Gemini CLI

ข้อมูลเบื้องต้นเกี่ยวกับ Gemini CLI

Gemini CLI เป็นอินเทอร์เฟซบรรทัดคำสั่งที่มีประสิทธิภาพซึ่งช่วยให้คุณทำสิ่งต่อไปนี้ได้

  • เวิร์กโฟลว์อัตโนมัติ: จัดการโปรเจ็กต์ AI อย่างมีประสิทธิภาพ
  • การสร้างโค้ด: สร้างโค้ด, UI และแม้แต่ทั้งไฟล์
  • ระบบนิเวศของส่วนขยาย: ขยายขีดความสามารถด้วยส่วนขยายต่างๆ (เช่น ส่วนขยาย Cloud Run ที่เราจะใช้ในภายหลัง)

1. ติดตั้ง Gemini CLI (เทอร์มินัลในเครื่องเท่านั้น)

หากคุณใช้เทอร์มินัลแล็ปท็อปในเครื่อง ให้ทำดังนี้

npm install -g @google/gemini-cli

หากคุณใช้ Google Cloud Shell

Gemini CLI ติดตั้งไว้ล่วงหน้าใน Cloud Shell คุณจึงไม่ต้องติดตั้งอะไรเลย

2. เปิดและตรวจสอบสิทธิ์

เปิดหน้าต่างเทอร์มินัลใหม่ (หรือแท็บ) ใน Cloud Shell (หรือเทอร์มินัลในเครื่อง) แล้วเปิดใช้ Gemini CLI

gemini

การตั้งค่าเมื่อเรียกใช้เป็นครั้งแรก: หากคุณเรียกใช้เป็นครั้งแรก CLI จะแนะนำขั้นตอนการตั้งค่าอย่างรวดเร็วให้คุณ

  • การตรวจสอบสิทธิ์: ระบบจะขอให้คุณลงชื่อเข้าใช้ เราขอแนะนำให้ใช้บัญชี Gmail ส่วนตัวเพื่อใช้ประโยชน์จากโควต้าฟรีที่ให้มาอย่างจุใจสำหรับโมเดล Gemini
  • บริบทของโปรเจ็กต์: แนวทางปฏิบัติแนะนำคือการเรียกใช้ gemini จากภายในโฟลเดอร์โปรเจ็กต์เพื่อให้เข้าใจบริบทของโค้ด (เนื่องจากเรายังไม่ได้สร้างโฟลเดอร์ การเรียกใช้จากไดเรกทอรีหน้าแรกจึงใช้ได้ในตอนนี้)

3. ทักทาย

เมื่อเห็นgemini>ข้อความแจ้ง ให้ลองทดสอบเพื่อให้แน่ใจว่าสมองของคุณเชื่อมต่ออยู่

Hi

คุณควรได้รับการตอบกลับที่เป็นมิตรจากโมเดล

4. คำสั่งที่จำเป็น

  • /quit: พิมพ์คำสั่งนี้เพื่อออกจาก Gemini CLI และกลับไปที่เทอร์มินัลมาตรฐาน
  • /help: ดูรายการคำสั่งที่มีทั้งหมด

สรุป

ในขั้นตอนนี้ คุณได้ติดตั้ง ตรวจสอบสิทธิ์ และยืนยัน Gemini CLI แล้ว

จากนั้นเราจะใช้ Agent Development Kit (ADK) เพื่อสร้างโครงสร้างของร้านค้าใน Opening Shop (The Code)

5. การจัดชั้นวาง (การตั้งค่าโปรเจ็กต์)

เราจะไม่สร้างตั้งแต่ต้น (เจ้าของร้านค้าอัจฉริยะประหยัดเวลา) เราจะใช้ Agent Development Kit (ADK)

ADK คืออะไร

การจัดชั้นวาง

ADK คือ "ระบบจัดการร้านค้า" ของคุณ ซึ่งเป็นเฟรมเวิร์กที่ยืดหยุ่นซึ่งจัดการสิ่งต่อไปนี้

  • การประสานงาน: การจัดการงานที่ซับซ้อน (เช่น ราจูตรวจสอบสินค้าคงคลังขณะพูดคุยกับลูกค้า)
  • การจัดการสถานะ: จดจำชื่อลูกค้าและสิ่งที่ลูกค้าถามเมื่อ 5 นาทีที่แล้ว
  • เครื่องมือ: การเชื่อมต่อกับระบบภายนอก (เช่น ฐานข้อมูลสินค้าคงคลัง)

เราจะใช้แพ็กเกจเริ่มต้นสำหรับเอเจนต์เพื่อตั้งค่า "Dukaan" ที่พร้อมใช้งานจริงได้ทันที ซึ่งช่วยให้เรามีรากฐานที่ปลอดภัยและปรับขนาดได้ จึงมุ่งเน้นไปที่การขายได้

ในเทอร์มินัล Cloud Shell (หรือเทอร์มินัลในเครื่อง) ให้เรียกใช้คำสั่งนี้เพื่อสร้างเอเจนต์

uvx agent-starter-pack create raju-shop

CLI จะถามคำถาม 2-3 ข้อเพื่อกำหนดค่าร้านค้า เลือกตัวเลือกต่อไปนี้ (พิมพ์หมายเลขแล้วกด Enter)

  1. ประเภทตัวแทน: เลือก 1 (adk_base - ตัวแทน ReAct พื้นฐาน)
  2. เป้าหมายการติดตั้งใช้งาน: เลือก 2 (Cloud Run - การเรียกใช้คอนเทนเนอร์แบบไม่ใช้เซิร์ฟเวอร์)
  3. ประเภทเซสชัน: เลือก 1 (In-memory session - ง่ายและรวดเร็ว)
  4. โปรแกรมเรียกใช้ CI/CD: เลือก 3 (Skip - เราจะติดตั้งใช้งานด้วยตนเองในตอนนี้)

รอให้กระบวนการเสร็จสมบูรณ์ เมื่อเสร็จแล้ว ให้ไปที่ไดเรกทอรีร้านค้าและติดตั้งทรัพยากร Dependency ดังนี้

cd raju-shop
make install
source .venv/bin/activate

สำรวจและกำหนดค่า Agent

เมื่อตั้งค่าแพ็กเกจเริ่มต้นแล้ว ให้ตรวจสอบโครงสร้าง

1. ตรวจสอบโครงสร้างโฟลเดอร์

เรียกใช้คำสั่งต่อไปนี้เพื่อดูว่าร้านค้าของคุณจัดระเบียบอย่างไร

tree .

คุณควรเห็นโครงสร้างดังนี้

.
├── app
│   ├── __init__.py
│   ├── agent.py
│   ├── app_utils
│   │   ├── telemetry.py
│   │   └── typing.py
│   └── fast_api_app.py
├── Dockerfile
├── GEMINI.md
├── Makefile
├── pyproject.toml
├── README.md
├── tests
│   ├── integration
│   │   ├── test_agent.py
│   │   └── test_server_e2e.py
│   └── unit
│       └── test_dummy.py
└── uv.lock

ไฟล์ที่สำคัญที่สุดคือ app/agent.py นี่คือที่ที่สมองของราจูอาศัยอยู่

2. ดูโค้ด

เปิด app/agent.py ใน Cloud Shell Editor (หรือ IDE ในเครื่อง) แล้วดูอย่างรวดเร็ว

  • root_agent = Agent(...): นี่คือสิ่งที่กำหนด AI ของคุณ โดยมีทั้งmodel (สมอง) และtools (มือ)
  • เครื่องมือ: คุณจะเห็นฟังก์ชัน Python เช่น get_weather เครื่องมือเหล่านี้เป็นเครื่องมือที่ตัวแทนใช้ได้
  • app = App(...): ซึ่งจะห่อหุ้มเอเจนต์ของคุณไว้ในเว็บเซิร์ฟเวอร์เพื่อให้เราสื่อสารกับเอเจนต์ได้

ทดสอบในเครื่อง

ในเทอร์มินัล Cloud Shell (หรือเทอร์มินัลในเครื่อง) ให้เรียกใช้เอเจนต์

adk web

คำสั่งนี้จะเริ่มเว็บเซิร์ฟเวอร์ในเครื่องบนพอร์ต 8000

หากใช้ Cloud Shell ให้ทำดังนี้

  1. คลิกปุ่มตัวอย่างเว็บ (ด้านขวาบน มีลักษณะคล้ายดวงตา)
  2. เลือกเปลี่ยนพอร์ต
  3. ป้อน 8000 แล้วคลิกเปลี่ยนและแสดงตัวอย่าง

หากใช้ Local Terminal ให้ทำดังนี้

  1. เปิดเบราว์เซอร์ แล้วไปที่ http://localhost:8000

เมื่อ UI เปิดขึ้น ให้ทำดังนี้

  1. เลือก "แอป": ในเมนูแบบเลื่อนลงด้านซ้ายบน ให้เลือกเอเจนต์ชื่อ app (ไม่สนใจ root_agent หรือ test_agent หากปรากฏ)
  2. ทักทาย: พิมพ์ "สวัสดี" แล้วดูว่าแชทบอทตอบกลับหรือไม่

กด Ctrl+C ในเทอร์มินัลเพื่อหยุดเซิร์ฟเวอร์ adk web เมื่อเสร็จแล้ว

สรุป

ในขั้นตอนนี้ คุณได้สร้างโครงร่างโปรเจ็กต์ กำหนดค่าสำหรับ Gemini API และเรียกใช้เอเจนต์แรกในเครื่องเรียบร้อยแล้ว

จากนั้นเราจะกำหนดบุคลิกและชื่อให้กับเอเจนต์ในการฝึก Raju (บุคลิก)

6. การฝึก Raju (ตัวตน)

ตอนนี้เอเจนต์ยังไม่น่าสนใจ เราจะสร้างบุคลิกให้เขา

การบูตตัวตนของ Raju

เราจะบอก Gemini ว่าต้องการอะไรแทนที่จะเขียนโค้ด

1. กำหนดตัวตน

เรียกใช้คำสั่งนี้ในเทอร์มินัลเพื่อ "สอน" Raju ว่าเขาคือใคร

gemini "In agent.py, update the root_agent instruction. You are Raju, a bargaining shopkeeper in a digital bazaar. You sell: Brass Lamp (50 coins), Silk Scarf (500 coins). Your goal is to sell high and be funny. Speak with an Indian-English flair."

2. ยืนยันรหัส

เปิด app/agent.py คุณจะเห็นว่า Gemini เขียนคำสั่งของระบบให้คุณแล้ว

3. ทดสอบในเครื่อง

แชทกับ Raju เลย ในเทอร์มินัล Cloud Shell (หรือเทอร์มินัลในเครื่อง) ให้ทำดังนี้

adk web

เปิด UI เว็บ (พอร์ตแสดงตัวอย่างเว็บ 8000 หรือ localhost:8000) เลือกเอเจนต์แอป แล้วลองใช้พรอมต์ต่อไปนี้

  • "ฉันอยากได้โคมไฟทองเหลือง แต่ 50 เหรียญมันแพงไป!"
  • "คุณขายอะไรบ้าง เพื่อน"

ดูปฏิกิริยาของเขา เขาควรจะตลก ดราม่า แต่ไม่ยอมขายถูกเกินไป

สรุป

ในขั้นตอนนี้ คุณได้ปรับแต่งคำสั่งของระบบของเอเจนต์เพื่อสร้าง "Raju" ซึ่งเป็นเจ้าของร้านค้าที่ต่อรองเก่งและมีบุคลิกที่เป็นเอกลักษณ์

จากนั้นเราจะให้สิทธิ์ Raju ในการตรวจสอบสต็อกจริงในสินค้าคงคลัง (เครื่องมือการเพิ่ม)

7. สินค้าคงคลัง (การเพิ่มเครื่องมือ)

ราจูต้องการทราบว่าเขามีสินค้าใดบ้างที่พร้อมจำหน่าย เราจะให้ "ฐานข้อมูล" และเครื่องมือตรวจสอบแก่เขา

Raju Level Up

1. สร้างเครื่องมือ

เรียกใช้คำสั่งเดียวนี้เพื่อสร้างสินค้าคงคลัง เครื่องมือ และเชื่อมต่อกับ Raju

gemini "In agent.py, create a dictionary INVENTORY with items: Brass Lamp (price 50, stock 5), Silk Scarf (price 500, stock 2), Taj Mahal (price 2000, stock 0). Then create a tool function check_inventory(item_name) that checks this dict. Finally, update the root_agent to use this tool and remove the default weather tools."

2. ยืนยัน Magic

เปิด app/agent.py อีกครั้ง คุณจะเห็นว่า Gemini มีสิ่งต่อไปนี้

  1. สร้างพจนานุกรม INVENTORY
  2. เขียนฟังก์ชัน check_inventory Python
  3. อัปเดตtools=[...] รายการในคำจำกัดความของเอเจนต์

3. ทดสอบพื้นที่โฆษณา

  1. รีสตาร์ทเซิร์ฟเวอร์ (Ctrl+C แล้ว adk web)
  2. ถาม Raju:
    • "คุณมีทัชมาฮาลไหม" (เขาควรตอบว่าไม่มี เนื่องจากสต็อกเป็น 0)
    • "ผ้าพันคอไหมราคาเท่าไหร่" (เขาควรตรวจสอบราคาจริง)

สรุป

ในขั้นตอนนี้ คุณได้ติดตั้งใช้งานcheck_inventoryเครื่องมือ นำความรกเริ่มต้นออก และเชื่อมต่อเครื่องมือกับเอเจนต์

จากนั้นเราจะนำ Raju ไปยังระบบคลาวด์ใน Raju's Shop Goes Live (การติดตั้งใช้งานแบ็กเอนด์)

8. Raju's Shop Goes Live (การติดตั้งใช้งานแบ็กเอนด์)

ได้เวลาเปิดตัวสู่โลกแล้ว ก่อนที่จะสร้างหน้าร้าน เราจะนำสมองและสินค้าคงคลังของราจู (ตัวแทนของคุณ) ไปใช้งานในระบบคลาวด์

Raju Goes Live

สำคัญ: การจัดการเทอร์มินัล

คุณอาจมี adk web ที่ทำงานอยู่ในเทอร์มินัลปัจจุบันจากขั้นตอนก่อนหน้า

  • เปิดไว้หากต้องการทดสอบในเครื่องต่อไป
  • เปิดหน้าต่าง/แท็บเทอร์มินัลใหม่สำหรับขั้นตอนการติดตั้งใช้งานที่จะตามมา
  • หมายเหตุ: ทุกครั้งที่เปลี่ยน agent.py คุณต้องหยุด (Ctrl+C) และรีสตาร์ทadk webเพื่อให้การเปลี่ยนแปลงมีผล

1. เตรียม Gemini CLI

ในหน้าต่างเทอร์มินัลใหม่ ให้ทำดังนี้

  1. ตรวจสอบว่าคุณอยู่ใน Gemini CLI แล้วหรือยัง (มองหาพรอมต์ gemini>)
  2. หากคุณใช้ ให้พิมพ์ /quit เพื่อออกไปยังเชลล์มาตรฐาน
  3. ตรวจสอบว่าคุณอยู่ในโฟลเดอร์โปรเจ็กต์ 
    cd raju-shop

2. ติดตั้งส่วนขยาย Cloud Run

ติดตั้งส่วนขยาย Cloud Run สำหรับ Gemini CLI ในเทอร์มินัล Cloud Shell (หรือเทอร์มินัลในเครื่อง)

gemini extensions install https://github.com/GoogleCloudPlatform/cloud-run-mcp

3. เปิดใช้ Gemini CLI อีกครั้ง

เปิดใช้ Gemini CLI อีกครั้งเพื่อใช้ส่วนขยายใหม่

gemini

คุณควรเห็นพรอมต์ Gemini CLI

4. ทําให้ Agent ใช้งานได้

คุณใช้ส่วนขยาย Gemini CLI ได้ 2 วิธีดังนี้

ตัวเลือกที่ 1: คำสั่งเครื่องหมายทับ (ด้วยตนเอง) คุณสามารถพิมพ์คำสั่งและ Flag อย่างชัดเจนได้ดังนี้

/deploy --source . --name raju-agent --region us-central1 --allow-unauthenticated

ตัวเลือกที่ 2: ภาษาธรรมชาติ (แนะนำ) วิธีนี้ง่ายและมีประสิทธิภาพมากกว่า คุณเพียงแค่ขอให้ Gemini ทำสิ่งนั้นให้ แล้ว Gemini จะใช้ MCP Server เพื่อเรียกใช้เครื่องมือที่เหมาะสม

ลองวางพรอมต์นี้ลงใน Gemini CLI

Deploy this agent app to cloud run on google cloud using the cloud-run MCP server.
Use project raju-shop-agent in us-central1 region.
Name the service raju-agent.
IMPORTANT: Make sure to allow unauthenticated invocations so my frontend can talk to it.

CLI อาจขอให้ยืนยันการใช้เครื่องมือ cloud-run กด Enter (หรือพิมพ์ y) เพื่ออนุมัติ

รอให้ระบบทำงาน: ขั้นตอนนี้จะใช้เวลา 2-3 นาที เมื่อดำเนินการเสร็จแล้ว คุณจะเห็นข้อความว่าดำเนินการสำเร็จดังนี้

✦ I've successfully deployed your agent app to Cloud Run.

  Service Details:
   * Service Name: raju-agent
   * Project: raju-shop-agent
   * Region: us-central1
   * URL: https://raju-agent-xyz123-uc.a.run.app
   * Console: View in Google Cloud Console (...)

5. ยืนยันการติดตั้งใช้งาน

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

การตรวจสอบเบราว์เซอร์ (ใช้งานได้ไหม) วาง URL ลงในเบราว์เซอร์

  • สำเร็จ: คุณควรเห็นเอกสารประกอบ FastAPI (Swagger UI) หรือหน้า Landing Page ของ ADK ทั่วไป ซึ่งเป็นการยืนยันว่าบริการ Cloud Run ทำงานและเข้าถึงได้
  • ไม่สำเร็จ: หากได้รับข้อความ 403 Forbidden แสดงว่าคุณอาจลืมอนุญาต "การเรียกที่ไม่ผ่านการตรวจสอบสิทธิ์" ในพรอมต์การติดตั้งใช้งาน

เราจะทดสอบตรรกะการต่อรองราคาจริงในขั้นตอนถัดไปโดยการสร้างส่วนหน้าให้เหมาะสม

สรุป

ในขั้นตอนนี้ คุณได้ติดตั้งใช้งานแบ็กเอนด์ของเอเจนต์ใน Google Cloud Run โดยใช้ส่วนขยาย Gemini CLI ซึ่งทำให้เข้าถึงได้โดยใช้ URL สาธารณะ

จากนั้นเราจะสร้างหน้าร้านที่สวยงามเพื่อให้ลูกค้าพูดคุยกับ Raju ได้ในการสร้างหน้าร้าน (UI ส่วนหน้า)

9. การตกแต่งร้านค้า (UI ของฟรอนท์เอนด์)

เทอร์มินัลข้อความน่าเบื่อ เราต้องการให้หน้าร้านดูน่าสนใจ

ภาพจำลอง UI ของ Shop

วิธีทำงานของ ADK API

หากต้องการสร้าง UI ที่กำหนดเอง คุณต้องเข้าใจวิธีพูดคุยกับแบ็กเอนด์ของเอเจนต์ โดยมีขั้นตอน 2 ขั้นตอนดังนี้

  1. เริ่มต้นเซสชัน: ก่อนแชท คุณต้องสร้างรหัสเซสชัน (เช่น รถเข็นช็อปปิ้ง)
    • POST /apps/app/users/{user_id}/sessions/{session_id}
  2. ส่งข้อความ: หากต้องการพูด ให้ส่งข้อความไปยังปลายทางการเรียกใช้
    • POST /run (เพย์โหลดประกอบด้วย appName, userId, sessionId และ text)
  3. ดูข้อมูลเพิ่มเติม: ดูเอกสารประกอบของ ADK Runtime API และเอกสารอ้างอิง Python API

เราจะใช้ตรรกะนี้ในการสร้างส่วนหน้า

คุณสร้างอินเทอร์เฟซนี้ได้ 2 วิธี ดังนี้

ตัวเลือกที่ 1: Google Antigravity (แนะนำ - เฉพาะในพื้นที่)

หากคุณทำงานในเครื่องภายใน Google Antigravity จะมอบประสบการณ์การใช้งานที่ดีที่สุด เป็น IDE ที่สร้างขึ้นโดยใช้ AI ซึ่งช่วยให้คุณ "เขียนโค้ดตามฟีล" ทั้ง UI ได้

1. ดาวน์โหลดและติดตั้ง

ดาวน์โหลดโปรแกรมติดตั้งสำหรับระบบปฏิบัติการของคุณจากหน้าดาวน์โหลด Google Antigravity แล้วติดตั้ง

2. เปิด Workspace

เปิด Antigravity เปิดโฟลเดอร์ raju-shop ในฐานะ Workspace ซึ่งจะช่วยให้ AI เข้าใจบริบทเกี่ยวกับโปรเจ็กต์ทั้งหมด

3. สร้าง UI ด้วย Agent Manager

แทนที่จะเขียนโค้ดทีละบรรทัด เราจะขอให้เอเจนต์ AI ทำแทนเราโดยใช้Agent Manager

  1. ค้นหาอินเทอร์เฟซแชทของ Agent Manager (โดยปกติจะอยู่ทางด้านขวา)
  2. วางพรอมต์ต่อไปนี้ลงในแชท
Create a single file HTML chat interface named `index.html`. It should have a colorful header that says 'Raju's Royal Artifacts'. It should look like an Indian market stall with orange and pink colors.

**Backend Integration:**
The chat should send messages to my deployed agent at: <YOUR_DEPLOYED_AGENT_URL>

**API Logic:**
1. **On Load:** Generate a random userId and sessionId. Call `POST /apps/app/users/{userId}/sessions/{sessionId}` to initialize.
2. **On Send:** Call `POST /run` with a JSON payload containing `appName: "app"`, `userId`, `sessionId`, and `newMessage: { role: "user", parts: [{ text: userInput }] }`.
3. **Display:** Show the user's message and the agent's response (from `content.parts[0].text`).

(อย่าลืมแทนที่ URL ตัวยึดตำแหน่งด้วย URL บริการจริงจากขั้นตอนการติดตั้งใช้งาน)

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

4. ทดสอบหน้าร้าน

Google Antigravity มีความสามารถในการแสดงตัวอย่างในตัว คลิกปุ่ม "แสดงตัวอย่าง" (มักจะเป็นไอคอนรูปดวงตา) เพื่อดูหน้าร้านค้าแบบเรียลไทม์ หรือจะแสดงในเครื่องด้วย python3 -m http.server 8000 ก็ได้

ตัวเลือกที่ 2: Gemini CLI (ใช้ได้กับ Cloud Shell)

หากอยู่ใน Cloud Shell คุณสามารถใช้ Gemini CLI ที่เชื่อถือได้เพื่อสร้างส่วนหน้าได้ในไม่กี่วินาที

เรียกใช้คำสั่งนี้ในเทอร์มินัล

gemini "Create a single file HTML chat interface named index.html. Header: 'Raju\'s Royal Artifacts', Indian market theme (orange/pink). Backend: <YOUR_DEPLOYED_AGENT_URL>. Logic: On load, generate random user/session IDs and POST to /apps/app/users/{uid}/sessions/{sid}. On chat, POST to /run with appName='app', userId, sessionId, and newMessage structure. Parse the JSON response to show the agent text." > index.html

(อย่าลืมแทนที่

ด้วย URL ของ Cloud Run จริง)

สรุป

ในขั้นตอนนี้ คุณใช้ Google Antigravity เพื่อ "vibe code" ฟรอนต์เอนด์ HTML ที่กำหนดเองซึ่งเชื่อมต่อกับแบ็กเอนด์ของตัวแทนแบบเรียลไทม์

จากนั้นเราจะทำให้ภาพสมบูรณ์ด้วยการโฮสต์หน้าร้านนี้บนเว็บในหัวข้อการเปิดตัวหน้าร้าน

10. เปิดตัวอย่างยิ่งใหญ่ (การติดตั้งใช้งานส่วนหน้า)

ราจูออนไลน์ (แบ็กเอนด์) แต่ร้านค้าของเขาต้องมีที่อยู่สาธารณะ (ฟรอนต์เอนด์) ขอให้ Google Antigravity ทำให้ UI ของเราใช้งานได้ในระบบคลาวด์

การติดตั้งใช้งานฟรอนท์เอนด์

1. ขอให้ผู้จัดการเอเจนต์ทำให้ใช้งานได้

เราไม่จำเป็นต้องออกจาก IDE เพียงขอให้ผู้จัดการตัวแทนจัดการการติดตั้งใช้งานให้คุณ

วางพรอมต์นี้ลงในแชท

"ติดตั้งใช้งาน index.html ของฉันเป็นเว็บไซต์แบบคงที่ใน Google Cloud Run ตั้งชื่อบริการ raju-shop-frontend ตรวจสอบว่าเข้าถึงได้แบบสาธารณะ"

2. ดูความมหัศจรรย์

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

  1. สร้าง Dockerfile หรือการกำหนดค่าสำหรับการแสดงไฟล์แบบคงที่ (เช่น การใช้ nginx หรือ Python)
  2. สร้างอิมเมจคอนเทนเนอร์
  3. เรียกใช้คำสั่ง gcloud run deploy ให้คุณ

3. ไปที่ร้านค้า

เมื่อตัวแทนดำเนินการเสร็จแล้ว จะให้ URL แก่คุณ (เช่น https://raju-shop-frontend-xyz.run.app) คลิก

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

สรุป

ในขั้นตอนนี้ คุณใช้ Antigravity Agent Manager เพื่อสร้างคอนเทนเนอร์และทำให้แอปพลิเคชันส่วนหน้าใช้งานได้กับ Cloud Run

ตอนนี้คุณได้สร้างฟูลสแต็กแล้ว เราจะสรุปในส่วนเวลาปิดทำการ (สรุป)

11. เวลาปิดทำการ (สรุป)

ภารกิจสำเร็จ

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

สรุปเส้นทางของคุณ:

  • Google Cloud: ตั้งค่าโปรเจ็กต์และบัญชีสำหรับการเรียกเก็บเงิน แล้วติดตั้งใช้งานตัวแทนใน Cloud Run
  • Gemini 3: สมองอัจฉริยะที่ขับเคลื่อนตัวตนและทักษะการต่อรองของ Raju
  • ชุดพัฒนาเอเจนต์ (ADK): เฟรมเวิร์กที่ให้รากฐานพร้อมใช้งานจริงพร้อมการสังเกตการณ์ (การวัดและส่งข้อมูล) ในตัว ทำให้เอเจนต์ของคุณมีประสิทธิภาพตั้งแต่แรก
  • Gemini CLI: ผู้ช่วยบรรทัดคำสั่งสำหรับงานด่วน การทดสอบ และส่วนขยาย
  • Google Antigravity: IDE รุ่นถัดไปที่คุณ "เขียนโค้ดแบบสบายๆ" ใน UI และจัดการการติดตั้งใช้งาน

ขั้นตอนถัดไปสำหรับ Digital Dukaan

  • แก้ไขการทดสอบที่ใช้งานไม่ได้: คุณเปลี่ยนโค้ดแล้ว แต่การทดสอบล่ะ การทดสอบเริ่มต้น (tests/unit/test_agent.py) ยังคงค้นหาสภาพอากาศ ใช้ Gemini CLI เพื่ออัปเดตโดยอัตโนมัติ ลองใช้: gemini "Update the tests in tests/unit/test_agent.py to test the new check_inventory tool instead of weather."
  • สินค้าคงคลังแบบไดนามิก: ทำให้ระบบอัปเดตจำนวนสินค้าคงคลังของ Raju เมื่อมีการ "ขาย" สินค้า คุณเพิ่มตรรกะเพื่อลด stock ในพจนานุกรม INVENTORY หลังจาก "ซื้อ" สำเร็จได้ไหม
  • เครื่องมือ Payment Gateway: ใช้เครื่องมือจำลอง process_payment จากนั้นราจูก็จะเรียกใช้เครื่องมือนี้ได้เมื่อมีการตกลงกัน
  • สำรวจ Antigravity: เจาะลึกAgent Manager และWorkspaces ของ Antigravity คุณขอให้ตัวแทนปรับแต่ง index.html เพื่อแสดงใบเสร็จแบบเรียลไทม์ได้ไหม
  • แชร์ร้านค้าของคุณ: ร้านค้าของ Raju พร้อมให้บริการบนอินเทอร์เน็ตแล้ว แชร์ URL ส่วนหน้ากับเพื่อนๆ แล้วดูว่าเพื่อนจะต่อราคาได้ดีกว่าคุณไหม

แหล่งข้อมูล

12. ล้างข้อมูล

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

1. เลิกใช้งานบริการ Cloud Run (ประหยัดค่าใช้จ่ายได้)

หากต้องการหยุดการเรียกเก็บเงินที่อาจเกิดขึ้นซึ่งเกี่ยวข้องกับบริการที่ทำให้ใช้งานได้ในขณะที่ยังคงโปรเจ็กต์และการกำหนดค่าอื่นๆ ไว้เหมือนเดิม คุณสามารถยกเลิกการทำให้บริการ Cloud Run ใช้งานได้

เปิดเทอร์มินัล Cloud Shell (หรือเทอร์มินัลในเครื่อง) แล้วเรียกใช้gcloudคำสั่งต่อไปนี้

# Undeploy the backend agent

gcloud run services delete raju-agent --region us-central1

# Undeploy the frontend shop (if you deployed it)

gcloud run services delete raju-shop-frontend --region us-central1

2. ลบโปรเจ็กต์ Google Cloud (หยุดค่าใช้จ่ายทั้งหมด)

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

  1. ไปที่หน้าโปรเจ็กต์ใน Google Cloud Console
  2. เลือกโปรเจ็กต์ (raju-shop-agent) แล้วคลิกลบ
  3. ทำตามข้อความแจ้งเพื่อยืนยันการลบโปรเจ็กต์