Last chance! 50% off DataCamp Premium
Sale ends in
Google Antigravity là một IDE do agent điều khiển kết hợp các mô hình mạnh như Gemini 3 với quy trình ưu tiên agent. Thay vì tự cấu hình công cụ, terminal và phiên trình duyệt, bạn cộng tác với một agent AI có thể lập kế hoạch công việc thành các tác vụ, chạy lệnh, chỉnh sửa mã, và thậm chí tương tác với trình duyệt để kiểm thử và ghi tài liệu cho ứng dụng.
Trong hướng dẫn này, tôi sẽ đưa bạn qua cách xây dựng một Bảng điều khiển Rủi ro Tài chính Cá nhân hoạt động bằng Google Antigravity. Bạn sẽ thấy cách:
- Cài đặt và cấu hình Antigravity với phát triển có trợ giúp của agent
- Prompt agent để thiết lập ứng dụng Next.js, Tailwind và shadcn/ui
- Xem xét và tinh chỉnh kế hoạch triển khai được tạo tự động
- Để agent kiểm thử ứng dụng trên trình duyệt bằng tiện ích mở rộng Antigravity
- Lặp tính năng như chế độ tối/sáng và gỡ lỗi với khả năng sử dụng máy tính
Kết thúc, bạn sẽ có một bảng điều khiển đa trang trực quan hóa mức độ rủi ro cho Tiết kiệm, Trái phiếu, Quỹ chỉ số và Crypto, kèm điều khiển tương tác và giao diện fintech hiện đại, được xây dựng chỉ với một prompt. Tôi cũng khuyến nghị xem hướng dẫn về Gemini 3 API và hướng dẫn Gemini 3 Flash.
Tuyên bố miễn trừ trách nhiệm: Hướng dẫn này chỉ nhằm mục đích giáo dục và không cấu thành lời khuyên tài chính; luôn tự nghiên cứu hoặc tham khảo ý kiến chuyên gia tài chính đủ điều kiện trước khi đưa ra quyết định đầu tư.
Google Antigravity là gì?
Google Antigravity là một nền tảng phát triển ưu tiên agent biến IDE của bạn thành trung tâm điều khiển cho các agent AI. Cốt lõi của nó trao cho agent quyền điều khiển đồng bộ với trình soạn thảo, terminal và trình duyệt, để chúng có thể lập kế hoạch, thay đổi mã, chạy lệnh và xác minh hành vi toàn trình từ một nơi duy nhất.
Thay vì tự nối ghép script và công cụ, bạn mô tả kết quả mong muốn và để agent của Antigravity xử lý phần nặng. Chúng có thể:
- Biến yêu cầu cấp cao thành kế hoạch cấp tác vụ hoặc danh sách kiểm triển khai
- Chạy lệnh terminal để tạo dự án, cài phụ thuộc và khởi động máy chủ dev
- Chỉnh sửa mã trên toàn workspace, từ tệp bố cục đến thành phần dùng chung
- Dùng tiện ích mở rộng trình duyệt để mở ứng dụng, nhấp qua các luồng, và chụp ảnh màn hình hoặc bản ghi hướng dẫn dưới dạng Artifact.
Antigravity được xây dựng xoay quanh các mô hình Gemini 3 của Google, nhưng cũng hỗ trợ nhà cung cấp khác như Claude Sonnet 4.5 và GPT-OSS. Nó có hai bề mặt chính, tức là giao diện Trình soạn thảo giống IDE (nếu bạn từng dùng Cursor hoặc VS Code), và giao diện Trình quản lý Agent đóng vai trò trung tâm điều khiển cho các tác vụ chạy lâu, đa workspace. Kết hợp lại, chúng giúp bạn làm việc ở cấp độ định hướng tác vụ dễ dàng hơn trong khi agent xử lý chi tiết triển khai.
Demo Google Antigravity: Xây dựng Bảng điều khiển Rủi ro Tài chính
Trong phần này, chúng ta sẽ xây dựng một bảng điều khiển rủi ro tài chính cá nhân với Google Antigravity. Agent sẽ biến một prompt ngôn ngữ tự nhiên duy nhất thành dự án Next.js mô hình hóa các sản phẩm đầu tư khác nhau và hồ sơ rủi ro của chúng.
Kết thúc, bạn sẽ có:
- Một bảng điều khiển đa trang cho Tiết kiệm, Trái phiếu, Quỹ chỉ số và Crypto
- Thanh trượt tương tác cho thời hạn đầu tư
- Giao diện tối/sáng chỉn chu
- Hiểu biết về cách agent Antigravity lập kế hoạch, triển khai, kiểm thử và lặp trên một tính năng hoàn chỉnh
Bước 1: Cài đặt Google Antigravity
Bắt đầu bằng cách tải Google Antigravity từ trang web chính thức và chọn bộ cài phù hợp thông số máy của bạn.
Nhấp Download for MacOS (hoặc hệ điều hành của bạn), và bạn sẽ được đưa đến màn hình chọn nền tảng để chọn binary phù hợp với máy và hoàn tất cài đặt.
Trong hướng dẫn này, tôi chạy trên Mac dùng Apple Silicon, nhưng giao diện sẽ không khác trên các máy khác.
Sau khi tải xong, thiết lập Google Antigravity như bất kỳ ứng dụng nào khác và khởi chạy.
Bước 2: Thiết lập lần đầu
Lần đầu mở, Antigravity sẽ hướng dẫn bạn qua trình hướng dẫn khởi tạo.
Bước 2.1: Chọn luồng thiết lập
Nếu bạn là người dùng thành thạo Cursor hoặc VS Code và muốn dùng cài đặt của chúng để thiết lập Antigravity, hãy chọn tùy chọn tương ứng. Tuy vậy, tôi thích bắt đầu mới, nên chọn Start fresh và nhấp Next.
Bước 2.2: Thiết lập Antigravity Agent
Tiếp theo, bạn sẽ thấy màn hình về cách dùng Agent. Cho hướng dẫn này, chọn:
- Phát triển có trợ giúp của agent (khuyến nghị): Tùy chọn này để agent làm phần lớn công việc nhưng vẫn giữ con người trong vòng lặp để bạn có thể rà soát kế hoạch và thay đổi khi tiến hành.
- Thực thi terminal (Tự động): Cho phép agent tự động chạy các lệnh terminal an toàn, thường quy mà không cần hỏi mỗi lần.
- Chính sách rà soát (Agent quyết định): Để agent chọn khi nào cần sự rà soát rõ ràng của con người và khi nào có thể tự tiếp tục.
- Dùng danh sách cho phép mặc định cho trình duyệt: Hạn chế quyền truy cập trình duyệt của agent vào tập miền và hành động an toàn đã phê duyệt sẵn để tăng bảo mật.
Nhấp Next để hoàn tất thiết lập.
Sau khi hoàn tất, bước tiếp theo là tạo một workspace cho thử nghiệm của chúng ta.
Bước 3: Tạo workspace mới
Khi thiết lập xong, bạn sẽ vào màn hình chính Antigravity. Để tiếp tục, nhấp Open Folder và tạo/chọn thư mục mới cho dự án này. ví dụ: ~/Antigravity/personal-finance-dashboard. Thư mục này sẽ trở thành ứng dụng Next.js của bạn.
Bên phải, bạn sẽ thấy bảng Agent nơi bạn có thể chọn mô hình và gửi prompt.
Bước 4: Xây dựng ứng dụng
Với workspace đã mở, chọn một mô hình (ví dụ, Gemini 3 Pro hoặc Claude Sonnet 4.5, hoặc GPT OSS 120B) trong bảng Agent. Sau đó, dán prompt sau:
Build me a Next.js app called “Personal Finance Risk Dashboard” that shows different risk profiles for Savings, Bonds, Index Funds, and Crypto, each on its own page.
For every product, display risk level, volatility, and projected returns (with a slider for time horizon),
and use Tailwind plus shadcn/ui to make the UI look like a polished, responsive fintech dashboardLưu ý: Tại thời điểm viết hướng dẫn này, tôi thử với mô hình Gemini 3 Pro (thấp) nhưng gặp một số lỗi. Tuy nhiên, bạn có thể thử mô hình phù hợp với trường hợp sử dụng của mình.
Bạn sẽ thấy agent phản hồi như sau:
Ngay sau đó, Antigravity sẽ đề xuất một lệnh terminal để khởi tạo khung dự án. Chỉ cần nhấp Accept để cho phép agent chạy lệnh và thực hiện một vài bước nền nhằm tạo danh sách kiểm hoàn chỉnh cho ứng dụng.
Dưới đây là ảnh chụp các bước nền chạy trong terminal bên cạnh, bắt đầu với việc cài phụ thuộc.
Bạn có thể để nó chạy và theo dõi log.
Bước 5: Xem lại artifact Danh sách kiểm Tác vụ
Khi việc khởi tạo hoàn tất, agent tạo một artifact Task checklist cho toàn bộ dự án.
Mỗi phần chứa các ô đánh dấu như:
- Khởi tạo dự án Next.js với TypeScript và Tailwind CSS
- Thiết lập thư viện thành phần shadcn/ui
- Trang Tiết kiệm/Trái phiếu/Quỹ chỉ số/Crypto với hồ sơ rủi ro
- Triển khai chế độ tối, hoạt ảnh và bố cục đáp ứng
- Kiểm thử điều hướng và chức năng thanh trượt
Khi danh sách này sẵn sàng, agent bắt đầu thực hiện từng tác vụ một. Lúc này, bạn có thể mở thanh bên Explorer để xem những gì agent đã tạo:
Giờ bạn đã có bộ tệp Next.js, Tailwind và shadcn/ui tiêu chuẩn, sẵn sàng tùy biến cho ứng dụng này.
Bước 6: Xem xét kế hoạch triển khai
Song song với danh sách kiểm, Antigravity tạo một artifact Kế hoạch Triển khai chi tiết hơn:
Phần Cần người dùng rà soát thường gồm:
- Cách tiếp cận thiết kế: Bao gồm chế độ tối, gradient, hoạt ảnh và thông tin thiết kế đáp ứng của ứng dụng.
- Mô hình dữ liệu: Tham số này chứa tất cả chỉ số rủi ro, như tiết kiệm, trái phiếu, quỹ chỉ số và crypto cho ứng dụng rủi ro tài chính của chúng ta.
- Cấu trúc ứng dụng cốt lõi: Mô tả cách các tệp bố cục chính sẽ được chỉnh sửa để thiết lập kiểu toàn cục, kiểu chữ, metadata, trang chủ và chủ đề chế độ tối.
- Trang sản phẩm: Liệt kê các trang Next.js riêng như
/savings,/bonds,/index-funds,/crypto, và thông tin rủi ro, biến động, lợi nhuận dự kiến mà mỗi trang hiển thị. - Thành phần dùng chung: Định nghĩa các thành phần UI tái sử dụng như thanh điều hướng, thẻ hồ sơ rủi ro, bộ tính lợi nhuận, và thẻ tổng quan sản phẩm dùng trên trang chủ và các trang sản phẩm.
- Tiện ích và kiểu: Bao gồm tiện ích TypeScript trong
lib/financial-data.tschứa dữ liệu sản phẩm, hồ sơ rủi ro, tính toán lợi nhuận dự kiến, và hàm trợ giúp định dạng tiền và phần trăm. - Kế hoạch xác minh: Phác thảo cách kiểm thử ứng dụng, gồm khởi chạy máy chủ dev, kiểm tra thủ công từng trang và thanh trượt, xác nhận chế độ tối và đáp ứng, và dùng agent trình duyệt để ghi toàn bộ quy trình kèm ảnh chụp màn hình.
Chúng ta có thể điều chỉnh số liệu rủi ro nếu muốn dữ liệu thực tế hơn hoặc thêm yêu cầu bổ sung. Cuối cùng, thêm nhận xét trong các artifact Task/Implementation Plan nếu bạn muốn agent điều chỉnh hướng đi.
Khi kế hoạch ổn, nhấp Proceed trong tab Implementation Plan. Khi làm vậy, agent sẽ bắt đầu chỉnh sửa và tạo tệp nguồn dưới thư mục src/. Nó sẽ xây dựng các trang riêng cho Tiết kiệm, Trái phiếu, Quỹ chỉ số và Crypto.
Trong quá trình đó, nó sẽ tạo các thành phần tái sử dụng cho thẻ, thanh trượt và biểu đồ, áp dụng kiểu Tailwind và shadcn/ui trên toàn ứng dụng.
Cuối cùng, bạn sẽ thấy các Bước nền và Cập nhật tiến độ mới cho mỗi thay đổi mã.
Bước 7: Kiểm thử và xác minh
Khi triển khai xong, Antigravity chuyển sang Kiểm thử và Xác minh. Bạn sẽ thấy một mục tiến độ mới nơi Antigravity sẽ yêu cầu dùng trình duyệt qua nút Setup hoặc Deny. Chỉ cần nhấp Setup để tiếp tục.
Trước khi agent có thể tương tác với trình duyệt, bạn cần tiện ích mở rộng chính thức.
Truy cập Chrome Web Store và nhấp Add to Chrome.
Sau khi cài đặt, khi agent điều khiển trình duyệt, bạn sẽ thấy viền phát sáng quanh màn hình như bên dưới:
Vầng sáng này cho biết Antigravity Agent đang chủ động dùng trình duyệt, tức là nhấp, cuộn và kiểm thử ứng dụng như một phần bước xác minh.
Bước 8: Xem lại artifact walkthrough
Khi kiểm thử hoàn tất, bạn sẽ thấy phần tóm tắt Cập nhật tiến độ cuối cùng như sau:
Artifact Walkthrough thường bao gồm:
- Ảnh chụp màn hình của mỗi trang
- Bản ghi phiên trình duyệt của agent khi nhấp qua ứng dụng
- Mô tả tường thuật về những gì đã kiểm thử (ví dụ: “Đã xác minh thanh trượt trang Tiết kiệm cập nhật lợi nhuận dự kiến theo thời gian thực”)
Nếu mọi thứ ổn, nhấp Accept all để áp dụng thay đổi.
Đây là ứng dụng cuối cùng của chúng ta:
Bước 9: Chỉnh sửa bảng điều khiển
Giờ hãy lặp trên UI. Giả sử bạn muốn một nút chuyển chế độ tối/sáng ở header bảng điều khiển và thêm vài biểu đồ cho mỗi trang. Trong Task hoặc Implementation Plan, hoặc trực tiếp trong bảng Agent, bạn có thể yêu cầu:
Antigravity sẽ:
- Cập nhật thành phần bố cục để có nút chuyển chủ đề (nhiều khả năng dùng tiện ích chủ đề của shadcn/ui)
- Thêm, thay hoặc xóa các thành phần biểu đồ
- Chạy lại ứng dụng và kiểm thử nút chuyển trong trình duyệt
Giờ nhấp Submit, và cả bình luận trước đó lẫn bình luận này sẽ được triển khai.
Bước 10: Xem lại lỗi và gỡ lỗi
Trong thực tế, bạn có thể thấy các lần rà soát thường dẫn đến nhiều lỗi, có thể do mô hình, nhưng Antigravity vẫn tiếp tục xử lý với Computer Use.
Ngay cả khi agent gặp lỗi, nó vẫn có thể:
- Đọc thông báo lỗi trong terminal
- Mở ứng dụng trong trình duyệt và tái hiện vấn đề
- Chụp ảnh màn hình và bản ghi phát lại trạng thái lỗi
- Dùng các dấu hiệu trực quan và log đó để sửa lỗi
Bạn có thể theo dõi bằng cách mở Walkthrough hoặc kiểm tra Cập nhật tiến độ mới cho các bước gỡ lỗi.
Tại thời điểm này, bạn đã:
- Prompt một agent để khởi tạo trọn bộ ứng dụng Next.js + Tailwind + shadcn/ui
- Xem xét và chỉnh sửa Kế hoạch Triển khai có cấu trúc
- Để Antigravity xử lý thiết lập, viết mã, kiểm thử và xác minh trên trình duyệt
- Lặp UI bằng bình luận và prompt bổ sung
- Xem agent gỡ lỗi qua khả năng sử dụng máy tính và ảnh chụp màn hình
Giờ ứng dụng cuối cùng của chúng ta đã sẵn sàng để rà soát.
Bước 11: Kết quả cuối cùng
Sau khi lặp trên nút chuyển và bố cục, bạn sẽ có ứng dụng cuối cùng nơi các biểu đồ được gỡ bỏ, và nút chuyển chế độ sáng/tối hoạt động trên toàn bộ bảng điều khiển.
Chế độ tối:
Chế độ sáng:
Bạn có thể xem bảng điều khiển của chúng tôi hoạt động trong video bên dưới:
