使用 Live Share SDK 构建敏捷扑克
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 生成协作应用的教程。
你有关于此部分的问题? 如果有,请向我们提供反馈,以便我们对此部分作出改进。