如何快速搭建一个简约美观的在线互动教室？

大家好，我是TJ

一个励志推荐10000款开源项目与工具的程序员

这两年，随着疫情的出现，很多人的生活习惯都被逐渐改变了。例如在十年前，很多人说起上课、说起开会，一定是要面对面才能完成的事情，但是如今更多的都是云教室、在线会议，TJ君当然要与时俱进，今天跟大家分享一个功能强大的前后端完全开源的简约美观的互动教室项目

Agora Flat

Agora Flat，支持MAC、WONDOWS不同平台，并且有手机版、电脑版、网页版各种不同的实现形式。可以轻松创建丰富多样的在线互动房间，实现多场景灵活切换，完成高质量的互动，例如教学或开会。

特点

既可以用于大型多人授课或会议，由主持人进行课程或会议的讲解，参加者举手发言在线互动；又可以进行一对一的私人定制化互动。

同时项目内置多种经过专业设计的精美主题，无需专业设计经验就可以使用各种不同效果的UI风格。

（效果图来自官方网站）

语言与功能

项目主要实现部分都是运用TypeScript语言进行实现，辅以小部分的JavaScript、HTML、Less。

截至目前为止主要已实现的功能有：

• 实时交互
• 多功能互动白板
• 实时音视频（RTC）通讯
• 即时消息（RTM）聊天
• 帐户系统
• 微信登陆
• GitHub 登陆
• 房间管理
• 加入、创建、预定房间
• 支持周期性房间
• 课堂录制回放
• 白板信令回放
• 音视频云录制回放
• 群聊信令回放
• 多媒体课件云盘
• 屏幕共享

尤其是微信登陆这一点，TJ君感觉使用起来还是非常方便的，想学习这方面登录编码技巧的小伙伴也可以引以为鉴。

从项目的更新频率我们也可以看到每个月几乎都有至少一个版本，这对我们不管是使用还是学习都是一个好消息。

项目安装

yarn run bootstrap

如果有小伙伴因为网络问题导致无法下载 electron，可以在项目目录新建: .yarnrc 文件，并直接写入electron_mirror "https://npmmirror.com/mirrors/electron/"内容，然后重新执行yarn run bootstrap就可以了。

试用效果

FLAT登录后，可以看到画面风格还是偏向简约的

目前项目自带的房间类型主要有三种，分别是大班课、小班课、一对一，如下图

总结

TJ君觉得大可以开拓思路，FLAT不止可以用于仅仅面向学生的教室，例如公司里的培训、各种会议、父母出差不在小孩身边时的功课监督等等，都可以运用一下，不能将思路局限于某个局部。

让TJ君觉得比较加分的是它的开源代码里面的文档非常详细，例如每个版本的优化项，都有中英文两个版本来进行介绍：

其余包括环境变量、如何debug调试也都有对应的文档指导。

对于想学习类似项目的小伙伴来说，绝对是个小宝藏，感兴趣的小伙伴，赶紧来下载体验或学习吧：

点击下方卡片，关注公众号“TJ君”

回复“FLAT”，获取仓库地址

关注我，每天了解一个牛x、好用、有趣的东东

往期推荐