1. บทนำ
ในแล็บภาคปฏิบัตินี้ คุณจะได้ฝึกทักษะการพัฒนาที่ทันสมัยด้วยการประสานงาน Antigravity เพื่อสร้างแอปพลิเคชันบนระบบคลาวด์ที่สมบูรณ์ และเรียนรู้วิธีใช้ MCP ความรู้สำหรับนักพัฒนาซอฟต์แวร์และทักษะของ Agent เพื่อปรับปรุงความรู้ของ Agent และคุณภาพของเอาต์พุต
เรากำลังสร้าง "ระบบนำส่งแมว" ซึ่งเป็นแอปพลิเคชันที่สร้างรูปภาพแมวโดยใช้ Gemini 3.1 Flash Image หรือที่เรียกว่า Nano Banana 2 ส่วนแบ็กเอนด์ของแอปพลิเคชันจะได้รับการพัฒนาโดยใช้ Antigravity SDK และติดตั้งใช้งานใน Cloud Run นอกจากนี้ เราจะสร้างส่วนหน้าสมัยใหม่โดยใช้ Lit และ Vite ด้วย ทั้งหมดนี้ทำได้โดยไม่ต้องเขียนโค้ดด้วยตนเองแม้แต่บรรทัดเดียว
สิ่งที่คุณจะได้เรียนรู้
- วิธีใช้ Antigravity CLI ในโหมดรวดเร็วและโหมดวางแผน
- วิธีให้สิทธิ์เข้าถึงเอกสารสำหรับนักพัฒนาซอฟต์แวร์ของ Google แก่ Antigravity โดยใช้เซิร์ฟเวอร์ Developer Knowledge MCP
- วิธีติดตั้งทักษะที่กำหนดเองลงใน Antigravity CLI
- วิธีใช้ Antigravity เพื่อติดตั้งใช้งานและตรวจสอบแอปพลิเคชัน
ข้อกำหนดเบื้องต้น
- ประสบการณ์ในการใช้เทอร์มินัล
- การอ่านและทำความเข้าใจโค้ด
- ความรู้พื้นฐานเกี่ยวกับเอเจนต์การเขียนโค้ด AI
- ความเข้าใจพื้นฐานเกี่ยวกับแนวคิดของระบบคลาวด์
2. ตั้งค่า
ทำตามวิธีการด้านล่างเพื่อเริ่มต้นโปรเจ็กต์ Google Cloud ที่จำเป็นสำหรับ Codelab นี้ หลังจากเริ่มต้นโปรเจ็กต์แล้ว ขอแนะนำให้คุณดำเนินการ Codelab นี้ใน Cloud Shell เนื่องจากมีเครื่องมือทั้งหมดที่จำเป็นในการดำเนินการทันที
หากต้องการเรียกใช้ Codelab นี้ในสภาพแวดล้อมในเครื่อง คุณจะต้องติดตั้ง Python, uv และเครื่องมือแก้ไขโค้ดก่อนดำเนินการต่อ คำสั่งทั้งหมดใน Codelab นี้ถือว่าคุณกำลังเรียกใช้ใน Cloud Shell เว้นแต่จะระบุไว้เป็นอย่างอื่น
การตั้งค่าสภาพแวดล้อมแบบเรียนรู้ด้วยตนเอง
- ลงชื่อเข้าใช้ คอนโซล Google Cloud แล้วสร้างโปรเจ็กต์ใหม่หรือใช้โปรเจ็กต์ที่มีอยู่ซ้ำ หากยังไม่มีบัญชี Gmail หรือ Google Workspace คุณต้องสร้างบัญชี
- ชื่อโปรเจ็กต์คือชื่อที่แสดงสำหรับผู้เข้าร่วมโปรเจ็กต์นี้ ซึ่งเป็นสตริงอักขระที่ Google APIs ไม่ได้ใช้ คุณอัปเดตได้ทุกเมื่อ
- รหัสโปรเจ็กต์จะไม่ซ้ำกันในโปรเจ็กต์ Google Cloud ทั้งหมดและเปลี่ยนแปลงไม่ได้ (เปลี่ยนไม่ได้หลังจากตั้งค่าแล้ว) Cloud Console จะสร้างสตริงที่ไม่ซ้ำกันโดยอัตโนมัติ ซึ่งโดยปกติแล้วคุณไม่จำเป็นต้องสนใจว่าสตริงนั้นคืออะไร ใน Codelab ส่วนใหญ่ คุณจะต้องอ้างอิงรหัสโปรเจ็กต์ (โดยปกติจะระบุเป็น
PROJECT_ID) หากไม่ชอบรหัสที่สร้างขึ้น คุณอาจสร้างรหัสแบบสุ่มอีกรหัสหนึ่งได้ หรือคุณอาจลองใช้ชื่อของคุณเองและดูว่ามีชื่อนั้นหรือไม่ คุณจะเปลี่ยนแปลงรหัสนี้หลังจากขั้นตอนนี้ไม่ได้ และรหัสจะคงอยู่ตลอดระยะเวลาของโปรเจ็กต์ - โปรดทราบว่ายังมีค่าที่ 3 ซึ่งคือหมายเลขโปรเจ็กต์ที่ API บางตัวใช้ ดูข้อมูลเพิ่มเติมเกี่ยวกับค่าทั้ง 3 นี้ได้ในเอกสารประกอบ
- จากนั้นคุณจะต้องเปิดใช้การเรียกเก็บเงินใน Cloud Console เพื่อใช้ทรัพยากร/API ของ Cloud การทำตาม Codelab นี้จะไม่เสียค่าใช้จ่ายมากนัก หรืออาจไม่เสียเลย หากต้องการปิดทรัพยากรเพื่อหลีกเลี่ยงการเรียกเก็บเงินนอกเหนือจากบทแนะนำนี้ คุณสามารถลบทรัพยากรที่สร้างขึ้นหรือลบโปรเจ็กต์ได้ ผู้ใช้ Google Cloud รายใหม่มีสิทธิ์เข้าร่วมโปรแกรมช่วงทดลองใช้ฟรีมูลค่า$300 USD
เริ่มต้น Cloud Shell
แม้ว่าคุณจะใช้งาน Google Cloud จากระยะไกลในแล็ปท็อปได้ แต่ใน Codelab นี้คุณจะใช้ Google Cloud Shell ซึ่งเป็นสภาพแวดล้อมบรรทัดคำสั่งที่ทำงานในระบบคลาวด์
จาก คอนโซล Google Cloud ให้คลิกไอคอน Cloud Shell ในแถบเครื่องมือด้านขวาบน
การจัดสรรและเชื่อมต่อกับสภาพแวดล้อมจะใช้เวลาเพียงไม่กี่นาที เมื่อเสร็จแล้ว คุณควรเห็นข้อความคล้ายกับตัวอย่างต่อไปนี้
เครื่องเสมือนนี้มาพร้อมเครื่องมือพัฒนาซอฟต์แวร์ทั้งหมดที่คุณต้องการ โดยมีไดเรกทอรีหลักแบบถาวรขนาด 5 GB และทำงานบน Google Cloud ซึ่งช่วยเพิ่มประสิทธิภาพเครือข่ายและการตรวจสอบสิทธิ์ได้อย่างมาก คุณสามารถทำงานทั้งหมดใน Codelab นี้ได้ภายในเบราว์เซอร์ คุณไม่จำเป็นต้องติดตั้งอะไร
3. การตั้งค่าและตรวจสอบสิทธิ์ Antigravity CLI
ในห้องทดลองนี้ คุณจะได้ทำงานกับ Antigravity (AGY) เอเจนต์การเขียนโค้ดของ Google ที่ใช้โมเดล Gemini ของ Google เพื่อช่วยคุณสร้างซอฟต์แวร์ มีแอปพลิเคชันเดสก์ท็อป AGY, อินเทอร์เฟซบรรทัดคำสั่ง (AGY CLI) และสภาพแวดล้อมในการพัฒนาซอฟต์แวร์แบบผสานรวม (IDE) ที่ช่วยให้คุณดูและแก้ไขโค้ดพร้อมกับเอเจนต์ได้ ในแล็บนี้ คุณจะได้ใช้ AGY CLI
นอกจากนี้ ยังมี SDK สำหรับสร้างเอเจนต์อเนกประสงค์ของคุณเองโดยใช้ชุดเครื่องมือสำหรับเอเจนต์ Antigravity (คิดว่าชุดเครื่องมือนี้เป็นเครื่องยนต์ของ Antigravity)
การเปิดตัวและการตรวจสอบสิทธิ์ AGY
กดปุ่มเปิดเครื่องมือแก้ไขเพื่อเปิด Cloud Shell Editor
เมื่อเปิดเครื่องมือแก้ไขแล้ว คุณสามารถขยายหน้าต่างโดยใช้ปุ่มขยายในแถบเมนูได้
เปิดแผงเทอร์มินัลโดยใช้เมนูเทอร์มินัล > เทอร์มินัลใหม่ หรือใช้ปุ่มลัด Ctrl+` (Control บวก Backtick):
หน้าต่างเทอร์มินัลใหม่ควรเปิดขึ้นที่ด้านล่างของหน้าจอโดยแสดงข้อความแจ้งของ Bash ดังนี้
จากนั้นในเทอร์มินัล ให้สร้างไดเรกทอรีการทำงานสำหรับการออกกำลังกายครั้งแรก แล้วเปลี่ยนเป็นไดเรกทอรีนั้น
mkdir -p ~/hello-agy && cd ~/hello-agy
ในเทอร์มินัลนี้ ให้พิมพ์ agy เพื่อเปิดใช้ Antigravity CLI
agy
เมื่อ agy เปิดตัวแล้ว ระบบจะขอให้คุณตรวจสอบสิทธิ์ เลือกใช้โปรเจ็กต์ Google Cloud:
ตอนนี้หน้าจอจะแสดงลิงก์ คัดลอกลิงก์ที่ได้รับแล้ววางลงในแท็บอื่นในเบราว์เซอร์ที่ไม่ระบุตัวตน
ใช้ข้อมูลเข้าสู่ระบบสำหรับนักเรียนนักศึกษาเดียวกันกับที่ระบุไว้สำหรับแล็บนี้เพื่อเข้าสู่ระบบ
คัดลอกรหัสการให้สิทธิ์และวางกลับลงใน agy โดยทำดังนี้
เมื่อระบบขอรหัสโปรเจ็กต์ คุณควรใช้รหัสโปรเจ็กต์ที่แสดงในแผงด้านข้างของหน้านี้
สุดท้าย ให้เลือกตำแหน่ง Google Cloud เป็นทั่วโลก
สร้างสคริปต์อย่างรวดเร็วเพื่อแสดงข้อมูลน่ารู้เกี่ยวกับแมว
ตอนนี้เรามาสร้างสคริปต์อย่างรวดเร็วเพื่อดูว่า AGY CLI ทำงานอย่างไร
ขอให้ AGY เขียนสคริปต์สั้นๆ ที่แสดงข้อเท็จจริงเกี่ยวกับแมว แล้วดำเนินการสคริปต์ให้คุณ
Write a simple node script that returns cat trivia and run it for me
AGY จะใช้เวลาสักครู่เพื่อเขียนสคริปต์ให้คุณ
เมื่อ AGY ขอสิทธิ์เรียกใช้สคริปต์โหนด ให้เลือกใช่ แล้วกด Enter
คำขอสิทธิ์ที่ฉันเห็นมีลักษณะดังนี้
Requesting permission for: node cat-trivia.js Do you want to proceed? > 1. Yes 2. Yes, and always allow in this conversation for commands that start with 'node cat-trivia\.js' 3. Yes, and always allow for commands that start with 'node cat-trivia\.js' (Persist to settings.json) 4. No
หลังจากเรียกใช้สคริปต์แล้ว AGY จะแสดงสรุปสิ่งที่ทำ โดยข้อมูลที่ได้มีดังนี้
I have created and executed a simple Node.js script that returns cat trivia.
### Created File
• cat-trivia.js: A standalone Node.js script that fetches random cat facts from a public API ( https://catfact.ninja/fact ) with built-in fallbacks and ASCII art.
### Execution Output
Running the script using node cat-trivia.js produced the following output:
_._ _,-'""`-._
(,-.`._,'( |\`-/|
`-.-' \ )-`( , o o)
`- \`_`"'-
🐱 Here is your Cat Trivia:
----------------------------------------
"In 1987 cats overtook dogs as the number one pet in America."
----------------------------------------
ฉันชอบที่มันวาดรูปแมวด้วยอักขระ ASCII ให้ด้วย
ตอนนี้คุณอาจต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่ AI สร้างให้ แม้ว่าคุณจะเปิดเครื่องมือแก้ไขและตรวจสอบซอร์สโค้ดได้ (ฉันขอแนะนำให้คุณทำเช่นนั้น) แต่คุณยังขอให้ AGY ใส่คำอธิบายประกอบและอธิบายโค้ดให้คุณได้ด้วย
Explain the code you generated please
อ่านคำอธิบายและถามคำถามเพิ่มเติมหากต้องการทราบข้อมูลเพิ่มเติม
สุดท้ายนี้ หากต้องการสิ้นสุดงานนี้ ให้ปิด agy โดยกด Ctrl+D 2 ครั้ง
4. เชื่อมต่อและค้นหาเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ของ Google
แม้ว่าเอเจนต์และโมเดลจะฉลาดขึ้นทุกวัน แต่คุณภาพของคำตอบก็ขึ้นอยู่กับความแม่นยำและความทันสมัยของความรู้เป็นอย่างมาก ด้วยเหตุนี้จึงเป็นสิ่งสำคัญที่จะต้องมอบเครื่องมือให้เอเจนต์เพื่อดึงข้อมูลเอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ที่ทันสมัยจากแหล่งที่มาที่เชื่อถือได้ เพื่อหลีกเลี่ยงการตัดสินใจที่ไม่ถูกต้องโดยอิงตามความรู้ภายในหรือการคาดเดา
เซิร์ฟเวอร์ MCP ของ Google Developer Knowledge ช่วยให้เอเจนต์การเขียนโค้ดสามารถค้นหาเอกสารประกอบสำหรับนักพัฒนาแอปอย่างเป็นทางการของ Google สำหรับ Firebase, Google Cloud, Android, Maps และผลิตภัณฑ์อื่นๆ ของ Google ได้อีกมากมาย
การเชื่อมต่อเอเจนต์กับคลังเอกสารอย่างเป็นทางการของ Google โดยตรงจะช่วยให้มั่นใจได้ว่าโค้ดและคำแนะนำที่เอเจนต์ใช้เป็นข้อมูลล่าสุดและอิงตามบริบทที่เชื่อถือได้
หากต้องการเริ่มต้นใช้งาน ให้เปิดใช้ Developer Knowledge API โดยทำดังนี้
gcloud services enable developerknowledge.googleapis.com
ตั้งค่าและกำหนดค่าเซิร์ฟเวอร์ MCP ของ Developer Knowledge
ทำตามขั้นตอนด้านล่างเพื่อสร้างพื้นที่ทำงานสำหรับโปรเจ็กต์นี้และกำหนดค่าเซิร์ฟเวอร์ MCP ความรู้สำหรับนักพัฒนาซอฟต์แวร์สำหรับ Antigravity
ระบบจะจัดเก็บไฟล์การกำหนดค่า Antigravity สำหรับผู้ใช้ไว้ในโฟลเดอร์ .gemini ในไดเรกทอรีหน้าแรก แผนภาพด้านล่างแสดงเวอร์ชันที่เรียบง่ายพร้อมองค์ประกอบหลักที่คุณจะเห็น
~/.gemini
├── antigravity/
├── antigravity-cli/
│ ├── brain/ # Conversations and artifacts
│ └── settings.json # CLI settings
├── config/
│ ├── plugins/ # Global / shared plugins
│ └── mcp_config.json # Global / shared MCP config
├── skills/ # Global / shared skills
│ └── {skill_name}/
│ ├── SKILL.md # Skill definition
│ └── ... # [optional] support files, scripts, etc.
└── GEMINI.md # Global rules
หากต้องการเพิ่มเซิร์ฟเวอร์ MCP ความรู้สำหรับนักพัฒนาแอปไปยัง AGY CLI ให้แก้ไขไฟล์ mcp_config.json ในโฟลเดอร์ ~/.gemini/config
ก่อนอื่น ตรวจสอบว่ามีโฟลเดอร์การกำหนดค่าและสร้างไฟล์ mcp_config.json ว่างเปล่า
mkdir -p ~/.gemini/config && touch mcp_config.json
จากนั้นเปิดไฟล์นี้ในโปรแกรมแก้ไข Cloud Shell โดยใช้คำสั่งด้านล่าง
cloudshell edit ~/.gemini/config/mcp_config.json
สุดท้าย ให้เพิ่มการกำหนดค่าต่อไปนี้ลงใน mcp_config.json โปรดทราบว่าคุณต้องแทนที่ [[PROJECT_ID]] ด้วยรหัสโปรเจ็กต์จริง คุณดูรหัสโปรเจ็กต์ได้ในแผงด้านข้างของวิธีการเหล่านี้
~/.gemini/config/mcp_config.json
{
"mcpServers": {
"google-developer-knowledge": {
"url": "https://developerknowledge.googleapis.com/mcp",
"authProviderType": "google_credentials",
"oauth": {
"scopes": [
"https://www.googleapis.com/auth/cloud-platform"
]
},
"timeout": 30000,
"headers": {
"X-goog-user-project": "[[PROJECT_ID]]"
}
}
}
}
ตอนนี้คุณสามารถตรวจสอบได้ว่าเซิร์ฟเวอร์ MCP โหลดอย่างถูกต้องหรือไม่ด้วย/mcpคำสั่งเครื่องหมายทับ คุณควรเห็นข้อความคล้ายกับข้อความต่อไปนี้
กำหนดค่า MCP ความรู้สำหรับนักพัฒนาซอฟต์แวร์แล้ว ตอนนี้มาดูการทำงานกัน
สร้างสคริปต์เพื่อสร้างรูปภาพแมวโดยใช้ Nano Banana 2
มาสร้างสคริปต์ง่ายๆ ที่สร้างรูปภาพแมวโดยใช้ Nano Banana 2 เพื่อแสดงความสามารถของ MCP ความรู้สำหรับนักพัฒนาแอปกัน
คุณจะต้องเรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล คุณปิด agy ได้โดยกด Ctrl+D 2 ครั้งเพื่อกลับไปที่เชลล์
ก่อนอื่น ให้เปิดใช้ AI Platform API นี่คือ API ที่อนุญาตให้โปรเจ็กต์ของคุณทำการเรียก Gemini API
gcloud services enable aiplatform.googleapis.com
สร้างพื้นที่ทำงานสำหรับเครื่องสร้างลูกแมว
mkdir -p ~/nano-banana-kitten && cd ~/nano-banana-kitten
เริ่มต้นตัวจัดการทรัพยากร Dependency
uv init
ตอนนี้ให้เปิด Antigravity แล้วป้อนพรอมต์ต่อไปนี้
Write a script that uses Nano Banana 2 through Vertex AI to generate a picture of a cute kitten, and run the script for me. Use the google-developer-knowledge MCP when researching.
กด Ctrl+O เพื่อขยายขั้นตอนการคิดขั้นกลางและอ่านตาม คุณควรเห็น AGY ใช้บริการ google-developer-knowledge เพื่อทำการค้นหา เขียนสคริปต์ ดำเนินการให้คุณ และแก้ไขข้อผิดพลาดที่พบ
ดูรูปแมว =^_^=
5. สร้างเอเจนต์การนำส่งแคตตาล็อก
MCP ความรู้สำหรับนักพัฒนาซอฟต์แวร์ของ Google มีประโยชน์ในการตอบคำถามผ่านเอกสารอย่างเป็นทางการ แต่บางครั้งข้อมูลที่เราต้องการก็มีความเฉพาะเจาะจงมากและหาไม่ได้ในเอกสาร ในกรณีดังกล่าว เราสามารถใช้มาตรฐานเปิดอีกอย่างหนึ่งได้ นั่นคือทักษะของตัวแทน
ทักษะ Agent เป็นรูปแบบเปิดที่มีน้ำหนักเบาสำหรับการขยายความสามารถของ AI Agent ด้วยความรู้และเวิร์กโฟลว์เฉพาะทาง ลักษณะเด่นของทักษะคือสิ่งที่เรียกว่าการเปิดเผยแบบค่อยเป็นค่อยไป ซึ่งหมายความว่าเอเจนต์จะไม่โหลดเนื้อหาของทักษะทั้งหมดตั้งแต่เริ่มต้น แต่จะเปิดใช้งานทักษะเมื่อจำเป็นเท่านั้น โดยจะโหลดข้อมูลที่จำเป็นตามคำขอและประหยัดโทเค็นอันมีค่า
เราจะใช้ Antigravity SDK เป็นระบบควบคุมการทำงานของ Agent เพื่อทำหน้าที่เป็นตัวแทนนำส่งแมวให้เสร็จสมบูรณ์ นอกจากนี้ เราจะใช้ประโยชน์จากทักษะ Antigravity SDK อย่างเป็นทางการเพื่อลดความซับซ้อนและเพิ่มประสิทธิภาพการติดตั้งใช้งานสำหรับเอเจนต์การเขียนโค้ด
สร้างพื้นที่ทำงานและติดตั้งการอ้างอิง
ก่อนอื่น ให้สร้างโฟลเดอร์สำหรับโปรเจ็กต์สุดท้ายโดยทำดังนี้
mkdir -p ~/cat-delivery && cd ~/cat-delivery
จากนั้นใช้ตัวจัดการแพ็กเกจ uv เพื่อเริ่มต้นโฟลเดอร์นี้และติดตั้งทรัพยากร Dependency บางรายการ
uv init && uv add fastapi uvicorn
ติดตั้งทักษะ Python ของ AGY SDK
หากต้องการติดตั้งทักษะจากซอร์สโค้ดและตลาดกลางแบบเปิด คุณสามารถใช้ Skill CLI ของ Vercel ได้ เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัลเพื่อติดตั้งทักษะ google-antigravity-sdk ตรวจสอบว่าคุณเรียกใช้จากโฟลเดอร์พื้นที่ทำงานของห้องทดลอง (~/cdslab)
npx skills add Google-Antigravity/antigravity-sdk-python --skill google-antigravity-sdk --agent antigravity-cli --yes
เอาต์พุตของคำสั่งนี้ควรมีลักษณะดังนี้
โปรดทราบว่าคำสั่ง npx skills add Google-Antigravity/antigravity-sdk-python ได้โคลนที่เก็บ antigravity-sdk-python จาก GitHub โดยอัตโนมัติ คุณใช้คำสั่งนี้เพื่อติดตั้งทักษะจากที่เก็บ GitHub ใดก็ได้ ตราบใดที่มีโฟลเดอร์ skills
การติดตั้งทักษะจากปลั๊กอิน
อีกวิธีในการติดตั้งทักษะคือผ่านระบบปลั๊กอิน ปลั๊กอินใน Antigravity ช่วยให้คุณรวมไม่เพียงแต่ทักษะ แต่ยังรวมถึงเซิร์ฟเวอร์ MCP, กฎ และ Hook ไว้ในแพ็กเกจเดียวกันได้ด้วย ซึ่งมีประโยชน์ในการสร้างส่วนขยายที่สอดคล้องกันในแพ็กเกจการติดตั้งใช้งานเดียว
เนื่องจากเรากำลังสร้างเว็บแอปพลิเคชัน ให้ติดตั้งปลั๊กอิน modern-web-guidance โดยใช้คำสั่งด้านล่าง
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
ปลั๊กอินนี้มีทักษะที่มีแนวทางปฏิบัติแนะนำสำหรับการพัฒนาเว็บซึ่งเขียนโดยทีม Google Chrome
เปิด agy อีกครั้งเพื่อให้เราได้เห็นทักษะเหล่านั้นในการทำงาน ในพรอมต์ของ agy ให้พิมพ์ /skills เพื่อเปิดเมนูทักษะ
/skills
คุณจะเห็นข้อความคล้ายกับข้อความต่อไปนี้
ตอนนี้เราได้กำหนดค่าทั้งทักษะ MCP และทักษะเอเจนต์แล้ว Antigravity ก็พร้อมที่จะทำงานในโปรเจ็กต์ของเราโดยมีข้อมูลทั้งหมดที่จำเป็นต่อการประสบความสำเร็จ
การวางแผนแอป
Antigravity มีโหมดการทำงาน 2 โหมด ได้แก่ โหมดเร็วและโหมดวางแผน ในโหมดด่วน Antigravity จะเริ่มทำงานในงานทันที และเหมาะสำหรับงานที่ง่ายกว่าและมีข้อมูลครบถ้วน โหมดการวางแผนออกแบบมาสำหรับงานที่ซับซ้อน ซึ่ง Agent จะอธิบายแผนก่อน จากนั้นคุณจะตรวจสอบและแก้ไขได้ก่อนเริ่มการติดตั้งใช้งาน
หากต้องการเปิดใช้โหมดการวางแผน ให้ใช้คำสั่งเครื่องหมายทับ /planning ดังนี้
/planning
คุณเปลี่ยนกลับไปใช้โหมดด่วนได้โดยทำดังนี้ /fast
/fast
การสลับระหว่างโหมดวางแผนและโหมดด่วนอาจเป็นประโยชน์ในการเปลี่ยนโมเดลด้วย คุณทำได้โดยใช้คำสั่ง /model ดังนี้
/model
รายการโมเดลที่พร้อมใช้งานอาจแตกต่างกันเล็กน้อยตามสภาพแวดล้อมและโหมดการตรวจสอบสิทธิ์ของคุณ
สำหรับขอบเขตของบทแนะนำนี้ ให้เลือก Gemini 3.5 Flash (ต่ำ) คำว่า "ต่ำ" ในวงเล็บหมายถึงระดับการคิดของโมเดล Gemini 3.5 Flash ที่มีการคิดระดับต่ำเป็นโมเดลที่รวดเร็วและมีประสิทธิภาพมาก โดยมีเศรษฐศาสตร์โทเค็นที่ดี การเลือกปานกลางหรือสูงเป็นระดับการคิดจะใช้โทเค็นและเวลามากขึ้นในการให้เหตุผลก่อนที่โมเดลจะตอบกลับ
ตัวอย่างเช่น ในสถานการณ์จริง คุณอาจใช้โมเดลที่มากความสามารถที่สุดในระดับการคิดสูงสำหรับการวางแผน และใช้โมเดลที่เร็วกว่าสำหรับการนำไปใช้ แต่สำหรับโปรเจ็กต์ของเรา Gemini 3.5 Flash (ต่ำ) ก็เพียงพอแล้ว
สร้างแผน
เปลี่ยน Antigravity กลับไปเป็นโหมดวางแผน
/planning
จากนั้นส่งพรอมต์ต่อไปนี้เพื่อสร้างแผนการติดตั้งใช้งาน
Create an application named "Cat Delivery System". This application will be an agent that generates cat pictures using Gemini 3.1 Flash Image (aka Nano Banana 2). The user will interact with the agent whenever it feels the need for a cat picture in their life, whether it be to make them smile, laugh or just brighten their day. Cat pictures can take any form the user desires: anime, cartoon, photorealistic, 3D render, etc. The only rule is ABSOLUTELY NO DOGS - steer the user towards cats if necessary. P.S.: capybaras are allowed.
The tech stack should be as follows:
- uv package manager
- Backend: agent using Antigravity SDK
- Frontend: simple chat window, light mode, lit / vite
- Model: Gemini 3.5 Flash for the root agent, Gemini 3.1 Flash Image for image generation
TODO:
- backend should serve a static frontend
- define the contract between frontend and backend before starting implementation
- use Google Cloud Project auth
คุณจะเห็นว่าในระยะการค้นคว้า Antigravity อาจเรียกใช้ทั้ง MCP ความรู้ของนักพัฒนาซอฟต์แวร์และทักษะอย่างน้อย 1 อย่าง
เมื่อแผนเสร็จสมบูรณ์แล้ว ระบบจะแจ้งให้คุณตรวจสอบแผน
โปรดสังเกตมุมขวาล่างของหน้าจอ จะมีข้อความระบุว่าอาร์ติแฟกต์ 1 รายการและคำแนะนำให้ใช้ /artifact เพื่อตรวจสอบ ใน Antigravity ไฟล์สนับสนุน เช่น แผน รายการงาน และคำแนะนำแบบทีละขั้นตอน จะเรียกว่า "อาร์ติแฟกต์" เพื่อแยกความแตกต่างจากไฟล์ปกติที่เป็นส่วนหนึ่งของโซลูชัน (เช่น ซอร์สโค้ด)
การป้อนคำสั่ง /artifact ในพรอมต์จะช่วยให้คุณดูแผนและแสดงความคิดเห็นในแผนได้ในกรณีที่ต้องปรับเปลี่ยน
/artifact
คุณควรเห็นข้อความคล้ายกับข้อความต่อไปนี้
โปรดทราบว่ามีไฟล์ชื่อ implementation_plan.md พร้อมตัวเลือกในการเปิด อนุมัติ หรือปฏิเสธ กด Enter เพื่อเปิด ตัวอย่างลักษณะของแพ็กเกจในระบบของฉันมีดังนี้
คุณเลื่อนขึ้นและลงได้ด้วยปุ่มลูกศร และเพิ่มความคิดเห็นในบรรทัดใดก็ได้โดยกดปุ่ม C
ส่วนสำคัญที่ควรตรวจสอบคือ "แผนการยืนยัน" ในส่วนนี้ คุณสามารถยืนยันและเพิ่มขั้นตอนการตรวจสอบเพื่อให้โมเดลทราบว่าทำงานเสร็จแล้ว
เพิ่มความคิดเห็นในแผนจนกว่าคุณจะพอใจ แล้วกด ESC เพื่อกลับไป จากนั้นกด Y เพื่อยืนยันการส่งความคิดเห็นไปยังตัวแทน
หลังจากกด Y แล้ว เอเจนต์จะเริ่มทำงานทันที Agent อาจขอการยืนยันการเรียกใช้เครื่องมือเพิ่มเติมเมื่อดำเนินการติดตั้งใช้งาน
คุณอาจสังเกตเห็นว่าจำนวนสิ่งประดิษฐ์จะเพิ่มขึ้นเมื่อเวลาผ่านไป นอกจากแผนแล้ว Antigravity ยังจะสร้างรายการงาน (task.md) เพื่อติดตามแต่ละรายการที่ต้องนำไปใช้หรือการดำเนินการที่ต้องทำ เมื่อเสร็จแล้วก็จะสร้างไฟล์คำแนะนำแบบทีละขั้นตอน (walkthrough.md) พร้อมคำอธิบายเกี่ยวกับวัตถุประสงค์ที่บรรลุ คุณตรวจสอบทั้งหมดนี้ได้โดยใช้/artifact อีกครั้ง
คุณสามารถเปิดไฟล์เหล่านี้และเพิ่มความคิดเห็นได้ทุกเมื่อ เมื่อส่งให้ตัวแทนแล้ว ระบบจะจัดคิวไฟล์เพื่อดำเนินการเช่นเดียวกับพรอมต์ที่อยู่ในคิว คุณควรแสดงความคิดเห็นในไฟล์เหล่านี้เพื่อให้ตัวแทนมีบริบทเพิ่มเติมเกี่ยวกับคำขอของคุณ
6. ติดตั้งใช้งาน Agent ในระบบคลาวด์
ตอนนี้คุณพร้อมที่จะทำให้แอปใช้งานได้ในระบบคลาวด์โดยใช้ Cloud Run แล้ว เนื่องจากงานนี้ไม่จำเป็นต้องมีแผนที่ซับซ้อน เราจึงใช้โหมดรวดเร็วได้
เปลี่ยน Antigravity เป็นโหมดเร็วด้วย /fast โดยทำดังนี้
/fast
ใช้พรอมต์ต่อไปนี้เพื่อสั่งให้ Antigravity ทำให้ตัวแทน CDS ใช้งานได้กับ Cloud Run
Deploy the agent and frontend to Cloud Run.
TODO:
- backend should serve a static frontend
- frontend and backend are deployed in the same container
Acceptance Criteria
- Agent is deployed to cloud run
- Frontend is live and renders with no errors
- Backend is live and responds to requests with no errors
7. ยินดีด้วย
ในเวิร์กช็อปนี้ คุณได้ฝึกการพัฒนาที่ทันสมัยด้วย Antigravity ซึ่งรวมถึงวิธีขยายความสามารถด้วยเซิร์ฟเวอร์ MCP และทักษะของ Agent นอกจากนี้ คุณยังได้สร้างแอปพลิเคชันแบบเต็มที่ใช้ประโยชน์จาก Antigravity SDK และรูปภาพ Gemini 3.1 Flash เส้นทางการเรียนรู้ของคุณไม่จำเป็นต้องหยุดเท่านี้ ลองดู Codelab อื่นๆ ในแพลตฟอร์มนี้และพัฒนาทักษะการเขียนโค้ดแบบเอเจนต์ต่อไป