乐趣区

关于开源:Agora-Flat在线教室的开源初体验

开发者其实很多时候都十分向往开源,开源畛域的大佬也特地多,咱们谈不上有多资深,也是一边摸索一边做。共事,也心愿能够借这次机会把咱们摸索到的一些教训分享给大家。

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 反馈给咱们,大家的交换与想法最终都会转化成开源代码。

退出移动版