Google 最近搞了個大動作，把 Firebase Studio 正式推出來了！這玩意兒啊，就是他們家自己搞出來的一個『氛圍感』程式設計平台，目的嘛，就是想跟市面上那些 Cursor、Lovable、Bolt 還有 V0 較勁。我們這些做前端的，一提到 Firebase，腦子裡是不是馬上就想到『喔，Google 那個資料庫的東西』？
嘿，現在可不一樣囉！
它現在搖身一變，成了一個完整的大生態系統，能幫你從頭到尾搭建一個 AI 應用程式，甚至你都不需要懂太多程式碼！
那這 Firebase Studio 到底是什麼？
它怎麼用的？
真的能把我們現在用的 Cursor 什麼的，或是其他工具都取代掉嗎？
來，咱們就來好好聊聊這個。
Firebase Studio 到底是什麼？ #
Firebase Studio 是一個由 Gemini 提供支援的智慧雲端開發環境，能幫你從零開始，甚至可以直接部署到線上環境，搭建各種高品質的全端 AI 應用程式，包括 API、後端、前端、行動端，你想得到的它幾乎都能搞定。
它把之前那個 Project IDX 跟 Firebase 裡專用的 AI 助理以及 Gemini 大型模型的智慧都整合在一起，就是一個隨時隨地都能存取的協作工作區，開發一個應用程式，所有需要的東西都在裡面了，超省事！
它主要能做這些事：
-
匯入自己的專案： 想把已有的專案放進去？簡單！直接上傳本地端檔案，或是連接你的 GitHub、GitLab、Bitbucket 儲存庫就行。
-
用模板快速起步： 它內建了超多模板，什麼 Go、Java、.NET、Python 這些流行語言，還有 Next.js、React、Flutter 等各種框架，隨便挑，愛怎麼用就怎麼用。
-
用自然語言建立原型： 你想搭建什麼應用程式，直接跟 Gemini 說就行，文字描述、圖片示意，甚至你隨手畫個草圖，它都能幫你弄出來。
-
IDE 內建 AI 助理： Gemini 直接就在你的編輯器裡，寫程式碼、改 bug、生成測試、管理依賴，每一樣都能幫你搞定。
-
開發環境隨心所欲地客製化： 它跑在一個基於 Code OSS 的虛擬機器上。想自訂工具、配置，還是預覽？用 Nix 都能處理，還能把你的配置分享給別人，超方便！
-
內建模擬器與深度 Firebase 整合： 直接在瀏覽器裡就能預覽應用程式，跑測試，還能用 Firebase 的本地端模擬器和 Google Cloud 的工具來除錯，所有這些操作，都在一個地方完成，一條龍服務！
它是怎麼工作的？ #
要開始使用，直接去 studio.firebase.google.com 這個網址，用你的 Google 帳號登入就行。進去一看，儀表板非常簡潔，用起來也特別順手。
大概就兩種玩法：
- 最簡單直接的，直接跟 AI 描述你想要什麼，它馬上就能幫你做出一個應用原型出來。
- 如果你還是喜歡自己動手敲程式碼，那也行，從零開始，選好你喜歡的程式語言或是框架，開始動手！
我來給大家舉個例子吧，我們來搭建一個應用程式，只要你上傳食材照片，它就能幫你生成食譜！
我給的提示詞很簡單，就一句話：
提示詞：一個能從照片生成食譜的應用程式
點一下那個『用 AI 建立原型』的按鈕，你就會進入一個聊天介面，接下來就全靠 Gemini 發揮功力了。它會先給你生成一個應用程式藍圖，把功能和風格指南都給你列得清清楚楚。
Gemini 幫我弄出來的藍圖長這樣：
App Blueprint:
Photo Upload: Allow users to upload photos of ingredients.
Ingredient Recognition: Use an AI model to identify the ingredients in the photo.
Recipe Suggestion: Use an AI tool to generate recipe suggestions based on identified ingredients.
Recipe Display: Display the generated recipes, including title, ingredients, and instructions.
Recipe Saving: Allow users to save generated recipes for later use.
Style Guideline:
Color: Green, White, Orange
Layout: Clean and organized layout with clear sections for photo input, ingredient display, and recipe presentation.
Iconography: Use consistent and recognizable icons for actions like saving, sharing, and editing.
Animation: Subtle animations for loading states and transitions between different sections of the app.
你可以繼續跟 Gemini 聊天，調整這些功能或是修改應用程式的樣式。等你覺得藍圖都確認好了，就點『開始原型這個應用程式』，這時候，它會問你要 Gemini 的 API 金鑰。
你可以偷懶讓它自動生成金鑰，也可以自己去申請一個。要是自己申請，就去 Google 的 AI Studio，然後點『建立 API 金鑰』就行。
把金鑰貼到 Firebase Studio 裡，然後點繼續。等個幾秒鐘，你的應用程式就完成了！
我們來試試看效果怎麼樣，我找了一張 Unsplash 上的圖。你也可以隨便找張網路上的圖片，把連結複製貼上到應用程式裡就行。
現在看起來是有點簡陋，但我的想法是，最終把它做成一個手機 App，使用者只要隨手拍張菜市場的照片，就能馬上獲得食譜建議。
Gemini 大部分食材都辨識正確了——但也不是全部。比如說，圖裡根本沒有番茄醬和辣椒，它卻誤判了。這就暴露出 Gemini 視覺模型的一個弱點：它在精準物體辨識上，還是有點吃力。
算了啦，我們繼續，讓 AI 根據辨識出來的食材推薦食譜。總共幫我生成了三個食譜：
- 豬肉炒彩椒加番茄醬（Pork Stir-Fry with Bell Pepper and Ketchup）
- 番茄醬豬肉（Ketchup Pork）
- 番茄醬釉豬排（Ketchup Glazed Pork Chops）
儘管如此，應用程式本身生成得還是挺順利的，沒出什麼大問題。沒當機，也沒等太久，一個按鈕就搞定了！
要是想手動改改程式碼，完善一下應用程式，就點那個『編輯程式碼』按鈕，它會把你帶到一個基於瀏覽器的 IDE 裡，接著就可以繼續開發了。我還注意到，這個應用程式是用 NextJS 搭建的，這對我來說簡直是福音啊，畢竟我用 NextJS 比其他框架順手多了。
而且所有東西都在雲端，這點特別棒——完全不用在本地端安裝任何東西。你換個裝置也能接著工作，無縫接軌。
終端機、預覽窗格、完整的專案檔案，這些都給你配齊了——跟 VS Code 簡直一模一樣。如果你以前用過 GitHub Codespaces 或是 StackBlitz，那你肯定會覺得這體驗超熟悉。
咱們來聊聊使用者體驗 #
Firebase Studio 用起來跟 Bolt、V0、Lovable 那些都差不多。你提出要求，Gemini 就根據你的指示提供程式碼修改建議。舉個例子，我讓它把 UI 介面最佳化一下，想讓它看起來更酷、更現代。
提示詞：提升整個應用程式的外觀和感覺。讓它看起來更時尚、更現代。
跟其他 AI 程式碼生成器不一樣的是，Firebase Studio 不會立刻就把修改給你應用上去——它會先讓你預覽一下。如果你喜歡掌控一切，這確實挺好，但要是你想快速迭代，那可能就會有點拖慢速度了。
不過最讓人頭痛的一點是，那些你已經接受的修改，居然沒辦法撤銷！如果你點了接受，結果發現改完後不喜歡，抱歉，沒有『撤銷』按鈕能讓你反悔。這對於那些需要快速測試和迭代的開發者來說，簡直是個大問題！
另外，在設定頁面裡，你還可以開啟程式碼庫索引，並且選擇大型語言模型（LLM）提供商，這樣就能提升 AI 的知識庫和回應效果了。
想了解 Firebase Studio 更多功能和各種可以調整的設定，直接去看官方文件就行。
發表你的應用程式 #
最後要告訴大家的是，Google 允許你透過 Firebase App Hosting 來託管你的應用程式。等你對應用程式建置滿意了，就點擊儀表板右上角的『發表』按鈕，然後跟著螢幕上的提示操作就行。
Firebase App Hosting 提供了 GitHub 整合，還能跟 Firebase 的其他產品無縫接軌，像是驗證、Cloud Firestore 還有 Firebase 裡的 Vertex AI。它對 Next.js 和 Angular 都有內建的預配置支援，對各種流行的 Web 框架也都有廣泛支援。
不過要提醒一點，App Hosting 是按用量計費的，如果你超出了免費額度，那就要開始付費了。
你甚至能部署自訂網域、追蹤分析數據，還能用 Firebase 內建的驗證系統——所有這些，在一個儀表板裡就能搞定，省事兒！
這事兒為什麼這麼重要？ #
最近那些對這種智慧輔助程式設計平台感興趣的朋友們，聽到 Firebase Studio 來了，估計都會非常興奮吧！雖然在我看來，它目前還沒其他程式碼生成器那麼驚豔，但 Google 家大業大，資源、資金都多的是，而且基礎設施也完善，想把 Firebase Studio 快速發展起來，那簡直是分分鐘的事。
對開發者來說，這意味著搭建強大的 AI 應用程式變得更簡單、更觸手可及了，尤其是要和 Google 現有的服務，像是 Firebase Hosting、Gemini 模型、Firestore 還有 Vertex AI 結合起來用的時候，那更是如虎添翼。
微軟那邊估計很快就會卯足全力，把 GitHub Copilot 弄得更強，而 Stackblitz (Bolt.new)、Vercel (V0) 還有 Cursor 這些平台，現在肯定也感受到了額外的壓力。他們得趕緊提升服務，或是想點新花樣出來，不然可就危險了。
再說，Google 這個科技巨頭最近在發表新 AI 模型上可是非常積極，像是那個內建圖片編輯功能的 Gemini 2.0 Flash。這也可能是開發者更傾向於 Firebase Studio 的另一個原因。
簡單來說，這次發表很重要，因為它把整個圈子都攪動起來了，讓開發者甚至一般使用者都能更輕鬆地做出東西，也逼著競爭對手們趕緊把自己的水平再往上提升。
價格和限制 #
可能最讓人開心的就是，Firebase Studio 你可以免費使用，最多能有 3 個工作區。如果你加入了 Google 開發者計畫，這個上限就提高到 10 個。如果你有進階帳號，那就能建立多達 30 個工作區。
有些功能，像是 Firebase App Hosting，可能就需要你綁定一個雲端計費帳號。一旦你綁定了，下面幾件事就會自動發生：
- 你的 Firebase 專案會自動切換到『烈焰』（按用量計費）方案
- Gemini API 也會變成付費層級
- 超出免費額度的任何使用都會開始計費
所以說呢，開始使用是免費的——但如果你開啟了付費服務，就得留意自己的用量了。
我個人還是希望能對第三方工具更開放一點。現在嘛，你基本被牢牢鎖在 Google 的生態系統裡了。對一些人來說這可能沒什麼，但如果你用其他雲端服務商或是喜歡不同的模型，那可就有些限制了。
最終想法 #
看到 Google 終於推出一個像樣的 AI 應用程式建置器，而且還免費，這點確實挺讓人欣慰的。就最近這幾個禮拜，他們接連推出了不少實用工具，而 Firebase Studio 對開發者來說，可能才是目前為止最有分量的那個。
話是這麼說，但我還是發現了一些問題。剛上線沒幾個小時，包括我在內的一些使用者就因為流量太大而遇到了錯誤。有些時候，應用程式甚至試了好幾次都根本生成不出來。
你在測試的時候，很可能就會碰到這種錯誤。
而且，現在用起來也感覺有點侷限。你沒辦法使用 Google 自家 LLM 之外的模型。已經接受的程式碼修改，也不能撤銷。對 Supabase 也沒有支援。很明顯，它就是想把你『圈』在 Google 的生態系統裡，這對於喜歡混搭不同廠商工具的人來說，就比較不友善了。
不過嘛，剛發表的東西通常都一團糟，Google 家底那麼雄厚，資源和規模都多的是，可以快速改進。我敢肯定他們已經在後台悄悄收集回饋、做更新了。我非常期待它在下個版本能有很大的改進和新功能。
所以說呢，雖然有些地方還不完善，但總體來說還是很有潛力的。
目前嘛，我還是鼓勵大家去試試看。隨便玩玩，搭建點酷炫的東西，看看它能不能融入你的開發流程。它可能今天還取代不了 Cursor 或 Copilot，但這畢竟是 Google 第一次認真出手，值得關注！
大家試過之後有什麼想法，歡迎在留言區告訴我喔！