如果你正在尋找一套完整且開放源碼的線上教室／白板系統，Flat 是一個很值得關注的選擇。

Flat 是什麼？

Flat 是 netless‑io / Agora 所維護的一個開源專案，目的是作為 Agora Flat 線上教室 的 Web、Windows 與 macOS 客戶端。
也就是說，Flat 並不是完整的「教室後端」架構，而是用戶端軟體端的實作：你可以把它視為學生／講師端的應用程式，而後端服務（包括音視訊、訊息同步、白板同步、錄製等）則由 Agora 相關服務或配套架構來支撐。

這個架構的好處就是你可以相對容易地替換或整合前端客戶端，而不必從零重寫整套音視訊或同步引擎。

 

核心功能與特色

根據官方 README，Flat 支援的功能蠻全面，以下是整理的重點特色：

功能亮點

  1. 即時互動能力

    • 多功能白板：畫線、塗鴉、圖形、物件操作等

    • 音視訊通話（Real-Time Communication, RTC）

    • 即時訊息聊天（RTM）

    • 畫板與訊息的回放功能

    • 課堂錄製（音／影音錄製 + 雲端儲存）

  2. 課堂管理

    • 支援創建、加入、排課、定期開課等機制

    • 可安排週期性課程（Periodical Rooms）

    • 課堂錄播與回放功能，讓學生可以事後重看課程內容

    • 白板回放 (Whiteboard replay) 與訊息回放 (Messaging replay) 支援

  3. 多媒體／資源支援

    • 雲端儲存課件與多媒體資源

    • 支援螢幕共享功能（screen sharing）

  4. 登入方式與支援平台

    • 用戶可以透過 GitHub 或 WeChat 登入（視服務端允許情況）

    • 客戶端支援 Web 平台、Windows、macOS（Electron 客戶端）

  5. 開發與架構彈性

    • UI 與商業邏輯分離：開發者可以單獨開發 UI 元件

    • 支持 Storybook 組件開發與檢視 (可以線上或本地跑 Storybook)

    • 採用前端生態工具：TypeScript、pnpm、Electron、Web 架構等

    • 授權為 MIT 授權，開源、可商業使用（需注意官方對商業定制的限制）

 

如何啟動 / 使用

以下是簡略的上手流程與注意事項（參考官方 README）：

  • 環境準備
    需要先安裝 pnpm（或先用 npm i -g pnpm 安裝）

  • 下載／安裝套件
    Clone 或 fork 專案後，在根目錄執行 pnpm i 安裝依賴。

  • 啟動 Electron 客戶端
    在專案根目錄下執行 pnpm start 可直接啟動 Flat 的 Electron 版本用戶端。
    若要打包發佈，則可執行 pnpm ship 或 pnpm ship:mac / pnpm ship:win 指定平台打包。

  • 啟動 Web 客戶端
    在根目錄執行 pnpm start:web 或進入 ./web/flat-web/ 資料夾內執行 pnpm start。

  • 組件開發與 UI 檢視
    可執行 pnpm storybook 在本地啟動 Storybook，用於檢視與開發 UI 元件。

 

總結與建議

Flat 是一個功能豐富、在教室／線上教育領域頗具潛力的開源客戶端專案。若你或你的團隊正打算建構一個線上教學平台，Flat 可以作為一塊客戶端骨幹，節省很多 Web / 桌面端的開發成本與時間。

不過，要落實為完整可用的系統，還是要補足後端通訊、錄製、擴充客製化功能等部分。如果你的需求不是太複雜或可以用 Agora 的服務做後端支援，那麼 Flat 很值得納入考量。