React+FireBase+DirelogFlowでチャットBOTをつくる

XX予約システムにチャットBOTがあると
何かと便利かと思いお試しで
つくってみることにした。
今回はまずWeb/SPのみつくり,
MobileアプリとVRアプリは後日。

成果物

GitHub
https://github.com/fieldstone2000/simplechat

画面イメージ

画面イメージ

構成

構成

開発手順

1.DialogFlowの環境を用意する

qiita.com

このサイトを参考にそのまま環境を用意。
やったことは
・Agentをつくる
・Entityをつくる
・Intentをつくる
の3点。
Try It Nowで応答が変えることを確認。

2.ReactとFireBaseと環境を用意する

qiita.com

このサイトを参考に環境を構築。
バージョンは
node→v11.2.0
npm→6.8.0
でIDEはVSCodeを利用。

・node.js,npmのインストール
・Reactプロジェクト作成
・Reactプロジェクトの実行
・Firebaseのプロジェクト作成
・Firebaseの設定
・Firebaseへデプロイ
・MaterialUIのインストール
・コンポーネント作成
・チャットアプリ実行

ここまでやればチャットは行うことは可能。

3.ReactとDialogFlowとFireBaseをつなぐ

ここからチャットのBOT化を行う。
ReactとDialogFlowをつなぐところは
 

api-ai-javascript - npm

を利用。

チャットで入力したテキストを
以下の順番で処理する。
・FireBaseに送る
・DialogFlowに送る
・DialogFlowからレスポンスを受け取る
・レスポンスをFireBaseに送る

AppChat.jsより一部抜粋
---------------------------------------------
//Sendボタン実行時のイベント
onButtonClick() {
 if(this.state.user_name == "") {
 　alert('user_name empty')
 　return
 } else if(this.state.text == "") {
　alert('text empty')
　return
 }
 //firebaseにメッセージを登録する
 messagesRef.push({
 　"user_name" : this.state.user_name,
　"text" : this.state.text,
 })
 //dialogflowにメッセージを送信する
 const client = new ApiAiClient({accessToken: 'xxxx'})
　.textRequest(this.state.text).then((response) =>
 　{console.log(response);
 　//レスポンスをfirebaseに登録する。
　messagesRef.push({
　　"user_name" : "Bot",
　　"text" : response.result.fulfillment.speech,
 　})
 })
 .catch((error) =>
 　{console.log(error)})
}
---------------------------------------------
今回はここまで。