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

背景

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

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

前提

• Node.js(v16.14.2）
• VSCode
• VSCode拡張機能で、Teams Toolkitをインストール
  
• 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の機能を担っているのか確認
に絞ってみた。

初期の段階で、以下のような構成になっており、
今回は赤枠に注目。

【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番台だと、エラー。
　　　

【5】Botへ問いかけてみる（ようやく！）

１）Type your messageのところに、「welcome」を入力し送信してみる
２）Botが機能していれば、【2】の2)で各自入力したコメントを返してくれるはず！
　　以下参考例

終わりに

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

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