Botを使ってみた（Node.js + Bot Framework Emulator）


## 背景
日々業務でスキルアップを目指す中、
Botに触れる機会がありつつも、その裏側に触れたことがなかった。

嬉しい事に最近、Botを学ぶ機会があったので、
復習もかねて、実施した事をアウトプットしてみる。

## 前提
* Node.js(v16.14.2）
* VSCode
* VSCode拡張機能で、Teams Toolkitをインストール
![スクリーンショット 2022-06-11 131558.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627323/e7d95e6a-c62f-cff5-57ff-541c3ae760ef.png)
* Bot Framework Emulatorをインストール
* サンプルのアプリケーションを作成（以下参照）
    1. VSCodeのTeamsToolkitで、「creat a new Teams app」を選択
    2. Capabiliiesで、「Bot」を選択
    3. Programming Languageで、「JavaScript」を選択
    4. 作成したい箇所のディレクトリを選択
    5. Application nameで、名前を入力し、Enterを押す

そうすると、5.で実施したApplicationでサンプルをコードごと作成される。
べ、、便利過ぎる。。。

## 手順
ここからが本題。

今回実施したい事は、細かなコードを読み書きするのではなく、
①とりあえず、Botの裏側に触れて、実行してみる（成功体験。笑　←大事！）
②どのあたりのコードがBotの機能を担っているのか確認
に絞ってみた。

初期の段階で、以下のような構成になっており、
今回は赤枠に注目。
![スクリーンショット 2022-06-11 133452.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627323/fa39d962-bc04-b22c-06ca-03add6eb3d2b.png)

### 【1】まずはbotディレクトリの中にある、package.jsonに注目
現時点では、このままでは使用できない。
理由としては、TeamsToolkitにてアプリ作成時に足りていないものがあるからだ。
具体的には、以下を手動でインストールする必要がある。
```package.json
{
 "dependencies": {
    "@microsoft/adaptivecards-tools": "^1.0.0",
    "botbuilder": "~4.14.0",
    "botbuilder-dialogs": "~4.14.0",
    "isomorphic-fetch": "^3.0.0",
    "restify": "~8.5.1"
  }
}
```
１）`cd bot`でbotディレクトリに移動
　　（上記package.jsonと同じ階層へ移動）
２）`npm install`実施
　　（package.jsonのdependenciesに載っているbotbuilder等をインストールしてくれる）

### 【2】teamsBot.jsを一部修正
teamsBot.jsのコードを一部抜粋
```teamsBot.js
// Trigger command by IM text
switch (txt) {
  case "welcome": {
    // const card = cardTools.AdaptiveCards.declareWithoutData(rawWelcomeCard).render();
    await context.sendActivity("コードに触れてる時が楽しい～！");
    break;
  }
  case "learn": {
    this.likeCountObj.likeCount = 0;
    const card = cardTools.AdaptiveCards.declare(rawLearnCard).render(this.likeCountObj);
    await context.sendActivity({ attachments: [CardFactory.adaptiveCard(card)] });
    break;
  }
}
```
ここで、まず理解すべき点は、
「welcome」とBotに問いかけると、context.endActivityの中の文書を返してくれる事。
「learn」と問いかけると、adaptiveCardを返してくれるようだ。
→ただ、このあと使用するBotFrameworkEmulatorはadaptiveCardに対応していないようだ。

１）`case "welcome"`の中の、`const card`の行をコメントアウトする。
　　（今回は使用しないため）
２）次の行の`await context.sendActivity("***")`の*箇所に自由にコメントしてみる
　　→例："コードに触れてる時が楽しい～！"

### 【3】Botを起動させる
１）VSCodeで、ターミナルを開く
２）botディレクトリの中で、package.jsonと同じ階層へ移動
３）npm run start　を実行する
　　→なお、package.jsonの中の、scriptsを参照すると、
　　　`"start": "node ./index.js"`と記載がある。
　　　今回の場合、これは、npm runでindex.jsを起動させることを意味する。
４）ターミナルに以下が表示されたら、Botが起動中である事がわかる
　　`Bot started, restify listening to http://[::]:3978`

### 【4】Bot Framework Emulatorを起動させる
１）Bot Framework Emulatorを起動し、Open Botを選択
２）BotのURLを入力し、Connectをクリックする
　　→今回の場合、http://localhost:3978/api/messages
　　　このアドレスは、index.jsの以下あたりで読み取れる（以下一部のコードを抜粋）
```index.js
// Create HTTP server.
const server = restify.createServer();
server.listen(process.env.port || process.env.PORT || 3978, function () {
  console.log(`\nBot started, ${server.name} listening to ${server.url}`);
});

// Listen for incoming requests.
server.post("/api/messages", async (req, res) => {
  await adapter.processActivity(req, res, async (context) => {
    await bot.run(context);
  });
});
```
localhostの3978ポートで、api/messagesでリッスンしている？状態？

３）問題なく起動したら、Live Chatのタブが開かれる
　　※以下キャプチャの通り、POSTが200番台である事を確認する事。
　　　400番台だと、エラー。
　　　![スクリーンショット 2022-06-12 000713.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627323/1640d4f9-dffa-80a4-6781-55260abd94db.png)


### 【5】Botへ問いかけてみる（ようやく！）
１）Type your messageのところに、「welcome」を入力し送信してみる
２）Botが機能していれば、【2】の2)で各自入力したコメントを返してくれるはず！
　　以下参考例
![スクリーンショット 2022-06-12 001206.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2627323/75049a90-d126-c5bc-36da-047c1613ecb3.png)

### 終わりに
1時間ほどで、上記のとおりBotの裏側を覗いて、機能させることができた。
この成功体験は個人的に非常にインパクトが大きく、良い経験ができたと感じている。

とりあえず、こういった成功体験は非常に楽しい！！
以上です♪