Xây dựng bằng Google Antigravity

1. Giới thiệu

Google Antigravity (gọi tắt là Antigravity trong phần còn lại của tài liệu) là một IDE có tính năng tác nhân của Google. Trong lớp học lập trình Bắt đầu sử dụng Antigravity, bạn có thể tìm hiểu kiến thức cơ bản về Antigravity. Trong lớp học lập trình này, chúng ta sẽ sử dụng Antigravity để xây dựng các ứng dụng thực. Chúng ta sẽ chuyển từ việc nghiên cứu web đơn giản sang tạo các ứng dụng full-stack và kiểm thử đơn vị cấp doanh nghiệp.

Điều kiện tiên quyết:

Bạn đã cài đặt và định cấu hình Google Antigravity.
Có kiến thức cơ bản về Google Antigravity. Bạn nên hoàn tất lớp học lập trình: Bắt đầu sử dụng Google Antigravity.

2. Giới thiệu về các trường hợp sử dụng

Vì bạn đã có kiến thức cơ bản về Antigravity, hãy cùng tìm hiểu một vài trường hợp sử dụng để xem cách hoạt động của công cụ này. Xin lưu ý rằng Antigravity là một nền tảng ưu tiên Tác nhân. Điều này có nghĩa là trong hầu hết các trường hợp, chúng ta chỉ cần đưa ra một hướng dẫn cho Tác nhân, sau đó Tác nhân sẽ tự thực hiện, hoàn thành công việc, yêu cầu quyền nếu cần, tạo cấu phần phần mềm rồi thông báo cho chúng ta nếu công việc đã hoàn tất. Do đó, chúng ta không thể tạo mọi kết quả đầu ra của cuộc trò chuyện với Tác nhân trong từng trường hợp sử dụng sau đây. Chúng ta sẽ chia sẻ hướng dẫn và một vài ảnh chụp màn hình cần thiết về kết quả dự kiến, nhưng kết quả của bạn có thể khác một chút.

Các trường hợp sử dụng mà chúng ta sẽ đề cập bao gồm từ việc tự động hoá một vài công việc với các trang web bên ngoài, đến việc tạo và xác minh các trường hợp kiểm thử đơn vị cho một dự án, đến việc phát triển một trang web hoàn chỉnh. Chúng ta đi thôi.

3. Tin nổi bật

Đây là một trường hợp sử dụng đơn giản nhưng có thể là cơ sở để bạn sử dụng trình duyệt web truy cập các trang web, trích xuất thông tin, thực hiện một số thao tác rồi trả về dữ liệu cho người dùng.

Trong trường hợp này, chúng ta sẽ truy cập trang web Google Tin tức và trích xuất một số thông tin từ đó. Tuy nhiên, bạn có thể dễ dàng thử nghiệm với một trang web mà bạn chọn và xem kết quả.

Đảm bảo bạn đang ở trong Agent Manager và đã chọn Playground, như minh hoạ bên dưới:

Sau đó, hãy đưa ra hướng dẫn sau: "visit news.google.com and get me the highlights at the moment." (truy cập news.google.com và cho tôi biết những tin nổi bật hiện tại).

Thao tác này sẽ khởi động quy trình Tác nhân và xác định rằng cần phải khởi chạy trình duyệt, v.v. Bạn nên chú ý kỹ đến quy trình Suy nghĩ và xem cách Tác nhân thực hiện công việc. Nếu mọi việc diễn ra suôn sẻ, thì trình duyệt Antigravity sẽ khởi chạy và truy cập trang web như minh hoạ bên dưới. Đường viền màu xanh dương xung quanh trang web cho thấy rằng Tác nhân hiện đang kiểm soát trình duyệt và điều hướng trang web để lấy thông tin.

Sau khi hoàn tất công việc, bạn cũng sẽ thấy các Cấu phần phần mềm được tạo, như minh hoạ bên dưới:

Dưới đây là một ví dụ về hoạt động thực thi của Tác nhân:

Xin lưu ý rằng ở bên trái, chúng ta có quy trình Suy nghĩ. Bạn cũng có thể cuộn qua các điểm và xem bản phát lại cũng như các dữ liệu khác.

Những điều nên thử

Sau khi hiểu rõ điều này, hãy chọn một trang web có sẵn và bạn muốn Tác nhân truy cập để lấy/tóm tắt một số dữ liệu. Cân nhắc một số trang web mà bạn biết có Trang tổng quan và biểu đồ, rồi yêu cầu Tác nhân chọn một vài giá trị.
Hãy thử câu lệnh sau: Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product. (Truy cập https://docs.cloud.google.com/release-notes và cho tôi biết bản tóm tắt về ghi chú phát hành, được phân loại theo sản phẩm).

4. Tạo trang web động bằng Python + Flask

Bây giờ, hãy chuyển sang tạo một ứng dụng web hoàn chỉnh. Ứng dụng web mà chúng ta sẽ tạo là một trang web cung cấp thông tin về một sự kiện kỹ thuật kéo dài 1 ngày, trong đó có các bài nói chuyện trong suốt cả ngày của nhiều diễn giả.

Một lần nữa, hãy đảm bảo bạn đang ở trong Agent Manager (Trình quản lý tác nhân) và đã chọn Playground (Sân chơi). Để đảm bảo bạn bắt đầu từ đầu, hãy bắt đầu một cuộc trò chuyện mới trên sân chơi và chọn chế độ Planning (Lập kế hoạch) để đảm bảo tác nhân lập kế hoạch trước khi thực thi.

Đưa ra câu lệnh sau:

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.

Bạn có thể bắt đầu cuộc trò chuyện bằng cách đưa ra câu lệnh ở trên:

Khi Tác nhân thực hiện công việc, Tác nhân sẽ tiến hành tạo các cấu phần phần mềm:

Cấu phần phần mềm của công việc
Cấu phần phần mềm triển khai
Cấu phần phần mềm hướng dẫn từng bước

Cấu phần phần mềm của công việc được cung cấp bên dưới là chuỗi công việc ban đầu mà Tác nhân giải mã để thực hiện dựa trên công việc được giao. Dưới đây là ảnh chụp màn hình mẫu từ quá trình thực thi:

Sau đó, bạn có thể nhấp vào cấu phần phần mềm Implementation Plan (Kế hoạch triển khai). Dưới đây là ảnh chụp màn hình mẫu:

Và cuối cùng, bạn có cấu phần phần mềm Walkthrough (Hướng dẫn từng bước). Cấu phần phần mềm này chứa tất cả những gì mà Tác nhân đã thực hiện như minh hoạ bên dưới:

Xin lưu ý rằng cấu phần phần mềm này đã khởi động máy chủ và cung cấp cho tôi URL. Tôi nhấp vào URL đó và có ứng dụng. Dưới đây là ảnh chụp màn hình mẫu:

Nếu chuyển sang Editor (Trình chỉnh sửa), hãy lưu ý rằng màn hình chứa thư mục nơi ứng dụng Python Flask được tạo. Bạn cũng sẽ nhận thấy rằng Agent mode (Chế độ tác nhân) được gắn thẻ ở bên phải và bạn cũng có thể tiếp tục cuộc trò chuyện ở đó.

Bây giờ, giả sử chúng ta muốn thêm một số bài nói chuyện khác vào sự kiện. Chúng ta có thể ở lại Trình chỉnh sửa và trong bảng điều khiển Tác nhân, đưa ra một hướng dẫn như Add two more talks to the schedule (Thêm 2 bài nói chuyện nữa vào lịch trình).

Thao tác này sẽ khiến Tác nhân phân tích yêu cầu, cập nhật Công việc, Kế hoạch triển khai rồi xác thực chức năng đã cập nhật. Dưới đây là một cuộc trò chuyện mẫu:

Bạn có thể chuyển về Trình quản lý tác nhân nếu muốn. Quá trình này sẽ giúp bạn hiểu rõ quy trình chuyển từ Trình quản lý tác nhân sang Trình chỉnh sửa, thực hiện các thay đổi cho phù hợp, v.v.

Những điều nên thử

Thêm chức năng bổ sung mà bạn muốn vào ứng dụng. Cung cấp thông tin chi tiết cho Tác nhân và lưu ý cách Tác nhân thực hiện công việc bằng cách sửa đổi danh sách việc cần làm, sau đó là kế hoạch triển khai, v.v.
Yêu cầu Tác nhân tạo tệp README hoặc thêm tài liệu cho ứng dụng.

5. Tạo một ứng dụng cải thiện hiệu suất đơn giản

Bây giờ, chúng ta sẽ tạo một ứng dụng web hẹn giờ Pomodoro đơn giản.

Đảm bảo bạn đang ở trong Agent Manager (Trình quản lý tác nhân) và đã chọn Playground (Sân chơi). Đưa ra câu lệnh sau:

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

Hãy lưu ý cách Tác nhân tạo danh sách việc cần làm, kế hoạch triển khai rồi thực hiện. Hãy tiếp tục chú ý đến quy trình, có thể có những trường hợp Tác nhân sẽ nhắc bạn xem xét. Dưới đây là một ví dụ về quá trình chạy.

Trong trường hợp này, Tác nhân cũng sẽ khởi chạy trình duyệt Antigravity, tự kiểm thử rồi xác nhận rằng các bài kiểm thử đã thành công. Một trong những nội dung mà Tác nhân tạo là Cấu phần phần mềm nội dung nghe nhìn chứa video xác minh. Đây là một cách tuyệt vời để xem những gì Tác nhân đã kiểm thử. Tôi cũng đề xuất một số thay đổi về kiểu vì các thay đổi đó không có hiệu lực và Tác nhân có thể thực hiện được.

Ứng dụng cuối cùng có dạng như ứng dụng bên dưới và trông khá đẹp.

Chúng ta có thể thêm một hình ảnh hẹn giờ đẹp vào ứng dụng. Tất cả những gì chúng ta cần làm là đưa ra hướng dẫn tiếp theo như minh hoạ bên dưới:

Add an image to the application that displays a timer.

Thao tác này khiến tác nhân thêm một công việc mới vào cấu phần phần mềm Công việc:

Sau đó, Tác nhân tạo một hình ảnh khi thực hiện công việc:

Cuối cùng, ứng dụng có hình ảnh như chúng ta yêu cầu:

Những điều nên thử

Xin lưu ý rằng nền của biểu tượng đồng hồ cát trong ứng dụng không trong suốt. Hãy thử yêu cầu tác nhân làm cho nền đó trong suốt.
Hãy thử một vài biến thể của bất kỳ ứng dụng nào mà bạn muốn tạo. Thử nghiệm với kiểu, hình ảnh, yêu cầu thay đổi, v.v.

6. Tạo kiểm thử đơn vị, stub mô phỏng và xác thực kiểm thử

Trường hợp sử dụng cuối cùng mà chúng ta sẽ thử ở đây là tạo kiểm thử đơn vị cho một tệp mã cụ thể mà chúng ta có và để Tác nhân cũng thực thi các kiểm thử và xác thực chúng.

Để thực hiện việc này, chúng ta sẽ có một không gian làm việc có một tệp Python duy nhất như minh hoạ bên dưới:

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}

Đảm bảo bạn có tệp Python ở trên trên máy cục bộ trong một thư mục và bạn tải tệp đó dưới dạng Không gian làm việc trong Antigravity.

Đây là một dịch vụ Đặt hàng đơn giản có chức năng chính sau đây trong hàm checkout:

Xác thực giỏ hàng không trống.
Kiểm tra kho cho tất cả các mặt hàng.
Tính giá cuối cùng.
Tính phí thanh toán.
Cập nhật kho hàng.

Chúng ta sẽ giao cho Tác nhân nhiệm vụ tạo các trường hợp kiểm thử đơn vị, cung cấp các hoạt động triển khai Mô phỏng và thực thi các kiểm thử để đảm bảo rằng các kiểm thử đó thành công.

Chúng ta sẽ mở thư mục không gian làm việc cụ thể và bạn sẽ nhận thấy rằng giờ đây, chúng ta cũng có thể sử dụng ký hiệu @ để tham chiếu tệp. Ví dụ: chúng ta có thể thực hiện như sau:

Thao tác này sẽ đưa ra một số giải thích về tệp này:

Chúng ta có thể yêu cầu Tác nhân tạo hình ảnh trực quan tốt hơn thông qua câu lệnh:

Can you visually show this class for better understanding

Bước tiếp theo là tạo các kiểm thử đơn vị và yêu cầu Tác nhân kiểm thử. Tôi đưa ra câu lệnh sau:

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

Tác nhân đã tạo cấu phần phần mềm Công việc sau đây và thực hiện công việc.

Bạn cũng có thể xem thông tin chi tiết về các kiểm thử mà Tác nhân đã chạy:

Một trong những tệp mà Tác nhân tạo cũng là tệp kiểm thử. Ảnh chụp màn hình của tệp đó được minh hoạ bên dưới:

Những điều nên thử

Lấy mã của riêng bạn và xem bạn có thể yêu cầu Tác nhân làm gì, từ việc thêm chức năng đến việc tái cấu trúc các phần trong mã của bạn.

7. Xin chúc mừng

Xin chúc mừng! Bạn đã sử dụng thành công Google Antigravity để:

Tự động nghiên cứu trên web.
Xây dựng và lặp lại các ứng dụng web full-stack.
Tạo thành phần và tinh chỉnh tính thẩm mỹ của giao diện người dùng.
Viết và xác thực các kiểm thử đơn vị phức tạp bằng các mô phỏng.

Giờ đây, bạn đã sẵn sàng để Antigravity xử lý các công việc nặng nhọc trong các dự án của riêng mình.

Tài liệu tham khảo

Lớp học lập trình : Bắt đầu sử dụng Google Antigravity
Trang web chính thức : https://antigravity.google/
Tài liệu: https://antigravity.google/docs
Trường hợp sử dụng : https://antigravity.google/use-cases
Tải xuống : https://antigravity.google/download
Kênh YouTube dành cho Google Antigravity : https://www.youtube.com/@googleantigravity