推出以 AI 打造的網頁型電玩遊戲

1. 簡介

總覽

現在要如何開始使用 AI 建構內容？對大多數人來說，這一切都從簡單的查詢或原型開始。Google AI Studio 提供強大的建構模式 (通常稱為「直覺式程式開發」)，可讓您使用 Gemini 模型驅動的程式碼生成功能，設計、測試及建構全端網頁應用程式。

在本程式碼研究室中，您將使用 Firestore 資料庫建構網頁式回合制電玩遊戲，並採用事件來源 (將遊戲動作儲存為一連串事件，方便玩家查看對戰記錄及返回先前的回合)，以及 Firebase 驗證 (供使用者登入)。AI Studio 代理程式會設定所有後端服務，並編寫前端、事件來源邏輯和資料庫互動程式碼。應用程式完成後，只要按一下滑鼠，即可直接部署至 Cloud Run。

完成的作品集網站

學習內容

  • 提示 Google AI Studio 設計回合制多人電玩遊戲網頁應用程式原型。
  • 實作可共用的短遊戲代碼或加入連結支援功能，讓好友連線至同一場比賽。
  • 使用事件來源模式實作 Firestore 資料庫儲存空間，追蹤對戰記錄並允許遊戲時間旅行 (復原或重播回合)。
  • 設定並啟用 Firebase 整合功能，即可佈建 Firestore 資料庫，並設定 Google 登入驗證。
  • 在互動式預覽沙箱中測試應用程式。
  • 直接從 Google AI Studio UI 將應用程式部署至 Cloud Run。

課程內容

  • 瞭解如何使用 Google AI Studio 的建構模式，透過自然語言快速設計全端遊戲服務原型。
  • 如何使用 Cloud Firestore 實作事件溯源架構模式，儲存遊戲記錄。
  • 瞭解 Google AI Studio 如何自動設定 Firebase Firestore 和驗證整合。
  • 瞭解如何將 AI Studio 應用程式以無伺服器容器的形式部署至 Cloud Run。
  • 瞭解如何在 Firebase 控制台中檢查資料庫記錄和安全狀態。

2. 專案設定

啟動 AI Studio 前，請先確認帳戶狀態和必要條件。

Google 帳戶和層級資訊

  1. 如果沒有 Google 帳戶，請建立帳戶。
    • 提示：請盡可能使用個人 Google 帳戶進行本實驗室。群組、公司或學校帳戶可能會強制執行 Workspace 政策，停用實驗功能或雲端整合功能。
  2. 查看部署作業的帳單詳細資料：
    • Google Cloud 入門級：無須建立完整的 Google Cloud 帳單帳戶，即可在特定區域免費發布最多兩個全端應用程式。
    • 標準部署：連結至現有的付費 Google Cloud 專案，並擴充儲存空間限制、CPU 資源和 API。

3. 在 AI Studio 建構模式中建立回合制電玩遊戲

讓我們建立應用程式命令介面，並提示 AI 程式碼小幫手建構安全性、遊戲玩法邏輯和事件來源的持續性層。

  1. 前往 Google AI Studio 應用程式面板，然後點選「New App」(新應用程式)。
  2. 在聊天提示詞輸入框中，輸入回合制電玩遊戲應用程式的說明：
    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.
    這個連結會自動填寫提示詞輸入框。
  3. 按一下「建構」，開始產生應用程式。

當 AI Studio 代理程式發現需要資料庫儲存空間和安全的使用者登入功能時，就會觸發自動 Firebase 設定流程。

  1. 大約一分鐘後，工作區會彈出「啟用 Firebase」整合資訊卡。
  2. 按一下「啟用 Firebase」按鈕，確認並接受服務條款。
  3. 代理程式會執行背景設定。幕後運作方式：
    • 系統會佈建 Firestore 資料庫執行個體。
    • Firebase 驗證已啟用，且 Google 登入也已啟用。
    • 建立服務帳戶設定 (例如建立包含 API 憑證的 src/lib/firebase.ts)。
    • 系統會新增包含預設安全界線 (使用者隔離規則) 的 firestore.rules。

4. 測試及反覆運算

正式推出服務前，請先在互動式預覽畫面中執行驗證檢查。

  1. 在 Google AI Studio 中開啟預覽窗格。
  2. 按一下「登入」按鈕，觸發沙箱 Google 登入驗證。
    • 修正錯誤注意事項：在生成或測試期間，您有時可能會因安全規則不一致而遇到執行階段問題、編譯錯誤或 Firestore 權限失敗。如果發生這種情況，AI Studio 會在對話中顯示「修正」按鈕，讓您要求代理程式自動診斷及修復問題。
    Google AI Studio 修正按鈕位置
  3. 登入後，開始新的遊戲賽事，複製產生的遊戲代碼或分享連結，並確認可使用這些資訊加入賽事。
  4. 移動幾步，確認對賽記錄是否正確顯示。
  5. 嘗試返回先前的回合。確認棋盤或狀態更新反映遊戲記錄中的該時間點，並確認你可以還原或復原至該狀態。
  6. 如要變更樣式或行為，請透過即時通訊視窗指示代理程式。例如：
    • "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. 等待代理程式更新程式碼集，並在預覽瀏覽器中查看更新。

5. 部署至 Cloud Run

原型完全正常運作後，請在 Cloud Run 上將其部署為公開服務。

  1. 在 Google AI Studio 的右上角，按一下「發布」按鈕，啟動部署精靈。Google AI Studio 發布按鈕位置
  2. 按一下「開始使用」，設定 Google Cloud 專案。
    • 確認目標 Google Cloud 專案下拉式選單與您連結至工作區的專案相符。
    • AI Studio 會自動為 Cloud Run 執行個體產生專屬服務 ID。
    • (選用) 您可以在部署設定中指定自訂 .ai.studio 網址前置字串 (例如 your-portfolio-name.ai.studio)。
  3. 如果您是第一次部署，且使用標準 Google Cloud 參數，系統可能會提示您指定機構類型並提供帳單詳細資料。
  4. 按一下「發布應用程式」。
  5. 容器建構、容器註冊和服務部署步驟會在背景執行。這項程序通常會在 2 到 4 分鐘內完成。
  6. 部署完成後，請複製產生的「應用程式網址」，並在瀏覽器分頁中前往即時應用程式連結。
  7. 在瀏覽器中測試即時網頁應用程式！

6. 在 Firebase 控制台檢查

深入瞭解資料結構定義和使用者追蹤方式。

  1. 前往 Firebase 控制台。
  2. 選取專案 (標籤為 AI Studio 或您手動繫結的專案 ID)。
  3. 在左側導覽窗格中，選取「建構」>「Firestore 資料庫」：
    • 查看應用程式建立的資料庫集合和文件。
    • 確認每份文件的擁有者 ID 都與有效的使用者驗證憑證相符。
  4. 在 Firestore 面板中選取「安全性」分頁，即可查看自動產生的安全性指令，這些指令會將讀取和寫入權限限制在經過驗證的文件擁有者。
  5. 前往「安全性」>「驗證」，查看登入測試期間填入的有效使用者憑證清單。

7. 清除

如要避免產生預料之外的帳單費用，或清理工作區資源，請按照下列步驟操作：

  1. 在 Google AI Studio 中，前往「應用程式」頁面。
  2. 在格狀或清單中找出應用程式。
  3. 按一下垃圾桶圖示，即可刪除應用程式狀態，並從 Cloud Run 取消發布服務。
  4. 如果您是使用標準專案部署，並想完全關閉所有資源，請前往 Google Cloud 控制台專案設定，然後刪除基礎專案。

8. 結語

恭喜！您已直接透過 Google AI Studio 設計、開發及部署回合制電玩遊戲。

前往這個連結，即可領取「完成建構工具學習歷程」徽章！

如要繼續學習，請前往 goo.gle/builders 參加下一個實驗室。

瞭解詳情