Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

Xây dựng bằng Google Antigravity

1. Giới thiệu

Trong lớp học lập trình này, bạn sẽ tìm hiểu về Google Antigravity, một nền tảng phát triển tác nhân được thiết kế để giúp bạn phát triển trong kỷ nguyên của các tác nhân. Antigravity đóng vai trò là trung tâm điều hành tập trung của các tác nhân AI, cung cấp một nền tảng hợp nhất để khởi chạy, giám sát và điều phối các hoạt động của các tác nhân này.

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:

Đã cài đặt và định cấu hình Antigravity và Antigravity IDE.
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 đã 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 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 hướng dẫn cho Agent và Agent sẽ tự thực hiệ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 kết quả của cuộc trò chuyện với Trợ lý 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 toàn bộ trang web. Chúng ta đi thôi.

3. Khoảnh khắc nổi bật trên News

Đâ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 vào 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ả.

Chúng ta sẽ giả định rằng chúng ta có một thư mục gốc mà trong đó chúng ta sẽ tạo các dự án khác nhau mà chúng ta sẽ thấy trong lớp học lập trình này. Thư mục gốc này trên máy của chúng ta có tên là agy2-pprojects.

Trước tiên, hãy tạo một thư mục có tên news-highlights trong thư mục ở trên để bắt đầu từ đầu.

Khởi chạy Antigravity và tạo một Dự án mới. Thêm thư mục news-highlights vào đó.

Bắt đầu một cuộc trò chuyện mới trong không gian làm việc news-highlights vừa nhập:

Sau đó, hãy đưa ra chỉ dẫn sau: "truy cập news.google.com và cho tôi xem tin nổi bật hiện tại."

Thao tác này sẽ khởi động quy trình Agent và xác định rằng quy trình này cần truy cập vào trang web news.google.com và yêu cầu bạn cấp quyền. Có thể bạn sẽ được nhắc nhiều lần về việc đọc URL và bạn có thể chọn cấp quyền cho dự án này, v.v.

Bạn nên chú ý kỹ đến Quy trình suy nghĩ và xem cách mà Trợ lý thực hiện công việc của mình. Sau đây là ví dụ về quá trình thực thi của Agent:

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 của nhiều diễn giả trong suốt ngày.

Một lần nữa, hãy tạo một thư mục mới có tên là conference-website. Đảm bảo rằng bạn đã tạo một dự án mới trong giao diện Antigravity Agent và thêm thư mục conference-website vào dự án đó.

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

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 sẽ phân tích yêu cầu và đưa ra Kế hoạch triển khai trước tiên. Gemini sẽ tạo một thành phần chính có tên là implementation_plan.md để bạn xem xét về cách Gemini lên kế hoạch tạo và đáp ứng các yêu cầu mà bạn đã chỉ định trong câu lệnh. Sau đây là một ví dụ về kết quả đầu ra:

Trước khi nhấp vào Tiếp tục, hãy xem kế hoạch triển khai. Bạn có thể nhấp vào đường liên kết đến tệp implementation_plan.md ở trên hoặc bằng cách bật/tắt Ngăn phụ ở trên cùng bên phải. Thao tác này sẽ cho bạn thấy chế độ xem Artifact (Hiện vật) và bạn có thể thấy rằng kế hoạch triển khai hiện có ở đó để bạn xem xét.

Dưới đây là kế hoạch triển khai mẫu được tạo cho lần chạy của chúng tôi:

Bạn có thể đưa ra nhận xét trong kế hoạch và nhắc lại cho Trợ lý hoặc hiện tại, chúng ta có thể chấp nhận kế hoạch triển khai như hiện tại và tiếp tục bằng cách nhấp vào nút Tiếp tục trong giao diện Cuộc trò chuyện.

Trợ lý sẽ tiếp tục tạo các tệp mã nguồn và bạn cũng sẽ nhận thấy rằng Trợ lý cập nhật một cấu phần phần mềm khác có tên là Task (Tác vụ). Đây là danh sách các hành động hoặc nhiệm vụ cần thực hiện để đạt được kết quả cuối cùng.

Bạn có thể nhấp vào biểu tượng Nhiệm vụ bất cứ lúc nào hoặc thậm chí truy cập vào danh sách các tạo tác để xem Nhiệm vụ. Dưới đây là một trang thông tin mẫu:

Tại một thời điểm nào đó trong tác vụ cuối cùng, khi cố gắng chạy và xác minh ứng dụng, Antigravity sẽ thiết lập một môi trường Python và sẽ yêu cầu bạn cấp quyền thiết lập môi trường, cài đặt các phần phụ thuộc, v.v. Cấp các quyền cần thiết.

Sau khi xác minh thành công, thông tin chi tiết sẽ được làm nổi bật cùng với một cấu phần phần mềm khác là Hướng dẫn chi tiết. Cấu phần phần mềm này trình bày chi tiết các tính năng đã hoàn tất, ngăn xếp công nghệ, kết quả xác thực và hướng dẫn.

Sau đây là một Hướng dẫn mẫu:

Trang web cuối cùng khi chúng tôi truy cập vào URL này được hiển thị bên dưới:

Nếu muốn xem mã được tạo, bạn có thể nhấp vào Mở IDE ở góc trên cùng bên phải. Thao tác này sẽ mở Antigravity IDE, bạn có thể dùng để xem mã đã tạo. Dưới đây là ảnh chụp màn hình mẫu:

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, sau đó là kế hoạch triển khai, v.v.
Thêm dữ liệu bổ sung vào Lịch sự kiện. Ví dụ: Add two more talks to the schedule.
Yêu cầu Tác nhân tạo một 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 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.

Tạo một thư mục pomodoro-timer. Đảm bảo rằng bạn đang ở trong Agent Manager, đã nhập và chọn không gian làm việc pomodoro-timer. Bắt đầu bằng câu lệnh này:

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 Kế hoạch triển khai, Danh sách việc cần làm 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 quy trình này yêu cầu bạn xem xét.

Sau đây là một lần chạy mẫu với thông báo Hướng dẫn và Công việc:

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

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

Thêm một số hình ảnh vào ứng dụng. Ví dụ: thêm hình ảnh Hẹn giờ vào ứng dụng.
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ạ 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 rằng bạn có tệp Python nêu trên (order_service.py) ở trên máy trong một thư mục mới và bạn đã mở Dự án đó để trò chuyện 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 hàng của tất cả mặt hàng.
Tính giá cuối cùng.
Thanh toán phí.
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 ta có thể bắt đầu nhập @order và hệ thống sẽ hiển thị tệp order_service.py.

Chúng tôi có thể giao một nhiệm vụ giúp chúng tôi hiểu rõ tệp này. Đưa ra câu lệnh sau:

Explain the @order_service.py file

Thao tác này sẽ cho 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 Gemini tạo hình ảnh trực quan đẹp mắt hơn thông qua câu lệnh:

Can you visually show this class for better understanding

Antigravity đề cập đến việc đã hoàn thành nhiệm vụ và đã tạo một cấu phần phần mềm chứa hình ảnh trực quan:

Chúng ta có thể xem hình ảnh trực quan như minh hoạ bên dưới:

và những điều sau:

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ó đã thực hiện nhiệm vụ của mình, tạo các kiểm thử, chạy các kiểm thử và sửa một lỗi. Sau đây là kết quả:

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 nhiều chức năng hơn cho đế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.
Tạo và lặp lại các ứng dụng web toàn ngăn xếp.
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 đã có thể để Antigravity xử lý những phần việc khó khăn 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
Tải xuống : https://antigravity.google/download
Kênh YouTube của Google Antigravity : https://www.youtube.com/@googleantigravity