譯者 | 布加迪

審校 | 重樓

引言

如果你參與過現代Web和移動應用程序的構建，一定深有體會：真正的挑戰往往在最初的想法萌生之后很久才出現。在你編寫一行業務邏輯之前，就要面對各種配置問題。你需要實用的IDE、Node版本適宜的本地環境、運行中的數據庫、安全規則，或許還需要無服務器函數。這些初始設置會消耗大量的干勁和精力。

接下來便是開發階段，其特點是需要不斷切換上下文。你在前端代碼、Firebase CLI命令終端、Firebase Console瀏覽器之間來回切換，甚至可能還需要使用另外的API 測試工具。這對于全堆棧開發者來說是無法避免又令人沮喪的一部分。

如果這一切都能迎刃而解呢？如果你的整個全堆棧開發環境（從代碼編輯器、模擬器到部署管道）都能立即可用且深度集成，該多好？

Firebase Studio簡介

這就引出了Firebase Studio，這是谷歌于2024年發布的集成式云端開發環境。Firebase Studio不僅僅是一款基礎的在線代碼編輯器，還是專用的工作區，用于構建、原型設計和部署全堆棧應用程序，充分利用Firebase平臺的強大功能和Gemini AI的智能。它基于開源的Code OSS平臺構建，將整個開發生命周期遷移到云端，徹底消除了繁瑣的本地設置和部署。

Firebase Studio存在的理由簡單而充足，可以用三個詞來概括：速度、簡潔和AI輔助。

?速度：你可以在幾分鐘內（而不是幾小時）將簡單的想法轉化為實用的原型，完全無需依賴本地環境配置。

?簡潔：它直接與各大Firebase服務（比如身份驗證、Firestore、托管和云函數）集成。所有服務均可直接從編程環境訪問。

?AI輔助：它將Gemini集成到Firebase中，充當智能助手，可以根據自然語言提示生成樣板代碼、修改模式或添加完整功能。

本文面向希望節省時間、專注于功能開發而非配置的開發者。具體來說，我們的目標用戶包括：

?Firebase開發者：熟悉Firebase生態系統的用戶會發現，Studio可顯著提升他們現有的工作流程。

?全堆棧工程師：任何使用React、Next.js或Angular等框架構建現代Web應用程序的用戶都會欣賞無縫集成和云端可移植性。

?快速原型開發團隊和初創公司：需要快速驗證想法、做出可測試的最簡可行產品（MVP），無需在復雜的工具上浪費資源的團隊。

設置工作區

Firebase Studio的主要優點在于其極簡的設置。你只需幾分鐘即可從空白的瀏覽器標簽頁進入到實用的開發環境。

?第一步：訪問和可用性

在開始編寫代碼之前，你需要知道如何找到Studio，并了解其費用。訪問Firebase Studio 非常簡單，只需要標準的谷歌帳戶和現代Web瀏覽器。

Firebase Studio現已正式發布，經常發布持續更新版和新功能。針對新用戶，谷歌在初始使用階段提供慷慨的免費版，通常包含數量有限的免費工作區。如果是持續的專業使用，只需將你的項目連接到標準的Blaze（按需付費）方案即可。該方案支持可擴展性，并涵蓋Firebase App Hosting等集成服務的使用費用。

?第二步：創建工作區

登錄后，平臺提供三種不同的高效方式來啟動你的項目，每種方式都適合不同的起點。無論你是從零開始還是引入現有代碼庫，這種靈活性至關重要。

使用AI設計原型

如果你起初只有一個想法，這是最快捷、最強大的功能。你無需手動創建文件和配置框架，即可使用基于Gemini 的App Prototyping智能體。你只需使用自然語言描述想要構建的應用程序，就像與產品經理交談一樣。Gemini 就會自動生成初始結構、UI組件，甚至建議數據庫模式。

比如說，你可以輸入以下提示：

為云服務提供商構建登錄頁。該頁面應包含引人注目的標題和副標題，突出其面向企業客戶的價值主張。頁面應包含熱門產品及其定價、帶有徽標的客戶評價以及清晰的“請求咨詢”等部分。設計應簡潔、現代且支持移動端。

然后，智能體將生成一個實用的原型，供你立即完善。

下面是原型的樣子。

你的應用程序原型初版已完成！你可以在預覽窗口中試用它，如果需要任何更改，只需點擊下方按鈕，或者更好的是，點擊頂部的 </> 按鈕切換到代碼編輯器并進行修改。

從模板或空白工作區開始

如果你已經知道要使用的技術堆棧，跳過AI提示，直接從專業構建的模板入手是另一種選擇。Firebase Studio維護龐大的模板庫，支持包括Next.js、React、Flutter和Angular在內的現代Web框架。選擇模板后，你將獲得預配置的代碼庫，包含所有必要的依賴項和樣板結構，為你節省了繁瑣的初始設置和軟件包配置時間。

導入現有項目

如果是希望改弦易轍的資深開發者，可以輕松導入現有代碼庫。Firebase Studio可直接與GitHub、GitLab和Bitbucket等流行的源代碼控制平臺集成。如果連接你的代碼倉庫，Studio可自動拉取你的代碼，并嘗試搭建必要的環境和依賴項，讓你無需在本地克隆代碼倉庫即可在云端調試或開發新功能。如果你的代碼未托管在受支持的平臺上，也可以導入壓縮包。

選擇路徑或GitHub代碼倉庫后，Studio會加載你的工作區，呈現一個功能強大且井然有序的開發控制臺。整個環境基于強大的Code OSS編輯器而建，為數百萬使用VS Code的開發者帶來了熟悉的體驗。

主界面清晰地分為幾個關鍵面板：

?代碼編輯器和文件資源管理器：用于編輯代碼的中心區域，左側是用于導航的文件樹。

?集成終端：全面訪問命令行，允許你在瀏覽器中運行構建腳本、使用Firebase CLI以及安裝依賴項。

?AI/Gemini聊天面板：專用側邊欄，你可以在這里直接與Gemini智能體進行交互，獲取幫助、生成代碼并進行迭代修改。

構建全堆棧應用程序

全堆棧應用程序需要用戶界面和后端基礎架構無縫連接。Firebase Studio旨在簡化這種集成，利用與Firebase服務的天然連接，為服務器端開發提供精簡的環境。

集成核心的Firebase服務

Firebase Studio的核心價值在于其對Firebase生態系統的固有理解，使你能夠通過簡單的命令或AI提示連接關鍵服務，而無需手動配置SDK和環境變量。

?身份驗證：Gemini 可以使用電子郵件/密碼、Google 或其他提供商自動生成用戶注冊、登錄和會話管理所需的代碼。它理解受保護路由的概念，可以根據用戶的身份驗證狀態編寫代碼來控制對應用程序特定部分的訪問。

?數據庫：無論你是從模板還是AI生成的原型開始，集成數據庫通常只需一個提示即可。比如說，要求AI“將此表單數據保存到名為‘messages’的集合中”將導致AI執行以下操作：

A.編寫客戶端代碼以處理數據提交

B.在Firebase項目中創建必要的數據庫實例（如果沒有數據庫實例）

C.更新Firebase安全規則，以確保只有經過身份驗證的用戶才能向該集合寫入數據

使用Cloud Functions 開發服務器端邏輯

雖然許多操作可以在客戶端處理，但復雜的業務邏輯、敏感操作和長時間運行的任務需要安全的服務器端執行。為此，Firebase Studio提供了與Cloud Functions for Firebase（或Next.js等現代框架中的后端代碼）的原生集成。

1. 無服務器框架：Cloud Functions提供函數即服務（FaaS）解決方案。你可以使用Node.js或TypeScript編寫函數，Firebase會管理服務器環境。這些函數可通過以下方式觸發：

?HTTP請求：創建可充分利用REST的API端點

?事件：響應其他Firebase服務的更改（比如，在身份驗證中新用戶注冊時觸發電子郵件，或在新文件上傳到Cloud Storage后處理圖片）

2. Studio 集成：你可以使用Firebase CLI，直接從Studio中的集成終端來編寫、測試和部署這些函數。Gemini甚至可以協助編寫樣板代碼，提供函數結構，并處理firebase-admin SDK 設置。

測試和預覽

開發速度很大程度上依賴于快速的反饋循環。Firebase Studio集成了多種工具，確保你可以實時測試全堆棧應用程序。

?實時Web預覽：每個工作區都包含一個實時預覽面板，該面板會在你保存文件時自動更新（通常支持熱重載或熱模塊替換，以便即時提供視覺反饋）。此面板是功能齊全的Web 服務器，用于運行你的代碼。

?Firebase本地模擬器套件：為了實現強大的全堆棧測試，Studio支持Firebase本地模擬器套件。這使你能夠在本地瀏覽器中運行核心服務，比如身份驗證、Firestore、云函數和Hosting，無需產生云費用或影響生產級數據。你可以直接從終端或通過AI提示來啟動這些模擬器，并與之交互。

?可共享預覽：基于云的工作區的一個獨特優點是能夠共享運行中應用程序及其預覽的實時公共URL。這對于從團隊成員、設計師或產品經理快速收集反饋至關重要，無需他們搭建本地開發環境。

部署和發布你的應用程序

Firebase Studio大大縮短了通向生產環境的路徑，它與Firebase App Hosting直接集成，適用于現代Web 應用程序。

一鍵部署到Firebase App Hosting

Firebase App Hosting是一個托管的無服務器平臺，針對Next.js和Angular等現代全堆棧Web框架進行了優化。

?集成平臺：部署是簡化的流程，通常只需一次操作即可完成，無論是通過AI提示還是在Firebase Studio面板中點擊。

?自動配置：點擊“發布”按鈕即可自動處理繁重的任務：

A.配置一個Firebase 項目（如果還沒有項目）

B.連接到云計費帳戶（應用程序托管的必要條件）

C.搭建Firebase App Hosting后端，負責管理基礎架構

?持續部署：App Hosting旨在與GitHub集成。通過連接你的代碼倉庫，App Hosting可以在每次將更改推送到指定的實時分支時自動觸發新的發布（部署），從而創建一個流暢、現代化的CI/CD（持續集成/持續交付）管道。

?谷歌云基礎架構：你的應用程序使用Cloud Build構建，托管在Cloud Run（一個完全托管的計算平臺）上，通過Cloud CDN（內容分發網絡）在全球范圍內分發，以實現高效性能和可靠性。

發布后：監控和回滾

部署完成后，Firebase App Hosting提供了維護和快速響應工具。

?App Hosting可觀測性：你可以直接在Firebase 控制臺中監控構建和發布，訪問日志和關鍵指標，確保應用程序運行良好。

?回滾功能：萬一出現嚴重錯誤，App Hosting支持一鍵回滾到應用程序之前的穩定版本，最大限度地減少停機時間。

?集成代碼輔助：除了分析功能外，Firebase中的Gemini還持續提供上下文感知聊天和代碼生成功能，幫助你編寫、重構和調試集成新的監控、分析或消息功能所需的代碼。

結語

Firebase Studio不僅僅是一個新工具，它以生成式AI為核心，重塑了整個應用程序開發生命周期。通過結合強大的云IDE功能與可靠的Firebase平臺和Gemini智能，它大大加快了從概念到生產的過程。

Firebase Studio的核心價值在于，它能讓你在幾分鐘內（而非幾個月）將想法轉化為功能齊全、可部署的應用程序。它通過提供貫穿開發流程所有階段的統一、無縫且集成的體驗來實現這一壯舉。

我們鼓勵你立即探究Firebase Studio，親身體驗未來的應用程序開發。立即開始使用 Firebase Studio：https://firebase.google.com/docs/studio/get-started

原文標題：Building Full Stack Apps with Firebase Studio，作者：Shittu Olumide