Làm quen với 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 (gọi tắt là Antigravity trong phần còn lại của tài liệu), một nền tảng phát triển dựa trên tác nhân, phát triển IDE thành kỷ nguyên ưu tiên tác nhân.

Không giống như các trợ lý lập trình tiêu chuẩn chỉ tự động hoàn thành các dòng, Antigravity cung cấp một "Trung tâm kiểm soát" để quản lý các tác nhân tự trị có thể lập kế hoạch, lập trình và thậm chí duyệt web để giúp bạn xây dựng.

Antigravity được thiết kế dưới dạng một nền tảng "ưu tiên tác nhân". Điều này giả định rằng AI không chỉ là một công cụ viết mã mà còn là một tác nhân tự động có khả năng lập kế hoạch, thực thi, xác thực và lặp lại các tác vụ kỹ thuật phức tạp mà không cần nhiều sự can thiệp của con người.

Kiến thức bạn sẽ học được

  1. Cài đặt và định cấu hình Antigravity
  2. Khám phá các khái niệm chính của Antigravity như Agent Manager, Editor, Browser và nhiều khái niệm khác
  3. Khám phá một số trường hợp sử dụng với Antigravity

Bạn cần có

Antigravity hiện là bản dùng thử dành cho tài khoản Gmail cá nhân. Bạn có hạn mức miễn phí để sử dụng các mô hình hàng đầu.

Bạn cần cài đặt Antigravity trên hệ thống của mình. Sản phẩm này có trên máy Mac, Windows và một số bản phân phối Linux cụ thể. Ngoài máy của riêng bạn, bạn sẽ cần những thứ sau:

  • Trình duyệt web Chrome
  • Tài khoản Gmail (Tài khoản Gmail cá nhân).

Lớp học lập trình này được thiết kế cho người dùng và nhà phát triển ở mọi cấp độ (kể cả người mới bắt đầu).

2. Cài đặt

Chúng ta sẽ bắt đầu bằng việc cài đặt Antigravity. Hiện tại, sản phẩm này đang ở giai đoạn xem trước và bạn có thể sử dụng tài khoản Gmail cá nhân để bắt đầu sử dụng.

Chuyển đến trang tải xuống rồi nhấp vào phiên bản Hệ điều hành phù hợp với trường hợp của bạn. Khởi chạy trình cài đặt ứng dụng và cài đặt ứng dụng đó trên máy của bạn. Sau khi hoàn tất quá trình cài đặt, hãy chạy ứng dụng Antigravity. Bạn sẽ thấy một màn hình tương tự như sau:

29fada39721093c.png

Vui lòng nhấp vào Tiếp theo mỗi lần. Các bước chính được trình bày chi tiết bên dưới:

  • Choose setup flow: Thao tác này sẽ hiển thị lựa chọn nhập từ chế độ cài đặt hiện có của VS Code hoặc Cursor. Chúng ta sẽ bắt đầu lại từ đầu.
  • Choose an Editor theme type. Chúng tôi sẽ chọn giao diện Tối, nhưng bạn hoàn toàn có thể chọn giao diện khác tuỳ theo ý muốn.
  • How do you want to use Antigravity agent:

cf89c9d16394914c.png

Hãy tìm hiểu chi tiết hơn về vấn đề này và lưu ý rằng bạn có thể thay đổi lựa chọn này bất cứ lúc nào, ngay cả khi đang tương tác với Trợ lý.

Trước khi tìm hiểu các lựa chọn, hãy xem xét 2 thuộc tính cụ thể ở đây (bạn sẽ thấy ở bên phải hộp thoại):

Chính sách về việc thực thi trên thiết bị đầu cuối

Đây là về việc cấp cho Agent khả năng thực thi các lệnh (ứng dụng/công cụ) trong thiết bị đầu cuối của bạn. Có 3 lựa chọn ở đây.

  • Off: Không bao giờ tự động thực thi các lệnh trên thiết bị đầu cuối (ngoại trừ các lệnh trong Danh sách cho phép có thể định cấu hình)
  • Auto: Agent quyết định có tự động thực thi lệnh nào đó trên thiết bị đầu cuối hay không. Trong trường hợp cần có sự cho phép của bạn, ứng dụng sẽ quyết định và yêu cầu bạn cấp quyền.
  • Turbo: Luôn tự động thực thi các lệnh trên thiết bị đầu cuối (ngoại trừ các lệnh trong Danh sách từ chối có thể định cấu hình)

Xem xét chính sách

Khi thực hiện nhiệm vụ, Agent sẽ tạo ra nhiều cấu phần phần mềm (Kế hoạch công việc, Kế hoạch triển khai, v.v.). Chính sách xem xét được thiết lập để bạn có thể xác định người quyết định xem có cần xem xét hay không. Bạn có luôn muốn xem xét yêu cầu này hay để nhân viên hỗ trợ quyết định. Theo đó, bạn cũng có 3 lựa chọn.

  • Always Proceed: Trợ lý không bao giờ yêu cầu đánh giá
  • Agent Decides: Nhân viên hỗ trợ sẽ quyết định thời điểm yêu cầu đánh giá
  • Request Review: Luôn yêu cầu đánh giá

Sau khi hiểu rõ điều này, 4 lựa chọn này không gì khác ngoài các chế độ đặt sẵn cụ thể cho chính sách thực thi và xem xét của Terminal đối với 3 lựa chọn và lựa chọn thứ 4 có sẵn để chúng ta có thể kiểm soát hoàn toàn theo ý mình. Chúng tôi cung cấp 4 lựa chọn này để bạn có thể chọn mức độ tự chủ mà bạn muốn cấp cho Trợ lý để thực thi các lệnh trong thiết bị đầu cuối và xem xét các cấu phần phần mềm trước khi tiếp tục thực hiện nhiệm vụ.

4 lựa chọn này là:

  • Phát triển dựa trên tác nhân
  • Phát triển nhờ sự hỗ trợ của nhân viên
  • Phát triển dựa trên bài đánh giá
  • Cấu hình tùy chỉnh

Lựa chọn phát triển có sự hỗ trợ của đặc vụ là lựa chọn cân bằng và được đề xuất vì cho phép Đặc vụ đưa ra quyết định và quay lại người dùng để phê duyệt.

Vì vậy, hãy chọn cách bạn muốn và tốt nhất là hiện tại, hãy chọn cách được đề xuất.

  • Configure your Editor: Chọn lựa chọn ưu tiên.
  • Sign in to Google: Như đã đề cập trước đó, Antigravity hiện đang ở chế độ xem trước và miễn phí nếu bạn có tài khoản Gmail cá nhân. Vậy hãy đăng nhập ngay bằng tài khoản của bạn. Đảm bảo bạn cho phép tạo một Hồ sơ Chrome mới cho việc này. Thao tác này sẽ mở trình duyệt để bạn đăng nhập. Khi xác thực thành công, bạn sẽ thấy một thông báo tương tự như thông báo bên dưới và thông báo này sẽ đưa bạn quay lại ứng dụng Antigravity. Thuận theo dòng chảy tự nhiên.
  • Terms of Use: Bạn có thể đưa ra quyết định xem bạn có muốn chọn tham gia hay không rồi nhấp vào Tiếp theo.

Thao tác này sẽ đưa bạn đến thời điểm quyết định, nơi Antigravity sẽ chờ bạn cộng tác. Chúng tôi đã sẵn sàng bắt đầu.

3. Agent Manager

Antigravity phân nhánh nền tảng Visual Studio Code (VS Code) mã nguồn mở nhưng thay đổi đáng kể trải nghiệm người dùng để ưu tiên việc quản lý tác nhân hơn là chỉnh sửa văn bản. Giao diện này được chia thành hai cửa sổ chính riêng biệt: Trình chỉnh sửaTrình quản lý tác nhân. Việc phân tách này phản ánh sự khác biệt giữa đóng góp cá nhân và quản lý kỹ thuật.

Agent Manager: Trung tâm kiểm soát

Khi khởi chạy Antigravity, người dùng thường không thấy cây tệp mà thấy Trình quản lý tác nhân, như minh hoạ dưới đây:

d5ae91fc746e1bba.png

Giao diện này đóng vai trò là trang tổng quan Mission Control. Đây là một công cụ được thiết kế để điều phối ở cấp độ cao, cho phép nhà phát triển tạo, giám sát và tương tác với nhiều tác nhân hoạt động không đồng bộ trên nhiều không gian làm việc hoặc tác vụ.

Trong quan điểm này, nhà phát triển đóng vai trò là một kiến trúc sư. Họ xác định các mục tiêu cấp cao, ví dụ:

  • Tái cấu trúc mô-đun xác thực
  • Cập nhật cây phần phụ thuộc
  • Tạo bộ kiểm thử cho API thanh toán

Như sơ đồ trên cho thấy, mỗi yêu cầu này sẽ tạo ra một phiên bản tác nhân chuyên dụng. Giao diện người dùng cung cấp hình ảnh trực quan về các luồng công việc song song này, cho thấy trạng thái của từng tác nhân, Artifacts (Hiện vật) mà tác nhân đã tạo ra (kế hoạch, kết quả, chênh lệch) và mọi yêu cầu đang chờ phê duyệt của con người.

Cấu trúc này giải quyết một hạn chế chính của các IDE trước đây (chủ yếu là trải nghiệm chatbot), vốn có tính tuyến tính và đồng bộ. Trong giao diện trò chuyện truyền thống, nhà phát triển phải đợi AI tạo xong mã rồi mới đặt câu hỏi tiếp theo. Trong Chế độ xem của người quản lý của Antigravity, nhà phát triển có thể điều phối 5 tác nhân khác nhau để làm việc đồng thời trên 5 lỗi khác nhau, nhờ đó nhân hiệu suất của họ lên nhiều lần.

Nếu nhấp vào Tiếp theo ở trên, bạn có thể mở một Workspace.

ec72712ea24bf6d5.png

Hãy coi Workspace như bạn đã biết trong VS Code và bạn sẽ hoàn tất. Vì vậy, chúng ta có thể mở một thư mục cục bộ bằng cách nhấp vào nút này rồi chọn một thư mục để bắt đầu. Trong trường hợp của tôi, tôi có một thư mục trong thư mục gốc có tên là my-agy-projects và tôi đã chọn thư mục đó. Bạn có thể sử dụng một thư mục hoàn toàn khác.

Xin lưu ý rằng bạn có thể bỏ qua hoàn toàn bước này nếu muốn và bạn cũng có thể mở một Workspace bất cứ lúc nào sau này.

Sau khi hoàn tất bước này, bạn sẽ thấy cửa sổ Agent Manager (Trình quản lý tác nhân) như minh hoạ bên dưới:

156224e223eeda36.png

Bạn sẽ nhận thấy rằng ứng dụng này ngay lập tức được thiết lập để bắt đầu một cuộc trò chuyện mới trong thư mục không gian làm việc (my-agy-projects) mà bạn đã chọn. Xin lưu ý rằng bạn có thể sử dụng kiến thức hiện có về cách làm việc với các ứng dụng AI khác (Cursor, Gemini CLI) và sử dụng @ cũng như các cách khác để thêm ngữ cảnh bổ sung trong khi đưa ra câu lệnh.

Hãy xem cả trình đơn thả xuống PlanningModel Selection. Trình đơn thả xuống Lựa chọn mô hình cho phép bạn chọn một trong các mô hình hiện có để Agent sử dụng. Danh sách này được trình bày dưới đây:

fb0744dc43911365.png

Tương tự, chúng ta thấy rằng Nhân viên hỗ trợ sẽ ở chế độ Planning mặc định. Nhưng chúng ta cũng có thể chọn chế độ Fast.

f403e40ad480efc9.png

Hãy xem tài liệu nói gì về vấn đề này:

  • Planning: Một Đặc vụ có thể lập kế hoạch trước khi thực hiện các nhiệm vụ. Sử dụng cho nghiên cứu chuyên sâu, các nhiệm vụ phức tạp hoặc công việc cộng tác. Ở chế độ này, Agent sắp xếp công việc theo nhóm nhiệm vụ, tạo ra các Artifact và thực hiện các bước khác để nghiên cứu kỹ lưỡng, suy nghĩ thấu đáo và lên kế hoạch cho công việc nhằm đạt được chất lượng tối ưu. Bạn sẽ thấy nhiều kết quả hơn ở đây.
  • Fast: Một Tác nhân sẽ thực hiện trực tiếp các tác vụ. Sử dụng cho các tác vụ đơn giản có thể hoàn thành nhanh hơn, chẳng hạn như đổi tên biến, khởi động một số lệnh bash hoặc các tác vụ nhỏ hơn, cục bộ khác. Điều này rất hữu ích khi tốc độ là một yếu tố quan trọng và nhiệm vụ đủ đơn giản để bạn không phải lo lắng về chất lượng kém hơn.

Nếu bạn đã quen với Ngân sách suy nghĩ và các thuật ngữ tương tự trong Agent, hãy coi đây là khả năng kiểm soát suy nghĩ của Agent, từ đó tác động trực tiếp đến ngân sách suy nghĩ. Hiện tại, chúng ta sẽ sử dụng các chế độ cài đặt mặc định. Tuy nhiên, xin lưu ý rằng tại thời điểm ra mắt, mô hình Gemini 3 Pro sẽ được cung cấp cho mọi người theo hạn mức giới hạn. Vì vậy, hãy chú ý đến những thông báo thích hợp cho biết liệu bạn đã sử dụng hết hạn mức miễn phí cho Gemini 3 hay chưa.

Bây giờ, hãy dành chút thời gian cho Trình quản lý tác nhân (cửa sổ) ở đây và tìm hiểu một số điều để nắm rõ các khối xây dựng cơ bản, cách bạn điều hướng trong Antigravity và nhiều điều khác. Cửa sổ Agent Manager (Trình quản lý tác nhân) sẽ xuất hiện như sau:

22f6dcf7b3edc583.png

Vui lòng tham khảo sơ đồ ở trên kèm theo các con số:

  1. Inbox: Hãy xem đây là cách để theo dõi tất cả các cuộc trò chuyện của bạn ở một nơi. Khi bạn gửi các Agent đi làm nhiệm vụ, những Agent này sẽ xuất hiện trong hộp thư đến và bạn có thể nhấp vào hộp thư đến để xem danh sách tất cả các cuộc trò chuyện hiện tại. Khi nhấn vào một cuộc trò chuyện bất kỳ, bạn sẽ thấy tất cả tin nhắn đã trao đổi, trạng thái của các việc cần làm, những gì mà Trợ lý đã tạo hoặc thậm chí là liệu Trợ lý có đang chờ bạn phê duyệt các việc cần làm hay không. Đây là một cách hay để quay lại một nhiệm vụ trước đó mà bạn đang thực hiện. Một tính năng rất tiện dụng.
  2. Start Conversation: Nhấp vào biểu tượng này để bắt đầu một cuộc trò chuyện mới. Thao tác này sẽ đưa bạn đến thẳng phần nhập dữ liệu có nội dung Ask anything.
  3. Workspaces: Chúng tôi đã đề cập đến Không gian làm việc và việc bạn có thể làm việc trong bất kỳ không gian làm việc nào mà bạn muốn. Bạn có thể thêm nhiều không gian làm việc khác bất cứ lúc nào và có thể chọn bất kỳ không gian làm việc nào khi bắt đầu cuộc trò chuyện.
  4. Playground: Đây là một cách hay để bạn có thể bắt đầu trò chuyện với AI và sau đó chuyển cuộc trò chuyện đó thành một không gian làm việc, nơi bạn có quyền kiểm soát chặt chẽ hơn đối với các tệp, v.v. Hãy coi đây là một khu vực nháp.
  5. Editor View: Cho đến nay, chúng ta đang ở chế độ xem Trình quản lý tác nhân. Bạn có thể chuyển sang Chế độ xem của trình chỉnh sửa bất cứ lúc nào nếu muốn. Thao tác này sẽ cho bạn thấy thư mục không gian làm việc và mọi tệp được tạo. Bạn có thể chỉnh sửa trực tiếp các tệp ở đó, hoặc thậm chí cung cấp hướng dẫn nội tuyến, lệnh trong trình chỉnh sửa để Agent có thể thực hiện một việc gì đó hoặc thay đổi theo đề xuất/hướng dẫn đã sửa đổi của bạn. Chúng ta sẽ tìm hiểu chi tiết về Chế độ xem của trình chỉnh sửa ở phần sau.
  6. Browser: Cuối cùng, chúng ta sẽ đến với một trong những điểm khác biệt rõ ràng giúp Antigravity trở nên rất mạnh mẽ, đó là khả năng tích hợp chặt chẽ với trình duyệt Chrome. Hãy bắt đầu thiết lập Trình duyệt trong phần tiếp theo.

4. Thiết lập Trình duyệt Antigravity

Theo tài liệu, khi muốn tương tác với trình duyệt, tác nhân sẽ gọi một tác nhân phụ của trình duyệt để xử lý tác vụ hiện tại. Trợ lý trình duyệt chạy một mô hình chuyên biệt để hoạt động trên các trang đang mở trong trình duyệt do Antigravity quản lý. Mô hình này khác với mô hình bạn đã chọn cho trợ lý chính.

Trợ lý ảo này có quyền truy cập vào nhiều công cụ cần thiết để kiểm soát trình duyệt của bạn, bao gồm cả việc nhấp, cuộn, nhập, đọc nhật ký bảng điều khiển và nhiều thao tác khác. Gemini cũng có thể đọc các trang bạn mở thông qua tính năng chụp DOM, ảnh chụp màn hình hoặc phân tích cú pháp markdown, cũng như quay video.

Điều này có nghĩa là chúng ta cần khởi chạy và cài đặt tiện ích trình duyệt Antigravity. Hãy bắt đầu một cuộc trò chuyện trong Playground và thực hiện các bước để làm điều đó.

Chọn Playground và giao nhiệm vụ go to antigravity.google cho Trợ lý như minh hoạ bên dưới:

51a373d3da23db56.png

Gửi bài tập. Bạn sẽ thấy Agent phân tích nhiệm vụ và có thể kiểm tra quy trình suy nghĩ. Đến một thời điểm nào đó, nó sẽ tiếp tục đúng cách và đề cập đến việc cần thiết lập tác nhân trình duyệt như minh hoạ bên dưới. Nhấp vào Thiết lập.

e7119f40e093afd2.png

Thao tác này sẽ mở trình duyệt và hiển thị thông báo cài đặt tiện ích như minh hoạ dưới đây:

9a5a43c17980e46c.png

Tiếp tục và bạn sẽ được chuyển đến Tiện ích Chrome mà bạn có thể cài đặt.

f3468f0e5f3bb075.png

Sau khi bạn cài đặt tiện ích thành công, Antigravity Agent sẽ bắt đầu hoạt động và cho biết rằng tiện ích này đang chờ bạn cấp quyền để thực hiện nhiệm vụ của mình. Bạn sẽ thấy một số hoạt động trong cửa sổ trình duyệt đã mở:

7f0367e00ac36d5a.png

Chuyển về chế độ xem Agent Manager (Trình quản lý tác nhân) và bạn sẽ thấy như sau:

b9d89e1ebefcfd76.png

Đây chính xác là những gì chúng tôi dự kiến sẽ xảy ra vì chúng tôi đã yêu cầu Agent truy cập vào trang web antigravity.google. Cấp quyền cho ứng dụng và bạn sẽ thấy rằng trang web đã được chuyển hướng một cách an toàn, như minh hoạ bên dưới:

77fcc38b5fb4ca7c.png

Kiểm tra cấu phần phần mềm

Giờ đến phần thú vị. Sau khi nhân viên hỗ trợ hoàn tất công việc, bạn sẽ có thể xem toàn bộ công việc của nhân viên hỗ trợ đó. Điều này mang lại các cấu phần phần mềm, nền tảng mà bạn xây dựng niềm tin về những việc bạn đã lên kế hoạch thực hiện, những việc bạn đã làm cho đến nay và cách bạn xác minh những việc đó.

Các cấu phần phần mềm giải quyết "Khoảng trống về độ tin cậy". Khi một nhân viên hỗ trợ tuyên bố "Tôi đã khắc phục lỗi này", trước đây, nhà phát triển phải đọc mã để xác minh. Trong Antigravity, đặc vụ tạo ra một Artifact (Hiện vật) để chứng minh.

Antigravity tập trung vào việc tạo ra các thành phần chính tuỳ thuộc vào nhiệm vụ. Điều này có thể bao gồm từ Kế hoạch công việc đến Kế hoạch triển khai và cuối cùng là Kế hoạch hướng dẫn (có Xác minh). Trong các kế hoạch này, bạn nên cân nhắc những điều sau:

  • Task Lists & Plans: Trước khi viết mã, tác nhân sẽ tạo một kế hoạch có cấu trúc. Người dùng có thể xem xét, chỉnh sửa và phê duyệt kế hoạch này.
  • Code Diffs: Chế độ xem chênh lệch được chuẩn hoá cho biết chính xác những dòng sẽ thay đổi.
  • Screenshots: Tác nhân này ghi lại trạng thái của giao diện người dùng trước và sau khi có thay đổi.
  • Browser Recordings: Đối với các lượt tương tác động (ví dụ: "Nhấp vào nút đăng nhập, đợi vòng quay, xác minh trang tổng quan tải"), nhân viên ghi lại video về phiên của mình. Nhà phát triển có thể xem video này để xác minh rằng yêu cầu về chức năng đã được đáp ứng mà không cần tự chạy ứng dụng.
  • Test Results: Nhật ký có cấu trúc về các thử nghiệm thành công/thất bại do tác nhân tạo và thực thi.

Ở phía trên cùng bên phải, bên cạnh mục Xem lại các thay đổi trong chế độ xem Agent Manager, bạn sẽ thấy một nút để bật/tắt các cấu phần phần mềm. Nếu nút này đang bật, bạn có thể xem danh sách cấu phần phần mềm đã tạo:

5320f447471c43eb.png

Bạn sẽ thấy chế độ xem Artifacts (Hiện vật) như minh hoạ bên dưới. Trong trường hợp này, chúng tôi đã hướng dẫn Agent truy cập vào trang antigravity.google và do đó, Agent đã chụp ảnh màn hình, tạo video về trang đó, v.v.

19d9738bb3c7c0c9.png

Nhà phát triển có thể tương tác với các cấu phần phần mềm này bằng "nhận xét theo kiểu Google Tài liệu". Bạn có thể chọn một hành động hoặc nhiệm vụ cụ thể, đưa ra lệnh theo cách bạn muốn rồi gửi lệnh đó cho Trợ lý. Sau đó, Trợ lý sẽ tiếp nhận ý kiến phản hồi này và điều chỉnh cho phù hợp. Hãy cân nhắc việc sử dụng Google Tài liệu có tính tương tác, trong đó bạn đưa ra ý kiến phản hồi cho tác giả và tác giả sẽ lặp lại ý kiến phản hồi đó.

5. Thăm lại Hộp thư đến

Nếu đã bắt đầu một vài cuộc trò chuyện với các Nhân viên hỗ trợ, thì giờ đây, bạn nên xem Hộp thư đến trong cửa sổ Trình quản lý nhân viên hỗ trợ. Thao tác này sẽ cho bạn thấy tất cả cuộc trò chuyện. Nhấp vào một cuộc trò chuyện bất kỳ để xem nhật ký cuộc trò chuyện, các dữ liệu được tạo và nhiều thông tin khác. Trong trường hợp của chúng tôi, sau khi chúng tôi chạy cuộc trò chuyện đầu tiên, hộp thư đến của chúng tôi sẽ hiển thị cuộc trò chuyện trong danh sách, như minh hoạ dưới đây:

1a2a1bbdd4464ecf.png

Khi nhấp vào cuộc trò chuyện đó, bạn sẽ thấy thông tin chi tiết:

b7e493765cfb1b1a.png

Bạn cũng có thể tiếp tục cuộc trò chuyện từ đây.

6. The Editor

Trình chỉnh sửa vẫn giữ được sự quen thuộc của VS Code, đảm bảo rằng các nhà phát triển giàu kinh nghiệm vẫn có thể sử dụng thành thạo. Nó bao gồm trình khám phá tệp tiêu chuẩn, tính năng làm nổi bật cú pháp và hệ sinh thái tiện ích.

Bạn có thể nhấp vào nút Mở trình chỉnh sửa ngay ở trên cùng bên phải trong Agent Manager để chuyển đến Trình chỉnh sửa.

91f3c96b81d993b9.png

Trình chỉnh sửa được bổ sung tính năng "Nhận biết tác nhân".

  • Inline Command: Trình chỉnh sửa hỗ trợ tính năng lập trình theo cảm hứng và hướng dẫn nội tuyến, trong đó người dùng có thể làm nổi bật mã và hướng dẫn cho tác nhân để "Make this more efficient" hoặc "Add comments explaining this logic".
  • Agent Side Panel : Sử dụng bảng điều khiển ở bên phải trình chỉnh sửa để làm việc trực tiếp với trợ lý. Bạn có thể bắt đầu các cuộc trò chuyện mới từ đây hoặc đưa ra chỉ dẫn để thay đổi mã.

Khi xem xét một số trường hợp sử dụng liên quan đến hoạt động phát triển web, trong đó Trợ lý tạo nhiều tệp mã, chúng ta có thể xem xét Trình chỉnh sửa để xem các tệp, thực hiện thay đổi và tương tác trực tiếp với Trợ lý từ đây.

7. Chuyển đổi giữa Trình chỉnh sửa và Trình quản lý nhân viên hỗ trợ

Xin lưu ý rằng Antigravity có quan điểm cho rằng cả Trình chỉnh sửa và Trình quản lý tác nhân đều là các cửa sổ riêng biệt và cả hai đều cần thiết. Bạn có thể chuyển đổi giữa hai chế độ này thông qua nút Mở Trình quản lý tác nhân ở trên cùng bên phải khi đang ở chế độ Trình chỉnh sửa hoặc bằng cách nhấp vào nút Mở Trình chỉnh sửa ở trên cùng bên phải khi đang ở chế độ Trình quản lý tác nhân.

Ngoài ra, bạn cũng có thể dùng phím tắt sau để chuyển đổi giữa hai chế độ: Cmd + E

8. Trường hợp sử dụng

Giờ đây, khi đã hiểu cơ bản về sản phẩm này, hãy cùng tìm hiểu một vài trường hợp sử dụng để xem sản phẩm 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 cấp 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.

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:

cffa12c98a68cb6c.png

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

8513d489eea0b014.png

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 thấy 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.

9d594588f2ffe6bc.png

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:

dc6cf4e7d8425df8.png

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

fb7397cd2cce0682.png

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 bản 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.

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 cả ngày.

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:

c95d82e1c040698f.png

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:

632169a236bc62cc.png

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:

e3f6152d6f54d4f9.png

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:

abf879f2ce53d055.png

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 ở đó.

b0fea8aa65c3a1c5.png

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 Agent, đư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 cả chức năng đã cập nhật. Dưới đây là một ví dụ về cuộc trò chuyện:

ba8455e6f68973e9.png

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, Agent đã cố gắng khởi động Flask Server trên cổng 5000. 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 Agent và lưu ý cách Agent thực hiện nhiệm vụ của mình bằng cách sửa đổi danh sách nhiệm vụ, 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.

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 mà 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.

5be0a668e5a67d85.png

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à có thể thực hiện được.

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

c9ab6bca97a51a8c.png

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:

498dd946d4e9ae55.png

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

c291da9bdb37ff96.png

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

de8f418ba8e4600d.png

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 phong cách, hình ảnh, yêu cầu thay đổi, v.v.

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 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 chúng 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:

8368856e51a7561a.png

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

b69c217d3372d802.png

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

da5bd701323818d4.png

Bước tiếp theo của tôi 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.

21425379db336dc6.png

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:

48f3320cd76b5cd8.png

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:

8ee68905942825d.png

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.

9. Xin chúc mừng

Xin chúc mừng! Bạn đã cài đặt thành công và hiểu cách sử dụng Antigravity, nền tảng phát triển ưu tiên tác nhân. Các trường hợp sử dụng mà chúng tôi đã thử nghiệm sẽ giúp bạn nắm được các yêu cầu của riêng mình và tìm hiểu cách Antigravity có thể hợp tác với bạn để hoàn thành các yêu cầu đó.

Tài liệu tham khảo