從想法到藍圖，把點子變成系統架構

在 Day 01 中，我們聊到了為什麼想做《喵語日誌》，並透過心智圖確立了產品的 3 大亮點與痛點解法。然而，要將一個充滿療癒感的陪伴想法真正落地變成可以順暢運行的應用程式，中間最關鍵的一步，就是設計出穩固且合理的系統架構。

好的系統架構就像是蓋房子前的鋼筋骨架與水電藍圖。它明確定義了每一個元件該負責什麼、以及資料該如何在系統間流動。特別是在這次 30 天的開發中，我將採用 Vibe Coding 模式——當我們手裡有一張清晰的系統架構圖時，我們就能向 AI 下達精準的模組指令，避免在寫程式的過程中走彎路、踩坑。

今天，我們就來拆解《喵語日誌》背後的前端、Google AI 與雲端資料庫是如何聯動的！

《喵語日誌》系統架構剖析

在開發前，我們將系統劃分為三大核心模組：前端展示層、AI 運算層 與 雲端資料與認證層。以下為整體系統架構圖：

▲ 《喵語日誌》端到端系統架構與資料流向圖

架構細節與分層說明：

1. 前端展示層：HTML / CSS / JavaScript

• 職責： 負責 UI/UX 視覺與互動，包含對話介面、照片上傳、情緒圖表與成就卡片。處理使用者輸入並將圖片轉換為 Base64 格式，準備發送給 AI。
• 定位： 採用原生輕量技術，沒有複雜框架的學習成本，能與 AI 協作時用最直白簡單的指令迅速生成介面原型。

2. AI 運算層：Gemini API

• 職責： 接收前端傳送的「文字 + 圖片 Base64」，利用多模態理解能力與預設的 System Instruction 進行語意分析與貓設扮演。
• 定位： 擔任系統的「大腦＋心靈翻譯機」，穩定輸出結構化 JSON（包含情緒指數、生活標籤與貓咪對話回饋），省去前端清洗與拆解文字的負擔。

3. 雲端資料與認證層：Firebase Auth & Firestore

• 職責： Firebase Auth 負責管理使用者身份；Firestore Database 則負責儲存歷史對話紀錄、長期情緒數據與成就解鎖狀態。
• 定位： 提供雲端數據持久化儲存與安全驗證，確保使用者的「喵語宇宙」能隨時同步與復原。

為什麼是 Gemini API 與 Firebase？

選技術棧的核心考量在於：「在 30 天內，用最少的基礎設施成本，換取最穩定的 AI 能力與最順暢的開發體驗。」

1. 為什麼選擇 Gemini API？

• 原生多模態： 支援同時輸入「文字＋圖片」，能完美滿足「拍下加班晚餐隨記 ＋ 抱怨兩句」就能獲取貓咪理解的整合情境。
• 結構化輸出： 可在 System Instruction 定義 JSON Schema，要求 Gemini 穩定回傳 JSON 格式數據，讓前端能直接將 emotion_score 用於繪圖、tags 用於成就分類。
• 與 Vibe Coding 高度契合： 只要在 Prompt 中定義好貓設與格式需求，就能輕鬆透過 AI 完成角色調教與邏輯設計。

2. 為什麼選擇 Firebase 作為後端？

• 無伺服器架構： 免去建置 Node.js / Express 伺服器、伺服器部署與維護 CORS / 金鑰等繁瑣工程，能把全數精力投注在體驗打磨。
• 與 JavaScript 生態系高度契合： 前端幾行 SDK 指令就能完成 Authentication 與 Database 讀寫，對快速迭代開發極為友善。
• 無 Schema 束縛的快速變革： 文件型資料庫彈性極高，開發中途欲新增欄位或擴充成就規則時，前端直接操作即可，無需停機修補後端資料結構。

資料流動全流程解密

以使用者晚上九點拍下冷掉的晚餐、輸入抱怨文字為例，系統背後的傳播路徑如下：

[使用者] ──(1. 上傳文字/照片)──> [前端 Web 介面 (JS)]
                                    │
                         (2. API Request + Prompt)
                                    ▼
                          [Gemini API (Google AI)]
                                    │
                         (3. 回傳 JSON 結構化回應)
                                    ▼
[前端 Web 介面 (JS)] ──(4. 寫入歷史紀錄/情緒數據)──> [Firebase Firestore]
        │
 (5. 渲染畫面)
        ▼
[情緒月曆 / 成就彈窗 / 貓咪氣泡]

Step 1｜使用者上傳文字／照片 → 前端 Web 介面 (JS)：前端抓取文字並將圖片轉為 Base64 打包。

Step 2｜前端發起 API Request ＋ Prompt → Gemini API：將文字、圖片 Base64 與包含貓設的 System Instruction 送出至 Gemini API。

Step 3｜Gemini 回傳 JSON 結構化回應 → 前端 Web 介面：Gemini 理解多模態情境後，回傳包含 emotion_score: 30、tags 與 cat_reply 的 JSON 格式數據。

Step 4｜前端寫入歷史紀錄／情緒數據 → Firebase Firestore：前端渲染對話泡泡後，透過 Firebase SDK 將整筆資料存入該使用者的 Firestore Collection，完成陪伴記錄的持久化。

Step 5｜前端渲染畫面： 前端同步繪製情緒數據曲線、更新月曆標記，若符合條件則彈出解鎖成就卡片。

結語

走到這裡，《喵語日誌》的系統骨架與資料流向已經很清晰了。有了這張穩固的藍圖，不僅能讓後續的程式實作更有條理，也能在接下來的 Vibe Coding 過程中向 AI 給出更精準的模組指令。

當架構與資料流都確定後，明天我們將正式進入 Day 03：【Google AI Studio】為 AI 注入貓咪靈魂！Persona 角色設定與多模態 Prompt 調校，一起動手為這隻貓咪夥伴注入專屬的性格與世界觀！