Ra mắt trò chơi điện tử trên web bằng AI

1. Giới thiệu

Tổng quan

Ngày nay, việc xây dựng bằng AI bắt đầu từ đâu? Đối với hầu hết chúng ta, việc này bắt đầu bằng một truy vấn hoặc nguyên mẫu đơn giản. Google AI Studio cung cấp một Chế độ xây dựng mạnh mẽ (thường được gọi là "lập trình theo cảm hứng") cho phép bạn thiết kế, kiểm thử và xây dựng các ứng dụng web toàn ngăn xếp bằng cách sử dụng tính năng tạo mã dựa trên các mô hình Gemini.

Trong lớp học lập trình này, bạn sẽ tạo một trò chơi video theo lượt dựa trên web bằng cách sử dụng cơ sở dữ liệu Firestore với Nguồn sự kiện (để duy trì các hành động trong trò chơi dưới dạng một chuỗi sự kiện để người chơi có thể xem nhật ký trận đấu và quay lại các lượt trước) và Xác thực Firebase để đăng nhập người dùng. Tác nhân AI Studio sẽ định cấu hình tất cả các dịch vụ phụ trợ và viết giao diện người dùng, logic tìm nguồn sự kiện và mã tương tác cơ sở dữ liệu. Sau khi ứng dụng được hoàn thiện, bạn sẽ triển khai ứng dụng đó ngay vào Cloud Run chỉ bằng một lần nhấp.

phiên bản hoàn chỉnh của một trang web danh mục đầu tư

Bạn sẽ thực hiện

  • Đưa ra câu lệnh cho Google AI Studio để tạo nguyên mẫu cho một ứng dụng web trò chơi điện tử nhiều người chơi theo lượt.
  • Triển khai tính năng hỗ trợ mã trò chơi ngắn hoặc đường liên kết tham gia có thể chia sẻ để bạn bè có thể kết nối với cùng một trận đấu.
  • Triển khai bộ nhớ cơ sở dữ liệu Firestore bằng mẫu nguồn sự kiện để theo dõi nhật ký trận đấu và cho phép du hành thời gian trong trò chơi (huỷ hoặc phát lại lượt chơi).
  • Định cấu hình và bật chế độ tích hợp Firebase để cung cấp cơ sở dữ liệu Firestore và thiết lập tính năng Đăng nhập bằng Google.
  • Kiểm thử ứng dụng trong hộp cát xem trước tương tác.
  • Triển khai ứng dụng lên Cloud Run ngay từ giao diện người dùng Google AI Studio.

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

  • Cách sử dụng chế độ Tạo của Google AI Studio để nhanh chóng tạo nguyên mẫu cho một dịch vụ trò chơi full-stack bằng ngôn ngữ tự nhiên.
  • Cách triển khai mẫu kiến trúc nguồn sự kiện bằng Cloud Firestore để lưu trữ nhật ký trò chơi.
  • Cách Google AI Studio tự động định cấu hình các chế độ tích hợp Xác thực và Firestore của Firebase.
  • Cách triển khai ứng dụng AI Studio dưới dạng một vùng chứa không máy chủ trên Cloud Run.
  • Cách kiểm tra các bản ghi trong cơ sở dữ liệu và trạng thái bảo mật trong Bảng điều khiển của Firebase.

2. Thiết lập dự án

Trước khi ra mắt AI Studio, hãy xác minh trạng thái tài khoản và các điều kiện tiên quyết.

Thông tin về Tài khoản Google và cấp

  1. Nếu bạn chưa có Tài khoản Google, hãy tạo một Tài khoản Google.
    • Lưu ý: Nếu có thể, hãy sử dụng Tài khoản Google cá nhân cho bài thực hành này. Tài khoản nhóm, tài khoản công ty hoặc tài khoản trường học có thể thực thi các chính sách của Workspace để tắt các tính năng thử nghiệm hoặc tính năng tích hợp đám mây.
  2. Xem thông tin thanh toán cho các hoạt động triển khai:
    • Bậc khởi đầu của Google Cloud: Cho phép xuất bản tối đa 2 ứng dụng full-stack ở một khu vực được chọn mà không mất phí, mà không cần thiết lập tài khoản thanh toán đầy đủ trên Google Cloud.
    • Triển khai tiêu chuẩn: Kết nối với một dự án trên đám mây Google có tính phí hiện có và mở rộng giới hạn lưu trữ, tài nguyên CPU và API.

3. Tạo trò chơi điện tử theo lượt trong Chế độ tạo của AI Studio

Hãy tạo lớp vỏ ứng dụng và nhắc trợ lý mã AI xây dựng các lớp bảo mật, logic chơi trò chơi và lớp duy trì dựa trên sự kiện.

  1. Chuyển đến bảng điều khiển Ứng dụng Google AI Studio rồi nhấp vào Ứng dụng mới.
  2. Trong ô nhập câu lệnh trò chuyện, hãy nhập nội dung mô tả cho ứng dụng trò chơi video theo lượt của bạn: 
    Build a web-based, turn-based Tic-Tac-Toe game using
Firebase as a backend. Users must be able to securely sign in
using Google Sign-In, start a new game match, make moves, and play
against an AI player or another user. Any algorithm used for the
game opponent AI should use simple algorithms like min/max and the
app should not make any calls to an LLM like the Gemini API. To
support multiplayer matches, the application must generate a short
game code or share link that players can easily copy and send to a
friend to join the match. Use Firestore and an event sourcing
pattern to save a history of every move (turn) as a separate event
document in a subcollection under the game document. The
application must reconstruct the current game state by replaying
these events, and must allow users to view previous turns and opt
to restore/roll back the game to a prior turn's state.
    Đường liên kết này sẽ tự động điền vào ô nhập câu lệnh cho bạn.
  3. Nhấp vào Tạo để bắt đầu quy trình tạo ứng dụng.

Khi nhận thấy cần có bộ nhớ cơ sở dữ liệu và tính năng đăng nhập an toàn cho người dùng, tác nhân AI Studio sẽ kích hoạt quy trình định cấu hình Firebase tự động.

  1. Sau khoảng một phút, thẻ tích hợp Bật Firebase sẽ xuất hiện trong không gian làm việc.
  2. Nhấp vào nút Bật Firebase để xác nhận và chấp nhận điều khoản dịch vụ.
  3. Tác nhân sẽ thực hiện quá trình thiết lập ở chế độ nền. Tìm hiểu sâu:
    • Một phiên bản cơ sở dữ liệu Firestore được cung cấp.
    • Tính năng Xác thực Firebase được bật cùng với tính năng Đăng nhập bằng Google.
    • Đã thiết lập cấu hình tài khoản dịch vụ (ví dụ: tạo src/lib/firebase.ts chứa thông tin xác thực API).
    • Một firestore.rules chứa các ranh giới bảo mật mặc định (quy tắc cách ly người dùng) sẽ được thêm vào.

4. Kiểm thử và lặp lại

Trước khi ra mắt dịch vụ, hãy chạy quy trình kiểm tra xác thực trong bản xem trước tương tác.

  1. Mở ngăn xem trước trong Google AI Studio.
  2. Nhấp vào nút Đăng nhập để kích hoạt quy trình xác thực Đăng nhập bằng Google trong hộp cát.
    • Lưu ý về việc khắc phục lỗi: Trong quá trình tạo hoặc kiểm thử, đôi khi bạn có thể gặp phải các vấn đề về thời gian chạy, lỗi biên dịch hoặc lỗi quyền Firestore do quy tắc bảo mật không khớp. Nếu điều này xảy ra, AI Studio sẽ hiển thị nút Khắc phục trong cuộc trò chuyện, cho phép bạn yêu cầu tác nhân tự động chẩn đoán và khắc phục vấn đề.
    Vị trí của nút Khắc phục trong Google AI Studio
  3. Sau khi đăng nhập, hãy bắt đầu một trận đấu mới, sao chép mã trận đấu ngắn hoặc đường liên kết chia sẻ đã tạo và xác minh rằng bạn có thể dùng mã hoặc đường liên kết đó để tham gia trận đấu.
  4. Thực hiện một vài nước đi và xác minh rằng nhật ký trận đấu hiển thị chính xác.
  5. Hãy thử quay lại các lượt chơi trước đó của trận đấu. Đảm bảo bảng hoặc trạng thái cập nhật để phản ánh điểm đó trong nhật ký chơi và xác minh rằng bạn có thể khôi phục hoặc quay lại trạng thái đó.
  6. Nếu bạn muốn thay đổi kiểu hoặc hành vi, hãy hướng dẫn trợ lý ảo thông qua cửa sổ trò chuyện. Ví dụ:
    • "Could you style the game board interface using Tailwind CSS and add a retro pixel-art theme?"
    • "Add a 'Turn History' sidebar matching the current state replay that shows when each move was made and by whom."
  7. Đợi tác nhân cập nhật cơ sở mã và kiểm tra trình duyệt xem trước để xem nội dung cập nhật.

5. Triển khai lên Cloud Run

Sau khi nguyên mẫu hoạt động đầy đủ, hãy triển khai nguyên mẫu đó dưới dạng một dịch vụ công khai trên Cloud Run.

  1. Ở góc trên cùng bên phải của Google AI Studio, hãy nhấp vào nút Xuất bản để bắt đầu trình hướng dẫn triển khai.Vị trí của nút Xuất bản trên Google AI Studio
  2. Nhấp vào Bắt đầu để định cấu hình dự án trên Google Cloud.
    • Xác minh rằng trình đơn thả xuống Dự án đích trên Google Cloud khớp với dự án mà bạn đã liên kết với không gian làm việc.
    • AI Studio sẽ tự động tạo một mã nhận dạng dịch vụ duy nhất cho phiên bản Cloud Run.
    • Bạn có thể chỉ định tiền tố URL .ai.studio tuỳ chỉnh (ví dụ: your-portfolio-name.ai.studio) trong cấu hình triển khai.
  3. Nếu đây là lần đầu tiên bạn triển khai và bạn đang sử dụng các thông số tiêu chuẩn của Google Cloud, thì bạn có thể được nhắc chỉ định loại tổ chức và cung cấp thông tin thanh toán.
  4. Nhấp vào Xuất bản ứng dụng.
  5. Các bước tạo vùng chứa, đăng ký vùng chứa và triển khai dịch vụ diễn ra ở chế độ nền. Quá trình này thường hoàn tất trong vòng 2 đến 4 phút.
  6. Khi quá trình triển khai hoàn tất, hãy sao chép URL ứng dụng đã tạo và truy cập vào đường liên kết của ứng dụng đang hoạt động trong một thẻ trình duyệt.
  7. Kiểm thử ứng dụng web đang hoạt động trong trình duyệt của bạn!

6. Kiểm tra trong Bảng điều khiển của Firebase

Hãy xem xét kỹ lưỡng để biết cách theo dõi giản đồ dữ liệu và người dùng.

  1. Chuyển đến Bảng điều khiển của Firebase.
  2. Chọn dự án của bạn (có nhãn AI Studio hoặc mã dự án được liên kết theo cách thủ công).
  3. Trong ngăn điều hướng bên trái, hãy chọn Build > Firestore Database (Tạo > Cơ sở dữ liệu Firestore):
    • Xem các bộ sưu tập và tài liệu trong cơ sở dữ liệu do ứng dụng của bạn tạo.
    • Xác minh rằng mỗi tài liệu đều có mã nhận dạng chủ sở hữu khớp với thông tin xác thực người dùng đang hoạt động.
  4. Chọn thẻ Bảo mật trong bảng điều khiển Firestore để xem xét các chỉ thị bảo mật được tạo tự động, giới hạn quyền đọc và ghi đối với chủ sở hữu tài liệu đã xác minh.
  5. Chuyển đến Bảo mật > Xác thực để xem danh sách thông tin đăng nhập đang hoạt động của người dùng được điền sẵn trong quá trình kiểm thử đăng nhập.

7. Dọn dẹp

Để tránh các khoản phí thanh toán không lường trước hoặc dọn dẹp tài nguyên trong không gian làm việc, hãy làm như sau:

  1. Trong Google AI Studio, hãy chuyển đến trang Ứng dụng.
  2. Tìm ứng dụng của bạn trong lưới hoặc danh sách.
  3. Nhấp vào biểu tượng thùng rác để xoá trạng thái ứng dụng và huỷ xuất bản dịch vụ khỏi Cloud Run.
  4. Nếu bạn triển khai bằng một dự án tiêu chuẩn và muốn tắt hoàn toàn tất cả tài nguyên, hãy chuyển đến phần Cài đặt dự án trên Bảng điều khiển của Google Cloud rồi xoá dự án cơ bản.

8. Kết luận

Xin chúc mừng! Bạn đã thiết kế, phát triển và triển khai một trò chơi video theo lượt ngay trong Google AI Studio.

Hãy truy cập vào đường liên kết này để nhận huy hiệu Đã hoàn thành hành trình của nhà phát triển!

Để tiếp tục hành trình của mình, hãy truy cập vào goo.gle/builders để tham gia phòng thí nghiệm tiếp theo.

Tìm hiểu thêm