Tạo ứng dụng trong Google AI Studio

Trang này mô tả cách sử dụng Google AI Studio để nhanh chóng tạo (hoặc "vibe code") và triển khai các ứng dụng kiểm thử những tính năng mới nhất của Gemini như Nano BananaLive API. Google AI Studio hiện hỗ trợ các thời gian chạy toàn ngăn xếp, cho phép bạn tạo các ứng dụng mạnh mẽ bằng logic phía máy chủ, tính năng quản lý bí mật an toàn và khả năng hỗ trợ gói npm, tất cả đều thông qua câu lệnh bằng ngôn ngữ tự nhiên.

Bắt đầu

Bắt đầu viết mã rung trong Chế độ tạo của Google AI Studio. Bạn có thể bắt đầu xây dựng theo một số cách:

  • Bắt đầu bằng một câu lệnh: Ở chế độ Tạo, hãy dùng hộp nhập để nhập nội dung mô tả về những gì bạn muốn tạo. Chọn AI Chips để thêm các tính năng cụ thể như tạo hình ảnh hoặc dữ liệu của Google Maps vào câu lệnh. Bạn thậm chí có thể nói nội dung mình muốn bằng cách dùng nút chuyển lời nói thành văn bản.
  • Nút "Xem trang đầu tiên tìm được": Nếu cần khơi nguồn sáng tạo, hãy dùng nút "Xem trang đầu tiên tìm được" và Gemini sẽ tạo một câu lệnh kèm theo ý tưởng dự án để bạn bắt đầu.
  • Biến tấu một dự án trong Thư viện: Mở một dự án trong Thư viện ứng dụng rồi chọn Sao chép ứng dụng.

Sau khi chạy câu lệnh, bạn sẽ thấy mã và các tệp cần thiết được tạo, cùng với bản xem trước trực tiếp của ứng dụng xuất hiện ở bên phải.

Nội dung nào được tạo?

Khi bạn chạy câu lệnh, AI Studio sẽ tạo một ứng dụng hoàn chỉnh. Theo mặc định, công cụ này sẽ tạo một môi trường toàn ngăn xếp có thể bao gồm:

  • Phía máy khách: Giao diện người dùng web (React là giao diện mặc định).
  • Phía máy chủ: Môi trường thời gian chạy Node.js cho phép thực hiện các lệnh gọi API bảo mật, kết nối cơ sở dữ liệu và sử dụng gói npm.

Bạn có thể xem mã được tạo bằng cách chọn thẻ trong ngăn xem trước bên phải. Antigravity Agent quản lý một cách thông minh nhiều tệp trên ngăn xếp của bạn, đảm bảo rằng các thay đổi được truyền tải chính xác.

The Antigravity Agent

Antigravity Agent là chức năng AI chính trong Google Antigravity và hiện tại, các thành phần cốt lõi của bộ công cụ tác nhân này đang hỗ trợ trải nghiệm Chế độ tạo trong Google AI Studio. Gemini Advanced không chỉ tạo mã đơn giản mà còn duy trì ngữ cảnh của toàn bộ dự án, quản lý nhiều tệp và hiểu các chỉ dẫn phức tạp để tạo các ứng dụng toàn diện, mạnh mẽ.

Các chức năng chính bao gồm:

  • Nhận biết bối cảnh: Duy trì bối cảnh của các câu lệnh và trạng thái tệp trước đó.
  • Quản lý nhiều tệp: Xử lý các phần phụ thuộc trên nhiều tệp.
  • Thực thi đã xác minh: Xác minh các bản cập nhật mã để giảm hiện tượng ảo giác.

Khả năng full-stack

Google AI Studio khai thác sức mạnh của hệ sinh thái web hiện đại, cho phép bạn tạo nhiều thứ hơn là chỉ nguyên mẫu phía máy khách.

  • Thời gian chạy phía máy chủ và npm: Sử dụng thư viện rộng lớn gồm các gói npm. Tác nhân sẽ tự động xác định và cài đặt các gói khi cần cho ứng dụng của bạn (ví dụ: các thư viện cụ thể để trực quan hoá dữ liệu hoặc ứng dụng API). Bạn cũng có thể yêu cầu các gói cụ thể nếu muốn.
  • Quản lý bí mật: Lưu trữ an toàn các khoá API và bí mật trong trình đơn Cài đặt. Bạn có thể truy cập vào các khoá này trong mã phía máy chủ, giúp bảo vệ chúng khỏi bị lộ ở phía máy khách.
  • Nhiều người chơi: Xây dựng trải nghiệm cộng tác theo thời gian thực ngay trong AI Studio. Thời gian chạy phía máy chủ quản lý trạng thái và các kết nối cần thiết để người dùng tương tác với nhau.

Tìm hiểu thêm về cách phát triển ứng dụng full-stack

Tiếp tục xây dựng

Sau khi Google AI Studio tạo mã ban đầu cho ứng dụng của bạn, bạn có thể tiếp tục tinh chỉnh mã đó:

Tạo trong Google AI Studio

  • Lặp lại với Gemini: Sử dụng bảng trò chuyện ở Chế độ tạo để yêu cầu Gemini sửa đổi, thêm tính năng mới hoặc thay đổi kiểu.
  • Chỉnh sửa mã trực tiếp: Mở thẻ Mã trong bảng xem trước để chỉnh sửa trực tiếp.

Phát triển bên ngoài

Đối với các quy trình làm việc nâng cao hơn, bạn có thể xuất mã và làm việc trong môi trường mà bạn muốn:

  • Tải xuống và phát triển cục bộ: Xuất mã đã tạo dưới dạng tệp ZIP rồi nhập mã đó vào trình chỉnh sửa mã.
  • Đẩy lên GitHub: Tích hợp mã với các quy trình phát triển và triển khai hiện có bằng cách đẩy mã đó lên một kho lưu trữ GitHub.

Các tính năng chính

Google AI Studio có một số tính năng giúp quá trình xây dựng trở nên trực quan và dễ hiểu:

  • Tạo và lặp lại các ứng dụng toàn diện: Tạo các ứng dụng toàn diện chỉ bằng một câu lệnh và lặp lại thông qua chế độ trò chuyện hoặc chú thích. Chế độ chú thích cho phép bạn làm nổi bật mọi phần trên giao diện người dùng của ứng dụng và mô tả thay đổi bạn muốn.
  • Chia sẻ và triển khai ứng dụng: Bạn có thể chia sẻ các tác phẩm của mình với người khác để cộng tác hoặc giới thiệu tác phẩm. Sau đó, khi ứng dụng của bạn đã sẵn sàng, hãy triển khai ứng dụng đó lên Cloud Run.
  • Thư viện ứng dụng: Thư viện ứng dụng cung cấp một thư viện trực quan về các ý tưởng dự án. Bạn có thể duyệt xem những việc có thể làm với Gemini, xem trước các ứng dụng ngay lập tức và phối lại các ứng dụng đó để tạo ra ứng dụng của riêng mình.

Tạo và lặp lại trên các ứng dụng full stack: đoạn thông tin ngắn gọn về tính năng hỗ trợ thời gian chạy, lặp lại bằng chế độ chú thích Chia sẻ và triển khai – chia sẻ ứng dụng của bạn trong AI Studio hoặc triển khai lên Cloud Run Khám phá thư viện ứng dụng

Triển khai hoặc lưu trữ ứng dụng

Sau khi ứng dụng của bạn đã sẵn sàng, bạn có thể triển khai ứng dụng đó:

  • Google Cloud Run: Triển khai ứng dụng của bạn dưới dạng một dịch vụ có khả năng mở rộng. Bạn có thể phải trả phí cho Google Cloud Run dựa trên mức sử dụng.
  • GitHub: Xuất dự án của bạn sang một kho lưu trữ trên GitHub.

Các điểm hạn chế

Phần này liệt kê các hạn chế hiện tại của chế độ tạo trong Google AI Studio.

Bảo mật khoá API

  • Phía máy khách: Không bao giờ sử dụng trực tiếp khoá API thực trong mã phía máy khách.
  • Phía máy chủ: Sử dụng tính năng Quản lý bí mật để xử lý các khoá nhạy cảm một cách an toàn trong thời gian chạy phía máy chủ.

Triển khai bên ngoài Google AI Studio

  • Mặc dù bạn có thể triển khai ứng dụng của mình lên Cloud Run cho một URL công khai, nhưng chế độ thiết lập này sẽ sử dụng khoá API của bạn cho tất cả các lệnh gọi Gemini API của người dùng.
    • Các ứng dụng JavaScript chạy phía ứng dụng khách, vì vậy, hãy đảm bảo khoá API chỉ có quyền truy cập tối thiểu để ngăn chặn rò rỉ hoặc sử dụng sai dữ liệu. Ví dụ: người dùng có thể truy cập vào các Cửa hàng tìm kiếm tệp khác trong cùng một dự án thông qua cơ chế này.
  • Triển khai bên ngoài một cách an toàn: Để chạy ứng dụng một cách an toàn bên ngoài AI Studio (ví dụ: sau khi tải tệp zip xuống), bạn phải di chuyển logic sử dụng khoá API sang một thành phần phía máy chủ để ngăn người dùng cuối biết được khoá. Bạn không cần làm việc này nếu triển khai bằng Cloud Run.
  • Cảnh báo về việc để lộ khoá: Bạn tuyệt đối không nên chỉ thay thế phần giữ chỗ bằng một khoá API thực trong môi trường phía máy khách, vì khoá sẽ hiển thị cho mọi người dùng.

Lỗi khi chia sẻ ứng dụng

Nếu bạn chia sẻ ứng dụng của mình và người dùng cuối gặp phải lỗi 403 Access Restricted (Quyền truy cập bị hạn chế) khi sử dụng URL được chia sẻ, thì có thể là do một trong những nguyên nhân sau:

  • Tiện ích trên trình duyệt: Các tiện ích bảo vệ quyền riêng tư như Privacy Badger có thể đang chặn ứng dụng. Hãy tắt tiện ích này để tránh gặp lỗi.
  • Vấn đề về bản dựng: Có thể có vấn đề với mã hiện tại. Yêu cầu tác nhân "khắc phục mọi vấn đề về bản dựng bằng mã hiện tại", sau đó chia sẻ lại URL.

Bước tiếp theo