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

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

声网互动白板房间提供丰富的编辑工具，支持展示静态图片、动态 PPT、H5 课件等多种格式的文件，不同终端用户能在白板上实时展示想法，轻松实现多人互动协作。本文介绍如何建立一个简单的项目，使用声网互动白板 SDK 加入房间并实现基础的白板功能。

## 技术原理 [#技术原理]

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

<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 以加入互动白板房间。

## 前提条件 [#前提条件]

- Android Studio 4.1.0 及以上版本
- Android SDK API level ≥ 21
- 有效的声网[开发者账号](/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-创建房间]

调用互动白板服务端 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]

创建房间并获取新建房间的 `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. 如需创建新项目，在 **Android Studio** 里，依次选择 **Phone and Tablet** > **Empty Activity**，创建 [Android 项目](https://developer.android.com/studio/projects/create-project)。

   创建项目后，**Android Studio** 会自动开始同步 gradle。请确保同步成功再进行下一步操作。

2. 在项目根目录的 `settings.gradle` 文件中添加 JitPack 仓库：

    ```groovy
    dependencyResolutionManagement {
        repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
        repositories {
            google()
            mavenCentral()
            maven { url 'https://jitpack.io' }
        }
    }
    ```

3. 在 `/Gradle Scripts/build.gradle(Module: <projectname>.app)` 文件的 `dependencies` 字段中添加如下行以添加 `Fastboard SDK` 依赖：

    ```groovy
    dependencies {
        ...
        implementation 'com.github.netless-io:fastboard-android:1.8.2'
    }
    ```

:::info[信息]
本文使用 Fastboard Android SDK 1.8.2 版本。更多版本详见[发版说明](/zh-CN/realtime-media/whiteboard/fastboard-sdk/reference/release-notes-fb)。
:::

### 2. 实现用户界面 [#2-实现用户界面]

Fastboard SDK 提供带 UI 的白板界面 `FastboardView`，只需将其添加到项目的布局中，app 运行时即可看到白板界面。

将 `/app/res/layout/activity_main.xml` 文件中的内容替换成如下代码：

```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <io.agora.board.fast.FastboardView
        android:id="@+id/fastboard_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
```

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

调用 Fastboard SDK 的如下方法加入白板房间：

1. 调用 `FastboardView` 类的 `getFastboard` 方法获取 `Fastboard` 对象。
2. 调用 `Fastboard` 类的 `createFastRoom` 方法创建 `FastRoom` 对象。调用该方法时，你需要通过 `roomOptions` 参数传入以下房间配置信息：
   - `appId`：String。互动白板项目的 AppIdentifier。详见[获取互动白板项目的安全密钥](/zh-CN/realtime-media/whiteboard/fastboard-sdk/build/setup-and-access/enable-service#获取互动白板项目的安全密钥)。
   - `uuid`：String。房间的 UUID，详见[创建房间](#createroom)。
   - `token`：String。用于鉴权的 Room Token。生成该 Room Token 使用的房间 UUID 必须和上面的房间 UUID 一致。详见[生成 Room Token](#roomtoken)。
   - `uid`：String。用户 UID，即用户的唯一标识符，字符串格式，长度不能超过 1024 字节。
   - `FastRegion`：枚举。数据中心，必须和创建房间时设置的数据中心一致。

在 `/app/java/com.example./MainActivity` 文件中添加如下代码：

```kotlin
package com.example.fastboardquickstart
 
import android.content.pm.ActivityInfo
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.widget.Button
import io.agora.board.fast.FastboardView
import io.agora.board.fast.model.FastRegion
import io.agora.board.fast.model.FastRoomOptions
import java.lang.Exception
 
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // 横屏设置
        supportActionBar?.hide()
        requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
         setupFastboard()

    }
		
        private fun setupFastboard() {
        // 获取 fastboard 对象
        val fastboardView = findViewById<FastboardView>(R.id.fastboard_view)
        val fastboard = fastboardView.fastboard
 
        // 设置白板房间的参数
        val roomOptions = FastRoomOptions(
            "互动白板项目的 AppIdentifier",
            "房间的 UUID",
            "Room Token",
            "用户 UID",
           FastRegion.CN_HZ
        )
 
        // 创建 FastRoom 对象
        roomOptions.sdkConfiguration.setEnableAppliancePlugin(true)
        val fastRoom = fastboard.createFastRoom(roomOptions)
        // 加入房间
        fastRoom.join()
    }
}
```

## 运行项目 [#运行项目]

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

![项目界面示例](https://web-cdn.agora.io/docs-files/1647398709640)

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

## 后续步骤 [#后续步骤]

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

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

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