在上一篇文章中，我分享了自己如何在毫無 Firebase 經驗的情況下，透過 AI 的協助完成了平台的基礎建設，包括 身分驗證 與 資料庫存儲。這些功能雖然已經足以讓平台「活起來」，但當我繼續開發時，發現 Firebase 還提供了更多進階功能，讓整個平台更完整、更貼近實際使用情境。

這次要聊的，是我在開發過程中一步步摸索並實作的功能，包括 檔案存儲與圖片上傳、Firebase Hosting 多站點部署、Cloud Functions 自動化通知，以及 Google Analytics 分析。

圖片上傳：用 Firebase Storage 管理使用者內容

Firebase 除了 Firestore 和 Database 外，還有 Firebase Storage，專門用來儲存大型檔案，例如圖片、影片、PDF 等。

在我的平台中，任務 與 獎勵 是核心功能，而圖片能讓這些內容更生動。例如，家長可以替任務上傳一張「收拾房間」的示意圖，或者替獎勵加上一張「遊樂園門票」的照片。這樣一來，孩子看到的就不只是文字，而是直觀、有趣的視覺化內容。

我的實作流程幾乎完全是在 AI 的指引下完成的：

• 先和 AI 討論：我告訴 AI 我想要讓使用者可以上傳圖片，並且儲存在雲端，之後在任務列表中顯示。
• 了解需求與步驟：AI 告訴我需要使用 Firebase Storage，並設計一個前端的圖片上傳表單，同時在資料庫中存儲圖片的下載 URL。
• 跟著指示操作：我在 Firebase 控制台中開啟 Storage，接著讓 AI 直接生成 React 程式碼。
• 驗證與測試：上傳圖片、檢查下載連結、在任務卡片中顯示圖片，全部一次到位。

原本我對 Firebase「檔案存儲」的概念很模糊，但在 AI 的引導下，不只是功能完成了，還能大致理解背後的運作邏輯。

Firebase Hosting 多站點部署：正式版、入口網站、測試環境一次搞定

剛開始開發時，我的 Firebase Hosting 只有部署 主應用。但是隨著平台內容增多，我想要有一個對外的「入口網站」，更像是品牌官網，讓訪客先認識平台再進入主應用。

我就問 AI：「我可以用 Firebase Hosting 同時部署兩個網站嗎？」
AI 告訴我，可以，而且 Firebase Hosting 支援 多站點部署。只要在 firebase.json 中設定多個站點，每個站點可以指向不同的資料夾，甚至是不同的專案結構。

於是我的架構就變成：

• 主應用（正式版）：使用者登入後的核心平台
• 入口網站：品牌官網與平台介紹
• 測試版應用：新功能測試環境，只開放給少數人

這樣的好處很明顯：

• 正式版與測試版分離：避免測試功能影響正式用戶
• 入口網站更輕量：只需載入必要內容，不被主應用的程式碼拖慢
• 快速部署：每個站點都可以單獨更新

這套多站點策略，完全是 AI 建議後我才想到的，而且實作起來比想像中簡單。

Cloud Functions：自動寄送每日／每週報告

另一個讓平台更貼近實際使用情境的功能，是 自動發送 Email 報告。我希望家長能定期收到孩子的任務完成狀況，不需要每天手動打開平台查看。

AI 建議我使用 Firebase Cloud Functions 搭配排程（Scheduled Functions）。流程如下：

1. 啟用 Functions：在 Firebase 專案中初始化 Functions 環境
2. 撰寫排程任務：設定每日或每週執行的時間
3. 整合 Email API：例如 SendGrid/Resend 或 Gmail API，將任務摘要整理成 Email 內容
4. 部署與測試：確認排程準時觸發

實作後，家長就能自動收到一封整理好的報告信，完全不需要額外操作。

Google Analytics：用數據優化平台

最後，為了知道平台實際的使用情況，我啟用了 Google Analytics (GA)。這讓我可以追蹤：

• 哪些頁面最常被瀏覽
• 使用者在平台停留多久
• 哪些功能的互動率最高

GA 的安裝也很簡單，只要在 Firebase 控制台啟用分析，並在前端加入初始化程式碼即可。透過這些數據，我可以更有方向地優化平台，而不是憑感覺亂改。

從「不懂」到「能用」的關鍵

回顧這一系列功能，其實我在實作前完全不懂 Firebase 的進階能力。整個過程是：

• 先和 AI 討論可以做什麼功能
• 再問 AI 需要怎麼做
• 在 AI 指引下操作 Firebase 開啟功能
• 請 AI 直接實作對應程式碼
• 驗證並上線

如果沒有 AI，我可能會卡在第一步就花費大量時間，但現在我不只快速完成了功能，還建立了對技術的理解。

這也是我覺得 AI 協作開發最大的價值:
讓「原本不懂的人」也能一步步完成進階功能，並且在過程中真正學會。

如果說前幾篇是在打地基，完成專案結構、主要介面框架，以及 Firebase 的後端服務與整合——那麼接下來，就是正式進入蓋房子的階段了。基礎建設已經穩固，剩下的就是讓 AI 幫我快速把一個又一個核心功能搭建起來，而「行程管理」正是第一個上線的重點模組。

敬請期待下一篇：《Vibe Coding 真香：行程管理功能輕鬆落地》