如何动手调试Microsoft Teams的Task Module功能？

说在前边：了解Microsoft Teams产品的童鞋都知道，包括Tabs、Bots在内，Teams已经提供了很多强大的第三方集成功能。Tab可以很方便的集成已有的业务系统，丰富已有的业务流程。Bots又为用户提供了高度可扩展、深度定制开发的选项和能力。今天介绍的Task Module实际上已经出来蛮久了，类似Popup的效果，和已有的Tabs和Bots等一起使用，极大地丰富了现有功能，也为业务系统提供了更多的方案选择。

在开始之前，先上一张官方谍照：

样子是不是很熟悉，标准的Popup体验，当然这个实现可以有好几种方式，比如通过Teams的JS SDK唤起弹窗，也可以通过Card里的button唤起，在写这篇博文的时候，已经发现了可以通过Deep Link的方式唤起了（这种方式之前没有玩过）。

以上做个简单的介绍，闲言少叙，直入主题。以下是我做的一个真实场景，通过本地开发调试介绍，希望对各位童靴有点帮助。

一：准备本地开发环境。

• Visual Studio或者Visual Studio Code(如果是VS Code，则文中某些内容需要略微调整，此处不做赘述)，用于调试代码。
• Microsoft Teams的PC客户端或者使用Teams的Web版本（上传package，看效果）。
• ngrok（用于打通localhost和外网，在做其他有穿网需求的项目，也可以使用，挺好用）。
• git（用于从GitHub上拉代码）

二：拉代码 & 运行代码。

代码位置，戳这里（实际上code repository里的readme也有部分步骤和截图，本文给出部分中文解释和额外的注意点）。

clone完成后，打开代码目录下的solution文件Microsoft.Teams.Samples.TaskModule.sln，build + run。注意跑起来的localhost端口（这里为3333）

三：跑ngrok终端

以管理员身份运行ngrok终端，run cmd > ngrok.exe http 3333 -host-header="localhost:3333"

PS：这里注意-host-header参数一定要加。不然跑起来会有问题（感兴趣的可以自己去掉跑跑看）。跑起来我们用的是https(Teams要求)。

四：更改配置(web.config)

    【bot application id】
    【bot application password，注意这里的转义符号】
    【本地跑起来的ngrok地址，相当于一个callback地址，打开task module的时候，会访问这个域名下的页面】

更改的时候需要停掉IISExpress，所以改完后再跑起来，由于端口不变，所以ngrok不用重新启动，也不能重新启动（重启后地址又变了）

五：通过App Studio配置并安装

具体步骤可以参考：https://github.com/Office365DevOps/msteams-samples-task-module-csharp。整个应用会包含Tab、MessageExtension，在这两个内容里唤起Task Module。需要说明的是在JS SDK调用task module的地方，注意AppId参数（这里有说明）：

安装完以后可以在Teams的Tab里看到button点击后弹出框效果（MessageExtension效果类似）。

如果需要了解更多的JS SDK的方法和参数，请参考官方文档。

欢迎拍砖，共同探讨。