在 Google AI Studio 中建構應用程式

本頁面說明如何使用 Google AI Studio 快速建構 (或「隨意編碼」) 及部署應用程式，測試 Gemini 的最新功能，例如 Nano Banana 和 Live API。Google AI Studio 現在支援全堆疊執行階段，可讓您透過自然語言提示建構功能強大的應用程式，並使用伺服器端邏輯、安全密鑰管理和 npm 套件支援。

開始使用

在 Google AI Studio 的建構模式中，開始以直覺方式開發程式。您可以透過下列幾種方式開始建構：

  • 先輸入提示：在「建構」模式中，使用輸入框輸入要建構的內容說明。選取「AI 晶片」，在提示中加入圖片生成或 Google 地圖資料等特定功能。你甚至可以按語音轉文字按鈕，說出想聽的內容。
  • 「好手氣」按鈕：如果需要靈感，請使用「好手氣」按鈕，Gemini 就會生成含有專案構想的提示，協助你開始創作。
  • 從範本庫重新混音專案：從應用程式範本庫開啟專案，然後選取「複製應用程式」。

執行提示詞後，系統會生成必要的程式碼和檔案，並在右側顯示應用程式的即時預覽畫面。

系統會建立什麼內容？

執行提示時，AI Studio 會建立完整的應用程式。根據預設，這項工具會建立全端環境，其中可能包含：

  • 用戶端：網頁前端 (預設為 React)。
  • 伺服器端：Node.js 執行階段，可進行安全的 API 呼叫、資料庫連線，以及使用 npm 套件。

選取右側預覽窗格中的「程式碼」分頁，即可查看產生的程式碼。Antigravity Agent 會智慧管理堆疊中的多個檔案，確保變更正確傳播。

The Antigravity Agent

Antigravity Agent 是 Google Antigravity 的主要 AI 功能，現在也是代理程式架構的核心元件，可支援 Google AI Studio 的建構模式體驗。不只是產生簡單的程式碼，還能維護整個專案的脈絡、管理多個檔案，以及瞭解複雜的指令，建構穩健的全端應用程式。

主要功能如下所示：

  • 瞭解脈絡：保留先前提示和檔案狀態的脈絡。
  • 多檔案管理：處理多個檔案之間的依附元件。
  • 驗證執行：驗證程式碼更新，減少產生幻覺。

全端功能

Google AI Studio 充分發揮現代網路生態系統的強大功能，讓您不僅能建構用戶端原型，還能執行更多操作。

  • 伺服器端執行階段和 npm：使用 npm 套件的龐大程式庫。代理程式會自動識別並安裝應用程式所需的套件 (例如資料視覺化或 API 用戶端的特定程式庫)。您也可以視需要要求特定套件。
  • 密鑰管理：在「設定」選單中安全地儲存 API 金鑰和密鑰。這些值可在伺服器端程式碼中存取，避免在用戶端曝光。
  • 多人協作：直接在 AI Studio 中建構即時協作體驗。伺服器端執行階段會管理使用者互動所需的狀態和連線。
  • Firebase 整合：自動佈建及設定 Firebase，包括 Firestore 資料庫 (持續性資料儲存空間) 和 Firebase 驗證 (登入流程，特別是「使用 Google 帳戶登入」)。代理程式會處理整個設定程序，甚至在應用程式中為這些服務編寫程式碼。

進一步瞭解如何開發全端應用程式

繼續建構

Google AI Studio 為應用程式生成初始程式碼後，您可以繼續調整：

在 Google AI Studio 中建構內容

  • 使用 Gemini 疊代：在建構模式中使用對話面板，要求 Gemini 進行修改、新增功能或變更樣式。
  • 直接編輯程式碼：開啟預覽面板中的「程式碼」分頁，即可即時編輯。

在外部開發

如要使用更進階的工作流程，可以匯出程式碼，並在偏好的環境中作業：

  • 在本機下載及開發：將產生的程式碼匯出為 ZIP 檔案，然後匯入程式碼編輯器。
  • 推送至 GitHub：將程式碼推送至 GitHub 存放區，與現有的開發和部署程序整合。

主要功能與特色

Google AI Studio 提供多項功能，讓建構過程直覺易懂且視覺化：

  • 建立及疊代全端應用程式：只要輸入提示，即可建立全端應用程式，並透過對話或註解模式進行疊代。使用註解模式，即可醒目顯示應用程式 UI 的任何部分，並說明所需變更。
  • 分享及部署應用程式：您可以與他人分享作品，進行協作或展示成果。接著，應用程式準備就緒後，即可部署至 Cloud Run。
  • 應用程式庫：應用程式庫提供專案構想的視覺化程式庫。 你可以瀏覽 Gemini 的功能、即時預覽應用程式，並重混應用程式，打造專屬版本。

建立及疊代全端應用程式：快速簡介執行階段支援，使用註解模式疊代 分享及部署 - 在 AI Studio 中分享應用程式，或部署至 Cloud Run 探索應用程式庫

部署或封存應用程式

應用程式準備就緒後，即可部署：

  • Google Cloud Run：將應用程式部署為可擴充的服務。 系統可能會根據用量收取 Google Cloud Run 費用。
  • GitHub：將專案匯出至 GitHub 存放區。

限制

本節列出 Google AI Studio 建構模式目前的限制。

API 金鑰安全性

  • 用戶端：切勿直接在用戶端程式碼中使用實際的 API 金鑰。
  • 伺服器端：使用 Secrets Management 功能，在伺服器端執行階段安全地處理機密金鑰。

在 Google AI Studio 以外的平台部署

  • 您可以將應用程式部署至 Cloud Run，取得公開網址，但這樣一來，所有使用者呼叫 Gemini API 時，都會使用您的 API 金鑰。
    • JavaScript 應用程式是在用戶端執行，因此請確保 API 金鑰只有最低存取權，避免資料外洩或遭到濫用。舉例來說，使用者可透過這項機制存取同一專案中的其他檔案搜尋商店。
  • 安全地部署至外部：如要在 AI Studio 以外安全地執行應用程式 (例如下載 zip 檔案後)，您必須將使用 API 金鑰的邏輯移至伺服器端元件，避免金鑰暴露給使用者。如果您使用 Cloud Run 部署，則不需要執行這項操作。
  • 金鑰曝光警告：強烈建議不要在用戶端環境中，直接將預留位置替換為實際 API 金鑰，因為這樣一來，所有使用者都能看到金鑰。

分享應用程式時發生錯誤

如果您分享應用程式，而使用者透過共用網址存取時遇到 403 存取受限錯誤，可能是因為下列其中一個原因：

  • 瀏覽器擴充功能：隱私權擴充功能 (例如 Privacy Badger) 可能會封鎖應用程式。請停用擴充功能，避免發生錯誤。
  • 建構問題：目前的程式碼可能存在問題。提示代理程式「修正目前程式碼的所有建構問題」，然後重新分享網址。

後續步驟