Agora Flat:線上教室的開源初體驗

語言: CN / TW / HK

開發者其實很多時候都非常向往開源,開源領域的大佬也特別多,我們談不上有多資深,也是一邊探索一邊做。同時,也希望可以借這次機會把我們摸索到的一些經驗分享給大家。

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 或者郵箱 [email protected] 反饋給我們,大家的交流與想法最終都會轉化成開原始碼。