声网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 发帖留言与我们交流。
声网Agora 教育 aPaaS 灵动课堂升级:UI与业务逻辑分离,界面、功能自定义更灵活的更多相关文章
- 【React Native】集成声网Agora语音通讯
前言: 公司的产品是一款基于社交的内容聊天软件,需要集成语音通讯功能,在写iOS原生项目时,用到的就是Agora SDK,现在写React Native也直接采用了Agora的库. 集成iOS.And ...
- 【征文活动】为自己发“声” —— 声网RTC征文大赛在园子里征稿
2020年8月20日,声网Agora入驻园子的新楼盘--博客园品牌专区.9月,我们与声网Agora再度合作,「为自己发"声"- RTC 征文大赛」在园子里征稿. RTC(Real- ...
- Android实战:手把手实现“捧腹网”APP(三)-----UI实现,逻辑实现
Android实战:手把手实现"捧腹网"APP(一)-–捧腹网网页分析.数据获取 Android实战:手把手实现"捧腹网"APP(二)-–捧腹APP原型设计.实 ...
- 私人网盘系统2.0—全部升级为layUI+PHP(持续更新中)shang
网盘系统2.0 上周,我做了第一版的“私人网盘系统”,http://www.cnblogs.com/sunlizheng/p/7822036.html 没看过的朋友可以去看一下,这周在家升级做了第 ...
- 分针网—IT教育: jquery选择器的用法
jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...
- 分针网—IT教育: Html / CSS常见问题的解决方案
1. 解决Safari下input光标过大 2. 设置浮层 3. CSS绘制三角形 4. 清除浮动 1) 浮动元素父级添加样式 2) 父元素后添加伪元素 3) 同样可以使用 ...
- 分针网—IT教育:作为PHP开发人员容易忽视的几个重点
无论是学习什么样的一个开发.ASP开发.java开发.当学习还不是很久的时候,一般都是不知道它们的精华是在哪里,而现在很多的php程序员也是不知道PHP的精华所在,为什么perl在当年在商界如此的出名 ...
- 分针网—IT教育:使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的.本次分享的主题: ...
- 分针网—IT教育:调皮的JavaScript
JavaScript是一门有趣的语言,不仅有趣而且调皮,不同的内核的浏览器在解析的时候表现会有些差异,今天主要是抛砖引玉,和大家一起讨论一些在实际开发中比较常见但同时可能并没有过于在意的JavaScr ...
- 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-1.数据信息安全--微信授权一键登录功能介绍
笔记 1.数据信息安全--微信授权一键登录功能介绍 简介:讲解登录方式优缺点和微信授权一键登录功能介绍 1.手机号或者邮箱注册 优点: ...
随机推荐
- 你不知道的JavaScript--作用域
用简单的代码 展示代码的魅力 1.在浏览器里,在全局范围内,this等价于windo ...
- 【shell脚本实战】脚本#35 分析每个用户使用的磁盘空间大小
#!/bin/bash #设置 一个变量代表临界值,看看是否能超过这个值,单位是MB MAXDISKUSAGE=20000 #cut -d: -f1,3 /etc/passwd | awk -F: ' ...
- Flutter showModalBottomSheet 自适应高度
showModalBottomSheet( context: context, shape: const RoundedRectangleBorder( borderRadius: BorderRad ...
- 【alive-progress】Python控制台输出动态进度条
简介 alive-progress是一种具有实时吞吐量和非常酷的动画新型的进度条python库. 使用 from alive_progress import alive_bar import time ...
- ActiveMQ的基本使用
优点:消息中间件主要解决了各个模块异步调动问题,解除了模块之间的耦合,提高了运行的性能.一.点对点方式生产者1.创建连接工厂ActiveMQConnectionFactory 基于TCP协议Activ ...
- .net core 接收并存储客户端上传的文件
1 文件是上传到Host,非上传到阿里云OSS 2 在Program.cs或StartUp中使用静态文件的中间件 public void Configure(IApplicationBuilder a ...
- python3GUI--在线小说播放器By:PyQt5(附ui源码)
目录 一.准备工作 1.PyQt5 2.qtawesome 3.QMediaPlayer 4.LAVFilters 二.预览 1.启动 2.查看小说详情&播放小说 3.搜索后播放 4.动态演示 ...
- 许可协议 :GPL、BSD、MIT、Mozilla、Apache和LGPL
原文摘自:https://blog.csdn.net/testcs_dn/article/details/38496107 首先借用有心人士的一张相当直观清晰的图来划分各种协议:开源许可证GPL.BS ...
- Typora 基本功能
Typora 基本功能 typora 下载官网:https://www.typora.io/ "安装到C盘" 基本使用 1.该文件后缀 .md2.六级标题 :ctrl+ ...
- 实验一Linux系统与应用准备
实验一Linux系统与应用准备 |这个作业属于哪个课程|内容| | ---- | ---- | ---- | |这个作业属于哪个课程|2021春季Linux系统与应用 (南昌航空大学 - 信息工程学院 ...