使用 Google Antigravity 进行构建

1. 简介

Google Antigravity(在本文档的其余部分中简称为 Antigravity)是 Google 推出的智能体式 IDE。在 Antigravity 使用入门 Codelab 中,您可以了解 Antigravity 的基础知识。在此 Codelab 中,我们将使用 Antigravity 构建实际应用。我们将从简单的网络研究入手,逐步生成全栈应用和企业级单元测试。

前提条件

2. 关于使用场景

既然您对 Antigravity 有基本的了解,那么让我们深入了解几个应用场景,看看它是如何发挥作用的。请注意,Antigravity 是一个以智能体为主的平台。这意味着,在大多数情况下,我们只需向智能体发出指令,智能体就会自行执行任务,并在需要时请求权限,生成制品,然后在任务完成后通知我们。因此,在以下每个使用场景中,我们无法生成智能体对话的每一个输出。我们将分享指令和一些必要的预期结果屏幕截图,但您的结果可能会略有不同。

我们将介绍的使用场景包括使用外部网站自动执行一些任务、为项目生成和验证单元测试用例,以及完整的网站开发。赶紧试试吧。

3. 新闻要点

这是一个简单的使用场景,但它可以作为基础,让您使用网络浏览器访问网站、提取信息、执行一些操作,然后将数据返回给用户。

在本例中,我们将访问 Google 新闻网站并从中提取一些信息。但您可以轻松尝试选择的网站,看看效果如何。

确保您位于 Agent Manager 中,并且已选择 Playground,如下图所示:

cffa12c98a68cb6c.png

然后给出以下指令:“访问 news.google.com,并获取当前的新闻要点。

8513d489eea0b014.png

这将启动智能体进程,并确定它需要启动浏览器等。您应密切关注思考过程,了解智能体如何完成工作。如果一切顺利,它应会启动 Antigravity 浏览器并访问该网站,如下图所示。网站周围的蓝色边框表示智能体现在正在控制浏览器并浏览网站以获取信息。

9d594588f2ffe6bc.png

完成工作后,您还应看到生成的制品,如下图所示:

dc6cf4e7d8425df8.png

智能体的示例执行情况如下所示:

fb7397cd2cce0682.png

请注意,左侧是思考过程,您还可以滚动浏览各个点并查看回放和其他数据。

尝试以下任务

  • 了解这一点后,选择一个可用的网站,并让智能体前往该网站获取/总结一些数据。考虑一些您知道有信息中心和图表的网站,并让智能体选择一些值。
  • 尝试以下提示:Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

4. 使用 Python + Flask 生成动态网站

现在,让我们生成一个完整的 Web 应用。我们将创建的 Web 应用是一个网站,该网站提供有关为期 1 天的技术活动的信息,该活动全天都有多位演讲者进行演讲。

再次确保您位于 Agent Manager 中,并且已选择 Playground。为确保您从头开始,请启动新的 Playground 聊天,然后选择 Planning 模式,以确保智能体在执行之前进行规划。

输入以下提示:

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. 

您可以通过输入上述提示来开始对话:

智能体执行任务时,将继续创建制品:

  • 任务制品
  • 实现制品
  • 演示制品

以下给出的任务制品是智能体根据分配给它的任务破译出的初始任务序列。执行的示例屏幕截图如下所示:

c95d82e1c040698f.png

然后,您可以点击实现计划 制品。示例屏幕截图如下所示:

632169a236bc62cc.png

最后,您将获得演示 制品。它包含智能体执行的所有操作,如下图所示:

e3f6152d6f54d4f9.png

请注意,它已启动服务器并向我提供了网址,我点击该网址后即可获得应用,示例屏幕截图如下所示:

abf879f2ce53d055.png

如果我切换到编辑器,请注意屏幕中包含生成 Python Flask 应用的文件夹。您还会注意到,Agent mode 标记在右侧,您也可以在那里继续对话。

b0fea8aa65c3a1c5.png

现在,假设我们要为活动添加更多演讲。我们可以停留在编辑器和智能体面板中,给出类似 Add two more talks to the schedule 的指令。

这将导致智能体分析要求、更新任务、实现计划,然后验证更新后的功能。示例对话如下所示:

ba8455e6f68973e9.png

如果您愿意,可以切换回 Agent Manager。此过程应有助于您了解从 Agent Manager 切换到编辑器、相应地进行更改等过程。

尝试以下任务

  • 向应用添加您想要的其他功能。向智能体提供详细信息,并注意它是如何执行任务的,首先修改任务列表,然后修改实现计划,依此类推。
  • 让智能体为应用生成自述文件或其他文档。

5. 生成简单的效率提升应用

我们现在将生成一个简单的番茄工作法计时器 Web 应用。

确保您位于 Agent Manager 中,并且已选择 Playground 。输入以下提示:

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

请注意,它是如何创建任务列表、实现计划,然后执行这些计划的。请密切关注流程,在某些情况下,它可能会提示您进行审核。示例运行情况如下所示。

5be0a668e5a67d85.png

在本例中,它还应启动 Antigravity 浏览器,自行进行测试,然后确认测试成功。它生成的内容之一是媒体制品 ,其中包含其验证视频。这是查看它测试的内容的好方法。我还建议进行一些样式更改,因为它没有生效,并且它能够做到这一点。

最终的应用看起来像下面的应用,而且看起来很不错。

c9ab6bca97a51a8c.png

我们可以在应用中添加一个漂亮的计时器图片。我们只需发出后续指令,如下所示:

Add an image to the application that displays a timer.

这导致智能体向任务制品添加了一项新任务:

498dd946d4e9ae55.png

然后,它在执行任务时生成了一张图片:

c291da9bdb37ff96.png

最后,应用中出现了我们要求的图片:

de8f418ba8e4600d.png

尝试以下任务

  • 请注意,应用中沙漏图标的背景不是透明的。尝试让智能体将其设为透明。
  • 尝试生成您想要生成的任何应用的几个变体。尝试使用样式、图片,请求更改等。

6. 生成单元测试、模拟桩并验证测试

我们在此尝试的最后一个使用场景是为我们拥有的特定代码文件生成单元测试,并让智能体执行测试并验证它们。

为此,我们将拥有一个工作区,其中包含单个 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 函数中具有以下关键功能:

  1. 验证购物车不为空。
  2. 检查所有商品的库存。
  3. 计算最终价格。
  4. 收取付款。
  5. 更新商品目录。

我们将为智能体分配生成单元测试用例、提供模拟实现和执行测试的任务,以确保测试成功。

我们将打开特定的工作区文件夹,您会注意到,我们现在也可以使用 @ 符号来引用文件。例如,我们可以执行以下操作:

8368856e51a7561a.png

这将显示有关此文件的一些说明:

b69c217d3372d802.png

我们可以通过提示让它生成更好的可视化效果:

Can you visually show this class for better understanding

da5bd701323818d4.png

下一步是生成单元测试,并让 Agent 进行测试。我输入以下提示:

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

它生成了以下任务制品并执行了任务。

21425379db336dc6.png

您还可以查看它运行的测试的详细信息:

48f3320cd76b5cd8.png

它生成的文件之一也是测试文件。屏幕截图如下所示:

f962061f115c040f.png

尝试以下任务

使用您自己的代码,看看您可以让智能体执行哪些操作,从添加更多功能到重构部分代码。

7. 恭喜

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

  • 自主研究网络。
  • 构建和迭代全栈 Web 应用。
  • 生成素材资源并优化界面美观性。
  • 使用模拟编写和验证复杂的单元测试。

现在,您可以让 Antigravity 处理您自己项目中的繁重工作了。

参考文档