練習 - 建置 Microsoft Teams 索引標籤應用程式

已完成

在此單元中，您將使用適用於 Visual Studio Code 的 Teams 工具組擴充功能來建立 Microsoft Teams 的索引卷標應用程式。

注意事項

本課程模組中的練習使用Teams Toolkit v5.0.0。

建立 Teams 索引標籤應用程式

1. 開啟 Visual Studio Code。

2. 在提要欄位上，選取 [Microsoft Teams ] 圖示以開啟 [TEAMS 工具組] 面板。

3. 選 取 [建立新的應用程式]，然後選取 [ 索引標籤]。

   

4. 從可用選項清單中選取 [基本索引 標籤 ]。

   

5. 針對程式設計語言，選取 [JavaScript]。

6. 在 [ 工作區] 資料夾選單上 ，選取 [ 預設資料夾]。 Teams 工具組會將專案 Scaffold 到此資料夾。

7. 針對 [應用程式名稱]，輸入 CustomerTicketingTool。

   

   當所有資料夾和檔案都已成功建構時，就會出現通知。

在成功建構項目之後，Visual Studio Code 的新實例會開啟至新專案。

在 [總管] 面板上， src 資料夾包含您應用程式的原始程式碼。 src 資料夾下的所有資料夾都是瀏覽器程式代碼專用的資料夾，並作為前端應用程式的進入點。 src 資料夾外部的檔案與伺服器相關，例如 Bot。

測試和偵錯 Teams 索引標籤應用程式

1. 在 Visual Studio Code 中，選取 Microsoft Teams 圖示以開啟 TEAMS TOOLKIT 面板。

   

   這裡有多個區段。 針對您的索引標籤進行偵錯，您將專注於 [ 帳戶 ] 和 [ 環境 ] 區段。

2. 在 [ 帳戶] 區段中，選取 [登入 Azure]。 在開啟的對話框中，選取 [ 登入 ] 按鈕，然後輸入您的 Microsoft 365 認證。

   Teams 工具組需要具有全域管理員許可權的 Microsoft 365 公司或學校帳戶。

3. 使用下列其中一種方法，開始使用附加的調試程式來執行您的應用程式：

   • 選取 F5 鍵。
   • 在 Visual Studio Code 中，選取 [ 執行>開始偵錯]。
   • 在 Teams 工具組的 [ 環境 ] 區段中，開啟 本 機資料夾，然後選取您選擇的瀏覽器。

4. Visual Studio Code 執行一些檢查之後，在 [控制台 ] 索引卷標上可檢視動作時，會開啟新的瀏覽器視窗。 在 [ CustomerTicketingTool] 對話框中，選取 [ 新增 ] 按鈕以在 Teams 中安裝應用程式以進行預覽。

   

   CustomerTicketingTool 應用程式現在可以在提要字段上檢視。 應用程式已預先設定兩個索引標籤： [個人] 索引卷標 和 [ 關於]。

   

您已成功將個人索引標籤新增至 Teams。

自訂 Teams 索引標籤

現在，您可以自定義個人索引標籤上的文字。

1. 開啟 src>views 資料夾，然後開啟 hello.html 檔案。
2. 搜尋 Hello， World 文字， 並將其變更為 [恭喜]。

若要檢視Teams上的變更，請返回調試程式會話執行所在的瀏覽器。 您不需要重新整理瀏覽器，即可查看您對程式代碼所做的變更。 您個人索引標籤上的文字現在會顯示 [恭喜]。

適用於 Visual Studio Code 的 Teams 工具組提供熱重載功能，可在應用程式仍在執行時套用您的變更。