Azure Bot Serviceを使って Teamsにチャットボットを作成

# 背景
インターンでとあるサービスのFAQを作ってくれという課題を出された。

# 使用するもの
- [Teams](https://products.office.com/ja-jp/microsoft-teams/group-chat-software) (App Studioを入れておく)
- Microsoft Azure Portal (GUIでAzureを管理するツール)
- [QnAMaker](https://www.qnamaker.ai/) (リクエストに対して適切な返答をしてくれるデータ置き場)
- 返答データ(Excel、FAQサイトのURL)
- Bot Framework Emulator (ボットのテストツール、使用しなくても開発には支障なし)

# こんなものを作るよ

![iOS の画像.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/4acd9ab5-d57a-d5e2-b21f-2971cf57d9d6.jpeg)

# 概念 
手書きでごめんなさい。
![gainenn.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/56a6423a-5f89-69d2-18fe-c3118b4d3559.png)

1. ユーザーが **Teams** に質問を投げる
2. Teamsは **Bot Servise** に質問に合うものを探してくれる
3. BSが探すデータが**QnAMaker**に置いてあり、マッチしたものを返してくれる
4. データを伝搬し、Teamsがユーザーに回答する

それでは手順を解説

# Azure Portalでリソースを作成
## Azure Portalに接続

![resrc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/b78e6eac-530f-56cd-a181-e9aa63fb7430.png)

## リソースを作成したら**QnAMaker**と検索　「作成」を実行

![qna.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/13d22c27-de21-67db-fb2b-f195c9dcacd9.png)

## 作成したいアプリケーションの名前やリソースの置き場などを設定

![required.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/dd45104e-14b4-cd8c-b090-f295c125ba9b.png)

※ 価格レベル、Azure Searchの場所に注意してください。価格に関しては自明で、場所は通信速度が変化します。

# QnAMakerでデータの作成
ここでは実際にボットの核となる「会話」の部分を作成します

## [QnAMaker](https://www.qnamaker.ai)にアクセスし、「Create a knowledge base」を選択
黒いメニューの一番右
![KBDetail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/24eb2796-7200-bec8-1d4f-caf8c8e11dac.png)

※ Knowledge Base を以後「KB」と呼びます。長い。 

## KBの設定
STEP2より下を埋めていく

![CreateKB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/ebc8ec7b-5b2e-db95-5004-8cfbf3f02bda.png)




STEP4では用意したExeleデータやFAQのURLを添付

![Excel.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/778db133-33fb-0e32-a977-f3fa4a86fbb2.png)
Excelの場合はこんな感じで**Question**と**Answer**に分けたものを貼る

記入し終わったら **Create your KB**

## 作成したKBが動くかどうかテスト
作成したKB一覧
![IMG_0051.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/1c70c33f-62d7-1334-7a08-58b6b418689d.jpeg)

写真では３つあるんですが、初めて作った方は１つです。
とりあえずクリック

![KBDetail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/1ba3b5d4-7f7c-1a7f-37b0-80985c2be6fc.png)

**Context** **Question** **Answer** に添付したデータが反映されているはずです。
**Save and train** をし、**Test**します。

動作が確認できたら **Publish**、データを公開します。

![pub.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/9871b4bd-81d4-a768-c298-61ad1052c8b2.jpeg)

Publishするとこんな画面
黒く隠している部分にendpointkey等があるのでこのウィンドウは消さないでおきましょう。
API開発で使用する[Postman](https://www.postman.com/)とかでレスポンスデータを見れるっぽいです。(自分は使ってない)

## Create Botをクリック
画面はportalサイトの方に移ります


# Azure Bot Service の準備
## BotをAzureで展開するための設定

![BotService_prepare.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/a3cb2a06-6da5-9405-f352-2b587d018991.png)

作成に少し時間がかかると思います。

## BotとKBの連携確認
チャットでテストします。初期設定だと英語で何かしらの Welcome Message が送られてきます。
![chat_demo-black.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/f285e653-6eb7-d01c-c87b-ffefc8f8160f.jpeg)

添付したデータの通りに返信がきたらOK！
あとはTeamsとの接続のみ！

# Teamsに接続する
## チャンネルを開く
![portal_menu.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/0e1aa16a-8650-b87c-1392-e5c5dde1023d.png)

## Teamsのマークをクリック
![connect.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/840ddb3b-e5b1-123a-c58a-67f3c1b8e05b.png)

ポップアップが出てくるのでOKを選択、保存をする。


## TeamsのAppStudioを開く
**Create a new app** を選択
![IMG_0052.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/f704f2d7-6dfb-b3d0-623b-5a5e9838a200.jpeg)

必要事項を入力していく
## 既存のものを使用 (Use existing bot)を選択

![extention.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/ef815329-7542-d56a-e7a2-c9fbfa5ca62d.png)

プルダウンメニューで作成したアプリを選択
選択するとある程度の情報は自動で入力される。

**Test and distribute** の **install**をクリック、Teamsで実際に使えるようにする。

# 完成！！
お疲れ様でした！！！
# なんか通らなかった...って人へ

![miss.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520523/27aa057f-2d06-3c3e-3ce6-91fe719524eb.png)

こんな画面になってinstallが失敗したと言う方は**エラーの詳細・・・**をクリック
メモ帳などに貼り付け、確認してみてください。大体記入漏れ

# 補足
## 自分でコードをいじりたい時
Azure Portal ボット管理項目の**ビルド**を開くとソースコードがダウンロードできる。
編集したコードを反映させるには、zipにまとめてAzureにあげる必要がある。
Emulatorを使用して反映させずに確認することもできる。← ID、Pass必要

やり方は[こちら](https://docs.microsoft.com/ja-jp/azure/bot-service/bot-builder-deploy-az-cli?view=azure-bot-service-4.0&tabs=javascript)を参照してください。

## IDやパスワード忘れた
Azure Portalの**構成**を開くと確認できます。

# 終わり
App Studioでアプリ設定していると**「コマンド」**なるものがあったんですけど、これ使うと何ができるんだろう。

それでは！