使用 Google Antigravity 建構

1. 簡介

在本程式碼研究室中,您將瞭解 Google Antigravity。這個代理式開發平台專為代理時代而生,可協助您進行開發。Antigravity 是 AI 代理的中央指揮中心,提供統一平台,可啟動、監控及調度代理活動。

在本程式碼研究室中,我們將使用 Antigravity 建構實際應用程式。我們將從簡單的網路研究,轉向生成全端應用程式和企業級單元測試。

需求條件:

  • 已安裝並設定 Antigravity 和 Antigravity IDE。
  • 瞭解 Google Antigravity 的基本知識。建議先完成「開始使用 Google Antigravity」程式碼研究室。

2. 關於使用案例

您已對 Antigravity 有基本瞭解,現在來看看幾個使用案例,瞭解 AI 的運作方式。請注意,Antigravity 是以代理程式為優先的平台。也就是說,在大多數情況下,我們只是向代理程式下達指令,代理程式就會自行完成工作、視需要要求權限、產生構件,並在工作完成時通知我們。因此,我們無法在下列各個用途中,產生 Agent 對話的每個輸出內容。我們會提供操作說明和預期結果的必要螢幕截圖,但您的結果可能略有不同。

我們將介紹各種應用情境,包括自動執行外部網站的幾項工作、為專案產生及驗證單元測試案例,以及開發完整網站。開始導航

3. 新聞重點

這是簡單的用途,但您可以此為基礎,使用網頁瀏覽器造訪網站、擷取資訊、執行一些動作,然後將資料傳回給使用者。

在本例中,我們將前往 Google 新聞網站,並從中擷取一些資訊。但您可以輕鬆選擇網站進行實驗,並查看結果。

我們假設您有一個根資料夾,並會在該資料夾下建立本程式碼研究室中會看到的各種專案。我們電腦上的這個根資料夾名為 agy2-pprojects。

首先,請在上述資料夾中建立名為 news-highlights 的資料夾,以便從頭開始。

啟動 Antigravity 並建立新專案。將 news-highlights 資料夾新增至該資料夾。

在剛匯入的 news-highlights 工作區中發起新對話:

58c4419125240f8f.png

然後下達以下指令:「請前往 news.google.com,並提供當下的重點新聞。」

69859175cdace3c2.png

這會啟動代理程序,並判斷需要造訪 news.google.com 網站並要求您的許可。系統可能會多次提示您讀取網址,您可以選擇授予這項專案的權限等。

85f14eddde22704c.png

請密切注意「思考過程」,瞭解 Agent 如何完成工作。以下是 Agent 的執行範例:

7be51d200fb1296f.png

體驗功能

  • 瞭解這點後,請選擇一個可用的網站,讓代理程式前往該網站取得/摘要一些資料。請選擇您知道有資訊主頁和圖表的網站,並要求 AI 挑選幾個值。
  • 請試試下列提示詞:Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

4. 使用 Python + Flask 生成動態網站

現在來生成完整的網頁應用程式。我們要建立的網頁應用程式是一個網站,提供單日技術活動的資訊,活動當天會有許多講者進行演講。

再次建立名為 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 的重要構件,供您查看該工具如何規劃建立及滿足您在提示中指定的需求。輸出範例如下所示:

8f516fd94f4ad57.png

點選「繼續」前,請先查看導入計畫。您可以點選上方的 implementation_plan.md 檔案連結,或切換右上方的輔助窗格。這會顯示構件檢視畫面,您目前可以看到實作計畫供您審查。

e12b6e1270405137.png

以下是為執行作業產生的範例實作計畫:

5069ec7ab1ae6310.png

您可以在企劃書中提供意見,然後再次提示代理程式,或是接受目前的導入企劃書,然後按一下「對話」介面中的「繼續」按鈕。

Agent 會繼續生成原始碼檔案,您也會發現另一個名為「Task」的構件已更新。這份清單列出為達成最終結果而需執行的動作或工作。

您可以隨時點選「工作」,甚至前往構件清單查看工作。範例如下所示:

caf136694efc222f.png

在最後一項工作 (嘗試執行及驗證應用程式) 的某個時間點,Antigravity 會設定 Python 環境,並要求您授權設定環境、安裝依附元件等。視需要授予權限。

驗證成功後,系統會醒目顯示詳細資料,以及另一項構件「逐步解說」,其中詳細說明已完成的功能、技術堆疊、驗證結果和操作說明。

d0f61eb85d348030.png

以下是 Walkthrough 的範例:

fb18995f34c286ae.png

我們造訪網址時,最終網站如下所示:

2b2ee3149d59da7a.png

如要查看生成的程式碼,請按一下右上角的「開啟 IDE」。這會開啟 Antigravity IDE,您可以在其中查看生成的程式碼。螢幕截圖範例如下:

12798431169dd8cf.png

體驗功能

  • 新增應用程式所需的其他功能。向代理提供詳細資料,並注意代理如何執行工作,例如先修改工作清單,然後修改實作計畫等。
  • 在活動時間表中新增其他資料。例如 Add two more talks to the schedule。
  • 要求代理程式為應用程式生成 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.

請注意,這項工具會先建立實作計畫和工作清單,然後再執行這些項目。請持續留意流程,系統可能會在某些情況下提示你進行審查。

以下是執行範例,其中包含導覽訊息和工作:

df0db367ba475db2.png

最終應用程式如下所示,看起來相當不錯。

ef8ac58d0677e56.png

體驗功能

  • 在應用程式中加入幾張圖片。例如,將「計時器」圖片新增至應用程式。
  • 嘗試生成幾個不同版本的應用程式。嘗試不同風格、圖片,要求變更等。

6. 生成單元測試、模擬存根及驗證測試

我們在這裡要嘗試的最後一個用途,是為特定程式碼檔案生成單元測試,並讓 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 中開啟該專案以進行對話。

這是簡單的 Order 服務,在 checkout 函式中具有下列主要功能:

  1. 驗證購物車是否為空。
  2. 檢查所有商品的庫存。
  3. 計算最終價格。
  4. 收取款項。
  5. 更新商品目錄。

我們將指派代理生成單元測試案例、提供模擬實作,並執行測試,確保測試成功。

我們會開啟特定工作區資料夾,您會發現現在也可以使用 @ 符號參照檔案。舉例來說,我們可以開始輸入 @order,系統應該會顯示 order_service.py 檔案。

c4331bee03c5512c.png

我們可以提供有助於瞭解檔案內容的任務。輸入下列提示詞:

Explain the @order_service.py file

系統會顯示這個檔案的說明:

269ff8450d813970.png

我們可以透過提示要求生成更精美的視覺化內容:

Can you visually show this class for better understanding

Antigravity 會提及工作已完成,並生成含有視覺化內容的構件:

ea389f494786a9ad.png

我們可以查看如下所示的視覺化效果:

70e6822a86f74de9.png

以及下列事項:

3ebd94221655a03f.png

下一步是產生單元測試,並要求 Agent 進行測試。我輸入下列提示:

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

它開始執行工作、生成測試、執行測試,甚至還修正了錯誤。輸出內容如下:

788cd07aadd09a4b.png

其中一個生成的檔案也是測試檔案。螢幕截圖如下所示:

7a79d27eb34f0530.png

體驗功能

您可以自行提供程式碼,並要求代理程式執行各種工作,例如新增更多功能,或是重構部分程式碼。

7. 恭喜

恭喜!您已成功使用 Google Antigravity 執行下列操作:

  • 自主研究網路資料。
  • 建構及反覆改良全端網頁應用程式。
  • 使用模擬物件編寫及驗證複雜的單元測試。

現在,您可以讓 Antigravity 處理自己專案的繁重工作。

參考文件