MSTeam 解决方案构建教程（四）

admin 管理员组

文章数量: 887032

原文：Building Solutions with Microsoft Teams

协议：CC BY-NC-SA 4.0

十、SharePoint 和团队：一起改进

在本章中，我们将了解如何使用 SharePoint 框架构建 Microsoft Teams 自定义。我们将了解 MSTeam 的发展以及使用 SharePoint 框架扩展 MSTeam 的好处。接下来，我们将学习如何在 Microsoft 团队中展现 SharePoint Framework 自定义。Microsoft teams 为创建团队应用提供了许多不同的可扩展性选项，其中可能包含一个自定义选项卡。正如您在前面章节中了解到的，它还可以利用机器人的消息传递扩展和连接器，或者您也可以构建一个自定义机器人来回复和接收来自用户的消息，以便与您的用户进行良好的交互体验。

什么是 SharePoint 框架？

SharePoint Framework (SPFx)是完全受支持的客户端 SharePoint 客户端 web 部件或扩展或库。借助 SharePoint Framework，我们可以使用 SharePoint 列表和库，并将 SPFx web 部件扩展到 Microsoft Teams、Microsoft Outlook web apps 和其他 Microsoft 365 应用。您可以使用基于首选 JavaScript 库的现代工具链 web 技术和工具。此外，所有 SharePoint Framework web 部件都具有响应性和移动就绪性。

向团队展示 SharePoint 框架

将 SharePoint Framework web 部件扩展到 Microsoft 团队，无需任何代码更改。您可以利用现有的知识，重用相同的业务线。如果已经为 SharePoint 开发了 SPFx web 部件，并且您希望在团队中使用相同的功能，那么您可以将 SPFx web 部件作为选项卡添加到 Microsoft 团队中。

将 SPFx 解决方案引入团队选项卡

图 10-1

将 SPFx 解决方案引入团队选项卡

图 10-1 代表 SPFx solutions to Teams 选项卡，详情如下:

• 首批 SPFx 团队解决方案使用租户应用目录部署到 Office 365 租户。

• 您有两种选择:一种是将 web 部件同步到团队，或者创建自定义清单文件并作为应用在团队中部署。

• 然后，用户选择 SPFx 应用，就像 MS Teams“添加选项卡”体验中的任何其他选项卡一样。

• 将显示配置面板，一旦保存，信息将存储在连接到该组的 SharePoint Online 网站中。

图 10-2

将 SPFx 解决方案引入团队选项卡

图 10-2 表示“团队”选项卡中的 SPFx web 部件负载，详细信息如下:

• 加载时，SPFx 组件呈现在一个专用的 _layout 页面中，该页面在团队中被 iFramed。

• 开发人员可以使用工作组和 SharePoint 网站上下文，并且您可以验证 web 部件的加载位置以及它是 SharePoint 还是工作组。

• 代码是从上载包时部署它的 SharePoint 资产库中加载的。

• 此外，代码可以在不同的 CDN 位置运行，如 Azure、SharePoint 库等。，基于您部署代码的位置。

共同需求

为什么需要 SharePoint Framework web 部件来扩展到团队？在这里，我们将讨论基于最终用户或 IT 管理员或开发完美。

最终用户

不管工具/工作量如何，团队关心的信息应该是可用的，并使团队协作和外部交流成为可能。

IT 管理员

它可以减少为最终用户管理和部署解决方案的位置和方式。

开发商

他们可以通过一个解决方案处理多种工作负载，减少开发人员的概念和经验。

解决办法

为此，微软支持用户围绕 SharePoint 和团队中的相同内容进行协作，并提供集中的管理体验和工具，包括 LOB 应用分发和通用开发人员框架，用于构建针对 SharePoint 和团队体验的解决方案。见图 10-3 。

图 10-3

表面 SPFx 和团队解决方案

For this,

SharePoint 框架目标团队选项卡

• SPFX 是企业开发人员和 SIs 跨 SharePoint 和团队开发“O365 托管”解决方案的标准方式。

• 开发者将能够“瞄准”‘manifest . JSON’中的环境。

• 应用目录中的单点治理。

• SPFx 的标准“功能”

  • 工具链

  • 证明

  • SP、图形和 Web API 访问

  • CDN 托管

  • 配置体验

  • 解决方案托管

• 组件可以获得正确的应用上下文。

目录同步

使用熟悉的技术构建您的应用，在应用目录中部署和托管它，并通过一键同步与团队同步:

• 开发在 SPFx 开发人员熟悉的环境中进行:

  • 自耕农

  • 新公共管理理论

  • Visual Studio 代码

• 创建包后，管理员会将其部署到 SharePoint 租户应用目录中。

• 可用于同步 SPFx 组件的“同步到团队”选项在团队 LOB 目录中标记为在团队中工作。

  • 团队清单是即时创建的，包含所有特定于租户的信息。

为什么使用 SharePoint Framework 为 Microsoft 团队构建？

使用 SharePoint 框架为 Microsoft 团队构建有两个主要好处:

• 托管体验的单一平台

• 自动解决方案托管

托管体验的单一平台

构建您的解决方案以跨团队、SharePoint、Outlook 和所有 Office 应用运行。见图 10-4 。

图 10-4

托管体验的单一平台

自动解决方案托管

当你为 MSTeam 构建应用时，你需要在 Azure 或 app store 中托管应用。我们需要额外的基础设施，也需要额外的预算资金。如果您已经使用您喜欢的技术开发了相同功能的 SPFX web 部件，那么我们不需要为 Microsoft 团队开发和部署。此外，如果您启用了 Office 365 CDN，您的团队选项卡和个人应用的资产将从 CDN 提供，为您的用户提供显著更好的体验，而无需任何额外的成本或配置。它也不需要任何额外的开发成本。

证明

Microsoft Teams 解决方案要求您在使用任何 API 之前连接并验证它们。当您自己构建 Microsoft Teams 应用时，您需要确保所有 API 都安全连接。但是在 SharePoint 框架中，它已经与 SharePoint 管理中心中的管理 API 权限访问相集成。它包含与 Microsoft Graph 和其他 API 通信的现成库。使用这些类，您可以访问 API 而不用担心身份验证。事情会是这样的:

• 团队富客户端和 SharePoint 之间的静默身份验证

  • Teams 向 SharePoint 提供令牌客户端。

  • 它将其转换到 cookie 服务器端。

  • 托管 SPFx 解决方案的 _layout 系统页面显示:不需要额外的身份验证。

  • 对 SharePoint REST APIs 的完全访问权限。

• 如果组件要求您访问图形/Web API:

  • 您从客户端获得 auth 令牌:这里没有权限，我们将它用作引导令牌。

  • SPFx 客户端库知道这个调用来自一个团队的富客户端环境。

  • 使用“代表”流将引导令牌发送给 AAD，以获得所请求资源的访问令牌，作为对引导令牌的交换。

  • AAD 将访问令牌返回给 SPO。组件现在可以执行 Web API 调用了。

使用 SharePoint 框架构建 Microsoft 团队选项卡

从 SharePoint Framework v1.8 版，您可以使用 SharePoint Framework 工具为 Microsoft 团队构建选项卡，并将 SharePoint 用作您的解决方案的宿主。但是您需要手动部署 manifest.json 文件。作为 SharePoint Framework v1.10 的一部分，您还可以将您的解决方案发布为 Microsoft Teams 个人应用并自动同步。

使用 SharePoint 框架作为 Microsoft 团队选项卡平台的好处包括:

• 开发平台类似于 SharePoint Framework web 部件，不需要单独的开发环境。

• 所有 SharePoint Framework web 部件都可以同步，并作为选项卡或个人应用添加到 Microsoft 团队中。

• 还控制 Teams/SPFx 上下文和范围，以将自定义选项卡作为 web 部件公开，并使用 this . context . sdks . Microsoft Teams 获取 Teams 上下文。

• 您的“团队”选项卡将在特定团队背后的基础 SharePoint 网站的上下文中执行。这意味着您可以在 web 部件中利用任何 SharePoint 特定的 API 或功能，也就是说，从您的选项卡中利用这些 API 或功能。

显色法

从 SharePoint Framework 1.8 或更高版本，您可以开始开发 Microsoft 团队选项卡。入门的高级步骤如下:

• 使用客户端 web 部件创建 SharePoint 框架解决方案。

• 将“ TeamsTab ”添加到 webpart 清单文件的 supportedHosts 属性中，以将其用作频道中的选项卡:

• 将“TeamsPersonalApp”添加到 web 部件清单的 supportedHosts 属性中，以将其用作个人应用:

"supportedHosts": ["SharePointWebPart", "TeamsTab"],

• 使用租户范围的部署选项将 web 部件部署到 SharePoint 应用目录。那么它适用于所有团队。

• 激活您部署的 SharePoint 框架解决方案，并在应用目录中选择 Sync to Teams 按钮。

"supportedHosts": ["SharePointWebPart", "TeamsPersonalApp"],

启用上传自定义应用

作为 SharePoint 框架团队选项卡开发人员的一部分，您需要将 Microsoft Teams 应用显式部署到 Microsoft Team 中的团队。您的租户还需要支持 MSTeam 的自定义应用的侧加载，以便您可以将应用部署到特定团队并使用它。

图 10-5

启用上传自定义应用

• 前往 https://admin.teams.microsoft

• 选择团队应用

• 然后选择设置策略

• 添加新的安装策略

• 启用“上传自定义应用”

• 管理用户(图 10-5

部署选项

有两个选项可用于部署 Microsoft Teams 选项卡或作为个人应用从 SharePoint Framework 部署到 Microsoft Team。由于 SharePoint 和 Microsoft 团队都有自己的应用目录，部署需要在两种服务上运行。新功能的可见性可以通过所采取的部署步骤来控制。

• 与租户团队同步

• 手动部署

租户部署

您可以使用应用目录功能区中的与团队同步按钮，这将自动创建 Microsoft Teams 应用清单和应用包，并将其安装在 Microsoft Teams 商店中。这将使您的解决方案对您的租户和 Microsoft 团队中的所有用户可用。然后，您可以从频道中将 web 部件添加为选项卡。

手动部署

有一种手动方式来部署您的解决方案，例如，允许您将解决方案仅提供给租户中的一个特定团队。有关如何创建清单的详细信息，请参见为 web 部件手动创建 Microsoft 团队清单并将其部署到 Microsoft 团队: https://docs.microsoft/en-us/sharepoint/dev/spfx/web-parts/guidance/creating-team-manifest-manually-for-webpart

• 以标准方式构建您的 SharePoint 框架解决方案:

• 您将能够在’中看到两个图像文件。/teams '文件夹。

• 为团队创建自定义清单文件，并参考下面的 url:

  • https://docs.microsoft/en-us/sharepoint/dev/spfx/web-parts/guidance/creating-team-manifest-manually-for-webpart

• 为 web 部件手动创建 Microsoft 团队清单，并将其从 Microsoft 团队部署到此文件夹。该文件应命名为“*manifest.json”，您可以添加一个 webpart 组件 ID，以便从“团队”选项卡中引用。

• 将清单添加到。/teams '文件夹中，将两个图像文件和 manifest.json 一起压缩成一个 zip 文件。这意味着 zip 文件应该只包含 manifest.json 和两个图像。

• 您可以将其作为应用直接部署到 MSTeam。

• 另外，将代码部署在 Microsoft 365 CDN 或您首选的 CDN 中。

gulp bundle --ship
gulp package-solution --ship

检测 Web 部件是否在团队上下文中

web 部件中的上下文包含对 Teams JavaScript SDK 对象的引用，因此当您的 web 部件呈现为选项卡时，您可以轻松访问 Teams 上下文。

• 属性this . context . Microsoft teams在 SharePoint Framework v1.10 版本中已被弃用，Microsoft 从 SPFx v1.10 引入了 this . context . sdks . Microsoft teams

• 你应该使用this . context . sdks . Microsoft teams为所有用 SharePoint Framework v1.10 和更高版本创建的解决方案服务。

this.context.sdks.microsoftTeams

练习–创建 SPFx Web 部件并分发给团队

在开始练习之前，请验证您的 SharePoint 框架开发环境。

设置您的 SharePoint 框架开发环境

您可以使用 Visual Studio 或您自己的自定义开发环境来构建 SharePoint 框架解决方案。您也可以使用 Mac、PC 或 Linux 环境。

安装 Node.js

安装最新版本的 Node.js LTS 10.x 。

如果您按照第二章中的应用开发设置进行安装，请验证版本。SharePoint Framework 开发目前不支持 Node.js v9.x、v11.x 和 v12.x。

安装吞咽

Gulp 是一个基于 JavaScript 的任务运行器，用于自动化重复任务。SharePoint Framework 构建工具链使用 Gulp 任务来构建项目、创建 JavaScript 包以及用于部署解决方案的结果包。

如果您已经按照第二章中的说明进行了安装，则无需再次安装。

输入以下命令安装 Gulp:

npm install gulp –global

安装约曼

约曼帮助您启动新项目，并提供最佳实践和工具来帮助您保持高效率。SharePoint 客户端开发工具包括一个用于创建新 web 部件的 Yeoman 生成器。生成器提供了通用的构建工具、通用的样板代码和一个通用的操场网站来托管用于测试的 web 部件。

输入以下命令安装 Yeoman:

npm install yo –global

安装约曼 SharePoint 生成器

您可以使用 Yeoman SharePoint webpart 生成器来创建 SharePoint 客户端解决方案项目。

要全局安装 SharePoint Framework Yeoman 生成器，请输入以下命令:

npm install @microsoft/generator-sharepoint –global

信任自签名开发人员证书

当使用 gulp serve 在本地运行 SharePoint Framework web 部件时，默认情况下它使用 HTTPs 执行，并通过使用开发自签名 SSL 证书来实现。默认情况下，自签名证书在您的开发环境中不受信任。

若要信任开发环境，请在项目文件夹中执行以下命令:

gulp trust-dev-cert

创建项目

在本练习中，您将学习如何创建 SharePoint Framework web 部件，以及如何在无需任何额外代码的情况下部署/同步到 Microsoft 团队。

• 打开命令提示符，导航到要保存工作的目录

• 创建新的项目目录

• 导航到 teamsspfx-tab 文件夹

md teamsspfx-tab

• 通过运行 Yeoman SharePoint 框架生成器创建新的解决方案:

cd teamsspfx-tab

• 出现提示时，输入以下值:

  • 您的解决方案名称是什么？ teamsspfx-tab

  • 您希望组件以哪些基准包为目标？仅 SharePoint Online(最新)

  • 您想将文件放在哪里？使用当前文件夹

  • 您是否希望租户管理员能够选择立即将解决方案部署到所有站点，而无需运行任何功能部署或在站点中添加应用？是

  • 解决方案中的组件是否需要访问 web APIs 的权限，这些 API 是唯一的，并且不与租户中的其他组件共享？否

  • 创建哪种类型的客户端组件？web 部件

  • 向解决方案添加新的 Web 部件？ teamsspfx-tab

  • 您的 Web 部件名称是什么？firtteamsspfxtab

  • 您的 Web 部件说明是什么？第一队 SPFx 标签

  • 您想使用哪个框架？没有 JavaScript 框架

yo @microsoft/sharepoint

此时，Yeoman 安装了所需的依赖项并搭建了解决方案文件。创建解决方案可能需要几分钟时间。Yeoman 搭建了项目的框架，将您的 FirstTeamsspfxtab web 部件也包含在内。见图 10-6 。

图 10-6

teamsspfx-tab web 部件已创建

• 输入**代码。**以及以下在 Visual Studio 中打开 webpart 项目的代码:

图 10-7

溶液结构

• SharePoint Framework v1.8 版和更高版本的项目将包括。解决方案结构中的/teams 文件夹(图 10-7

code

• Teams 文件夹包含以下两个文件:

  • [componentId]_color.png:选项卡的默认小图片

  • [componentId]_outline.png:选项卡#的默认大图片

这些图像将在 MSTeam 中用作图标。您可以用自定义映像替换它们，但是您需要使用相同的名称，以确保它们与解决方案部署一起正确打包。

对于租户部署，请转至**。/config/package-solution.json，**添加属性“skipFeatureDeployment”:true如下图。

   {
     "$schema": "https://developer.microsoft/json-schemas/spfx-build/package-solution.schema.json",
     "solution": {
       "name": "teamsspfx-tab-client-side-solution",
       "id": "f9892e3b-9a82-4fc6-83fb-bae21492b82e",
       "version": "1.0.0.0",
       "includeClientSideAssets": true,
       "skipFeatureDeployment": true,
       "isDomainIsolated": false
     },
     "paths": {
       "zippedPackage": "solution/teamsspfx-tab.sppkg"
     }
   }

如果您在"skipFeatureDeployment": false,中输入 false，则您必须将此解决方案单独添加到 MS 团队网站集。还要考虑以下几点:

• 确保团队-团队和 SharePoint 网站相同。

• 在团队中部署 web 部件之前，先在 SharePoint 网站中部署它。

在本练习中，我选择了skip feature deployment:true。

更新 web 部件清单，使其对 Microsoft 团队可用

找到**。/src/web parts/firsteamsspfxtab/firsteamsspfxtabweb part . manifest . JSON**文件，并修改 supportedHosts 属性以包含“ TeamsTab 参见图 10-8 。

图 10-8

支持的主机

"supportedHosts": ["SharePointWebPart","TeamsTab"]

从 SharePoint Framework v1.10 版开始，您可以将 SharePoint Framework web 部件用作个人 Microsoft Teams 应用。这可以通过在 supportedHosts 值中包含“ TeamsPersonalApp ”来控制。个人应用 SPFx web 部件没有配置选项。

更新代码以了解 Microsoft Teams 上下文

• 打开**。/src/web parts/hello world/first teams spfxtabweb part**。如果将解决方案用作选项卡，则需要进行必要的编辑，以使解决方案了解 Microsoft Teams 上下文。

• 按如下方式更新 render()方法。

• 我们如何呈现不同的内容取决于代码是在 Microsoft Team 中呈现为选项卡还是在 SharePoint 中呈现为 web 部件。我们可以通过检查this . context . sdks . Microsoft Teams属性来检测该解决方案是否由 MSTeam 托管。

• 然后用下面的代码替换 render()方法:

• 当您将 spfx web 部件添加为选项卡时，上面的代码显示了小组名称、频道名称、小组 ID 和小组网站 URL。

• 在 SharePoint 中添加 spfx web 部件时，同样会显示“欢迎使用 SharePoint”。

public render(): void {
    let teamsMessage: string = `<p class="${styles.description}">Welcome to SharePoint!</p>`;

    if (this.context.sdks.microsoftTeams) {
    teamsMessage = `
    <p class="${styles.description}">Welcome to Teams!</p>
    <p class="${ styles.description}">Team Name - ${escape(this.context.sdks.microsoftTeams.context.teamName)}</p>
<p class="${ styles.description}">Channel Name - ${escape(this.context.sdks.microsoftTeams.context.channelName)}</p>
<p class="${ styles.description}">Group Id - ${escape(this.context.sdks.microsoftTeams.context.groupId)}</p>
<p class="${ styles.description}">Team Site Url - ${escape(this.context.sdks.microsoftTeams.context.teamSiteUrl)}</p>`;
    }

    this.domElement.innerHTML = `
      <div class="${ styles.firstTeamsspfxtab }">

        <div class="${ styles.container }">
          <div class="${ styles.row }">
            <div class="${ styles.column }">
              <p class="${ styles.description }">${teamsMessage}</p>
            </div>
          </div>
        </div>
      </div>`;
  }

将 Web 部件打包并部署到 SharePoint

图 10-9

部署 Spfx Web 部件

1. 返回到命令提示符。

2. 执行以下命令来构建和捆绑您的解决方案。这将创建一个发布版本并映射一个动态标签作为您的资产的主机 URL。

   • 吞咽构建

   • 吞咽包–运输

3. 执行以下任务来打包您的解决方案。这将在 sharepoint/solution 文件夹中创建一个 teamsspfx-tab.sppkg 包。

   • 吞咽包装-溶液-装运

4. 然后将生成的包部署到租户应用目录。

5. 转到您的租户的 SharePoint 应用目录。

6. 上传或者拖拽 teamsspfx-tab.sppkg 到 App 目录(图 10-9 )。

这将部署客户端解决方案包。由于这是一个完全信任的客户端解决方案，SharePoint 会显示一个对话框，要求您信任要部署的客户端解决方案。参见图 10-10 。

图 10-10

信任 SPFx Web 部件

图 10-11

已部署的 Spfx Web 部件

• 信任该解决方案，并确保选中了“使该解决方案对组织中的所有网站可用”选项，以便可以从 Microsoft 团队端使用该 web 部件。

• 然后单击 Deploy 按钮来部署 web 部件(图 10-11 )。

同步并使 Web 部件在 Microsoft 团队中可用

在 SharePoint 租户应用目录 web 部件解决方案列表中选择teamsspfx-tab-client-side-solution包，并在文件选项卡的功能区中选择同步到团队按钮。参见图 10-12 。

图 10-12

同步到团队

• 在右上角可以看到确认状态消息。

您的 SharePoint Framework web 部件已成功部署并同步到团队(图 10-13 )。

图 10-13

已成功同步到团队

Your SharePoint Framework web

无法将解决方案同步到团队

如果您收到未能将解决方案同步到团队的通知，该通知可能出现在您页面的右上角，请按照以下步骤从 Microsoft 团队中删除您的应用，然后尝试再次同步:

打开 Microsoft 团队。

• 查看您的团队频道时，单击+添加选项卡。

• 选择顶部的更多应用链接。

• 在列表中找到您的应用，然后点击…菜单。

• 选择“删除”以从 Microsoft 团队中移除该应用。

• 您现在可以将新版本同步到 Microsoft 团队。

将 SPFx Web 部件作为选项卡添加到 Microsoft 团队中

图 10-14

团队检查可用的应用

• 等待几分钟–由于缓存，同步到团队可能需要几分钟时间。

• 然后打开 MSTeam 客户端，通过从左侧导航栏选择应用来检查应用目录状态(图 10-14 )。

图 10-15

为您的组织构建

• 单击应用并选择为 jpower4mvp(租户名称)构建。参见图 10-15 。

图 10-16

从团队中查找 web 部件

• 您可以在团队的应用目录中看到您的firsteamsspfxtabweb 部件(图 10-16 )。

图 10-17

加入团队

• 选择firtteamsspfxtab应用

• 点击加入团队按钮(图 10-17

图 10-18

选择要设置的团队和渠道

• 选择您要测试解决方案的团队和渠道。

• 然后点击设置标签按钮，确认要选择的标签(图 10-18 )。

图 10-19

将应用保存到频道

• 点击保存按钮，确认要在通道上安装的标签(图 10-19

图 10-20

团队中的自定义应用插件

• 您的自定义选项卡已添加到 Microsoft Teams 频道，现在您可以看到代码在 Microsoft Teams 上下文中的反应。默认情况下，web 部件的主题来自基础 SharePoint 站点(图 10-20 )。

您已经成功地将 SPFx web 部件部署到 Microsoft Teams 选项卡。

结论

在本章中，您学习了如何将 SharePoint Framework Web 部件作为选项卡呈现给 Microsoft 团队；现在我们可以在自己的应用中使用它。除此之外，你将在下一章开始学习 MSTeam 应用的部署选项。

十一、团队生命周期管理和应用设计指南

在本章中，我们将了解如何为您的组织部署自定义团队应用。您将决定构建什么，构建您的 web 服务，创建应用包，并将该包分发给您的目标最终用户。

部署应用概述

您的 Microsoft Teams Apps 资产有多种不同的托管选项。在这一章，我将展示如何使用 Git 将团队应用资产部署到 Azure。

在之前的练习中构建和测试的应用已经准备好部署到 Azure，并包括各种功能，如修改 Microsoft Teams 架构，支持 Azure Application Insights，以及添加附加功能的可插拔框架。

运行并调试您的 Microsoft Teams 应用

Microsoft Teams 应用可以基于您最喜欢的技术和客户首选的 CDN 以多种选项运行或托管。对于调试，我们有以下选项在 MSTeam 中运行您的应用。

• 纯本地的

• 在本地团队中托管

• 团队中的云托管

纯本地的

在纯本地 for 选项卡中，您可以使用浏览器在本地运行，并通过http://localhost访问内容。您可以在自己的笔记本电脑上运行和测试应用。这允许您在 IDE 中编译和运行，并充分利用断点和单步调试等技术。我总是推荐开发、测试、UAT 和生产环境用于现实生活中的应用开发。

对于纯本地的机器人，你可以使用一个机器人模拟器，记住从本地机器人模拟器运行不会给整个团队特定的功能，如花名册调用和其他渠道特定的功能。团队中不支持某些 Bot 模拟器功能。

您的本地 bot 可以在 Bot 模拟器中运行。这允许您测试机器人的一些核心逻辑，以执行简单的测试和调试，查看消息的粗略布局，并执行简单的测试。以下是步骤:

• 在本地运行代码

• 启动 Bot 模拟器并设置 URL:

  • Node.js: http://localhost:3978/api/messages

  • 。NET/C#: http://localhost:3979/api/messages

• 将 Microsoft 应用 ID 和 Microsoft 应用密码留空，以匹配默认的环境变量

在本地团队中托管

本地托管在团队中使用 ngrok 或任何隧道软件运行，并创建一个应用包并上传到 Microsoft Teams 客户端。这允许您在 Teams 客户端中运行和调试您的应用。与纯本地选项相同，您可以从笔记本电脑上运行它。最棒的是，您可以在 IDE 中运行，并使用断点进行调试。在这里，我也总是推荐开发、测试、UAT 和生产环境用于现实生活中的应用开发。

为什么需要使用 ngrok 这样的隧道软件，是因为微软 Teams 是基于云的产品，只支持公开启用的 https 端点，不支持 http 端点。因此，要使您的应用能够在团队中工作，您需要将代码发布到您选择的云中，或者使您的本地运行实例可被外部访问。您可以使用任何隧道软件，但微软建议使用 ngrok: ngrok 为您在笔记本电脑上本地打开的端口创建一个外部可寻址的 URL。

ngrok-serve 任务构建您的项目并启动一个本地 web 服务器(http://localhost:3007)。然后它用一个随机的子域启动 ngrok，这个子域会创建一个到本地 web 服务器的安全 URL。

在开发过程中，可以使用 ngrok 工具进行测试，该工具可以创建一个安全的可旋转的 URL，指向您的本地 HTTP 服务器。Ngrok 作为一个依赖项包含在项目中，所以不需要设置或配置任何东西。Ngrok 已经创建了临时 URL，例如:841c87a33afc.ngrok.io，它将映射到我们本地运行的 web 服务器。然后去 Azure 门户，打开 Bot 通道注册 App。使用临时 URL 841c87a33afc.ngrok.io 更新消息传递端点，例如: https://841c87a33afc.ngrok.io/api/messages 。您可以通过在 bot 框架门户的 Test chat 窗口中测试 Bot 响应来验证 ngrok 正在工作。此外，您可以在需要时随时更新端点。

云托管，在团队中

云托管意味着您将在云 CDN 中部署生产就绪型应用。在这一章中，我将向你展示如何在云中部署一个应用，并在 MSTeam 中发布它。微软推荐 Azure 和 GitHub，你可以创建一个清单包上传到 Teams 客户端。此外，您可以创建多个清单和包，以便管理开发、测试、UAT 和生产应用。Microsoft 还建议您使用多个清单和包来分隔开发、测试、UAT 和生产应用。

微软推荐 Azure，但是你可以使用任何带有 HTTPS 端点的托管云环境。永远记住，对于 Bot 和消息环境，你的应用应该用 Bot 框架编译。为了确保安全的环境，请明确您引用的确切域和子域，并且这些域必须在您的控制之下，并且在清单文件的有效域对象中列出。

Note

不建议使用*.azurewebsites

打包您的应用

在生产中部署您的 Microsoft Teams 应用是一个两步过程；第一个是我们已经讨论过的在云中托管代码。第二个是打包您的应用配置，并在 MSTeam 中上传和安装。您在一个带有两个图标的清单 JSON 文件中定义您的应用配置，并将其捆绑在一个应用包中。您将需要一个应用包来上传和安装您的团队应用，并发布到不同的渠道。应用包是一个包含三个文件(manifest.json、outline.png 和 color.png)的. zip 文件。

• 一个名为“ manifest.json ”的清单文件，它指定您的应用的属性，并指向您的体验所需的资源，如其选项卡配置页面的位置或其 bot 和域 URL 和范围的 Microsoft 应用 ID。

• 透明“轮廓”图标和全“颜色”图标。

创建清单

约曼生成器自动创建清单；如果你想创建一个，那么使用 MSTeam 中的 App Studio。您的清单文件必须命名为“manifest.json”并添加一般信息；app 版本；app ID 以及选项卡、机器人、消息传递扩展和连接器等功能。

始终使用当前清单架构:

"$schema": "https://developer.microsoft/json-schemas/teams/v1.7/MicrosoftTeams.schema.json",

核标准情报中心

在添加应用和访问应用时，应用包需要两个图标来识别您的应用体验。如前一节所述，图标必须包含在包中，并通过清单中的相对路径引用。每个路径的最大长度为 2048 字节，图标的格式为*.png。

强调色

MSTeam 在应用和标签库、机器人、弹出按钮等中使用彩色图标。该图标应为 192 x 192 像素；参见图 11-1 。你的图标可以是任何颜色，但是背景应该是强调色。

比如说你的公司是 JPOWER4。您将提交两个图标:

图 11-1

应用库的图标

1. 应用库(192 x 192)

2. 透明(32 x 32)

部署并发布您的应用

创建应用后，有三种发布方式可供选择:

• 直接上传你的 app。

• 将您的应用发布到您组织的应用目录。

• 通过 AppSource 发布应用。

将应用包上传到 Microsoft 团队

要测试您的应用，您需要将其上传到团队。上传会将应用添加到您选择的团队，团队可以像最终用户一样与之交互。

将应用发布到组织的应用目录

使用管理应用页面发布专为您的组织构建的应用。发布自定义应用后，您组织的应用商店中的用户即可使用该应用。有两种方法可以将自定义应用发布到您组织的应用商店。您使用的方式取决于您获取应用的方式。

• 批准自定义应用:如果开发人员使用团队应用提交 API 将应用直接提交到管理应用页面，请使用此方法。然后，您可以直接从应用详细信息页面查看和发布(或拒绝)应用。

• 上传 app 包:如果开发者把 app 包发给你，就用这个方法。zip 格式。您通过上传应用包来发布应用。

通过 AppSource 发布您的应用

将您的应用发布到 AppSource 可使其在 Web 上的团队应用目录中可用。

最佳实践

制表符

• 总是包含一个默认状态:如果你的标签页是可配置的或者静态的，总是包含一个默认状态；它将帮助您轻松设置选项卡。

• 深度链接:通过始终在标签中深度链接你的卡片和机器人，你可以在托管标签中显示更丰富的数据。

• 命名:始终使用有意义的全名，并将其与您的业务线对应起来。

蝇蛆病

• 机器人不是助手:机器人是专家，所以总是包括认知服务。

• 劝阻聊天:使用你的机器人进行对话；否则，将它重定向到任务完成。

• 介绍一些性格:例子:现在语音很流行，给你的 bot 介绍一些说话能力。

• 保持语气:始终包括友好、轻松的对话。

• 鼓励轻松的任务流:始终用任务流多轮互动提问；它将帮助用户从机器人那里获得正确的答案。

消息传递扩展

• 保持简单:消息扩展应该是轻量级和快速的，否则它将失去效用。如果您的搜索需求非常复杂或者需要多个参数，即使在最简单的情况下，包含它们也是可以的。

• 优化你的搜索结果:一个简洁的消息扩展将返回一个易于理解的搜索结果列表。我们建议包含一张图片和不超过两行的文本。

• 优化您的卡片:每个消息扩展都在卡片中生成。因为这是你的用户最后会看到的东西，所以要确保你的卡片有用、好看，并且易于分享。

信用卡

• 降低噪音:例如:MSTeam 应用支持一起发送多张卡片，但它们变得不太有用，因为无法在单个视图中看到响应的用户需要向下滚动。

• 在移动设备上测试:在创建卡片时，始终考虑移动设备。尽量避免大图片、大数据集和大段文字。还要考虑标题、宽度以及在手机上被截断的文本长度。发布到生产之前在移动设备中进行测试。

• 检查您的显卡:始终在移动、桌面和浏览器等所有平台上测试图像和视频。

避免在图形中包含文本:在文本字段中加载测试消息，但不要在图像或视频中加载。由于图像和视频是动态缩放的，因此图像中的任何文本都会加载到错误的位置。

任务模块

• 在频道中:使用任务模块与用户进行 1:1 的互动。任务模块可以防止不必要的机器人响应干扰频道，并避免将用户重定向到 1:1 聊天和丢失上下文。

• 在移动设备上测试:虽然任务模块中托管的自适应卡在移动设备上表现良好，但如果您选择创建自定义 HTML，它将需要使用我们的 CSS 来处理主题变化，并响应处理桌面和移动屏幕空间之间的差异。

• 简短的交互:你可以很容易地创建多步向导，但是将用户留在任务模块中可能会有问题，因为进来的消息会鼓励用户退出。如果你的任务真的很复杂或者很费时间，跳出到一个网页而不是一个任务模块。

• 错误:保持错误内联。不要在对话框上弹出对话框。

消息操作

• 简单的动作名称:保持名称简短:最多两个单词。

• 使用任务模块:允许通过在任务模块中暴露动作来控制动作，或者只是打开它来确认动作已经完成。

• 尝试使用自然语言处理 : NLP 可以帮助您的服务监听实体的关键字或同义词。

• 也尝试使用图形查询:一旦你在处理用户发送的文本，你就可以利用 MS Graph 来获得更多的上下文。这样做需要额外的权限，您需要通知用户。

活动源

• 保持简短:确保事情简短，因为较长的消息会被截断。

• 捆绑你的通知:如果你的服务经常同时发送许多通知，试着把它们组合成一个通知。例如:“分配给你 10 项任务。”

练习-将您的应用发布到您的组织

在前几章中，我们开发了团队应用并在本地进行了测试。Ngrok 允许我们快速测试应用。然而，在现实生活中，我们必须将这些团队应用部署到一些托管环境中，从那里它们可以被提供给 MSTeam。

在本练习中，我们将了解如何将您的应用部署和发布到您组织的生产环境中；也就是说，创建一个新的 Teams 应用，并将其资产部署到 Azure Content Delivery Network 作为托管解决方案。

在开始练习之前，请验证您的环境。在本练习中，我将使用下面提到的工具，这些工具安装在我的环境中:

• Microsoft Azure 订阅

• GitHub 帐户

• Node.js - v10.16.0

• NPM - 6.9.0

• 吞咽

  • CLI 版本:2.3.0

  • 本地版本:4.0.2

• MS 团队的约曼生成器- 2.14.0

• Visual Studio 代码

涉及的步骤

如果您想为生产部署 Teams 应用，请遵循以下步骤。

1. 在 Azure 中创建 Web 应用

2. 在 GitHub 中创建一个资源库

3. 使用“yo teams”创建应用

4. 使用 Git 部署到 Azure

5. 将包部署到团队来测试应用

在 Azure 中创建 Web 应用

在本节中，您将创建一个 web 应用，将您的应用发布到公共领域，以便从任何地方进行访问。打开浏览器，导航到 Azure 门户 https://portal.azure/ 。使用您在 Azure 订阅中使用的username@tenantname.onmicrosoft登录。

——https://portal.azure/

图 11-2

创建资源

• 创建新的资源组或使用现有的资源组。

• 在本练习中，我将使用现有的资源组“团队”

• 点击“创建资源”(图 11-2 )。

图 11-3

创建 Web 应用

• 选择“网络应用”(图 11-3 )。

图 11-4

创建和查看 Web 应用

• 使用 Windows 应用服务计划创建一个 Web 应用，并为其命名您的选项卡，与您在 Yeoman generator 中被要求提供 URL 时使用的名称相同。本例:https://deployfirstteamsapp. azurewebsites(图 11-4 )。

图 11-5

Web 应用已创建

• 点击查看和创建按钮创建一个 Web 应用(图 11-5 )。

图 11-6

配置设置

• 转到设置下的配置

• 在配置➤ 应用设置中添加以下按键(图 11-6 )

• 新的应用设置(图 11-7 )。

图 11-7

应用设置

Name = WEBSITE_NODE_DEFAULT_VERSION, Value = 8.10.0 and
Name = SCM_COMMAND_IDLE_TIMEOUT, Value = 1800

• 单击保存。

在 GitHub 中创建一个资源库

在本节中，您将创建一个新的存储库，并使用您的本地项目文件夹进行映射。打开浏览器，登录 GitHub 示例: https://github/jenkinsns (我的仓库)，如果没有 GitHub 仓库账号，那么创建一个。

图 11-8

创建新的存储库

• 转到存储库

• 单击“新建”按钮并创建新的存储库

• 储存库名称:deployfirstteamsapp

• 点击“创建资源库”按钮，在 GitHub 中创建新的资源库(图 11-8

图 11-9

用 GitHub 桌面打开

• 如果你的笔记本电脑或台式机中没有 GitHub Desktop，安装它。

• 点击代码按钮➤选择打开 GitHub 桌面(图 11-9 )。

图 11-10

克隆存储库

• 然后映射/克隆新应用的项目文件夹(图 11-10 )。

使用“yo teams”创建应用

在本节中，您将使用 Yeoman generator (yo teams)创建一个新的 tab Teams 应用:

图 11-11

yo 团队发电机

• 打开命令提示符

• 导航到从 github 映射/克隆的项目文件夹

• 示例:C:\ Jenkins \ jpower 4 \ Book \ app deployment \ deployfirsteamsapp

• 通过运行以下命令为 MSTeam 运行 Yeoman generator:yo Teams(图 11-11 )。

约曼将发射并问你一系列问题。用以下数值回答问题(图 11-12 ):

图 11-12

回答约曼问卷

• 您的解决方案名称是什么？部署 firstteamsapp

• 您想将文件放在哪里？使用当前文件夹

• 您的 Microsoft Teams 应用项目的标题？部署 firstteamsapp

• 你(公司)的名字？(最多 32 个字符)JPOWER4

• 您希望使用哪个清单版本？v1.6

• 如果您有 Microsoft Partner ID，请输入。(留空以跳过)

• 您希望在项目中添加哪些功能？一个标签

• 您将在其中托管此解决方案的 URL？ https://deployfirstteamsapp.azurewebsites ( 输入在 Azure Portal 中创建的 Web App URL)

• 当你的应用/标签加载时，你想显示加载指示器吗？不

• 是否要包括测试框架和初始测试？不

• 您希望将 Azure Applications Insights 用于遥测吗？不

• 默认选项卡名称？(最多 16 个字符)我的标签

• 您想创建哪种选项卡？个人(静态)

• 该选项卡是否需要 Azure AD 单点登录支持？不

Note

这些问题的大多数答案在创建项目后都可以更改。例如，在创建或测试项目时，项目所在的 URL 并不重要

图 11-13

Visual Studio 代码

• 使用代码打开 Visual Studio 代码。在命令提示符下(图 11-13 )。

• 为团队选项卡应用添加您的功能

• 保存

使用 Git 部署到 Azure

在本节中，您将设置在前面步骤中创建的 web app 部署中心，并使用 GitHub 存储库配置部署构建服务。

1. 转到命令提示符

2. 在选项卡文件夹中，使用 git init 初始化 Git 存储库

3. 使用 gulp build 构建解决方案，确保没有任何错误

4. 使用**git add-A&git commit-m“初始提交”**提交所有文件

5. 运行以下命令来设置远程存储库:

   git remote add azure  https://<username>@deployfirstteamsapp.scm.azurewebsites:443/deployfirstteamsapp.git.
   
   

6. 您需要将其替换为您在部署凭据中检索的应用凭据的用户名。你也可以从 Azure Web 应用的选项中复制 URL(图 11-19 )。

   i.e., git remote add azure  https://$deployfirstteamsapp@deployfirstteamsapp.scm.azurewebsites:443/deployfirstteamsapp.git
   
   

7. 要将您的代码应用到 Azure，请使用以下命令:

图 11-18

存储部署凭据

1. 安全地复制和存储应用凭证(图 11-18

   1. Git 克隆 URL

   2. 用户名

   3. 密码

图 11-17

获取部署凭据

1. 单击完成

2. 点击部署凭证(图 11-17

图 11-16

应用服务构建服务

1. App Service 作为构建提供者构建服务(图 11-16 )。

图 11-15

部署中心的本地 Git

图 11-14

Web 应用部署中心

1. 登录 Azure 门户- https://portal.azure/

2. 打开创建的 web appdeployfirsteamsapp(图 11-14 )

3. 进入部署中的部署中心(图 11-15

4. 选择本地 Git 作为源

5. 完成的

6. 对您执行的和想要部署的每个提交重复步骤 11。

图 11-20

部署开始

1. 等到部署完成后，导航到 https://deployfirstteamsapp.azurewebsites/privacy.html 来测试 web 应用是否正在运行(图 11-20 )。

图 11-19

输入部署密码

1. 第一次会要求您提供凭据，因此请输入应用凭据的密码。

git push azure master

将包部署到团队来测试应用

现在让我们在 MSTeam 中安装应用。在浏览器中，导航至 https://teams.microsoft 并登录。

使用应用栏导航菜单，选择更多添加的应用按钮。然后选择更多应用，接着上传自定义应用，然后为我或我的团队上传(图 11-21 )。

图 11-21

向 MS 团队添加应用

在出现的文件对话框中，选择项目中的 Microsoft Teams 包。这个应用包是一个 ZIP 文件，可以在项目中找到。/包文件夹(图 11-22 )。

图 11-22

上传应用

安装后，您将能够在应用列表中看到该应用(图 11-23 )。

图 11-23

安装的个人应用

点击该应用，MSTeam 将显示该应用的摘要(图 11-24 )。

图 11-24

添加个人选项卡

测试部署的应用

图 11-25

个人标签输出

• 单击“添加”按钮，导航到“个人”选项卡进行测试。

• 此外，您可以将个人选项卡永久固定在最左侧的导航栏中。

• 或者选择…菜单并从列表中选择您的应用(图 11-25 )。

在本练习中，您已经在 Azure Web 应用中部署了您的代码，并将该应用作为个人选项卡安装在 Microsoft Teams 中，并从 Microsoft Teams 客户端对其进行了测试。

结论

在本章中，您学习了部署的各种功能、最佳实践，以及如何在 Azure Web 应用中部署您的代码，并使用 Yeoman generator (yo teams)和 Git 将应用安装到 Microsoft 团队。您还学习了如何使用 Git for Microsoft Teams 在 Azure 中部署 Teams 应用。

这本书向您展示了如何为 MSTeam 构建业务线应用。虽然有很多方法来开发团队定制应用，但与其他工具相比，yo teams 更好，这些工具可以轻松开发和部署，没有任何依赖性。本书涵盖了消息传递扩展、机器人、标签、Webhooks 和连接器的逐步构建。它还涵盖了团队和现成的应用模板和部署神话表面 SPFx。

本文标签： 解决方案 教程 MSTeam