2024/01/25 11:27:25

部署场景

开发场景由三个环节组成：设计、预览、部署。本文介绍如何部署场景。

部署场景需要你先下载源代码，再本地集成。

下载源代码

参考如下步骤将源代码下载到本地：

点击下载源代码。
选中你想下载的源代码：
- 下载样式源代码：仅在部分情况下推荐使用，详见集成章节。
- 下载全量源代码：包含样式在内的全量源代码。

下载完毕后解压，你可以看到文件结构如下：

Shell
.
├── 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 平台的源代码。本节介绍如何在各平台集成全量源代码和样式源代码。

前提条件

在声网控制台获取 App ID 和 App 证书。
在声网控制台开通灵动课堂服务。

准备开发环境

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

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

点击链接前往下载 Git。
点击链接前往下载 Node.js，建议使用 Node.js 16 版本，暂不支持 Node.js 18 及以上版本。
安装 Yarn：
- 如果你安装了 Node.js 16.10 及以上版本，可使用以下命令直接启用 Yarn（Windows 系统需要管理员身份运行 CMD 执行命令）：
  Shell
  corepack enable
- 如果你安装了 Node.js 16.10 以下版本，需要使用以下命令先安装 Corepack，再启用 Yarn：
  Shell
  npm i -g corepack enable

（可选）安装 nvm：

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

(可选) 当遇到 Electron 安装失败时，可通过设置 Electron 镜像地址安装

Shell
export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
export ELECTRON_CUSTOM_DIR=v12.0.0
export ELECTRON_CUSTOMDIR=v12.0.0

集成全量源代码

Electron 和 Web 平台的项目均使用 TypeScript 语言开发，因此集成 Electron 平台的全量源代码，你可以使用 fullcode/web 文件夹。

集成步骤如下：

通过 Visual Studio Code 打开 fullcode/web 文件夹。
将 web 文件夹下的 .env.example 文件移动至 packages/agora-classroom-sdk 下，并更名为 .env。
打开 Visual Studio Code 的 Terminal，依次运行如下命令：
1. 安装项目依赖：
  Shell
  yarn
2. 安装依赖包：
  Shell
  yarn bootstrap
将你的 App ID 和 App Certificate 填写到 .env 文件中如下位置。App ID 和 App Certificate 均为字符串。
Shell
```
REACT_APP_AGORA_APP_ID={your appid}
REACT_APP_AGORA_APP_CERTIFICATE={your app certificate}
```
参考以下步骤分别在 macOS 或 Windows 设备上编译你的场景项目：

macOS
1. 在 Visual Studio Code 的 Terminal 中，运行如下命令：
  Shell
  yarn dev:electron
Windows
1. 将 fullcode/web/CloudClass-Desktop/packages/agora-classroom-sdk/package.json 文件中的 "agora_electron" 对象替换成以下内容：
  JSON
  "agora_electron": { "electron_version": "12.0.0", "prebuilt": true, "platform": "win32", "arch": "ia32" },
2. 在 Visual Studio Code 的 Terminal 中，运行以下命令安装 electron 12.0.0：
  Shell
  npm install electron@12.0.0 --arch=ia32 --save-dev
3. 在 Visual Studio Code 的 Terminal 中，运行以下命令编译项目：
  Shell
  yarn dev:electron
编译成功后，你的场景项目会开始运行。

集成样式源代码

样式源代码不足以集成一个应用项目，仅能修改项目的样式。声网推荐你在如下情况使用样式源代码：

当你已有灵动课堂 aPaaS 项目，现在仅需修改样式。
当你已使用秒搭的全量源代码，现在仅需修改样式。

假设你已有的项目或全量源代码叫 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，依次运行如下命令：
1. 安装项目依赖：
  Shell
  yarn
2. 安装依赖包：
  Shell
  yarn bootstrap
确保你的 App ID 和 App Certificate 已填写到 .env 文件中如下位置。App ID 和 App Certificate 均为字符串。
Shell
```
REACT_APP_AGORA_APP_ID={your appid}
REACT_APP_AGORA_APP_CERTIFICATE={your app certificate}
```
参考以下步骤分别在 macOS 或 Windows 设备上编译你的场景项目：

macOS
1. 在 Visual Studio Code 的 Terminal 中，运行如下命令：
  Shell
  yarn dev:electron
Windows
1. 将 styling/web/CloudClass-Desktop/packages/agora-classroom-sdk/package.json 文件中的 "agora_electron" 对象替换成以下内容：
  JSON
  "agora_electron": { "electron_version": "12.0.0", "prebuilt": true, "platform": "win32", "arch": "ia32" },
2. 在 Visual Studio Code 的 Terminal 中，运行以下命令安装 electron 12.0.0：
  Bash
  npm install electron@12.0.0 --arch=ia32 --save-dev
3. 在 Visual Studio Code 的 Terminal 中，运行以下命令编译项目：
  Bash
  yarn dev:electron
编译成功后，你的场景项目会开始运行。

下载源代码​

集成源代码​

前提条件​

准备开发环境​