阿川私房教材：
學 JavaScript 前端，帶作品集去面試！

63 個專案實戰，寫出作品集，讓面試官眼前一亮！

立即開始免費試讀！

小編精選 - 技術文章翻譯 · 07月10日

Google AI Studio 全新建置功能實用指南

你是否曾經有過一個絕妙的應用程式創意，但卻為僅僅為了執行原型而需要大量的樣板程式碼、設定和除錯而感到焦慮？如果你能用一句話描述你的應用，並親眼見證它如何落地生根，結構完整，隨時可以安全大規模部署，那會是怎樣一番景象？

這不再是科幻小說了。它就是Google AI Studio中全新的「使用 Gemini 建構應用」功能，這是一款革命性的工具，集 AI 聯合創始人、架構師和開發者於一身。

在本指南中，我們將使用影片中的範例：基於 AI 的「萬智牌」卡片產生器，引導您完成整個過程，從簡單的想法到即時部署的 Web 應用程式。

第一步：清晰表達你的想法

一切始於你的想法。這項新功能的關鍵在於用清晰自然的語言描述你想要建立的內容。你在初始提示中提供的細節越多，結果就越好。

我們的目標是建立一個富含 AI 的 TypeScript 應用程式，產生一張獨特的萬智牌：派對卡，並附有藝術和文字。

以下是我們將使用的提示，就像影片中一樣：

“請建立一個應用程式來生成一張獨特的新萬智牌卡，使用 Imagen 提供視覺效果，並使用 Gemini 為該卡建立文本描述和統計資料。”

請注意，這非常具體，但又不失簡潔。我們不僅僅是要求一個卡片產生器；我們還指定了用於不同任務的AI模型（Imagen用於圖像，Gemini用於文字）。這有助於AI助理做出更好的架構決策。如果您沒有指定原型使用的機型，Gemini會在背景盡力為您選擇合適的機型。如果需要，您可以隨時在「建置」介面中編輯模型字串，我們稍後會介紹。

輸入提示後，點選「執行提示」按鈕（向上的箭頭圖示）。

使用 gemini 建立應用程式

第二步：進入Build介面

執行提示符後，AI Studio 會將你帶到一個類似 IDE 的新介面，你將在此建立應用程式，並可以在此遞歸迭代 Gemini 的輸出。讓我們來詳細分析一下你所看到的內容：

程式碼助理（左側面板）：這是你的 AI 夥伴的控制中心。它會向你展示它的思考過程、Gemini 正在建立的檔案以及模型遇到並修復的任何錯誤。
檔案總管和程式碼編輯器（中心）：這是標準的程式碼編輯器檢視。您將在這裡看到完整的文件結構（資料夾、元件、服務），您可以點擊任何文件來即時查看正在編寫的程式碼。
預覽窗格（右側面板）：一旦您的應用程式程式碼生成，您就可以在此處看到應用程式的顯示。

替代文字：提示執行後，以及您可以看到範例應用視覺化效果後，空白建置介面的全螢幕截圖。使用註解標記「程式碼助理」、「檔案總管」和「程式碼編輯器」面板。

第三步：雙子座的「思考」過程

這是體驗中最有趣的部分之一。在程式碼助理面板中，你會看到一個「思考…」部分，它使用了 Gemini 2.5 的全新「思考」功能。如果你展開它，就可以按照 Gemini 的分步計劃來設計和開發支援 AI 的應用程式。

這不是一個黑盒子——Gemini 在 AI Studio 的 Build 部分對其策略非常透明：

分析概念：理解核心請求。
優化使用者輸入：規劃如何最好地使用提示。
概述 API 整合：決定如何連接到 Gemini 和 Imagen API。
映射專案元件：將應用程式建構成邏輯 React 元件。
開發應用程式邏輯：編寫支援應用程式的功能。

這讓您深入了解複雜的 AI 代理如何從頭開始進行軟體開發，並且會隨著您建立新的、更複雜的應用程式而改變。

「思考...」面板的滾動 GIF，展示了 AI 在思考專案時計劃的各個階段。

步驟 4：自動程式碼生成

隨著 AI Studio Code Assistant 執行其計劃，您會看到檔案總管中的內容不斷填充。這不僅僅是一個腳本或幾個文件；它是一個結構良好、現代化的 Web 應用程式專案，使用了最新的 Gemini GenAI SDK 和模型。

您將看到如下文件和資料夾：

components/ （例如，CardDisplay.tsx，UserInput.tsx）
services/ （例如，geminiService.ts）
types.ts用於強大的 TypeScript 定義
index.html作為入口點
App.tsx作為主要應用程式元件

程式碼採用 TypeScript 編寫，並使用 React 框架，遵循現代最佳實踐。 AI 助理使用最新版本的 Google Gemini SDK 和模型，讓您始終能夠基於最前沿的技術，並使用正確的語法和約定進行建置。

延時 GIF 顯示左側的檔案樹正在填充，程式碼正在流入右側的編輯器窗格。

第五步：自動糾錯

即使是人工智慧也會犯錯！在生成過程中，助手可能會犯一些小錯誤，例如類型不符或匯入錯誤。

但神奇的是： Gemini 可以發現並修復自己的錯誤，而無需您介入。

在下面的 GIF 動圖中，您可以看到彈出一條通知：「正在分析 10 個錯誤…」。程式碼助理會逐一處理這些錯誤，“解決類型導入衝突”和“修復導入聲明”，直到所有文件都出現綠色勾號。這種自我修復功能可以節省大量的除錯時間。

將焦點放在程式碼助理面板左下方的 GIF 上，顯示「正在分析錯誤...」訊息出現然後解決，檔案清單以綠色複選標記更新。

步驟 6：預覽您的申請

一旦產生程式碼並修復錯誤，就可以查看您的創作了。

在介面頂部，您可以隱藏程式碼助理和程式碼編輯器，以便專注於預覽窗格。您所描述的應用程式現在已在 IDE 中視覺化，您可以與其互動以測試新功能或迭代設計。

以「MTG Card Forge AI」介面為例。我們可以輸入一個想法（「一隻修練時間魔法的睿智老烏龜」），然後點擊「Forge My Card！」。應用程式會顯示載入狀態，然後使用 Gemini 和 Imagen API 產生一張完整的卡片“Chronoshell Ancient”，並配有精美的藝術設計和描述性文字。

mtg 卡牌鍛造 AI 介面

第七步：公開－部署與分享

原型固然很棒，但一個已部署、安全且可擴展的應用程式更勝一籌。 AI Studio 和 Google Cloud Run 讓這個過程變得無比簡單。

在右上角，您有幾個選項：

下載：取得整個專案的 .zip 檔案以在本地執行和編輯。
分享：產生連結與他人分享您的小程式。
部署到 Cloud Run（火箭圖示）：這是最強大的選項。只需按一下，即可將您的應用程式部署到 Google Cloud Run。您只需選擇一個已啟用結算功能的 Google Cloud 專案即可。該應用程式將透過公用 URL 上線，並且您的 API 金鑰將安全地保存在後端，絕不會暴露給客戶端。

在谷歌雲端介面上部署應用程式