快速跑通灵动课堂 GitHub 项目

本文介绍如何获取灵动课堂 Web 端 GitHub 源码并运行项目，快速启动并体验灵动课堂。

技术原理

下图展示了启动灵动课堂的基本流程。

当你的 app 客户端请求加入灵动课堂时：

1. 你的 app 客户端向 app 服务端申请 RTM Token。
2. 你的 app 服务端使用声网 App ID、App 证书和用户 uuid 生成一个 RTM Token，返回给 app 客户端。详见生成 RTM Token。
3. 你的 app 客户端调用 API 并传入用户 ID、房间 ID 和 RTM Token 启动灵动课堂。灵动课堂云服务会根据你传入的房间 ID 为该课堂自动创建一个房间。

前提条件

• 在声网控制台开通灵动课堂服务。
• 在声网控制台获取声网 App ID 和 App 证书。
• 推荐安装最新稳定版桌面端 Google Chrome 浏览器。

准备开发环境

在你的设备上运行灵动课堂依赖于 Git（用于下载源码）、Node.js（用于构建运行项目）、Yarn（源码包管理工具）、Lerna（源码包管理工具）和 nvm（Node.js 版本管理命令行工具）。

你可参考以下步骤准备开发环境：

1. 点击链接前往下载 Git。

2. 点击链接前往下载 Node.js，建议 Node.js 14 或以上版本。

3. 安装 Yarn：

   • 如果你安装了 Node.js 16.10 及以上版本，可使用以下命令直接启用 Yarn（Windows 系统需要管理员身份运行 CMD 执行命令）：

       corepack enable

   • 如果你安装了 Node.js 16.10 以下版本，需要使用以下命令先安装 Corepack，再启用 Yarn：

       npm i -g corepack enable

4. 安装 Lerna：

    yarn add global lerna

5. （可选）安装 nvm：

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

   获取源码

灵动课堂 Web 端的源码位于 GitHub flexible-classroom-desktop 仓库，你可参考以下步骤获取源码：

1. 运行以下命令克隆仓库到本地：

   git clone https://github.com/AgoraIO-Community/flexible-classroom-desktop.git

2. 运行以下命令进入 flexible-classroom-desktop 目录并切换分支至指定版本。将 {VERSION} 替换为要切换的版本号：

   cd flexible-classroom-desktop

   git checkout release/{VERSION}

   例如要切换到 2.8.20 版本分支，执行以下命令：

   git checkout release/2.8.20

   声网建议你切换到最新发版分支。参考下图在 GitHub 仓库中查看最新发版分支：
   

3. 运行以下命令拉取子模块：

    git submodule update --init --recursive packages/agora-classroom-sdk
    git submodule update --init --recursive packages/agora-proctor-sdk
    git submodule update --init --recursive packages/agora-plugin-gallery

启动灵动课堂

按照以下步骤启动灵动课堂：

1. 运行以下命令安装项目依赖：

    # 安装项目依赖
    yarn

   如遇安装依赖超时，请切换到淘宝镜像源或其他可用镜像源。

    # 切换到淘宝镜像
    yarn config set registry https://registry.npmmirror.com/
    # 安装依赖
    yarn

2. 运行以下命令安装依赖包：

    yarn bootstrap

3. 将项目根目录下的 .env.example 文件重命名为 .env：

    mv .env.example .env

4. 将你的 App ID 和 App Certificate 填写到 .env 文件中指定位置：

    REACT_APP_AGORA_APP_ID={your appid}
    REACT_APP_AGORA_APP_CERTIFICATE={your app certificate}

   为方便你快速测试，flexible-classroom-desktop 项目中已包含一个临时 RTM Token 生成器，会用你传入的 App ID 和 App 证书生成一个临时 RTM Token。但是在正式环境中，为确保安全，Token 必须在服务端生成。

5. 运行以下命令以开发模式启动灵动课堂 Web 端：

    yarn dev

   如果使用 Node.js 17 版本，可能会遇到 ERR_OSSL_EVP_UNSUPPORTED 错误，这是因为 Node.js 17 版本已切换到 OpenSSL 3.0 并且和项目中某些依赖中正在使用的加密算法或密钥有冲突，可以尝试以下两种解决方案:

   • 添加 NODE_OPTION 参数 --openssl-legacy-provider

     # 找到 Node.js 配置文件 packages/agora-demo-app/package.json
     # 为修改 script 字段下的启动命令，添加 NODE_OPTION 参数，例如：
     
     # 原命令
     "dev": "cross-env NODE_ENV=development NODE_OPTIONS=--max_old_space_size=6144 webpack serve --config ./webpack/webpack.dev.js"
     # 改为
     "dev": "cross-env NODE_ENV=development NODE_OPTIONS=\"--max_old_space_size=6144 --openssl-legacy-provider\" webpack serve --config ./webpack/webpack.dev.js"
     # 然后启动项目
     yarn dev

   • 使用 nvm 将 Node.js 版本降级到 16

     # 使用 nvm 管理 Node.js 版本
     # 安装 nvm
     yarn global add nvm
     # 使用 Node.js 16 版本
     nvm use 16
     # 启动灵动课堂
     yarn dev

6. 打开浏览器，输入地址 http://localhost:3000，即可看到灵动课堂的 Demo 首页。点击加入房间或创建房间开始体验灵动课堂。

后续步骤

现在你已经初步体验了灵动课堂的功能，接下来可将灵动课堂集成到你自己的项目中。