開發者其實很多時候都非常向往開源，開源領域的大佬也特別多，我們談不上有多資深，也是一邊探索一邊做。同事，也希望可以借這次機會把我們摸索到的一些經驗分享給大家。
01 Flat 是什麼
Flat 是一個實用、誠意的開源教室。實用體現在產品是基於各種成熟的雲服務搭建的，具備可以直接用於實際業務的能力，它不是一個玩具。誠意體現在我們不綁死特定的雲服務，包括我們自己。開發者可以替換掉一些元件，既可以使用聲網Agora 的實時音視訊服務，也可以使用 WebRTC。
圖：Flat 大班課
因為 Flat 是面向開發者的，所以我們必須先說一下我們到底是在哪一層做的開源，在哪一層用的哪些 SDK，避免大家有誤會說“這又是一個核心全部都封裝好的開源”？這絕對不會是我們專案的初衷。
圖：Flat 開源結構圖
綠色部分代表程式碼完全開源，包括 Web、Mac、Windows、Android、iOS、Pad、iPad 各端都是開源的。包括基於白板 SDK 封裝的一些中介軟體也是開源的，比如 Window manager 是用來管理視窗課件，比如課件的最大化、最小化；Netless app 用來擴充課堂外掛，比如程式碼編輯器、數學公式；Sync player 是用來把多個視訊對齊播放。其實做一個完整的應用，除了底層的 SDK 還有很多事要做，其實挺費勁的。
藍色部分是使用者可選的第三方服務，可以用自研，也可以用任何一家服務提供商，Flat 預設使用的是聲網自己的服務。
橙色部分是白板本身提供的服務，因為 Flat 很多細節都是圍繞我們白板設計的，所以客觀上替代會有一定的難度。
02 為什麼要做 Flat
我們做的是線上互動白板，服務了很多做教育的客戶，最開始我們想的就是用自己的 SDK 做一遍線上教室，我們也經歷一遍客戶所經歷的，來幫助我們深刻理解做這個場景的難點和痛點。
其次我們自己在日常工作中也會使用到 Flat，比如開早會、內部分享，這樣一來我們可以在不同的場景、時間與空間中體驗我們自己的專案，切身體會一下產品使用起來的感受，才能更明確地知道產品哪裡好用、哪裡不好用？進而更好地去優化我們的 SDK。
我們自己用起來比較滿意了可以開放出來給他人使用，作為一個提高傳遞知識效率的教學工具，也算為社群做一些小小的貢獻。
03 我們遇到了哪些技術挑戰
在專案開發的過程中我們當然也會遇到一些設計上、技術上、產品上的挑戰，並且將這些我們遇到的問題以及如何解決的詳細情況都放到了 GitHub上，感興趣的開發者可以前往檢視詳細的原始碼和文件：https://github.com/netless-io/flat。
這裡可以簡單給列舉幾個我們遇到的比較典型的挑戰：
第一個是視窗外掛系統的設計，專案地址：https://github.com/netless-io/window-manager 。
教育領域開發者，最常遇到的問題是：在多端的情況下要保持可視區域一致。比如教師 PC 端和學生端（如手機）的一致性。我們認為保持多端一致性並沒那麼簡單，要處理好至少三個問題：
1.視窗外框可拖動區域一致；
2.視窗內部展示內容一致；
3.視窗 Title Bar 恆定高度。
我們是用一種可以動態填充調整內外框的方案來解決這個問題的，想了解具體內容可以通過上方連結來檢視具體實現。
圖：視窗外掛
第二個是組合回放的實現，專案地址：https://github.com/netless-io/sync-player 。
組合回放的優勢有高清、低成本、可互動。多個媒體資源和白板同步播放，通過遞迴方案簡化同步模型。各個瀏覽器播放視訊的行為各不一致，即便使用了 video.js 這樣的庫，播放時產生的事件與時機也是各不相同，這裡我們使用不同的轉接方式來抹平差異（video.js 抹平的是介面，組合播放器抹平的是行為）通過狀態機同步兩個播放器狀態，同時將兩個播放器的狀態統一後作為一個播放器。
圖：組合回放
第三個是 UI 和邏輯分離，Flat 的 Storybook 地址：https://netless-io.github.io/flat。
產品和設計需要反覆修改和嘗試才能獲得靈感，技術需要確定的需求才能穩定產出，如何平衡這對矛盾。最好能做到：
1.前端和後端並行開發，不用相互等待；
2.設計師和產品可以無負擔修改 UI。
我們通過把產品的 PRD 嚴格對映到 Storybook，產品、設計也可以很方便的模組化調整 UI、處理邊界情況，這樣既不影響產品、設計反覆調整 UI，研發又可以接收到相對穩定的需求。
圖：Flat Storybook
Flat 在開發過程中，用到了很多來自社群的技術，同時我們也對社群進行了一些“反哺”：例如協助 Firefox、Electron、Electron-devtools-installer、Axios、Mobx、Lens、Vscode、Vite、Scratch 修復了一些 bug；協助 Electron-builder、Helm-kubectl、AvaJavaScriptTestRunnerRunConfigurationGenerator 支援了一些新功能。我們崇尚開源精神，也相信只有擁有開源精神的技術人才能真正做好開源專案，這樣開源才可以真正地持續、持久地發展。
因此，大家在給我們提 PR 的時候也不要有任何負擔，因為就算是幫助我們修正了一個拼寫錯誤，我們也會很認可、很開心，這樣的 PR 也是很有意義的。
04 後續的專案規劃
做開源發起專案很快，但要堅持長期打磨和維護一個專案其實是不容易的，很多前期不錯的專案都“夭折”在了途中。為了避免“開坑容易守坑難”的情況， Flat 需要給社群一個預期，方便大家未來更好地使用。我們把接下來計劃做的事情都列在了 GitHub 上，大家也可以隨時進行檢視 https://github.com/netless-io/flat/projects。
後續的規劃大概分三個方面：
第一個是全客戶端的支援。目前 Flat 在 Web、Mac、Windows、Android 端都是可以正常使用的，接下來我們會優先補齊 iOS、Pad、iPad 端的能力。
第二個是豐富外掛生態。說到生態，我們的思路是這樣的，首先我們會自己先衝進去，把圍繞教育場景我們能想到的實用外掛都實現一遍，而不是坐等開發者幫我們提程式碼。
外掛大概分為兩類，教學通用外掛，比如計時器、答題器、隨機選人、簽到等，這些小外掛可以大大豐富課堂的趣味性和互動性。
高階外掛包括很多類，程式設計教學，比如 Scrach、程式碼編輯器；數學教學，比如 Geogebra；少兒識字，比如互動性比較好的 Cocos H5 課件；目前有些外掛已經整合到 Flat 裡了，大家可以去體驗一下。
未來還會去整合美術類、音樂類等素質教育場景下會用到的工具。以及一些效率類的實用工具，比如說流程圖、思維導圖，和朋友一起線上頭腦風暴、協作，這些效率工具其實很重要。
圖：Flat 多視窗外掛
以上我們自己寫的外掛也將會全部開源。程式碼開源意味著這個產品有了生命力，它可以不受我們的限制，社群的開發者有什麼想法都可以自己去實現。比如說你想做一個多人線上互動小遊戲，你可以基於 Flat 做一個線上下象棋的外掛，甚至可以和朋友一起線上你畫我猜。
然後這裡想補充一點，就是我們用到了外部的開源專案，或者開發者幫助我們開發了外掛，假如作者有收費的意願，我們也很希望可以去幫助這些作者變現他們的貢獻。
第三個是推出持續整合和運維工具。如果使用者要方便的開發構建、快速迭代，或者需要選擇性配置，都需要強大的 CI/CD 工具來支援。 這也將是我們未來努力的一個方向，而現在我們還是專注地去把前兩個點做好，這個我們先列在這裡，後面一定會去做。
05 Flat 現在做的怎麼樣
目前 Flat 開源教室已經發布了多個版本，支援的功能有多人線上白板互動、音視訊互動、聊天互動、課程錄製回放、多媒體課件雲盤、螢幕共享等，個人使用者可以直接通過微信、GitHub 登入，登入成功後就可以方便地加入、建立、預定房間。
目前我們仍然在持續優化產品體驗，我們希望 Flat 可以成為個人教師線上上課首選的教學工具。同時社群開發者也可以參考我們的原始碼快速搭建自己的線上教室。
前段時間在社群關於 Flat 的討論有不少使用者參與，有給我們提建議的，也有人對我們表示支援。Flat 在社群開發者的支援下，衝上了 GitHub Trending 總榜的第三，目前 Flat 在 GitHub 上的關注度已經接近 3000。來自於社群的積極反饋，讓我們更加相信我們做的事情是有價值的。我們會持續優化 Flat 產品體驗，讓大家使用起來更加順暢。
最後放一下 Flat 開源專案地址，歡迎大家體驗：https://github.com/netless-io/flat。
如果大家有產品使用反饋和建議，可以通過 GitHub issue 或者郵箱 flat@agora.io 反饋給我們，大家的交流與想法最終都會轉化成開原始碼。