1. บทนำ
Google Antigravity (ต่อไปในเอกสารนี้จะเรียกว่า Antigravity) เป็น IDE แบบเอเจนต์จาก Google ใน Getting started with Antigravity codelab คุณจะได้เรียนรู้พื้นฐานของ Antigravity ใน Codelab นี้ เราจะใช้ Antigravity เพื่อสร้างแอปพลิเคชันจริง เราจะเปลี่ยนจากการค้นหาบนเว็บอย่างง่ายไปเป็นการสร้างแอปพลิเคชันแบบฟูลสแต็กและการทดสอบหน่วยระดับองค์กร
ข้อกำหนดเบื้องต้น
- ติดตั้งและกำหนดค่า Google Antigravity แล้ว
- มีความเข้าใจพื้นฐานเกี่ยวกับ Google Antigravity ขอแนะนำให้ทำ Codelab การเริ่มต้นใช้งาน Google Antigravity ให้เสร็จสมบูรณ์
2. เกี่ยวกับกรณีการใช้งาน
เมื่อคุณมีความเข้าใจพื้นฐานเกี่ยวกับ Antigravity แล้ว เรามาดูตัวอย่างการใช้งาน 2-3 ตัวอย่างเพื่อดูการทำงานของฟีเจอร์นี้กัน โปรดทราบว่า Antigravity เป็นแพลตฟอร์มที่เน้น Agent เป็นอันดับแรก ซึ่งหมายความว่าในกรณีส่วนใหญ่ เราเพียงแค่ให้คำสั่งแก่เอเจนต์ จากนั้นเอเจนต์จะดำเนินการด้วยตนเอง ทำงาน ขอสิทธิ์หากจำเป็น สร้างอาร์ติแฟกต์ แล้วแจ้งให้เราทราบหากงานเสร็จสิ้น ด้วยเหตุนี้ เราจึงไม่สามารถสร้างเอาต์พุตทุกรายการของการสนทนากับเอเจนต์ในกรณีการใช้งานต่อไปนี้ เราจะแชร์วิธีการและภาพหน้าจอที่จำเป็นบางส่วนของผลลัพธ์ที่คาดไว้ แต่ผลลัพธ์ของคุณอาจแตกต่างกันเล็กน้อย
กรณีการใช้งานที่เราจะกล่าวถึงมีตั้งแต่การทำให้งานบางอย่างเป็นแบบอัตโนมัติด้วยเว็บไซต์ภายนอก ไปจนถึงการสร้างและยืนยันกรณีทดสอบหน่วยสำหรับโปรเจ็กต์ ไปจนถึงการพัฒนาเว็บไซต์แบบเต็ม ไปกันเลย
3. ไฮไลต์ข่าว
นี่เป็น Use Case ที่เรียบง่าย แต่สามารถเป็นพื้นฐานที่คุณใช้เว็บเบราว์เซอร์เพื่อเข้าชมเว็บไซต์ ดึงข้อมูล ดำเนินการบางอย่าง แล้วส่งคืนข้อมูลไปยังผู้ใช้ได้
ในกรณีนี้ เราจะไปที่เว็บไซต์ Google News และดึงข้อมูลบางอย่างจากที่นั่น แต่คุณสามารถทดลองกับเว็บไซต์ที่เลือกได้อย่างง่ายดายและดูผลลัพธ์
ตรวจสอบว่าคุณอยู่ใน Agent Manager และได้เลือก Playground ดังที่แสดงด้านล่าง
จากนั้นให้คำสั่งต่อไปนี้
ซึ่งจะเริ่มกระบวนการของเอเจนต์และกำหนดว่าต้องเปิดตัวเบราว์เซอร์ ฯลฯ คุณควรให้ความสนใจกับกระบวนการคิดและดูว่าเอเจนต์ทำงานอย่างไร หากทุกอย่างเรียบร้อยดี ระบบจะเปิดเบราว์เซอร์ Antigravity และเข้าชมเว็บไซต์ตามที่แสดงด้านล่าง เส้นขอบสีน้ำเงินรอบเว็บไซต์แสดงว่าตอนนี้เอเจนต์กำลังควบคุมเบราว์เซอร์และไปยังส่วนต่างๆ ของเว็บไซต์เพื่อรับข้อมูล
เมื่อดำเนินการเสร็จแล้ว คุณควรเห็นการสร้างอาร์ติแฟกต์ด้วย ดังที่แสดงด้านล่าง
ตัวอย่างการดำเนินการโดยเอเจนต์แสดงอยู่ด้านล่าง
โปรดสังเกตว่าทางด้านซ้าย เรามีกระบวนการคิด คุณยังเลื่อนดูจุดต่างๆ และดูการเล่นซ้ำและข้อมูลอื่นๆ ได้ด้วย
สิ่งที่ควรลอง
- เมื่อเข้าใจแล้ว ให้เลือกเว็บไซต์ที่พร้อมใช้งานและเว็บไซต์ที่คุณต้องการให้เอเจนต์ไปรับ/สรุปข้อมูลบางอย่าง ลองพิจารณาเว็บไซต์ที่คุณทราบว่ามีแดชบอร์ดและแผนภูมิ แล้วขอให้เลือกค่า 2-3 ค่า
- ลองใช้พรอมต์ต่อไปนี้
Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.
4. สร้างเว็บไซต์แบบไดนามิกด้วย Python + Flask
ตอนนี้เรามาสร้างเว็บแอปพลิเคชันที่สมบูรณ์กัน เว็บแอปพลิเคชันที่เราจะสร้างคือเว็บไซต์ที่ให้ข้อมูลเกี่ยวกับกิจกรรมทางเทคนิค 1 วัน ซึ่งมีการพูดคุยตลอดทั้งวันโดยวิทยากรหลายคน
โปรดตรวจสอบอีกครั้งว่าคุณอยู่ใน Agent Manager และได้เลือก Playground แล้ว
ป้อนพรอมต์ต่อไปนี้
I would like to generate a website that is a 1-day technical conference informational site.
The website should have the following functionality:
1. A home page that shows the current date, location, schedule and time table.
2. The 1-day event is a list of 8 talks in total.
3. Each talk has 1 or 2 max. speakers.
4. A talk has an ID, Title, Speakers, Category (1 or 2), Description and time of the talk.
5. Each speaker has a First Name, Last Name and LinkedIn url.
6. Allow for users to search by category, speaker, title.
7. Give a lunch break of 60 minutes.
8. Use dummy data for events and speakers, come up with a schedule, the event is about Google Cloud Technologies.
9. Tech Stack: Python and Flask framework on server side. Front-end is basic HTML, CSS and JavaScript.
10. Test out the site on your own for all functionality and provide a detailed README on how to setup, run and make any further changes.
11. Launch the web application for me to review.
คุณเริ่มการสนทนาได้โดยใช้พรอมต์ด้านบน
เมื่อเอเจนต์ทำงานตามที่ได้รับมอบหมาย ก็จะสร้างอาร์ติแฟกต์ต่อไปนี้
- อาร์ติแฟกต์ของงาน
- อาร์ติแฟกต์การใช้งาน
- อาร์ติแฟกต์คำแนะนำแบบทีละขั้น
อาร์ติแฟกต์ของงานที่ระบุไว้ด้านล่างเป็นลำดับงานเริ่มต้นที่เอเจนต์ถอดรหัสว่าควรทำตามงานที่ได้รับ ภาพหน้าจอตัวอย่างจากการดำเนินการแสดงอยู่ด้านล่าง
จากนั้นคลิกอาร์ติแฟกต์แผนการติดตั้งใช้งาน ตัวอย่างภาพหน้าจอแสดงอยู่ด้านล่าง
และสุดท้าย คุณจะมีอาร์ติแฟกต์คำแนะนำแบบทีละขั้นตอน ซึ่งจะประกอบด้วยทุกสิ่งที่เอเจนต์ทำดังที่แสดงด้านล่าง
สังเกตว่าเซิร์ฟเวอร์เริ่มทำงานแล้วและมี URL ให้ฉันคลิกเพื่อเข้าถึงแอปพลิเคชัน ตัวอย่างภาพหน้าจอแสดงอยู่ด้านล่าง
หากฉันเปลี่ยนไปใช้เครื่องมือแก้ไข โปรดสังเกตในหน้าจอว่ามีโฟลเดอร์ที่สร้างแอปพลิเคชัน Python Flask นอกจากนี้ คุณจะเห็นว่ามีการติดแท็ก Agent mode ไว้ทางด้านขวา และคุณสามารถสนทนาต่อได้ที่นั่นด้วย
สมมติว่าเราต้องการเพิ่มการบรรยายในกิจกรรม เราสามารถอยู่ในเครื่องมือแก้ไขและแผง Agent แล้วป้อนคำสั่ง เช่น Add two more talks to the schedule
ซึ่งจะส่งผลให้ Agent วิเคราะห์ข้อกำหนด อัปเดตงาน แผนการติดตั้งใช้งาน แล้วจึงตรวจสอบฟังก์ชันการทำงานที่อัปเดตด้วย ตัวอย่างการสนทนาแสดงอยู่ด้านล่าง
คุณเปลี่ยนกลับไปใช้ Agent Manager ได้หากต้องการ กระบวนการนี้จะช่วยให้คุณเข้าใจกระบวนการเปลี่ยนจากผู้จัดการตัวแทนเป็นผู้แก้ไข ทำการเปลี่ยนแปลงตามนั้น และอื่นๆ
สิ่งที่ควรลอง
- เพิ่มฟังก์ชันการทำงานเพิ่มเติมที่ต้องการลงในแอปพลิเคชัน ระบุรายละเอียดให้กับ Agent และสังเกตวิธีที่ Agent ดำเนินงานโดยการแก้ไขรายการงานก่อน จากนั้นจึงแก้ไขแผนการใช้งาน และอื่นๆ
- ขอให้ Agent สร้าง README หรือเอกสารประกอบเพิ่มเติมสำหรับแอปพลิเคชัน
5. สร้างแอปเพิ่มประสิทธิภาพการทำงานอย่างง่าย
ตอนนี้เราจะสร้างเว็บแอปพลิเคชันตัวจับเวลา Pomodoro อย่างง่าย
ตรวจสอบว่าคุณอยู่ใน Agent Manager และได้เลือก Playground แล้ว ป้อนพรอมต์ต่อไปนี้
Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.
สังเกตวิธีสร้างรายการงาน แผนการติดตั้งใช้งาน แล้วดำเนินการตามนั้น โปรดสังเกตขั้นตอนการทำงานต่อไป อาจมีบางสถานการณ์ที่ระบบจะแจ้งให้คุณตรวจสอบ ตัวอย่างการเรียกใช้แสดงอยู่ด้านล่าง
ในกรณีนี้ ควรเปิดตัวเบราว์เซอร์ Antigravity ทำการทดสอบของตัวเอง แล้วยืนยันว่าการทดสอบสำเร็จ สิ่งหนึ่งที่โมเดลนี้สร้างขึ้นคืออาร์ติแฟกต์สื่อที่มีวิดีโอการยืนยัน ซึ่งเป็นวิธีที่ดีในการดูว่ามีการทดสอบอะไรบ้าง นอกจากนี้ ฉันยังแนะนำการเปลี่ยนแปลงสไตล์บางอย่างเนื่องจากไม่มีผลและสามารถทำได้
แอปสุดท้ายมีลักษณะเหมือนแอปด้านล่างและดูดีมาก
เราเพิ่มรูปภาพตัวจับเวลาที่สวยงามลงในแอปพลิเคชันได้ไหม สิ่งที่เราต้องทำคือออกคำสั่งติดตามผลตามที่ระบุไว้ด้านล่าง
Add an image to the application that displays a timer.
ซึ่งส่งผลให้ตัวแทนเพิ่มงานใหม่ลงในอาร์ติแฟกต์งาน
จากนั้นก็สร้างรูปภาพขณะที่ทำงาน
ในที่สุดแอปก็มีรูปภาพตามที่เราขอ
สิ่งที่ควรลอง
- โปรดสังเกตว่าพื้นหลังของไอคอนนาฬิกาทรายในแอปพลิเคชันไม่โปร่งใส ลองบอกตัวแทนให้ดำเนินการดังกล่าวอย่างโปร่งใส
- ลองใช้แอปพลิเคชันที่คุณต้องการสร้างสัก 2-3 รูปแบบ ลองใช้สไตล์ รูปภาพ ขอให้เปลี่ยนแปลง ฯลฯ
6. สร้างการทดสอบหน่วย, สตับจำลอง และตรวจสอบการทดสอบ
Use Case สุดท้ายที่เราจะลองใช้ที่นี่คือการสร้างการทดสอบหน่วยสำหรับไฟล์โค้ดที่เฉพาะเจาะจงที่เรามี และให้ Agent ดำเนินการทดสอบและตรวจสอบด้วย
เราจะใช้พื้นที่ทำงานที่มีไฟล์ Python ไฟล์เดียวตามที่แสดงด้านล่าง
from typing import Dict
# --- Custom Exceptions ---
class InventoryShortageError(Exception):
"""Raised when there is not enough item stock."""
pass
class PaymentFailedError(Exception):
"""Raised when the payment gateway rejects the transaction."""
pass
class InvalidOrderError(Exception):
"""Raised when the order violates business rules."""
pass
# --- External Service Interfaces (To be Mocked) ---
class InventoryService:
def get_stock(self, product_id: str) -> int:
"""Connects to DB to check stock."""
raise NotImplementedError("Real connection required")
def decrement_stock(self, product_id: str, quantity: int):
"""Connects to DB to reduce stock."""
raise NotImplementedError("Real connection required")
class PaymentGateway:
def charge(self, amount: float, currency: str) -> bool:
"""Connects to Stripe/PayPal."""
raise NotImplementedError("Real connection required")
# --- Main Business Logic ---
class Order:
def __init__(self,
inventory_service: InventoryService,
payment_gateway: PaymentGateway,
customer_email: str,
is_vip: bool = False):
self.inventory = inventory_service
self.payment = payment_gateway
self.customer_email = customer_email
self.is_vip = is_vip
self.items: Dict[str, Dict] = {} # {product_id: {'price': float, 'qty': int}}
self.is_paid = False
self.status = "DRAFT"
def add_item(self, product_id: str, price: float, quantity: int = 1):
"""Adds items to the cart. Rejects invalid prices or quantities."""
if price < 0:
raise ValueError("Price cannot be negative")
if quantity <= 0:
raise ValueError("Quantity must be greater than zero")
if product_id in self.items:
self.items[product_id]['qty'] += quantity
else:
self.items[product_id] = {'price': price, 'qty': quantity}
def remove_item(self, product_id: str):
"""Removes an item entirely from the cart."""
if product_id in self.items:
del self.items[product_id]
@property
def total_price(self) -> float:
"""Calculates raw total before discounts."""
return sum(item['price'] * item['qty'] for item in self.items.values())
def apply_discount(self) -> float:
"""
Applies business logic:
1. VIPs get flat 20% off.
2. Regulars get 10% off if total > 100.
3. No discount otherwise.
"""
total = self.total_price
if self.is_vip:
return round(total * 0.8, 2)
elif total > 100:
return round(total * 0.9, 2)
return round(total, 2)
def checkout(self):
"""
Orchestrates the checkout process:
1. Validates cart is not empty.
2. Checks stock for all items.
3. Calculates final price.
4. Charges payment.
5. Updates inventory.
"""
if not self.items:
raise InvalidOrderError("Cannot checkout an empty cart")
# 1. Check Inventory Logic
for product_id, data in self.items.items():
available_stock = self.inventory.get_stock(product_id)
if available_stock < data['qty']:
raise InventoryShortageError(f"Not enough stock for {product_id}")
# 2. Calculate Final Price
final_amount = self.apply_discount()
# 3. Process Payment
try:
success = self.payment.charge(final_amount, "USD")
if not success:
raise PaymentFailedError("Transaction declined by gateway")
except Exception as e:
# Catching generic network errors from the gateway
raise PaymentFailedError(f"Payment gateway error: {str(e)}")
# 4. Decrement Stock (Only occurs if payment succeeded)
for product_id, data in self.items.items():
self.inventory.decrement_stock(product_id, data['qty'])
self.is_paid = True
self.status = "COMPLETED"
return {"status": "success", "charged_amount": final_amount}
ตรวจสอบว่าคุณมีไฟล์ Python ข้างต้นในโฟลเดอร์ในเครื่อง และโหลดไฟล์ดังกล่าวเป็นพื้นที่ทำงานใน Antigravity
นี่คือบริการคำสั่งซื้ออย่างง่ายที่มีฟังก์ชันการทำงานหลักต่อไปนี้ในฟังก์ชัน checkout
- ตรวจสอบว่ารถเข็นไม่ว่างเปล่า
- ตรวจสอบสินค้าคงคลังของสินค้าทั้งหมด
- คำนวณราคาสุดท้าย
- การชำระเงิน
- อัปเดตพื้นที่โฆษณา
เราจะมอบหมายงานให้ Agent สร้างกรณีทดสอบหน่วย จัดเตรียมการติดตั้งใช้งานจำลอง และทำการทดสอบเพื่อให้มั่นใจว่าการทดสอบจะสำเร็จ
เราจะเปิดโฟลเดอร์พื้นที่ทำงานที่เฉพาะเจาะจง และคุณจะเห็นว่าตอนนี้เราใช้สัญลักษณ์ @ เพื่ออ้างอิงไฟล์ได้แล้ว ตัวอย่างเช่น เราอาจทำสิ่งต่อไปนี้
ซึ่งจะแสดงพร้อมคำอธิบายเกี่ยวกับไฟล์นี้
เราขอให้สร้างภาพที่ดีขึ้นได้ผ่านพรอมต์
Can you visually show this class for better understanding
ขั้นตอนต่อไปคือการสร้าง Unit Test และขอให้ Agent ทดสอบ ฉันป้อนพรอมต์ต่อไปนี้
generate unit tests for this module and test it out with mock implementations.
โดยสร้างอาร์ติแฟกต์งานต่อไปนี้และดำเนินการตามงาน
นอกจากนี้ คุณยังดูรายละเอียดของการทดสอบที่ดำเนินการได้ด้วย
ไฟล์ที่สร้างขึ้นไฟล์หนึ่งคือไฟล์ทดสอบด้วย ภาพหน้าจอของส่วนนี้แสดงอยู่ด้านล่าง
สิ่งที่ควรลอง
ลองใช้โค้ดของคุณเองและดูว่าคุณขอให้ Agent ทำอะไรได้บ้าง ตั้งแต่การเพิ่มฟังก์ชันการทำงานไปจนถึงการปรับโครงสร้างโค้ดบางส่วน
7. ขอแสดงความยินดี
ยินดีด้วย คุณใช้ Google Antigravity เพื่อดำเนินการต่อไปนี้เรียบร้อยแล้ว
- ค้นคว้าบนเว็บโดยอัตโนมัติ
- สร้างและทำซ้ำในเว็บแอปพลิเคชันแบบฟูลสแต็ก
- สร้างชิ้นงานและปรับแต่งความสวยงามของ UI
- เขียนและตรวจสอบการทดสอบหน่วยที่ซับซ้อนด้วยการจำลอง
ตอนนี้คุณพร้อมที่จะให้ Antigravity จัดการงานยากๆ ในโปรเจ็กต์ของคุณแล้ว
เอกสารอ้างอิง
- Codelab : การเริ่มต้นใช้งาน Google Antigravity
- เว็บไซต์อย่างเป็นทางการ : https://antigravity.google/
- เอกสารประกอบ: https://antigravity.google/docs
- กรณีการใช้งาน : https://antigravity.google/use-cases
- ดาวน์โหลด : https://antigravity.google/download
- ช่อง YouTube สำหรับ Google Antigravity : https://www.youtube.com/@googleantigravity