说在前边：了解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)
<add key="MicrosoftAppId" value="f6a7af57-a5c6-4e18-a3e5-1ab6793ce6d1" /> 【bot application id】
<add key="MicrosoftAppPassword" value="quF;DR/@(2U_b:IR2+k=&;?=l1|0CH{h_d" /> 【bot application password，注意这里的转义符号】
<add key="Host" value="https://2cbe2ac9.ngrok.io"/> 【本地跑起来的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的方法和参数，请参考官方文档。
欢迎拍砖，共同探讨。