声网Agora 教育 aPaaS 灵动课堂升级:UI与业务逻辑分离,界面、功能自定义更灵活

声网Agora 教育 aPaaS 产品灵动课堂现已升级至 v1.1.0 版本。声网Agora 灵动课堂可以帮助教育机构和开发者最快 15 分钟上线自有品牌、全功能的在线互动教学平台,节省 90% 开发时间。灵动课堂自 1 月 20 日发布,截至 3 月 31 日注册用户数超 1000 家,支持的课堂数量超过 50 万/月,全球覆盖学生数累计超过 400 万。

在新版本的灵动课堂中,我们针对此前“UI 不易于修改”的问题,将 UI 代码与业务逻辑隔离,并提供 UI Kit ,从而能让开发者可以更容易地修改、添加 UI 控件。既保证了低代码开发,又提供了更高的自定义灵活度。

同时,为了让大家可以替换、添加灵动课堂的一些功能模块,甚至针对自身业务需求增加功能模块,我们还增加了自定义插件功能,即 ExtApp。你可以像搭积木一样,将自己实现的一些课堂功能,比如倒计时、抢答等,加入灵动课堂。

接下来我们来详细讲讲 v1.1.0 版声网Agora 灵动课堂的新功能与优化。

课堂 UI 自定义更灵活

在新版本的 UI 方面,我们做了两项升级。首先,我们重新设计了三套针对 1 对 1 互动教学、在线互动小班课、互动直播大班课场景的 UI。开发者可以直接使用,部署上线。同时,我们还将 UI 代码与核心业务逻辑隔离开,提供了 UI Kit,让开发者可以在此基础上修改出更符合自身品牌调性的界面。

在基于 UI Kit 修改 UI 时,开发者无需了解灵动课堂的核心业务逻辑,只需基于我们提供的 UI Kit 简单修改 UI 组件,就可以调整界面的颜色、菜单栏大小、图标和按钮的位置等各功能模块的 UI。在 agora-classroom-sdk 下的 ui-components 目录中,包含了所有 UI 组件的组合规则, 你还可以在这里加入其它 UI 组件, 或调整整体布局。

如下图所示,是灵动课堂的默认 UI。

经过自定义修改后,课堂界面可呈现完全不同的风格。如下图所示。

用 ExtApp 灵活扩展课堂功能

本次更新中,我们进一步开放了灵动课堂的底层代码,提供了 ExtApp 自定义插件。你可以将 ExtApp 理解为灵动课堂的补充插件,能够帮助开发者根据实际需求,在灵动课堂以插件形式嵌入自己实现的功能模块。每个 ExtApp 都有自己独立的生命周期和数据管理。

例如,在课堂中,老师希望可以让学生在规定时间内解题,那么你就需要在课堂中加入一个倒计时功能。这个“倒计时”就可以作为一个插件,嵌入到 Agora Classroom SDK 中。

具体实现步骤有三步:首先,需要继承 AgoraBaseExtApp 类,在你的 App 中实现一个自定义插件,在 AgoraExtAppBase 类中包含了初始化插件、更新属性等方法,具体可参见文档。

第二步,实现插件之后,就可以注册插件了。需要调用 AgoraEduSDK.registerExtApps 方法,将该插件注册到 Agora Classroom SDK 中。以我们刚刚说的倒计时插件为例,以下示例代码演示了如何注册一个倒计时插件 CountDownExtApp:

// appIdentifier: 插件 ID,将用于标识插件,不同平台的相同插件必须使用同一 ID。
// extAppClass: 容器 App Class Type, 由 SDK 创建该类的实例。
// frame: 插件容器的大小,代表距离底层视图的间距。底层视图由 Classroom SDK 生成(不包含安全区域)。
// language: 容器语言,Classroom SDK 会透传该变量到具体插件容器中,这样容器可以自己设置多语言。
let countDown = AgoraExtAppConfiguration(appIdentifier: "io.agora.countdown",
                                         extAppClass: CountDownExtApp.self,
                                         frame: UIEdgeInsets(top: 10,
                                                            left: 50,
                                                          bottom: 10,
                                                           right: 50),
                                                        language: "zh")


// 插件图标,用于在 UIKit 层设置,默认会在白板工具栏的工具箱弹窗里显示。
countDown.image = image
countDown.selectedImage = selectedImage
let apps = [countDown]
AgoraEduSDK.registerExtApps(apps)

完成第二步之后,这个倒计时就会成为 Agora Classroom SDK 的一个插件。

最后一步,就是启动插件。

默认情况下,成功注册的插件会显示在灵动课堂白板工具栏的工具箱弹窗里显示。如果你想要为该插件自定义一个入口,你可修改我们在上文提到的 UI Kit 模块的相应文件,在灵动课堂三大场景中为该插件添加一个入口,然后在点击或者显示该插件时调用以下方法即可。

// 在 willLaunchExtApp 方法中传入插件 ID。
extAppContext?.willLaunchExtApp(appIdentifier)

目前我们在示例代码中,提供了倒计时功能插件的例子,可在声网文档中心,搜索「灵动课堂」,查阅详细文档获取。

新增页面录制,所见所录即所得

在线教育场景中,课程录制是绝对的刚需功能。声网在今年 2 月上线了页面录制服务,可将音视频、白板、课件以及聊天信息等内容全部同时录制下来,且不带来额外的带宽、性能开销,录制过程不影响任何主播/观众的 RTC 互动体验。而且录制结束后,可以实时生成 MP4 文件,兼容主流播放器。

灵动课堂 v1.1.0 新增支持页面录制,能够将指定 URL 的页面内容和音频混合录制为一个 MP4 音视频文件,实现音视频内容、白板内容、课件内容同步录制。开发者可通过灵动课堂云服务 RESTful API 配置并发起页面录制,详见声网文档中心,搜索「灵动课堂云服务 RESTful API」。

新增课件管理

为提升课堂学习效果,灵动课堂 v1.1.0 新增课件模块。老师可通过灵动课堂客户端上传 PPT、DOC、PDF 等格式的文件。灵动课堂客户端会对后缀名为 “ppt”、“pptx”、“doc”、“docx”、“pdf” 的文件默认开启文件转换,以用于课堂内白板展示。开发者还可通过灵动课堂云服务 RESTful API 配置并上传文件至云盘,并获取课堂内云盘文件变更事件,详见声网文档中心,灵动课堂云服务 RESTful API。

在 v1.1.0 灵动课堂中,上传至云盘的文件默认储存在 Agora 的阿里云 OSS 账号中。如开发者想要将文件存储至自己的 OSS 账号中,需要更新 Agora 控制台 aPaaS 配置中的白板 JSON 配置对象,详见灵动课堂前提条件中在 Agora 控制台配置灵动课堂一节。

v1.1.0 还支持课件预加载。在 Agora Classroom SDK 的 launch 方法中新增 courseWareList 和 personalCourseWareList 字段,用于预加载教育机构指派的和老师端上传的课件。成功调用后,客户端会将云盘中的课件缓存至本地。详见声网文档中心, Agora Classroom SDK API。

除此之外,声网Agora 教育 aPaaS 灵动课堂 v1.1.0 还新增了用户列表、课堂奖励、点名上台、课堂状态等新功能,详情可点击「阅读原文」了解。

灵动课堂依托声网Agora 自研的软件定义实时网 SD-RTN™ ,基于深度学习算法实时、准确识别网络异常,实现用户“零感知”故障切换机制,可为业务高可用保驾护航。同时,我们还针对东南亚、中东、北美等外教所在国和国内中小城市,做到专属网络优化,端到端优质传输率高于 99%。我们在后续的产品迭代中,还将为灵动课堂增加更多功能,提供更好的开发灵活度。如果各位开发者有任何针对灵动课堂的功能需求,欢迎访问 rtcdeveloper.com 发帖留言与我们交流。