1. บทนำ
ใน Codelab นี้ คุณจะสร้าง CloudCrush ซึ่งเป็นเกมอาร์เคดจับคู่ 3 โดยใช้ Gemini 3 และ Agent การเขียนโค้ด Antigravity เกมนี้จะเขียนด้วยภาษา Go และติดตั้งใช้งานใน Google Cloud โดยใช้ Cloud Run
โปรดทราบว่าแม้ว่าเราจะแนะนำให้มีความรู้ด้านภาษา Go แต่คุณก็ไม่จำเป็นต้องมีความรู้ดังกล่าวเพื่อเข้าร่วมเวิร์กช็อปนี้ เนื่องจากเอเจนต์จะเป็นผู้เขียนโค้ดทั้งหมด เป้าหมายหลักของ Codelab นี้คือการพัฒนาทักษะในการจัดการเป็นกลุ่ม Agent เพื่อสร้างแอปพลิเคชันให้คุณแทนการเขียนโค้ดด้วยตนเอง
Codelab นี้เหมาะสำหรับนักพัฒนาซอฟต์แวร์ระดับกลางที่ต้องการเรียนรู้เวิร์กโฟลว์แบบเป็น Agent ขั้นสูง ระยะเวลาทั้งหมดโดยประมาณสำหรับแล็บนี้คือ 60 นาที ทรัพยากรที่สร้างใน Codelab นี้ใช้การกำหนดราคาตามการใช้งาน
สิ่งที่คุณต้องดำเนินการ
- สร้างตรรกะหลักของเกมจับคู่ 3 โดยใช้ Go และเฟรมเวิร์ก Ebitengine
- ปรับเกมให้ทำงานในเว็บเบราว์เซอร์โดยใช้ WebAssembly (WASM)
- ติดตั้งใช้งานเกมและ API คะแนนสูงสุดใน Cloud Run
- ประสานงานเอเจนต์ย่อยและส่วนขยายเฉพาะทางสำหรับการทดสอบและการรีวิวโค้ด
ข้อกำหนดเบื้องต้น
- ความรู้พื้นฐานเกี่ยวกับภาษาโปรแกรม
- ความรู้พื้นฐานเกี่ยวกับโครงสร้างพื้นฐานของระบบคลาวด์
- ความรู้พื้นฐานเกี่ยวกับคอนโซล Google Cloud
สิ่งที่คุณจะได้เรียนรู้
- วิธีทำงานร่วมกับ Agent การเขียนโค้ดเพื่อสร้างแอปพลิเคชันที่ซับซ้อน
- วิธีทำงานกับ Gemini ในบริบทแบบมัลติโมดัล
- วิธีติดตั้งใช้งานแอปพลิเคชันในระบบคลาวด์โดยใช้ Cloud Run
สิ่งที่คุณต้องมี
คุณสามารถทำเวิร์กช็อปนี้บนระบบคลาวด์ได้ทั้งหมดโดยใช้ Cloud Shell แต่หากต้องการใช้เครื่องภายใน คุณจะต้องมีสิ่งต่อไปนี้
- Antigravity 2.0 และ Antigravity CLI ดาวน์โหลดและติดตั้งโดยทำตามวิธีการใน antigravity.google
- Go Toolchain (เวอร์ชัน 1.26 ขึ้นไป) ดาวน์โหลดและติดตั้งโดยใช้วิธีการใน go.dev
- gcloud CLI เพื่อโต้ตอบกับ Google Cloud ดาวน์โหลดและติดตั้งโดยใช้คำสั่งในเอกสารประกอบของ Google Cloud
- บัญชีสำหรับการเรียกเก็บเงินใน Google Cloud (เพื่อติดตั้งใช้งานเกมในระบบคลาวด์)
เทคโนโลยีหลัก
ดูข้อมูลเพิ่มเติมเกี่ยวกับเทคโนโลยีที่เราจะใช้ได้ที่นี่
- Antigravity CLI: เอเจนต์การพัฒนา
- Gemini 3: โมเดลภาษาขนาดใหญ่รุ่นล่าสุดของเรา
2. การตั้งค่าสภาพแวดล้อม
เลือกตัวเลือกใดตัวเลือกหนึ่งต่อไปนี้ การตั้งค่าสภาพแวดล้อมแบบเรียนรู้ด้วยตนเอง หากต้องการเรียกใช้ Codelab นี้ในเครื่องของคุณเอง หรือเริ่ม Cloud Shell หากต้องการเรียกใช้ Codelab นี้ในระบบคลาวด์ทั้งหมด
การตั้งค่าสภาพแวดล้อมแบบเรียนรู้ด้วยตนเอง
- ลงชื่อเข้าใช้ คอนโซล 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. การตั้งค่าโปรเจ็กต์
สร้างไดเรกทอรีโปรเจ็กต์
ก่อนอื่น เราต้องสร้างไดเรกทอรีใหม่สำหรับโปรเจ็กต์ เรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล
mkdir -p codelab-match3 && cd codelab-match3
เปิด Antigravity CLI
ก่อนอื่น ให้ตรวจสอบว่าได้ติดตั้ง Antigravity CLI อย่างถูกต้องแล้ว เรียกใช้ในเทอร์มินัล
agy --version
คุณควรเห็นข้อความคล้ายกับข้อความต่อไปนี้
$ agy --version 1.0.2
ตอนนี้ให้เปิดใช้ Antigravity CLI ด้วยคำสั่ง agy
agy
Antigravity จะถามว่าคุณเชื่อถือโปรเจ็กต์นี้ไหม เนื่องจากเราเพิ่งสร้างโฟลเดอร์ว่าง จึงเชื่อถือได้ ดังนั้นให้ยืนยันการเข้าถึง แล้วระบบจะนำคุณไปยังพรอมต์ CLI
หากเห็นข้อความแจ้ง CLI ของ Antigravity แสดงว่าคุณพร้อมใช้งานแล้ว หากไม่เห็น ให้ตรวจสอบอีกครั้งว่าคุณพลาดขั้นตอนการตั้งค่าก่อนหน้านี้หรือไม่
4. สร้างเกมพื้นฐานในโหมดวางแผน
มาเริ่มสร้างตรรกะหลักของเกมจับคู่ 3 กันก่อน Antigravity จะเริ่มในโหมดการวางแผนโดยค่าเริ่มต้น คุณจึงไม่จำเป็นต้องออกคำสั่งพิเศษใดๆ เพื่อเปลี่ยนไปใช้การวางแผน
อย่างไรก็ตาม คุณควรทราบว่าคุณเปิดใช้โหมดการวางแผนได้ทุกเมื่อด้วยคำสั่งเครื่องหมายทับ /planning ในพรอมต์ CLI ของ Antigravity
/planning
หากคุณลองเรียกใช้คำสั่งนี้ตอนนี้ Antigravity จะแจ้งเตือนว่าคำสั่งนี้อยู่ระหว่างการวางแผน
โหมดตรงข้ามกับโหมดวางแผนคือโหมดด่วน ซึ่งคุณเปิดใช้ได้โดยทำดังนี้ /fast
/fast
ในโหมดด่วน Antigravity จะเริ่มทำงานในงานทันที และเหมาะสำหรับงานที่ง่ายกว่าและมีข้อมูลครบถ้วน โหมดการวางแผนออกแบบมาสำหรับงานที่ซับซ้อน ซึ่ง Agent จะอธิบายแผนก่อน จากนั้นคุณจะตรวจสอบและทำซ้ำก่อนดำเนินการได้
ดาวน์โหลดชิ้นงาน
เราต้องดาวน์โหลดรูปภาพที่จะใช้ในเกม เนื่องจากเป็นงานขนาดเล็กที่แยกจากกัน จึงไม่จำเป็นต้องเรียกใช้ในโหมดการวางแผน ดังนั้นเรามาใช้ประโยชน์จากโหมดด่วนเพื่อดำเนินการทันทีกัน
Create a folder named "assets" and download the images
background.png, gcp_sprites.png, gemini.png and logo.png,
from this GitHub repository to the "assets" folder:
https://github.com/GoogleCloudPlatform/devrel-demos/tree/main/codelabs/gemini-cli/gemini-cli-match3-golang
Antigravity จะขอสิทธิ์ในการเรียกใช้คำสั่งเชลล์ 2-3 รายการเพื่อดาวน์โหลดไฟล์ หลังจากดำเนินการเสร็จแล้ว คุณควรเห็นข้อความคล้ายกับข้อความต่อไปนี้
สร้างเกมหลัก
เมื่อมีชิ้นงานพร้อมแล้ว ก็ถึงเวลาสร้างเกมฐาน เนื่องจากการสร้างเกมเป็นงานที่ค่อนข้างซับซ้อน เราจึงกลับไปที่โหมดการวางแผนก่อนที่จะป้อนพรอมต์
/planning
ในโหมดการวางแผน ให้คัดลอกและวางพรอมต์ต่อไปนี้ลงใน Antigravity CLI
Build a Match-3 game called 'Cloud Crush' in Go using Ebitengine v2.
The entire game screen should have background.png as background.
The play area should be an 8x8 grid with white background.
On the right side of the play area include a side panel with UI elements
like player score and how to play instructions.
The side panel should have a solid background colour to help with readability of the UI.
Use standard GCP product logos (e.g. Compute Engine, Cloud Storage, BigQuery, etc.)
as icons. These icons are provided in the gcp_sprites.png file.
The icons are saved as 64x64 sprites but scale them as necessary
based on the screen resolution. Implement swapping, clearing 3+ gems, and gravity.
Use ebitengine native font rendering (size 48 for titles and size
24 for normal text) for all text and not the debug print.
The font should be monospaced (golang.org/x/image/font/gofont/gomono).
Keep the UI tidy and harmonic, e.g. centered text should always be
adjusted based on text length, not just guess based on estimates.
โดยอาจทำการสำรวจก่อนที่จะวางแผน เช่น ตรวจสอบไฟล์ PNG เพื่อดูขนาด เมื่อแผนเสร็จสมบูรณ์แล้ว ระบบจะแจ้งให้คุณตรวจสอบแผน
โปรดสังเกตมุมขวาล่างที่คุณเขียนว่าอาร์ติแฟกต์ 1 รายการและคำแนะนำให้ใช้ /artifact เพื่อตรวจสอบ ใน Antigravity ไฟล์สนับสนุน เช่น แผน รายการงาน และคำแนะนำแบบทีละขั้นตอน จะเรียกว่า "อาร์ติแฟกต์" เพื่อแยกความแตกต่างจากไฟล์ปกติที่เป็นส่วนหนึ่งของโซลูชัน (เช่น ซอร์สโค้ด)
การป้อนคำสั่ง /artifact ในพรอมต์จะช่วยให้คุณดูแผนและแสดงความคิดเห็นเกี่ยวกับแผนได้ในกรณีที่ต้องการปรับเปลี่ยน
/artifact
คุณควรเห็นข้อความคล้ายกับข้อความต่อไปนี้
โปรดทราบว่ามีไฟล์ชื่อ implementation_plan.md พร้อมตัวเลือกในการเปิด อนุมัติ หรือปฏิเสธ กด Enter เพื่อเปิด ตัวอย่างลักษณะของแพ็กเกจในระบบของฉันมีดังนี้
คุณเลื่อนขึ้นและลงได้ด้วยปุ่มลูกศร และเพิ่มความคิดเห็นในบรรทัดใดก็ได้โดยกดปุ่ม C ในกรณีนี้ ฉันไม่ชอบที่ใช้ Go เวอร์ชันเก่า ดังนั้นฉันจะเพิ่มความคิดเห็นเพื่อใช้ Go 1.26 (เวอร์ชันล่าสุด ณ เวลาที่เขียนนี้) ในบรรทัดที่ 16 ดังนี้
เมื่อป้อนความคิดเห็นแล้ว ความคิดเห็นจะปรากฏในบรรทัดดังนี้
ส่วนสำคัญที่ต้องตรวจสอบคือ "แผนการยืนยัน" เกมเป็นสิ่งที่ทดสอบโดยอัตโนมัติได้ยาก แต่ Go เป็นภาษาที่คอมไพล์แล้ว ดังนั้นเราควรตรวจสอบอย่างน้อยว่าโมเดลส่งโค้ดที่คอมไพล์ได้ให้เรา หากไม่มีขั้นตอนอัตโนมัติสำหรับการสร้างไบนารี ให้เพิ่มเป็นความคิดเห็น
ส่วนสำคัญที่ต้องตรวจสอบคือ "แผนการยืนยัน" เกมเป็นสิ่งที่ทดสอบโดยอัตโนมัติได้ยากอย่างเห็นได้ชัด แต่ Go เป็นภาษาที่คอมไพล์แล้ว ดังนั้นอย่างน้อยเราควรตรวจสอบว่าโมเดลส่งโค้ดที่คอมไพล์ได้ให้เรา หากไม่มีขั้นตอนอัตโนมัติสำหรับการสร้างไบนารี ให้เพิ่มเป็นความคิดเห็น
ทำกระบวนการนี้ซ้ำจนกว่าคุณจะพอใจกับแผนและกด ESC เพื่อกลับไป จากนั้นกด Y เพื่อยืนยันการส่งความคิดเห็นไปยังตัวแทน
หลังจากกด Y แล้ว เอเจนต์จะเริ่มทำงานทันที คุณต้องกด Esc อีกครั้งเพื่อออกจากเมนู "อาร์ติแฟกต์" ซึ่งจะนำคุณกลับไปที่โหมดพรอมต์ ในขณะเดียวกัน Agent อาจขอการยืนยันการเรียกใช้เครื่องมืออีกหลายครั้งเนื่องจากต้องเรียกใช้คำสั่ง Shell
ในระหว่างที่รอ เราก็สามารถออกแบบต่อได้โดยการจัดคิวพรอมต์ เช่น เราสามารถใช้โอกาสนี้เพื่อเพิ่มข้อกำหนดใหม่ที่พลาดไปในพรอมต์เดิมได้
Add a 60-seconds countdown timer and an in-memory high-score tracker to enhance the arcade game experience. Combos should give a score bonus of 10% per combo number.
พรอมต์ที่อยู่ในคิวจะปรากฏในประวัติข้อความโดยมีหัวลูกศรเล็กๆ อยู่ด้านหน้า
นอกจากนี้ คุณอาจสังเกตเห็นว่าจำนวนอาร์ติแฟกต์เพิ่มขึ้นด้วย นอกจากแผนแล้ว Antigravity ยังจะสร้างรายการงาน (task.md) เพื่อติดตามแต่ละรายการที่ต้องนำไปใช้หรือดำเนินการ เมื่อเสร็จแล้วก็จะสร้างไฟล์คำแนะนำแบบทีละขั้นตอน (walkthrough.md) พร้อมคำอธิบายเกี่ยวกับวัตถุประสงค์ที่บรรลุ คุณตรวจสอบทั้งหมดนี้ได้โดยใช้คำสั่ง /artifact อีกครั้ง
ตัวอย่างไฟล์ task.md หลังจากติดตั้งใช้งานเกมฐานเสร็จสมบูรณ์มีดังนี้
คุณสามารถเปิดไฟล์เหล่านี้และเพิ่มความคิดเห็นได้ทุกเมื่อ ซึ่งเมื่อส่งไปยังตัวแทน ระบบจะจัดคิวเพื่อดำเนินการเช่นเดียวกับพรอมต์ที่จัดคิวไว้ แนวทางปฏิบัติแนะนำคือการแสดงความคิดเห็นในไฟล์เหล่านี้เพื่อให้ตัวแทนมีบริบทเพิ่มเติมเกี่ยวกับคำขอของคุณ
เมื่อสร้างไบนารีเรียบร้อยแล้ว คุณควรเห็นข้อความคล้ายกับข้อความต่อไปนี้
ลองเรียกใช้เกมเพื่อดูว่าเกมทำงานได้ตามที่คาดไว้หรือไม่ คุณควรดำเนินการจากภายในพรอมต์ของ Agent คุณเปลี่ยนพรอมต์เป็น "โหมดเชลล์" ได้โดยพิมพ์เครื่องหมายอัศเจรีย์ "!"
คุณจะเห็นข้อความ "เปิดใช้งานโหมด Bash แล้ว" ใต้พรอมต์ กด Enter เพื่อเรียกใช้คำสั่ง การเรียกใช้ไบนารีในโหมดนี้จะช่วยให้คุณได้รับประโยชน์ที่เอเจนต์จะ "ดู" เอาต์พุตใดๆ ไปยังเทอร์มินัล ดังนั้นในกรณีที่เกมทำงานไม่สำเร็จหรือขัดข้องกะทันหัน คุณไม่จำเป็นต้องอธิบายปัญหาที่เกิดขึ้นกับเอเจนต์ โดยจะได้รับข้อมูลทั้งหมดที่ต้องการจากบริบทของเชลล์ทันที
ลองเล่นเกมและปรับแต่งพารามิเตอร์ของเกมจนกว่าคุณจะพอใจกับประสบการณ์การใช้งาน (เช่น ทำให้ภาพเคลื่อนไหวเร็วขึ้นหรือช้าลง ปรับวิธีตอบสนองต่อคำสั่ง ฯลฯ)
ตัวอย่างเช่น พรอมต์นี้จะปรับปรุงประสบการณ์การใช้งานโดยการเพิ่มโหมดการช่วยเหลือพิเศษและคำสั่งแป้นพิมพ์ใหม่
Update the implementation to include: 'Q' to quit, 'F' for full-screen
and 'A' for Accessibility Mode: swap GCP logos for high-contrast coloured blocks.
Also enable Arrow Keys to move the selection cursor and Space to select the gem to
swap (space is pressed once to select, then arrow key immediately makes
the move - no need to press space again).
Use a golden square (4 px border, transparent fill) with a simple animation
to highlight where the cursor is at the moment.
เมื่อขัดเกลาเสร็จแล้ว ให้ไปที่ส่วนถัดไปเพื่อแปลงเป็นเว็บแอป
5. ปรับเกมให้ทำงานบนเว็บเบราว์เซอร์
ขณะนี้เกม Ebitengine เป็นแอปพลิเคชันบนเดสก์ท็อป มาขอให้ Antigravity CLI ปรับให้ทำงานในเว็บเบราว์เซอร์โดยใช้ WebAssembly (WASM) กัน ซึ่งจะเกี่ยวข้องกับการคอมไพล์โค้ด Go สำหรับเป้าหมายเบราว์เซอร์และการตั้งค่าเว็บเซิร์ฟเวอร์พื้นฐาน
ใช้พรอมต์ต่อไปนี้เพื่อเป็นแนวทางให้ตัวแทน
We need to enable this game to run on a web browser. Compile the game to WASM
and create a Go web server to serve the compiled WASM and the assets.
โปรดทราบว่า Agent จะพยายามค้นหาไฟล์ชื่อ wasm_exec.js ในระบบไฟล์ ซึ่งเป็นเรื่องปกติและคุณต้องอนุญาต เนื่องจากไฟล์นี้เป็น Wrapper ที่อนุญาตให้เรียกใช้ไบนารี Go ผ่าน JS เช่น
เมื่อเอเจนต์ทำงานเสร็จแล้ว คุณสามารถสั่งให้เอเจนต์เรียกใช้เซิร์ฟเวอร์เกมในเบื้องหลังได้
ตอนนี้ให้เปิด http://localhost:8080 ในเบราว์เซอร์เพื่อดูเกมที่ทำงานบนเว็บ
ตอนนี้คุณใช้งานบนเว็บได้แล้ว มาขัดเกลาให้เรียบร้อยก่อนที่จะนำไปใช้งานบนระบบคลาวด์กัน
6. สร้างหน้าจอชื่อและลีดเดอร์บอร์ด
เกมทำงานได้ แต่ยังขาดฟีเจอร์สำคัญบางอย่างเพื่อให้ได้ประสบการณ์การเล่นเกมอาร์เคดที่เหมาะสม ก่อนอื่นมาเพิ่มหน้าจอชื่อเกมกัน แล้วค่อยเพิ่มลีดเดอร์บอร์ดเพื่อให้คุณแข่งกับเพื่อนๆ ได้ ใช้พรอมต์ต่อไปนี้
Create a title screen that displays the game logo (logo.png) over the cloud background.
The logo should be centered and occupy no more than 75% of the screen area.
The title screen should display "Press ENTER to play" (black/bold) right below the logo,
with every letter animated in a slow wavy (cosine) pattern.
Once the player presses ENTER, it should be prompted to add their name, which
will then be recorded to populate the leaderboard at the end of the round.
Once the game is over, play the animated leaderboard with the top 10 highest scores.
The animated leaderboard should render entries one by one up to 10 entries,
using a fade in effect just like old school arcade games. The leaderboard
should fade out to the title screen after 15 seconds.
Please note that name entry should be processed independently of the play state
key handlers (e.g. pressing A during name entry should not toggle accessibility mode).
Leaderboard scores should be saved in-memory, server-side.
ตอนนี้ช่องของคุณดูเป็นมืออาชีพมากขึ้นแล้ว 🙂
7. ติดตั้งใช้งานเกมใน Cloud Run
ในที่สุดก็ถึงเวลาแชร์ผลงานของเรากับคนทั่วโลกแล้ว เราจะติดตั้งใช้งานแอปพลิเคชันทั้งหมดใน Google Cloud Run เพื่อให้เข้าถึงได้จากทุกที่
Use the gcloud CLI to provision and deploy the Go web server and its assets to
Google Cloud Run. Provide the live URL when complete.
เนื่องจากตอนนี้เกมพร้อมให้เล่นบนระบบคลาวด์แล้ว เราจึงไม่ควรพลาดโอกาสที่จะอนุญาตให้เล่นเกมบนอุปกรณ์เคลื่อนที่ คุณทำได้โดยใช้พรอมต์ต่อไปนี้
Now enable this game to run on mobile devices. You need to update the input system to handle "taps" as well as key presses and clicks. Since mobile devices most likely won't have a keyboard, add a virtual keyboard to the name entry screen and a confirmation button to the name entry.
Finally, generate a QR code for the CloudRun link and display it on the screen so that people can scan it to access the mobile version and compete against their friends for the high score.
เรียกใช้เกมอีกครั้งในเบราว์เซอร์ ลองเข้าถึง URL จากอุปกรณ์เคลื่อนที่ด้วย (คุณอาจต้องสร้างคิวอาร์โค้ดเพื่อลดความซับซ้อนของประสบการณ์นี้)
8. ใช้เอเจนต์เบราว์เซอร์เพื่อทดสอบเกม
แม้ว่าเกมมักจะทดสอบโดยอัตโนมัติได้ยากเนื่องจากต้องอาศัยภาพ แต่เราก็ยังใช้การทำงานอัตโนมัติบางอย่างเพื่อให้แน่ใจว่าการทำให้ใช้งานได้ทำงานได้อย่างถูกต้องและเรามีองค์ประกอบพื้นฐานพร้อมใช้งาน
เราจะใช้ Subagent ของเบราว์เซอร์เพื่อดำเนินการนี้ ใน Antigravity Subagent คือตัวตนที่แยกออกมาพร้อมบริบทใหม่ เหมาะสำหรับงานที่คุณไม่ต้องการให้บริบทปัจจุบันมีอิทธิพลต่อผลลัพธ์ หรือเมื่อคุณต้องการป้องกันไม่ให้งาน "ปนเปื้อน" หน้าต่างบริบทหลัก
Browser Agent เป็น Agent พิเศษในตัวสำหรับงานที่เกี่ยวข้องกับเบราว์เซอร์ โปรดทราบว่าสำหรับขั้นตอนนี้เท่านั้น เราต้องใช้แอป Antigravity บนเดสก์ท็อปเนื่องจากขณะนี้เอเจนต์เบราว์เซอร์ยังไม่พร้อมใช้งานในบรรทัดคำสั่ง
เปิดแอป Antigravity บนเดสก์ท็อปแล้วเริ่มการสนทนาใหม่ในโปรเจ็กต์ Cloud Crush โดยทำดังนี้
คุณเรียกใช้ Agent ย่อยของเบราว์เซอร์ได้โดยพิมพ์ /browser ตามด้วยพรอมต์นี้
Go to http://localhost:8080 and capture screenshots of the following game screens:
1. Title Screen (initial state: "PRESS ENTER TO PLAY")
2. Name Entry Screen (press Enter to reach this screen)
3. Main Gameplay Screen (type a name like "PLAYER" and press Enter to start)
4. Leaderboard Screen (let the game timer run out to view the high scores)
แนวทางนี้ช่วยให้เราใช้ภาพหน้าจอเพื่อแก้ไของค์ประกอบของ UI ที่อธิบายได้ยากหากใช้ข้อความเพียงอย่างเดียว
คุณอ้างอิงไฟล์ได้โดยใช้สัญลักษณ์ "@" ตามด้วยชื่อไฟล์ ตัวอย่างเช่น ในที่นี้เราขอให้เอเจนต์เพิ่มขนาดโลโก้ในหน้าจอชื่อ
แม้ว่าตัวอย่างนี้จะดูซับซ้อนไปบ้างเนื่องจากโมเดลไม่จำเป็นต้อง "เห็น" รูปภาพเพื่อใช้การแก้ไขขนาด 50% แต่ก็เป็นเทคนิคที่มีประโยชน์ในการปรับ UI ในกรณีที่อธิบายปัญหาในรูปแบบข้อความได้ยากกว่า นอกจากนี้ ยังช่วยให้ Agent ตรวจสอบงานของตนเองได้โดยการถ่ายภาพหน้าจอก่อนและหลังการดำเนินการ ดังนั้นอย่าลืมเก็บเคล็ดลับนี้ไว้ในกล่องเครื่องมือของคุณ
9. สร้างเอเจนต์ที่กำหนดเองเพื่อรักษาความปลอดภัยของเกม
ข้อกังวลที่พบบ่อยอย่างหนึ่งเกี่ยวกับการใช้งานที่ "เข้ากับไวบ์" คือวิธีรักษาคุณภาพสูงและแนวทางปฏิบัติแนะนำจากทั้งมุมมองด้านการเขียนโค้ดและความปลอดภัย แม้ว่าคุณจะพยายามปรับปรุงพรอมต์ให้เข้มงวดในทั้ง 2 ด้านนี้ แต่ยิ่งเพิ่มข้อความลงในพรอมต์มากเท่าใด เอเจนต์ก็จะยิ่งโฟกัสได้น้อยลง ซึ่งมักจะส่งผลให้ได้ผลลัพธ์ที่ไม่ดีเท่าที่ควร
สำหรับสถานการณ์ประเภทนี้ การใช้ตัวแทนย่อยเป็นตัวเลือกที่เหมาะที่สุด เนื่องจากตัวแทนย่อยสามารถมุ่งเน้นที่งานที่คุณมอบหมายให้ได้ มาสร้าง Agent ที่กำหนดเองเพื่อตรวจสอบความปลอดภัยของโค้ดนี้ และตรวจสอบว่าเราไม่ได้เปิดเผยข้อมูลเข้าสู่ระบบหรือทำให้ตัวเองมีความเสี่ยงที่ไม่จำเป็นขณะที่ติดตั้งใช้งานเกมนี้
พรอมต์นี้เป็นพื้นฐานที่ดีสำหรับเอเจนต์
create a new subagent called "security_auditor" using the following instructions:
You are a ruthless Security Auditor. Your job is to analyze code for potential vulnerabilities.
Focus on:
1. SQL Injection
2. XSS (Cross-Site Scripting)
3. Hardcoded credentials
4. Unsafe file operations
When you find a vulnerability, explain it clearly and suggest a fix. Do not fix it yourself; just report it.
โปรดทราบว่า Antigravity จะใช้เครื่องมือ "DefineSubagent" เพื่อสร้างตัวแทนใหม่
ขอให้ตัวแทนตรวจสอบความปลอดภัยของรหัสเกมโดยใช้ข้อความแจ้งต่อไปนี้
Run the security auditor agent in this code
คุณควรเห็นข้อความคล้ายกับข้อความต่อไปนี้
เมื่อเอเจนต์ทำงานเสร็จแล้ว คุณควรเห็นรายงานลักษณะนี้
เรามาขอให้ Antigravity แก้ไขให้เรากันดีกว่า 🙂
Fix these findings for me please!
และนี่
โปรดทราบว่าเอเจนต์ที่สร้างด้วยวิธีนี้จะใช้งานได้เฉพาะในช่วงเวลาของการสนทนาเท่านั้น หากต้องการมีเอเจนต์ที่ "ใช้ซ้ำได้" ระหว่างเซสชัน คุณสามารถสร้างเอเจนต์โดยใช้ไฟล์การกำหนดค่า ดูข้อมูลเพิ่มเติมได้ที่คำสั่ง /agents
10. บทสรุป
ยินดีด้วย คุณใช้ Antigravity CLI เพื่อสร้าง ทดสอบ และตรวจสอบเกมอาร์เคดได้สำเร็จแล้ว ซึ่งแสดงให้เห็นเวิร์กโฟลว์ที่เป็น Agent ขั้นสูงตั้งแต่การจัดโครงสร้างเริ่มต้นไปจนถึงการทำให้ใช้งานได้
ล้าง
โปรดลบทรัพยากรที่สร้างขึ้นระหว่างการทำ Codelab นี้เพื่อหลีกเลี่ยงการเรียกเก็บเงินอย่างต่อเนื่องในบัญชี Google Cloud
- ลบบริการ Cloud Run
I'm finished with this project. Delete the cloud run deployment.
- ลบไดเรกทอรีโปรเจ็กต์
cd .. && rm -rf codelab-match3
หรือคุณจะลบทั้งโปรเจ็กต์ Google Cloud ก็ได้หากสร้างขึ้นเพื่อ Codelab นี้โดยเฉพาะ
ขั้นตอนถัดไป
คุณสามารถเรียนรู้ต่อได้โดยการสำรวจ Codelab อื่นๆ ในแพลตฟอร์มนี้ หรือปรับปรุง Cloud Crush ด้วยตนเอง เพียงอย่าลืมล้างข้อมูลทรัพยากรเมื่อใช้งานเสร็จแล้ว
ขอให้สนุกกับการเขียนโค้ด