使用 Live Share SDK 构建敏捷扑克 - Teams

Live Share SDK 允许你构建协作应用，并发现更多通过 Teams 进行协作和连接的方法。你可以构建应用以在 Teams 一对一通话、群组通话、安排会议和立即开会等内容中共享观看电影、玩实时游戏等内容。

本分步指南可帮助你使用 Live Share SDK 创建敏捷扑克示例应用。你将看到以下输出：

先决条件

安装以下工具并设置开发环境：

	安装	用于使用...
	Microsoft Teams	Microsoft Teams，在一个位置通过聊天、会议和通话应用与你合作的每个人协作。
	Visual Studio 2022	可以在 Visual Studio 2022 中安装企业版，并安装 ASP.NET 和 Web 开发工作负载。使用最新版本。
	Node.js 和 NPM	后端 JavaScript 运行时环境。有关详细信息，请参阅项目类型的Node.js 版本兼容性表。
	开发隧道	Teams 应用功能 (对话机器人、消息扩展和传入 Webhook) 需要入站连接。隧道将开发系统连接到 Teams。开发隧道是一种功能强大的工具，用于安全地将 localhost 打开到 Internet 并控制谁有权访问。 Visual Studio 2022 版本 17.7.0 或更高版本中提供了开发隧道。或者还可以使用 ngrok 作为隧道，将开发系统连接到 Teams。对于仅包含选项卡的应用，这不是必需的。此包使用 npm `devDependencies`) 安装在项目目录 (中。

注意

下载 ngrok 后，注册并安装 authtoken。

克隆 Live Share SDK 存储库以测试示例应用：

  git clone https://github.com/microsoft/live-share-sdk.git

打开终端窗口。
运行以下命令以转到 Agile Poker 示例应用文件夹：
```
cd live-share-sdk\samples\javascript\22.react-agile-poker
```
运行以下命令以安装依赖项包：
```
npm install
```
运行以下命令以启动客户端和本地服务器：
```
npm run start
```
新的浏览器选项卡将打开一个 http://localhost:3000 窗口，并显示敏捷扑克游戏。
打开新的 ngrok 终端窗口以创建隧道并在本地部署应用。
运行以下命令以创建隧道。示例应用使用端口 3000：
```
ngrok http 3000--host-header=localhost
```
ngrok 隧道已创建。

需要设置清单文件并将 manifest.zip 包上传到 Teams。

打开 manifest.json 文件并更新以下信息。
- 设置为"ID"Microsoft应用 ID。
- 将所有出现的替换为完全限定的 <<BASE_URI_DOMAIN>> ngrok 或 devtunnel 域名。
使用清单文件夹中存在的以下文件创建 .zip 文件：
- manifest.json
- outline.png
- color.png
在 Teams 中创建包含几个演示者和与会者的会议。
加入会议。
会议开始后，选择“ 应用”。
在弹出窗口中，选择“ 管理应用”。
选择 “上传应用”。
选择在 “清单” 文件夹中创建的 .zip 文件，然后选择“ 打开”。
选择“添加”。
返回到会议详细信息页，然后选择“应用>敏捷扑克应用”。
选择“保存”。

敏捷扑克应用将添加到 Teams 会议侧面板。

从会议端面板中 的“用户情景 ”中选择用户情景，然后选择“ 一起计划”。

Teams 开始与会议中的用户实时同步。

你想出了这样的东西吗？

你已完成使用 Live Share SDK 为 Microsoft Teams 生成协作应用的教程。