Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

1. บทนำ

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

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

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

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

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

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

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

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

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

ขั้นแรก ให้สร้างโฟลเดอร์ชื่อ news-hightlights เพื่อเริ่มต้นใหม่ ใน Antigravity ให้เปลี่ยนไปที่ Agent Manager แล้วนำเข้าโฟลเดอร์ที่สร้างขึ้นใหม่เป็นพื้นที่ทำงานด้วยปุ่ม Add Workspace

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

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

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

เมื่อ 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 ตรวจสอบว่าคุณอยู่ใน Agent Manager และได้นำเข้าและเลือกพื้นที่ทำงาน conference-website แล้ว นอกจากนี้ ให้เพิ่มโหมด Planning เพื่อให้ Agent วางแผนก่อนดำเนินการ

ระบุพรอมต์ต่อไปนี้

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.

คุณสามารถเริ่มการสนทนาได้โดยระบุพรอมต์ด้านบน

เมื่อ Agent ทำงานที่ได้รับมอบหมาย Agent จะสร้างอาร์ติแฟกต์ต่อไปนี้

อาร์ติแฟกต์งาน
อาร์ติแฟกต์การใช้งาน
อาร์ติแฟกต์คำแนะนำแบบทีละขั้น

อาร์ติแฟกต์งานด้านล่างเป็นลำดับงานเริ่มต้นที่ Agent ถอดรหัสว่าควรทำตามงานที่ได้รับมอบหมาย ภาพหน้าจอตัวอย่างจากการดำเนินการแสดงอยู่ด้านล่าง

จากนั้นคลิกอาร์ติแฟกต์แผนการใช้งาน ภาพหน้าจอตัวอย่างแสดงอยู่ด้านล่าง

และสุดท้าย คุณจะมีอาร์ติแฟกต์คำแนะนำแบบทีละขั้น ซึ่งมีทุกสิ่งที่ Agent ทำ ดังที่แสดงด้านล่าง

โปรดสังเกตว่า Agent ได้เริ่มเซิร์ฟเวอร์และให้ URL แก่ฉัน ซึ่งฉันคลิกและเข้าถึงแอปพลิเคชันได้ ภาพหน้าจอตัวอย่างแสดงอยู่ด้านล่าง

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

สมมติว่าเราต้องการเพิ่มการบรรยายอีก 2-3 รายการลงในงาน เราสามารถอยู่ในเครื่องมือแก้ไขและในแผง Agent แล้วให้คำแนะนำ เช่น Add two more talks to the schedule

การดำเนินการนี้จะส่งผลให้ Agent วิเคราะห์ข้อกำหนด อัปเดตงาน แผนการใช้งาน แล้วตรวจสอบฟังก์ชันการทำงานที่อัปเดตด้วย ตัวอย่างการสนทนาแสดงอยู่ด้านล่าง

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

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

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

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

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

เรามาเพิ่มรูปภาพตัวจับเวลาที่สวยงามลงในแอปพลิเคชันกัน สิ่งที่เราต้องทำคือออกคำแนะนำเพิ่มเติมดังที่แสดงด้านล่าง

Add an image to the application that displays a timer.

การดำเนินการนี้ส่งผลให้ Agent เพิ่มงานใหม่ลงในอาร์ติแฟกต์งาน

จากนั้นระบบจะสร้างรูปภาพขณะที่ดำเนินการตามงาน

สุดท้าย แอปก็มีรูปภาพตามที่เราขอ

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

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

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

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

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

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

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

เราสามารถขอให้ระบบสร้างภาพข้อมูลที่ดีขึ้นผ่านพรอมต์ต่อไปนี้

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 เพื่อดำเนินการต่อไปนี้ได้สำเร็จ

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

ตอนนี้คุณพร้อมแล้วที่จะให้ 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