# 加入白板房间 (/zh-CN/realtime-media/whiteboard/fastboard-sdk/get-started/join-room-fb/ios)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

声网互动白板房间提供丰富的编辑工具，支持展示静态图片、动态 PPT、H5 课件等多种格式的文件，不同终端用户能在白板上实时展示想法，轻松实现多人互动协作。

本文介绍如何建立一个简单的项目，使用声网互动白板 SDK 加入房间并实现基础的白板功能。

## 技术原理 [#技术原理-1]

下图展示了加入声网互动白板房间的基本流程。

<DocsImage alt="互动白板快速开始流程图" src="https://web-cdn.agora.io/docs-portal/img/whiteboard/quick-start.svg" displayWidth="80%" />

当你的 App 客户端请求加入互动白板房间时：

1. 你的 App 服务端使用 SDK Token 向声网互动白板服务端发起创建房间的请求。
2. 成功创建房间后，声网互动白板服务端向你的 App 服务端返回新建房间的房间 UUID。
3. 你的 App 服务端使用房间 UUID 生成 room Token，并将房间 UUID 和 room Token 发送给 App 客户端。
4. App 客户端使用从声网控制台获取的 AppIdentifier 初始化互动白板 SDK 实例。
5. App 客户端调用 SDK 的方法并传入房间 UUID 和 room Token 以加入互动白板房间。

## 前提条件 [#前提条件-1]

- Xcode 10+
- iOS 12.0+
- CocoaPods [最新版本](https://cocoapods.org/)。
- 有效的声网[开发者账号](/zh-CN/introduction/quickstart#注册账号)。
- 已在声网控制台[开启互动白板服务](/zh-CN/realtime-media/whiteboard/fastboard-sdk/build/setup-and-access/enable-service)并获取[白板项目的 AppIdentifier 和 SDK Token](/zh-CN/realtime-media/whiteboard/fastboard-sdk/build/setup-and-access/enable-service#获取互动白板项目的安全密钥)。

<a id="createroom"></a>
## 服务端实现 [#服务端实现-1]
### 1. 创建房间 [#1-创建房间-1]

调用互动白板服务端 RESTful API 创建一个房间。详见[创建房间（POST）](/zh-CN/api-reference/api-ref/whiteboard/restful/create-room)。

**请求示例**

你可以使用以下 Node.js 脚本发送请求：

:::info[信息]
使用 Node.js 发送 HTTP 请求前安装 `request` 模块。你可以运行 `npm install request` 安装。
:::

```javascript
var request = require("request");
var options = {
  "method": "POST",
  "url": "https://api.netless.link/v5/rooms",
  "headers": {
    "token": "你的 SDK Token",
    "Content-Type": "application/json",
	"region": "cn-hz"
  }
};
request(options, function (error, response) {
  if (error) throw new Error(error);
  console.log(response.body);
});
```

如果方法调用成功，声网互动白板服务端将返回新建房间的信息，其中的 `uuid` 是房间的唯一标识，App 客户端加入房间时需要传入该参数。

**响应示例**

```json
{
    "uuid": "4a50xxxxxx796b", // 房间的 UUID
    "teamUUID": "RMmLxxxxxx15aw",
    "appUUID": "i54xxxxxx1AQ",
    "isRecord": true,
    "isBan": false,
    "createdAt": "2021-01-18T06:56:29.432Z",
    "limit": 0
}
```

<a id="roomtoken"></a>
### 2. 生成 Room Token [#2-生成-room-token-1]

创建房间并获取新建房间的 `uuid` 后，你需要在 App 服务端生成 Room Token 并下发给 App 客户端。当 App 客户端加入房间时，声网互动白板服务端会使用该 Token 对其鉴权。

你可以通过以下方式在 App 服务端生成 Room Token：

- 使用代码生成 Room Token，详见[在 App 服务端生成 Token](/zh-CN/realtime-media/whiteboard/fastboard-sdk/build/setup-and-access/generate-token#在-app-服务端生成-token)。（推荐）
- 调用互动白板服务端 RESTful API 生成 Room Token，详见[生成 Room Token（POST）](/zh-CN/api-reference/api-ref/whiteboard/restful/generate-room-token)。

下面以调用 RESTful API 的方式为例介绍如何生成 Room Token。

**请求示例**

你可以使用以下 Node.js 脚本发送请求：

:::info[信息]
使用 Node.js 发送 HTTP 请求前安装 `request` 模块。你可以运行 `npm install request` 安装。
:::

```javascript
var request = require('request');
var options = {
  "method": "POST",
  // 将 <房间的 UUID> 替换成你的房间 UUID
  "url": "https://api.netless.link/v5/tokens/rooms/<房间的 UUID>", 
  "headers": {
    "token": "你的 SDK Token",
    "Content-Type": "application/json",
	"region": "cn-hz"
  },
  body: JSON.stringify({"lifespan":3600000,"role":"admin"})
  
};
request(options, function (error, response) {
  if (error) throw new Error(error);
  console.log(response.body);
});
```

如果方法调用成功，声网互动白板服务端将返回生成的 Room Token。

**响应示例**

```json
"NETLESSROOM_YWs9XXXXXXXXXXXZWNhNjk" // Room Token
```

## 客户端实现 [#客户端实现-1]

### 1. 创建项目 [#1-创建项目]

1. 打开 Xcode 并点击 **Create a new Xcode project**。
2. 选择平台类型为 **iOS**、项目类型为 **Single View App**，并点击 **Next**。
3. 输入如下项目信息，并点击 **Next**：
   - **Product Name**：产品名称。本文设为 **ExampleFastboard**。
   - **Team**：开发团队信息。如果你已添加过开发团队信息，可从弹出的菜单中选择；如果没有，会看到 **Add account…** 按钮。点击该按钮并按照屏幕提示输入 Apple ID，完成后即可选择你的 Apple 账户作为开发团队。
   - **Organization Name**：组织名称。
   - **Interface**：用户界面，选择 **Storyboard**。
   - **Language**：语言。选择 **Swift**。
4. 选择项目存储路径，并点击 **Create**。

### 2. 获取 SDK [#2-获取-sdk]

参照如下步骤获取最新版的 Fastboard iOS SDK：

1. 在终端里进入项目根目录，并运行以下命令，在项目文件夹下创建一个 `Podfile` 文件：

   ```shell
   pod init
   ```

2. 打开 `Podfile` 文件，添加如下内容：

   ```ruby
    platform :ios, '12.0'
    use_frameworks!
    target 'ExampleFastboard' do
        pod 'Fastboard', '1.4.6'
    end
   ```

3. 在终端里运行以下命令安装 SDK：

   ```shell
   pod install
   ```

   安装成功后，项目文件夹下会生成一个 `xcworkspace` 文件，你可以打开该文件，对项目进行后续编辑。

4. （可选）在终端里运行以下命令以更新 SDK：

    ```shell
    pod update Fastboard
    ```

:::tip[提示]
对于中国大陆用户，如果在执行 pod install 命令时由于网络原因失败，可以使用 [TUNA 镜像源](https://mirrors.tuna.tsinghua.edu.cn/help/CocoaPods/)。
:::

### 3. 实现加入房间 [#3-实现加入房间-1]

使用 Fastboard SDK 加入白板房间的步骤如下：

1. 调用 `Fastboard` 类的 [`createFastRoom`](/zh-CN/api-reference/whiteboard/fastboard/ios#createfastroom) 创建 `FastRoom` 实例。
2. 将 `FastRoom` 实例的 view 添加到 `viewController` 并设置布局。`FastRoomView` 提供白板界面，并带有常用功能的 UI。
3. 调用 `FastRoom` 类的 [`joinRoom`](/zh-CN/api-reference/whiteboard/fastboard/ios#joinroom) 加入白板房间。

调用 `createFastRoom` 创建 `FastRoom` 实例，需要通过 `config` 参数传入以下白板房间配置信息：

- `appIdentifier`：String。互动白板项目的 AppIdentifier。详见[获取互动白板项目的安全密钥](/zh-CN/realtime-media/whiteboard/fastboard-sdk/build/setup-and-access/enable-service#获取互动白板项目的安全密钥)。
- `roomUUID`：String。房间的 UUID，详见[创建房间](#createroom)。
- `roomToken`：String。用于鉴权的 Room Token。生成该 Room Token 使用的房间 UUID 必须和上面的房间 UUID 一致。详见[生成 Room Token](#roomtoken)。
- `region`：数据中心，必须和创建房间时设置的数据中心一致。
- `userUID`：String。用户 UID，即用户的唯一标识符，字符串格式，长度不能超过 1024 字节。

将 `ViewController.swift` 文件中的内容替换成如下代码：

```swift
import UIKit
// 导入 Fastboard SDK
import Fastboard

class ViewController: UIViewController {

    // 定义 fastRoom 变量
    var fastRoom: FastRoom!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // 设置白板房间的参数
        let config = FastRoomConfiguration(appIdentifier: "互动白板项目的 AppIdentifier",
                                           roomUUID: "房间的 UUID",
                                           roomToken: "房间的 Token",
                                           region: .CN,
                                           userUID: "用户 UID")
        config.whiteSdkConfiguration.enableAppliancePlugin = true
        // 创建 FastRoom 实例
        let fastRoom = Fastboard.createFastRoom(withFastRoomConfig: config)
        // 添加 FastRoomView
        view.addSubview(fastRoom.view)
        // 加入房间
        fastRoom.joinRoom()
        self.fastRoom = fastRoom
    }
    
    // 设置 FastRoomView 的布局
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        fastRoom.view.frame = view.bounds
    }
}
```

## 运行项目 [#运行项目-1]

在 Xcode 中编译并在模拟器或真机上运行项目。app 成功安装并启动后，你可以看到如下界面：

<DocsImage alt="项目界面示例" src="https://web-cdn.agora.io/docs-files/1648121138765" displayWidth="70%" />

你可以选择左侧工具栏上的铅笔、文字或形状工具，在白板上写写画画；当前页面写满时，可以点击下方的<InlineImage alt="新增页面图标" src="https://web-cdn.agora.io/docs-files/1646622745090" height={25} />图标，新增页面，并使用箭头切换页面。

## 后续步骤 [#后续步骤-1]

体验完带 UI 的白板功能后，你可以调用 Fastboard SDK 的 API 并自定义 UI，以实现插入图片、播放音视频、演示文档等功能。详见[展示文件](/zh-CN/realtime-media/whiteboard/fastboard-sdk/build/manage-whiteboard/present-files-fb)。

## 推荐教具插件配置 [#推荐教具插件配置-1]

推荐在创建 SDK 前开启 `useMultiViews` 和 `enableAppliancePlugin`。本端插件资源随 SDK 内嵌，配置入口、教具与样式见[教具插件介绍与启用](/zh-CN/realtime-media/whiteboard/fastboard-sdk/build/appliance-plugin/overview)。