在 Google AI Studio 中開發全端應用程式

Google AI Studio 現已支援全端開發,可讓您建構不限於用戶端原型的應用程式。有了伺服器端執行階段,您就能管理密鑰、連線至外部 API,以及打造即時多人遊戲體驗。

伺服器端執行階段

Google AI Studio 應用程式現在可以包含伺服器端元件 (Node.js)。這種做法有以下幾個優點:

  • 執行伺服器端邏輯:執行不應向用戶端公開的程式碼。
  • 存取 npm 套件:Antigravity 代理程式可安裝及使用龐大 npm 生態系統中的套件。
  • 處理密鑰:安全地使用 API 金鑰和憑證。

使用 npm 套件

您不需要手動執行 npm install。只要要求代理新增需要套件的功能,代理就會處理安裝和匯入作業。

範例:>「使用 axios 從外部 API 擷取資料。」

安全管理密鑰

有了伺服器端程式碼和 Secret Manager,您現在可以建構與世界互動的應用程式。

Gemini API 金鑰

建立使用 Gemini API 的新應用程式時,AI Studio 會自動將 GEMINI_API_KEY 設為伺服器端密鑰,不需手動設定。你可以在「設定」的「密鑰」面板中查看這組金鑰。應用程式的 Gemini API 呼叫是透過伺服器端程式碼使用這組金鑰,因此不會在瀏覽器中公開。

第三方 API 金鑰

如要使用其他服務,可以手動新增 API 金鑰:

  • 第三方 API:連結至 Stripe、SendGrid 等服務,或自訂 REST API。
  • 資料庫:連線至外部資料庫 (例如透過 Supabase、Firebase 或 MongoDB Atlas),在工作階段結束後保留資料。

建構實際應用程式時,您通常需要連線至需要 API 金鑰的第三方服務 (例如 Twilio、Slack 或資料庫)。您可以按照下列步驟手動新增金鑰:

  1. 新增 Secret:前往 Google AI Studio 的「Settings」選單,找到「Secrets」部分。
  2. 儲存金鑰:在這裡新增 API 金鑰或 Secret 權杖。
  3. 在程式碼中存取:代理可以編寫伺服器端程式碼,安全地存取這些 Secret (通常透過環境變數),確保這些 Secret 不會公開至用戶端瀏覽器。

如有需要,代理也會在對話中顯示資訊卡,提示您在需要新 Secret 時新增金鑰,或在專案的環境變數中偵測到新金鑰時新增金鑰。

整合 Firebase,提供資料庫和驗證功能

Google AI Studio 現在可讓您透過 Firebase 整合,輕鬆在應用程式中新增資料庫或驗證功能。Antigravity 代理程式可自動佈建及設定下列服務:

  • Firestore 資料庫:彈性且可擴充的 NoSQL 雲端資料庫,可儲存及同步處理用戶端與伺服器端開發作業的資料。
  • Firebase 驗證:允許使用者透過「使用 Google 帳戶登入」流程,安全登入應用程式。

只要要求代理「為應用程式新增資料庫」或「設定 Google 登入」,代理就會處理必要的設定和程式碼生成作業。建構 Android 應用程式時,Firebase 整合功能也會佈建 Firebase AI Logic 和 Firebase App Check,確保用戶端 Gemini API 呼叫安全無虞。

Firebase 可免付費使用,您也可以視需要升級為付費帳戶,取得更多配額或使用付費功能。

Google Workspace API

Google AI Studio 可讓您建構連結 Google Workspace API 的應用程式,讓使用者在應用程式中,直接使用電子郵件、試算表、文件、日曆活動等實際資料。您不必再手動設定 Google 雲端專案、OAuth 或管理 API。

運作方式

您可以透過兩種方式新增 Workspace 整合:

  • 在對話面板中描述:只要在底部的對話面板中,告訴代理您想要什麼即可。例如「建立支出追蹤工具,將收據記錄到 Google 試算表」或「建立資訊主頁,摘要說明未讀的 Gmail 郵件」。
  • 從整合面板選取:在 Build 模式右側側欄開啟「整合」面板,然後啟用要連結的 Workspace 應用程式。

新增 Workspace 應用程式後,AI Studio 會自動執行下列操作:

  1. 為應用程式連結必要的 Google API。
  2. 產生伺服器端程式碼,用於呼叫 API。
  3. 新增安全的「使用 Google 帳戶登入」流程,讓應用程式的使用者可以授權存取自己的資料。

支援的應用程式

可用的 Google Workspace 應用程式如下:

應用程式 可建構的內容
Google 日曆 讀取、建立及管理活動和日曆
Google Chat 讀取對話和群組聊天室,並與其互動
Google 文件 建立、讀取、更新及設定文件格式
Google 雲端硬碟 整理、搜尋及管理檔案和資料夾
Google 表單 建立問卷調查、更新問題及擷取回覆
Gmail 讀取、傳送及管理電子郵件內容
Google Keep 管理記事、清單和附件
Google Meet 安排及管理視訊通話
聯絡人 同步處理及管理聯絡人
Google 試算表 讀取、寫入及設定試算表資料格式
Google 簡報 建立及修改簡報
Google Tasks 建立、管理及整理工作

驗證和權限

身為建構工具,您不需要設定 OAuth 用戶端、管理憑證或設定 Google Cloud 專案。AI Studio 會為您處理所有這些事項。

整合 Workspace API 的應用程式會使用「使用 Google 帳戶登入」功能驗證使用者。使用者開啟應用程式時,系統會提示他們登入,並授予應用程式所需的特定權限 (例如唯讀存取日曆,或編輯試算表)。應用程式只會存取使用者的資料。每位使用者都會授權存取自己的帳戶。

提示詞範例

以下提供幾個構想,協助您開始使用 Workspace 整合功能:

  • 「建構一個應用程式,讀取我的 Google 日曆,並在 Gmail 中為每場會議草擬準備電子郵件。」
  • 「建立一項工具,可擷取 Google 文件內容,並在 Google 簡報中生成 5 頁的摘要簡報。」
  • 「製作費用追蹤工具,讓我上傳收據,Gemini 擷取詳細資料,並在 Google 試算表中記錄新的一列。」

設定 OAuth

Secret Manager 的一項重要用途,是設定 OAuth 以連結其他網站或應用程式。如果提示包含連線至第三方應用程式的操作說明,且該應用程式需要 OAuth 驗證,代理會提供如何為該應用程式設定 OAuth 的操作說明。這些操作說明會包含設定 OAuth 應用程式所需的必要回呼網址。您也可以在「設定」面板的「整合」下方找到回呼網址。

打造多人遊戲體驗

全端執行階段可啟用即時協作功能。

  • 即時狀態:您可以要求代理建構「即時通訊」、「協作白板」或「多人遊戲」等功能。
  • 同步工作階段:伺服器會管理狀態,讓多位使用者即時與同一個應用程式執行個體互動。

提示範例:>「將這個遊戲改成多人遊戲,讓玩家可以看到彼此的游標。」

測試多人遊戲應用程式的訣竅

部署應用程式前,您可以透過兩種方式測試多人遊戲模式。

  1. 在 Google AI Studio 建構模式中,開啟多個應用程式分頁。在建構模式下開發時,應用程式會位於開發容器中。在多個分頁中開啟應用程式,即可模擬多位玩家使用應用程式的情況。
  2. 使用右上角的「Share」選單與他人共用應用程式。接著,使用「Share」選單「Integrations」分頁中的「Shared URL」,與共用應用程式的玩家一起使用應用程式。

最佳做法

  • Gemini API 呼叫:系統會自動將 GEMINI_API_KEY 設為伺服器端密鑰。使用這組金鑰,從伺服器端程式碼發出 Gemini API 呼叫。您可以在「Secrets」面板中查看。
  • Secret 安全性:一律使用 Secret Manager 處理機密金鑰。切勿在檔案中以硬式編碼方式加入這些值。
  • 區分關注點:將 UI 邏輯保留在用戶端架構 (React/Angular) 中,並在伺服器端處理商業邏輯/資料。
  • 錯誤處理:確保伺服器端程式碼能妥善處理外部 API 呼叫的錯誤,避免應用程式異常終止。

後續步驟