Teams アプリ テスト ツールを使用して AI チャット ボットをデバッグする
Teams AI チャット ボット アプリMicrosoft Teamsアプリ開発を開始し、Teams アプリ テスト ツール (テスト ツール) を使用してデバッグします。 テスト ツールを使用すると、ボットベースのアプリのデバッグが簡単になります。 テスト ツールを使用するために、Microsoft 365 開発者アカウント、トンネリング、または Teams アプリとボットの登録は必要ありません。
ボットとチャットし、Teams に表示されるメッセージとアダプティブ カードを表示できます。 アクティビティ トリガーを使用して、テスト ツールでアクティビティをモックすることもできます。
注:
- Teams アプリ テスト ツールは、Teams Toolkit v5.4.0 でのみ使用できます。
- Teams アプリ テスト ツールは、デスクトップ クライアントと Web クライアントでのみサポートされます。
このステップ バイ ステップ ガイドは、Teams Toolkit を使用して AI チャット ボットを構築し、テスト ツールを使用してデバッグするのに役立ちます。 このガイドを完了すると、ユーザーが AI チャット ボットにアクセスして使用できる次の出力が表示されます。
前提条件
アプリをビルドして展開するための次のツールを必ずインストールしてください。
| インストール | 使用するには... |
|---|---|
| Visual Studio Code または Visual Studio | JavaScript、TypeScript、または C# ビルド環境。 最新バージョンを使用します。 |
| Teams ツールキット | アプリのプロジェクト スキャフォールディングを作成する Microsoft Visual Studio Code 拡張機能。 Teams Toolkit v5.4.0 を使用します。 詳細については、「 Teams Toolkit のインストール」を参照してください。 |
| Node.js | バックエンド JavaScript ランタイム環境。 詳細については、「 プロジェクトの種類Node.js バージョン互換性テーブル」を参照してください。 |
| OpenAI または Azure OpenAI | 最初に OpenAI API キーを作成して、OpenAI の GPT を使用します。 アプリをホストする場合、または Azure でリソースにアクセスする場合は、Azure OpenAI サービスを作成する必要があります。 |
| Microsoft Edge (推奨) または Google Chrome | 開発者ツールを備えたブラウザー。 |
AI チャット ボット アプリのプロジェクト ワークスペースを作成する
AI チャット ボット アプリを作成しましょう。
Teams アプリのボット機能により、チャットボットまたは会話型ボットが作成されます。 Web サービスと通信し、そのサービスの使用を容易にします。 ボットは、顧客サービスの提供など、シンプルで自動化されたタスクを実行できます。 天気予報、予約、または会話型ボットを使用して提供されるその他のサービスを取得できます。
これらのアプリを作成する準備が完了したら、AI チャット ボット アプリを作成するための新しい Teams プロジェクトを設定できます。 このチュートリアルでは以下を学習します。
ボット プロジェクト ワークスペースを作成する
前提条件が整っている場合、始めましょう。
Visual Studio Code を開きます。
Visual Studio Code アクティビティ バーの [Teams Toolkit
] アイコンを選択します。[ 新しいアプリの作成] を選択します。
![Teams Toolkit サイドバーの [Create New Project]\(新しいプロジェクトの作成\) リンクの場所を示すスクリーンショット。](assets/images/teams-toolkit-v2/create-project.png)
[ ボット] を選択します。
[ AI チャット ボット] を選択します。 ボットに別の機能が必要な場合は、必要なオプションを選択します。
[ JavaScript] を選択します。
[ 既定のフォルダー] を選択します。
既定の場所を変更するには、次の手順に従います。
[ 参照] を選択します。
![[場所の参照] オプションの選択を示すスクリーンショット。](assets/images/teams-toolkit-v2/first-bot/select-browse.png)
プロジェクト ワークスペースの場所を選択します。
[ フォルダーの選択] を選択します。
アプリに適した名前を入力し、 Enter キーを選択します。
ダイアログが表示されます。このフォルダー内のファイルの作成者を信頼するには、[はい] または [いいえ] を選択する必要があります。
これで、AI チャット ボット プロジェクト ワークスペースが正常に作成されました。
ボット アプリのソース コードのツアーを開始する
スキャフォールディングが完了したら、Visual Studio Code の [エクスプローラー ] セクションでプロジェクト のディレクトリとファイルを調べます。
| フォルダーまたはファイル名 | コンテンツ |
|---|---|
env/.env.testtool |
Git にコミットできる環境変数を含む構成ファイル。 |
env/.env.testtool.user |
既定では Git にコミットされていない資格情報を含む環境変数を含む構成ファイル。 |
appPackage |
アプリ マニフェスト テンプレート ファイルとアプリ アイコン (color.png と outline.png)。 |
appPackage/manifest.json |
ローカルおよびリモートの環境でアプリを実行するためのアプリ マニフェスト。 |
src/app.js |
AI チャット ボットのビジネス ロジックを処理します。 |
teamsapp.yml |
これは、Teams Toolkit プロジェクト ファイルのメインです。 プロジェクト ファイルには、プロパティと構成とステージの定義という 2 つの主要な要素が定義されています。 |
teamsapp.local.yml |
これにより、ローカル実行とデバッグを有効にするアクションで teamsapp.yml がオーバーライドされます。 |
teamsapp.testtool.yml |
これにより、テスト ツールでローカル実行とデバッグを有効にするアクションで teamsapp.yml がオーバーライドされます。 |
AI チャット ボット アプリを構築して実行する
Teams Toolkit を使用してプロジェクト ワークスペースを設定したら、AI チャット ボット プロジェクトをビルドします。
AI チャット ボットのオープン AI キーとエンドポイントを作成する
Azure ポータルに移動します。
[ リソースの作成] を 選択し、Azure Open AI を検索します。
[ Azure Open AI] を選択し、[ 作成] を選択します。
必要な詳細を入力し、[ 次へ] を選択します。
[ インターネットを含むすべてのネットワークがこのリソースにアクセスできます ] を選択し、[ 次へ] を選択します。
必要な詳細を入力し、[ 次へ] を選択します。
[作成] を選択します。
AI チャット ボットのキーとエンドポイントが正常に作成されました。
注:
また、OpenAI API キーを取得して、AI チャット ボットをデバッグすることもできます。 詳細については、「 API キーのセットアップ」を参照してください。
Azure Open AI キーとエンドポイントを取得する
[ リソースに移動] を選択します。
左側のウィンドウで [ キーとエンドポイント ] を選択し、[ キー ] と [ エンドポイント] をコピーします。 KEY 1 または KEY 2 をコピーできます。
キーとエンドポイントを保存して、さらに使用します。
左側のウィンドウで [ モデル デプロイ ] を選択し、[ デプロイの管理] を選択します。
[Azure Open AI Studio] ウィンドウが表示されます。
左側のウィンドウで [ デプロイ ] を選択し、[ + 新しいデプロイの作成] を選択します。
次の詳細を選択します。
- [モデルの選択] ドロップダウン リストから gpt-35-turboを選択 します。
注:
AI チャット ボットでは 、gpt-35-turbo モデルのみがサポートされています。
- [モデル バージョン] ドロップダウン リストから [0301 (既定値)] を選択します。
- 「デプロイ名」と入力し、[作成] を選択します。
- [モデルの選択] ドロップダウン リストから gpt-35-turboを選択 します。
さらに使用するために、 展開名 をコピーして保存します。
Azure Open AI キーとエンドポイントを更新する
Visual Studio Code でプロジェクトを開きます。
[エクスプローラー] で、env>.env.testtool.user ファイルに移動します。
SECRET_AZURE_OPENAI_API_KEYとSECRET_AZURE_OPENAI_ENDPOINTを入力します。
... SECRET_AZURE_OPENAI_API_KEY=<azure-openai-api-key> SECRET_AZURE_OPENAI_ENDPOINT=<azure-openai-endpoint>src>app.js ファイルに移動します。
OpenAIコードにコメントを付け、Azure OpenAIコードのコメントを解除します。azureDefaultDeploymentに Azure Open AI デプロイ名を入力します。... // Use OpenAI // apiKey: config.openAIKey, // defaultModel: "gpt-3.5-turbo", azureApiKey: config.azureOpenAIKey, azureDefaultDeployment: "gpt-35-turbo", azureEndpoint: config.azureOpenAIEndpoint, ...
AI チャット ボット アプリをデバッグして実行する
左側のウィンドウで、[ RUN and DEBUG]\(実行とデバッグ \) (Ctrl + Shift + D) を選択し、ドロップダウン リストから [ テスト ツール (プレビュー)] で [デバッグ ] を選択します。
テスト ツールは、Web ページで AI チャット ボットを開きます。
アクティビティ トリガー
アクティビティ トリガーを使用して、テスト ツールでアクティビティをモックできます。 アクティビティ トリガーには、次の 2 種類があります。
定義済みのアクティビティ トリガー
テスト ツールには、ボットの機能をテストするための定義済みのアクティビティ トリガーが用意されています。
| カテゴリ | アクティビティ | ハンドラー |
|---|---|---|
| インストール更新アクティビティをトリガーする | ボットをインストールする ボットをアンインストールする |
onInstallationUpdate onInstallationUpdateAdded onInstallationUpdate onInstallationUpdateRemove |
| 会話更新アクティビティをトリガーする | Add user ボットを追加 チャネルの追加 |
onMembersAdded onTeamsMembersAddedEvent onMembersAdded onTeamsMembersAddedEvent onTeamsChannelCreatedEvent |
| ユーザーを削除する ボットを削除する チャネルを削除 チームを削除する |
onMembersRemoved onTeamsMembersRemovedEvent onMembersRemoved onTeamsMembersRemovedEvent onTeamsChannelDeletedEvent onTeamsTeamDeletedEvent |
|
| チャネルの名前を変更する チームの名前を変更する |
onTeamsChannelRenamedEvent onTeamsTeamRenamedEvent |
注:
すべての種類のアクティビティは、すべてのスコープで使用できるわけではありません。 たとえば、個人用チャットやグループ チャットでチャネルを追加または削除することはできません。
定義済みのアクティビティ トリガーは、テスト ツールの [ アクティビティのモック ] メニューで使用できます。
ユーザーの追加アクティビティをモックするには、次の手順に従います。
テスト ツールで、[アクティビティのモック]>[ユーザーの追加] に移動します。
![[モック] アクティビティの下の [ユーザーの追加] オプションを示すスクリーンショット。](assets/images/teams-toolkit-v2/debug/add-user.png)
アクティビティ ハンドラーをプレビューするダイアログが表示されます。
[ アクティビティの送信] を選択します。
ボットは次の応答を送信します。
カスタム アクティビティ トリガー
カスタム アクティビティを使用して、ボット アプリの要件を満たすためにreactionsAddedなどのアクティビティ トリガーをカスタマイズできます。 テスト ツールは、アクティビティの必要なプロパティを自動的に設定します。 アクティビティの種類を変更し、さらにプロパティを追加することもできます。
[ Mock an Activity>Custom アクティビティ] を選択します。
typeプロパティでアクティビティをカスタマイズするには、messageReactionを追加します。{ "type": "messageReaction", "reactionsAdded": [ { "type": "like" } ], "replyToId": "d60fd1cb-3e8f-44ef-849c-404806ba1b47" }[ アクティビティの送信] を選択します。
ボットは応答で
onReactionsAddedハンドラーを送信します。
課題の完了
あなたはこのような出力を思いついたのですか?
おめでとうございます!
AI チャット ボット アプリが正常に作成されました。 これで、Teams アプリ テスト ツールで AI チャット ボット アプリをデバッグする方法を学習しました。
このセクションに問題がある場合 このセクションを改善できるよう、フィードバックをお送りください。
Platform Docs