เริ่มต้นใช้งานการพัฒนาที่ขับเคลื่อนด้วยข้อกำหนดใน Antigravity

1. วัตถุประสงค์ของห้องทดลองนี้

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

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

• ทำความเข้าใจพื้นฐานของ Google Antigravity
• ทำความเข้าใจพื้นฐานของการพัฒนาที่อิงตามข้อกำหนด
• ดูวิธีทำให้แอปใช้งานได้ง่ายๆ ใน Cloud Run

รูปที่ 1: Antigravity เป็นเครื่องมือพัฒนาแบบ Agent First ที่ Google พัฒนาขึ้น

2. การตั้งค่าสภาพแวดล้อม

1. ติดตั้ง Antigravity โดยทำดังนี้

                      👉Download the  [Google Antigravity](https://antigravity.google/docs/get-started) for your environment from  [here](https://antigravity.google/).
   

👉ติดตั้ง Antigravity ในสภาพแวดล้อมของคุณ

👉ไปที่โฟลเดอร์ที่ติดตั้ง Antigravity แล้วดับเบิลคลิกเพื่อเปิดโปรแกรมติดตั้ง

👉ทำตามวิธีการของโปรแกรมติดตั้งเพื่อติดตั้ง Antigravity ในสภาพแวดล้อมของคุณ

2. ติดตั้ง Python

👉ไปที่ https://www.python.org/downloads/ แล้วติดตั้ง Python สำหรับระบบของคุณ

3. ติดตั้ง gcloud

👉gcloud เป็นเครื่องมือบรรทัดคำสั่งที่ช่วยให้คุณดำเนินการต่างๆ ใน Google Cloud ได้ ทำตามวิธีการที่นี่เพื่อติดตั้ง gcloud ในสภาพแวดล้อมของคุณ

👉เมื่อติดตั้งแล้ว ให้ทดสอบการติดตั้งโดยเปิดเทอร์มินัลของระบบแล้วพิมพ์ gcloud ในเทอร์มินัล

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

3. การตั้งค่าโปรเจ็กต์

คุณสามารถรับเครดิต Google Cloud เพื่อเรียกใช้ Lab นี้ได้ คลิกที่นี่เพื่อรับเครดิต โปรดดูที่นี่เพื่อตรวจสอบวิธีอ้างสิทธิ์รับเครดิต Google Cloud

• หากยังไม่มีโปรเจ็กต์ที่ใช้ได้ คุณจะต้องสร้างโปรเจ็กต์ใหม่ในคอนโซล GCP เลือกโปรเจ็กต์ที่ตัวเลือกโปรเจ็กต์ (ด้านซ้ายบนของ Google Cloud Console)

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

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

gcloud auth list

• เรียกใช้คำสั่งต่อไปนี้ใน Cloud Shell เพื่อยืนยันโปรเจ็กต์

gcloud config list project

• คัดลอกรหัสโปรเจ็กต์และใช้คำสั่งต่อไปนี้เพื่อตั้งค่า

gcloud config set project <YOUR_PROJECT_ID>

• หากจำรหัสโปรเจ็กต์ไม่ได้ คุณสามารถแสดงรหัสโปรเจ็กต์ทั้งหมดได้โดยใช้คำสั่งต่อไปนี้

gcloud projects list

4. เปิดใช้ API

เราต้องเปิดใช้บริการ API บางอย่างเพื่อเรียกใช้แล็บนี้ เรียกใช้คำสั่งต่อไปนี้ใน Cloud Shell

gcloud services enable aiplatform.googleapis.com
gcloud services enable cloudresourcemanager.googleapis.com

ขอแนะนำ API

• Vertex AI API (aiplatform.googleapis.com) ช่วยให้เข้าถึงแพลตฟอร์ม Vertex AI ได้ ทำให้แอปพลิเคชันของคุณโต้ตอบกับโมเดล Gemini เพื่อสร้างข้อความ เซสชันแชท และการเรียกใช้ฟังก์ชันได้
• Cloud Resource Manager API (cloudresourcemanager.googleapis.com) ช่วยให้คุณจัดการข้อมูลเมตาสำหรับโปรเจ็กต์ Google Cloud แบบเป็นโปรแกรมได้ เช่น รหัสและชื่อโปรเจ็กต์ ซึ่งมักจะต้องใช้ในเครื่องมือและ SDK อื่นๆ เพื่อยืนยันข้อมูลประจำตัวและสิทธิ์ของโปรเจ็กต์

5. ยืนยันว่าระบบใช้เครดิตของคุณแล้ว

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

curl -s https://raw.githubusercontent.com/haren-bh/gcpbillingactivate/main/activate.py | python3

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

รูปที่ 3: การยืนยันการลิงก์บัญชีสำหรับการเรียกเก็บเงิน

6. ข้อมูลเบื้องต้นเกี่ยวกับ Google Antigravity

Google Antigravity เป็นเครื่องมือพัฒนาซอฟต์แวร์ที่เน้น AI เป็นอันดับแรกซึ่งพัฒนาโดย Google DeepMind Google Antigravity ใช้ความรู้ด้านการพัฒนาซอฟต์แวร์ที่สะสมมาเป็นเวลานานร่วมกับ AI ที่ล้ำสมัยเพื่อมอบประสบการณ์การพัฒนาที่ราบรื่นและไร้รอยต่อซึ่งขับเคลื่อนด้วย AI สำหรับนักพัฒนาแอป

ฟีเจอร์หลักบางส่วนของ Google Antigravity มีดังนี้

รูปภาพด้านล่างแสดงองค์ประกอบพื้นฐานของ Google Antigravity

1. 👉เปิดเบราว์เซอร์และเริ่มสำรวจส่วนต่างๆ ของเบราว์เซอร์

รูปที่ 4: องค์ประกอบพื้นฐานของ Google Antigravity รายละเอียดในตารางที่ 1

ตารางที่ 1: รายละเอียดของคอมโพเนนต์พื้นฐานใน Google Antigravity

Component Index	Component Name	Function
1	Agent Manager	Provide access to your agent manager where you can manage all your agents
2	Toggle Agent Pane	Toggles and untoggles your agent pane
3	New Session	Starts a new Agent Conversation while keeping old ones separately.
4	Past Conversations	Retrieve previous conversations
5	Agent Pane	The agent pane where you can have conversation with the AI agent
6	Explorer	File explorer

1. โมเดล Gemini 3 และ Nanobanana ในตัว: Google Antigravity ช่วยให้คุณใช้โมเดลเรือธงล่าสุดของ Google เช่น Gemini 3 และ Nanobanana ได้ นอกจากโมเดลเหล่านั้นแล้ว คุณยังใช้โมเดลของบุคคลที่สาม เช่น Claude ได้ด้วย

รูปที่ 5: คุณเลือกใช้โมเดลต่างๆ ได้มากมายใน Google Antigravity 2 การเขียนโค้ดที่ขับเคลื่อนด้วยเอเจนต์: Antigravity มอบประสบการณ์การเขียนโค้ดที่ขับเคลื่อนด้วยเอเจนต์แบบเนทีฟ ซึ่งช่วยให้นักพัฒนาแอปทำงานได้อย่างมีประสิทธิภาพโดยไม่รบกวนการทำงาน

1. การวางแผนและการควบคุมของผู้ใช้แบบเต็ม: เอเจนต์จะรับข้อมูลที่คุณป้อนและแปลงงานเป็นแผนที่เอเจนต์จะขออนุมัติจากคุณก่อนดำเนินการ เพื่อให้มั่นใจว่าผู้ใช้จะเปลี่ยนทิศทางของเอเจนต์ได้ทุกเมื่อก่อนที่จะมีการดำเนินการงาน
2. ความคิดเห็นของผู้ใช้:ในระหว่างการดำเนินการของเอเจนต์ ผู้ใช้สามารถให้ความคิดเห็นแก่เอเจนต์ได้หากต้องการให้คำสั่งเพิ่มเติมแก่เอเจนต์
3. Agent หลายตัว: คุณสามารถสร้าง Agent หลายตัวเพื่อทำงานต่างๆ พร้อมกันได้ ตัวอย่างเช่น เอเจนต์ A สามารถปรับโครงสร้างตรรกะการตรวจสอบสิทธิ์ของคุณได้ในขณะที่เอเจนต์ B เขียนการทดสอบหน่วยสำหรับ API ใหม่ และเอเจนต์ C กำลังค้นคว้าไลบรารีในเบื้องหลัง
4. Agent ในเครื่องมือแก้ไข เทอร์มินัล และเบราว์เซอร์: Agent ของ Google Antigravity ทำงานในแพลตฟอร์มต่างๆ
5. เอดิเตอร์: ตัวแทนของ Google Antigravity จะเขียนโค้ดและแสดงโค้ดที่เขียนในเอดิเตอร์
6. เทอร์มินัล: ขึ้นอยู่กับงานที่ตัวแทน Google Antigravity อาจต้องเข้าถึงเทอร์มินัลของคุณเพื่อเรียกใช้คำสั่งบางอย่าง เอเจนต์สามารถเรียกใช้คำสั่งให้คุณได้เมื่อจำเป็น
7. เบราว์เซอร์: ตัวแทนยังสามารถทำงานกับเบราว์เซอร์ของคุณได้ด้วย ซึ่งจะมีประโยชน์อย่างยิ่งหากคุณต้องการทดสอบเว็บแอปพลิเคชัน โดยเอเจนต์จะเรียกใช้แอปพลิเคชันในเว็บเบราว์เซอร์ ทดสอบ และแก้ไขข้อบกพร่อง

7. ข้อมูลเบื้องต้นเกี่ยวกับการพัฒนาที่อิงตามข้อกำหนดของ AI

การพัฒนาที่ขับเคลื่อนด้วยข้อกำหนดเป็นกระบวนทัศน์ด้านวิศวกรรมซอฟต์แวร์ที่กำลังเกิดขึ้นใหม่ ซึ่งวางข้อกำหนดที่มีโครงสร้างและเอเจนต์ AI ไว้ที่แกนหลักของวงจรการพัฒนา SDD ให้ความสำคัญกับการรวบรวมข้อกำหนดอย่างละเอียด การออกแบบระบบ/สถาปัตยกรรม และการวางแผนการทดสอบ ซึ่งแตกต่างจากแนวทาง "พรอมต์และแก้ไข" (ลองผิดลองถูก) ที่พบได้ทั่วไปในการเขียนโค้ด AI ขั้นพื้นฐาน โดยจะยึดมั่นในความเข้มงวดของระยะการออกแบบโมเดลแบบน้ำตก แต่จะผสานรวมเข้ากับลูปการทำซ้ำแบบ Agile ที่ทันสมัยผ่านการทำงานอัตโนมัติ แม้ว่ากระบวนการนี้จะกำหนดให้คุณต้องวางแผนและจัดทำเอกสารอย่างละเอียดล่วงหน้า แต่จริงๆ แล้วกระบวนการนี้เป็นกระบวนการแบบวนซ้ำ เนื่องจากเอเจนต์ AI ช่วยให้การติดตั้งใช้งานและการทดสอบเป็นไปอย่างรวดเร็ว ซึ่งจะช่วยให้คุณได้รับความคิดเห็นที่รวดเร็วขึ้นและนำไปใช้ปรับปรุงเอกสารประกอบได้

ปรัชญาหลัก

ในโมเดลนี้ วิศวกรที่เป็นมนุษย์จะเปลี่ยนจาก "ผู้เขียนโค้ด" เป็น "สถาปนิกของระบบ" ความรับผิดชอบหลักของมนุษย์คือการอธิบายปัญหาและวิธีแก้ปัญหาอย่างละเอียด เอาต์พุตแบบละเอียดนี้ทำหน้าที่เป็นแหล่งข้อมูลที่เชื่อถือได้แหล่งเดียว (SSOT) ซึ่งเอเจนต์ AI ใช้เพื่อสร้าง ยืนยัน และปรับแต่งโค้ดเบส

วงจร SDD

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

1. การรวบรวมข้อกำหนด: การระบุตรรกะทางธุรกิจ ความต้องการของผู้ใช้ และข้อจำกัดของระบบอย่างชัดเจน
2. การออกแบบสถาปัตยกรรม: การกำหนดโครงสร้างระบบ โมเดลข้อมูล และจุดผสานรวม
3. ข้อกำหนดของระบบและการทดสอบ: การสร้างเอกสารที่เครื่องอ่านได้ (หรือมีโครงสร้างสูง) ซึ่งกำหนดสิ่งที่ระบบทำและวิธีการตรวจสอบความถูกต้อง
4. การสร้างโค้ดอัตโนมัติ: เอเจนต์ AI จะใช้ข้อกำหนดเพื่อสร้างโค้ดที่พร้อมใช้งานจริง
5. การทดสอบและการตรวจสอบ: ชุดทดสอบอัตโนมัติจะตรวจสอบโค้ดที่สร้างขึ้นเทียบกับข้อกำหนดการทดสอบ

หลักการในการดำเนินการที่สำคัญ

1. วงจรการออกแบบและการติดตั้งใช้งาน

ขั้นตอนที่ 1-5 ไม่ใช่เส้นทางเชิงเส้น แต่เป็นวงจรความคิดเห็นอย่างต่อเนื่อง เนื่องจากการสร้างโค้ด (ขั้นตอนที่ 4) และการทดสอบ (ขั้นตอนที่ 5) ส่วนใหญ่เป็นแบบอัตโนมัติ ทีมวิศวกรจึงสามารถเปลี่ยนแบนด์วิดท์ส่วนใหญ่ไปใช้ใน 3 ขั้นตอนแรกได้ เมื่อพบข้อบกพร่องหรือมีการเปลี่ยนแปลงฟีเจอร์ วิศวกรจะอัปเดตข้อกำหนด ไม่ใช่โค้ด และเรียกใช้ลูปอีกครั้ง

2. ความละเอียดแบบโมดูล

ต้องใช้ SDD กับโมดูลแบบละเอียดแทนที่จะใช้กับบล็อกแบบ Monolithic เพื่อรักษาความสมบูรณ์ของระบบ

• การแยก: หากโมดูลใดโมดูลหนึ่งไม่ผ่านการตรวจสอบ คุณจะต้องระบุและสร้างโมดูลนั้นใหม่เท่านั้น
• ความสามารถในการปรับขนาด: โมดูลขนาดเล็กที่กำหนดไว้อย่างดีจะป้องกัน "ภาพหลอน" ของ AI และช่วยให้มั่นใจว่าหน้าต่างบริบทของเอเจนต์ AI จะยังคงมุ่งเน้นและถูกต้อง

3. การควบคุมคุณภาพ

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

ในแล็บนี้ เราจะมาดูพื้นฐานของการพัฒนาที่ขับเคลื่อนด้วยข้อกำหนดโดยใช้ Google Antigravity

8. การพัฒนาเว็บแอปพลิเคชันด้วย Google Antigravity

ในแล็บนี้ เราจะสร้างแอปพลิเคชันแกลเลอรีรูปภาพอย่างง่าย Nanobanana ซึ่งเป็นโมเดลการสร้างรูปภาพได้รับการสร้างขึ้นภายใน Google Antigravity เราจะใช้ Nanobanana เพื่อสร้างรูปภาพที่จำเป็น

ตั้งค่าเว็บเบราว์เซอร์

ระบบจะใช้เว็บเบราว์เซอร์เพื่อทดสอบแอปโดยอัตโนมัติ ในขั้นตอนด้านล่าง เราจะตั้งค่าเบราว์เซอร์เพื่อให้ Antigravity ทดสอบแอปพลิเคชันได้โดยอัตโนมัติ

1. 👉คลิกปุ่มการตั้งค่า (ไอคอนรูปเฟือง) ที่มุมขวาบน แล้วเลือก "เปิดการตั้งค่าผู้ใช้ Antigravity"
2. 👉คลิกเอเจนต์ในแผงด้านซ้าย แล้วในส่วน ARTIFACT ให้ตรวจสอบนโยบาย เลือก "ดำเนินการต่อเสมอ"
3. 👉คลิกเบราว์เซอร์ในแผงด้านซ้ายและตรวจสอบว่าได้เปิดใช้ "เปิดใช้เครื่องมือเบราว์เซอร์" แล้ว

สร้างแอปพลิเคชันด้วย Google Antigravity

1. 👉เปิด Google Antigravity โดยคลิกไอคอน Google Antigravity
2. 👉สร้างโฟลเดอร์ชื่อ "Gallery" ในโฟลเดอร์ส่วนตัว เช่น เดสก์ท็อป
3. 👉กด "เปิดโฟลเดอร์" ใน Antigravity แล้วเลือกโฟลเดอร์แกลเลอรี ซึ่งจะเป็นการเปิดพื้นที่ทำงานใหม่ในโฟลเดอร์แกลเลอรี
4. 👉หากแผงตัวแทนยังไม่ได้เปิด ให้เปิดโดยคลิกปุ่ม "สลับแผงตัวแทน" ดูรูปที่ 4 ปุ่มหมายเลข 2
5. 👉คุณเริ่มเขียนโค้ดได้โดยพิมพ์คำสั่งในแผงตัวแทน การทำให้วิธีการชัดเจนที่สุดเท่าที่จะเป็นไปได้เป็นสิ่งสำคัญอย่างยิ่ง ป้อนข้อมูลต่อไปนี้ในแผงตัวแทน

    **English Version:**
   

Create a photo granary with following specs.

1. Visual Design & Layout
Title: The gallery must prominently display the title "My photo gallery" at the top.
Modern Grid: Images will be arranged in a responsive grid that spans the full width of the browser.
Clean Aesthetic: Use a minimalist design with consistent spacing (margins/padding) between photos and no heavy borders or shadows.
Image Scaling: Photos will automatically adjust their size to fit any screen (mobile to desktop) while maintaining their focus using modern CSS cropping techniques.

2. Photo Content
Quantity: The page will feature a total of 20 photos. 
Nature Themes: The collection will include a diverse range of nature photography:
Landscape: Mountains, deserts, and forests.
Water: Waterfalls, oceans, and lakes.
Atmosphere: Northern lights, sunsets, and starry skies.
Macro: Close-ups of flowers, leaves, and moss.
Generate all the needed photos

3. Core Functionality (The "Lightroom" Effect)
Full-Screen View: Clicking any photo triggers a "Lightbox" mode where the background dims and the selected image appears in high resolution at the center of the screen.
Manual Navigation:
Right Arrow: Swaps the current view to the next image.
Left Arrow: Swaps the current view to the previous image.
Infinite Loop: Navigation is continuous; moving "next" from the 20th photo returns the user to the 1st photo.
Exit Strategy: Users can exit the full-screen view by clicking a "Close" button or tapping the dimmed area outside the image.

4. Technical Constraints (Strict)
Vanilla JavaScript Only: Absolutely no external libraries or frameworks (like jQuery, React, or Bootstrap). All logic must be written in raw, standard JavaScript.
Native HTML & CSS: Use only the built-in capabilities of modern web browsers to handle the layout and animations.
Zero Dependencies: The app should function perfectly as a standalone project with no need to download or link to outside scripts.

5. Perform the following tests
Open the App in a web browser
Click on the images and see the image opens in the lightbox
Check the navigation

เวอร์ชันภาษาญี่ปุ่น:

以下の仕様でフォトギャラリーを作成してください。
1. ビジュアルデザインとレイアウト
タイトル: ページ上部に「My photo gallery」というタイトルを大きく表示すること。
モダンなグリッド: ブラウザの全幅に広がる、レスポンシブなグリッドレイアウトで画像を配置すること。
クリーンな審美性: ミニマリストなデザインを採用し、写真間の余白（マージン/パディング）を一定に保つこと。重い枠線やドロップシャドウは使用しない。
画像のスケーリング: モダンなCSSのトリミング技術（object-fitなど）を使用し、モバイルからデスクトップまで、フォーカスを維持したまま画面サイズに合わせて自動調整されるようにすること。

2. 写真の内容
枚数: 合計20枚の写真を掲載。
自然のテーマ: 多様な自然写真のコレクションにすること。
風景: 山、砂漠、森林。
水: 滝、海、湖。
空気・雰囲気: オーロラ、夕焼け、星空。
マクロ: 花、葉、苔の接写。
画像生成: 2枚の画像を生成し、それらを繰り返して20箇所に配置すること。

3. コア機能（ライトボックス・エフェクト）
全画面表示: 写真をクリックすると「ライトボックス」モードが起動し、背景が暗転して選択された画像が画面中央に高解像度で表示されること。
手動ナビゲーション:
右矢印: 次の画像に切り替え。
左矢印: 前の画像に切り替え。
無限ループ: ナビゲーションは連続的であること。20枚目の写真で「次へ」を押すと1枚目に戻る仕様。
終了方法: 「閉じる」ボタンをクリックするか、画像外の暗転したエリアをタップすることで全画面表示を終了できること。

4. 技術的制約（厳守）
純正JavaScript限定: 外部ライブラリやフレームワーク（jQuery、React、Bootstrapなど）は一切使用禁止。すべてのロジックは標準のJavaScript（生コード）で記述すること。
ネイティブのHTML & CSS: レイアウトやアニメーションには、モダンブラウザの標準機能のみを使用すること。
依存関係ゼロ: 外部スクリプトのダウンロードやリンクを必要とせず、単体で完全に動作するプロジェクトにすること。

5. 以下のテストを実行します
ウェブブラウザでアプリを開きます
画像をクリックすると、ライトボックスで画像が開きます
ナビゲーションを確認します

6. 👉คลิกปุ่มเรียกใช้ เมื่อเรียกใช้ Agent แล้ว Agent ควรแสดงแผนการดำเนินการดังที่แสดงด้านล่าง

รูปที่ 5: Antigravity agent จะแสดงแผนการติดตั้งใช้งาน

7. 👉คุณจะได้รับแจ้งให้ยืนยัน โปรดยืนยันเมื่อได้รับแจ้งตามด้านล่าง Antigravity จะใช้ Nanobanana และโมเดล LLM ที่เลือกโดยอัตโนมัติเพื่อทำงาน

รูปที่ 6: Antigravity ต้องการเรียกใช้คำสั่ง ให้กดเรียกใช้เพื่ออนุญาตให้เรียกใช้

รูปที่ 7: กด "ยอมรับทั้งหมด" เมื่อได้รับแจ้ง

8. 👉หลังจากสร้างโค้ดแล้ว Antigravity จะเปิดเบราว์เซอร์และเริ่มทดสอบ หลังจากทดสอบแล้ว เครื่องมือควรแสดงผลการทดสอบให้คุณทราบ รูปที่ 8: Antigravity จะแสดงผลการทดสอบ
9. 👉หากได้รับข้อความแจ้ง ให้กด "ยอมรับทั้งหมด" เพื่อบันทึกโค้ดทั้งหมดที่สร้างขึ้นในแผงตัวแทน
10. 👉ในแผง Explorer ของ Antigravity คุณควรมีโค้ดที่เพิ่งสร้างขึ้น รูปที่ 9: โค้ดสุดท้าย
11. 👉หากต้องการทดสอบแอปพลิเคชัน ให้คลิกขวาที่ index.html จากนั้นรับเส้นทางของไฟล์และวางเส้นทางในแถบ URL ของเว็บเบราว์เซอร์

รูปที่ 10: หากต้องการทดสอบแอป ให้คัดลอกเส้นทางของไฟล์ index.html ในเว็บเบราว์เซอร์

9. ตั้งค่าสภาพแวดล้อมสำหรับการติดตั้งใช้งาน

1. 👉รับรหัสโปรเจ็กต์ Google Cloud: ไปที่ https://console.cloud.google.com
2. 👉คลิกที่ด้านซ้ายบนและคัดลอกรหัสโปรเจ็กต์ไว้ที่ใดที่หนึ่ง เราจะใช้รหัสนี้ในขั้นตอนถัดไป รูปที่ 11: คัดลอกรหัสโปรเจ็กต์และเก็บไว้ที่ใดที่หนึ่งเพื่อใช้อ้างอิงในอนาคต
3. 👉ใน Antigravity ให้เปิดเทอร์มินัลโดยคลิกเทอร์มินัล->เทอร์มินัลใหม่จากเมนู
4. 👉เราต้องตั้งค่าตัวแปรสภาพแวดล้อมซึ่งแตกต่างกันสำหรับ Windows และ Mac/Linux แทนที่ "YOUR CLOUD PROJECT" ด้วยโปรเจ็กต์ที่จดไว้ในขั้นตอนที่ 2 หมายเหตุสำหรับผู้ใช้ Windows Powershell: เปิด Powershell ในโหมดผู้ดูแลระบบ

#This is only for Powershell users.

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

#For Windows (Powershell) follow the following steps.
$env:GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
$env:GOOGLE_CLOUD_LOCATION="us-central1"

#For Windows Command Prompt  follow the following steps.
set GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
set GOOGLE_CLOUD_LOCATION="us-central1"


#for Mac/Linux follow the following steps.
export GOOGLE_CLOUD_PROJECT="YOUR CLOUD PROJECT"
export GOOGLE_CLOUD_LOCATION="us-central1"

5. 👉เข้าสู่ระบบคอนโซล เมื่อระบบแจ้ง ให้เข้าสู่ระบบ Google Cloud ในเบราว์เซอร์

gcloud auth login
gcloud auth application-default login
gcloud config set project YOUR CLOUD PROJECT

รูปที่ 12: ทำการตรวจสอบสิทธิ์

6. 👉ติดตั้งเซิร์ฟเวอร์ MCP ของ Cloud Run คลิก "..." ที่ด้านขวาบนของหน้าต่าง Antigravity คุณควรเห็นตัวเลือก "เซิร์ฟเวอร์ MCP" ให้คลิกตัวเลือกนี้ เซิร์ฟเวอร์ MCP เปรียบเสมือนส่วนขยายสำหรับเอเจนต์ที่ช่วยให้เอเจนต์เข้าถึงข้อมูลและเครื่องมือภายนอกได้
7. 👉ป้อน "Cloud Run" ในช่องค้นหา แล้วคลิก "Cloud Run" รูปที่ 13: เซิร์ฟเวอร์ MCP ของ Cloud Run
8. 👉กลับไปที่แผงตัวแทนโดยกดปุ่มลูกศรย้อนกลับข้างชื่อเซิร์ฟเวอร์ MCP ตอนนี้เราก็เริ่มโต้ตอบกับ Google Cloud Run ได้แล้ว ป้อนข้อมูลต่อไปนี้ในแผงตัวแทน ซึ่งควรใช้เซิร์ฟเวอร์ MCP ของ Cloud Run โดยอัตโนมัติและแสดงรายการบริการที่ทำงานใน Cloud Run

Find me the list of services running in Cloud Run.

9. 👉ติดตั้งใช้งานแอปด้วยคำสั่งต่อไปนี้ คุณสามารถติดตั้งใช้งานได้ง่ายๆ โดยใช้ภาษาธรรมชาติ Antigravity จะใช้เซิร์ฟเวอร์ MCP เพื่อติดตั้งใช้งานโดยอัตโนมัติ

Deploy this gallery static web application to cloud run with service name "photogallery". Use nginx and assume nginx will use port 80

10. 👉ตัวแทนควรแสดงให้คุณเห็นว่าแอปได้รับการติดตั้งใช้งานที่ใด เช่น https://photogallery-85469421903.us-central1.run.app เซิร์ฟเวอร์ MCP บนระบบคลาวด์ช่วยให้การทำให้เว็บแอปใช้งานได้ใน Cloud Run เป็นเรื่องง่าย

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

ตอนนี้มาล้างข้อมูลที่เราเพิ่งสร้างกัน

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

รูปที่ 38: การลบแอป Cloud Run

11. บทสรุป

ยินดีด้วย คุณสร้างแอปโดยใช้ Google Antigravity ตามแนวทางปฏิบัติในการพัฒนาที่ขับเคลื่อนด้วยข้อกำหนดได้สำเร็จแล้ว นอกจากนี้ คุณยังได้เรียนรู้วิธีการติดตั้งใช้งานแอปพลิเคชันใน Cloud Run ด้วย นี่เป็นความสำเร็จที่สำคัญซึ่งครอบคลุมวงจรหลักของแอปพลิเคชันแบบ Cloud-Native สมัยใหม่ และช่วยให้คุณมีรากฐานที่มั่นคงสำหรับการติดตั้งใช้งานระบบที่ซับซ้อนของคุณเอง

สรุป

ในแล็บนี้ คุณได้เรียนรู้สิ่งต่อไปนี้

• สร้างแอปพลิเคชันแบบหลายเอเจนต์โดยใช้ Google Antigravity
• ทำให้แอปพลิเคชันใช้งานได้กับ Cloud Run

แหล่งข้อมูลที่เป็นประโยชน์

• เอกสารประกอบอย่างเป็นทางการของ Google Antigravity
• Cloud Run