在 Google AI Studio 中使用 Gemini 進行直覺式程式開發

1. 總覽

在本程式碼研究室中，您將建構「Snake & Beats」網頁應用程式，這是一款整合音樂播放器的復古大蛇遊戲。您將使用 Gemini 生成具有霓虹美學的單一檔案 React 應用程式，然後進行版本控管並部署至 Cloud Run。

學習內容

  • 建構與提示：使用 Google AI Studio 的「建構」模式，根據單一提示生成可運作的遊戲。
  • 使用系統指令微調：設定持續使用的角色，以便日後編輯，藉此「檢查」AI 的風格。
  • 儲存至 GitHub：直接從 AI Studio 啟動新存放區。
  • 部署至 Cloud Run：按一下即可將遊戲發布至 Google Cloud Run。

課程內容

  • 瞭解如何在 Google AI Studio 中使用「建構模式」快速設計應用程式原型。
  • 如何使用系統指令，在疊代期間維持一致的「程式碼風格」。
  • 如何將 Google AI Studio 連線至 GitHub 和 Cloud Run。

軟硬體需求

  • Chrome 網路瀏覽器
  • Gmail 帳戶
  • 已啟用計費功能的 Cloud 專案
  • Gemini API 金鑰
  • GitHub 帳戶

2. 事前準備

  1. 在 Google Cloud 控制台的專案選取器頁面中，選取或建立 Google Cloud 專案。
  2. 確認 Cloud 專案已啟用計費功能。瞭解如何檢查專案是否已啟用計費功能。

3. 建構及提示 (核心)

我們將一次建構整個應用程式。請登入 Google AI Studio，並確認您位於「建構」介面。

  1. 輸入建構提示：將下列詳細提示貼到對話方塊中：
Build a React web app that is a Music Player and a Snake Game combined. Use Tailwind CSS with a dark neon aesthetic. I want to be able to play Snake in the center window while the demo music plays in the background. Add 3 dummy ai generated music. Include controls for the music (play/pause/skip) and a score counter for the game.

4e4361663df80960.png

  1. 選取模型：在右側的設定面板中，確認已選取 Gemini 3.0 Pro (或最新的預先發布模型)，以便快速生成程式碼。
  2. 執行：按下「Build」(建構) 鍵 (或按 Cmd + Enter 鍵)。
  3. 預覽：Gemini 會生成程式碼，並在右側顯示即時預覽畫面 (如下所示)：

1b3351663df80961.png

4. 使用註解、圖片和語音修正

有時很難用文字描述視覺變化。註解模式可讓您在應用程式預覽畫面中繪圖，即時傳達想法。

使用註解模式

  1. 啟用註解模式：在 AI Studio 介面中 (查看左側面板或預覽視窗的底部工具列)，選取「註解」或「微調」工具。

f990712162e8e921.png

  1. 標記應用程式：
  • 繪製：使用方塊工具在「分數計數器」周圍繪製矩形。
  • 留言：在該方塊中輸入提示：「將這個字型放大，並加上數位和故障效果。」
  • 草圖：使用箭頭工具指向「播放」/「暫停」按鈕。
  • 註解：類型：「將這些圖示變更為發光的霓虹燈圖示。」

b8a52769f092e5d3.png

  1. 反覆運算：按一下「加入對話」，然後按下「傳送提示」。Gemini 會解讀視覺標記和文字指令，更新程式碼。
  2. 驗證：觀看預覽更新的直播。現在程式碼中應該會反映視覺回饋！

語音輸入 (The Spoken Vibe)

有時「氛圍」用說的比較容易，用寫的反而難以表達。

  1. 動作：按一下輸入列中的麥克風圖示 (「+」按鈕旁邊)。

85777a91507a84d1.png

  1. 說出：「嘿，蛇的動畫太慢了。加快速度，讓尾巴留下發光的軌跡。」
  2. 傳送：Gemini 會將語音轉換為文字，並套用變更。

5. 設定系統指令並重建

與一般提示不同，系統指令會在整個工作階段中持續有效。您可以在這裡定義程式碼標準、命名慣例或不應變更的特定視覺形象。

  1. 開啟「進階設定」：在 Google AI Studio 介面 (建構模式) 中，尋找「系統指示」方塊。如果沒有顯示，請按一下聊天面板頂端或側邊的「設定」(齒輪圖示) 或「進階設定」。

29dbc55e97f6f75.png

  1. 新增「氛圍」指令：將下列指令貼到文字方塊中。這會為我們的遊戲定義「Glitch Art」角色：
You are a Retro-Futurist UI Designer and Senior React Engineer. Visual Style: 'Glitch Art'. Use raw, pixelated fonts, jarring color contrasts (Cyan vs. Magenta), and CSS animations that simulate screen tearing or static noise. Tone: Cryptic and machine-like.
  1. 觸發變更：變更系統指令不會自動重寫程式碼。你必須指示 Gemini 套用這些新規則。
  • 關閉設定面板。
  • 在「Chat/Prompt」輸入欄位中輸入：「Rebuild the application UI to strictly follow the new System Instructions.」(重建應用程式 UI，嚴格遵守新的系統指令)。
  • 按一下「執行」/「傳送」。
  1. 觀察更新：Gemini 會確認變更。

6. 儲存至 GitHub

我們將使用內建的 GitHub 整合功能，立即啟動存放區，不必下載檔案和使用指令列。

  1. 找出整合功能：在 Google AI Studio 介面的頂端工具列中，尋找「下載」和「部署」圖示之間的 GitHub 圖示。

97ffa6de7e2d9653.png

  1. 連結帳戶：按一下圖示。如果是第一次，系統會提示您授權 Google AI Studio 存取 GitHub 帳戶。
  2. 建立存放區：畫面上會顯示「填寫下列資訊以建立存放區」對話方塊。

3ccac41b1f8996c3.png

  1. 存放區名稱：輸入名稱，例如 「AI-generated Snake game with React.」(以 React 製作的 AI 生成貪食蛇遊戲)。
  2. 存放區說明：輸入存放區說明。
  3. 瀏覽權限：選取「公開」(方便分享) 或「私人」。
  4. 推送至 GitHub：按一下「建立 Git 存放區」按鈕。

7. 部署至 Cloud Run

應用程式已準備就緒並儲存至 GitHub，現在請將其部署至 Cloud Run。

  1. 啟動部署作業：按一下下方標示的按鈕。位於 AI Studio 頁面右上角。

6947e028a3ef1f32.png

  1. 選取專案：按一下「選取 Cloud 專案」下拉式選單，然後從下拉式選單中選取專案。

46a1dc73323fbd2a.png

  1. 疑難排解：如果無法在下拉式選單中找到專案，請按一下「匯入專案」，然後從「匯入專案」窗格中選取專案。
  2. 帳單驗證：選取專案後，系統會驗證專案是否已啟用帳單功能。由於我們已在「事前準備」一節中將帳單帳戶附加至專案，因此這項驗證會自動通過。
  3. 部署：按一下「Deploy app」按鈕，等待應用程式部署至 Cloud Run。注意：系統會自動產生 Cloud Run 服務名稱。
  4. 部署作業應該會在幾分鐘內完成，隨後您會取得應用程式網址。點選網址後，您就能在網路上看到已部署的網頁應用程式！

8. 清除所用資源

如要避免系統向您的 Google Cloud 帳戶收取本文章所用資源的費用，請按照下列步驟操作：

  • 在 Google Cloud 控制台中，前往「管理資源」頁面。
  • 在專案清單中選取要刪除的專案，然後按一下「刪除」。
  • 在對話方塊中輸入專案 ID，然後按一下「關閉」刪除專案。

9. 恭喜

恭喜！您已成功在 AI Studio 完成直覺式程式開發應用程式，並部署至 Cloud Run！

AI Studio 是開發及測試應用程式的理想平台，使用者可立即查看設計的實際效果。

AI Studio 與 Cloud Run 完美整合，讓使用者能輕鬆將應用程式直接部署到 Google Cloud。使用 Cloud Run 可享有無伺服器環境的所有優勢，省去基礎架構管理作業的複雜性和額外負擔。