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

1. บทนำ

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

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

ข้อกำหนดเบื้องต้น

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

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

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

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

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

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

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

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

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

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

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

จากนั้นให้คำสั่งต่อไปนี้ "ไปที่ news.google.com แล้วหาไฮไลต์ข่าวล่าสุดให้หน่อย"

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

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

สิ่งที่ลองทำได้

• เมื่อเข้าใจแล้ว ให้เลือกเว็บไซต์ที่พร้อมใช้งานและเว็บไซต์ที่คุณต้องการให้เอเจนต์ไปรับ/สรุปข้อมูลบางอย่าง ลองพิจารณาเว็บไซต์ที่คุณทราบว่ามีแดชบอร์ดและแผนภูมิ แล้วขอให้เลือกค่า 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 วัน ซึ่งมีการบรรยายตลอดทั้งวันโดยวิทยากรหลายท่าน

สร้างโฟลเดอร์ใหม่ชื่อ 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 เพื่อให้คุณตรวจสอบในแง่ของวิธีที่วางแผนจะสร้างและปฏิบัติตามข้อกำหนดที่คุณระบุในพรอมต์ ตัวอย่างเอาต์พุตแสดงอยู่ด้านล่าง

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

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

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

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

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

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

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

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

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

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

สิ่งที่ลองทำได้

• เพิ่มฟังก์ชันการทำงานเพิ่มเติมที่ต้องการลงในแอปพลิเคชัน ระบุรายละเอียดให้กับเอเจนต์และสังเกตวิธีที่เอเจนต์ทำงานโดยการแก้ไขรายการงานก่อน จากนั้นจึงแก้ไขแผนการติดตั้งใช้งาน และอื่นๆ
• เพิ่มข้อมูลเพิ่มเติมลงในตารางเวลากิจกรรม เช่น 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.

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

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

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

สิ่งที่ลองทำได้

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

6. สร้าง Unit Test, Mock Stub และตรวจสอบความถูกต้องของ Test

Use Case สุดท้ายที่เราจะลองใช้ที่นี่คือการสร้างการทดสอบหน่วยสำหรับไฟล์โค้ดที่เฉพาะเจาะจงที่เรามี และเพื่อให้เอเจนต์ดำเนินการทดสอบและตรวจสอบความถูกต้องด้วย

เราจะใช้พื้นที่ทำงานที่มีไฟล์ 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 สร้างกรณีทดสอบหน่วย จัดเตรียมการติดตั้งใช้งานจำลอง และทำการทดสอบเพื่อให้มั่นใจว่าการทดสอบจะสำเร็จ

เราจะเปิดโฟลเดอร์พื้นที่ทำงานที่เฉพาะเจาะจง และคุณจะเห็นว่าตอนนี้เราใช้สัญลักษณ์ @ เพื่ออ้างอิงไฟล์ได้แล้ว เช่น เราอาจเริ่มพิมพ์ @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.

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

ไฟล์ที่สร้างขึ้นไฟล์หนึ่งเป็นไฟล์ทดสอบด้วย ภาพหน้าจอของส่วนนี้แสดงอยู่ด้านล่าง

สิ่งที่ลองทำได้

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

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

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

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

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

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

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