練習 - 建立訊息擴充功能

已完成

在此練習中，您會建立訊息延伸模組解決方案。 您可以在 Visual Studio 中使用 Teams 工具組來建立所需的資源，然後在 Microsoft Teams 中啟動偵錯會話並進行測試。

建立訊息擴充專案

從建立新的 Microsoft Teams 應用程式項目開始，該專案設定了包含搜尋命令的訊息延伸模組。 雖然您可以使用適用於 Visual Studio 的 Teams 工具組專案範本來建立專案，但需要對 Scaffold 專案進行變更，才能完成此課程模組。 相反地，您會使用可做為 NuGet 套件的自定義專案範本。 使用自定義範本的好處是，它會建立具有必要檔案和相依性的解決方案，為您節省時間。

在 PowerShell 會話中：

1. 從從 NuGet 安裝範本套件開始，方法是執行：

   dotnet new install M365Advocacy.Teams.Templates
   

2. 執行下列命令來建立新專案：

   dotnet new teams-msgext-search --name "ProductsPlugin" `
     --internal-name "msgext-products" `
     --display-name "Contoso products" `
     --short-description "Product look up tool." `
     --full-description "Get real-time product information and share them in a conversation." `
     --command-id "Search" `
     --command-description "Find products by name" `
     --command-title "Products" `
     --parameter-name "ProductName" `
     --parameter-title "Product name" `
     --parameter-description "The name of the product as a keyword" `
     --allow-scripts Yes
   

3. 等候專案建立。

4. 執行 來變更項目目錄 cd ProductsPlugin。

5. 執行 ，在Visual Studio中開啟 .\ProductsPlugin.sln方案。

建立開發人員通道

當使用者與您的訊息擴充功能互動時，Bot 服務會將要求傳送至 Web 服務。 在開發期間，您的 Web 服務會在您的電腦本機上執行。 若要允許 Bot 服務連線到您的 Web 服務，您必須使用開發通道將它公開到電腦之外。

在 Visual Studio 中繼續：

1. 在工具列上，選取 [ 開始 ] 按鈕旁的下拉式清單，展開 [開發人員通道 (沒有作用中信道) ] 功能表，然後選取 [ 建立通道...]
2. 在對話框中，指定下列值：
   1. 帳戶：選取您選擇的帳戶
   2. 名稱：msgext-products
   3. 通道類型：暫存
   4. 存取：公用
3. 選取 [ 確定] 以建立通道。 顯示提示，指出新的通道現在是目前的作用中信道
4. 選取 [確定] 以關閉提示

準備資源

現在一切就緒后，使用Teams工具組，執行 準備Teams應用程式相依性 程式來建立所需的資源。

準備 Teams 應用程式相依性程式會使用使用中的開發人員通道 URL 更新 TeamsApp\env\.env.local 檔案中的BOT_ENDPOINT和BOT_DOMAIN環境變數，並執行 TeamsApp\teamsapp.local.yml 檔案中所述的動作。

花點時間探索 teamsapp.local.yml 檔案中的步驟。

在 Visual Studio 中繼續：

1. 開啟 [ 專案 ] 功能表 (或者，您可以在 [方案總管]) 中以滑鼠右鍵選取 TeamsApp 專案，展開 [Teams 工具組] 選單，然後選取 [準備 Teams 應用程式相依性]
2. 在 [Microsoft 365 帳戶 ] 對話框中，登入或選取現有帳戶以存取您的Microsoft 365 租使用者，然後選取 [ 繼續]
3. 在 [ 布建] 對話框中，登入或選取要用於將資源部署至 Azure 的現有帳戶，並指定下列值：
   1. 訂用帳戶名稱：使用下拉式清單來選取訂用帳戶
   2. 資源群組：選取 [新增... ] 以開啟對話框，在文本框中輸入 rg-msgext-products-local，然後選取 [ 確定]
   3. 區域：使用下拉式清單來選取最接近您的區域
4. 選取 [布建] 在 Azure 中建立資源
5. 在 Teams 工具組警告提示中，選取 [ 布建]
6. 在 Teams 工具組資訊提示中，選 取 [檢視布建的資源 ] 以開啟新的瀏覽器視窗。

花點時間探索在 Azure 中建立的資源，並檢視 在 .env.local 檔案中建立的環境變數。

注意事項

當您關閉並重新開啟 Visual Studio 時，開發人員通道 URL 將會變更，而且將不再選取為作用中信道。 如果發生這種情況，您必須再次選取通道，並執行 準備Teams應用程式相依性 程式，以反映應用程式指令清單中更新的URL。

執行和偵錯

Teams 工具組使用多項目啟動配置檔。 若要執行專案，您必須在 Visual Studio 中啟用預覽功能。

在 Visual Studio 中：

1. 開啟 [ 工具] 功能表，然後選取 [ 選項...]
2. 在搜尋方塊中，輸入 多專案
3. 在 [ 環境] 底下，選取 [預覽功能]
4. 核取 [ 啟用多項目啟動配置檔 ] 旁的方塊，然後選取 [ 確定 ] 以儲存您的變更。

根據預設，Visual Studio 會使用您的主要Microsoft Edge 配置檔來開啟瀏覽器視窗。 如果您選擇在準備 Teams 應用程式相依性程式期間使用與您在主要配置檔中使用的帳戶不同的 Microsoft 365 帳戶，建議您將 Visual Studio 設定為啟動使用特定 Microsoft Edge 設定檔的瀏覽器視窗。 這可確保測試您的應用程式時，會使用正確的帳戶和Microsoft 365 租使用者。

若要將 Visual Studio 設定為使用特定的 Microsoft Edge 配置檔：

在 Microsoft Edge 中：

1. 切換至您要使用的設定檔，或 建立新的配置檔。
2. 流覽至 edge://version ，並記下 ProfilePath 值。 如果配置檔路徑是 C：\Users\user\AppData\Local\Microsoft\Edge\User Data\Profile1，則 配置檔 1 是配置檔的目錄名稱。
3. 複製設定檔的目錄名稱，例如 配置檔 1。

在 Visual Studio 中：

1. 在工具列上，選取 [ 開始 ] 按鈕旁的下拉式清單，選取 [ 瀏覽物件...]

2. 選取 [新增...]

3. 在 [ 新增程式] 對話框中，指定下列值：

   1. 程式：C：\Program Files (x86) \Microsoft\Edge\Application\msedge.exe
   2. 自變數：--profile-directory=“Profile 1”，將 Profile 1 取代為您想要使用的配置文件目錄名稱
   3. 易記名稱：Microsoft Edge (配置檔名稱) ，並將 [配置檔名稱 ] 取代為您要使用的設定檔名稱

4. 選取 [確定]

5. 選 取 [設定為預設值]，然後選取 [ 取消]

若要啟動偵錯會話，並在 Microsoft Teams 中安裝應用程式：

1. 按 F5 或從工具列選取 [開始 ]
2. 等候瀏覽器視窗開啟，且應用程式安裝對話框出現在 Microsoft Teams Web 用戶端中。 如果出現提示，請輸入您的Microsoft 365 帳戶認證。
3. 在應用程式安裝對話框中，選取 [ 新增]

若要測試訊息擴充功能：

1. 開啟新的或現有的Microsoft Teams 聊天
2. 在訊息撰寫區域中，選 + 取以開啟應用程式選擇器
3. 在應用程式清單中，選取 [Contoso 產品 ] 以開啟訊息擴充功能
4. 在文字框中，輸入 你好
5. 等候搜尋結果出現
6. 在結果清單中，選 取 [你好 ]，將卡片內嵌到撰寫消息框中

返回 Visual Studio，然後從工具列選取 [ 停止 ]，或按 Shift + F5 停止偵錯會話。