MSTeam-解决方案构建教程-全-

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

原文：Building Solutions with Microsoft Teams

协议：CC BY-NC-SA 4.0

一、概述：MSTeam 开发平台

本章涵盖了组织工作的发展方式，以及员工如何与您的应用交互，以及您的应用如何与员工交互。我们将讨论团队的可扩展平台和能力，以及针对您的业务线的不同类型的业务解决方案机会。

我们还将发现高层架构，以及团队客户机和关键服务如何一起工作来交付团队功能。这包括对消息传递如何工作、数据存储在团队中的何处、数据如何流入和流出团队以及遵从边界在哪里的高级理解。

最后，这一章讲述了为什么你必须为团队开发应用，并投资为团队开发定制的解决方案。

目标

这本书有助于理解团队中可用的开发人员平台以及可以创建的应用类型。随着 Teams 与许多 Microsoft 365 服务的集成，我们需要了解 Teams 架构如何支持可扩展性，以及我们的应用如何使用现有的系统组件。接下来，我们将深入研究团队的解决方案开发。这本书解释了机器人，消息操作，消息扩展，任务模块，个人应用，等等。

下一步是通过使用加速器使开发变得轻量级。PowerApps 和 Flow 以及其他无到低代码工具帮助团队快速构建解决方案。您还可以利用 SharePoint 开发中的现有技能。

最后，我们将通过了解最佳实践、应用打包和发布以及通过商店提供应用来完善我们的学习，并了解开发人员在团队中可以做些什么。

Microsoft 团队概述

如今的员工比以往任何时候都更具移动性、社会性和全球性。人们有不同的技术背景，对沟通和协作工具有不同的期望。但是不管人们更喜欢什么样的电话和会议工具，有一点是明确的:他们的大部分时间都花在了合作上。我们想让这变得更容易。

如果你不提供工具来支持这些新的工作方式，会发生什么？为了完成眼前的任务，最终用户下载消费级工具，这给最终用户带来了摩擦，因为他们必须管理多次登录并在不同的体验之间切换，并且随着影子 it 的发展，给组织带来了风险。

所有领导者关心的事情之一是确保他们所有的 IP 和信息是安全的。人们正在寻找一种协作解决方案，它适用于多样化的劳动力，包括社交用途的各个方面，基于现代和安全的东西，这就是团队和微软 365 所提供的。

Microsoft 365 有助于在团队内部与项目中的工作人员进行更有效的沟通。它使人们能够在任何设备上工作，无论是移动设备还是您的计算机。企业最重要的目标之一是自动化业务流程，作为一个平台，团队提供了实现这一目标的方法。

此外，人们真的希望定制他们的工作场所，尤其是当他们与一群人一起工作时，他们希望根据他们正在工作的内容定制空间。在做所有这些事情的同时，他们还在考虑如何保护对企业的访问，从而保护他们的信息并抵御网络威胁。

团队架构

当我们讨论架构、安全性和法规遵从性时，记住这三个原则很重要:

• 专为云设计

• 大规模敏捷性

• 扩大 Office 365 的价值

如果它是设计出来的，那它就是为云而建的。(它可以在内部运行吗？否)团队希望能够利用所有最新、最棒的 Microsoft 365 服务和功能。

团队架构的另一个优势是它可以大规模敏捷。快速交付和能够快速推出新功能是一些主要目标。如果你使用团队已经有一段时间了，你会经历这种快速发展。团队目前每周大约有一个构建。但不仅仅是新功能；如果也有一些东西需要修复，一个团队的工程团队可以很快地修复它，并把改变传达给客户。

如果您熟悉团队，您会知道它是一个以聊天为中心的工作区，是一个团队合作的中心，汇集了 Office 365 中的许多功能:组、规划器、Power BI、SharePoint、Office、Excel、Word、Visual Studio Teams 系统，以及您可以通过选项卡、连接器和机器人引入的合作伙伴服务。所有这些不同的部分将以一种方式集成，使它们更好地结合在一起，并允许您的团队使用它们进行协作。

团队加入微软 365 智能通信

从架构角度来看，Teams 将 Office 365 和 Skype 结合在一起，因此 Teams 位于 Office 365 和 Skype 之间，位于 Azure 之上。团队内部的服务实际上是一个编排层，它将其他部分汇集在一起，然后使您能够将一个现代组附加到一组聊天中，或者确保在您创建团队和任何人都可以使用的可扩展 Azure 基础架构时提供 SharePoint 站点。比如将一个现代群组附加到一组聊天中，或者确保在创建团队和可扩展的 Azure 基础架构时提供 SharePoint 站点，你们任何人都可以使用这些基础架构。见图 1-1 。

图 1-1

MSTeam 架构

From an architecture perspective, Teams brings together Office 365 and Skype, so Teams sits between Office 365 and Skype and on top of Azure. The services inside Teams are really an orchestration layer that brings the other pieces together and then enables you to attach a modern group to a set of chats or to make sure a SharePoint site is provisioned when you create a Team and scalable Azure infrastructure that can be used by anyone. Things like attach a modern group to a set of chats or to make sure a SharePoint site is provisioned when you create a Team and scalable Azure infrastructure that any of you can use. See Figure

团队服务

让我们仔细看看我们所说的“中间层”这些是团队工程团队为创建团队而构建的服务，而其他服务需要依赖关系。它是一组微服务的集合，每个微服务都有特定的功能。它被构建为允许它单独部署每个部分。参见图 1-2 。

图 1-2

团队服务

Let’s take a closer look at what we call the “middle tier.” These are the services that the Teams engineering team built to create Teams vs. the other services that take dependencies. It is a collection of microservices that all have a specific function. It has been built to allow it to deploy each piece separately. See Figure

其中大多数都有更多的编排组件。但团队所做的是，所有 O365 (Office 365)功能都被占用，所有现代 Skype 基础设施都被集中在这个以聊天为中心的现代工作空间，即团队合作的中心。它是一组前端服务器，允许 It 发送 HTML/JavaScript/TypeScript 有效负载，并使我们能够处理配置，以便您获得具有正确功能集的正确产品版本。

身份:Microsoft Teams 拥有并管理一个活动目录同步，以确保您的团队和现代团体保持同步。他们也有认证。这是一个神奇的地方，他们能判断出你是否有许可证，团队是否开启，或者你是否有权使用它。然后为了合规，他们拥有两个服务。一个叫做审计，另一个叫做保留挂钩。

审计服务是捕获来自团队的所有事件的地方，包括像创建团队、创建通道和删除通道这样的事件。所有这些都是您的 It 管理员想要了解的。团队将这些注入标准 O365 基础架构，因此您可以在安全和合规中心的审核日志中看到它们。团队保持持续的聊天，无限期地保存数据。但是一些组织认为这些数据是一种负担，一旦他们认为这些数据不再有用，就想把它们处理掉。

团队还处理通知。聊天服务中有一个消防水管，可以为我们提供每条消息，如果你在过去的 60/ 90 分钟内没有在线，但你有一条新消息，团队可以向你发送电子邮件或推送通知。

团队管理是完成所有管理工作的地方，如创建团队、创建 SharePoint 团队网站和创建 Office 365 组。对于可扩展性，Teams 有一组服务来支持，图形 API、选项卡和 bot 创建/管理。对于配置，Teams 将元数据存储在许多不同的位置，有些存储在 Skype 的聊天服务中，有些存储在组中，但也有一些特定的 Office 365 配置存储在用户设置、配置文件和租户映射中。

智能通信云

团队在很大程度上依赖于 Skype 所擅长的——聊天、会议、通话和所有支持它的服务。您在下图中看到的一组微服务是 Skype 和 Skype for Business 之间的下一代融合核心服务(图 1-3 )。

因为 Teams 是以聊天为中心的，所以它对我们的许多 Skype 消息服务下了很大的赌注。Teams 有一个非常强大的搜索功能，在现代的 Skype 端有一套微服务——聊天、媒体——图片存储在那里。

图 1-3

智能通信云

Teams 也有 URL 预览服务，就像其他现代应用一样。当你输入网址时，Teams 会给你一个小小的预览，所以你可以很容易地分享网址，每个人都知道他们点击的是什么。通知中心让您知道新邮件何时到达您的客户端。

服务呼叫/会议都很重要，并为团队中的会议/呼叫体验提供动力。团队的目标是将 Skype 和 Skype for Business 的精华融合在一起，团队的工程团队由相同的开发人员工作并拥有这些产品。

例如，云记录服务将来自用户/客户端的内容聚合到正在记录的通话或会议中，将它们发送到正确的数据结构中，然后将它们发送到 Microsoft streams，在那里存储所有云记录供以后使用。

然后 Teams 提供身份和许可服务，这是 Teams 将 AAD 用户映射到 Skype 世界的方式，Skype 世界依赖于 Skype 令牌。许可服务是一个地方，例如，一些变化，使客人用户进行。

逻辑架构

图 1-4 是 MSTeam 的逻辑架构。这张图表显示了一切是如何联系在一起的。每个团队都有一个 Microsoft 365 Group 和 SharePoint Team Site 作为其基础成员结构。对于公共频道，所有文件都存储在 SharePoint 工作组网站文档库文件夹中；对于聊天，私有频道将所有文件存储在单独的 SharePoint 网站和 OneDrive 中。

图 1-4

逻辑架构

对话存储在哪里？

聊天服务

• 提高内存处理速度

• 利用 Azure 存储(blob、表、队列)

团队背后有聊天服务，有自己的物理存储。但是你可以想象一下，当你把一个聊天信息从发送者发送到接收者时，你希望它立即到达那里。因此，大多数处理都发生在内存中，并由 Azure 存储提供支持。

基底/交换

• 聊天和频道消息也被存储以换取信息保护。

Teams 将聊天信息存储在 Exchange 中，以实现信息保护。如果你在团队中聊天，那就要用到聊天服务。Teams 内部有一个被称为 substrate 的服务，它查看聊天并决定如何处理它。

有两种选择:

• 如果是数字聊天，那么它会被发布到每个聊天参与者邮箱中的隐藏文件夹中。

• 如果您在小组对话中，该小组对话会发布到与该小组相关联的组邮箱中的隐藏文件夹中。

对话图像和媒体

内嵌图像/贴纸存储在媒体存储中，但 Giphys 不存储。

文件存储在哪里？

1: N 只猫

文件上传到 OneDrive for Business，并为聊天成员设置权限。

团队对话

文件被上传到 SharePoint。一个文件夹与团队中的每个频道相关联。

云存储

Dropbox，box，Citrix ShareFile，Google Drive。

团队如何实现 O365 信息保护

当你在团队中聊天时，这就变成了聊天服务(图 1-5 )。然后 Teams 内部有一个服务，它称之为 s substrate。它会查看聊天内容并决定如何处理。如果您与某人进行一对一的聊天，那么该聊天会被发布到该对话的所有参与者的用户邮箱中的隐藏文件夹中。如果您有一个团队对话，该聊天将被发布到群组邮箱中。然后，文件(SharePoint 或 OneDrive for Business 和 OneNote/Wiki)也以物理方式存储在 SharePoint 中。

这样，您现在可能在 Exchange 和 SharePoint 中使用的所有信息保护工具都可供您使用。如今，信息保护功能仅在邮箱在线时才起作用(当邮箱在本地时，它不起作用)。

图 1-5

O365 信息保护

团队可扩展的平台功能

Teams 是办公室的单一中心，可以减少您每天收到的信息过载，并专注于与您最相关的内容，从而更好地完成您的工作。它将您的组织已经在使用的所有应用和工具整合到一个用户界面中；对 IT 部门而言，这意味着更好、更轻松的管理，减少安全威胁，让您有更多时间投入到有价值的前瞻性项目中。

这通过主动智能将超能力传递给人们，并且是团队平台可扩展性的核心。Teams 使用我们的 API 和/或我们的合作伙伴社区来提供智能体验，这些 API 和/或合作伙伴社区可以做到以下几点:首先，让工作中最困难、最浪费时间的任务变得简单。此后，将智慧传递给你的员工，让他们了解他们如何为组织增加更多价值，然后更高效、更快速地交付这些价值。参见图 1-6 。

图 1-6

可扩展平台

Teams 是一个非常可扩展的平台，具有许多功能。请将此视为您的员工与您的应用交互的方式，或者您的应用与员工交互的方式，无论是通过聊天、频道、通知，还是在他们的个人工作区或团队工作区。

其中一些是 ?? 的机器人。大多数人对机器人都很熟悉。一个受欢迎的例子是，你可以通过启动一个机器人来提问和获得答案。机器人帮助用户在团队对话中完成任务。机器人可以做的事情包括启动工作流并提供工作流的状态，给予和接受团队成员的称赞，创建轻量级调查以衡量员工满意度，以及回答关于销售和客户使用数据的自然语言问题。

标签为你提供了一个丰富的界面，你可以在标签中发布应用的任何信息，这样用户就可以直接看到，或者你也可以在标签中发布应用。

选项卡允许您在团队中展示丰富的内容，因此您可以将团队关心的工具和服务直接带入频道或私人聊天中。然后，您可以添加丰富的仪表板和数据可视化，在文档和笔记上进行协作，管理整个小组的任务，以及共享设计。

通知通过订阅源通知吸引用户，无论是在订阅源中还是在频道中，这样您就可以通知人们，例如，如果您的应用发生了变化，您正在扩展到团队中，您可以向用户提供通知。

消息扩展允许用户在对话中查询和分享丰富的卡片。消息传递扩展为人们提供了一种方式，让他们可以在对话中真正地获取、查询和分享丰富的卡片；顺便说一句，用户可以在这些卡片上采取行动，给你反馈，并根据这些反馈提供额外的信息。您拥有可以启动工作流源搜索内容的命令和操作。借助可操作的信息，您可以向连接器卡添加丰富的内容。

任务模块让你从机器人卡片或标签打开一个对话框。当您需要做一些表单输入、查找或保持频道外的 1:1 交互时，弹出一个对话框。

连接器帮助将有用的信息和丰富的内容从外部服务带入 MSTeam 的渠道。您可以获得社交媒体通知、关于拉和推请求的更新以及新闻更新。

微软图形是一个统一的 REST API 和全面的开发者体验，用于集成微软服务公开的数据和智能。

——添加丰富的通话、会议自动化和媒体。

** 自适应卡是微软产品(包括机器人、Cortana、Outlook 和 Windows)中卡的一种新的跨产品规范。它们是新团队发展的推荐卡类型。您可以使用自适应卡、现有英雄卡、Office 365 卡和缩略图卡。

需要考虑的一件重要事情是，你有能力将一些东西放在团队环境中，例如，放在多人的频道中，或者你放在某人的个人频道中，这实际上是针对个人的，就你如何发布东西而言。Teams 允许你为测试和开发附加一些东西。如果它是一个完全定制的打包解决方案，您可以在团队应用商店中构建和发布；如果它是一个定制应用，实际上是为一个单独的客户定制的，您可以使用应用商店进行部署。想象一下，每个客户都有自己公司的私人应用商店，你可以在那里下载。

利用员工需要的工具，改进他们的工作方式

MSTeam 的魅力之一是，团队确实是人们完成工作的中心，因此他们希望确保他们需要的所有工具都是团队的一部分。这样他们就不必更换联系人，我们认为这是两种不同类型的应用。

自定义和扩展团队的第一部分是将您所知道的所有 Microsoft Office 应用集合在一起，允许您减少上下文切换并围绕内容创建对话。

这种工具融合的第二部分是您每天需要的所有其他应用和服务汇集在一起，以完成您的工作。MSTeam 商店目前拥有超过 250 个合作伙伴应用和集成，并且还在不断增加(图 1-7 )。

图 1-7

团队应用的类型

这里的前两层是随时可用的应用，只要您下载了团队，IT 管理员就可以向您提供它们。

Microsoft Teams 还使您能够扩展您的体验，以利用您的组织为您构建的应用和服务；作为一名员工，这些是你每天都需要利用的工具，以完成工作，也是你职责的一部分。它被称为业务线(LOB)应用(自定义应用)。

不同行业和水平的应用场景

本节-不同行业和水平的应用场景的目的是给你一些想法，并开始思考你的客户需要什么(图 1-8 )。

图 1-8

团队应用场景

围绕团队合作的这些类型的商业解决方案机会几乎是无穷无尽的:来自航空公司、零售、医疗保健、法律事务所、房地产、不同的行业和不同的职能部门。您可以与客户一起设想，了解他们的业务流程和团队合作需求，并将团队与他们每天使用的工具和服务联系起来，以帮助他们充分实现团队的价值。

为什么一定要给团队做 app？

MSTeam 平台是一个强大、灵活的平台，用于为 MSTeam 创建应用。然而，这并不意味着它将适合所有场景。在本节中，我们将讨论团队应用的一些关键场景。

加强沟通和协作

当团队应用专注于增强协作和交流时，它们会大放异彩。大多数成功的 Teams 应用要么以某种形式从另一个系统获取信息，就此展开对话，并允许用户直接在 Teams 客户端内对该信息采取行动，要么根据外部系统中的事件或行动将信息推送给目标受众。

鼓励社会互动

专注于鼓励团队成员之间社交互动的应用发挥了作用。这些应用可以发送民意调查，让人们互相发送反馈，将他们联系在一起，或者只是为了好玩(不要低估一些“只是为了好玩”的应用对团队士气的影响)。团队是一个社交平台；定制的社交应用鼓励你的团队将你的公司文化扩展到你的协作空间。

启动和促进通用业务流程

团队可以是一个有效的平台，用于启动和促进通用业务流程的完成。创建和共享销售拜访报告、根据项目跟踪您的时间、保留公共资源、提交帮助台请求等等，都有助于开发高效的团队应用。通常已经有一些其他系统负责完成这些动作。在这些情况下，使用团队作为启动流程的桥梁，并在流程中进行沟通，可以创建一个有效的混合应用。

浮现部分(或全部)现有应用

如果你有一个现有的 web 应用、SharePoint 站点(或 SPFx 扩展)、PowerApps 或其他基于 web 的应用，在团队中启用其中的部分或全部可能是有意义的。只是一定要仔细考虑上下文和范围。如果你启用你的导航，并形成一个沉重的网站作为一个频道标签，它可能不会工作得很好。

带有标签和机器人的个人应用

一对一对话机器人是 MSTeam 中最开放的可扩展性点之一。对话只是在机器人和用户之间进行，您可以灵活地包含任务模块，以简化复杂信息集的收集，并且您可以将它们与个人范围的选项卡相结合。使用这个画布，您可以在团队客户端中创建完整的传统应用体验。

为什么您必须投资为团队构建定制解决方案？

第一个原因是让你的报价与众不同。有许多合作伙伴正在围绕 Office 365 或 MSTeam 进行部署，但构建定制解决方案并展示定制解决方案的合作伙伴实际上实现了两件事:

• 他们让客户感到兴奋，因为这向客户展示了 MSTeam 能为他们做什么的真实愿景。

• 这有助于他们脱颖而出，从所有其他部署合作伙伴中脱颖而出。

它能让你提高盈利能力。微软与 Forrester 合作进行了一项研究，发现为 MSTeam 构建定制解决方案可将您的盈利能力提高 17%，并且使您能够对利润更高的开发人员资源进行收费。

这有助于你接触到更广泛的受众。这使您能够与业务决策者和真正重视这一点的最终用户交谈，这有助于您真正为业务部门增加价值。这也有助于增加你与特定行业的相关性。

结论

在本章中，我们学习了组织工作发展的方式，并了解到我们正在构建一个平台，而团队是一个非常可扩展的平台，为您的业务线提供了许多功能和不同类型的业务解决方案机会。

我们还学习了高层架构，团队客户和关键服务如何一起工作来交付团队能力。我们还对消息传递的工作方式、数据在团队中的存储方式/位置、数据在团队中的流入和流出以及合规性边界有了更深入的了解。

最后，在这一章中，我们讨论了为什么你必须为团队开发应用，为什么你必须投资为团队开发定制的解决方案。

既然我们已经学习了 MSTeam 开发平台的基础知识，我们将在接下来的章节中开始开发 MSTeam 应用。**

二、使用 MSTeam 构建应用和解决方案

本章介绍了设置环境，并解释了如何使用 Yeoman Generator 为 MSTeam 创建应用。NET 与 c#和 Nodejs。它还描述了关于团队应用业务线的各种上下文和场景。

MSTeam 开发者平台概述

Microsoft Teams developer platform 使您能够轻松扩展团队，并将您自己的应用和服务无缝集成到团队工作区中。然后，这些应用可以分发给您的企业或世界各地的团队。

要开始为团队开发，决定很多点是很重要的。首先，当你在构建任何应用时，你需要问自己，它真的为一个团队解决了一个现实世界的问题吗？你不想构建不能解决任何业务问题的东西，因为你的应用不会有用户。接下来，一个重要的决策点将是用户使用该应用的频率。如果你的应用价值主张和与之相关的努力和成本之间没有很好的平衡，那么你可能需要探索其他选择。

团队就是用户的体验和他们与工具的互动。如果你想让一个应用赢得人民选择奖，那么考虑用户角色，以及你的应用如何改善他们的生活。

以下是团队应用的集成点。

• 带有搜索命令的消息传递扩展

  • 搜索外部系统，并以互动卡的形式共享结果。

• 带有动作命令的消息传递扩展

  • 收集信息以插入数据存储或执行高级搜索。

• 制表符

  • 创建嵌入式 web 体验来查看、处理和共享数据。

• 连接器和网钩

  • 将数据推入团队客户端和从团队客户端发送数据的简单方法。

• 任务模块

  • 从任何需要的地方收集或显示信息的交互式模态表单。

为 Microsoft 团队设置开发环境

若要扩展 Microsoft Teams，您需要创建 Microsoft Teams 应用。Microsoft Teams 应用是您托管的 web 应用。然后，这个应用可以集成到团队中的用户工作区。

作为团队开发人员，您可以使用不同的方法和知识来扩展团队平台。你可以利用你之前的知识。Net 结合 C# / NodeJS / SPFx 开发团队应用。

您可以通过利用现有知识创建自定义应用来扩展 Teams developer platform 的功能。Microsoft Teams 开发平台目前支持三种语言:。Net、JavaScript 和 Python。参见图 2-1 。

图 2-1

Microsoft 团队应用支持的语言

此外，MSTeam 开发平台支持六种不同的 ide 来开发 MSTeam 应用(图 2-2 )。

图 2-2

MSTeam 应用不同的 ide

1. 使用 C#/的 MSTeam 平台。NET 和 App Studio

2. MSTeam 平台与 Node.js 和 App Studio

3. MSTeam 平台与约曼发电机

4. 带有 SharePoint 框架的 Microsoft 团队平台

5. 用于 Visual Studio 代码的 MSTeam 工具包

6. MSTeam 平台与 Phyton 和 App Studio

准备好你的 Office 365 租户

让我们准备开发环境。确保为您要在其中构建应用的 Microsoft 365 组织启用了自定义应用上传。如果您需要专门的开发租户，请注册 Office 365 开发人员计划。确保你有一个可以上传和测试你的团队应用的环境。

1. 注册 Microsoft 365 开发人员订阅。

   关注本帖: http://jenkinsblogs.com/2020/03/06/set-up-a-microsoft-365-developer-subscription-for-learning/

2. 启用自定义团队应用并打开自定义应用上传。

   1. 有三种设置与启用自定义应用和自定义应用上传相关:

      • 组织范围的自定义应用设置➤允许与上的自定义应用➤进行交互

        此设置为您的组织启用或禁用自定义应用。它需要打开。

      • 团队自定义应用设置➤允许成员上传自定义应用➤开/关

      • 此设置适用于 Microsoft 团队中的每个团队。如果你想为一个特定的团队安装你的应用，这将需要为该团队打开。

      • 用户自定义应用策略➤用户可以上传自定义应用➤开/关

        此设置控制单个用户的权限。你需要为可以上传自定义应用的个人启用此功能。

接下来，根据您的知识和客户喜欢的方法准备您的开发环境。我们有四个不同的选项来开发 MSTeam 应用。

• 准备您的开发环境。网

• 为 NodeJS 准备开发环境

• 为约曼发电机准备您的开发环境

• 使用 Microsoft Teams Toolkit for Visual Studio 代码准备开发环境

根据您的知识，选择一个并准备您的开发环境。

准备您的开发环境。网

以下是步骤:

• 安装 Visual Studio

  • https://www.visualstudio.com/downloads/

  • 你可以安装免费的社区版。

• 安装 MSTeam 应用

  • https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.vsteamstemplate

  • 直接从 Visual Studio 创建、调试和部署团队应用。

• 安装 Git

  • https://git-scm.com/downloads

如果在安装过程中看到将 git 添加到路径中的选项，请选择这样做。会得心应手。通过在终端窗口中运行以下命令来验证您的 git 安装:

$ git --version
git version 2.17.1.windows.2

确保启动最新版本的 Visual Studio 并安装任何更新(如果显示)。

Microsoft Teams Toolkit for Visual Studio

Microsoft Teams Toolkit 扩展使您能够直接从 Visual Studio 代码创建、调试和部署 Teams 应用。

特征

• 项目生成器

• 应用配置管理器

• 包验证器

• 从 Visual Studio 发布到您的租户应用目录

为 NodeJS 准备开发环境

以下是步骤:

• 安装 Git

  • https://git-scm.com/downloads

• Node.js 和 NPM

  • https://nodejs.org/dist/latest-v8.x/

  • 您需要在您的机器上安装 NodeJS。你应该使用最新的 LTS 版本。

• 安装代码编辑器

  • https://code.visualstudio.com/

  • 获取任何文本编辑器或 IDE。您可以免费安装和使用 Visual Studio 代码。

如果在安装过程中看到将 git、节点、npm 和代码添加到路径的选项，请选择这样做。会得心应手。通过在终端窗口中运行以下命令，验证这些工具是否可用:

$ git --version
git version 2.19.0.windows.1

$ node -v
v8.9.3

$ npm -v
5.5.1

$ gulp -v
CLI version 4.0.2

您可能有这些应用的不同版本。这应该不是问题，除了 gulp。对于 gulp，您需要使用版本 4.0.0 或更高版本。如果你没有安装 gulp(或者安装了错误的版本)，现在可以在你的终端窗口中运行 npm 安装 gulp 来安装。

为约曼发电机准备您的开发环境

为了完整起见，下面是如何准备约曼发电机:

• 安装 NodeJS

• 安装一个代码编辑器(我也在使用 Visual Studio 代码)。

• 安装约曼和吞咽 CLI

  为了能够使用 Teams generator 搭建项目，您需要安装 Yeoman 工具以及 Gulp CLI 任务管理器。

  打开命令提示符，键入以下内容:

• 安装 Microsoft 团队应用生成器

  Microsoft Teams apps 的 Yeoman 生成器是使用以下命令安装的:

npm install yo gulp-cli typescript –global

npm install generator-teams –global

使用 Microsoft Teams Toolkit for Visual Studio 代码准备开发环境

Microsoft Teams Toolkit 扩展使您能够直接从 Visual Studio 代码创建、调试和部署 Teams 应用。

先决条件

• Visual Studio 代码 v1.44 或更高版本

  • https://code.visualstudio.com/download

• NodeJS 6 或更新版本

  • https://nodejs.org/en/

• 安装 Microsoft 团队工具包

  • https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension

  • 直接从 Visual Studio 代码创建、调试和部署团队应用

托管应用

MSTeam 中的应用是公开一个或多个功能的 web 应用。要让 Teams platform 加载您的应用，您的应用必须可从互联网访问。要使您的应用可从互联网访问，您需要托管您的应用。你可以将它免费托管在微软 Azure 中，或者使用 ngrok ( https://ngrok.com/ )在你的开发机器上创建一个到本地进程的隧道。完成应用托管后，记下它的根 URL。它看起来会像下面这样:

• https://yourteamsapp.ngrok.io

• https://yourteamsapp.azurewebsites.net

使用 ngrok 的隧道

为了快速测试，您可以在本地机器上运行应用，并通过 web 端点创建一个到它的隧道。Ngrok 是一个免费的工具，可以让你做到这一点。用 ngrok 你可以得到一个网址，比如 https://d0ac14a5.ngrok.io (这个 URL 只是一个例子)。您可以为您的环境下载并安装 ngrok。确保将它添加到路径中的某个位置。

安装后，您可以打开一个新的终端窗口并运行以下命令来创建隧道。该示例使用端口 3333，因此请确保在此处指定它。

ngrok http 3333 -host-header=localhost:3333

Ngrok 将侦听来自互联网的请求，并将它们路由到运行在端口 3333 上的应用。你可以打开你的浏览器，进入 https://d0ac14a5.ngrok.io/hello 来加载你的应用的 hello 页面。请确保在您的控制台会话中使用 ngrok 显示的转发地址，而不是此 URL。

该应用仅在您的开发计算机上的当前会话期间可用。如果机器关闭或进入睡眠状态，该服务将不再可用。分享应用供其他用户测试时，请记住这一点。如果你必须重新启动服务，它将返回一个新的地址，你将不得不更新每个使用该地址的地方。付费版 ngrok 没有这个限制。

MSTeam 应用

每当我们想要创建一个应用时，首先我们要为团队注册一个新的 Bot 频道注册，而不是 Tabs。参见图 2-3 。

图 2-3

MSTeam 应用

接下来，根据您的喜好，使用任何一种开发环境来开发应用。然后使用 App Studio 创建一个应用包。

练习 1:使用 Yeoman Generator 创建第一个 MSTeam 应用

创建和分发基于 Microsoft Teams 平台构建的应用涉及 Bot 渠道注册、在各种上下文中对应用进行分组、使用 App Studio 定义应用、决定构建什么、构建您的 web 服务、创建应用包，以及将该包分发到您的目标最终用户(图 2-4 )。

图 2-4

构建团队应用流程

向微软 Azure 的机器人框架注册机器人

第一步是为您的 Microsoft Teams 应用创建一个新的 Microsoft Teams bot。

打开浏览器，导航到 Azure 门户( https://portal.azure.com/ )。使用您在 Azure 订阅中使用的username@tenantname.onmicrosoft.com登录。

在左侧导航栏中选择创建资源。见图 2-5 。

图 2-5

创建资源

在搜索市场输入框中输入资源组，然后选择资源组。参见图 2-6 。

图 2-6

资源组

在资源组页面，选择创建按钮，创建一个新的资源组。见图 2-7 。

图 2-7

创建资源组

选择一个有效的订阅，输入资源组的名称，例如:Teams ，并选择想要的区域。这些选择都不会影响机器人注册，这取决于你。见图 2-8 。

图 2-8

创建资源组表单

完成向导以创建资源组。参见图 2-9 。

图 2-9

资源组创建通知

Azure 完成资源组创建过程后，导航到资源组。

在资源组中，选择添加或创建资源按钮，如图 2-10 所示。

图 2-10

创建资源

Bot 渠道注册

在搜索市场输入框中输入 bot ，在返回的资源列表中选择 Bot 频道注册。然后在下一页选择 Create 开始注册新的 bot 资源。参见图 2-11 。

图 2-11

搜索机器人频道注册

在 Bot 通道注册页面，点击发起创建 Bot 通道注册。见图 2-12 。

图 2-12

Bot 渠道注册

在 Bot 通道注册刀片中，输入以下值，然后选择创建，如图 2-13 所示。

图 2-13

创建 Bot 渠道注册

• 机器人句柄:为机器人输入一个全局唯一的名称。

• 订阅:选择之前创建资源组时选择的订阅。

• 资源组:选择您之前创建的资源组。

• 地点:选择你喜欢的 Azure 地区。

• 定价等级:选择首选的定价等级；F0 层是免费的。

• 消息传递端点 : https://REPLACE_THIS.ngrok.io/api/messages

  bot 注册需要知道实现 bot 的 web 服务的端点。这将在每次启动之前练习中使用的 ngrok 实用程序时发生变化。

• 应用洞察:关

• 微软应用 ID 和密码:自动创建应用 ID 和密码

Azure 将开始提供新资源。这需要一两分钟的时间。完成后，导航到资源组中的 bot 资源。参见图 2-14 。

图 2-14

Bot 渠道注册

为机器人启用 Microsoft Teams 频道

为了让机器人与 MSTeam 交互，你必须启用如图 2-15 所示的团队通道。

图 2-15

选择团队频道

• 从 Azure 的 bot 资源中，选择左侧导航中的通道。

• 在连接到频道面板上，选择MSTeam 频道，然后选择保存确认动作。

图 2-16

团队渠道服务条款

• 同意服务条款(图 2-16 )。

一旦此过程完成，您应该会在您启用的频道中看到列出的网络聊天和 MSTeam(图 2-17 )。

图 2-17

连接到频道

检索 Bot 应用 Id 和密码

当 Azure 创建这个机器人时，它还为这个机器人注册了一个新的 Azure 广告应用。您需要生成这个新的 bot 应用作为一个秘密，并复制应用的凭据。

从左侧导航栏中选择设置。向下滚动到 Microsoft App ID 部分。

复制机器人的 ID，因为你以后会需要它。参见图 2-18 。

图 2-18

应用标识

为应用创建客户端密码

点击管理链接，导航至 Azure 广告应用。

为了让守护程序应用在没有用户参与的情况下运行，它将使用应用 ID 和证书或密码登录 Azure AD。在本练习中，您将使用一个秘密。

从左侧导航面板中选择证书&机密。

选择客户端密码部分下的新客户端密码按钮(图 2-19 )。

图 2-19

新客户机密

出现提示时，对密码进行描述，并选择提供的到期持续时间选项之一，例如:从不，然后选择添加。

Note

复制新的客户端密码值。在您执行另一个操作或离开此刀片后，您将无法取回它。

“证书和机密”页面将显示新的机密。复制该值很重要，因为它只显示一次；如果您离开页面并返回，它将仅显示为屏蔽值(图 2-20 )。

图 2-20

新的客户端机密值

The Certificate & Secrets page will display the new secret. It’s important you copy this value as it’s only shown this one time; if you leave the page and come back, it will only show as a masked value (Figure

复制并存储秘密值的值，因为您以后会需要它。

各种环境下的团队应用

我们有三种类型的上下文可供团队应用使用。

• 团队和渠道

• 闲谈

• 个人的

团队和渠道

支持所有团队成员的公共协作和工作流。

示例:分享、讨论和获得有关新服务事件的通知

闲谈

1:1 或小组设置中的轻量级协作，没有复杂的权限

示例:经理和直接下属之间一对一的话题

个人

以用户为中心的视图，显示聚合内容以及私人机器人聊天

示例:分配给我的所有任务列表

范围

您的应用可能需要上下文信息来显示基于范围的相关内容。下面给出了从选项卡、机器人和连接器获取上下文的支持范围列表。

可配置选项卡

目前，可配置选项卡仅支持团队和群组聊天范围。也就是说，可配置选项卡仅在团队范围内受支持(非个人)，并且目前每个应用仅支持一个选项卡。

"scopes": ["team","groupchat"]

静态选项卡

目前，静态标签只支持个人范围，这意味着它只能作为个人体验的一部分来提供，也就是说，在个人范围内声明的静态标签总是固定在应用的个人体验中。目前不支持在团队范围内声明的静态选项卡。

"scopes": ["personal"]

蝇蛆病

这指定了 bot 是在团队中的频道上下文中、在群组聊天(group chat)中提供体验，还是仅在单个用户范围内提供体验(个人)。这些选项是非排他性的。

"scopes": ["team","personal","groupchat"],

机器人——命令列表

您必须为 bot 支持的每个范围定义一个单独的命令列表。这指定了命令列表的有效范围。选项包括团队、个人和群组聊天。

"scopes": ["team","groupchat"]
"scopes": ["personal", "groupchat"]

连接器

这指定了连接器是在团队中的通道环境中提供体验，还是在单个用户范围内提供体验(个人)。目前，仅支持团队范围。

"scopes": ["team"]

使用约曼生成器创建一个应用

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

图 2-21

使用 yo 团队创建团队应用

• 创建新的 web 部件项目

• 在您喜欢的位置创建一个新的项目目录

• 打开命令提示符

• 导航到一个新创建的目录，创建一个新文件夹“yoTeamsMessagingExtension”

• 通过运行以下命令来运行 MSTeam 的 Yeoman 生成器: yo teams 。见图 2-21 。

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

图 2-22

回答约曼问卷

• 您的解决方案名称是什么？:yo-团队-消息传递-扩展

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

• 您的 Microsoft Teams 应用项目的标题？yoTeamsMessagingExtension 扩展

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

• 您希望使用哪个清单版本？1.6

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

• 您希望在项目中添加哪些功能？消息扩展命令

• 您将在其中托管此解决方案的 URL？https://yoteamsmessagingextension.azurewebsites.net

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

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

• 您的消息扩展托管在哪里？在一个新机器人里

• 消息扩展使用的 bot 的 Microsoft 应用 ID 是什么？00000000-0000-0000-0000-000000000000

• 什么类型的消息传递扩展命令？基于搜索的消息传递扩展

• 您想要邮件扩展的设置选项吗？是

• 您的消息扩展命令的名称是什么？searchCmd

• 描述一下你的消息扩展命令？从 google books api 搜索图书

Note

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

使用代码 打开 Visual Studio 代码。在命令行提示。见图 2-23 。

图 2-23

Visual studio 代码 OOB

• 转到环境文件➤打开和更新

• 然后打开 SearchCmdMessageExtension.ts 文件，找到 const card = card factory . adaptive card(

• 将主体部分替换为下面的代码

   body: [
                      {
                          type: "TextBlock",
                          size: "Large",
                          text: "Title of the Item"
                      },
                      {
                          type: "TextBlock",
                          text: "Desc: Command Search Messaging Extension"
                      },
                      {
                          type: "Image",
                          url: `https://${process.env.HOSTNAME}/assets/icon.png`
                      }
                  ]
  
  

• 查找常量预览= {

• 将内容部分标题和文本替换为下面的代码

  title: "Title of the Item",
      text: "Desc: Command Search Messaging Extension",
  
  

MICROSOFT_APP_ID=1ad3a766-9629-44e5-b76c-c1256a8080ec
MICROSOFT_APP_PASSWORD=zstMrs0xaBYxZ-4195.m~-AWCszh9suL2z

测试消息传递扩展应用

打开命令提示符，导航到项目文件夹，并执行以下命令:

gulp ngrok-serve

这个 gulp 任务将运行许多其他任务，这些任务都显示在命令行控制台中。ngrok-serve 任务构建您的项目并启动一个本地 web 服务器(http://localhost:3007)。然后它用一个随机的子域启动 ngrok，这个子域会创建一个到本地 web 服务器的安全 URL。

在开发过程中，可以使用 ngrok 工具进行测试，该工具可以创建一个安全的可旋转的 URL，指向您的本地 HTTP 服务器。Ngrok 作为一个依赖项包含在项目中，所以不需要设置或配置任何东西。

图 2-24

ngrok-服务执行

Ngrok 已经创建了临时 URL 1d42b1a1cfc8.ngrok.io，它将映射到我们本地运行的 web 服务器(图 2-24 )。

然后去 Azure 门户，打开 Bot 通道注册 App。使用临时 URL 36236469245b.ngrok.io 更新消息传递端点(图 2-25 )。

图 2-25

更新消息传递端点

Note

ngrok 的免费版本会在您每次重新启动 web 服务器时创建一个新的 URL。测试应用时，确保每次重启 web 服务器时都更新 URL 的消息端点。

在 Microsoft 团队中安装自定义应用

现在让我们在 MSTeam 中安装应用。在浏览器中，导航到 https://teams.microsoft.com ，使用工作和学校帐户的凭据登录。

Microsoft Teams 可用作 web 客户端、桌面客户端和移动客户端。

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

图 2-26

向 MS 团队添加应用

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

图 2-27

上传应用

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

图 2-28

安装的应用

一旦包上传，MSTeam 将显示应用的摘要。

图 2-29

将应用添加到团队和渠道

选择添加按钮安装 app(图 2-29 )。

安装该应用后，MSTeam 将带您与 MSTeam 应用进行一对一聊天。

转到您的团队对话部分(图 2-30 )。

图 2-30

从通道访问消息传递扩展

选择项目并单击它；它会通过一个通道将详细内容发送给你的团队成员(图 2-31 )。

图 2-31

将消息发送给团队成员

在本练习中，您已经使用 Yeoman generator for the Microsoft Teams 应用创建了一个简单的现成动作命令消息传递扩展。我们将在第四章中详细了解这一点以及更多消息传递示例。

练习 2:使用 Nodejs 创建消息扩展应用

Microsoft Teams developer platform 使您能够轻松扩展团队，并将您自己的应用和服务无缝集成到团队工作区中。然后，这些应用可以分发给您的企业或世界各地的团队。

若要扩展 Microsoft Teams，您需要创建 Microsoft Teams 应用。Microsoft Teams 应用是您托管的 web 应用。然后，这个应用可以集成到团队中的用户工作区。

消息传递扩展允许用户向您的服务查询或发布信息，并以卡片的形式将信息发布到消息中。

通过在终端窗口中运行以下命令，验证这些工具是否可用:

$ node -v
v8.9.3
$ npm -v
5.5.1
$ gulp -v
CLI version 4.0.2

在本练习中，我将使用 NodeJS 和公共 google books REST API 创建一个消息扩展应用，并向您展示如何使用 App Studio 并将该应用部署到 Microsoft 团队中。

步骤 1:创建新的 Nodejs 项目

首先，打开一个命令提示符，为您最喜欢的位置创建一个新目录，然后导航到该目录(图 2-32 )。

图 2-32

正在为 nodejs 应用创建新文件夹

md nodeJSMessagingExtensions
cd nodeJSMessagingExtensions

通过使用以下命令创建 package.json 文件来创建一个新的 NodeJS 项目(图 2-33 )。

图 2-33

使用 npm init 创建新应用

npm init

输入您的项目详细信息，然后安装 ngrok

npm install ngrok

然后使用 Visual studio 代码打开项目，键入下面的命令

图 2-34

package.json

code (Figure 2-34).

创建一个名为 getBooks.js 的文件，并粘贴以下代码:

const ngrok = require('ngrok');

var request = require('request');
var util = require("util");
var restify = require('restify');
var builder = require('botbuilder');
var teams = require('botbuilder-teams');

var connector = new teams.TeamsChatConnector({
    appId: "<update the bot ID>",
    appPassword: "<update the bot ID password>"
});

const port = 8080;

var server = restify.createServer();

server.listen(port, function() {
    console.log(`Node.js server listening on ${port}`);
    ngrok.connect(port, function(err, url) {
        console.log(`Node.js local server is publicly-accessible at ${url}`);
    });
    console.log('%s listening to %s', server.name, util.inspect(server.address()));
});

// this will reset and allow to receive from any tenants

connector.resetAllowedTenants();

var bot = new builder.UniversalBot(connector);

server.post('/api/composeExtension', connector.listen());
server.post('/api/messages', connector.listen());
server.post('/', connector.listen());

var composeExtensionHandler = function(event, query, callback) {
    var attachments = [];
    var url = "https://www.googleapis.com/books/v1/volumes?q=" + query.parameters[0].value + "&limit=100&offset=0";
    if (query.parameters[0].value == undefined | query.parameters[0].value == '') {
        url = "https://www.googleapis.com/books/v1/volumes?q=ISBN:9780789748591&limit=10";
    }
    request(url, {
        json: true
    }, (err, res, body) => {
        if (err) {
            return console.log(err);
        }
        var data = body;
        for (var o of data.items) {
            try {

                console.log(o.volumeInfo.title);

                var logo = {
                    alt: o.volumeInfo.title,
                    url: o.volumeInfo.imageLinks.thumbnail

                };

                var card = new builder.HeroCard()
                    .title("Title: " + o.volumeInfo.title)
                    .text("" + o.volumeInfo.description)
                    .subtitle("Publisher: " + o.volumeInfo.publisher)
                    .images([logo])
                    .buttons([{
                        type: "openUrl",
                        title: "View Image",
                        value: o.volumeInfo.imageLinks.thumbnail
                    }]);

                attachments.push(card.toAttachment());

            } catch (err) {
                console.log(err);
            }
        };

        var response = teams.ComposeExtensionResponse
            .result('list')
            .attachments(attachments)
            .toResponse();

        // Send the response to teams
        callback(null, response, 200);

        //}

    });

};

connector.onQuery('searchCmd', composeExtensionHandler);

var composeInvoke = function(event) {
    console.log(event);
};

connector.onInvoke('composeInvoke');

上面的代码相当简单；首先声明所需的模块，并创建一个 TeamChatConnector 来映射 appId 和 appPassword 。然后创建一个服务器，并使用 ngrok 进行本地监听。

接下来，使用 google books REST API 搜索图书并构建为英雄卡并通过附件对象发送到聊天窗口，用户可以通过 ISBN 号进行搜索。

Install restify 是一个框架，利用连接风格的中间件来构建 REST APIs:

npm install restify

MSTeam 应用只支持微软 Bot Builder 框架，为此，我正在编译我们的 NodeJS 项目的 Bot 框架。

安装下面的标头以引用 BOT 框架:

npm install botbuilder@3.13.1
npm install botbuilder-teams

现在我们已经完成了 get books 消息传递扩展代码，接下来我们可以创建一个应用包来安装到 Microsoft 团队中。

步骤 2:使用 App Studio 为 MSTeam 创建应用

让我们使用 App Studio 来创建和集成我们的团队应用:

图 2-35

安装 App Studio

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

• 使用您的 Office 365 凭据登录

• 转到 Apps 找到 App Studio，如果 App Studio 不可用，那么安装它。

  • 从商店获取 App Studio

  • 在团队中，点击应用按钮，搜索“App Studio”，安装(图 2-35 )。

图 2-36

创建应用包

• 进入应用，找到 App Studio，创建一个应用包配置(图 2-36 )。

图 2-37

清单编辑器

• 单击 App Studio 并打开它。

• 移至清单编辑器，并创建一个新的应用(图 2-37 )。

• 简称:获取书籍 App

• 全称:使用 ISBN 号获取图书

• 点击生成按钮，创建 App Id

• 包名:jpower 4 . ms teams . messaging extension

• 版本 : 1.0.0

• 简短描述:消息传递扩展团队应用开发

• 详细描述:消息传递扩展团队解决方案开发

• 开发者 : JPOWER4

• 网站 : https://github.com/jenkinsns

• 隐私声明 : https://github.com/jenkinsns

• 使用条款: https://github.com/jenkinsns

• 品牌化:上传全彩 192 x 192 图像，透明轮廓 32 x 32 图像，并选择主题颜色

选择功能下的消息扩展

图 2-38

为消息传递扩展创建新的 bot

• 点击设置，并给出一个机器人名称(图 2-38 )。

图 2-39

新密码已生成

• 点击创建创建机器人

• 然后从消息传递扩展部分获取 bot ID 和 app 密码(生成新密码)(图 2-39 )。

图 2-40

邮件扩展 AppID

• 生成 App Id 和 App 密码(图 2-40 )。

图 2-41

创建 TeamsChatConnector

• 转到 getBooks.js 文件更新 appID 和app password；参见下一节(图 2-41 )。

更新后，代码如下所示:

var connector = new teams.TeamsChatConnector({
    appId: "1dada9e1-3776-4056-bd24-eb595ff3b4d9",
    appPassword: "br~RN7iX6W.ckM93M8EU5Q-_v29IKtzF2~"
})

然后添加一个消息传递端点 URL 来获得一个带有 https 的公共 URL，因为我们需要 ngrok 在本地执行。

步骤 3:使用 ngrok 开始监听端口 8080

转到命令提示符并键入以下命令来启动应用(图 2-42 ):

图 2-42

节点执行

node getBooks.js

然后打开一个新的浏览器并访问

http://localhost:4040/inspect/http

然后你就可以看到公开的网址: https://a0a0e7883beb.ngrok.io (图 2-43 )。

图 2-43

ngrok request url

然后去 App Studio，更新 Bot 端点地址(图 2-44 )。

https://a0a0e7883beb.ngrok.io/api/messages

图 2-44

消息传递端点地址

然后点击命令部分下的添加按钮，并选择“允许用户查询您的服务信息并将其插入到消息中”(图 2-45 )。

图 2-45

邮件扩展操作命令

然后填写新的命令表单:

图 2-46

消息传递扩展参数

• 命令 Id: searchCmd

• 标题:搜索

• 描述:搜索你的书

• 然后添加参数

• 名称:搜索关键字

• 标题:国际标准书号

• 描述:输入你的 ISBN 号(图 2-46 )。

点击完成部分下的测试分发对 app 进行测试(图 2-47 )。

图 2-47

测试和分发

然后从您的渠道下载应用包进行测试。

步骤 4:将应用安装到您的团队中

前往您的➤团队，导航至管理➤团队应用➤·莫尔应用(图 2-48 )。

图 2-48

将应用上传至团队

上传自定义应用(选择下载的 zip 文件进行上传)。

然后点击添加按钮进行安装(图 2-49 )。

图 2-49

将应用添加到团队

现在，谷歌图书搜索应用在您的团队中可用，因此请转到您的频道并访问该应用。

点击对话区的 … ，搜索下面高亮显示的消息扩展应用(图 2-50 )。

图 2-50

搜索消息传递扩展应用

然后选择 app 它会加载一个图书列表，您可以选择并发送给您的团队成员(图 2-51 )。

图 2-51

邮件扩展加载的图书列表

然后可以通过 ISBN 号进行图书检索，得到相关的书籍(图 2-52 )。

图 2-52

通过 ISBN 号查找图书

选择这本书，它将为你的团队成员制作一张带有标题、出版商、图片和描述的英雄卡片。然后作为对话发送给你的团队成员(图 2-53 )。

图 2-53

向团队成员发送消息传递扩展卡

结论

在本章中，您已经学习了各种生成器的不同 IDE 选项和设置环境。它还解释了如何使用 Yeoman Generator (yo teams)和 Nodejs 为 MSTeam 创建简单的定制应用。您还了解了有关团队应用业务线的各种上下文和场景，以及 Bot 渠道注册、App Studio 和将应用部署到团队中。

现在，您已经学习了如何使用 Yeoman generator 和使用 NodeJS 为 MSTeam 创建简单的定制应用。在接下来的章节中，你将开始学习 MSTeam 应用的不同选项和功能。

三、交互式对话机器人

每个人都在谈论机器人，每个企业都想知道如何使用它们。我们愿意相信我们生活在一个充满智能自动化的世界。组织总是在寻找新的方式和更好的方法，通过轻松地与购买者联系并提供随着不断变化的通信倾向而调整和发展的客户支持来支持业务。对话机器人允许用户通过文本、交互卡和任务模块与您的 web 服务进行交互。

在本章中，您将了解对话机器人的各种功能，以及如何创建机器人并将其添加到 MSTeam 中。

对话机器人概述

机器人帮助用户在团队对话中完成任务。机器人可以做的事情包括启动工作流并提供状态，给予和接受团队成员的称赞，创建轻量级调查以衡量员工满意度，以及回答关于销售和客户使用数据的自然语言问题。

对话机器人允许用户在多种形式中进行交互，如文本、自适应卡片、表单等。，从 MSTeam 客户端。

微软机器人框架

Microsoft Bot 框架处理所有复杂的状态管理、消息路由等。您需要使用 bot 框架构建 web API，并将其托管在 Azure 中，并使用 Azure 认知服务(如 LUIS(语言理解智能服务))为您的 Bot 添加智能，这有助于将您的消息解析为意图和实体。

如果你已经有了一个基于 bot 框架的 Bot，你可以很容易地将它应用到 MSTeam 中。可用的包扩展了基本的 Bot Builder SDK 类和方法，如下所示:

• 使用专门的卡类型，如 Office 365 连接器卡。

• 消费和设置团队特定的活动渠道数据。

• 处理邮件扩展请求。

团队活动处理者

像其他机器人一样，当一个机器人为 MSTeam 设计时，它接收一个活动，并将其传递给活动处理程序。在幕后，有一个称为 turn handler 的基本处理程序，所有活动都通过它进行路由。turn 处理程序调用所需的活动处理程序来处理收到的任何类型的活动。为 MSTeam 设计的 bot 的不同之处在于，它是从团队活动处理程序类派生的，而团队活动处理程序类又是从 Bot 框架的活动处理程序类派生的。

MSTeam 频道和群聊中的机器人

机器人的基本架构始于微软认知服务，它有助于创建基于人工智能的应用，并提供各种 API，如视觉、语音和语言以及视频。微软认知服务提供 LUIS，帮助将消息转换成有意义的数据。见图 3-1 。

微软机器人框架是一个为 MSTeam 渠道构建和部署机器人的框架。Bot 框架处理所有复杂的状态管理、消息路由等。你只需要使用 bot 框架构建 web API，对于 bot，你需要使用 bot 框架构建并在 Azure 中托管它，并使用 Azure 认知服务(LUIS，语言理解智能服务)为你的 Bot 添加智能，这有助于将你的消息解析为意图和实体。

图 3-1

团队 BOT 架构

MSTeam 客户端中有三种类型的对话机器人:

• 个人聊天中的机器人-个人对话或个人聊天

• 群组聊天中的机器人-群组对话或群组聊天

• 渠道中的机器人-团队渠道

根据参与的对话类型，机器人的行为略有不同:

• 频道和群组聊天对话中的机器人需要用户@提及机器人以在频道中调用它。

• 一对一对话中的机器人不需要@提及。用户发送的所有消息都将被路由到您的机器人。

来自机器人的主动消息

主动消息由机器人发送以开始对话。欢迎消息和轮询响应或外部事件通知是使用主动消息的常见场景。

主动信息通常分为两类:

• 欢迎信息

• 通知

欢迎信息

当你使用主动消息向用户发送欢迎消息时，你必须记住，对于大多数收到消息的人来说，他们不知道为什么会收到消息。欢迎信息也是他们第一次与你的应用互动；这是你创造良好第一印象的机会。

通知消息

当您使用主动消息发送通知时，您需要确保您的用户有一个清晰的路径来根据您的通知执行常见操作，并清楚地了解通知发生的原因。

练习 1 -为 MSTeam 创建对话机器人

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

• Node.js - v10.16.0

• NPM - 6.9.0

• 吞咽

  • CLI 版本:2.3.0

  • 本地版本:4.0.2

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

• Visual Studio 代码

和

• Microsoft Azure 订阅

• Office 365 订阅

在本练习中，您将学习如何创建新的机器人并将其添加到 Microsoft Teams 应用中，以及如何从 Microsoft Teams 客户端与其进行交互。

您需要:

• 来托管可公开访问的 web 服务。

• 向 bot 框架注册您的 Bot。

• 使用应用清单创建团队应用包。

要为您的 Microsoft Team client 创建新的 Microsoft Teams bot 应用，请遵循以下步骤:

1. 向微软 Azure 的 bot 框架注册 Bot。

2. Bot 通道注册。

3. 为机器人启用 Microsoft Teams 频道。

4. 检索 bot 应用 ID 和密码。

5. 使用约曼生成器创建 MSTeam 应用。

6. 测试对话机器人。

向微软 Azure 的机器人框架注册机器人

打开浏览器，导航到 Azure 门户( https://portal.azure.com/ )。使用您在 Azure 订阅中使用的username@tenantname.onmicrosoft.com登录。

在左侧导航栏中选择创建资源(图 3-2 )。

图 3-2

创建资源

在搜索市场输入框中输入资源组，并选择资源组(图 3-3 )。

图 3-3

资源组

在资源组页面，选择创建按钮，创建一个新的资源组(图 3-4 )。

图 3-4

创建资源组

选择一个有效的订阅，输入资源组的名称，例如:Teams ，并选择想要的区域。这些选择都不会影响机器人注册，由你决定(图 3-5 )。

图 3-5

创建资源组表单

完成向导以创建资源组。

图 3-6

资源组创建通知

一旦 Azure 完成了资源组创建过程，导航到资源组(图 3-6 )。

从资源组中选择添加或创建资源按钮(图 3-7 )。

图 3-7

创建资源

Bot 渠道注册

在搜索市场输入框中输入 bot ，在返回的资源列表中选择 Bot 频道注册。然后在下一页选择 Create 开始注册新的 bot 资源的过程(图 3-8 )。

图 3-8

搜索机器人频道注册

在 Bot 通道注册页面，点击发起创建 Bot 通道注册。见图 3-9 。

图 3-9

Bot 渠道注册

在 Bot 通道注册刀片中，输入以下值，然后选择创建:

• 机器人句柄:为机器人输入一个全局唯一的名称

  • 例:mstermantyexercise 2

• 订阅:选择之前创建资源组时选择的订阅

• 资源组:选择您之前创建的资源组- 例如:团队

• 地点:选择你喜欢的蔚蓝地区

• 定价等级:选择首选的定价等级；F0 层是免费的

• 消息传递端点 : https://REPLACE_THIS.ngrok.io/api/messages

bot 注册需要知道实现 bot 的 web 服务的端点。这将在您每次启动之前练习中使用的 ngrok 实用程序时发生变化(图 3-10 )。

图 3-10

创建 Bot 渠道注册

• 应用洞察:关闭

• Microsoft 应用 ID 和密码:自动创建应用 ID 和密码

Azure 将开始提供新资源。这需要一两分钟的时间。完成后，导航到资源组中的 bot 资源，如图 3-11 所示。

图 3-11

Bot 渠道注册

为机器人启用 Microsoft Teams 频道

为了让 bot 与 Microsoft 团队进行交互，您必须启用团队通道。

图 3-12

选择团队频道

• 从 Azure 的 bot 资源中，选择左侧导航中的通道。

• 在连接通道面板上，选择MSTeam 通道，然后选择保存确认动作(图 3-12 )。

• 同意服务条款

一旦此过程完成，您应该会在您启用的频道中看到列出的网络聊天和 MSTeam(图 3-13 )。

图 3-13

连接到频道

检索 Bot 应用 Id 和密码

当 Azure 创建这个机器人时，它还为这个机器人注册了一个新的 Azure 广告应用。您需要生成这个新的 bot 应用作为一个秘密，并复制应用的凭据。

从左侧导航栏中选择设置。向下滚动到 Microsoft App ID 部分。

复制机器人的 ID，因为你以后会需要它。见图 3-14 。

图 3-14

应用标识

为应用创建客户端密码

点击管理链接，导航至 Azure 广告应用。

为了让守护程序应用在没有用户参与的情况下运行，它将使用应用 ID 和证书或密码登录 Azure AD。在本练习中，您将使用一个秘密。

从左侧导航面板中选择证书&机密。

选择客户端密码部分下的新客户端密码按钮

出现提示时，对密码进行描述，并选择提供的到期持续时间选项之一:例如:从不，然后选择添加。

注意:复制新的客户端秘密值。在您执行另一个操作或离开此刀片后，您将无法取回它。见图 3-15 。

图 3-15

应用客户端机密

“证书和机密”页面将显示新的机密。复制该值很重要，因为它只显示一次；如果您离开页面并返回，它将仅显示为一个屏蔽值。

复制并存储秘密值的值，因为您以后会需要它。

使用约曼生成器创建 MSTeam 应用

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

图 3-16

哟团队

• 创建新的 web 部件项目

• 在您喜欢的位置创建一个新的项目目录

• 打开命令提示符

• 创建一个新文件夹" conversationalBot

• 导航到新创建的目录

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

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

图 3-17

回答约曼问卷

• 您的解决方案名称是什么？对话机器人

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

• 您的 Microsoft Teams 应用项目的标题？对话机器人

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

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

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

• 您希望在项目中添加哪些功能？一个机器人

• 您将在其中托管此解决方案的 URL？https://conversationalbot.azurewebsites.net

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

• 你想包括一个测试框架和初始测试吗？不

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

• 你想用什么类型的机器人？一个新的框架

• 你的机器人叫什么名字？对话机器人

• 这个机器人的微软应用 ID 是什么？可以在 Bot 框架门户( https://dev.botframework.com )中找到。ad0e9921-dcbb-44c1-

• 9b 5 B- 3c 60 和 4dcb40b

• 你想给你的机器人添加一个静态标签吗？不

• 你想支持文件上传到机器人？不

Note

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

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

图 3-18

Visual studio 代码 OOB

• 打开。env 文件➤，并添加从新的客户端密码值复制的 MICROSOFT_APP_PASSWORD

MICROSOFT_APP_PASSWORD= I-5hg5mNFA.Kxoqd.1vuoXTX~zRDC-1i2_

该机器人将在一对一聊天对话中响应消息 MentionMe，在频道对话中响应消息@MentionMe。

图 3-19

个人对话回应

更新一对一聊天对话的机器人代码

去吧。/src/app/conversational bot/conversational bot . ts 文件，并添加以下代码。

• 首先，添加下面给出的标题:

• 然后包含对现有 botbuilder 包的消息工厂对象引用:

import * as Util from "util";
const TextEncoder = Util.TextEncoder;

TeamsActivityHandler,MessageFactory } from "botbuilder";

它看起来像下面这样:

• 转到 Conversationalbot 类，在公共构造函数(conversationState:conversationState)中找到处理程序 this.onMessage() 。

• 在 this.onMessage() 处理程序中，继续执行以下代码来处理一对一对话和通道对话。

• 找到下面给出的代码:

import { StatePropertyAccessor, CardFactory, TurnContext, MemoryStorage,
    ConversationState, ActivityTypes, TeamsActivityHandler, MessageFactory, ChannelInfo, TeamsChannelData, ConversationParameters, teamsGetChannelId,Activity, BotFrameworkAdapter, ConversationReference, ConversationResourceResponse
} from "botbuilder";

• 替换下面给出的代码:

       const text: string = context.activity.text.trim().toLowerCase();
          if (text === "mentionme") {
             await this.handleMessageMentionMeOneOnOne(context);
            return;
          } else if (text.endsWith("mentionme")) {
             await this.handleMessageMentionMeChannelConversation(context);
              return;
          } else if (text.startsWith("hello")) {
  
  

• 上面的代码处理来自对话机器人的个人聊天和频道对话请求。

• 然后在 Conversationalbot 类中添加下面给出的代码。

let text = TurnContext.removeRecipientMention(context.activity);
                    text = text.toLowerCase();
if (text.startsWith("hello")) {

• handlemessagementionmeone方法用于处理聊天对话。

• handleMessageMentionMeChannelConversation方法用于处理通道会话。

private async handleMessageMentionMeOneOnOne(context: TurnContext): Promise<void> {
    const mention = {
      mentioned: context.activity.from,
      text: `<at>${new TextEncoder().encode(context.activity.from.name)}</at>`,
      type: "mention"
    };

const replyActivity = MessageFactory.text(`Hi ${mention.text} from a 1:1 chat.`);
    replyActivity.entities = [mention];
    await context.sendActivity(replyActivity);
  }

   private async handleMessageMentionMeChannelConversation(context: TurnContext): Promise<void> {
    const mention = {
      mentioned: context.activity.from,
      text: `<at>${new TextEncoder().encode(context.activity.from.name)}</at>`,
      type: "mention"
    };

    const replyActivity = MessageFactory.text(`Hi ${mention.text}!`);
    replyActivity.entities = [mention];
    const followupActivity = MessageFactory.text(`*We are in a channel conversation group chat in the !*`);
    await context.sendActivities([replyActivity, followupActivity]);
  }

修改清单文件以处理命令

流程是这样的:

1. 去吧。/src/manifest/manifest.json 文件。

2. 在。/src/manifest/manifest.json 文件，验证图标的属性值，并在必要时更新文件名以匹配项目中的内容。

3. 找到属性机器人。通过将以下 JSON 添加到数组中，将新的 bot 添加到注册到此 Microsoft Teams 应用的 bot 集合中。这段代码会在安装时将我们的机器人添加到用户的个人和团队范围。它包含一条帮助消息，显示它支持的命令 MentionMe。

4. 找到机器人➤命令列表下的“命令”部分，并将其替换为

5. 文件➤保存所有 保存的修改。

"commands": 
            {
              "title": "Help",
              "description": "Shows help information"
            },
            {
              "title": "MentionMe",
              "description": "Sends message with @mention of the sender"
            }

此时，您的机器人可以开始测试了！

测试对话机器人

打开命令提示符，导航到项目文件夹。并执行以下命令:

gulp ngrok-serve

这个 gulp 任务将运行命令行控制台中显示的许多其他任务。ngrok-serve 任务构建您的项目并启动一个本地 web 服务器(http://localhost:3007)。然后它用一个随机的子域启动 ngrok，这个子域会创建一个到本地 web 服务器的安全 URL。

在开发过程中，可以使用 ngrok 工具进行测试，该工具可以创建一个安全的可旋转的 URL，指向您的本地 HTTP 服务器。Ngrok 作为一个依赖项包含在项目中，因此不需要设置或配置任何东西(图 [3-20 )。

图 3-20

ngrok-服务执行

Ngrok 已经创建了临时 URL 832b174576e7.ngrok.io，它将映射到我们本地运行的 web 服务器。

然后去 Azure 门户，打开 Bot 通道注册 App。使用临时 URL 832b174576e7.ngrok.io 更新消息传递端点(图 3-21 )。

图 3-21

更新消息传递端点

Note

Ngrok 的免费版本会在您每次重新启动 web 服务器时创建一个新的 URL。测试应用时，确保每次重启 web 服务器时都更新 URL 的消息端点。

在 MSTeam 中安装对话机器人

现在让我们在 MSTeam 中安装应用。在浏览器中，导航到 https://teams.microsoft.com ，使用工作和学校帐户的凭据登录。

Microsoft Teams 可用作 web 客户端、桌面客户端和移动客户端。

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

图 3-22

向 MS 团队添加应用

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

图 3-23

上传应用

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

图 3-24

安装的应用

一旦软件包上传，MSTeam 将显示应用的摘要(图 3-25 )。

图 3-25

将应用添加到团队和渠道

作为个人机器人进行测试

点击添加按钮，导航至与机器人聊天，如图 3-26 所示。

图 3-26

私人谈话

请注意，当应用加载时，bot 支持的命令会显示在编写框中。让我们测试一下机器人！

选择 MentionMe 命令，或在撰写框中手动键入 mentionme，然后按 enter。

几秒钟后，您应该看到机器人对您登录的用户做出响应，如图 3-27 所示。

图 3-27

个人对话回应

我们有一个工作的个人机器人，当它被提及时会有所反应。

在通道中测试

使用应用栏导航菜单，选择更多添加的应用按钮。点击并打开对话机器人，然后点击添加到图 3-25 所示的团队链接。

选择要安装的频道；在这里，我选择了我现有的对话机器人>对话频道。然后点击“设置机器人”按钮，将机器人设置到如图 3-28 所示的频道。

图 3-28

团队渠道设置

导航到团队中的现有渠道“对话渠道”。

在“频道对话”选项卡中，键入@Conversational Bot the bot(图 3-29 )。

图 3-29

团队频道机器人

选择 MentionMe 命令，或在撰写框中手动键入 mentionme，然后按 enter。

几秒钟后，您应该看到 bot 对用户和通道对话消息做出了响应。见图 3-30

图 3-30

团队渠道响应

现在，我们有了一个工作团队机器人，当提到它时，它会做出响应。

练习 2 -用自适应卡片回复信息

在本练习中，您将使用自适应卡更新 bot 以响应未知消息。卡片的单一动作将触发机器人用新的自适应卡片响应现有消息，并使用消息反应进行响应。

卡片是可操作的内容片段，可以通过机器人、连接器或应用添加到对话中。使用文本、图形和按钮，卡片可以让你与观众交流。

什么是适配卡？

Adaptive Cards 是一种开放的卡片交换格式，使开发人员能够以通用和一致的方式交换 UI 内容。自适应卡是一种以清晰一致的方式显示数据并与之交互的方式。你会经常看到机器人和通知使用自适应卡来允许在聊天和操作系统通知中显示丰富的信息。

您可以使用 Adaptive Cards 显示带图形的富文本，提供允许人们与聊天或通知交互的按钮，显示动态信息，收集反馈，甚至使用它们来创建交互式表单。

适配卡支持两个团队的组件:

• 蝇蛆病

• 消息传递扩展

此外，自适应卡支持三种动作类型:

• 行动。开放链接

• 行动。使服从

• 行动。广告牌

Microsoft Teams App Studio 允许您使用 json、c#和 nodejs 为团队创建适配卡。见图 3-31 。

图 3-31

创建自适应卡

您还可以修改自适应卡操作。使用 Action.Submit 的数据对象中的 Microsoft Teams 属性提交有效负载以支持现有的 Bot 框架操作。

图 3-32 是适配卡的一个例子。

图 3-32

示例适配卡

您将使用自适应卡更新现有的团队对话机器人应用。

• 导航到。/src/app/conversational bot 文件夹，并创建一个名为“ResponseCard.json”的新文件

• 复制并粘贴以下代码:

• 导航到。/src/app/conversational bot 文件夹，并创建另一个名为“ResponseCard.ts”的新文件。

• 复制并粘贴以下代码:

{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [{
            "type": "Container",
            "items": [{
                "type": "TextBlock",
                "text": "My adaptive card response",
                "weight": "bolder",
                "size": "large"
            }]
        },
        {
            "type": "Container",
            "items": [{
                "type": "TextBlock",
                "text": "Now you have learned to receive response from bot by using adaptive card.
",
                "wrap": true
            }]
        }
    ],
    "actions": [{
        "type": "Action.OpenUrl",
        "title": "My Blog Page",
        "url": "http://jenkinsblogs.com"
    }]
}

• 转到。/src/app/conversational bot/conversational bot . ts 文件，并添加以下代码。

• 添加下面给出的标题:

const ResponseCard = require("./ResponseCard.json");

export default ResponseCard;

• 在构造函数中的 this.onMessage() 处理程序中

• 找到下面给出的代码:

import ResponseCard from "./ResponseCard";

• 替换下面给出的代码:

await context.sendActivity(`I\'m terribly sorry, but my master hasn\'t trained me to do anything yet...`);

const card = CardFactory.adaptiveCard(ResponseCard);
await context.sendActivity({ attachments: [card] });

保存并测试带有适配卡的机器人

让我们来测试一下:

1. 从命令行导航到项目的根文件夹，并执行以下命令:

图 3-33

带适配卡的机器人

1. Ngrok 已经创建了临时 URL e459e9c2beca.ngrok.io，它将映射到我们本地运行的 web 服务器。

2. 然后去 Azure 门户，打开 Bot 通道注册 App。使用临时 URL e459e9c2beca.ngrok.io 更新消息传递端点

3. 转到您在上一节中安装“机器人”的频道。

4. 删除对话 app，在频道重新安装。(仅供参考:我们还可以更改应用的版本，更新应用。)

5. 在 Conversations 选项卡中，键入@ Conversation Bot 带有随机字符串的 BotEx:any来触发 else 条件。

6. 机器人会用卡片回复消息(图 3-33 )。

gulp ngrok-serve

测试机器人对消息的反应

如果您想要更改消息或响应，请转到Conversationalbot类中的 this.onMessageReaction 处理程序并进行更改。

在 Microsoft Teams 客户端中，转到上一节中安装 bot 的频道。在 Conversations 选项卡中，找到来自机器人的消息，并对其应用类似的反应。

几秒钟后，机器人将回复一条消息“这是一个有趣的反应”，并点击该反应(图 3-34 )。

图 3-34

机器人反应

在本练习中，您修改了现有的 Microsoft Teams conversational bot 应用，使用自适应卡来响应消息，并测试了消息反应功能。

练习 3 -来自机器人的主动信息

主动消息是由机器人发送的用于开始对话的消息。出于多种原因，您可能希望您的机器人开始对话，包括以下原因:

• 个人机器人对话的欢迎信息

• 投票回应

• 外部事件通知

发送消息以启动新的对话线程不同于发送消息以响应现有的对话:当您的 bot 启动新的对话时，没有预先存在的对话来发布消息。

更新现有团队应用

在本练习中，您将更新现有的 Teams 应用，以便从您的机器人发送主动消息。

• 转到 ResponseCard.json 文件，在 actions 部分下添加一个新的 action submit 按钮。

• 导航。/src/app/conversational bot/conversational bot . ts 文件，并添加以下代码。

• 包括对现有 botbuilder 包的“ChannelInfo，TeamsChannelData，ConversationParameters，teamsGetChannelId，Activity，BotFrameworkAdapter，ConversationReference，ConversationResourceResponse”对象引用:

• 即

  {
            "type": "Action.Submit",
            "title": "Create new thread in this channel",
            "data": { "cardAction": "newconversation" }
  }

• 在构造函数的 this.onMessage() 处理程序中，添加下面给出的代码，在 switch 语句“switch(context . activity . type){…}”之前添加 if 语句，以处理新的会话请求。

  if (context.activity.value) {
     switch (context.activity.value.cardAction) {
           case "newconversation":
             const channelId = teamsGetChannelId(context.activity);
             const message = MessageFactory.text("New thread or conversation created by bot");
              const newConversation = await this.createConversationInChannel(context, channelId, message);
                    break;
                  }
              } else {
  
  

• 然后在 switch 语句后添加一个右大括号:

import { StatePropertyAccessor, CardFactory, TurnContext, MemoryStorage,
    ConversationState, ActivityTypes, TeamsActivityHandler, MessageFactory,
    ChannelInfo, TeamsChannelData, ConversationParameters, teamsGetChannelId,
  Activity, BotFrameworkAdapter, ConversationReference, ConversationResourceResponse
} from "botbuilder";

• 然后添加将创建新对话的 createConversationInChannel()方法。将以下方法添加到 Conversationalbot 类中:

}

• 现在，我们已经完成了主动消息发送的编码。

private async createConversationInChannel(context: TurnContext, teamsChannelId: string, message: Partial<Activity>): Promise<[ConversationReference, string]> {
    // create parameters for the new conversation
    const conversationParameters = <ConversationParameters>{
                isGroup: true,
                channelData: <TeamsChannelData>{
                  channel: <ChannelInfo>{
                    id: teamsChannelId
                  }
                },
                activity: message
              };

    // get a reference to the bot adapter & create a connection to the Teams API
    const adapter = <BotFrameworkAdapter>context.adapter;
    const connectorClient = adapter.createConnectorClient(context.activity.serviceUrl);
    // create a new conversation and get a reference to it
    const conversationResourceResponse: ConversationResourceResponse = await connectorClient.conversations.createConversation(conversationParameters);
    const conversationReference = <ConversationReference>TurnContext.getConversationReference(context.activity);
    conversationReference.conversation.id = conversationResourceResponse.id;

    return [conversationReference, conversationResourceResponse.activityId];
  }

保存并测试 Bot 以创建新的线程/消息

打开命令行，导航到项目的根文件夹，并执行以下命令:

图 3-35

机器人自适应信息

• Ngrok 已经创建了临时 URL d23aadf72a73.ngrok.io，它将映射到我们本地运行的 web 服务器。

• 然后去 Azure 门户，打开 Bot 通道注册 App。使用临时 URL d23aadf72a73.ngrok.io 更新消息传递端点

• 转到您在上一节中安装“机器人”的频道。

• 删除对话 app，在频道重新安装。

• 在 Conversations 选项卡中,@ Conversation Bot 带有随机字符串的 BotEx:any来触发 else 条件。

• 机器人会用卡片回复消息(图 3-35 )。

gulp ngrok-serve

图 3-36

新线索消息

• 点按“在此频道中创建新主题”按钮。

• 几秒钟后，它会创建一个由出现在频道中的机器人创建的新对话(图 3-36 )。

• 在本练习中，您将修改现有的 Microsoft Teams conversation bot，以便从您的 bot 发送主动消息，同时单击“在此频道中创建新主题”按钮。

结论

在本章中，您已经学习了对话机器人的各种功能，以及如何使用 Yeoman generator (yo teams)创建机器人并将其添加到 Microsoft 团队中。还介绍了如何使用自适应卡、动作按钮，以及从机器人发送主动消息。

您现在已经学习了如何使用 Yeoman generator 为 MSTeam 创建对话机器人。在接下来的章节中，你将开始学习 MSTeam 应用的不同选项和功能。

四、消息传递扩展和操作注释

消息传递扩展是在团队客户机中调用定制代码的好方法。这使得用户可以直接在他们的对话中与你的应用进行交互，而不必离开团队，使用自适应卡或英雄卡或消息来发布信息。

在本章中，您将了解消息传递扩展的各种功能，我们将通过示例指导用户解释如何创建消息传递扩展和命令操作。消息传递扩展允许人们与渠道共享内容、进行有意义的通信以及共享协作体验，与消息传递扩展操作命令一起，允许用户使用模式弹出从 API 搜索数据，然后处理他们的数据并将其发送回团队渠道对话区域以共享协作体验。

消息传递扩展概述

消息传递扩展使用户能够从外部系统执行搜索命令或操作命令。消息传递扩展由您托管的 web 服务组成，并在 manifest.json 文件中定义，您的 web 服务可以在 Microsoft 团队中从该文件中调用。您还需要在消息传递模式和安全通信协议的 bot 框架中将您的 web 服务注册为 Bot。

Microsoft Teams client 能够扩展开箱即用的功能，并与您现有的业务线应用集成。因此，这将有助于利用您现有的知识，并在集成业务线应用方面取得收益。它还将减少用户在应用之间移动的工作量。

以下是邮件扩展命令的类型:

1. 操作命令消息传递扩展

2. 搜索命令消息传递扩展

3. 用消息传送扩展链接展开的 URL

消息传递扩展命令的类型定义了 web 服务可用的 UI 元素和交互流。某些交互，如身份验证和配置，可用于这两种类型的命令。见图 4-1 。

图 4-1

撰写扩展

邮件扩展出现在撰写框的底部。有几个是内置的，比如 Emoji、Giphy、Sticker。选择“更多选项”(⋯)按钮以查看其他消息传递扩展，包括您从应用库添加的或自己上传的扩展。

撰写扩展

撰写扩展允许用户在对话中查询和共享丰富的卡片。当您创建聊天信息时，无论是新的对话还是回复现有信息，都可以使用信息扩展功能。消息扩展帮助您搜索内容并将其插入到您正在编写的聊天消息中。

图 4-2

可操作的消息

借助可操作的消息(图 4-2 )，您可以向连接器卡添加丰富的内容。在设计可操作消息的实施时，关键是解决方案既要可扩展又要可靠，同时还要考虑服务的未来增长。

消息传递扩展是一种特殊的 Microsoft Teams 应用，它受 Bot 框架 v4 支持。

您将如何使用消息传递扩展？

邮件扩展有助于以下方面:

• 处理工作项目和错误

• 客户支持票据

• 使用图表和报告

• 图像和媒体内容

• 销售机会和销售线索

Microsoft 团队消息扩展

消息传递扩展允许用户通过按钮事件使用 web 服务进行搜索，并从外部系统的撰写消息区域启动操作。您也可以使用命令框或直接从邮件中搜索。然后您可以使用自适应卡或英雄卡或消息显示结果(图 4-3 )。

图 4-3

邮件扩展搜索

卡片是可操作的内容片段，可以通过机器人、连接器或应用添加到对话中。使用文本、图形和按钮，卡片可以让你与观众交流。卡片是简短或相关信息的用户界面容器。卡片可以有多个属性和附件。卡片可以包括可以触发卡片动作的按钮。参见图 4-4 。

图 4-4

信息扩展卡

你可以在这里找到更多关于如何使用卡的信息: https://docs.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-reference

邮件扩展如何工作

消息传递扩展在您的自定义 Microsoft Teams 应用清单中注册，该清单指定了可以从 Microsoft Teams 客户端中的何处调用该扩展。可以调用消息传递扩展的三个位置包括:

1. 命令框:这是 MSTeam 客户端顶部的区域

2. 撰写消息框:这是一对一聊天或群组聊天底部的区域，也是频道中对话选项卡底部的区域

3. 消息的“更多操作”菜单:更多操作菜单项可从...当您将鼠标悬停在对话中的一条消息上时

消息传递扩展被实现为使用 bot 框架注册为 Bot 的 web 服务。当调用消息传递扩展时，MSTeam 将通过 Bot 框架的消息传递模式和安全通信协议调用您的 web 服务。

在创建命令之前，您需要决定:

• 动作命令可以从哪里触发？

• 如何创建任务模块？

• 最终的消息或卡片会从机器人发送到频道，还是会插入到撰写消息区域供用户提交？

使用 App Studio 创建命令

让我们做一个简单的例子。以下步骤假设您已经创建了一个消息传递扩展。

图 4-5

新命令

1. 从 Microsoft Teams 客户端，打开 App Studio 并选择 Manifest Editor 选项卡。

2. 如果您已经在 App Studio 中创建了应用包，请从列表中选择它。如果没有，您可以导入现有的应用包。

3. 单击命令部分中的添加按钮。

4. 选择允许用户在团队内部触发外部服务中的操作。

5. 如果要使用一组静态参数来创建任务模块，请选择该选项。否则，选择从 bot 获取一组动态参数。

6. 添加命令 Id 和标题。

7. 选择您想要触发动作命令的位置。

8. 如果您正在为任务模块使用参数，请添加第一个参数。

9. 单击保存。参见图 4-5 。

如果需要添加更多参数，请单击“参数”部分中的“添加”按钮来添加它们。

动作命令消息传递扩展

动作命令允许您向用户呈现一个模态弹出窗口，以收集或显示信息(图 4-6 )。

图 4-6

从用户处收集信息

当他们提交表单时，您的 web 服务可以通过直接在对话中插入消息，或者通过在撰写消息区域插入消息并允许用户提交消息来做出响应。对于更复杂的工作流，您甚至可以将多个表单链接在一起。参见图 4-7 。

图 4-7

回复用户

它们可以从撰写消息区域、命令框或消息中触发。当从消息中调用时，发送给 bot 的初始 JSON 有效负载将包括调用它的整个消息。

搜索命令消息传递扩展

搜索命令允许用户在外部系统中搜索信息，然后将搜索结果插入到消息中。在最基本的搜索命令流中，初始调用消息将包括用户提交的搜索字符串。您将回复一个卡片列表和卡片预览。团队客户端将在列表中呈现卡片预览，供最终用户选择。当用户选择一张卡片时，全尺寸的卡片将被插入到撰写消息区域。

它们可以从撰写消息区域或命令框中触发。与动作命令不同，它们不能由消息触发。参见图 4-8 。

图 4-8

搜索命令查询

链接展开消息传递扩展

当在撰写消息区域粘贴 URL 时，您还可以选择调用您的服务。这个功能称为链接展开，允许您在包含域的 URL 被粘贴到撰写消息区域时订阅接收调用。您的 web 服务可以将 url“展开”到一个详细的卡片中，提供比标准网站预览卡更多的信息。您甚至可以添加按钮，让您的用户无需离开 Microsoft Teams 客户端即可立即行动。

练习 1 -创建动作命令消息传递扩展

在本练习中，您将学习如何在 Microsoft Teams 应用中创建和添加新的消息传递扩展，并从 Microsoft Teams 客户端与之交互。

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

• Node.js - v10.16.0

• NPM - 6.9.0

• 吞咽

  • CLI 版本:2.3.0

  • 本地版本:4.0.2

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

• Visual Studio 代码

和

• Microsoft Azure 订阅

• Office 365 订阅

要为您的 Microsoft Team client 创建新的 Microsoft Teams bot 应用，请遵循以下步骤:

1. 向微软 Azure 的机器人框架注册机器人

2. Bot 渠道注册

3. 为机器人启用 Microsoft Teams 频道

4. 检索 bot 应用 ID 和密码

5. 使用约曼生成器创建行动命令消息扩展 MS Teams 应用

6. 测试动作命令消息扩展应用

向微软 Azure 的机器人框架注册机器人

打开浏览器，导航到 Azure 门户( https://portal.azure.com/ )。使用您在 Azure 订阅中使用的username@tenantname.onmicrosoft.com登录。

点击创建资源，在搜索市场输入框中输入 bot ，在返回的资源列表中选择 Bot 频道注册。然后在下一页选择 Create 开始注册新的 bot 资源的过程(图 4-9 )。

图 4-9

搜索机器人频道注册

在 Bot 通道注册页面，点击发起创建 Bot 通道注册(图 4-10 )。

图 4-10

Bot 渠道注册

在 Bot 通道注册刀片(图 4-11 )中，输入以下值，然后选择创建:

图 4-11

Bot 渠道登记表

• Bot 句柄:输入 bot 的全局唯一名称。

  • 例如:消息扩展 Ch4

• 订阅:选择先前创建资源组时选择的订阅。

• 资源组:选择您之前创建的资源组，例如:团队

• 位置:选择你喜欢的 Azure 地区。

• 定价层:选择首选的定价层；F0 层是免费的。

• 消息传送端点:https://REPLACE_THIS.ngrok.io/api/messages

  bot 注册需要知道实现 bot 的 web 服务的端点。这将在每次启动之前练习中使用的 ngrok 实用程序时发生变化。

• 应用洞察:关闭

• Microsoft 应用 ID 和密码:自动创建应用 ID 和密码

Azure 将开始提供新资源。这需要一两分钟的时间。完成后，导航到资源组中的 bot 资源。参见图 4-12 。

图 4-12

Bot 已创建

为机器人启用 Microsoft Teams 频道

为了让 bot 与 Microsoft 团队进行交互，您必须启用团队通道。

图 4-13

选择团队频道

• 从 Azure 的 bot 资源中，选择左侧导航中的通道。

• 在连接通道面板上，选择MSTeam 通道，然后选择保存确认动作(图 4-13 )。

• 同意服务条款

一旦此过程完成，您应该会在您启用的频道中看到列出的网络聊天和 MSTeam(图 4-14 )。

图 4-14

连接到频道

检索 Bot 应用 Id 和密码

当 Azure 创建机器人时，它还为机器人注册了一个新的 Azure AD 应用。您需要生成这个新的 bot 应用作为一个秘密，并复制应用的凭据。

从左侧导航栏中选择设置。向下滚动到 Microsoft App ID 部分。

复制机器人的 ID，因为您稍后会需要它(图 4-15 )。

图 4-15

应用标识

为应用创建客户端密码

点击管理链接，导航至 Azure 广告应用。

为了让守护程序应用在没有用户参与的情况下运行，它将使用应用 ID 和证书或密码登录 Azure AD。在本练习中，您将使用一个秘密。

从左侧导航面板中选择证书&机密。

选择客户端密码部分下的新客户端密码按钮。

出现提示时，对密码进行描述，并选择所提供的有效期选项之一:例如，从不，然后选择添加(图 4-16 )。

Note

复制新的客户端密码值。在您执行另一个操作或离开此刀片后，您将无法取回它。

“证书和机密”页面将显示新的机密。复制该值很重要，因为它只显示一次；如果您离开页面并返回，它将仅显示为一个屏蔽值。

图 4-16

应用客户端机密

The Certificate & Secrets

复制并存储秘密值的值，因为您以后会需要它。

使用约曼生成器创建 MSTeam 应用

在本节中，您将使用 Yeoman generator (yo teams)创建一个新的消息传递扩展团队应用。

在这个练习中，我使用 REST API (Google Books API)获取基于 ISBN 号的图书信息，并将其发送到一个通道对话。

图 4-17

哟团队

• 创建新的消息传递扩展应用项目

• 在您喜欢的位置创建一个新的项目目录

• 打开命令提示符

• 创建一个新文件夹“messagingExtensionCh4”

• 导航到新创建的目录

• 通过运行以下命令来运行 MSTeam 的 Yeoman 生成器: yo teams (图 4-17 )。

约曼会发射并问你一系列问题(图 4-18 )。用下列值回答问题:

图 4-18

回答约曼问卷

• 您的解决方案名称是什么？消息传递-扩展

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

• 您的 Microsoft Teams 应用项目的标题？消息传递扩展示例

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

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

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

• 您希望在项目中添加哪些功能？消息扩展命令

• 您将在其中托管此解决方案的 URL？https://messagingextension.azurewebsites.net

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

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

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

• 您的消息扩展托管在哪里？在一个新机器人里

• 消息扩展使用的 bot 的 Microsoft 应用 ID 是什么？4c 64 a9 e 8-9 aed-4b 35-b4fd-c56bd 4835 a66

• 什么类型的消息传递扩展命令？基于动作的消息传递扩展

• 你希望你的行动在什么样的背景下进行？撰写框、命令框、对话消息

• 您希望如何为您的操作从用户那里收集信息？使用适配卡

• 收集信息时需要配置或授权吗？不

• 您想要邮件扩展的设置选项吗？不

• 您的消息扩展命令的名称是什么？获取书籍

• 描述一下你的消息扩展命令？从 google API 获取图书

Note

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

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

图 4-19

Visual studio 代码 OOB

• 打开。env 文件➤并添加了从新客户端拷贝的 MICROSOFT_APP_PASSWORD 值

MICROSOFT_APP_ID=4c64a9e8-9aed-4b35-b4fd-c56bd4835a66
MICROSOFT_APP_PASSWORD=_5Z_S2.0tU7cGOWmec1KH3pm3yFg5YOzc-

第一步:首先更新消息扩展命令的 Manifest.json 文件。

• 导航到。/src/manifest/manifest.json 文件并替换名称和描述部分。

• 并将“composeExtensions”标题下的“commands”部分更新为“Get Books”

"name": {
    "short": "Get Books App",
    "full": "To get books using ISBN number"
  },
  "description": {
    "short": "Messaging extension Teams App to get books",
    "full": "Messaging extension Teams App to get books using ISBN number"
  },

"commands": [{
            "id": "getBooksMessageExtension",
            "title": "Get Books",
            "description": "Add a clever description here",

步骤 2 :请求用户给出 ISBN 号以获得更多详细信息。

• 导航到。/src/app/getBooksMessageExtension/getBooksMessageExtension . ts

• 转到“onFetchTask”方法并替换 value 部分，以获取用户的输入。

value: {
                title: "ISBN Number Selector",
                card: CardFactory.adaptiveCard({
                    $schema: "http://adaptivecards.io/schemas/adaptive-card.json",
                    type: "AdaptiveCard",
                    version: "1.0",
                    body: [
                        {
                            type: "TextBlock",
                            text: "Please enter an ISBN Number"
                        },
                        {
                            type: "Input.Text",
                            id: "isbn",
                      placeholder: "ISBN Number ISBN:9780789748591",
                            style: "email"
                        },
                    ],
                    actions: [
                        {
                            type: "Action.Submit",
                            title: "OK",
                            data: { id: "unique-id" }
                        }
                    ]
                })
            }

第三步:回复用户

• 转到“onSubmitAction”方法来替换下面的代码
  • 这个提交请求将根据 ISBN 号调用 google API ( https://www.googleapis.com/books/v1/volumes?q=ISBN-Number ) ，并用第一本书的详细信息响应用户:

    • 标题

    • 描述

    • 图书封面

    • 出版者

    • 国际标准书号(供参考)

      const request = require("request");
              const isbnnumber = value.data.isbn;
              const url = "https://www.googleapis.com/books/v1/volumes?q=" + isbnnumber + "&limit=1&offset=0";
      
              let title: string = "";
              let description: string = "";
              let publisher: string = "";
              let imageurl: string = "";
              let messagingExtensionResult;
      
              return new Promise<MessagingExtensionResult>((resolve, reject) => {
              request(url, {json: true}, (err, res, body) => {
                      if (err) {
                          return;
                      }
                      const data = body;
                      if (data.items) {
                          const item = data.items[0];
                          title = item.volumeInfo.title;
                          description = item.volumeInfo.description;
                          publisher = item.volumeInfo.publisher;
                          imageurl = item.volumeInfo.imageLinks.thumbnail;
                      }
                      const card = CardFactory.adaptiveCard(
                          {
                              type: "AdaptiveCard",
                              body: [
                                  {
                                      type: "Image",
                                      url: imageurl
                                  },
                                  {
                                      type: "TextBlock",
                                      size: "Large",
                                      text: "Title: " + title
                                  },
                                  {
                                      type: "TextBlock",
                                      size: "Medium",
                                      text: description
                                  },
                                  {
                                      type: "TextBlock",
                                      size: "Medium",
                                      text: "Publisher: " + publisher
      
                                  },
                                  {
                                      type: "TextBlock",
                                      size: "Medium",
                                      text: "ISBN Number: " + isbnnumber
                                  }
                              ],
                              $schema: "http://adaptivecards.io/schemas/adaptive-card.json",
                              version: "1.0"
                          });
      
                      messagingExtensionResult = {
                          type: "result",
                          attachmentLayout: "list",
                          attachments: [card]
                      };
                      resolve(messagingExtensionResult);
      
                  });
              });
      
      

该方法将首先加载书籍，然后加载模式的适配卡。最后，它返回一个类型为 MessagingExtensionResult 的对象，该对象为 Bot 框架定义了使用适配卡实现的任务模块。机器人框架将与 MSTeam 通信以显示卡片。

至此，action 命令的第一部分已经完成，它将提示用户输入 ISBN 号，并触发消息传递扩展。消息传递扩展的第二部分是使用输入的 ISBN 号来回复触发扩展的消息，其中包含图书的详细信息，或者，如果扩展是从撰写框触发的，它会将图书的详细信息添加到新消息中。

• 文件➤保存所有 保存的修改

• 至此，您的消息传递扩展已经准备好接受测试了！

测试消息传递扩展

打开命令提示符，导航到项目文件夹，并执行以下命令:

gulp ngrok-serve

这个 gulp 任务将运行命令行控制台中显示的许多其他任务。ngrok-serve 任务构建您的项目并启动一个本地 web 服务器(http://localhost:3007)。然后它用一个随机的子域启动 ngrok，这个子域会创建一个到本地 web 服务器的安全 URL。

在开发过程中，可以使用 ngrok 工具进行测试，该工具可以创建一个安全的可旋转的 URL，指向您的本地 HTTP 服务器。Ngrok 作为一个依赖项包含在项目中，所以不需要设置或配置任何东西。参见图 4-20 。

图 4-20

吞咽 ngrokserve 执行

Ngrok 已经创建了临时 URL 841c87a33afc.ngrok.io，它将映射到我们本地运行的 web 服务器。

然后去 Azure 门户，打开 Bot 通道注册 App。使用临时 URL 841c87a33afc.ngrok.io 更新消息端点(参见图 4-21 )。

图 4-21

具有 ngrok url 的消息传递端点

Note

ngrok 的免费版本会在您每次重新启动 web 服务器时创建一个新的 URL。测试应用时，确保每次重启 web 服务器时都更新 URL 的消息端点。

在 Microsoft 团队中安装消息传递扩展

现在让我们在 MSTeam 中安装应用。在浏览器中，导航到 https://teams.microsoft.com ，使用工作和学校帐户的凭据登录。

Microsoft Teams 可用作 web 客户端、桌面客户端和移动客户端。

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

图 4-22

向 MS 团队添加应用

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

图 4-23

上传应用

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

图 4-24

安装的应用

一旦软件包上传，MSTeam 将显示应用的摘要(图 4-25 )。

图 4-25

将应用添加到团队和渠道

从 Microsoft Teams 客户端测试消息传递扩展应用

图 4-26

对话部分

• 单击添加按钮导航到与机器人聊天，以测试 1:1 消息传递扩展。

• 或者转到您的任何渠道添加此应用。

• 请注意，当应用加载时，消息传递扩展支持的命令显示在编写框中。让我们测试消息扩展！参见图 4-26 。

图 4-27

用户输入模式弹出

• 点击图标，将打开用户输入模态弹出窗口(图 4-27 )。

图 4-28

响应输出

• 输入 ISBN 号，例如:ISBN:9780789748591，它支持任何 ISBN 号。

• 几秒钟后，它会在对话部分加载有关书籍的信息，您可以将这些信息发送给所有渠道用户(图 4-28 )。

您还可以使用从聊天中的现有消息触发消息传送扩展...邮件右上角的菜单。选择模式动作，然后选择获取书籍选项(图 4-29 )。

图 4-29

作用指令

在本练习中，您已经为自定义 Microsoft Teams 应用创建了一个 action command 消息传递扩展。

练习 2 -创建搜索命令消息传递扩展

在本练习中，您将学习如何从现有邮件中执行邮件扩展搜索命令。

在上一个练习中，您创建了一个 action messaging 扩展，该扩展使用户能够将图书的详细信息添加到消息中。在本节中，您将添加一个搜索消息传递扩展来查找特定的书籍。

更新应用的配置

首先，更新应用的清单以添加新的消息传递扩展。找到并打开。/src/manifest/manifest.json 文件。

接下来，找到 composeExtensions.commands 数组。将以下对象添加到数组中，以添加搜索扩展:

• 要查询的替换类型操作

• 要“编写”的上下文

• 对“搜索书籍”的描述

• 添加参数

更新后，代码如下所示:

"commands": [{
            "id": "getBooksMessageExtension",
            "title": "Get Books",
            "description": "Search for a Book",
            "initialRun": true,
            "type": "query",
            "context": [
                "compose"
            ],
            "parameters": [{
                "name": "searchKeyword",
                "description": "Enter ISBN number to search",
                "title": "ISBN Number"
            }],

            "fetchTask": true
        }]

更新消息传送扩展代码

然后找到 GetBooksMessageExtension.ts 文件。/src/app/GetBooksMessageExtension/GetBooksMessageExtension . ts

更新 botbuilder 包的导入语句，以包含 MessagingExtensionAttachment 对象

import { TurnContext, CardFactory, MessagingExtensionQuery, MessagingExtensionResult, MessagingExtensionAttachment} from "botbuilder";

接下来，将下面的方法" onQuery "添加到getbookmessageextension类

public async onQuery(context: TurnContext, query: MessagingExtensionQuery): Promise<MessagingExtensionResult> {
        let isbnnumber = "ISBN:9780789748591";
        if (query && query.parameters && query.parameters[0].name === "searchKeyword" && query.parameters[0].value) {
            isbnnumber = query.parameters[0].value;
        }

        const request = require("request");
        const url = "https://www.googleapis.com/books/v1/volumes?q=" + isbnnumber + "&limit=10&offset=0";

        let messagingExtensionResult;
        const attachments: MessagingExtensionAttachment[] = [];

        return new Promise<MessagingExtensionResult>((resolve, reject) => {
            request(url, { json: true }, (err, res, body) => {
                if (err) {
                    return;
                }

                const data = body;

                const searchResultsCards: MessagingExtensionAttachment[] = [];
                data.items.forEach((book) => {
                    searchResultsCards.push(this.getBookResultCard(book));
                });

                messagingExtensionResult = {
                    type: "result",
                    attachmentLayout: "list",
                    attachments: searchResultsCards
                };

                resolve(messagingExtensionResult);

            });
        });

    }

该方法将首先从 MSTeam 发送给机器人的查询中获取搜索关键字。然后，它将根据来自 Google Books API 的查询检索图书。

接下来，它将获取查询结果，将它们转换成卡片，并将它们添加到返回给 Bot 框架的 MessagingExtensionResult 中，最终返回给 MSTeam。

然后将下面给出的私有方法添加到同一个类中绑定英雄卡。

• 文件➤保存所有 保存的修改

• 至此，您的消息传递扩展搜索命令已经准备好进行测试了！

private getBookResultCard(selectedBook: any): MessagingExtensionAttachment {
        return CardFactory.heroCard(selectedBook.volumeInfo.title, selectedBook.volumeInfo.description);
    }

保存并测试消息传递扩展搜索命令

流程是这样的:

• 从命令行导航到项目的根文件夹，并执行以下命令:

图 4-30

搜索命令

• Ngrok 已经创建了临时 URL 956fce259023.ngrok.io，它将映射到我们本地运行的 web 服务器。

• 然后去 Azure 门户，打开 Bot 通道注册 App。使用临时 URL 956fce259023.ngrok.io 更新消息传递端点

• 转到您在上一节中安装了“应用”的频道

• 删除对话 app，在频道重新安装。(仅供参考:我们还可以更改应用的版本，更新应用。)

• 转到团队➤频道

• 在搜索框中输入 ISBN 号，等待几秒钟。MSTeam 将执行搜索并返回结果(图 4-30 )。

gulp ngrok-serve

在本练习中，您学习了如何从现有邮件中执行邮件扩展搜索命令。

练习 3 -实现一个链接展开消息传递扩展

在本练习中，您将学习如何将展开的链接添加到您的 Microsoft Teams 应用中，以及如何实现这种类型的消息传递扩展。

更新应用的配置

首先，更新应用的清单以添加新的消息传递扩展。找到并打开。/src/manifest/manifest.json 文件。

接下来，找到 composeExtensions 属性。在 commands 属性后添加以下属性，以添加 link unfurling messaging 扩展。

,
        "messageHandlers": [{
            "type": "link",
            "value": {
                "domains": [
                    "*. wikipedia.org"
                ]
            }
        }]

接下来，找到 validDomains 属性。将以下域添加到有效域数组中:" *.google.com "

"validDomains": [
        "{{HOSTNAME}}",
        "*. wikipedia.org"
    ],

更新消息传送扩展代码

然后找到 GetBooksMessageExtension.ts 文件。/src/app/GetBooksMessageExtension/GetBooksMessageExtension . ts

更新 botbuilder 包的导入语句，以包含对象 AppBasedLinkQuery

  import {
      TurnContext, CardFactory, MessagingExtensionAttachment, MessagingExtensionQuery, MessagingExtensionResult, AppBasedLinkQuery
} from "botbuilder";

接下来，将下面的方法" onQueryLink "添加到 GetBooksMessageExtension 类中

public async onQueryLink(context: TurnContext, query: AppBasedLinkQuery): Promise<MessagingExtensionResult> {

        let messagingExtensionResult;
        const attachments: MessagingExtensionAttachment[] = [];
        const url: any = query.url;
        const attachment = CardFactory.thumbnailCard(
            "Link unfurling", url, ["http://jenkinsblogs.com/wp-content/uploads/2018/04/cropped-icon.png"]);

        messagingExtensionResult = {
            attachmentLayout: "list",
            type: "result",
            attachments: [attachment]
        };

        return messagingExtensionResult;
    }

当与域匹配的 URL 在应用清单中列出时，Bot 框架调用此方法，并返回 MessagingExtensionResult 对象，该对象包含与现有消息的 URL 匹配的更新缩略图卡。

• 文件➤保存所有 保存的修改

• 至此，您的消息传递扩展链接展开就可以测试了！

保存并测试展开的消息传递扩展链接

现在是测试的时候了:

• 从命令行导航到项目的根文件夹，并执行以下命令:

图 4-31

链接展开

• Ngrok 已经创建了临时 URL f95c9feee129.ngrok.io，它将映射到我们本地运行的 web 服务器。

• 然后去 Azure 门户，打开 Bot 通道注册 App。使用临时 URL f95c9feee129.ngrok.io 更新消息传递端点

• 转到您在上一节中安装了“应用”的频道

• 删除对话 app，在频道重新安装。(仅供参考:我们还可以更改应用的版本，更新应用。)

• 转到团队➤频道

• 将其中一个 wikipedia.org Ex:https://en.wikipedia.org/wiki/book的网址复制粘贴到撰写框中。请注意，消息已更新为包括卡片，当您发送消息时也会包括卡片(图 4-31 )。

gulp ngrok-serve

在本练习中，您学习了如何将链接展开添加到 Microsoft Teams 应用中，以及如何实现这种类型的消息传递扩展。

结论

在本章中，您已经学习了消息传递扩展的各种功能，以及如何使用 Yeoman generator (yo teams)为 Microsoft 团队创建和添加消息传递扩展应用。它还介绍了如何使用自适应卡和带有动作命令的动作按钮，带有搜索命令的英雄卡，以及带有从应用展开的链接的缩略图卡。

您还学习了如何使用 Yeoman generator for Microsoft Teams 创建消息传递扩展应用。除此之外，在我们接下来的章节中，您将开始了解 Microsoft Teams 应用的不同选项和功能。

五、使用标签的嵌入式 Web 体验

当您想要将大面积的 web 内容或仪表板集成到用户中时，选项卡是 Microsoft 团队中的最佳选择。用户可以与页面交互并获得动态数据。选项卡内的对话将发布在团队的渠道中，并宣传您的选项卡。团队成员可以访问服务、渠道中的内容，或者在选项卡的聊天中访问。团队选项卡直接处理工具和数据，并就工具和数据进行对话，所有这些都在渠道或聊天的上下文中进行。

在本章中，您将了解选项卡的各种功能–它解释了如何为个人、组和团队上下文创建选项卡，并提供了指导用户的示例。标签是用户从 MSTeam 参与你的应用的一种强大而简单的方式。

选项卡概述

对于团队成员而言，选项卡始终位于屏幕顶部，每个人都可以轻松访问。Microsoft Teams 中的选项卡允许您像网页一样显示丰富的交互式 web 内容。这可以很容易地被描述为向你的私聊、群聊或团队频道添加更多相关信息的可能性。你可以在所有三种不同类型的对话中添加标签:团队、群聊或个人用户的个人应用。选项卡嵌入在 MSTeam 中，使用简单的 iframes 指向应用清单中声明的域。您还可以根据上下文轻松地向选项卡添加特定功能。

团队中有两种选项卡:

• 频道/组

  频道/群组选项卡向频道和群组聊天提供内容，是围绕基于网络的专用内容创建协作空间的绝佳方式。

• 个人的

  个人标签，以及个人范围的机器人，是个人应用的一部分，范围是单个用户。它们可以固定在左侧导航栏上，以便于访问。

  一个好的标签应该显示以下特征:

• 聚焦功能

  选项卡在满足特定需求时效果最佳。关注与选项卡所在频道相关的一小组任务或数据子集。

• 还原铬

  避免在一个选项卡中创建多个面板，添加导航层，或者要求用户在一个选项卡中进行垂直和水平滚动。换句话说，尽量不要在你的标签里有标签。

• 综合

  通过在对话中张贴卡片，找到通知用户标签活动的方法。

• 简化访问

  确保您在正确的时间授予正确的人访问权限。保持您的登录过程简单将避免对贡献和协作造成障碍。

• 个性

  Your tab canvas presents a good opportunity to brand your experience. Incorporate your own logos, colors, and layouts to communicate personality. Your logo is an important part of your identity and a connection with your users. So be sure to include it.

  • 将您的徽标放在左上角、右上角或底边。

  • 保持你的标志小而不显眼。

选项卡布局

选项卡是画布，您可以使用它们来共享内容、举行对话和托管第三方服务，所有这些都在团队的有机工作流中进行。当您在 Microsoft Teams 中创建选项卡时，它会将您的 web 应用放在突出位置，便于从关键对话中访问。

选项卡可以排列成列表、网格、列或单个画布，只要最适合您的应用即可。

单一画布

这是一个完成工作的大领域。OneNote 和 Wiki 遵循这种模式。如果你有一个不把内容分成更小的组件的应用，这将是一个很好的选择。见图 5-1 。

图 5-1

单一画布布局

圆柱

对于将项目从一列移动到另一列以指示新状态的工作流，列非常有用。考虑在这些情况下支持拖放。我们建议对详细视图使用对话框或内嵌扩展。见图 5-2 。

图 5-2

列画布布局

目录

列表对于排序和过滤大量数据以及将最重要的事情放在最上面非常有用。使用可排序的列很有帮助。可以向省略号菜单下的每个列表项添加操作。见图 5-3

图 5-3

列表画布布局

格子

网格对于显示高度可视化的元素非常有用。它有助于在顶部包含一个过滤器或搜索控件(图 5-4 )。

图 5-4

网格画布布局

Microsoft 团队个人选项卡

在应用包的应用清单中声明了一个自定义选项卡。对于需要作为选项卡包含在应用中的每个网页，您需要定义一个 URL 和一个范围。

Microsoft Teams 支持两种不同类型的选项卡:

• 静态选项卡

• 可配置选项卡

静态选项卡只能使用个人范围，而可配置选项卡可以使用团队或“群聊”范围。静态标签为个人用户提供一个私人区域，用户不与团队的其他成员共享信息。

定义个人标签

个人应用是具有个人范围的团队应用。作为应用开发人员，您可以选择提供一个侧重于与单个用户交互的应用版本，一个提供嵌入式 web 体验的个人标签。个人应用使用户能够在一个地方查看他们选择的内容。

在应用包的应用清单中声明了一个自定义选项卡。对于需要作为选项卡包含在应用中的每个网页，您需要定义 URL 和范围。无论您选择在渠道/组或个人范围内显示您的选项卡，您都需要在您的选项卡中显示一个“IFramed”HTML 内容页面。对于个人选项卡，内容 URL 由“staticTabs”数组中的“content URL”属性直接在清单中设置。您的选项卡内容对所有用户都是一样的。

创建静态选项卡

要创建一个静态选项卡，您需要有一些想要在团队中公开的 web 内容。对于所有用户来说，这些内容应该是相同的。您需要创建一个“man feist . JSON”文件来表示您的静态选项卡。从下面描述的基本模板开始，然后添加用于创建静态选项卡的特定部分。

以下是个人选项卡清单示例:

|

名字

|

描述

|
| --- | --- |
| entity yid | 这是您选项卡的唯一标识符。 |
| 名称 | 您希望页面在团队中显示的显示名称。 |
| contentUrl | 这是作为选项卡内容呈现和显示的 URL。 |
| 网站 Url | 替代 URL，当您的 contentUrl 呈现时，页面顶部会显示一个带有“转到网站”链接的图标。如果您想将用户引向另一种体验，可以为此链接指定不同的 URL。 |
| 范围 | 定义选项卡在团队客户端中的显示位置。注意:静态选项卡仅支持个人范围。 |

   "staticTabs": [
        {
          "entityId": "default-data",
          "name": "My Personal Tab",
          "contentUrl": "https://{{HOSTNAME}}/myPersonalTab/",
          "scopes": [
            "personal"
          ]
        }
      ]

个人选项卡的显示内容对所有用户都是相同的，并且在“staticTabs”数组中进行配置。您可以在一个应用中声明多达 16 个个人标签。

Note

移动客户端的个人选项卡目前在开发者预览版中可用。

Microsoft 团队频道或组选项卡

频道或群组选项卡向频道和群组聊天提供内容，是围绕基于 web 的专用内容创建协作空间的绝佳方式。频道和“群聊”的可配置选项卡，这些选项卡除了包含主内容页面外，还包含一个配置页面。您需要创建一个额外的配置页面，允许您的用户配置您的内容页面 URL，方法是使用 URL 查询字符串参数为该上下文加载适当的内容。这是因为您的频道或群组选项卡可以添加到多个不同的团队或群组聊天中。在每次后续安装时，您的用户将能够配置选项卡，让您根据需要定制体验。当用户添加一个选项卡或配置一个选项卡时，就会有一个 URL 与团队 UI 中显示的选项卡相关联。配置一个选项卡只需向该 URL 添加额外的参数。

例如，当您添加 Azure DevOps 板选项卡时，配置页面允许您选择该选项卡将加载哪个板。配置页 URL 由应用清单中 configurableTabs 数组中的 configurationUrl 属性指定。

移动客户端

您的频道或群组选项卡出现在团队移动客户端上，为此， setSettings ()方法配置必须有一个用于 websiteUrl 属性的值。

创建可配置的选项卡

频道或“群聊”被添加到可配置标签阵列中。您只能在 configurableTabs 数组中声明一个频道或“群聊”。如果您需要根据不同用户或不断变化的环境而变化的内容，那么您需要一个可配置的选项卡。

下面是一个频道/组标签清单示例:

|

名字

|

描述

|
| --- | --- |
| 配置 Url | 配置页面的 https:// URL。 |
| canupdateconfiguration | 一个值，指示选项卡配置的实例在创建后是否可由用户更新。默认值:true(布尔值) |
| 范围 | 可配置的选项卡仅支持团队和群组聊天范围。(枚举数组) |

   "configurableTabs": [
       {
         "configurationUrl": "https://{{HOSTNAME}}/myConfigurableTab/config.html",
         "canUpdateConfiguration": true,
            "scopes": [
           "team",
           "groupchat"
         ]
       }
     ],

Note

每个应用最多可以有一个频道或群组标签和十六个个人标签。

在自定义选项卡中实现身份验证

团队中的选项卡表示为“Iframes 因此，必须做出一些牺牲。如果是身份验证，那么如果没有正确设置权限，应用就无法导航到第三方提供者。

选项卡的 Microsoft 团队身份验证流程

OAuth 2.0 是 Azure AD 和许多其他身份提供者使用的一种开放的身份验证和授权标准。对 OAuth 2.0 的基本理解是在团队中使用身份验证的先决条件。标签和僵尸工具的认证流程略有不同，因为标签和网站非常相似，所以它们可以直接使用 OAuth 2.0 机器人不会也必须做一些不同的事情，但核心概念是相同的。见图 5-5 。

图 5-5

标签的流验证流

• 用户与选项卡配置或内容页面上的内容进行交互，通常是一个标记为“登录或“登录”的按钮。

• 选项卡为其身份验证起始页构造 URL，可选地使用来自 URL 占位符的信息或通过调用Microsoft Teams . get context()Teams 客户端 SDK 方法来简化用户的身份验证体验。

• 选项卡然后调用Microsoft teams . authentic ation . authenticate()方法，并注册 successCallback 和 failureCallback 函数。

• Teams 在弹出窗口的 iframe 中打开起始页。起始页生成随机状态数据，将其保存以供将来验证，并重定向到身份提供者的/授权端点，如用于 Azure AD 的https://login.microsoftonline.com/<tenantID>/oauth 2/authorize。用您自己的租户 id ( context.tid )替换<租户 id >。

• 与团队中的其他应用授权流一样，起始页必须位于其有效域列表中的域上，并且与登录后重定向页面位于同一域上。

• 要点:OAuth 2.0 隐式授权流在身份验证请求中调用状态参数，该参数包含唯一的会话数据，以防止跨站点请求伪造攻击。以下示例使用随机生成的 GUID 作为状态数据。

• 在提供商的站点上，用户登录并被授权访问该选项卡。

• 提供者使用访问令牌将用户带到选项卡的 OAuth 2.0 重定向页面。

• 选项卡检查返回的状态值是否与之前保存的相匹配，并调用Microsoft teams . authentic ation . notify success()，进而调用在步骤 3 中注册的 successCallback 函数。

• 团队关闭弹出窗口。

• 该选项卡显示配置 UI，或者刷新或重新加载选项卡内容，具体取决于用户的起始位置。

将选项卡上下文视为提示

尽管选项卡上下文提供了关于用户的有用信息，但不要使用这些信息来验证用户，无论您是通过选项卡内容 URL 的 URL 参数还是通过调用 Microsoft Teams client SDK 中的Microsoft Teams . get context()函数来获得这些信息。一个恶意的参与者可以使用自己的参数调用您的选项卡内容 URL，一个冒充 MSTeam 的网页可以在一个 iframe 中加载您的选项卡内容 URL，并将其自己的数据返回给 getContext() 函数。您应该将选项卡上下文中与身份相关的信息简单地视为提示，并在使用前验证它们。

使用 Azure AD 身份验证

您可能希望在团队应用中使用许多服务，其中大多数服务都需要身份验证和授权才能访问服务；服务包括脸书、推特和团队。团队的用户使用 Microsoft Graph 将用户配置文件信息存储在 Azure Active Directory (Azure AD)中，本节将重点介绍使用 Azure AD 访问这些信息的身份验证。

OAuth 2.0 是一个开放的认证标准，被 Azure AD 和许多其他服务提供商使用。理解 OAuth 2.0 是在 Teams 和 Azure AD 中使用身份验证的先决条件。下面给出的例子使用 OAuth 2.0 隐式授权流，目标是最终从 Azure AD 和 Microsoft Graph 读取用户的个人资料信息。

使用静默身份验证

Azure Active Directory (Azure AD)中的静默身份验证通过静默刷新身份验证令牌，最大限度地减少了用户需要输入登录凭据的次数。

？ADAL.js 库为 OAuth 2.0 隐式授权流创建了一个隐藏的 iframe，但它指定了 prompt=none，这样 Azure AD 就永远不会显示登录页面。如果因为用户需要登录或授予对应用的访问权限而需要用户交互，Azure AD 会立即返回 ADAL.js 的错误，然后报告给你的应用。此时，如果需要，您的应用可以显示一个登录按钮。

Note

目前，静默认证仅适用于选项卡。从 bot 登录时，它不起作用。

使用单点登录身份验证

用户通过他们的工作、学校或微软帐户“登录”MSTeam。您可以利用这一点，在桌面或移动客户端上允许单点登录来授权您的 Microsoft Teams 选项卡。因此，如果用户同意使用你的应用，他们不必在另一台设备上再次同意；他们将自动登录。

需要额外 Microsoft Graph 范围的应用

SSO 的当前实现只对用户级权限授予许可:电子邮件、配置文件、offline_access、OpenId，而不是其他 API，例如 user。阅读或邮件。

以下是一些可行的解决方法:

• 租户管理员同意

• 使用 Auth API 请求额外同意

练习 1 -创建自定义的 Microsoft 团队个人选项卡

Microsoft Teams Developer Platform 帮助您将业务线(LOB)应用和服务无缝地扩展到 Microsoft 团队中。如果您开发了通用功能应用，它还允许您将自定义应用分发给您的组织或公共用户。

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

• Node.js - v10.16.0

• NPM - 6.9.0

• 吞咽

  • CLI 版本:2.3.0

  • 本地版本:4.0.2

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

• Visual Studio 代码

和

• Microsoft Azure 订阅

• Office 365 订阅

在本练习中，您将使用 Microsoft Teams Yeoman generator Visual Studio 代码和 App Studio 创建一个新的 Microsoft Teams 个人选项卡。

使用 Yeoman 生成器创建个人选项卡

在本节中，您将使用 Yeoman 生成器(yo teams)创建一个新的个人应用团队应用。本练习将指导您如何创建自定义个人选项卡。

要创建新的个人选项卡应用项目，请在您喜欢的位置创建新的项目目录(图 5-6 ):

1. 打开命令提示符

2. 创建一个新文件夹“personaltabCh5”

3. 通过运行以下命令，导航到新创建的目录并运行 Yeoman generator for Microsoft Teams:

图 5-6

yo 团队发电机

yo teams

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

图 5-7

回答约曼问卷

• 您的解决方案名称是什么？个人选项卡

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

• 您的 Microsoft Teams 应用项目的标题？个人标签

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

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

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

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

• 您将在其中托管此解决方案的 URL？https://personaltab.azurewebsites.net

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

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

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

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

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

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

Note

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

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

图 5-8

Visual studio 代码

步骤 1:首先更新个人选项卡范围的 Manifest.json 文件:

• 导航到。/src/manifest/manifest.json 文件，并根据您的 tab 业务替换名称和描述部分。

• 找到“static tabs”:section 并将 entityid - default-data 替换为“personaldata”。

步骤 2: 更新 react 组件 MyTab.tsx(对用户的响应)

• 导航到。/src/app/scripts/MyTab/MyTab . tsx

• 找到导出接口 IMyTabState，定义 userEmailID 类型变量

  export interface IMyTabState extends ITeamsBaseComponentState {
  
  

• 转到 public async componentWillMount()方法，从选项卡上下文中获取用户电子邮件 Id。

    entityId?: string;
    userEmailID?: string;
}

• 然后转到 render 方法来呈现用户信息。

this.setState({
                    entityId: context.entityId,
                    userEmailID: context.upn
                });

replace <Text content={this.state.entityId} /> to
User Email ID: <Text content={this.state.userEmailID} />

该组件将向用户显示电子邮件 id 和样本按钮。这是用于选项卡的基于 TypeScript React 的类。找到 render()方法并添加用户业务线。

要添加更多 React fluent UI 控件(@ fluent UI/React-north star)，请参考 App Studio–控件库选项卡中的控件库部分。该选项卡展示了 Microsoft Teams UI 控件库。

以下是控件库中可用的 React 库:

• ms teams-UI-styles-core-UI 组件的核心 CSS 样式。独立于任何 UI 框架。

• msteams-ui-icons-core -团队图标的核心集合。独立于任何 UI 框架。

• ms teams-ui-组件-React-React 绑定库。这取决于 msteams-ui-styles-core 和 React。

• msteams-ui-icons-react -团队图标集合的 react 绑定库。这取决于 msteams-ui-icons-core 和 React。

前往➤团队应用工作室(图 5-9 )。

图 5-9

源编辑器

它会开放 App Studio 导航到控件库选项卡，并从 App Studio 获取使用控件库进行开发的示例代码(图 5-10 )。

图 5-10

App Studio 控件库

• 文件➤保存所有 保存的修改

至此，您的个人选项卡已经准备好接受测试了！

在本地运行您的个人选项卡

打开命令提示符，导航到项目文件夹并执行以下命令；要运行您的选项卡，您可以使用 gulp serve 命令。

gulp serve

这将为您构建并启动一个本地 web 服务器来测试您的应用。每当您在项目中保存文件时，该命令也会重新生成应用。

您现在应该能够浏览http://localhost:3007/MyTab/index . html以确保您的选项卡正在呈现。见图 5-11 。

图 5-11

个人选项卡本地主机渲染

在团队中测试个人选项卡

打开命令提示符，导航到项目文件夹，并执行以下命令:

gulp ngrok-serve

这个 gulp 任务将运行命令行控制台中显示的许多其他任务。ngrok-serve 任务构建您的项目并启动一个本地 web 服务器(http://localhost:3007)。然后它用一个随机的子域启动 ngrok，这个子域会创建一个到本地 web 服务器的安全 URL。

在开发过程中，可以使用 ngrok 工具进行测试，该工具可以创建一个安全的可旋转的 URL，指向您的本地 HTTP 服务器。Ngrok 作为一个依赖项包含在项目中，因此不需要设置或配置任何东西(图 5-12 )。

图 5-12

吞咽 ngrok 发球执行

Ngrok 已经创建了临时 URL b7fce570af23.ngrok.io，它将映射到我们本地运行的 web 服务器。

在 Microsoft 团队中安装个人选项卡

现在让我们在 MSTeam 中安装应用。在浏览器中，导航到 https://teams.microsoft.com ，使用工作和学校帐户的凭据登录。

Microsoft Teams 可用作 web 客户端、桌面客户端和移动客户端。使用应用栏导航菜单，选择更多添加的应用按钮。然后选择更多应用，接着上传自定义应用，然后为我或我的团队上传(图 5-13 )。

图 5-13

向 MS 团队添加应用

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

图 5-14

上传应用

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

图 5-15

安装的个人应用

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

图 5-16

添加个人选项卡

在团队中安装个人选项卡应用

图 5-17

个人标签输出

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

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

• 或者选择...菜单并从列表中选择您的应用(图 5-17 )。

在本练习中，您已经为自定义 Microsoft Teams 应用创建了个人选项卡。

练习 2 -创建自定义的 Microsoft 团队频道或群组选项卡

在本练习中，您将使用 Yeoman 生成器(yo teams)为 Teams 应用创建一个新的可配置选项卡。本练习将指导您如何为频道或群组聊天创建自定义选项卡。

要创建新的可配置选项卡应用项目，请在您喜欢的位置创建一个新的项目目录。

1. 打开命令提示符并创建一个新文件夹“configurabletabCh5”

2. 导航到新创建的目录

3. 通过运行以下命令来运行 Yeoman generator for Microsoft Teams:

图 5-18

可配置选项卡的 yo 团队

1. 如果需要，修改解决方案名称。我已将其更改为“可配置选项卡”(图 5-18 )。

yo teams

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

图 5-19

回答约曼问卷

• 您的解决方案名称是什么？可配置选项卡

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

• 您的 Microsoft Teams 应用项目的标题？可配置表 5

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

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

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

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

• 您将在其中托管此解决方案的 URL？https://configurabletab.azurewebsites.net

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

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

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

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

• 您想创建哪种选项卡？可配置的

• 您打算在您的选项卡上使用什么范围？组队，群聊(我选择了组队和群聊)

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

• 是否希望此选项卡在 SharePoint Online 中可用？不

Note

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

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

图 5-20

Visual studio 代码 OOB

可配置选项卡项目显示了三个文件:MyTeamTab、config 和 Remove react 组件。

• myteamtab . tsx–自定义选项卡内容页面的实现

• myteamtabconfig . tsx–我的团队选项卡配置页面的实现

• MyTeamTabRemove.tsx -我的团队选项卡移除页面的实现

步骤 1: 更新 Manifest.json 文件配置可配置页签:

• 导航到。/src/manifest/manifest.json 文件，并根据您的 tab 业务替换名称和描述部分。

"configurableTabs": [{
        "configurationUrl": "https://{{HOSTNAME}}/myTeamTab/config.html",
        "canUpdateConfiguration": true,
        "scopes": [
            "team",
            "groupchat"
        ]
    }],

第二步:更新 react 组件 MyTeamTab.tsx(响应用户的自定义选项卡内容页面):

• 在您的项目中，导航到/src/app/scripts/MyTeamTab/MyTeamTab . tsx 文件

• 找到导出接口 IMyTeamTabState，定义 useremail，TeamID，Teamname，ChannelID，ChannelName 类型变量。

• 转到 public async componentWillMount()方法，从选项卡上下文中获取用户电子邮件 Id、团队和渠道详细信息。

export interface IMyTeamTabState extends ITeamsBaseComponentState {
    entityId?: string;
    useremail?: string;
    TeamID?: string;
    TeamName?: string;
    ChannelID?: string;
    ChannelName?: string;
}

• 然后转到 render 方法来呈现用户信息并找到这些信息:

this.setState({
                    entityId: context.entityId,
                    useremail: context.upn,
                    TeamID: context.teamId,
                    TeamName: context.teamName,
ChannelID: context.channelId, ChannelName: context.channelName

                });

• 将下面给出的代码添加到上述语句的旁边

"<div><Text content={this.state.entityId} /></div>"

<div>User Email ID : <Text content={this.state.useremail} /></div>
        <div>Team ID : <Text content={this.state.TeamID} /></div>
        <div>Team Name : <Text content={this.state.TeamName} /></div>
        <div>Chanel ID : <Text content={this.state.ChannelID} /></div>
        <div>Channel Name : <Text content={this.state.ChannelName} /></div>

该组件将显示用户电子邮件 id，团队和渠道信息，以及样本按钮。这是用于选项卡的基于 TypeScript React 的类。找到 render()方法并添加一个用户业务逻辑行。

要添加更多 react fluent UI 控件(@ fluent UI/react-north star)，请参考 App Studio–控件库选项卡中的控件库部分。该选项卡展示了 Microsoft Teams UI 控件库。

• 文件➤保存所有 保存的修改

• 至此，您的可配置选项卡已经准备好进行测试了！

在本地运行您的可配置选项卡

打开命令提示符。导航到项目文件夹并执行以下命令；要运行您的选项卡，您可以使用 gulp serve 命令。

gulp serve

这将为您构建并启动一个本地 web 服务器来测试您的应用。每当您在项目中保存文件时，该命令也会重新生成应用。

你现在应该能够浏览到http://localhost:3007/MyTeamTab以确保你的标签正在呈现(图 5-21 )。

图 5-21

可配置选项卡本地主机执行

在团队中测试可配置选项卡

打开命令提示符，导航到项目文件夹，并执行以下命令:

gulp ngrok-serve

这个 gulp 任务将运行命令行控制台中显示的许多其他任务。ngrok-serve 任务构建您的项目并启动一个本地 web 服务器(http://localhost:3007)。然后它用一个随机的子域启动 ngrok，这个子域会创建一个到本地 web 服务器的安全 URL。

在开发过程中，可以使用 ngrok 工具进行测试，该工具可以创建一个安全的可旋转的 URL，指向您的本地 HTTP web 服务器。Ngrok 作为一个依赖项包含在项目中，因此不需要设置或配置任何东西(图 5-22 )。

图 5-22

Ngrok 服务执行

Ngrok 已经创建了临时 URL b7fce570af23.ngrok.io，它将映射到我们本地运行的 web 服务器。

在 Microsoft 团队中安装可配置选项卡

现在让我们在 MSTeam 中安装应用。在浏览器中，导航到 https://teams.microsoft.com ，使用工作和学校帐户的凭据登录。

Microsoft Teams 可用作 web 客户端、桌面客户端和移动客户端。使用应用栏导航菜单，选择更多添加的应用按钮。然后选择更多应用，接着上传自定义应用，然后为我或我的团队上传。见图 5-23

图 5-23

向 MS 团队添加应用

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

图 5-24

上传应用

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

图 5-25

安装的应用

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

图 5-26

将应用添加到团队

在团队中安装可配置选项卡

图 5-27

选择渠道团队

• 单击“添加到团队”按钮，导航到“配置”页面，在“频道”中添加该选项卡。

• 然后搜索并选择频道以设置选项卡(图 5-27 )。

图 5-28

输入选项卡名称

• 输入选项卡名称“我的团队选项卡”并保存(图 5-28 )。

它将在频道中添加选项卡，并通过选项卡显示所有信息，如下图 5-29 所示。

图 5-29

可配置的选项卡名称输出

在本练习中，您已经为自定义 Microsoft Teams 应用创建了一个可配置的选项卡。

结论

在本章中，您已经学习了选项卡的各种功能，以及如何使用 Yeoman generator (yo teams)创建个人和可配置的应用并将其添加到 Microsoft 团队中。它还介绍了如何在选项卡中使用静默身份验证、SSO 身份验证和 Azure AD 身份验证。

您还学习了如何使用 Yeoman generator for Microsoft Teams 创建选项卡。在接下来的章节中，你将开始学习 MSTeam 应用的不同选项和功能。

六、使用任务模块收集用户输入

任务模块是弹出的体验模式，因此您可以使用 JavaScript 内容或自定义 Microsoft Teams 应用的适配卡来填充 HTML。此外，您可以使用任务模块收集用户的输入。

在这一章中，你将学习任务模块的各种特性——它解释了如何为任务模块创建模态，并举例指导用户。任务模块是用户从 Microsoft 团队参与您的应用的一种强大而简单的方式。

任务模块概述

任务模块是从 tab 或 bot 团队的应用中收集输入或向用户显示信息的弹出窗口。任务模块加载在基于 iframe 的小部件中，并支持两种类型的呈现选项。第一个是用 JavaScript 脚本运行你的定制 HTML 页面，第二个是适配卡。Tabs 同时支持 HTML 页面和适配卡，但是 bot 只支持适配卡。然而，任务模块建立在 Microsoft Teams 选项卡之上，它们本质上是一个弹出窗口中的选项卡，用于收集用户输入或显示视频、表单或自适应卡。

可以通过三种方式调用任务模块:

• 频道或个人标签

  使用“Microsoft 团队”选项卡，您可以从选项卡上的按钮、链接或菜单中调用任务模块。

• 蝇蛆病

  从你的机器人发出的卡片上的按钮。当您不需要频道中的每个人都看到您在用机器人做什么时，这特别有用。

• 来自深层链接的团队之外

  您还可以创建 URL 来从任何地方调用任务模块。这里将详细介绍这一点。

图 6-1 显示了任务模块的样子。

图 6-1

任务模块视图

1. 你的应用的颜色图标。

2. 你的应用的简称。

3. 在“TaskInfo”对象的 title 属性中指定的任务模块的标题。

4. 适应性或 HTM 页面的标题。

5. 如果您使用“TaskInfo”对象的 URL 属性加载自己的网页，则橙色矩形是您的网页出现的位置。

6. 黄色矩形；如果您通过“TaskInfo”对象的 Card 属性显示自适应卡，则会为您添加填充。

7. 自适应卡按钮将在这里渲染。如果您使用自己的页面，您必须创建自己的按钮。

任务模块可以从标签、机器人或深层链接中调用，其中出现的内容可以是 HTML 或适配卡，因此在如何调用它们以及如何处理用户交互的结果方面有很大的灵活性。

使用选项卡中的任务模块收集用户输入

将任务模块添加到选项卡可以大大简化任何需要数据输入的工作流程。任务模块允许您使用带有 JavaScript 和自适应卡的 HTML 在团队感知的弹出窗口中收集他们的输入。

使用 JavaScript 和 HTML

• 使用 TaskInfo 对象调用 Teams 客户端 SDK 函数 tasks.startTask()。

• 对于使用 URL 属性的 html 和 JavaScript 任务信息:

• 使用 Teams 客户端 SDK 函数 tasks.startTask()和可选的 submitHandler(err，result)回调函数

const taskInfo = {
            url: this.appRoot() + `/taskModulesTab/getinfo.html`,
            title: "Custom Form",
            height: 300,
            width: 400
        };

• 在任务模块代码中，用户完成输入后，调用 Teams SDK 函数 tasks.submitTask()，将结果对象作为参数。如果在 tasks.startTask()中指定了 submitHandler 回调，Teams 将使用结果作为参数来调用它。

microsoftTeams.tasks.startTask(taskModuleInfo);

• 如果调用 tasks.startTask()时出现错误，则使用 err 字符串调用 submitHandler 函数。

const submitHandler = (err, result) => {
            this.setState(Object.assign({}, this.state, {
                name: `Name : ${result.name}`,
            }));
};

• 您还可以在调用 teams.startTask()时指定 completionBotId 在这种情况下，结果将发送给 bot。

microsoftTeams.tasks.startTask(taskInfo, submitHandler);

键盘和辅助功能指南

正如上一节所讨论的，任务模块允许您使用 HTML 或自适应卡在弹出绑定中收集用户输入；也就是说，任务模块呈现在 HTML 页面或适配卡中。在使用基于 HTML 的任务模块时，处理所有键盘事件是您的责任，但是自适应卡使用开箱即用的功能来处理键盘事件。

任务模块 HTML 文件位于项目文件夹下:

Ex: ...\taskModulesTab\src\app\web\taskModulesTab\index.html

要在 HTML 页面中呈现 tomnoddies 应用:

taskModulesTab.TaskModulesTab.render(document.getElementById('app'), {});

在 HTML 页面中，我们使用 JavaScript 来处理事件并将数据返回到用户选项卡应用。下面的代码初始化 Microsoft teams，处理 escape 键，并在 HTML 页面中验证输入表单。

   <script>
          microsoftTeams.initialize();

        //- Handle the Esc key
        document.onkeyup = function(event) {
            if ((event.key === 27) || (event.key === "Escape")) {
                microsoftTeams.tasks.submitTask(null);
//- this will return an err object to the completionHandler()
            }
       }

        function validateForm() {
            let customerInfo = {

                name: document.forms["customerForm"]["name"].value,
                email: document.forms["customerForm"]["email"].value,
                designation: document.forms["customerForm"]["designation"].value
            }

            microsoftTeams.tasks.submitTask(customerInfo, "");
            return true;
        }
   </script>

然后，MSTeam 将确保从任务模块标题到 HTML 的键盘导航正常工作，反之亦然。

使用适配卡

第二个选项是一个自适应卡，用于收集团队中任务模块的输入。为此，请遵循以下步骤。

• 使用 TaskInfo 对象和 TaskInfo.card 调用 Teams 客户端 SDK 函数 tasks.startTask()，task info . Card 包含要在任务模块弹出窗口中显示的适配卡的 JSON。

• 对于使用卡的自适应卡。

• 如果在 tasks.startTask()中指定了 submitHandler 回调，那么如果在调用 tasks.startTask()时出现错误，或者如果用户使用右上角的 X 关闭任务模块弹出窗口，Teams 将使用 err 字符串调用它。

const taskModuleInfo = {
            title: "Custom Form",
            card: adaptiveCard,
            width: 500,
            height: 500
        };

• 如果用户按下一个动作。Submit 按钮，那么它的数据对象将作为 result 的值返回。

microsoftTeams.tasks.startTask(taskInfo, submitHandler);

"actions": [{
        "type": "Action.Submit",
        "title": "Submit"
    }]

任务信息对象

taskInfo 对象包含告知 Microsoft 团队有关任务模块的属性。该对象包括以下属性:

• 标题(字符串):任务模块标题

• 高度&宽度(数字|字符串):任务模块弹出的模态高度和宽度尺寸或预定义的尺寸(小、中、大)。命名大小是显示任务模块的可用空间的预定义百分比。对于宽度，它们是 20%、50%和 60%，而高度值是 20%、50%和 60%。

   microsoftTeams.tasks.startTask(taskInfo, Callback);

   const taskInfo = {
               url: this.appRoot() + `/taskModulesTab/getinfo.html`,
               title: "Custom Form",
               height: 300,
               width: 400,
         failbackurl:   "",
         card: “adaptivecardjosnobj”
        };

url(string):URL 是任务模块 html 页面路径，作为任务模块内部的< iframe >加载，URL 域应该添加到清单包文件的 validDomains 数组部分

• failbackUrl (string):如果 Teams 客户端不支持任务模块特性，那么这个 Url 将在浏览器选项卡中打开。

• 卡:如果你不是用 HTML 页面做任务模块，那么添加卡对象或者适配卡 bot 卡附件，如果你是用 bot 的任务模块，那么 HTML 不会支持，你必须有用户卡。

• completionBotId (string):使用 bot 时，需要指定 bot APP ID 来发送用户与任务模块交互的结果。

任务模块中的深层链接

可以使用按钮和 Microsoft 团队中的其他类型的用户操作来调用任务模块。调用任务模块的另一种方式是使用深层链接。深层链接是包含特定值的 URL，Microsoft Teams 使用这些值来调用任务模块。

深层链接的格式如下:

• JavaScript 和 HTML 的深层链接语法

https://teams.microsoft.com/l/task/<APP_ID>?url=<TaskInfo.url>&height=<TaskInfo.height>&width=<TaskInfo.width>&title=<TaskInfo.title>

• 自适应卡的深层链接语法

https://teams.microsoft.com/l/task/APP_ID?url=<TaskInfo.url>&height=<TaskInfo.height>&width=<TaskInfo.width>&title=<TaskInfo.title>&completionBotId=BOT_APP_ID

https://teams.microsoft.com/l/task/APP_ID?card=<TaskInfo.card>&height=<TaskInfo.height>&width=<TaskInfo.width>&title=<TaskInfo.title>&completionBotId=BOT_APP_ID

让我们来看看这些价值中的每一个:

• < APP_ID > : 这是自定义 MSTeam 应用的 ID。应用 ID，一个 GUID，可以在应用的 manifest.json 文件中找到。

• < TASKINFO。*>:URL 查询字符串中的附加属性映射到 taskInfo 对象上的特定属性。

深层链接可以在任何地方使用，包括在 MSTeam 渠道或外部应用中的对话。

使用任务模块的机器人

任务模块可以通过自适应卡和机器人框架卡上的机器人按钮触发，如英雄卡或缩略图卡或 Office 365 连接器。任务模块提供丰富的用户体验，多个对话步骤必须跟踪机器人状态，并允许用户中断或取消流程。机器人只支持自适应卡任务模块。

调用任务模块有两种方式:

• 一种新的调用消息任务/获取

  这是为 Bot 框架卡(动作)调用卡动作的新方法。从你的机器人中动态地获取任务模块模式弹出卡。

• 深层链接 URL

  深度链接 URL 支持 Bot 框架卡的打开 URL 卡操作(操作。OpenUrl)。使用深层链接 URL，任务模块 URL 避免了相对于任务/提取的服务器往返。

带有 bot ID 的深层链接语法:

https://teams.microsoft.com/l/task/APP_ID?card/url=<TaskInfo.card>&height=<TaskInfo.height>&width=<TaskInfo.width>&title=<TaskInfo.title>&completionBotId=BOT_APP_ID

基于实现，我们需要修改 card/url 和 fallbackUrl。

通过任务/提取调用任务模块

当用户单击按钮时，它会调用 card action (Action。提交)并调用发送给机器人的消息。然后，HTTP 响应对象使用任务信息对象调用消息，并显示给任务模块。

提交任务模块的结果

当用户完成任务模块并单击提交按钮时，返回给机器人的结果就像它使用选项卡的方式一样，但与 HTML 和自适应卡有一些不同。

HTML/JavaScript 和适配卡

在 HTML 中，它使用 JavaScript 验证用户输入的内容，并调用提交任务函数。如果您想要关闭没有任何参数的任务模块，但是请记住，总是需要从选项卡中为任务模块调用传递参数。若要正确处理 submitHandler 函数，请传递一个对象或字符串。然后团队将调用 submitHandler: function，error 将为 null，结果将是您传递给 submitTask 函数的对象或字符串。

在适配卡中，当用户点击提交按钮(动作)时，它使用任务/提交消息发送给机器人。提交)。与 HTML 相比，自适应卡可以轻松处理来自任务模块的数据。

任务/提交的灵活性

回应任务/提交消息时，您有几种选择:

• 团队将在弹出的消息框中显示该值。

• 允许您在向导/多步骤体验中将自适应卡序列“链接”在一起。

  {
    "task": {
      "type": "continue",
      "value": <TaskInfo object>
    }
  }
  
  

{
  "task": {
    "type": "message",
    "value": "Message text"
  }
}

机器人框架卡动作与自适应卡动作。提交操作

我们有两个卡动作:机器人框架卡动作和自适应卡动作。提交操作以及使用模式时的一个小差异。下面的语法显示了不同之处。

首先是机器人框架卡动作:

{
  "type": "invoke",
  "title": "Buy",
  "value": {
    "type": "task/fetch",
    <...>
  }
}

现在是自适应卡动作。提交操作:

{
  "type": "Action.Submit",
  "id": "btnBuy",
  "title": "Buy",
  "data": {
    <...>,
    "msteams": {
      "type": "task/fetch"
    }
  }

使用适配卡和机器人框架卡上的按钮，可以从 MSTeam 机器人调用任务模块。在练习 5 中，您将学习如何在 MSTeam 中使用带有机器人的任务模块。

练习 1 -向任务模块发送数据

Microsoft Teams Developer Platform 帮助您将业务线(LOB)应用和服务无缝地扩展到 Microsoft 团队中。如果您开发了通用功能应用，它还允许您将自定义应用分发给您的组织或公共用户。

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

• Node.js - v10.16.0

• NPM - 6.9.0

• 吞咽

  • CLI 版本:2.3.0

  • 本地版本:4.0.2

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

• Visual Studio 代码

和

• Microsoft Azure 订阅

• Office 365 订阅

在本练习中，您将学习 Microsoft Teams 中任务模块的基础知识，以及如何将输入发送到任务模块，即从选项卡获取用户的视频 ID，并将其发送到接受 YouTube 上视频 ID 的标准 HTML 页面。

当任务模块被调用时，它将使用 YouTube 嵌入式播放器显示视频。该任务模块将从查询字符串中获取视频 ID，但不会向选项卡返回任何信息。

在本练习中，您将使用 Microsoft Teams Yeoman 生成器、Visual Studio 代码和 App Studio 为任务模块创建一个新的 Microsoft Teams 个人选项卡。

创建 Microsoft 团队任务模块应用

在本节中，您将使用 Yeoman generator (yo teams)为 tab 创建一个任务模块应用。本练习将指导您如何从选项卡创建自定义任务模块。

要创建新的任务模块选项卡应用项目:

图 6-2

yo 团队发电机

• 在您喜欢的位置创建一个新的项目目录。

• 打开命令提示符。

• 创建一个新文件夹“taskModulesTab”

• 导航到新创建的目录。

• 通过运行以下命令运行 MSTeam 的 Yeoman 生成器: yo teams (参见图 6-2 )。

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

图 6-3

回答约曼问卷

• 您的解决方案名称是什么？任务-模块-选项卡

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

• 您的 Microsoft Teams 应用项目的标题？任务模块选项卡

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

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

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

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

• 您将在其中托管此解决方案的 URL？https://taskmodulestab.azurewe

• bsites.net

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

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

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

• 默认选项卡名称？(最多 16 个字符)任务模块

• 您想创建哪种选项卡？可配置的

• 您打算在您的选项卡上使用什么范围？在团队中

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

• 是否希望此选项卡在 SharePoint Online 中可用？不

Note

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

• 第一步是安装 fluent UI 库，为此，在命令行中从项目的根文件夹执行以下命令:

图 6-4

Visual studio 代码

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

npm i @fluentui/react

• 找到并打开包含项目中使用的 React 组件的文件。..\ src \ app \ scripts \ taskModulesTab \ taskModulesTab . tsx

• 将下面的 import 语句添加到 TaskModulesTab.tsx 文件中，以便从 fluent UI 中使用 Textfield 控件。

• 将组件的状态更新为新项目的属性。

• 在 ITaskModulesTabState 接口中添加一个新的属性 youTubeVideoId 来定义状态。

import { TextField, ITextFieldStyles } from "@fluentui/react";

• 找到 componentWillMount()方法以初始化 youTubeVideoId 属性。

  • youtubevideo:" esj-dvp 83 ks "

• 添加后，它看起来像下面给出的语句:

export interface ITaskModulesTabState extends ITeamsBaseComponentState {
    entityId?: string;
    youTubeVideoId?: string;
}

• 然后找到 render()方法，用下面代码的 return 语句替换 flex 标记。render()方法返回语句现在将显示如下。

       this.setState({
                    entityId: context.entityId,
                    youTubeVideoId: "eSJ-dVp83ks"
                });

• 为“Textfield”添加样式，找到公共 render()方法，并将下面的代码添加为 render 方法的第一行。

return (
            <Provider theme={this.state.theme}>
                <Flex column gap="gap.smaller">
                    <Header>Task Module Demo</Header>
                    <TextField label="Enter your youtube Video ID" value={this.state.youTubeVideoId} styles={narrowTextFieldStyles} onChange={(event, value) => { this.setState({ youTubeVideoId: String(value) }); }} />
                    <Button content="Show Video" primary onClick={this.onShowVideo}></Button>
                </Flex>
            </Provider>
        );

• 下一步是添加 onShowVideo 方法。将以下方法添加到 TaskModulesTab 类中。该方法将处理任务模块功能，以根据 YouTube 视频 ID 打开 YouTube 视频。

const narrowTextFieldStyles: Partial<ITextFieldStyles> = { fieldGroup: { width: 250 } };

• 这段代码将使用任务模块的详细信息创建一个新的 taskModuleInfo 对象。然后，它将启动任务模块。这个任务模块不回复任何东西，只显示信息，所以我们不需要实现回调。

• 添加以下实用程序方法 approot()来获取主机名:

private onShowVideo = (event: React.MouseEvent<HTMLButtonElement>): void => {
        const taskModuleInfo = {
            title: "YouTube Player",
            url: this.appRoot() + `/taskModulesTab/player.html?vid=${this.state.youTubeVideoId}`,
            width: 1000,
            height: 700
        };
        microsoftTeams.tasks.startTask(taskModuleInfo);
    }

• 在下找到并创建一个文件“player.html”。\src\app\web\taskModulesTab

• 然后将下面的代码添加到 player.html

private appRoot(): string {
        if (typeof window === "undefined") {
            return "https://{{HOSTNAME}}";
        } else {
       return window.location.protocol + "//" + window.location.host;
        }
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <title>YouTube Player Task Module</title>
    <style>
        #embed-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 95%;
            height: 95%;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            border-style: none;
        }
    </style>

</head>

<body>
    <div id="embed-container"></div>
    <script>
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
        };

        var element = document.createElement("iframe");
        element.src = "https://www.youtube.com/embed/" + getUrlParameter("vid");
        element.width = "1000";
        element.height = "700";
        element.frameborder = "0";
        element.allow = "autoplay; encrypted-media";
        element.allowfullscreen = "";

        document.getElementById("embed-container").appendChild(element);
    </script>
</body>

</html>

视频播放器任务模块将使用 YouTube 嵌入式播放器来显示指定的视频。加载 player.html 文件时，将在查询字符串中定义视频。在关闭player.html file:中的

测试视频播放器任务模块

从命令行导航到项目的根文件夹，并执行以下命令:

   gulp ngrok-serve

这个 gulp 任务将运行命令行控制台中显示的许多其他任务。ngrok-serve 任务构建您的项目并启动本地 web 服务器(http://localhost:3007)。然后它用一个随机的子域启动 ngrok，这个子域会创建一个到本地 web 服务器的安全 URL。

在开发过程中，可以使用 ngrok 工具进行测试，它可以创建一个安全的可旋转的 URL 到您的本地 HTTP 服务器。Ngrok 作为一个依赖项包含在项目中，因此不需要设置或配置任何东西(图 6-5 )。

图 6-5

吞咽 ngrok 发球执行

Note

ngrok 的免费版本会在您每次重新启动 web 服务器时创建一个新的 URL。测试应用时，请确保每次重新启动 web 服务器时删除并安装应用。

在 Microsoft 团队中安装任务模块选项卡

现在让我们在 MSTeam 中安装应用。在浏览器中，导航到 https://teams.microsoft.com ，使用工作和学校帐户的凭据登录。

Microsoft Teams 可用作 web 客户端、桌面客户端和移动客户端。

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

图 6-6

向 MS 团队添加应用

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

图 6-7

上传应用

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

图 6-8

安装的应用

去你的任何一个团队➤频道

然后点击+按钮，在您的频道中添加一个新标签(图 6-9 )。

图 6-9

添加选项卡

搜索找到“任务模块页签”app，选择如图 6-10 所示。

图 6-10

选择选项卡

它将打开一个新窗口并显示关于该应用的所有详细信息，然后单击添加按钮来配置您的选项卡(图 6-11 )。

图 6-11

在团队中添加选项卡

然后给出选项卡的名称，点击保存按钮(图 6-12 )。

图 6-12

配置您的选项卡

它将创建选项卡，并显示一个输入控件和按钮，以显示视频。见图 6-13

图 6-13

任务模块演示

点击显示视频按钮(图 6-14 )。

它将打开一个模态窗口并显示视频(图 6-14 )。

图 6-14

任务模块 youtube 视频输出

现在，用户可以通过更新文本框中的视频 ID 来更改播放器任务模块中加载的视频。

为此，在文本框中输入新的 YouTube 视频 id，然后再次测试(图 6-15 )。

图 6-15

新视频 ID

单击“显示视频”按钮。

它将打开一个模态窗口并显示新的视频(图 6-16 )。

图 6-16

任务模块新的 YouTube 视频输出

在本练习中，您已经学习了 Microsoft Teams 中任务模块的基本知识，以及如何将数据从自定义“团队”选项卡发送到任务模块。

练习 2 -使用任务模块收集用户输入

在本练习中，您将学习 Microsoft Teams 中任务模块的基础知识，以及如何从任务模块中收集用户输入并从选项卡中进行处理。这个任务模块是使用 React 实现的，与使用 Yeoman generator for Microsoft Teams 实现定制选项卡的方式相同。此任务模块使您能够从用户那里收集用户输入并提交它，当用户提交他们的输入时，它将使用回调来关闭并将用户输入提交回选项卡。

在本练习中，您将使用 Microsoft Teams 应用项目和上一练习中的 Yeoman 生成器，该生成器包含本章上一练习中的一个选项卡。您将更新项目以添加一个新的任务模块，该模块用于从用户处收集数据。

向项目中添加代码

找到并打开包含项目中使用的 React 组件的文件..\ src \ app \ scripts \ taskModulesTab \ taskModulesTab . tsx

要将组件的状态更新为新项目的属性，请在 ITaskModulesTabState 界面中添加新的属性名称、电子邮件和名称来定义状态:

export interface ITaskModulesTabState extends ITeamsBaseComponentState {
    entityId?: string;
    youTubeVideoId?: string;
    name?: string;
    email?: string;
    designation?: string;
}

然后找到 render()方法，并将下面的代码添加到 Showvideo 按钮标签旁边。

    <Button content="Get information" primary onClick={this.ongetEmployeeInfo}></Button>
         <Text>{this.state.name}</Text>
         <Text>{this.state.email}</Text>
         <Text>{this.state.designation}</Text>

然后添加一个私有方法 ongetEmployeeInfo 来处理任务模块，并将下面的方法添加到 TaskModulesTab 类中。

private ongetEmployeeInfo = (event: React.MouseEvent<HTMLButtonElement>): void => {
const taskInfo = {

            url: this.appRoot() + `/taskModulesTab/getinfo.html`,
            title: "Custom Form",
            height: 300,
            width: 400,
        };

    const submitHandler = (err, result) => {

            this.setState(Object.assign({}, this.state, {
                name: `Name : ${result.name}`,
                email: `Email ID : ${result.email}`,
                designation: `Designation : ${result.designation}`
            }));

        };

        microsoftTeams.tasks.startTask(taskInfo, submitHandler);
}

这段代码将使用任务模块的详细信息创建一个新的任务信息对象。然后，它将启动任务模块。这个任务模块会回复用户对选项卡的输入，因此它可以为回调实现一个提交处理程序。从提交处理程序回调处理程序是处理用户输入的结果。

在下找到并创建一个文件“getinfo.html”。\src\app\web\taskModulesTab。

然后将下面给出的代码添加到 getinfo.html 中:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            margin: 4px;
            padding-left: 4px;
            padding-right: 4px;
        }

        html,
        body,
        div.surface,
        div.panel {
            height: 100%;
            margin: 0;
        }

        div.panel {
            padding: 15px;
        }
    </style>
    <title>Microsoft Teams Task Module Tester - Custom Form</title>
    <script src="https://unpkg.com/@microsoft/teams-js@1.3.7/dist/MicrosoftTeams.min.js" integrity="sha384-glExfvkpce98dO2oN+diZ/Luv/5qrZJiOvWCeR8ng/ZxlhpvBgHKeVFRURrh+NEC" crossorigin="anonymous"></script>

</head>

<body class="theme-light">
    <script>
        microsoftTeams.initialize();

        //- Handle the Esc key
        document.onkeyup = function(event) {
            if ((event.key === 27) || (event.key === "Escape")) {
                microsoftTeams.tasks.submitTask(null); //- this will return an err object to the completionHandler()
            }
        }

        function validateForm() {
            let customerInfo = {
                name: document.forms["customerForm"]["name"].value,
                email: document.forms["customerForm"]["email"].value,
                designation: document.forms["customerForm"]["designation"].value
            }

            microsoftTeams.tasks.submitTask(customerInfo, "");
            return true;
        }
    </script>
    <div class="surface">
        <div class="panel">
            <div class="font-semibold font-title">Enter employee information:</div>
            <form method="POST" id="customerForm" action="/register" onSubmit="return validateForm()">
                <div>
                    <table>
                        <tr>
                            <td><label for="name">Enter the Name : </label></td>
                            <td><input class="form-control input-field" id="name" type="text" placeholder="Full Name" name="name" tabindex="1" autofocus></td>

                        </tr>
                        <tr>
                            <td><label for="email">Enter the Email ID : </label></td>
                            <td><input class="form-control input-field" id="email" type="email" placeholder="name@email.com" name="email" tabindex="2"></td>
                        </tr>
                        <tr>
                            <td><label for="designation">Enter the Designation: </label></td>
                            <td><input class="form-control input-field" id="designation" type="text " placeholder="designation" name="designation" tabindex="3" </td>
                        </tr>
                        <tr style="text-align: center;">
                            <td colspan="2"><button class="btn button-primary " type="submit " tabindex="5 ">Submit</button></td>
                        </tr>
                    </table>
            </form>
            </div>
        </div>
</body>

</html>

在上面给出的代码中，我添加了三个文本框——姓名、电子邮件和职务，并添加了一个提交按钮将数据发送回选项卡。你可以添加自己的风格，使应用看起来更漂亮。

测试收集输入任务模块

如果您没有停止 gulp ngrok-serve 执行，那么保存代码并转到团队并刷新选项卡。它将添加“获取信息”按钮(图 6-17 )。

图 6-17

刷新应用

如果您已经停止了 gulp ngrok-serve 的执行，那么按照练习 1 测试中使用的相同步骤重新部署应用。

图 6-18

用于收集输入的任务模块自定义表单

• 单击获取信息按钮。

• 它打开一个模态弹出窗口，使用任务模块收集信息。参见图 6-18 。

输入姓名、电子邮件 id 和职务，然后提交表单。它会将数据发送到选项卡并显示给用户；使用这些数据，您将能够处理基于您的 LOB 的任何功能。参见图 6-19 。

图 6-19

用于收集输入的任务模块自定义表单

在本练习中，您学习了 Microsoft Teams 中任务模块的基本知识，以及如何收集用户输入并将其发送回 custom Teams 选项卡，以便使用任务模块处理功能。

练习 3 -使用适配卡

在本练习中，您将学习如何在自定义 Microsoft Teams 应用的自定义任务模块中使用自适应卡。这个任务模块是使用 React 实现的，与使用 Yeoman generator for Microsoft Teams 实现定制选项卡的方式相同。此任务模块使您能够从用户处收集用户输入并提交它；当用户提交输入时，它将使用回调关闭并将用户输入提交回选项卡。在这里，我使用自适应卡实现了与练习 2 相同的功能。

在本练习中，您将使用带有 Yeoman 生成器的 Microsoft Teams app 项目，该生成器包含本章上一练习中的一个选项卡。您将更新项目以添加一个新的任务模块，该模块用于从用户处收集数据。

向项目中添加代码

找到并打开包含项目中使用的 React 组件的文件:..\ src \ app \ scripts \ taskModulesTab \ taskModulesTab . tsx

然后找到 render()方法，并将下面的代码添加到 Get information 按钮标签旁边。

<Button content="Get information (AdaptiveCard)" primary onClick={this.onGetAdaptiveCard}></Button>

然后在 onGetAdaptiveCard 上添加一个私有方法来处理任务模块。将以下方法添加到 TaskModulesTab 类中:

private onGetAdaptiveCard = (event: React.MouseEvent<HTMLButtonElement>): void => {
        // load adaptive card
        const adaptiveCard: any = require("./customform.json");
        const taskModuleInfo = {
            title: "Custom Form",
            card: adaptiveCard,
            width: 500,
            height: 500
        };
        const submitHandler = (err: string, result: any): void => {
            this.setState(Object.assign({}, this.state, {
                name: `Name : ${result.name}`,
                email: `Email ID : ${result.email}`,
                designation: `Designation : ${result.designation}`
            }));

        };
        microsoftTeams.tasks.startTask(taskModuleInfo, submitHandler);
    }

这段代码将使用任务模块的详细信息创建一个新的任务信息对象。然后，它将使用适配卡启动任务模块。这个任务模块确实回复用户对选项卡的输入，因此它实现了回调的提交处理程序。通过提交处理程序回调，处理来自适配卡的结果，以处理用户输入。

在下找到并创建一个文件“customform.json”。\ src \ app \ scripts \ taskModulesTab。

然后将下面的代码添加到 customform.json 中:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [{
            "type": "Container",
            "items": [{
                "type": "TextBlock",
                "text": "Custom Form",
                "weight": "bolder",
                "size": "extraLarge"
            }]
        },
        {
            "type": "Container",

            "items": [{
                    "type": "TextBlock",
                    "text": "Enter your name",
                    "weight": "bolder",
                    "size": "medium"
                },
                {
                    "type": "Input.Text",
                    "id": "name",
                    "value": ""
                },
                {
                    "type": "TextBlock",
                    "text": "Enter your Email",
                    "weight": "bolder",
                    "size": "medium"
                },
                {
                    "type": "Input.Text",
                    "id": "email",
                    "value": ""
                },
                {
                    "type": "TextBlock",
                    "text": "Enter your Designation",
                    "weight": "bolder",
                    "size": "medium"
                },
                {
                    "type": "Input.Text",
                    "id": "designation",
                    "value": ""
                }
            ]
        }
    ],
    "actions": [{
        "type": "Action.Submit",
        "title": "Submit"
    }]
}

在上面的 Adaptive Card 代码中，我添加了三个文本框——name、email 和 designation，并添加了一个 submit 动作来将数据发送回选项卡。

测试收集输入任务模块

如果您尚未停止 gulp ngrok-serve 执行，则保存代码并转到团队并刷新选项卡(图 6-20 )。

图 6-20

刷新应用以获得新的更改

如果您已经停止了 gulp ngrok-serve 的执行，那么按照练习 1 测试中使用的相同步骤重新部署应用。

点击“获取信息(AdaptiveCard)”按钮

它将打开一个模态弹出窗口，使用适配卡和任务模块收集信息(图 6-21 )。

图 6-21

任务模块适配卡

输入姓名、电子邮件 id 和职务，并提交适配卡。它会将它发送到选项卡并显示给用户；使用这些数据，您将能够处理任何功能。见图 6-22

图 6-22

任务模块自适应卡输出

在本练习中，您学习了 Microsoft Teams 中任务模块的基本知识，以及如何使用 Adaptive Card 收集用户输入，并将其发送回 custom Teams 选项卡，以便使用任务模块处理功能。

练习 4 -任务中的深层链接

可以通过选择 Microsoft Teams 体验中的按钮或使用深层链接来调用任务模块。深层链接允许您从团队外部或团队内部的对话中触发任务模块调用。

深层链接的格式如下:

teams.microsoft.com/l/task/%253cAPP_ID%253e%253Furl%253D%253cTaskInfo.url%253e%2526height%253D%253cTaskInfo.height%253e%2526width%253D%253cTaskInfo.width%253e%2526title%253D%253cTaskInfo.title

考虑一下您是否希望从一个对话中打开一个任务模块，该对话将显示下面的视频【Microsoft Teams development 入门。

正如您在练习 1 中所学，在播放器任务模块中显示视频的 URL 如下:

https://{{REPLACE_WITH_YOUR_NGROK_URL}}/ taskModulesTab/player.html?vid=eSJ-dVp83ks

启动视频播放器任务模块的深层链接如下(假设您的自定义 Microsoft Teams 应用的 ID 为 3fc 49350-e11d-11ea-ac20-5 FBC 213 e7a 43):

要查找应用 ID ->请转到。env 文件并复制 APPLICATION_ID

替换 ngrok-serve URL-https://``1f81e0623b36``.ngrok.io/

https://teams.microsoft.com/l/task/3fc49350-e11d-11ea-ac20-5fbc213e7a43?url=https://1f81e0623b36.ngrok.io/taskModulesTab/player.html?vid=eSJ-dVp83ks&height=700&width=1000&title=Youtube Player

在 Microsoft teams 中，转到一个频道，选择“对话”选项卡，然后在消息对话框中选择“格式”按钮。见图 6-23

图 6-23

对话格式按钮

输入要发布到频道的消息。选择一些文本并使用链接功能将深层链接添加到消息中(图 6-24 )。

图 6-24

带有深层链接的对话

现在，选择链接以查看任务模块的打开，而无需从自定义选项卡中触发它(图 6-25 )。

图 6-25

任务模块深层链接

您的团队/渠道中的任何人都可以单击该链接并从对话中访问任务模块。

在本练习中，您学习了如何使用深层链接从 Microsoft 团队的任何地方调用任务模块。

练习 5 -通过机器人使用任务模块

在本练习中，您将学习在 Microsoft Teams 应用中创建和添加任务模块，并从 Microsoft Teams 客户端与之交互。要为您的 Microsoft Team client 创建新的 Microsoft Teams bot 应用，请遵循以下步骤。

• 向微软 Azure 的机器人框架注册机器人

• Bot 渠道注册

• 为机器人启用 Microsoft Teams 频道

• 检索 bot 应用 ID 和密码

• 使用 Yeoman 生成器创建任务模块并通过机器人实现

• 用机器人的应用测试任务模块

创建应用包和向 Bot 框架注册 web 服务可以按任何顺序进行。因为这两个部分是如此的交织在一起，无论你以什么样的顺序做，你都需要返回来更新其他的部分。您的注册需要来自您部署的 web 服务的消息传递端点，并且您的 web 服务需要从您的注册创建的 Id 和密码。您的应用清单也需要该 Id 来将团队连接到您的 web 服务。

向微软 Azure 的机器人框架注册机器人

打开浏览器，导航到 Azure 门户( https://portal.azure.com/ )。使用您在 Azure 订阅中使用的username@tenantname.onmicrosoft.com登录。

点击创建资源，在搜索市场输入框中输入 bot ，在返回的资源列表中选择 Bot 频道注册。然后在下一页选择 Create 开始注册新的 bot 资源。

在 Bot 通道注册页面，点击发起创建 Bot 通道注册(图 6-26 )。

图 6-26

搜索机器人频道注册

在 Bot 通道注册刀片中，输入以下值，然后选择创建。见图 6-27 。

图 6-27

Bot 渠道注册

图 6-28

Bot 渠道登记表

• Bot 句柄:输入 bot 的全局唯一名称:

  • 前 ：任务模块机器人

• 订阅:选择之前创建资源组时选择的订阅

• 资源组:选择您之前创建的资源组- 例如:团队

• 地点:选择你喜欢的蔚蓝地区

• 定价等级:选择首选的定价等级；F0 层是免费的

• 消息传递端点 : https://REPLACE_THIS.ngrok.io/api/messages

  bot 注册需要知道实现 bot 的 web 服务的端点。这将在每次启动之前练习中使用的 ngrok 实用程序时发生变化。

• 应用洞察:关闭

• 微软应用 ID 和密码:自动创建应用 ID 和密码(见图 6-28 )。

Azure 将开始提供新资源。这需要一两分钟的时间。完成后，导航到资源组中的 bot 资源(图 6-29 )。

图 6-29

Bot 已创建

为机器人启用 Microsoft Teams 频道

为了让 bot 与 Microsoft 团队进行交互，您必须启用团队通道。

图 6-30

选择团队频道

• 从 Azure 的 bot 资源中，选择左侧导航中的通道。

• 在连接通道面板上，选择MSTeam 通道，然后选择保存确认动作(图 6-30 )。

• 同意服务条款

一旦此过程完成，您应该会看到 Web Chat 和 Microsoft 团队都列在您启用的频道中(图 6-31 )。

图 6-31

连接到频道

检索 Bot 应用 Id 和密码

当 Azure 创建机器人时，它还为机器人注册了一个新的 Azure AD 应用。您需要生成这个新的 bot 应用作为一个秘密，并复制应用的凭据。

从左侧导航栏中选择设置。向下滚动到 Microsoft App ID 部分。

复制机器人的 ID，因为您稍后会需要它(图 6-32 )。

图 6-32

应用 ID 创建

为应用创建客户端密码

点击管理链接，导航至 Azure 广告应用。

为了让守护程序应用在没有用户参与的情况下运行，它将使用应用 ID 和证书或密码登录 Azure AD。在本练习中，您将使用一个秘密。

从左侧导航面板中选择证书&机密。

选择客户端密码部分下的新客户端密码按钮。

出现提示时，给出密码的描述，并选择提供的一个过期时间选项。例如:从不选择添加(图 6-33 )。

Note

复制新的客户端密码值。在您执行另一个操作或离开此刀片后，您将无法取回它。

“证书和机密”页面将显示新的机密。复制该值很重要，因为它只显示一次；如果您离开页面并返回，它将仅显示为一个屏蔽值。

图 6-33

应用客户端机密

The Certificate & Secrets page will display the new secret. It’s important you copy this

复制并存储秘密值的值，因为您以后会需要它。

使用约曼生成器创建 MSTeam 应用

在本节中，您将使用 Yeoman generator (yo teams)通过 bot Teams 应用创建一个新的任务模块

创建新的 web 部件项目:

图 6-34

哟团队

• 在您喜欢的位置创建一个新的项目目录

• 打开命令提示符

• 创建一个新文件夹" taskModuleBot "

• 导航到新创建的目录

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

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

图 6-35

回答约曼问卷

• 您的解决方案名称是什么？任务-模块-机器人

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

• 您的 Microsoft Teams 应用项目的标题？任务模块机器人

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

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

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

• 您希望在项目中添加哪些功能？一个机器人

• 您将在其中托管此解决方案的 URL？https://taskmodulesbot.azurewebsites.net

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

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

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

• 你想用什么类型的机器人？一个新的框架

• 你的机器人叫什么名字？任务模块机器人

• 这个机器人的微软应用 ID 是什么？可以在 Bot 框架门户( https://dev.botframework.com )中找到。93e7cc02-ebb9-4db1-a

• 2cd-baab7c85498b

• 你想给你的机器人添加一个静态标签吗？不

• 你想支持文件上传到机器人？不

Note

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

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

图 6-36

Visual studio 代码 OOB

• 打开。env 文件➤打开，并添加从新的客户端密码值复制的 MICROSOFT_APP_PASSWORD

MICROSOFT_APP_PASSWORD= vmTMorc76SJt02_w6R-2yeD.YJ.F-g8dr_

更新机器人代码

流程是这样的:

• 转到。/src/app/taskModulesBot/taskModulesBot . ts 文件并添加以下代码。

• 首先，添加下面给出的标题:

• 然后包含 TaskModuleResponse，TaskModuleRequest，TaskModuleTaskInfo，对象引用现有的 botbuilder 包:

import * as Util from "util";
const TextEncoder = Util.TextEncoder;

• 转到 taskModulesBot 类，在公共构造函数(conversation state:conversation state)中找到处理程序 this.onMessage()

• 在 this.onMessage() 处理程序中，继续执行以下代码来处理一对一对话和通道对话。

• 找到下面给出的代码:

TeamsActivityHandler, TaskModuleResponse, TaskModuleRequest, TaskModuleTaskInfo
} from "botbuilder";

• 替换下面给出的 switch 语句代码:

switch (context.activity.type) {...}

switch (context.activity.type) {
    case ActivityTypes.Message:
      const card = CardFactory.heroCard("Learn Microsoft Power Platform", undefined, [
                    {
                    type: "invoke",
                    title: "Empowering Citizen Developers Using Power Apps",
    value: { type: "task/fetch", taskModule: "player", videoId: "eSJ-dVp83ks" }
                        }
                    ]);
                    await context.sendActivity({ attachments: [card] });
                default:
                    break;
            }

若要处理 TaskModule taskinfo，请在该类中添加 handleTeamsTaskModuleFetch 方法。每当用户点击按钮时，它将调用 player.html 按钮作为模态窗口来显示 YouTube 视频。

protected handleTeamsTaskModuleFetch(context: TurnContext, request: TaskModuleRequest): Promise<TaskModuleResponse> {
        let response: TaskModuleResponse;
        response = {
            task: {
                type: "continue",
                value: {
                    title: "YouTube Player",
                    url: `https://${process.env.HOSTNAME}/player.html?vid=${request.data.videoId}`,
                    width: 1000,
                    height: 700
                } as TaskModuleTaskInfo
            }
        } as TaskModuleResponse;

        return Promise.resolve(response);
    }

导航到。src/app/web/并创建一个新文件player.html。然后在 player.html 文件中添加下面给出的代码:

• 文件➤保存所有 保存的修改

• 至此，您的任务模块已经准备好接受测试了！

<!DOCTYPE html>

<html lang="en">

<head>
    <title>YouTube Player Task Module</title>
    <style>
        #embed-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 95%;
            height: 95%;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 10px;
            padding-bottom: 10px;
            border-style: none;
        }
    </style>
</head>

<body>
    <div id="embed-container"></div>
</body>
<script>
    function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    };

    var element = document.createElement("iframe");
    element.src = "https://www.youtube.com/embed/" + getUrlParameter("vid");
    element.width = "1000";
    element.height = "700";
    element.frameborder = "0";
    element.allow = "autoplay; encrypted-media";
    element.allowfullscreen = "";

    document.getElementById("embed-container").appendChild(element);
</script>

</html>

测试 Bot 中的任务模块

打开命令提示符，导航到项目文件夹，并执行以下命令:

gulp ngrok-serve

这个 gulp 任务将运行命令行控制台中显示的许多其他任务。ngrok-serve 任务构建您的项目并启动本地 web 服务器(http://localhost:3007)。然后它用一个随机的子域启动 ngrok，这个子域会创建一个到本地 web 服务器的安全 URL。

在开发过程中，可以使用 ngrok 工具进行测试，该工具可以创建一个安全的可旋转的 URL，指向您的本地 HTTP 服务器。Ngrok 作为一个依赖项包含在项目中，因此不需要设置或配置任何东西(图 6-37 )。

图 6-37

ngrok-服务执行

Ngrok 已经创建了临时 URL f9344937c450.ngrok.io，它将映射到我们本地运行的 web 服务器。

然后去 Azure 门户，打开 Bot 通道注册 App。使用临时 URL f9344937c450.ngrok.io 更新消息传递端点(图 6-38 )。

图 6-38

更新消息传递端点

Note

ngrok 的免费版本会在您每次重新启动 web 服务器时创建一个新的 URL。测试应用时，确保每次重启 web 服务器时都更新 URL 的消息端点。

在 MSTeam 中安装对话机器人

现在让我们在 MSTeam 中安装应用。在浏览器中，导航到 https://teams.microsoft.com ，使用工作和学校帐户的凭据登录。

Microsoft Teams 可用作 web 客户端、桌面客户端和移动客户端。

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

图 6-39

向 MS 团队添加应用

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

图 6-40

上传应用

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

图 6-41

安装的应用

一旦软件包上传，MSTeam 将显示应用的摘要(图 6-42 )。

图 6-42

添加聊天应用

将任务模块测试为个人机器人

下面是测试的方法:

图 6-43

Bot 对话响应

• 点按“添加”按钮以导航至与机器人聊天。

• 请注意，当应用加载时，bot 支持的命令会显示在编写框中。让我们测试一下机器人！

• 选择帮助命令，或在撰写框中手动键入任何内容，然后按 enter。我已经输入了你好。

• 几秒钟后，您应该会看到机器人用一个英雄卡来响应，上面有一个按钮:“使用 Power 应用增强公民开发者的能力”。

  见图 6-43 。

• 然后点击“使用 Power Apps 增强公民开发者的能力”按钮，它将打开一个模态窗口，并根据给定的视频 Id 加载 player.html 文件和 YouTube 视频。

在本练习中，您学习了如何使用 Bot 在 Microsoft 团队中调用任务模块。

结论

在本章中，您已经学习了带有选项卡和 bot 的任务模块的各种功能，以及如何将数据发送到任务模块和模式窗口，如何使用带有 JavaScript 和自适应卡的 HTML 从任务模块收集用户输入，并了解了可以通过选择 Microsoft Teams 体验中的按钮或使用深层链接来调用的任务模块。

您还学习了如何使用 Yeoman generator for Microsoft Teams 创建任务模块。在接下来的章节中，你将开始学习 MSTeam 应用的不同选项和特性。

七、使用 Webhooks 将 Web 服务连接到 MSTeam

Webhooks 和连接器是将您的 web 服务连接到 MSTeam 内部的渠道和团队的简单方法。出站 webhooks 允许您的用户从一个通道向您的 web 服务发送文本消息。连接器允许用户订阅从您的 web 服务接收通知和消息。在 MSTeam 中有两种类型的连接器可用:传入 webhooks 和 Office 365 连接器。在这一章中，你将学习 webhooks 和连接器，以及如何在 MSTeam 渠道中实现它们。

Web 服务和 Webhooks 概述

Web 服务和 webhooks 都在执行相同的功能，但是执行过程不同(参见图 7-1 )。每当有人或其他应用调用 Webhooks 时，它就会执行一个特定的功能。它们允许接收入站数据或发送出站数据。Web 服务将数据从一个系统传送到另一个系统，因此接收应用可以存储或处理数据；您可以使用 web 服务或 webhooks 来自动化这个过程。

webhook 也称为 web 回调或 HTTP 推送 API。如图 7-1 所示，你可以看到 API 和 webhooks 之间的区别。Webhooks 只在需要的时候调用一次，但是 API 总是调用并验证状态。

图 7-1

API 和 webhooks 的区别

即将离任的 Webhooks 和 MSTeam

在第三章中，你学习了我们注册并实现的对话机器人。出站 webhooks 提供了一种简单的方法，允许用户向您的 web 服务发送消息，而不必经历通过 Microsoft Bot 框架创建 Bot 的整个过程。传出的 webhooks 将数据从团队发送到任何接受 JSON 有效负载的服务。一旦你注册了团队，外向的网络钩子就像一个机器人。它们将用于收听频道、@提及、发送通知服务，并且大部分用卡片来响应。

出站 webhooks 支持从一个通道向您的服务发送文本消息。您的 web 服务将有五秒钟的时间以文本或卡片的形式发送对消息的响应，而出站 webhooks 不适合大量的输入和响应。见表 7-1 。

表 7-1

外向 Webhook 主要功能

|

特征

|

描述

|
| --- | --- |
| 范围配置 | 出站 webhooks 的范围是团队级别的，您需要为每个团队添加出站 webhooks。 |
| 反应式消息传递 | 用户必须使用@ reference for web hook 来接收反馈消息，并且仅在公共渠道中支持出站 webhooks。 |
| 标准 HTTP 消息交换 | 标准 HTTP 消息交换响应将出现在与原始请求相同的链中。此外，它支持丰富的文本、图像、卡片和表情符号。它不支持卡片操作。 |
| 团队 API 方法支持 | 团队中的外发 webhooks 只支持 http post web 服务，不支持团队 API。 |

在应用的服务器上创建一个 URL，以接受和处理带有 JSON 有效负载的 POST 请求

您的 web 服务从 Azure bot 服务消息传递模式接收消息，或者 bot 框架连接器使您的服务能够通过 HTTPS 协议处理来自 Azure bit service API 的 JSON 格式消息的交换。如前所述，外发 webhooks 的范围是团队级别的，就像 bot 用户需要@提及要在通道中调用的外发 webhooks 的名称。传出的 webhooks 将数据从团队发送到任何接受 JSON 有效负载的服务

创建一个方法来验证传出的 Webhook HMAC 令牌

总是验证请求中包含的 HTTP HMAC 签名，作为一个头，并来自您的身份验证协议，以确保您的服务正在接收来自您的团队客户端的调用。

• MSTeam 使用标准的 SHA256 HMAC 加密技术。您需要将消息体转换成 UTF8 格式的字节数组，以便从消息的请求体生成 HMAC 令牌。

• 当您在团队中注册出站 webhook 时，您应该从团队提供的字节数组安全令牌中计算散列，并使用 UTF-8 编码将散列转换为字符串。

• 最后，将字符串值与 HTTL 请求生成的值进行比较。

以下示例代码供您验证和转换消息时参考:

      const securityToken = process.env.SECURITY_TOKEN;
              if (securityToken && securityToken.length > 0) {
                  // There is a configured security token
                  const auth = req.headers.authorization;
                 const msgBuf = Buffer.from((req as any).rawBody, "utf8");
                 const msgHash = "HMAC " + crypto.
                     createHmac("sha256", Buffer.from(securityToken as string, "base64")).
                     update(msgBuf).
                     digest("base64");

                 if (msgHash === auth) {

创建发送成功或失败响应的方法

标准 HTTP 消息交换响应将出现在与原始请求相同的链中。当用户调用查询时，您的代码将有五秒钟的时间来响应消息，在连接超时和终止之前，Microsoft 团队将处理对您的服务问题的同步 HTTP 请求。

即将到来的 Webhooks 和 MSTeam

传入的 webhooks 与连接器或特殊类型的连接器相同。传入 webhooks 是最简单的连接器类型。传入的 webhooks 提供了一种从外部应用共享频道内容的简单方法，主要用作跟踪和通知工具。您可以选择使用 https 端点从通道发送数据，该端点将接受格式化的 JSON 并接收通道的消息。传入的 webhooks 是一种将通道连接到您的服务的快速而简单的方法。最好的例子是在 DevOps 通道中创建一个传入的 webhook，供您的应用构建、配置、部署、监控和发送警报。传入的 webhooks 是您想要发布的消息，通常采用卡片格式。卡片是用户界面容器，包含与单个主题相关的内容和动作，是以一致的方式从传入的 webhooks 呈现消息数据的一种方式。见表 7-2 。

表 7-2

传入的 Webhook 关键功能

|

特征

|

描述

|
| --- | --- |
| 范围配置 | 传入的 web hook 的作用域在通道级别，正如本章前面的会话中提到的，传出的 web hook 的作用域在团队级别。 |
| 安全资源定义 | 传入的 webhooks 消息被格式化为 JSON 有效载荷，它们将防止恶意代码的注入。 |
| 可操作的信息支持 | 可操作消息支持团队和传入网络挂钩通过卡片发送消息，并且仅支持可操作消息卡格式。 |
| 独立的 HTTPS 消息支持 | 传入的 webhook 发送 HTTPS 帖子请求可以使用卡片向团队发送消息。 |
| 降价支持 | HTML 标记将不支持可操作的消息卡，所以它们总是对所有测试字段使用基本的降价。 |

你有三个选择来分发你的网络钩子:

• 从您的频道设置一个传入的 webhook。

• 添加一个配置页面，并将传入的 webhook 包装在一个 O365 连接器中。

• 将传入的 webhook 打包并发布为连接器和 AppSource 提交的一部分。

连接器

连接器是将信息从第三方服务直接推送到您的 Microsoft 渠道。您可以从多个 Microsoft 365 渠道(如 Microsoft Teams、Yammer、Outlook 和 Microsoft 365 Groups)访问连接器发布的信息。连接器允许您为传入的 webhook 创建自定义配置。然后你可以把连接器分发给任何第三方和 app store。连接器总是使用卡，但是卡操作对 Office 365 连接器有限制。连接器在渠道级别配置，但在团队级别安装。

例如，找到一个天气连接器，允许用户输入位置和时间，并接收关于明天预测天气的天气报告。

在团队中，我们有 150 多个可用的连接器，它每天都在增长，您也可以将其发布到 Microsoft Store，供每个人使用。为此，您需要在 Office 365 开发人员门户中注册您的连接器。微软的审核流程分为三个阶段。

将连接器配置体验集成到团队客户端中

对于能够在不离开团队客户机的情况下完成连接器配置的用户，团队客户机将您的配置页面直接嵌入到 iframe 中。

从团队客户端配置连接器时，应遵循以下步骤:

• 转到团队客户端。

• 单击您的连接器开始配置过程。

• 它将加载所有连接器。

• 您可以通过 web 体验来完成配置。

• 用户按“保存”，这将在您的代码中触发回调。

• 您的代码将通过检索 webhook 设置来处理 save 事件。

此外，您可以重用配置或创建一个单独的版本，专门在团队中托管，为此您需要从代码中进行控制。Microsoft Teams JavaScript SDK 允许您的代码访问 API 来执行常见操作，如获取当前用户/渠道/团队上下文和启动身份验证流程。

• 通过调用 microsoftTeams.initialize()初始化 SDK

• 调用 Microsoft teams . settings . setvaliditystate(true)

  • 当您想要启用保存按钮时。

• 注册一个 Microsoft teams . settings . registersonsavehandler()事件处理程序，当用户单击“保存”时会调用该处理程序。

• 调用 Microsoft teams . settings . setsettings()保存连接器设置，它将帮助用户更新现有的配置。

• 重新配置时，您需要调用 Microsoft teams . settings . get settings()来获取 webhook 属性，参数如下:

  • entityId -由您的代码在调用 setSettings()时设置。

  • configName -由您的代码在调用 setSettings()时设置。

  • contentUrl -配置页面的 Url。

  • webhookUrl -为此连接器创建的 webhookUrl。

  • appType -返回值。

  • userObjectId -这是与启动连接器设置的 Office 365 用户相对应的唯一 Id。

• 注册一个 Microsoft teams . settings . registernremovehandler()事件处理程序，当用户删除连接器时会调用该处理程序。

• registerOnRemoveHandler()事件让您的服务执行任何清理操作。

包括清单中的连接器

当使用 yo team 的生成器创建连接器时，它会从门户自动生成 Teams 应用清单。打开清单并验证连接器部分。

   "connectors": [
     {
       "connectorId": "{{CONNECTOR_ID}}",
       "configurationUrl":
    "https://{{HOSTNAME}}/myFirstTeamsConnector/config.html",
       "scopes": [
         "team"
       ]
     }
  ]

练习 1 -创建外向网络挂钩

Microsoft Teams Developer Platform 帮助您将业务线(LOB)应用和服务无缝地扩展到 Microsoft 团队中。此外，如果您开发了通用功能应用，您将能够向您的组织或公共用户分发您的自定义应用。

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

• Node.js - v10.16.0

• NPM - 6.9.0

• 吞咽

  • CLI 版本:2.3.0

  • 本地版本:4.0.2

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

• Visual Studio 代码

和

• Microsoft Azure 订阅

• Office 365 订阅

• 邮递员铬扩展

构建 Webhook

在本练习中，您将学习如何创建一个 web 服务，并将其注册为 Microsoft Teams 中的一个出站 webhook。

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

• 创建一个新文件夹“OutgoingWebhooks”，并将目录更改到该文件夹中。

• 通过运行以下命令来运行 Yeoman generator for Microsoft Teams:

图 7-2

yo 团队发电机

yo teams (Figure 7-2).

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

图 7-3

回答约曼问卷

• 您的解决方案名称是什么？出站 webhooks

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

• 您的 Microsoft Teams 应用项目的标题？外向网络挂钩

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

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

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

• 您希望在项目中添加哪些功能？外向的网钩

• 您将在其中托管此解决方案的 URL？https://outgoingwebhooks.azurewebsites.net

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

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

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

• 你的外网叫什么名字？我的出站 Webhook

我们的 web 服务还需要一个 NPM 包来简化数组中的数据查找。在命令提示符下从项目的根文件夹执行以下命令来安装库 Lodash :

• MSTeam 的 Yeoman generator 为我们的输出 webhook 创建了一个存根 web 服务端点。

• 找到并打开文件。/src/app/myoutgoingewebhook/myoutgoingewebhook . ts .它在端点 /api/webhook 监听 HTTPS 请求。

• 在 MyOutgoingWebhook 类中找到 requestHandler()方法。该方法首先根据将 webhook 添加到团队时获得的安全令牌检查授权头中的 HMAC 值。

• 找到以下代码:

npm install lodash -S

• 这段代码只是将消息中输入的字符串回显给 MSTeam，这些字符串将被添加到触发 webhook 的消息的回复中。

• 更新此代码，使用 planets.json 数据和 Adaptive Card 添加一些真正的功能。

message.text = `Echo ${incoming.text}`;

在中创建一个新文件‘planets . JSON’。/src/app/myoutgoingewebhook文件夹，并在其中添加以下 JSON。该文件将包含一系列行星细节:

[{
        "id": "1",
        "name": "Mercury",
        "summary": "Mercury is the smallest and innermost planet in the Solar System. Its orbit around the Sun takes 87.97 days, the shortest of all the planets in the Solar System. It is named after the Roman deity Mercury, the messenger of the gods.",
        "solarOrbitYears": 0.24,
        "solarOrbitAvgDistanceKm": 57909050,
        "numSatellites": 0,
        "wikiLink": "https://en.wikipedia.org/wiki/Mercury_(planet)",
        "imageLink": "https://upload.wikimedia.org/wikipedia/commons/d/d9/Mercury_in_color_-_Prockter07-edit1.jpg",
        "imageAlt": "NASA/Johns Hopkins University Applied Physics Laboratory/Carnegie Institution of Washington [Public domain]"
    },
    {
        "id": "2",
        "name": "Venus",
        "summary": "Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty. As the second-brightest natural object in the night sky after the Moon, Venus can cast shadows and, rarely, is visible to the naked eye in broad daylight. Venus lies within Earth's orbit, and so never appears to venture far from the Sun, setting in the west just after dusk and rising in the east a bit before dawn.",
        "solarOrbitYears": 0.62,
        "solarOrbitAvgDistanceKm": 108208000,
        "numSatellites": 0,
        "wikiLink": "https://en.wikipedia.org/wiki/Venus",
        "imageLink": "https://upload.wikimedia.org/wikipedia/commons/e/e5/Venus-real_color.jpg",
        "imageAlt": ""Image processing by R. Nunes", link to http://www.astrosurf.com/nunes [Public domain]"

]

接下来，在中创建一个新文件 planetDisplayCard.json 。/src/app/myoutgoingewebhook文件夹，并在其中添加以下 JSON。该文件将包含适配卡的模板，web 服务将响应:

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [{
            "id": "cardHeader",
            "type": "Container",
            "items": [{
                "id": "planetName",
                "type": "TextBlock",
                "weight": "bolder",
                "size": "medium"
            }]
        },
        {
            "type": "Container",
            "id": "cardBody",
            "items": [{
                    "id": "planetSummary",
                    "type": "TextBlock",
                    "wrap": true
                },
                {
                    "id": "planetDetails",
                    "type": "ColumnSet",
                    "columns": [{
                            "type": "Column",
                            "width": "100",
                            "items": [{
                                "id": "planetImage",
                                "size": "stretch",
                                "type": "Image"
                            }]
                        },
                        {
                            "type": "Column",
                            "width": "250",
                            "items": [{
                                "type": "FactSet",
                                "facts": [{
                                        "id": "orderFromSun",
                                        "title": "Order from the sun:"
                                    },
                                    {
                                        "id": "planetNumSatellites",
                                        "title": "Known satellites:"
                                    },
                                    {
                                        "id": "solarOrbitYears",
                                        "title": "Solar orbit (*Earth years*):"
                                    },
                                    {
                                        "id": "solarOrbitAvgDistanceKm",
                                        "title": "Average distance from the sun (*km*):"
                                    }
                                ]
                            }]
                        }
                    ]
                },
                {
                    "id": "imageAttribution",
                    "type": "TextBlock",
                    "size": "medium",
                    "isSubtle": true,
                    "wrap": true
                }
            ]
        }
    ],
    "actions": [{
        "type": "Action.OpenUrl",
        "title": "Learn more on Wikipedia"
    }]
}

将以下导入语句添加到。/src/app/myoutgoingewebhook/myoutgoingewebhook . ts 文件，就在现有的 import 语句之后:

   import { find, sortBy } from "lodash";

将下面的方法添加到 MyOutgoingWebhook 类中。 getPlanetDetailCard ()方法将使用提供的 planet 对象加载并填充自适应卡模板的细节:

private static getPlanetDetailCard(selectedPlanet: any): builder.Attachment {

        // load display card
        const adaptiveCardSource: any = require("./planetDisplayCard.json");

        // update planet fields in display card
        adaptiveCardSource.actions[0].url = selectedPlanet.wikiLink;
        find(adaptiveCardSource.body, { "id": "cardHeader" }).items[0].text = selectedPlanet.name;
        const cardBody: any = find(adaptiveCardSource.body, { "id": "cardBody" });
        find(cardBody.items, { "id": "planetSummary" }).text = selectedPlanet.summary;
        find(cardBody.items, { "id": "imageAttribution" }).text = "*Image attribution: " + selectedPlanet.imageAlt + "*";
        const cardDetails: any = find(cardBody.items, { "id": "planetDetails" });
        cardDetails.columns[0].items[0].url = selectedPlanet.imageLink;
        find(cardDetails.columns[1].items[0].facts, { "id": "orderFromSun" }).value = selectedPlanet.id;
        find(cardDetails.columns[1].items[0].facts, { "id": "planetNumSatellites" }).value = selectedPlanet.numSatellites;
        find(cardDetails.columns[1].items[0].facts, { "id": "solarOrbitYears" }).value = selectedPlanet.solarOrbitYears;
        find(cardDetails.columns[1].items[0].facts, { "id": "solarOrbitAvgDistanceKm" }).value = Number(selectedPlanet.solarOrbitAvgDistanceKm).toLocaleString();

        // return the adaptive card
        return builder.CardFactory.adaptiveCard(adaptiveCardSource);
    }

接下来，将下面的方法添加到myoutgoingewebhook类中。processauthenticedrequest()方法获取传入的文本，并使用它在 planets.json 文件中查找行星。如果找到一个，它调用getplanetailcard()方法来获得一个适配卡，并将其作为一个活动返回，该活动将被发送回 MSTeam。如果找不到行星，它只会在请求回复中回显文本:

private static processAuthenticatedRequest(incomingText: string): Partial<builder.Activity> {
        const message: Partial<builder.Activity> = {
            type: builder.ActivityTypes.Message
        };

        // load planets
        const planets: any = require("./planets.json");
        // get the selected planet
        const selectedPlanet: any = planets.filter((planet) => (planet.name as string).trim().toLowerCase() === incomingText.trim().toLowerCase());

        if (!selectedPlanet || !selectedPlanet.length) {
            message.text = `Echo ${incomingText}`;
        } else {
            const adaptiveCard = MyOutgoingWebhook.getPlanetDetailCard(selectedPlanet[0]);
            message.type = "result";
            message.attachmentLayout = "list";
            message.attachments = [adaptiveCard];
        }

        return message;
    }

将下面的 scrubMessage ()方法添加到 MyOutgoingWebhook 类中。用户必须@提及一个传出的 webhook，以便向它发送消息。该方法将删除> < /at >处的<文本和任何空格，以提取行星名称:

private static scrubMessage(incomingText: string): string {
        const cleanMessage = incomingText
            .slice(incomingText.lastIndexOf(">") + 1, incomingText.length)
            .replace(" ", "");
        return cleanMessage;
    }

然后，更新 requestHandler ()方法:

• 找到下面的代码，将消息声明从一个常量更改为 let ，因为您将更改这个值。

• 找到并替换以下代码:

let message: Partial<builder.Activity> = {
            type: builder.ActivityTypes.Message
        };

message.text = `Echo ${incoming.text}`;

使用以下代码:

const scrubbedText = MyOutgoingWebhook.scrubMessage(incoming.text);
                message = MyOutgoingWebhook.processAuthenticatedRequest(scrubbedText);

测试传出的 Webhook

以下是测试方法:

图 7-4

管理团队

• 将传出的 webhook 添加到 Microsoft Teams 中的团队。在浏览器中，导航到 https://teams.microsoft.com ，使用工作和学校帐户的凭据登录。

• 登录后，选择要添加网络挂钩的团队。

• 点击并选择管理团队(图 7-4 )。

图 7-5

创建一个出站 webhook

• 选择应用，然后点击底部的“创建外发网页挂钩”(图 7-5 )。

图 7-6

创建一个出站 webhook 表单

• 在创建外发 webhook 对话框中，输入以下值并选择创建(图 7-6 ):

  • 名称:星球详情

  • 回调 URL : https://{{REPLACE_NGROK_SUBDOMAIN}}.ngrok.io/api/webhook

  • 描述:星球详情外网挂钩

  • 上传图像以识别

创建外发 webhook 后，MSTeam 将显示一个安全令牌(图 7-7 )。

图 7-7

传出 webhook 安全令牌

• 复制这个值，并在。/.项目中的 env 文件。

• 从命令行导航到项目的根文件夹，并执行以下命令:

gulp ngrok-serve

在控制台中，找到 ngrok 创建的动态 URL(图 7-8 )。

图 7-8

吞咽 ngrok 发球执行

图 7-9

传出的 webhook 应用

• 前往➤团队精选应用。

• 选择行星细节网页挂钩(图 7-9 )。

图 7-10

编辑传出 webhook 应用配置

• 单击以打开和更新 ngrok 动态 URL 并保存它。参见图 7-10 。

图 7-11

传出 webhook 应用测试

• 也就是说，用您动态创建的 Ngrok URL ( b73772b97945 )的值替换{ { REPLACE _ NGROK _ SUBDOMAIN } }

• 现在你可以测试 webhook 了。转到团队内的频道对话选项卡，输入消息 @Planet Details 。请注意，当您键入消息时，MSTeam 会检测网络挂钩的名称(图 7-11 )。

图 7-12

传出 webhook 应用添加参数

• 输入 Mercury 并点击发送图标(图 7-12 )。

图 7-13

Bot 通知

• 提交消息后几秒钟，您将看到对您的消息的回复，其中包含定制的适配卡，其中包含有关该星球的详细信息，并发送通知。参见图 7-13 。

然后图 7-14 显示了使用卡输出的 webhook 消息输出。

图 7-14

传出 webhook 输出

您已经成功测试了您的出站 webhook！

在本练习中，您学习了如何创建一个外发 webhook 并在 Microsoft 团队中注册它。无需 bot 注册，您就可以获得自定义 bot 对对话的回复。

练习 2 -创建传入的网络挂钩

在本练习中，您将学习如何在 Microsoft Teams 频道中注册一个传入的 webhook 并向其发布消息。

注册新的传入 Webhook

将传出的 webhook 添加到 Microsoft Teams 中的团队。在浏览器中，导航到 https://teams.microsoft.com ，使用工作和学校帐户的凭据登录。

图 7-15

管理团队

• 登录后，选择要添加到传入网络挂钩的团队。

• 点击并选择管理团队(图 7-15 )。

图 7-16

更多应用

• 选择应用并点击右上方的“更多应用”(图 7-16 )。

图 7-17

MS 团队应用列表

• 在应用页面上，搜索传入的 webhook 应用。

• 点击“传入 web hook”app 并打开(图 7-17 )。

图 7-18

加入团队

• 选择添加到团队按钮(图 7-18 )。

图 7-19

为传入 webhook 设置连接器

• 输入要添加 webhook 的频道名称，选择“设置连接器”(图 7-19 )。

在传入 Webhook 配置屏幕上:

图 7-20

配置传入 webhook

• 输入名称“JPOWER4 Services”

• 上传图片。

• 选择创建按钮(您可能需要在对话框中向下滚动，因为创建按钮在默认情况下是不可见的，如图 7-20 的屏幕截图所示)。

图 7-21

复制传入的 webhook URL

• 创建传入的 webhook 后，对话框将添加一个新的输入框，其中包含您要发布到的端点。复制该值(图 7-21 )。

图 7-22

传入的 webhook 已添加到频道

• 复制的 URL 如下所示:

  https://outlook.office.com/webhook/fe4183ab-49ea-4c1b-9297-2658ea56164c@f784fbed-7fc7-4c7a-aae9-d2f387b67c5d/IncomingWebhook/4d2b3a16003d47b080b7a083b5a5e533/74f315eb-1dde-4731-b6b5-2524b77f2acd

• 它将在通道中向其他通道成员添加一个关于传入 webhook 配置的对话(图 7-22 )。

测试传入的 Webhook

让我们来测试一下:

图 7-24

邮递员请求正文内容

• 在配置了传入的 webhook 之后，下一步是向它提交一个 post 以在通道中显示一条消息。通过向提供的 webhook 端点提交一个 HTTPS 请求来实现这一点。

• 使用免费工具邮递员 https://www.postman.com/ ，创建一个新的请求到点端点(图 7-23 ):

  • 将请求设置为发布

  • 将端点设置为您在前一节末尾复制的 webhook 端点

  • set the Content-Type header to application/json on the Headers tab

    

    图 7-23

    邮递员配置

  • 然后将下面的 JSON 添加到 Body 选项卡，并选择 raw 选项。

  • 注:此 JSON 包含 Office 365 连接器卡。

  • 传入 webhook 仅支持 Office 365 连接器卡。

  • 向传入的 webhooks 发送消息时，不支持适配卡。见图 7-24

图 7-25

传入的 webhook 输出

• 单击通过选择“发送”按钮将卡片发送给 Microsoft 团队。

• 它将处理请求并向通道发送消息卡。

• 转到 Microsoft Teams，并导航回安装了传入 webhook 的频道中的 Conversations 选项卡。您可以在您的消息卡(Office 365 连接器卡)中看到下面给出的消息。参见图 7-25 。

{
    "@type": "MessageCard",
    "@context": "http://schema.org/extensions",
    "summary": "JPOWER4",
    "sections": [{
      "activityTitle": "About JPOWER4",
      "activityImage": "http://www.jpower4.cimg/favicon.png",
      "facts": [
        {
          "name": "Description",
          "value": "We Launched by the middle of the year 2019 with a team of five to provide a world class cloud based services to the customers with a very economical prices.Yes, we are a cloud based application services company incubated by few IT techies who had a dream to lead a company that provides end to end cloud based solutions to the customers."
        },
        {
          "name": "SharePoint Framework",
          "value": "The SharePoint Framework is a Web Part for Office 365 & SharePoint that enables client-side development for building SharePoint experiences. It facilitates easy integration with the SharePoint data, and provides support for open source tooling of development."
        },
        {
          "name": "Microsoft Teams",
          "value": "Microsoft Teams is a collaboration workspace in Office 365 that integrates with apps and services people use to get work done together. We develop custom applications for Microsoft Teams and help the customer to upgrade from Skype for Business."
        },
        {
          "name": "Power Apps",
          "value": "Build apps in hours, not months, that easily connect to data, use excel like expressions to add logic, and run on the web, iOS, and Android devices"
        },
        {
          "name": "Power Automate",
          "value": "Include powerful workflow automation directly in your apps with a no-code approach that connects to hundreds of popular apps and services."
        },
        {
          "name": "Power BI",
          "value": "Make sense of your data through interactive, real-time dashboards and unlock the insights needed to drive your business forward."
        }
      ]
    }],
    "potentialAction": [{
      "@context": "http://schema.org",
      "@type": "ViewAction",
      "name": "Know more about JPOWER4",
      "target": ["http://www.jpower4.com/"]
    }]
  }

在本练习中，您学习了如何在 Microsoft Teams 频道中注册一个传入的 webhook，并向其发布一条带有 Office 365 Connector 卡的消息。

结论

在这一章中，你已经学习了 webhooks 的各种特性。出站 webhooks 允许您的用户从一个通道向您的 web 服务发送文本消息。连接器和传入 webhooks 允许用户订阅从您的 web 服务接收通知和消息。我们了解了 Office 365 连接器卡，可以通过从 postman 扩展发送它们来调用，就像我们能够从自己的应用中使用它一样。在接下来的章节中，你将开始学习 MSTeam 应用的不同选项和特性。

八、使用 Microsoft Graph 扩展您的解决方案

在这一章中，我将介绍团队生命周期管理的自动化、消息、webhooks 和特定于资源的许可同意。Microsoft Graph 是用于处理数据的统一 API 端点，因此 SharePoint、团队、交换和规划各种不同的 Microsoft 产品都有一个图形端点，所有这些都在一个公共 API 端点下公开。团队允许你建立各种不同的应用，如标签，机器人，连接器等。

图形 API 概述

Microsoft Graph 是访问微软应用中所有数据的统一 REST API，Microsoft Teams 是 Office 365 中团队合作的中心，允许您通过聊天消息、在线会议和电话进行交流。它允许您与所有这些 Office 365 应用协作。

API 使您能够访问 Microsoft 云服务资源。注册应用并获得用户或服务的身份验证令牌后，您可以向 Microsoft Graph API 发出请求。它公开 REST APIs 和客户端库来访问以下 Microsoft 365 服务上的数据:

图 8-1

Microsoft Graph–一个端点

• Office 365 服务:Delve、Excel、Microsoft Bookings、Microsoft Teams、OneDrive、OneNote、Outlook/Exchange、Planner、SharePoint

• 企业移动和安全服务:高级威胁分析、高级威胁保护、Azure Active Directory、Identity Manager 和 Intune

• Windows 10 服务:活动、设备、通知(图 8-1 )。

团队图形 API

Microsoft Graph 提供了用于访问数据的 API，您可以从选项卡、机器人、网站和服务中调用 Graph API，这些工具没有用户界面，甚至在您的命令行工具中没有 Graph API。

Microsoft Teams Graph API 允许您创建新团队并向这些团队添加频道，向团队添加成员，以及向您创建的频道添加选项卡。一旦团队完成了它的生命周期，你就有了一个功能齐全的团队。然后，您可以使用该功能的图形 API 来存档或删除团队。此外，人们用第一个图形 API 构建了不同的东西；例如，他们批量调配团队——在年初，每个部门可能有 100 个团队。

第二件事是你可以创建临时团队。例如，如果你是一家航空公司，你想每天飞行一个航班，并为每个航班配备一个团队，你可以在午夜钟声敲响时这样做。第三件事是人们创造了许多管理工具；他们只是管理他们的团队，所以团队的 PowerShell 命令就是建立在这个基础上的。现代的管理门户也是建立在 Graph API 之上的，因此开发人员可以开始使用 teams Graph API 来管理所有的团队管理活动。

你现在有一堆 API 来做这件事(表 8-1 )，并且你可以访问团队资源。您可以读取、写入、添加、移除、更新、删除以及枚举成员所拥有的团队。您拥有用于操作成员资格、向成员资格列表添加和删除人员、向所有者列表添加和删除人员以及枚举那些所有者和成员的 APIs 并获得关于他们的附加信息，例如他们的全名、电子邮件地址、用户照片等。

表 8-1

目前可供 MSTeam 使用的 API

|

资源

|

方法

|
| --- | --- |
| 组 | 列出您的团队、列出所有团队、创建、阅读、更新，删除、克隆、存档、取消存档 |
| 组 | 添加成员，删除成员，添加所有者，删除所有者，获取文件，获取笔记本，获取计划，获取日历 |
| 引导 | 列出、创建、读取、更新、删除 |
| teamstar | 列出、创建、读取、更新、删除 |
| 团队快照 | 列出、发布、更新、删除 |
| 团队安装 | 列出、安装、升级、删除 |
| 聊天消息 | 发送 |
| 呼叫 | 回答、拒绝、重定向、静音、取消静音、更改屏幕共享角色、列出参与者、邀请参与者 |
| 安排 | 创建或替换、获取、共享 |
| 计划组 | 创建、列出、获取、替换、删除 |
| 变化 | 创建、列出、获取、替换、删除 |
| 休假 | 创建、列出、获取、替换、删除 |
| 超时原因 | 创建、列出、获取、替换、删除 |

团队设置是另一个你可以访问的东西——读取和写入团队设置。有了通道，我们完全有能力添加、读取、更新、删除通道，以及枚举团队中的通道。您可以向这些频道发布频道消息。

用于生命周期管理的图形 API

使用 Graph APIs 可以做的最强大的事情之一是自动化团队的生命周期。因此，您可以创建一个团队，然后向该团队添加成员和所有者，向该团队添加一些频道，配置团队设置，向该团队发布欢迎消息，然后让您的用户加入该团队，当他们完成后，当您尝试向该团队提出的业务问题得到解决时，您可以继续删除该团队(图 8-2 )。

图 8-2

图表可以自动化团队生命周期[REF–MSDN]

团队和小组

微软 365 群组解决了群组协作的各种需求，并拥有 19 个微软 365 应用端点，包括 MSTeam。所有 Microsoft group 功能都适用于 Microsoft 团队。与组相关联的每个团队都在特定团队的上下文中进行交流。群组成员通过群组对话进行交流，群组对话是在 Outlook 中的群组环境中进行的电子邮件对话。为了区分与团队相关联的组，任何具有团队的组都有一个包含“团队”的'resourceprovisionoptions '属性不要从'resource provisioning options '属性中更改“团队”，否则当您列出所有团队时，结果将会不正确。

以下是团队和组在 API 级别上的差异:

• 持续聊天仅适用于 Microsoft 团队。该功能由频道和“聊天消息”资源分层表示。

• 群对话仅对 Microsoft 365 群可用。此功能由对话、“conversationThread”和帖子资源分层表示。

• “列出加入的团队”方法仅适用于 Microsoft 团队。

• 呼叫和在线会议 API 仅适用于 Microsoft 团队。

您可以创建团队:

• 从头开始，使用你自己的团队

• 来自现有的 O365 组

• 通过克隆现有团队

• 从模板

下面是语法:

POST https://graph.microsoft.com/v1.0/teams
Content-Type: application/json
{
  "template@odata.bind": "https://graph.microsoft.com/beta/teamsTemplates('standard')",
  "displayName": "My Sample Team",
  "description": "My Sample Team’s Description",
  "owners@odata.bind": [
    "https://graph.microsoft.com/beta/users('userId')"
  ]
}

团队模板

使用预配置的模板快速组建新团队，这些模板包括频道、所有者设置和预装应用等内容。

现成的模板:

• 标准

• 教育(班级、员工或 PLC)

• 零售店(基础或经理协作)

• 医疗保健(病房或医院)

使用图形 API 设置您的团队

您可以在创建团队或以后更新团队时对其进行配置。

配置如下内容:

• 显示名称和描述

• 来宾和成员权限

• 能见度

• 消息权限

• 创建频道

• 添加成员和角色

下面是语法:

PATCH https://graph.microsoft.com/v1.0/teams/{id}
Content-type: application/json
Content-length: 211
{
  "memberSettings": {
    "allowCreateUpdateChannels": true
  },
  "messagingSettings": {
    "allowUserEditMessages": true,
    "allowUserDeleteMessages": true
  },
  "funSettings": {
    "allowGiphy": true,
    "giphyContentRating": "strict"
  },
  "discoverySettings": {
    "showInTeamsSearchAndSuggestions": true
  }
}

使用图形 API 添加应用和标签

预安装应用，添加选项卡，并配置您的选项卡以便为您的团队安装应用:

• 您的应用必须位于您的组织应用目录或公共应用商店中。

• 要为您的团队添加选项卡:

  • 必须先安装应用。

  • 您可以预先配置它们，或者让它们在用户第一次与选项卡交互时进行配置。

  • 预配置选项卡可能很有挑战性，请确保使用文档( https://docs.microsoft.com/en-us/graph/teams-configuring-builtin-tabs )。

下面是语法:

POST https://graph.microsoft.com/v1.0/teams/{team-id}/channels/{channel-id}/tabs
{
    "displayName": "Document%20Library1",
    "teamsApp@odata.bind": "https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/com.microsoft.teamspace.tab.files.sharepoint",
    "configuration": {
        "entityId": "",
        "contentUrl": "https://microsoft.sharepoint.com/teams/WWWtest/Shared%20Documents",
        "removeUrl": null,
        "websiteUrl": null
    }
}
POST https://graph.microsoft.com/v1.0/teams/{id}/installedApps
Content-type: application/json
{
"teamsApp@odata.bind":"https://graph.microsoft.com/v1.0/appCatalogs/teamsApps/12345678-9abc-def0-123456789a"
}

存档您的团队

当时机成熟时，使用 Graph 以敏捷的方式归档您的团队，如果有必要，取消团队的归档。

常见归档操作:

• 检索和存档重要频道中的消息(测试版)

• 将团队存档

• 将 SharePoint Online 工作组网站设置为只读(或删除该组)

• 存档或移动存储的文件

下面是语法 :

GET https://graph.microsoft.com/v1.0/teams/{id}/channels
GET https://graph.microsoft.com/beta/teams/{id}/channels/{id}/messages/delta
GET https://graph.microsoft.com/beta/teams/{id}/channels/{id}/messages/{id}/replies
POST https://graph.microsoft.com/v1.0/teams/{id}/archive
{
    "shouldSetSpoSiteReadOnlyForMembers": true
}

图形和机器人:一起更好

带有机器人的团队应用可以主动向聊天或频道发送消息。它只能向对话发送消息。如果它有一对一聊天的正确信息，该机器人需要安装在用户所在的群聊或频道中，或者作为该用户的个人应用安装。当用户意识到他们时，机器人必须存储对他们引用。

借助 Graph，您可以为任何用户安装该应用，无论该应用之前安装在何处，您都可以主动发送消息。这在您需要可靠地传递大部分组织信息的情况下特别有用。

机器人只能读取消息，它们被@提到:

• 使用消息传递 API 来获取 bot 的附加信息

• 获取回复链中的根消息

• 检索邮件的所有回复

• 从聊天线程中获取以前的消息

微软图形工具包

Microsoft Graph Toolkit 是一组可重用的、框架无关的 web 组件，以及用于访问和使用 Microsoft Graph 的助手。这些组件开箱即用，功能齐全，具有内置的提供程序，可验证 Microsoft Graph 并从中获取数据。Microsoft Graph Toolkit 使在应用中使用 Microsoft Graph 变得很容易。

   <mgt-login></mgt-login>
   <mgt-agenda></mgt-agenda>

微软图形工具包里有什么？

成分

Microsoft Graph Toolkit 包括一组 web 组件，用于由 Microsoft Graph APIs 支持的最常见的构建体验。

|

成分

|

描述

|
| --- | --- |
| 注册 | 一个按钮和一个弹出控件，用于使用 Microsoft Identity platform 对用户进行身份验证，并在登录时显示用户的个人资料信息。 |
| 人 | 按照片、姓名和/或电子邮件地址显示一个人或联系人。 |
| 人 | 按照片或姓名首字母显示一组人或联系人。 |
| 议程 | 显示用户或组日历中的事件。 |
| 任务 | 显示并允许添加、删除、完成或编辑 Microsoft Planner 或 Microsoft 待办事项中的任务。 |
| 人物挑选器 | 提供搜索人员和呈现结果列表的能力。 |
| 个人卡 | 人员组件上使用的弹出按钮，用于显示有关用户的更多配置文件信息。 |
| 获取 | 直接在 HTML 中对任何 Microsoft Graph API 进行 GET 查询。 |
| 频道选择器 | 提供搜索 Microsoft 团队频道的功能，以便从呈现的结果列表中选择一个频道。 |

提供者

这些组件在与提供程序一起使用时效果最佳。提供者启用身份验证，并提供获取访问令牌的实现，以便调用 Microsoft Graph APIs。

|

提供者

|

描述

|
| --- | --- |
| -你好 | 使用 MSAL.js 登录用户并获取令牌以用于 Microsoft Graph。 |
| 平台 | 验证并提供对 SharePoint web 部件内部组件的 Microsoft Graph 访问。 |
| 组 | 验证并提供对 Microsoft Teams 选项卡内组件的 Microsoft Graph 访问。 |
| 代理 | 通过将所有呼叫通过后端路由到 Microsoft Graph，允许使用后端身份验证。 |
| 习俗 | 创建自定义提供程序，以便使用应用的现有身份验证代码对 Microsoft Graph 进行身份验证和访问。 |

为什么要使用微软图形工具包？

Microsoft Graph Toolkit 使您能够快速轻松地将 Microsoft Graph 支持的常见体验集成到您自己的应用中。

缩短开发时间

连接到 Microsoft Graph APIs 并在看起来和感觉上都像 Microsoft 365 体验的 UI 中呈现数据的工作已经为您完成，不需要任何定制。

无处不在

所有组件都基于 web 标准，可以与任何现代浏览器和 web 框架(React、Angular、Vue 等)无缝协作。).

漂亮但灵活

这些组件被设计成外观和感觉都像微软 365 体验，但也可以使用 CSS 自定义属性和模板进行自定义。

Microsoft Graph Toolkit 中的样式组件

使用 CSS 自定义属性修改组件样式。每个组件都记录了一组 CSS 自定义属性，您可以使用这些属性来更改某些元素的外观。例如:

    mgt-person {
      --avatar-size: 34px;
    }

除非提供 CSS 自定义属性，否则不能设置组件内部元素的样式。组件子元素托管在一个阴影 dom https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM 中。

Microsoft Graph 工具包中的模板

使用自定义模板修改组件的内容。所有 web 组件都支持基于

数据类型

每个组件可以有多个可以模板化的部分。

例如，在 mgt-agenda 组件中，您可以模板化单个事件、单个部分标题、加载视图、无数据视图等等。若要指示模板，请在模板上使用数据类型属性。

   <mgt-agenda>
     <template data-type="event"> </template>
   </mgt-agenda>

如果没有指定数据类型，整个组件将被模板替换。出于同样的目的，您也可以使用 data type="default"。

绑定数据

许多模板允许绑定作为数据上下文传递给模板的数据。例如，mgt-agenda 组件中的事件模板传递一个可以在模板中直接使用的{event}对象。为了扩展一个表达式，例如 event，主语使用双花括号。

<template data-type="event">
  <div>{{event.subject}}</div>
</template>

这种格式也可以用在属性中:

<template data-type="event">
  <a href="{{ event.onlineMeetingUrl }}" />
</template>

更改绑定语法

默认情况下，要展开表达式，可以使用双花括号({{expression}})。但是，对于已经使用了双花括号语法的环境，您可以更改此语法。例如，以下示例使用双方括号([[表达式]])。

import { TemplateHelper } from '@microsoft/mgt';
TemplateHelper.setBindingSyntax('[[', ']]');

数据上下文帮助程序属性

以下属性也可用于模板中的数据上下文对象。

|

财产

|

描述

|
| --- | --- |
| $索引 | 使用数据循环时呈现的项的数字索引。 |
| $parent | 如果模板在另一个模板中呈现，此属性允许您访问父数据上下文。 |

以下示例显示了如何在 data-for 循环中使用$index 属性。

<mgt-person>
  <mgt-person-card>
    <template data-type="additional-details">
      <span data-for="language in languages">
        {{ language.displayName }}<span data-if="$index < languages.length - 1">, </span>
      </span>
    </template>
  </mgt-person-card>
</mgt-person>

条件渲染

您可能只希望在基于数据上下文的条件为真或假时呈现元素。data-if 和 data-else 属性可以计算表达式，并且仅当它们为 true 或 false 时才进行呈现。

<mgt-person person-query="john doe">
  <template>
    <div data-if="person.image">
      <img src="{{ person.image }}" />
    </div>
    <div data-else>
      {{ person.displayName }}
    </div>
  </template>
</mgt-person>

环

有些情况下，数据上下文对象包含一个循环，您需要对数据进行循环。对于这种情况，请使用 data-for 属性。

<template data-type="event">
  <ul>
    <li data-for='attendee in event.attendees'>
      {{ attendee.displayName }}
    </li>
  </ul>
</template>

模板上下文

在需要转换绑定中的数据、绑定到事件或者只是在模板的绑定中使用外部数据的情况下，模板支持绑定到外部数据上下文。有两种方法可以添加额外的模板上下文。

直接在组件上

每个组件都定义了 templateContext 属性，您可以使用该属性将附加数据传递给组件中的任何模板。

   document.querySelector('mgt-agenda').templateContext = {

     someObject: {},
      formatDate: (date: Date) => { /* format date and return */ },
     someEventHandler: (e) => { /* handleEvent */  }

   }

templateContext 对象中的属性现在可用于模板中的绑定表达式。

全局适用于所有组件

TemplateHelper 类公开 globalContext 对象以添加应该对所有组件全局可用的数据或函数。

   import { TemplateHelper } from '@microsoft/mgt';
   TemplateHelper.globalContext.someObject = {};
   TemplateHelper.globalContext.formatDate = (date: Date) => { /* format date and return */ };
   TemplateHelper.globalContext.someEventHandler = (e) => { /* handleEvent */  }

转换器

在许多情况下，您可能希望在将数据显示在模板中之前对其进行转换。例如，您可能希望在呈现日期之前正确设置日期格式。在这些情况下，您可能需要使用模板转换器。

要使用模板转换器，首先需要定义一个执行转换的函数。例如，您可以定义一个函数来将事件对象转换为格式化的时间范围。

    document.querySelector('mgt-agenda').templateContext = {

     getTimeRange: (event) => {
       // TODO: format a string from the event object as you wish
       // timeRange = ...

        return timeRange;
     }
  }

要在模板中使用转换器，就像在代码中使用函数一样使用它。

    <template data-type="event">
      <div>{{ getTimeRange(event) }}</div>
    </template>

事件或属性绑定

data-props 属性允许您直接在模板中添加事件侦听器或设置属性值。

   <template>
        <button data-props="{{@click: myEvent, myProp: value}}"></button>
   </template>

data-props 为您可能想要设置的每个属性或事件处理程序接受逗号分隔的字符串。若要添加事件处理程序，请在事件名称前加上@前缀。事件处理程序需要在元素的 templateContext 中可用。

   document.querySelector('mgt-agenda').templateContext = {

      someEventHandler: (e, context, root) => { /* handleEvent */  }
   }
   <template>
        <button data-props="{{@click: someEventHandler}}"></button>
    </template>

模板的事件参数、数据上下文和根元素作为参数传递给事件处理程序。

模板呈现事件

在某些情况下，您可能希望获得对呈现元素的引用。如果您想要自己处理内容的呈现，或者想要修改呈现的元素，这可能会很有用。

在这种情况下，您可以使用 templateRendered 事件，该事件在模板呈现后触发。

let agenda = document.querySelector('mgt-agenda');
agenda.addEventListener('templateRendered', (e) => { });

事件细节将包含对正在呈现的元素、数据上下文对象和模板类型的引用。

agenda.addEventListener('templateRendered', (e) => {
  let templateType = e.detail.templateType;
  let dataContext = e.detail.context;
  let element = e.detail.element;

  if (templateType === 'event') {
    element.querySelector('.some-button').addEventListener('click', () => {});
  }
});

微软图形工具包游乐场

要找到一个用于与 Microsoft Graph Toolkit 交互的工具，请尝试这个游戏场的组件: https://mgt.dev 。见图 8-3 。

图 8-3

图形工具包游乐场

Microsoft 图形浏览器

微软图形浏览器是一个探索图形 API 的工具，你可以在图 8-4 中看到我捕捉到的微软图形浏览器的截图。如您所见，该控制台为您提供了一个选项，您可以键入 API 或您正在查找的特定实体类型或对象的地址，然后您还需要使用有权查询该特定 API 的特定帐户登录，接下来它还会向您显示一些示例查询，您可以使用这些查询来了解 explorer。您可以通过 https://developer.microsoft.com/graph/graph-explorer 访问图形浏览器

以下示例显示了一个请求，该请求返回关于我的租户中的 joinedteams 的信息。

图 8-4

图形 API 浏览器

发送请求后会显示状态代码和消息，并且响应会显示在“响应预览”选项卡中。

邮递员

Postman 是一个 API 开发的协作平台，您可以使用它来构建和测试 Microsoft Graph API 请求。可以从 https://www.getpostman.com 下载邮差。要在 Postman 中与 Microsoft Graph 交互，可以使用 Microsoft Graph 集合。想了解更多关于邮差的信息，参考这里: https://learning.postman.com/

用于 Visual Studio 代码的 MSTeam 工具包

Microsoft Teams Toolkit 扩展使您能够直接从 Visual Studio 代码创建、调试和部署 Teams 应用。

先决条件:

• Visual Studio 代码 v1.44 或更高版本

• NodeJS 6 或更新版本

访问 MSTeam 工具包:- https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension 。见图 8-5 。

图 8-5

MSTeam 工具包

练习–使用 Microsoft Graph Toolkit 的 Microsoft 团队选项卡

在本练习中，您将学习 Microsoft 团队中的 Microsoft Graph 基础知识，以及如何使用 Microsoft Graph API 工具包、Microsoft Graph Explorer 和 AAD 权限实现。本练习使用 Microsoft Teams Toolkit for Visual Studio 代码进行开发。

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

1. Visual Studio 代码

2. MSTeam 工具包

3. 恩格罗克账户

使用 Microsoft Graph API 工具包构建团队选项卡的步骤:

1. 安装 Microsoft Teams Toolkit extension for Visual Studio 代码

2. 建立 Microsoft 团队选项卡

   • 实施微软图形工具包

     • 登录组件:使用 Microsoft Identity platform 验证用户身份的登录按钮

     • 团队提供者:MSTeam 标签，方便认证

     • 人员组件:显示用户

3. 为隧道设置 ngrok

4. 在 Azure Active Directory 中注册你的应用

5. 执行应用

6. 在 MSTeam 中测试你的应用

启用 Microsoft Teams Toolkit Extension for Visual Studio 代码

在 Visual Studio 代码中，从左侧栏的“扩展”选项卡安装 Microsoft Teams Toolkit。参见图 8-6 。

图 8-6

Microsoft 团队工具包安装

建立 Microsoft 团队选项卡

步骤如下(图 8-7 ):

图 8-7

Microsoft 团队工具包登录

1. 打开 Visual Studio 代码

2. 在 Visual Studio 代码中选择左侧栏上的 Microsoft Teams 图标，然后登录

3. 使用您的租户帐户登录

图 8-8

创建新应用

1. 导航至“创建新团队应用”并点击输入新应用名称(图 8-8 )

图 8-9

选择新标签应用

1. 按“回车”选择应用路径

2. 选择选项卡创建 MSTeam 选项卡(图 8-9

图 8-10

选择个人应用

1. 单击下一步按钮

2. 选择个人选项卡(图 8-10

图 8-11

Microsoft 团队选项卡应用已创建

1. 点击完成按钮创建团队应用(图 8-11

实施微软图形工具包

让我们来实现它:

• 在 src 文件夹下添加一个新文件，命名为 auth.js

• 然后在其中添加下面的代码:

• 在公共文件夹下添加一个新文件，文件名为auth.html

• 然后添加以下代码

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import { Provider, themes } from '@fluentui/react-northstar'

ReactDOM.render(
    <Provider theme={themes.teams}>
        <App />
    </Provider>, document.getElementById('auth')
);

• 将下面的代码添加到index.html、内<体>标签中:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Auth Tab</title>
    <meta name="viewport" content='width=device-width, initial-scale=1'>
    <link rel="stylesheet" type='text/css' media="screen" href='main.css'>
    <script src='main.js'></script>
</head>

<body>
    <div id="auth"></div>
    <script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
    <script>
        mgt.TeamsProvider.handleAuth();
    </script>
</body>

</html>

<div id="root"></div>
    <script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
    <mgt-teams-provider client-id=" YOUR-CLIENT-ID" auth-popup-url="YOUR-NGROK-URL/auth.html"></mgt-teams-provider>
    <mgt-login></mgt-login>

    <mgt-person id="with-presence" person-query="me" person-card="hover" view="twoLines" show-presence></mgt-person>

为隧道设置 Ngrok

请遵循以下步骤:

图 8-12

配置 ngrok 身份验证令牌

• 前往 ngrok( https://ngrok.com/ )网站，使用您的租户 id 登录

• 下载 ngrok.exe 并完成设置和安装指南

• 从 ngrok 站点复制 Authtoken

• 将 Authtoken 保存在默认配置文件C:\ Users [用户名]\。恩罗克 >(图 8-12 )

图 8-13

Ngrok 创造了隧道

• 运行下面的脚本(图 8-13 )为https://localhost:3000创建一个 ngrok 隧道

ngrok http -host-header="localhost:3000" 3000

图 8-14

在中更新 URL。环境文件

• 转到您的项目。发布> Development.env ，用 ngrok URL 替换 baseUrl0(图 8-14 )， https://51d71653c83c.ngrok.io

图 8-15

更新索引文件中的 URL

• 转到你的项目public>index.html，用mgt-teams-provider>auth-popup-URL中的 ngrok URL https://51d71653c83c.ngrok.io 替换你的-NGROK-URL(图 8-15 )。

• 导航终端➤新终端

• 运行解决方案(图 8-16 )。默认团队选项卡将运行https://localhost:3000

图 8-16

编译了应用

npm install
npm start

在 Azure Active Directory 中注册你的应用

现在我们注册应用:

图 8-17

应用注册

1. 转到 Azure 门户，然后转到 Azure Active Directory ➤应用注册，并选择新建注册

2. Azure 动态门户网址- https://aad.portal.azure.com/

3. 注册

4. 单击 Azure Active Directory

5. 选择应用注册

6. 然后点击新注册(图 8-17 )

图 8-18

注册申请

1. 填写注册应用的详细信息:

   • 名称:teamstabapp

   • 支持的帐户类型:任何组织目录中的帐户(任何 Azure AD 目录-多租户)和个人 Microsoft 帐户(例如 Skype、Xbox)

   • 网站的重定向 URL:https://REPLACE_NGROKDOMAIN.ngrok.io/auth.html

   • 点击“注册”按钮注册一个应用(图 8-18

图 8-19

证明

1. 进入认证选项卡和，通过选择访问令牌和 ID 令牌启用隐式授权(图 8-19 )

图 8-20

请求 API 权限

1. 单击保存

2. 进入 API 权限选项卡(图 8-20 ，选择添加权限➤微软图形➤委托权限，添加权限

   1. 日历。阅读

   2. 日历。读写

   3. 目录。AccessAsUser.All

   4. 目录。全部阅读

   5. 目录。ReadWrite.All

   6. 用户。阅读

   7. 用户。全部阅读

   8. 用户。ReadWrite.All

   9. 邮件。阅读

图 8-21

授予管理员许可

1. 然后，选择授予管理员许可(图 8-21 )

图 8-22

应用客户端 ID

1. 转到概览选项卡，复制应用(客户端)ID (图 8-22 )

图 8-23

更新索引文件中的客户端 ID

1. 然后转到您的项目 public > index.html，在 mgt-teams-provider > auth-popup-URL 中将您的-CLIENT-ID 替换为 Application (client) ID(图 8-23 )。

在 MSTeam 中测试你的应用

是时候检验它了:

图 8-24

打开 App Studio

1. 去MSTeam ( https://teams.microsoft.com )

2. 前往… ➤开 App 工作室(图 8-24 )

图 8-25

导入现有应用

1. 选择清单编辑器并选择导入现有应用(图 8-25

图 8-26

导入 Development.zip 文件

1. 选择项目文件夹➤下的 Development.zip。发布(图 8-26

图 8-27

安装应用进行测试

1. 向下滚动选择测试分发，然后点击安装(图 8-27 )

图 8-28

添加应用进行测试

1. 点击添加按钮安装应用(图 8-28

图 8-29

登录应用

1. 点击使用 AAD 注册的应用登录进行认证(图 8-29

图 8-31

使用图形 API 工具包获取用户信息

图 8-30

同意 AAD

1. 同意您创建的 AAD 注册应用(图 8-30

2. 成功认证后，您的个人资料信息电子邮件和姓名应出现在您的选项卡中(图 8-31

在本练习中，您学习了如何在 Microsoft Teams for a tab 应用中使用 Microsoft Teams Toolkit for Visual Studio 代码和 Microsoft Graph API toolkit。

结论

在本章中，您已经学习了 Microsoft Teams Toolkit、Microsoft Graph API Toolkit 和 Graph API 的各种功能，并举例说明了我们可以在自己的定制应用中使用的功能。在接下来的章节中，你将开始学习 MSTeam 应用的不同选项和功能。

九、使用解决方案加速器构建团队应用

本章涵盖了使用解决方案加速器构建团队应用、使用 power 应用构建团队应用、power automate 与团队的集成、应用模板和团队移动平台可扩展性。今天，使用低代码方法来构建应用，而不是在 Visual Studio 等 IDE 中编写代码，您实际上可以将您的应用绘制成一幅图片，我们负责在后端生成您需要的代码，以使您的应用实际工作。最好的部分是不用写代码就能构建应用，并轻松地将它们添加为标签或将应用集成到团队中。

解决方案加速器概述

每个客户都希望应用开发和部署能够运行得更快，按照自己的节奏升级，同时保持对解决方案设计的完全控制，并定制已部署的服务来满足他们的需求。Microsoft Teams 是 Microsoft 365 中团队合作的中心，使人们能够一起工作，并将所有应用集成在一起，而无需重新开发。这就是为什么解决方案加速器是重用现有应用的最佳解决方案。如今，客户的工作方式发生了变化；所有人都在远程工作，需要在几分钟内快速访问信息。

电源平台概述

微软的 Power 平台为用户提供了创建加速业务发展的解决方案所需的工具。Microsoft Power Platform 是一个产品系列，在一个无缝集成的平台上提供创新的业务解决方案。Power Platform 提供了一个图形用户界面，该界面采用拖放组件和模型驱动逻辑(与传统的计算机编程相反)，使日常用户能够快速创建几乎不需要编码的应用(也称为低代码界面)。同时，它还为专业开发人员提供了一套强大的工具来创建高级定制应用。

Power Platform 支持的业务应用和流程自动化可以迅速成为组织应用生态系统的一部分。因此，企业管理员必须了解什么是 Power Platform，以及其公民开发人员如何利用其功能来连接到作为托管企业环境一部分的服务和数据。

图 9-1

动力平台

动力平台系列包含四个关键产品(参见图 9-1 ):

1. 商业智能

2. 电源应用

3. 电力自动化

4. 强大的虚拟代理

电源应用

Microsoft PowerApps 是一种将商业专业知识转化为定制应用的强大新方法。使用 PowerApps，您可以快速轻松地创建应用，而无需编写任何代码。PowerApps 有一个直观的设计界面，在您为团队或业务创建应用时全程指导您，您的应用可以与您已经拥有的数据集成，或者使用我们的业务线应用。Power Apps 是一套基于云的应用、服务、连接器和数据平台，为组织提供快速应用开发环境，以构建满足其业务需求的定制应用。通过使用 Power 应用，用户可以快速构建自定义业务应用，这些应用连接到存储在底层内置数据平台(称为公共数据服务)或各种在线和内部数据源(如 SharePoint、Excel、Office 365、Dynamics 365、SQL Server 等)中的业务数据。

电力自动化

Power Automate 是一项帮助用户为其应用和服务创建自动化工作流的服务，然后可以与 MSTeam 集成在一起工作。

Power BI(商业智能)

Power BI 是一款可视化工具，可帮助您创建令人惊叹的报告和仪表盘，帮助您深入了解您的业务并做出更好的业务决策。此外，您还可以将 Power BI 报告作为选项卡或应用集成到 MSTeam 中，以便协同工作并做出明智的决策。

超级虚拟代理

Power Virtual Agents 使我们能够轻松创建聊天机器人:也就是说，通过简单易用的图形界面轻松构建强大的转换机器人，并将对话机器人集成到您的 Microsoft Teams 渠道中。

PowerApps 集成

每个 PowerApps 都是团队应用

我们有三个选项可以让您的 PowerApps 成为团队应用:

• 选项 1:添加为频道选项卡

• 选项 2:在团队中嵌入应用

• 选项 3:上传到租户应用目录，并使用设置策略配置为个人应用

利益

PowerApps 在已经开展关键工作和协作的团队中可用，因此 IT 管理员可以通过将 PowerApps 发布到团队中的租户应用目录来以可扩展的方式分发 PowerApps，一线员工可以在团队移动中访问 power apps。

虽然我们还有很长的路要走，但是已经有很多很好的例子可以说明客户是如何利用团队中加载的 PowerApps 来运营他们的业务的——让我们在这里分享一些例子。

教育:塔科马公立学校

塔科马学区的助理校长——没有任何技术经验！–为教师构建了强大的应用来跟踪学生的阅读理解，并提供更有帮助的建议。图 9-2 引用了这一客户体验。

图 9-2

塔科马公立学校

电信:澳大利亚电信

澳大利亚电信提供商 Telstra 开发了一些工具，使其现场技术人员能够更有效地工作，例如访问知识文档、向领导层提交问题以及更好地记录损坏索赔。图 9-3 引用了这一点进行实施

图 9-3

Telstra 通信

非营利:美国红十字会

美国红十字会已经将他们的供应链数字化，允许更好地管理和跟踪重要资源。图 9-4 引用了这一点进行实施。

图 9-4

美国红十字会

练习 1–将 PowerApps 应用添加为渠道应用

以下是将 PowerApps 应用添加为频道选项卡所涉及的步骤:

图 9-5

SharePoint 列表

1. 使用 SharePoint 创建数据源

   1. 创建包含名称、照片和描述的 SharePoint 列表“UserInfo ”(图 9-5 )

   2. 然后添加几条记录

图 9-12

在团队选项卡中添加了 PowerApps

1. Create a Canvas app in Power Apps (https://powerapps.microsoft.com) (Figure 9-6):

   • 保存并发布应用

   

   图 9-8

   设计画布应用

   • 添加标题

   • 添加垂直图库并选择数据源作为 SharePoint 列表“UserInfo”

   • 然后添加显示表单并选择数据源作为 SharePoint 列表' UserInfo '

   • 添加画廊 1。在显示表单中选择项目属性(图 9-8

   

   图 9-7

   画布应用从空白

   • 输入应用名称

   • 选择数位板格式

   • 点击创建按钮创建一个应用(图 9-7

   

   图 9-6

   创建高级应用

   • 前往 https://powerapps.microsoft.com

   • 签到

   • 单击创建➤从空白中选择画布应用

2. Add the Power Apps to Teams as tab (Figure 9-9)

   • 单击〖保存〗按钮，将 Power Apps 作为标签添加(图 9-12 )

   

   图 9-11

   从现有应用中选择

   • 单击添加按钮将高级应用添加到您的频道

   • 选择“团队整合”应用(图 9-11

   

   图 9-10

   添加选项卡

   • 搜索电源并选择 PowerApps(图 9-10 )

   

   图 9-9

   在频道中添加标签

   • 前往团队( https://teams.microsoft.com )

   • 选择团队，转到您的团队并选择渠道

   • 点按频道中的+

在本练习中，您学习了如何将 Integrate Power Apps 用作 tab 应用的 Microsoft 团队中的团队。

练习 2–power apps 应用在团队中嵌入应用

您可以通过将您创建的应用直接嵌入到 Microsoft 团队来共享该应用。完成后，用户可以选择+将你的应用添加到你所在团队的任何团队频道或对话中。该应用在您团队的选项卡下显示为磁贴。此外，管理员可以上传应用，以便它在所有选项卡部分下显示您租户中的所有团队。

下载应用

我们开始吧。

图 9-13

PowerApps 应用列表

• 登录 https://powerapps.microsoft.com ，然后在菜单中选择应用(图 9-13 )。

图 9-14

选择 PowerApps 应用

• 选择更多操作(...)的应用，然后选择添加到团队(图 9-14 )。

图 9-15

下载应用

• 在添加到团队面板中，选择下载。然后，Power Apps 将使用你已经在应用中设置的应用描述和徽标来生成你的团队清单文件(图 9-15 )。

将应用添加为个人应用

现在我们需要添加它。

图 9-16

上传自定义应用

• 要将应用添加为个人应用或任何频道或对话的标签，请选择左侧导航栏中的应用，然后选择上传自定义应用(图 9-16 )。

• 上传下载的 zip 文件

• 选择添加将应用添加为个人应用，或选择添加到团队将应用添加为现有频道或对话中的标签。

在本练习中，您学习了如何在 Microsoft Teams for a tab 应用中将 Power Apps 应用用作团队应用(即，将应用嵌入团队)。

电力自动化集成

Power Automate 是一项服务，可以帮助用户在他们喜爱的应用和服务之间创建自动化的工作流，以同步文件、结束通知、收集数据等。工作流，简称为 Power Automate 中的流程，由触发事件、条件和操作组成。

当触发事件发生时，流程开始。触发器可以包括创建记录、发生预定的活动，甚至是 Power Automate 移动应用的按钮点击。触发流程后，工作流逻辑会检查流程中定义的条件，对于任何为真的条件，都会执行与该条件相关联的操作。

这创建了使用 Power Automate 自动执行重复性工作任务的流程——并直接从您的 Microsoft 团队数据中触发。

练习 3–增强与团队的自动化集成

按照以下步骤在 Microsoft 团队中安装 Power Automate 应用。

图 9-17

选择团队应用

• 登录 Microsoft 团队。

• 点击团队导航栏左下方的应用图标(图 9-17 )。

图 9-18

搜索流程

• 搜索流程(图 9-18 )。

• 选择流程 app。

图 9-19

添加流量应用

• 选择并点击添加➤添加到团队按钮进行安装(图 9-19 )。

• Power Automate 现已安装。

图 9-20

设置流量应用

• 选择团队和渠道(图 9-20 )。

图 9-21

将流量应用设置为选项卡

• 点击设置选项卡或设置机器人(图 9-21 )。

• 我选择了设置选项卡。

• 现在您可以从团队中创建一个流程。

此外，您可以设置为 bot 并从对话中访问。

图 9-22

将流添加为 bot

• 转到团队菜单中的(…)(图 9-22 )

图 9-23

将流应用设置为机器人

• 选择列表流

• 它显示我的所有流程(图 9-23

团队应用的应用模板

应用模板是面向 Microsoft 团队的生产就绪型应用，由社区成员开发并由 Microsoft 发布。这款应用的模板是开源的，可以在 GitHub 中获得。所有应用模板都包含详细的部署说明和截图。此外，微软测试并发布了这些应用，因此您可以将它们直接部署到您的组织租户，或者根据您的业务范围修改源代码。这些应用模板对于团队的大多数日常活动非常有用。无论你是开发人员还是 IT 专业人士，你都可以部署和使用这款应用，无需微软或社区成员的任何帮助。

什么是 App 模板？

今天，我们有 30 多个由微软提供的应用模板，这些模板是可在您的租户中部署的生产就绪型应用。所有这些应用都解决了大多数现实世界中的一般性问题。无需为您的应用额外付费。它们附带了功能文档、部署文档和完整的源代码。任何时候，你都可以根据你的 LOB 修改源代码(图 9-24 )。

图 9-24

应用模板定制能力

主要优势

即插即用体验

应用模板附带了带有详细文档的部署脚本，但不要求开发人员使用它来部署应用。

生产就绪代码

所有应用模板都遵循最佳实践、安全性、合规性和标准治理。此外，微软在发布之前测试了社区提交的应用模板。

可定制可扩展

他们提供完整的代码给你，也就是开源。代码和部署脚本都可以根据您的业务线进行定制和扩展。

详细的文档和支持

应用模板包含在端到端文档中，其中包含屏幕截图和解决方案架构、部署脚本以及配置步骤。如果您发现任何问题，可以在 GitHub 上提出。微软和社区成员可以提供帮助。

应用模板

截至 2020 年 9 月，我们有 30 多个可用的应用模板，并且根据社区提交的内容每天都在增加。此外，该社区在同一个应用模板中添加了新功能，因此，如果这些功能适合您的组织，您可以轻松升级它。

生产就绪 app 模板转到 https://aka.ms/teamsapptemplates 。它包含所有可用应用模板的概述，以及 GitHub repos 的链接(图 9-25 )。

图 9-25

应用模板列表

如何部署 App 模板？

部署应用模板非常容易，不需要任何开发人员。你只需要遵循文档。首先设置先决条件和配置，然后就可以进行一键部署了。要了解更多关于应用部署的信息，请阅读文档说明和架构图(图 9-26 )。

图 9-26

部署应用模板

常见问题？

1. 这些应用安全吗？

   应用模板符合安全和基础设施方面的建议最佳实践，所有社区提交的更改都经过审核，以确保持续符合要求。

2. 将这些应用部署到我的租户需要什么？

   所有应用模板都附有详细的部署说明，只需几分钟即可完成设置。您不需要开发人员部署和使用这些现成的应用模板。

3. 大家可以部署这些 app 模板吗？

   通常，组织有自己的审核流程来将应用上传到内部目录。拥有这些权限的任何人都可以部署这些应用。

4. 这些应用需要付费吗？

   这些应用模板可以免费使用，因为它们是开源的。他们可能会产生 Azure 消费费用，但有免费试用。

许可证

这个应用模板是根据麻省理工学院许可条款提供的。除了这些条款之外，使用本应用模板意味着您同意以下内容:

• 您有责任遵守内部或外部隐私和安全法规。

• 您应对所有与数据相关的事件负责。

• Microsoft 不授予您使用任何 Microsoft 名称、徽标或商标的权利。

• 使用此模板并不保证团队应用商店接受您的应用。

团队移动平台可扩展性

团队平台从一开始就被设计成允许外部服务的特性看起来像是团队的本地特性，包括微软服务和来自第三方的服务。2019 年，微软发布了组织拥有自己的私有应用目录来发布 LOB 应用的能力。正如您稍后将听到的更多内容，我们有丰富的基于 Teams 平台的行业垂直解决方案可供选择(图 9-27 )。

图 9-27

移动平台[参考–MSDN]

Teams platform 由一组不同的功能组成，这些功能根据用户的交互方式分类到一个 2 x 2 的网格中:在个人或组上下文中，或者在对话界面或外部服务拥有的专用画布中。

连接器只是一种在外部系统发生某种情况时将卡片发布到对话中的方法。

破冰船机器人

破冰者机器人允许一个群体中的用户与其他成员联系和联网。在团队 app 模板中有: https://docs.microsoft.com/en-us/microsoftteams/platform/samples/app-templates#icebreaker 。它还利用了其他功能，如“会议日程的深层链接”或“聊天的深层链接”。参见图 9-28 。

图 9-28

破冰船应用移动视图[REF–MSDN]

赞美信息扩展

赞美信息扩展应用用于向人们发送赞美，它在移动平台上可用。通过认可人们的努力，你可以让他们更快乐、更有效率。团队移动平台完全支持该应用(图 9-29 )。

图 9-29

赞美信息扩展[REF–MSDN]

结论

在本章中，您已经通过示例了解了 Microsoft Teams 与应用模板、移动应用和 Power 平台集成的各种功能，现在我们可以在自己的应用中使用它们。在接下来的章节中，你将开始了解 MSTeam 应用的不同选项和功能。

十、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.com

• 选择团队应用

• 然后选择设置策略

• 添加新的安装策略

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

• 管理用户(图 10-5

部署选项

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

• 与租户团队同步

• 手动部署

租户部署

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

手动部署

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

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

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

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

  • https://docs.microsoft.com/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.com/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.net

打包您的应用

在生产中部署您的 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.com/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.com/ 。使用您在 Azure 订阅中使用的username@tenantname.onmicrosoft.com登录。

——https://portal.azure.com/

图 11-2

创建资源

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

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

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

图 11-3

创建 Web 应用

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

图 11-4

创建和查看 Web 应用

• 使用 Windows 应用服务计划创建一个 Web 应用，并为其命名您的选项卡，与您在 Yeoman generator 中被要求提供 URL 时使用的名称相同。本例:https://deployfirstteamsapp. azurewebsites.net(图 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.com/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.net ( 输入在 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.net:443/deployfirstteamsapp.git.
   
   

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

   i.e., git remote add azure  https://$deployfirstteamsapp@deployfirstteamsapp.scm.azurewebsites.net: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.com/

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

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

4. 选择本地 Git 作为源

5. 完成的

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

图 11-20

部署开始

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

图 11-19

输入部署密码

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

git push azure master

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

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

使用应用栏导航菜单，选择更多添加的应用按钮。然后选择更多应用，接着上传自定义应用，然后为我或我的团队上传(图 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。