使用 Node.js Hello World - Teams

使用选项卡、机器人和消息扩展功能生成第一个应用，开始Microsoft Teams 应用开发。

此应用具有所有功能，每个功能都有自己的 UI 和 UX：

显示此应用具有三个功能的图表的屏幕截图。

在本教程中，你将了解：

如何使用命令行工具设置新项目。
如何生成具有不同功能（选项卡、机器人和消息扩展）的三个应用。
如何从开发人员门户部署应用。

先决条件

剩余 4 分钟

下面是生成和部署 Teams 应用时需要安装的工具列表。

	安装	用于使用...
Required
	Node.js 和 NPM	后端 JavaScript 运行时环境。有关详细信息，请参阅项目类型的Node.js 版本兼容性表。
	ngrok	teams 应用功能 (对话机器人、消息扩展和传入 Webhook) 需要入站连接。隧道将开发系统连接到 Teams。对于仅包含选项卡的应用，这不是必需的。此包使用 npm `devDependencies`) 安装在项目目录 (中。
	Microsoft Edge（推荐）或 Google Chrome	包含开发人员工具的浏览器。
	Visual Studio Code	JavaScript、TypeScript 或 SharePoint 框架 (SPFx) 生成环境。使用版本 1.55 或更高版本。
	Git	使用 GitHub 中示例 Node.js 应用存储库的 Git。
	吞掉	开源 JavaScript 工具包。安装版本 4.0.0 或更高版本。
	Microsoft Teams	Microsoft Teams，在一个位置通过聊天、会议和通话应用与你合作的每个人协作。
可选
	用于 Visual Studio Code 和 Microsoft Azure CLI 的 Azure 工具	用于访问存储的数据或在 Azure 中为 Teams 应用部署基于云的后端的 Azure 工具。
	适用于 Chrome 的 React 开发人员工具或 React Microsoft Edge 开发人员工具	使用 JavaScript 进行选项卡开发的浏览器工具。
	Microsoft Graph 浏览器	Microsoft Graph 资源管理器，这是一种基于浏览器的工具，可用于从 Microsoft Graph 数据运行查询。
	Teams 开发人员门户	基于 Web 的门户，用于配置、管理和发布 Teams 应用，包括将应用发布到组织或Microsoft Teams 应用商店。
	Visual Studio Code扩展
	Azure Functions Core Tools	在本地调试运行期间本地后端组件，包括在 Azure 中运行服务时所需的身份验证帮助程序。它使用 npm `devDependencies`) 安装在项目目录 (中。
	.NET SDK	用于本地调试和Azure Functions应用部署的自定义绑定。如果尚未全局安装 .NET 3.1 (或更高版本) SDK，则可以安装可移植版本。

验证已安装工具的版本号

使用以下命令验证工具的已安装版本是否是根据需要的。

注意

在平台上使用你最熟悉的终端窗口。这些示例使用 Git Bash (（包含在 Git 安装) 中），但这些脚本可以在大多数平台上运行。

若要验证已安装工具的版本号，请执行以下操作：

打开终端窗口。
运行以下命令，验证 git 计算机上安装的版本：
```
$ git --version
```
输出示例： git version 2.19.0.windows.1
运行以下命令以验证 node.js 版本：
```
$ node -v
```
输出示例： v8.9.3
验证的 npm版本号：
```
$ npm -v
```
输出示例： 5.5.1
验证的 gulp版本号：
```
$ gulp -v
```
输出示例： CLI version 2.3.0

Local version 4.0.2
运行以下命令以验证Visual Studio Code的版本号：
```
code --version
```
输出示例： 1.28.2

929bacba01ef658b873545e26034d1a8067445e9

可以毫无问题地使用这些应用程序的不同版本。

设置 Teams 开发租户

租户类似于 Teams 中组织的空间或容器，可在其中聊天、共享文件和运行会议。此空间也是上传和测试自定义应用的位置。

让我们验证是否已准备好使用租户进行开发。

启用自定义应用上传选项

创建应用后，必须在 Teams 中加载应用，而无需分发它。此过程称为自定义应用上传。登录到 Microsoft 365 帐户以查看此选项。

注意

自定义应用上传对于在 Teams 本地环境中预览和测试应用是必需的。如果未启用，则无法在 Teams 本地预览和测试应用。

是否已拥有租户，并且是否具有管理员访问权限？我们来检查，如果你真的这样做了！

验证是否可以在 Teams 中上传自定义应用：

在 Teams 客户端中，选择“ 应用商店 ”图标。
选择“管理应用”。
查找“ 上传自定义应用”选项。如果看到选项，则表示已启用自定义应用上传。

注意

如果 Teams 未显示上传自定义应用的选项，请与 Teams 管理员联系。

创建免费的 Teams 开发人员租户

如果没有 Teams 开发人员帐户，可以免费获取它。加入 Microsoft 365 开发人员计划！

转到 Microsoft 365 开发人员计划。
选择“ 立即加入 ”，然后按照屏幕上的说明进行操作。
在欢迎屏幕中，选择“ 设置 E5 订阅”。
设置管理员帐户。完成后，将显示以下屏幕。
使用刚刚设置的管理员帐户登录到 Teams。验证在 Teams 中是否具有 “上传自定义应用 ”选项。

获取免费的 Azure 帐户

如果要在 Azure 中托管应用或访问资源，则必须拥有 Azure 订阅。在开始之前创建一个免费帐户。

现在，你已获得所有工具并设置帐户。接下来，让我们设置开发环境并开始生成！

可以继续使用此终端窗口运行本教程中的命令。

下载示例

对于本教程，请使用 Hello World！示例入门。可以从 GitHub 下载并克隆它。

使用 Git Bash 克隆示例存储库：

打开终端窗口。

运行以下命令，将示例存储库克隆到计算机：

git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

提示

如果要修改此存储库，可以在对 GitHub 存储库所做的更改中检查，以供将来参考。

生成第一个 Node.js 应用

剩余 3 分钟

克隆 Node.js 示例应用的存储库后，可以在本地环境中生成和测试应用。

在本页中，你将了解如何：

生成并运行第一个应用
测试示例应用

生成和运行示例

克隆存储库后，可以生成示例应用。

打开终端窗口。
在终端中运行更改目录命令以更改为示例应用目录：
```
cd Microsoft-Teams-Samples/samples/app-hello-world/nodejs/
```
使用以下命令安装所有依赖项：
```
npm install
```
应会看到一堆依赖项正在安装。
安装完成后，使用以下命令运行应用：
```
npm start
```
当Hello World应用启动时，它将显示在App started listening on port 3333终端窗口中。

注意

如果看到上述消息中显示的其他端口号，是因为设置了 PORT 环境变量。可以继续使用该端口，或者将环境变量更改为 3333。
打开浏览器窗口并使用以下 URL 验证是否正在加载所有Hello World应用 URL：
- http://localhost:3333
- http://localhost:3333/hello
- http://localhost:3333/first
- http://localhost:3333/second

在本地环境中测试示例应用

请记住，Microsoft Teams 中的应用是公开一个或多个功能的 Web 应用程序。使应用在 Internet 上可用，以便 Teams 平台可以加载它。若要使应用可从 Internet 访问，需要托管应用。

对于本地测试，可以在本地计算机上运行应用，并使用 Web 终结点创建指向它的隧道。 ngrok 是一个免费的工具，让你能够做到这一点。使用 ngrok，可以获取 Web 地址，例如 https://d0ac14a5.ngrok.io (此 URL 只是一个示例) 。可以为环境下载并安装ngrok 。请确保将其添加到中的 PATH某个位置。

创建 ngrok 隧道

安装 ngrok 后，可以创建隧道以在本地部署应用。

打开新的终端窗口。
运行以下命令以创建隧道。示例应用使用端口 3333：
```
ngrok http 3333 --host-header=localhost:3333
```
创建 ngrok 隧道。下面是 ngrok 隧道的示例。

Ngrok 侦听来自 Internet 的请求，并将其路由到在端口 3333 上运行的应用。

若要验证应用的本地部署，请执行以下操作：

打开浏览器。
使用以下 URL 加载应用：

https://<forwarding address in ngrok console session>/

下面是 URL 的示例：

可以尝试将、 first或 second 添加到 hellongrok 隧道 URL 以查看应用的不同选项卡页。

Ngrok 侦听来自 Internet 的请求，并将其路由到在端口 3333 上运行的应用。
记下 ngrok 控制台中的转发地址。需要此 URL 才能在 Teams 中部署应用。

注意

如果在生成和运行过程中使用了其他端口，请确保使用相同的端口号来设置 ngrok 隧道。

提示

最好在不同的终端窗口中运行 ngrok ，使其保持运行而不干扰节点应用，稍后可能需要停止、重新生成和重新运行节点应用。 ngrok 会话在此窗口中返回有用的调试信息。 ngrok 的付费版本允许持久名称。

重要

如果使用 ngrok 的免费版本，则应用仅在开发计算机上的当前会话期间可用。如果计算机已关闭或进入睡眠状态，则它不可用。重启服务时，它将返回一个新地址。然后，必须更新使用过时地址的每个位置。共享应用进行测试时，请记住此步骤。

生成 Node.js 应用包

可以使用 gulp CLI 为 Node.js 生成应用包。

打开终端窗口。
确保位于克隆的 node.js 目录中。这是放置的文件夹 gulpfile.js 。
运行以下命令以生成 Node.js 应用包。

$ gulp

下面是命令输出的示例：

[13:39:27] Using gulpfile ~\documents\github\msteams-samples-hello-world-nodejs\gulpfile.js

[13:39:27] Starting 'clean'...

[13:39:27] Starting generate-manifest'...

[13:39:27] Finished 'generate-manifest' after 11 ms

[13:39:27] Finished 'clean after 21 ms

[13:39:27] Starting 'default'... Build completed. Output in manifest folder

[13:39:27] Finished 'default' after 62 μs

创建应用包 helloworldapp.zip。可以在以下路径中找到包文件。

<path to the cloned repo>/Microsoft-Teams-Samples/samples/app-hello-world/nodejs/manifest

注意

如果正在使用的工具中的位置不明确，请搜索应用包文件（helloworldapp.zip）。

使用开发人员门户配置第一个 Node.js 应用

剩余 2 分钟

可以使用开发人员门户将应用包上传到 Teams 并配置应用功能。开发人员门户是一个 Teams 应用，可简化应用的创建和注册。从 Teams 应用商店安装！

生成并测试 Teams 应用后，可以使用开发人员门户对其进行配置和预览。

更新应用包包括：

将应用包导入开发人员门户
配置应用功能

将应用包导入开发人员门户

若要导入应用包，请执行以下操作：

打开 Microsoft Teams。
从左侧栏中选择 “应用商店 ”图标。
在搜索栏中搜索 开发人员门户 ，然后选择“ 开发人员门户”*。
选择 “打开”。

开发人员门户随即打开。
选择“ 应用 ”选项卡。
选择“ 导入应用”。
从 C# 示例存储库目录结构中的以下路径打开应用包 helloworldapp.zip ：

<path to cloned node.js sample repo>\Source\Repos\Microsoft-Teams-Samples\samples\app-hello-world\nodejs\manifest

Hello World应用在开发人员门户中导入。

将应用导入开发人员门户后，可以在开发人员门户中查看其详细信息。

在开发人员门户中浏览应用

将应用导入开发人员门户后，可以查看其详细信息，包括清单文件。

查看应用信息

从开发人员门户的左窗格中选择“ 基本信息 ”。
请注意基本信息中的以下信息：
- 应用程序 ID
- 开发人员信息
- 应用 URL
从左窗格中选择“ 品牌打造”以查看品牌信息。

如果要编写用于分发的新应用，则这些详细信息非常重要。

查看应用功能

从开发人员门户的左窗格中选择“ 应用功能 ”。

应用功能显示在右窗格中。可以查看个人应用、机器人和消息扩展的卡片。

查看应用清单

使用清单文件为应用配置功能、所需资源和其他重要属性。

从左侧面板中选择“ 发布 ”打开下拉列表，然后选择“ 应用包”。

应用清单显示在右窗格中。

清单文件显示在右窗格中。

配置应用的功能

将应用导入开发人员门户后，下一步是配置应用功能。开发人员门户包含不同部分中的所有应用信息。它使配置应用功能变得容易。

使用开发人员门户，可以：

配置个人选项卡应用。
配置机器人。
配置消息扩展。

配置个人选项卡应用

配置个人选项卡应用：

选择“应用功能”窗格上的“个人应用”卡图标，然后选择“编辑”。

将显示Hello选项卡的详细信息。
选择“Hello”选项卡的图标，然后选择“编辑”以打开应用详细信息进行更新。
在“将选项卡添加到个人应用”中，输入“Hello”选项卡的应用详细信息。

输入以下详细信息：
- 名称：Hello选项卡。
- 内容 URL 和 网站 URL：ngrok 控制台会话中的转发地址。
- 上下文：选择 “个人”选项卡。
选择“更新”。

“Hello”选项卡的详细信息将显示在“个人”应用窗格中。
选择“保存”。

“ 个人”应用 窗格现在显示自动创建的新选项卡和“关于”选项卡。

配置机器人

可以轻松地将机器人功能添加到应用。 Hello World示例应用已将机器人作为示例的一部分，但你必须将其注册到 Teams。

图像的屏幕截图，其中显示了导入了没有应用 ID 的机器人应用。

从示例导入的机器人没有关联的应用 ID。需要将其删除，并创建新的机器人。开发人员门户会创建新的应用 ID，并将其注册到 Teams。

添加和配置机器人涉及：

添加新机器人。
将机器人添加到应用。
配置机器人范围。

添加新机器人

选择“应用功能”窗格上的“机器人卡”图标，然后选择“删除”。
选择“ 工具” 以添加功能。
在“工具”窗格中选择“机器人管理”。
在“机器人管理”窗格中选择“+ 新建机器人”。
为机器人输入合适的名称，然后选择“ 添加”。

左侧窗格中将显示“ 配置 ”窗格，其中显示了新机器人的详细信息。
在控制台中 ngrok 输入转发 URL，然后选择“ 保存”。
选择“ 客户端密码”，然后选择“ 向机器人添加客户端密码 ”，为机器人生成密码。

开发人员门户为机器人生成密码。

可以使用图标复制密码。在本教程中，无需复制它。
选择“确定”。
选择“机器人”<以返回到“机器人管理”窗格。

“ 机器人管理 ”窗格显示使用应用 ID 添加的新机器人。
确保保存机器人 ID 以及 “客户端机密 ”部分中的密码。

将机器人添加到应用

打开“应用功能”窗格，然后选择“机器人卡。

此时会显示 “机器人 ”窗格。
从“选择 现有机器人”中选择机器人应用，然后选择“ 保存”。

新机器人使用自己的应用 ID 添加到应用。

配置机器人范围

选择新机器人卡上的图标，然后选择“编辑”。
在 “机器人 ”页中选择命令的所有三个范围。
在 “机器人 ”窗格中移动以查看 “命令” 部分，然后选择“ + 添加命令”。
输入合适的名称和说明，选择 “命令”的所有三个范围，然后选择“ 添加”。
- 个人
- Team
- 群组聊天
新命令将添加到“机器人”窗格的“命令”部分。
选择“保存”。

保存命令详细信息。
打开“应用功能”窗格，然后选择“个人应用”卡以查看应用的选项卡详细信息。

你将看到新聊天机器人的选项卡已添加到你的应用。

配置消息扩展

消息扩展允许用户从服务中请求信息并发布该信息。该信息以卡片的形式发布到频道对话中。邮件扩展显示在撰写框的底部。

若要添加新的消息扩展，请执行以下操作：

选择“应用功能”窗格中“消息扩展卡”图标，然后选择“删除”。
从“应用功能”窗格中选择“消息扩展”。
从“消息扩展”窗格的“选择现有机器人”下拉列表中选择机器人应用的名称。
选择“保存”。

消息扩展已保存，并且 “命令” 部分显示在 “消息扩展 ”窗格中。
选择“ + 添加命令 ”以定义消息扩展应用可以执行的操作的范围。

“ 添加命令 ”对话框。
确保在“添加命令”对话框中选择“ 搜索 ”作为要添加的命令类型。
输入以下详细信息的合适信息：
- 命令 ID
- 命令标题
- 命令说明
在对话框中移动以查看剩余的详细信息。
确保已选择 “设为默认值 ”。
为消息扩展命令选择以下上下文：
- 命令框
- Compose框
- 邮件
输入以下详细信息的合适信息：
- 参数名称
- 参数标题
- 参数说明
选择“ 文本 ”作为输入类型。
选择“保存”。
消息扩展命令已保存，并显示在“ 消息扩展 ”窗格中的命令列表中。
选择“保存”。
打开 “应用功能 ”窗格。

你将看到为Hello World应用配置的所有三项功能-个人选项卡应用、机器人和消息扩展。

预览并测试 Node.js 应用

100% 完成！

导入应用并在开发人员门户中配置功能后，可以预览和测试示例应用。

注意

外部开发人员不能在 Teams 的开发人员 门户应用中使用“在 Teams 中预览”选项。由于 API 限制，它不能作为应用在 Teams 上提供。若要在 Teams 中预览应用，请使用开发人员门户网站。

配置应用的功能后，可以在本地环境中的 Teams 中预览和测试应用。

预览应用：

从开发人员门户工具栏中选择“在 Teams 中预览”

开发人员门户会通知你自定义应用已成功上传。
选择“管理应用”。你的应用将列在上传的应用中。
使用搜索框查找应用，选择其行中的三个点。
选择“ 视图 ”选项。此时会显示应用的 “添加 ”页面。
选择“ 添加 ”以在 Teams 上加载应用。

你的应用现已在 Teams 中提供。可查看所有选项卡并测试功能：
- Hello选项卡：
- 聊天机器人：
  
  可以使用聊天发送消息。
- 消息扩展：
  
  可以尝试使用邮件扩展进行搜索。
- “关于”选项卡：