腾讯开心鼠 x Cocos ICE：互动课件制作系统的「高端定制」？真香！-CSDN博客

本文链接：https://blog.csdn.net/weixin_44053279/article/details/129570308

今年4月起，腾讯旗下的在线教育平台腾讯开心鼠、与 Cocos 官方推出的互动课件编辑器 Cocos ICE 展开深度合作，在 ICE 的基础上进行二次定制和个性化开发，打造出完美匹配开心鼠内部需求的一个课件制作系统。

在深圳沙龙上，腾讯在线教育部、开心鼠项目组终端开发工程师敖显厅和我们分享了开心鼠与 ICE 的合作过程以及内部课件制作系统的技术实现细节。以下是演讲实录，有节选：

腾讯开心鼠是一个游戏化的教育产品，产品里最核心的内容当属课件。所谓课件，其实就是一个个可交互的小游戏，包括单选、多选、拼图、数独、迷宫等题目类型。从2017年至今，我们已上线了约500+种类的题型，合计10000+个课件。

开心鼠部分课件

今年上半年，我们开始扩科，新增了语文、编程等科目，对课件数量的需求逐步增加，所以我们内部就在考虑：是不是应该孵化一个能够快速生产互动课件的工具，来满足我们科目扩展的需求。

我们希望这个工具能具备以下能力：

首先是易用。这个产品不仅面向研发人员，更是为更是为教研老师和产品同学准备的，面对非研发人员就必须零代码、低门槛、易上手，不能让老师去做编码的工作。

第二是灵活。我们不希望它仅仅是替换一些图片、音频素材，而是能够灵活定制更多内容，比如说可以根据实际需要修改元素的属性、添加动效、支持页面之间的切换效果等。

第三是直观。能够可视化编辑、实时预览、所见即所得。

第四是高效。具备“克隆”课件的功能，让课件能够在不同学科、不同业务之间进行复用。

最后，我们希望它具备一个完整的工作流。拥有多人协作的能力，老师们互相可以看到彼此制作的课件，能够进行修改；并且支持老师能够一键发布到生产环境；提供课件历史版本的管理能力，方便老师查看。

明确了以上这些需求后，我们进行了技术方案调研。

因为开心鼠之前的课件都是用 Cocos Creator 开发的，所以我们很自然地想到：这个课件制作工具是不是也应该基于 Cocos Creator 来开发？调研过程中我们发现，官方已经在有计划地推出一个专门的课件制作工具，也就是 Cocos ICE 互动课件编辑器。我们马上“勾搭”了官方的同学，经过一番讨论之后，我们决定，基于 ICE 进行定制和二次开发，来孵化自己的课件制作系统。

Cocos ICE：全新神器

接下来详细介绍一下 ICE 的功能亮点，这也是我们选择 ICE 的原因。

点击查看丨一图看懂 Cocos ICE 七大特点

互动课件编辑器 Cocos ICE 的核心能力是快速构建高质量的互动课件，并且能够覆盖到多种授课场景，比如说直播课、AI课、趣味互动课等等，还能轻量级嵌入各种第三方解决方案。它既能满足我们制作互动课件的需求，也解决了我们在课件制作工作流上的痛点。

首先，ICE 是一个非常直观的课件制作工具，所有的编辑过程都会直接体现在中央的舞台上，支持随时在多种设备仿真预览制作效果。

其次，因为主要面向的是教学老师，所以 ICE 的上手是非常轻松的，不需要进行编程。ICE 提供了灵活的属性面板设置，老师只需要进行点击、选择等一些简单操作就可以制作课件。另外中央舞台上提供的参考线、网格吸附等功能，都能提高我们制作课件的效率。

此外，ICE 是一个多模式的编辑器，可一键切换研发模式和课程制作模式，研发和老师的环境互相隔离，各司其职。

ICE 是官方基于 Cocos Creator 强大的技术底层打造的，它的研发模式其实就是 Cocos Creator。程序员可以在研发模式下去开发课件的类型和组件，还能将自己之前用积累的一些组件或题型导入进来，不需要重复开发就能实现快速复用。

研发模式

课程制作模式

与此同时，ICE 拥有内容同步功能，程序员新增的逻辑和制作完成的组件或题型会同步在课程制作模式里的素材库。老师们在课程制作模式下，直接可以从素材库里选所需要的素材制作课件，这里的界面是非常类似 PPT 的，老师们几乎不用什么学习成本，就能快速上手、轻松编辑制作互动课件。

互动视频制作模式

值得一提的是，除了研发模式与课程制作模式，ICE 还提供了一个可视化互动视频制作模式，非研发人员通过轻松拖拽，同一时间轴即可轻松融合动画、视频和游戏，多场景模版集成，简单设置即可创作出互动视频。

ICE 还提供了全方位的扩展接口，我们可以很方便地接入自己的内部系统，比如说自己的素材库、题库、课件库等。另外如果我们需要自己进行个性化定制，ICE 也开放了个性化定制的接口。

ICE 组件库

ICE 本身就内置了大量教育行业的常见题型、以及丰富的组件库，都是拿来即用的。ICE 所有的题型和组件都是完全开源的，我们可以很方便地根据自己的需求去做一些修改；而官方增加的题型或组件也会实时同步过来，不需要更新版本就可以一键取用。

二次定制：直击痛点

在分享定制过程前，首先简单介绍一下我们所期望的、针对课件开发流程与课件制作方式的优化，这是我们在定制编辑器时的技术基础。

在早期，我们在课件制作工作流上的痛点是，每个研发人员必须参与到一个课件开发的整个流程中去，这就导致课件开发周期较长，平均一个课件要花6-7天，个别逻辑比较复杂的甚至会达到两周；另外由于大家的开发习惯不一样，代码差别较大，课件的复用性较低。

针对这些问题，我们在定制编辑器时确定了优化方向：共用课件管理模块、课件模板标准化、提取通用组件、业务接口与课件逻辑解耦。

现在来看一下，开心鼠是怎么基于 ICE 编辑器做一些二次定制和个性化开发、孵化出自己的课件制作系统 Solar的。

ICE 与 Solar 框架

首先，我们接入了 ICE 的座席系统。这套账号体系可以针对角色去指定权限，编辑器代码可以获取到当前登录的账号的角色，并做动态的控制。另外我们也接入了腾讯开发账号体系。

其次，我们深度定制了课程广场。我们是自己写了课程广场的页面，然后将 ICE 里面配置的课程广场指向我们自己的页面，并且实现 ICE 封装好的一个课程数据管理接口，此外必不可少的是我们也对接了开心鼠自己的后台课程数据。

基于 ICE 的自定义模板功能，我们重写了 ICE 的属性面板。我们通过 ICE 暴露出来的 @eduProperty 这个标注去组织属性，然后通过扩展 EduElementAbstract 类，把所有的属性包起来后，作为一个属性面板暴露出来。

接管工作流

同时我们全面接管了 ICE 的工作流。ICE 有自己的一套预览和发布的流程，但其实它并不完全满足开心鼠的需求、或者说我们需要在其中插入一些自己的操作。通过 ICE 提供的扩展支持，我们完成了对工作流的接管。比如说预览发布的时候，我们拿到这个事件之后做自己的操作就好了，另外我们还会做一些数据的上传和对接服务器数据的工作。

我们还通过 ICE 的扩展接口，定制了 ICE 的菜单栏和右键的菜单项目来实现自己的一些需求，并在此基础上增加了扩展功能：接入自研插件，制作了课件管理工作流，定制了多种预览方式等。

官方合作：真香

在和官方合作开发的这一百多天时间里，我们逐步实现了上述构想，基于 ICE 编辑器打造的开心鼠自己的课件制作系统 Solar，不但有 ICE 强大的功能支撑，也更加符合我们自己的生产需求。

首先我们解决了题型复用性问题。目前使用 Solar 制作的课件，可以在学科内或跨学科进行复用，甚至可以跨业务复用。没有研发介入，老师可以独立制作课件。另外产品可以自己去生成题型，因为我们有一个题型模板生成功能，老师在制作过程中如果觉得这个课件做得不错，可以把它保存下来作为模板，下次可以直接调出这个模板进行二次制作。

第二，解决了出题灵活性的问题。我们可以调整课件元素的位置、大小等几乎所有属性，还能动态调整一些题目属性，比如说选择题的选项数量等。另外我们还可以针对课件元素去设置正负反馈效果，做一些动效上的的设置，添加页面切换特殊效果。

我们还解决了出题的直观性问题。首先它是实时预览的，所见即所得。另外我们把不同分辨率、不同机型的预览效果都集成到编辑器当中，不同学科的 UI 框架可能是不一样的，我们也给它集成到编辑器里，可以直接在编辑器里看到同一个课件在不同的学科下面是什么样的表现。

可查看不同机型预览效果

最后给大家分享一下跟官方合作的一个感受。如果说一定要用一个词的话，那就只能是只能是“真香”。

我们从四月份开始合作，到现在为止的140多天里，双方团队的沟通记录接近10万条，ICE 团队的啾啾啾同学是今年跟我聊天的次数最多的，远远超过我跟我老婆的聊天记录。另外我们组织了50+次在线会议，共同完成156条需求，官方给我们提交了近20个 ICE 定制版本。接下来我们也将继续与官方的合作，持续优化完善 Solar，非常感谢官方的支持！