說在前邊：瞭解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的方法和參數，請參考官方文檔。
歡迎拍磚，共同探討。