跑通示例项目

更新时间: 2024/06/14 09:42:47

智慧云课堂(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 生产包
    

常见问题

请参考 常见问题

此文档是否对你有帮助?
有帮助
去反馈
  • 下载 Demo
  • 前提条件
  • 开发环境
  • 示例项目结构
  • 运行示例源码
  • 常见问题