开发场景由三个环节组成:设计、预览、部署。本文介绍如何部署场景。
部署场景需要你先下载源代码,再本地集成。
下载完毕后解压,你可以看到文件结构如下:
.
├── 101 Physics_fullcode
│ ├── android
│ │ └── CloudClass-Android
│ ├── ios
│ │ ├── CloudClass-iOS
│ │ └── apaas-extapp-ios
│ └── web
│ └── CloudClass-Desktop
└── 101 Physics_styling
├── android
│ └── CloudClass-Android
├── ios
│ ├── CloudClass-iOS
│ └── apaas-extapp-ios
└── web
└── CloudClass-Desktop
101 Physics_fullcode
和 101 Physics_styling
仅为示例文件名,由你的场景名称、下划线、源代码类型组成。
秒搭提供 Android、iOS、Web、Electron 平台的源代码。本节介绍如何在各平台集成全量源代码和样式源代码。
在你的设备上运行灵动课堂依赖于 Git(用于下载源码)、Node.js(用于构建运行项目)、Yarn(源码包管理工具)、Lerna(源码包管理工具)和 nvm(Node.js 版本管理命令行工具)。
你可参考以下步骤准备开发环境:
点击链接前往下载 Git。
点击链接前往下载 Node.js,建议 Node.js 14 或以上版本。
安装 Yarn:
如果你安装了 Node.js 16.10 及以上版本,可使用以下命令直接启用 Yarn(Windows 系统需要管理员身份运行 CMD 执行命令):
corepack enable
如果你安装了 Node.js 16.10 以下版本,需要使用以下命令先安装 Corepack,再启用 Yarn:
npm i -g corepack enable
安装 Lerna:
yarn add global lerna
(可选)安装 nvm:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
通过 Visual Studio Code 打开 fullcode/web
文件夹。
将 web
文件夹下的 .env.example
文件移动至 packages/agora-classroom-sdk
下,并更名为 .env
。
打开 Visual Studio Code 的 Terminal,依次运行如下命令:
yarn
yarn bootstrap
将你的 App ID 和 App Certificate 填写到 .env
文件中如下位置。App ID 和 App Certificate 均为字符串。
REACT_APP_AGORA_APP_ID={your appid}
REACT_APP_AGORA_APP_CERTIFICATE={your app certificate}
在 Visual Studio Code 的 Terminal 中,运行如下命令:
yarn dev
打开浏览器,输入地址 http://localhost:3000, 即可看到你的场景的登录页。输入房间名、用户名,选择一种班型,然后点击加入。
样式源代码不足以集成一个应用项目,仅能修改项目的样式。声网推荐你在如下情况使用样式源代码:
假设你已有的项目或全量源代码叫 CloudClass-Desktop。集成样式源代码修改项目样式的步骤如下:
将样式源代码中的 styling/web/CloudClass-Desktop/packages/agora-classroom-sdk/src/generated/
文件目录下的所有 .ts
类型的文件复制到你已有项目中的 CloudClass-Desktop/packages/agora-classroom-sdk/src/generated/
文件目录下。如果复制过程中存在同名文件,请将样式源代码中的 .ts
文件替代已有项目中的 .ts
文件。
通过 Visual Studio Code 打开 styling/web
文件夹。
打开 Visual Studio Code 的 Terminal,依次运行如下命令:
yarn
yarn bootstrap
确保你的 App ID 和 App Certificate 已填写到 .env
文件中如下位置。App ID 和 App Certificate 均为字符串。
REACT_APP_AGORA_APP_ID={your appid}
REACT_APP_AGORA_APP_CERTIFICATE={your app certificate}
在 Visual Studio Code 的 Terminal 中,运行如下命令:
yarn dev
打开浏览器,输入地址 http://localhost:3000, 即可看到你的场景的登录页。输入房间名、用户名,选择一种班型,然后点击加入。