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 dựa trên 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 những kiến thức cơ bản về Antigravity. Trong lớp học lập trình này, chúng ta sẽ dùng Antigravity để tạo các ứng dụng thực tế. Chúng ta sẽ chuyển từ nghiên cứu đơn giản trên web sang tạo các ứng dụng toàn diện và kiểm thử đơn vị cấp doanh nghiệp.

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

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

Đối với khoản tín dụng Google Cloud: Để giúp bạn sử dụng Antigravity với các dự án trên Google Cloud, hãy đổi khoản tín dụng Google Cloud miễn phí bằng cách sử dụng đường liên kết này. Bạn có thể làm theo hướng dẫn tại đây để kích hoạt khoản tín dụng và tạo một dự án mới.

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

Vì bạn đã hiểu 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 tính năng này hoạt động như thế nào. Xin lưu ý rằng Antigravity là một nền tảng ưu tiên Agent. Đ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 chỉ dẫn cho Agent và Agent sẽ tự thực hiện chỉ dẫn đó, hoàn thành nhiệm vụ, yêu cầu quyền nếu cần, tạo ra các thành phần rồi thông báo cho chúng ta nếu nhiệm vụ đã hoàn tất. Do đó, chúng tôi không thể tạo ra mọi đầu ra của cuộc trò chuyện với Agent trong từng trường hợp sử dụng sau đây. Chúng tôi sẽ chia sẻ hướng dẫn và một số ả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 đến bao gồm từ việc tự động hoá một số tác vụ 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, cho đến việc phát triển một trang web hoàn chỉnh. Chúng ta đi thôi.

3. Tin tức 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ố hành động 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 News 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 rằng bạn đang ở trong Agent Manager và đã chọn Playground, như minh hoạ dưới đây:

Sau đó, hãy đưa ra chỉ dẫn sau:

Thao tác này sẽ khởi động quy trình của Agent và xác định rằng Agent cần khởi chạy trình duyệt, v.v. Bạn nên chú ý đến quy trình Tư duy và xem cách Agent thực hiện công việc của mình. Nếu không có vấn đề gì, thao tác này sẽ khởi chạy trình duyệt Antigravity và truy cập vào trang web như minh hoạ bên dưới. Đường viền màu xanh dương xung quanh trang web cho biết rằng Giúp tôi đ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 Artifact (Hiện vật) được tạo, như minh hoạ dưới đây:

Dưới đây là một ví dụ về quá trình thực thi của Agent:

Xin lưu ý rằng ở bên trái, chúng ta có phần Quy trình suy nghĩ. Bạn cũng có thể di chuyển qua các điểm và xem nội dung phát 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 mà bạn muốn Agent truy cập và lấy/tóm tắt một số dữ liệu. Hãy xem xét một số trang web mà bạn biết có Trang tổng quan và biểu đồ, rồi yêu cầu trang web đó 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.

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 buổi nói chuyện trong ngày của nhiều diễn giả.

Một lần nữa, hãy đảm bảo rằng bạn đang ở trong Agent Manager và đã chọn Playground.

Đư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 thực hiện nhiệm vụ, Agent 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 tác vụ
• Cấu phần phần mềm triển khai
• Cấu phần phần mềm hướng dẫn

Task Artifact (Tạo tác của tác vụ) bên dưới là chuỗi tác vụ ban đầu mà Agent (Trợ lý) đã giải mã để thực hiện dựa trên tác vụ đượ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 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 Hướng dẫn. Nội dung này bao gồm tất cả những gì mà Agent đã làm như minh hoạ dưới đây:

Lưu ý rằng nó đã 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 tôi chuyển sang Editor (Trình chỉnh sửa), hãy lưu ý rằng màn hình này chứa thư mục nơi ứng dụng Python Flask được tạo. Bạn cũng sẽ thấy biểu tượng Agent mode được gắn thẻ ở bên phải và bạn cũng có thể tiếp tục trò chuyện ở đó.

Giả sử chúng ta muốn thêm một số cuộc nói chuyện khác vào sự kiện. Chúng ta có thể ở trong Trình chỉnh sửa và trong bảng điều khiển Nhân viên hỗ trợ, đưa ra một chỉ dẫn như Add two more talks to the schedule.

Điều này sẽ dẫn đến việc Agent phân tích yêu cầu, cập nhật Task, Implementation Plan và sau đó xác thực chức năng đã cập nhật. Dưới đây là một ví dụ về cuộc trò chuyện:

Bạn có thể chuyển về Agent Manager nếu muốn. Quy trình này sẽ giúp bạn hiểu rõ quy trình chuyển từ Agent Manager sang Editor, thực hiện các thay đổi cho phù hợp, v.v.

Lưu ý: Trong khi thực hiện tác vụ này, tác nhân đã cố gắng khởi động Máy chủ Flask trên cổng 5000, nhưng cổng này đang được sử dụng trên máy hiện tại. Nó tiếp tục thử cổng miễn phí tiếp theo cho đến khi quyết định sử dụng cổng 8080 và có thể khởi động máy chủ.

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 Trợ lý và lưu ý cách Trợ lý thực hiện nhiệm vụ của mình bằng cách sửa đổi danh sách việc cần làm trước, 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 tài liệu khác cho ứng dụng.

5. Tạo một ứng dụng năng 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 rằng bạn đang ở trong Agent Manager và đã chọn Playground. Đư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.

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

Trong trường hợp này, ứng dụng 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 kiểm thử đã thành công. Một trong những thứ mà công cụ này tạo ra là một Tạo tác đa phương tiện chứa video xác minh. Đây là một cách hay để xem những gì đã được kiểm thử. Tôi cũng đề xuất một số thay đổi về kiểu vì kiểu đó không có hiệu lực và kiểu mới có thể làm được điều đó.

Ứng dụng cuối cùng có giao diện như 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 mắt vào ứng dụng. Chúng ta chỉ cần đưa ra hướng dẫn tiếp theo như bên dưới:

Add an image to the application that displays a timer.

Điều này dẫn đến việc tác nhân thêm một việc cần làm mới vào cấu phần phần mềm Task:

Sau đó, Gemini tạo một hình ảnh trong quá trình thực hiện nhiệm vụ:

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ử

• Bạn sẽ thấy 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 trợ lý ảo làm cho thông tin đó minh bạch.
• 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 các kiểu, hình ảnh, yêu cầu thay đổi, v.v.

6. Tạo kiểm thử đơn vị, Mock Stub 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à để Agent cũng thực thi các kiểm thử đó và xác thực chúng.

Để làm 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ạ dưới đây:

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 rằng bạn có tệp Python nêu trên trên máy tính 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:

1. Xác thực rằng giỏ hàng không trống.
2. Kiểm tra kho hàng của tất cả mặt hàng.
3. Tính giá cuối cùng.
4. Thanh toán phí.
5. Cập nhật kho hàng.

Chúng ta sẽ giao cho Agent nhiệm vụ tạo các trường hợp kiểm thử đơn vị, cung cấp các triển khai Mock 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 biểu tượng @ để tham chiếu đến tệp. Ví dụ: chúng tôi có thể làm như sau:

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

Chúng ta có thể yêu cầu AI tạo một hình ảnh trực quan 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 bài kiểm thử đơn vị và yêu cầu Agent 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.

Nó đã tạo cấu phần phần mềm Task sau đây và thực hiện nhiệm vụ của mình.

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

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

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

Hãy dùng mã của riêng bạn và xem những việc bạn có thể yêu cầu Trợ lý thực hiện, ngay từ việc thêm chức năng cho đến 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 toàn ngăn xếp.
• 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 đối tượng mô phỏng.

Giờ đây, bạn đã sẵn sàng để Antigravity xử lý những phần việc khó khăn trong các dự án của riêng bạn.

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 của Google Antigravity : https://www.youtube.com/@googleantigravity