智慧云课堂（PaaS 方案）是网易云信提供的在线互动课堂场景解决方案。基于在线教育的常见场景，网易云信提供智慧云课堂开源项目，为您演示 1 对 1、小班课和大班课的典型方案。您可以直接基于网易云信的 Demo 修改适配，也可以参考 Demo，自行集成网易云信 IM SDK、音视频通话 2.0 NERTC SDK 和互动白板 SDK，实现在线教育场景。

本文展示如何编译并运行 Electron 框架的智慧云课堂示例项目，体验各个场景的在线课堂。

下载 Demo

在 GitHub 的 WisdomEducation 示例项目下载 Demo 源码工程。

前提条件

在开始运行示例项目之前，请确保您已完成以下操作：

• 在 网易云信控制台 创建应用，并获取对应的 AppKey。
• 为此应用开通以下相关服务与抄送：

  • 产品服务：音视频通话 2.0、IM 即时通讯、聊天室、信令、互动白板、云端录制、点播。

  • 产品功能：

    • 音视频通话 2.0 的云端录制和抄送功能。
    • 互动白板的文档转码和云端录制功能。

  • 音视频通话 2.0 抄送：1-房间启动、2-房间结束、3-房间录制文件下载信息抄送、4-用户进入房间、5-用户离开房间、8-房间时长抄送。

    • 请在官网首页右侧通过在线消息、微信或电话联系网易云信商务经理，开通相关产品与抄送。
    • 如果仅需要本地跑通示例项目，简单体验智慧云课堂，您可以使用 智慧云课堂体验账号。体验账号已开通相关权限与抄送，课堂时长限制为 30 分钟。
    • 体验账号仅供开发者体验与测试，请勿在线上环境中使用。

开发环境

在开始运行示例项目之前，请确保开发环境满足以下要求：

• 已安装 Node.js，版本号为 12 及以上。推荐使用 14.16.0 及后续版本的 Node.js。
• Electron 5+ 版本。推荐使用 11.4.11 及后续版本的 Electron。
• Windows 7 及以上版本的操作系统，macOS 10.14.6 及以上版本的操作系统。暂不支持 Linux 桌面版。

示例项目结构

Bash├── build                   构建后生成的 web 静态资源文件
├── builder                 构建后生成的 electron 文件
├── app                     electron 相关文件
├── public
├── src                      业务代码
│   ├── assets               资源文件
│   ├── component            组件模块
│   ├── hooks                自定义 Hook
│   ├── lib                  sdk
│   ├── pages                页面
│   ├── services             服务
│   ├── store                mobx
│   └── utils                工具
├── .babelrc                 babelrc 模块
├── .env.development         开发环境变量
├── .env.production          生产环境变量
├── package.json             包管理
└── config-overrides.js      配置文件

运行示例源码

1. 打开您下载的 Demo 项目，在示例项目中配置相关字段。

   如果需要基于 Demo 开发自己的应用，在 .env.development 或 .env.production 中将以下字段改为您的真实信息。

   配置项	说明
   REACT_APP_SDK_APPKEY	应用的 AppKey。可以在网易云信控制台中查看。
   REACT_APP_SDK_AUTHORIZATION	调用服务端接口时，请求头中的校验参数。

   如果仅需要本地跑通示例项目，您可以使用 智慧云课堂体验账号。体验账号的课堂时长限制为 30 分钟。

2. 替换您申请的 https 证书

   JavaScript// Wisdom_Education_Web/config-overrides.js
   const devServerConfig = () => config => {
       return {
           ...config,
           https: true,
           key: fs.readFileSync('请替换为您申请的 https 证书路径'),
           cert: fs.readFileSync('请替换为您申请的 https 证书路径'),
           port: 3001
       }
   }
   

3. 在 Wisdom_Educaiton_Web 目录下，安装依赖并启动项目。

   Bashcd Wisdom_Educaiton_Web
   npm install // 安装依赖
   npm run start-ele // 开发环境
   npm run start:ele-pro // 线上环境
   

4. 构建项目。

   Bashnpm run build:mac-dev // 打包 mac 测试包
   npm run build:win-dev // 打包 win 测试包
   npm run build:mac    // 打包 mac 生产包
   npm run build:win    // 打包 win 生产包
   

常见问题

请参考 常见问题。