---
# System prepended metadata

title: Hinagiku 軟體架構

---

Hinagiku 軟體架構
================

1\. 系統概覽
--------

Hinagiku（雛菊）是一個**支援即時語音轉錄、AI 對話輔助與雲端資料儲存／訂閱**的智慧討論平台。使用者可在瀏覽器端取得：

-   **即時 Speech-to-Text**：將會議語音即時轉成文字
-   **AI 教學助理**：根據語音內容與教材，給出引導式回饋
-   **多端同步**：透過 Firestore 訂閱機制，即時看到資料更新
    

---

2\. 架構風格一覽
----------

| 風格 | 角色 / 特點 |
| --- | --- |
| **Client–Server** | 前端（Browser）負責呈現與互動；後端（Server）集中處理商業邏輯與資料庫存取。 |
| **Layered Architecture** | 嚴謹區分：表現層 → 領域層 → 應用層 → 基礎設施層。 |
| **Component-based UI** | 前端採 **Svelte 元件化**，各畫面可重用。 |
| **File-based Routing** | **SvelteKit** 自動將檔案結構映射至路由，減少手動設定。 |

---

3\. 分層細節
--------

### 3.1 表現層（Presentation）

-   **技術**：SvelteKit、TailwindCSS、Flowbite-Svelte、Paraglide (i18n)
-   **重點目錄**
    -   `src/routes/**`：頁面與 API 端點
    -   `src/lib/components/**`：可重用元件
    -   `src/lib/stores/**`：全域狀態
-   **範例**：`+page.svelte` \+ `+server.ts` 配對，前端呼叫 `/api/session/[id]/.../chat` 完成聊天互動。
    

### 3.2 領域層（Domain）

-   **工具**：Zod schema 驗證
-   **位置**：`src/lib/schema/*.ts`
-   **範例**：`ConversationSchema` 定義對話欄位，確保 Firestore 與前端資料一致。
    

### 3.3 應用層（Application）

-   **職責**：協調業務流程，串接 LLM 與資料服務
-   **位置**：`src/routes/api/**/+server.ts`、`src/lib/server/**`
-   **例子**：在 `hooks.server.ts` 進行 **Session Cookie 驗證** \+ **國際化** 統一處理。
    

### 3.4 基礎設施層（Infrastructure）

-   **服務**：Firebase Admin (Auth / Firestore)、Cloudflare R2 (S3 相容)、OpenAI & Gemini API
-   **位置**：`src/lib/server/firebase.ts`、`prompt.ts`…
-   **重點**：集中封裝外部服務，方便日後替換或擴充。
    

---

4\. 核心資料流程
----------

1.  **Browser → Server**：透過 REST API 傳送使用者請求
2.  **Server ↔ Firestore**：讀寫對話、使用者、會議等文件
3.  **Server ↔ R2**：上傳/下載音訊與檔案
4.  **Browser ↔ Firestore (subscribe)**：前端訂閱文件，獲得即時同步

---

5\. 開發工具與部署
-----------

| 類別 | 主要工具 | 備註 |
| --- | --- | --- |
| **建置** | Vite + SvelteKit | 同構開發、SSR/SSG |
| **樣式** | TailwindCSS | 原子化 CSS |
| **國際化** | Paraglide-SvelteKit | 編譯期與執行期 i18n |
| **測試** | Vitest | Firestore mock |
| **品質** | ESLint、Prettier、lint-staged、husky | Commit 階段檢查 |
| **部署** | Dockerfile + docker-compose | Node 22 Slim，多階段建置 |

---

6\. 測試與維運
---------

-   **單元測試**：Vitest 模擬 Firebase 函數，確保商業邏輯正確。
-   **CI 前置檢查**：commit 時自動執行 Lint／Prettier，降低格式與語法錯誤。
-   **容器化**：Docker 保證可攜性；在 `docker-compose.yml` 中配置環境變數與掛載 Service Account。
    

---

7\. 亮點與結論
---------

-   **全端同一框架**：SvelteKit 讓前後端共用 TypeScript 型別，減少溝通成本。
-   **嚴謹分層**：清楚界定責任範圍，有利日後維護與重構。
-   **Schema 驗證先行**：Zod 強制型別約束，避免非預期資料進入系統。
-   **現代 DevOps**：Vite 快速開發、Docker 免裝依賴、Pre-commit 檢查全面保障品質。
-   **擴充彈性高**：外部服務集中於 `src/lib/server`，未來可替換資料庫或多雲端儲存。
