การสร้างด้วย Google Antigravity

1. บทนำ

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

ใน Codelab นี้ เราจะใช้ Antigravity เพื่อสร้างแอปพลิเคชันจริง โดยจะเริ่มจากการค้นหาเว็บอย่างง่าย ไปจนถึงการสร้างแอปพลิเคชันแบบ Full-Stack และ Unit Test ระดับองค์กร

ความรู้เบื้องต้นที่ต้องมี

• ติดตั้งและกำหนดค่า Antigravity และ Antigravity IDE แล้ว
• มีความเข้าใจพื้นฐานเกี่ยวกับ Google Antigravity เราขอแนะนำให้ทำ Codelab เริ่มต้นใช้งาน Google Antigravity ให้เสร็จสมบูรณ์

2. เกี่ยวกับกรณีการใช้งาน

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

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

3. ไฮไลต์ข่าว

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

ในกรณีนี้ เราจะเข้าชมเว็บไซต์ Google News และแยกข้อมูลบางอย่างจากเว็บไซต์ แต่คุณสามารถทดลองใช้เว็บไซต์ที่ต้องการและดูผลลัพธ์ได้อย่างง่ายดาย

เราจะสมมติว่าเรามีโฟลเดอร์รูทซึ่งเราจะสร้างโปรเจ็กต์ต่างๆ ที่เราจะเห็นใน Codelab นี้ โฟลเดอร์รูทนี้ในเครื่องของเราชื่อว่า agy2-pprojects

ขั้นแรก ให้สร้างโฟลเดอร์ชื่อ news-highlights ในโฟลเดอร์ด้านบนเพื่อเริ่มต้นใหม่

เปิด Antigravity แล้วสร้างโปรเจ็กต์ใหม่ เพิ่มโฟลเดอร์ news-highlights ลงในโปรเจ็กต์

เริ่มการสนทนาใหม่ในพื้นที่ทำงาน news-highlights ที่เพิ่งนำเข้า

จากนั้นให้คำแนะนำต่อไปนี้ "visit news.google.com and get me the highlights at the moment."

การดำเนินการนี้จะเริ่มกระบวนการของ Agent และ Agent จะพิจารณาว่าต้องเข้าชมเว็บไซต์ news.google.com และขอสิทธิ์จากคุณ ระบบอาจแจ้งให้คุณให้สิทธิ์อ่าน URL หลายครั้ง และคุณสามารถเลือกให้สิทธิ์สำหรับโปรเจ็กต์นี้ เป็นต้น

คุณควรให้ความสนใจกับกระบวนการคิดและดูว่า Agent ทำงานอย่างไร ตัวอย่างการดำเนินการโดย Agent แสดงไว้ด้านล่าง

สิ่งที่ควรลอง

• เมื่อเข้าใจแล้ว ให้เลือกเว็บไซต์ที่พร้อมใช้งานและคุณต้องการให้ Agent เข้าชมและรับ/สรุปข้อมูลบางอย่างจากเว็บไซต์ ลองเลือกเว็บไซต์ที่คุณทราบว่ามีแดชบอร์ดและแผนภูมิ แล้วขอให้ Agent เลือกค่าบางค่า
• ลองใช้ข้อความแจ้งต่อไปนี้ Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

4. สร้างเว็บไซต์แบบไดนามิกด้วย Python + Flask

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

อีกครั้ง ให้สร้างโฟลเดอร์ใหม่ชื่อ conference-website ตรวจสอบว่าคุณได้สร้างโปรเจ็กต์ใหม่ในอินเทอร์เฟซ Antigravity Agent และเพิ่มโฟลเดอร์ conference-website ลงในโปรเจ็กต์แล้ว

คุณเริ่มการสนทนาได้โดยใช้ข้อความแจ้งที่แสดงด้านล่าง

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. 

Antigravity จะวิเคราะห์คำขอและสร้างแผนการติดตั้งใช้งานก่อน โดยจะสร้างอาร์ติแฟกต์หลักชื่อ implementation_plan.md ให้คุณตรวจสอบในแง่ของวิธีที่ Antigravity วางแผนที่จะสร้างและตอบสนองข้อกำหนดที่คุณระบุไว้ในข้อความแจ้ง ตัวอย่างเอาต์พุตแสดงไว้ด้านล่าง

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

ตัวอย่างแผนการติดตั้งใช้งานที่สร้างขึ้นสำหรับการดำเนินการของเราแสดงไว้ด้านล่าง

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

Agent จะดำเนินการสร้างไฟล์ซอร์สโค้ดต่อไป และคุณจะสังเกตเห็นว่า Agent จะอัปเดตอาร์ติแฟกต์อีกรายการหนึ่งที่เรียกว่า "งาน" ด้วย ซึ่งเป็นรายการการดำเนินการหรืองานที่ Agent ระบุว่าต้องทำเพื่อให้ได้ผลลัพธ์สุดท้าย

คุณสามารถคลิก "งาน" ได้ทุกเมื่อ หรือแม้แต่เข้าชมรายการอาร์ติแฟกต์เพื่อดูงาน ตัวอย่างรายการแสดงไว้ด้านล่าง

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

เมื่อการยืนยันสำเร็จแล้ว ระบบจะไฮไลต์รายละเอียดต่างๆ พร้อมกับอาร์ติแฟกต์อีกรายการหนึ่งที่เรียกว่า "คำแนะนำทีละขั้นตอน" ซึ่งแสดงรายละเอียดฟีเจอร์ที่เสร็จสมบูรณ์ Technology Stack ผลการตรวจสอบ และวิธีการ

ตัวอย่างคำแนะนำทีละขั้นตอน แสดงไว้ด้านล่าง

เว็บไซต์สุดท้ายเมื่อเราเข้าชม URL แสดงไว้ด้านล่าง

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

สิ่งที่ควรลอง

• เพิ่มฟังก์ชันการทำงานเพิ่มเติมที่ต้องการลงในแอปพลิเคชัน ระบุรายละเอียดให้ Agent และสังเกตวิธีที่ Agent ดำเนินการตามงานโดยการแก้ไขรายการงาน แผนการติดตั้งใช้งาน และอื่นๆ ก่อน
• เพิ่มข้อมูลเพิ่มเติมลงในตารางเวลาของกิจกรรม เช่น Add two more talks to the schedule
• ขอให้ Agent สร้าง README หรือเอกสารประกอบเพิ่มเติมสำหรับแอปพลิเคชัน

5. สร้างแอปเพื่อการทำงานอย่างง่าย

ตอนนี้เราจะสร้างเว็บแอปพลิเคชันตัวจับเวลา Pomodoro อย่างง่าย

สร้างโฟลเดอร์ pomodoro-timer ตรวจสอบว่าคุณอยู่ใน Agent Manager และได้นำเข้าและเลือกพื้นที่ทำงาน pomodoro-timer แล้ว เริ่มต้นด้วยข้อความแจ้งนี้

Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.

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

ตัวอย่างการดำเนินการพร้อมข้อความคำแนะนำทีละขั้นตอนและงานแสดงไว้ด้านล่าง

แอปสุดท้ายมีลักษณะดังที่แสดงด้านล่างและดูดีมาก

สิ่งที่ควรลอง

• เพิ่มรูปภาพบางรูปในแอปพลิเคชัน เช่น เพิ่มรูปภาพตัวจับเวลาลงในแอปพลิเคชัน
• ลองใช้แอปพลิเคชันที่ต้องการสร้างในรูปแบบต่างๆ ลองใช้สไตล์ รูปภาพ ขอให้เปลี่ยนแปลง และอื่นๆ

6. สร้าง Unit Test, Mock Stub และตรวจสอบการทดสอบ

กรณีการใช้งานสุดท้ายที่เราจะลองใช้ที่นี่คือการสร้าง Unit Test สำหรับไฟล์โค้ดเฉพาะที่เรามี และให้ 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 ด้านบน (order_service.py) อยู่ในเครื่องในโฟลเดอร์ใหม่ และคุณได้เปิดโปรเจ็กต์นั้นเพื่อการสนทนาใน Antigravity แล้ว

นี่คือบริการคำสั่งซื้ออย่างง่ายที่มีฟังก์ชันการทำงานหลักต่อไปนี้ในฟังก์ชัน checkout

1. ตรวจสอบว่ารถเข็นไม่ว่างเปล่า
2. ตรวจสอบสต็อกของสินค้าทั้งหมด
3. คำนวณราคาสุดท้าย
4. เรียกเก็บเงิน
5. อัปเดตสินค้าคงคลัง

เราจะมอบหมายงานให้ Agent สร้างกรณีทดสอบหน่วย จัดเตรียมการติดตั้งใช้งาน Mock และเรียกใช้การทดสอบเพื่อให้แน่ใจว่าการทดสอบจะสำเร็จ

เราจะเปิดโฟลเดอร์พื้นที่ทำงานเฉพาะ และคุณจะสังเกตเห็นว่าตอนนี้เราสามารถใช้สัญลักษณ์ @ เพื่ออ้างอิงไฟล์ได้ด้วย เช่น เราสามารถเริ่มพิมพ์ @order แล้วระบบควรแสดงไฟล์ order_service.py

เราสามารถมอบหมายงานที่ช่วยให้เราเข้าใจไฟล์นี้ได้ ใช้ข้อความแจ้งต่อไปนี้

Explain the @order_service.py file

ระบบจะแสดงคำอธิบายเกี่ยวกับไฟล์นี้ดังนี้

เราสามารถขอให้ระบบสร้างการแสดงภาพที่ดีขึ้นผ่านข้อความแจ้งต่อไปนี้

Can you visually show this class for better understanding

Antigravity จะแจ้งว่างานเสร็จสมบูรณ์แล้วและได้สร้างอาร์ติแฟกต์ที่มีการแสดงภาพ

เราสามารถดูการแสดงภาพได้ดังที่แสดงด้านล่าง

และดังนี้

ขั้นตอนต่อไปคือการสร้าง Unit Test และขอให้ Agent ทดสอบ ฉันใช้ข้อความแจ้งต่อไปนี้

generate unit tests for this module and test it out with mock implementations.

Agent ดำเนินการตามงาน สร้างการทดสอบ เรียกใช้การทดสอบ และแก้ไขข้อบกพร่องด้วย เอาต์พุตของ Agent แสดงไว้ด้านล่าง

ไฟล์ที่ Agent สร้างขึ้นไฟล์หนึ่งคือไฟล์ทดสอบด้วย ภาพหน้าจอของไฟล์ทดสอบแสดงไว้ด้านล่าง

สิ่งที่ควรลอง

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

7. ขอแสดงความยินดี

ขอแสดงความยินดี คุณใช้ Google Antigravity เพื่อทำสิ่งต่อไปนี้ได้สำเร็จ

• ค้นหาเว็บโดยอัตโนมัติ
• สร้างและทำซ้ำในเว็บแอปพลิเคชันแบบ Full-Stack
• เขียนและตรวจสอบ Unit Test ที่ซับซ้อนด้วย Mock

ตอนนี้คุณพร้อมแล้วที่จะให้ Antigravity จัดการงานที่ซับซ้อนในโปรเจ็กต์ของคุณเอง

เอกสารอ้างอิง

• Codelab : เริ่มต้นใช้งาน Google Antigravity
• เว็บไซต์อย่างเป็นทางการ : https://antigravity.google/
• เอกสารประกอบ: https://antigravity.google/docs
• ดาวน์โหลด : https://antigravity.google/download
• ช่อง YouTube สำหรับ Google Antigravity : https://www.youtube.com/@googleantigravity