React chatbotアプリ作成

Reactで面白そうなアプリ作れないかな？？と思い考えていたのですが、、、

Chatbotとか作れたら面白そうだな！！

と思いたち早速作成することにしました。

React Chatbotで調べてみたところ、
react-simple-chatbot
というライブラリを用いると簡単に作れそうなことを発見。

実際に使ってみたので、その結果を報告します！！

実際に作成したchatbotはこんな感じです。

今回作成した部分はメッセージのやり取りだけで、デザインはreact-simple-chatbot自体のデフォルトを用いております。

まずはreact-simple-chatbotライブラリのインストール手順から。

と言ってもこちらを実行してライブラリインストールすればOK！！

npm install react-simple-chatbot

こちらが公式で公開されているコードです。

<ChatBot
  steps={[
    {
      id: '1',
      message: 'What is your name?',
      trigger: '2',
    },
    {
      id: '2',
      user: true,
      trigger: '3',
    },
    {
      id: '3',
      message: 'Hi {previousValue}, nice to meet you!',
      end: true,
    },
  ]}
/>

こちらをReactに組み込むために、chatbot.jsファイルを作成し、
こちらのように実装。

import React, { Component } from 'react';
import ChatBot from 'react-simple-chatbot';

export default class chatbot extends Component  {

    render() {
        var msg = "";
        return (<ChatBot
            steps={[
              {
                id: '1',
                message: 'What is your name?',
                trigger: '2',
              },
              {
                id: '2',
                user: true,
                trigger: '3',
              },
              {
                id: '3',
                message: 'Hi {previousValue}, nice to meet you!',
                end: true,
              },
            ]}
          />
    )}
}

そして、index.jsに対して

ReactDOM.render(
  <React.StrictMode>
    <Chatbot />
  </React.StrictMode>,
  document.getElementById('root')
);

というように実装してこちらを実行すれば

npm start

こちらのような名前を尋ねるchatbot画面が表示されます。

チャットボットのやり取りですが、
　・id変数：1番からの実行順(1以降はtrigger変数に設定されたidが実行)
　・message変数：記載されたメッセージが出力
　・trigger変数：設定されたidが次に実行される
で定義されております。

また、message変数をやり取りした内容により切り替えたい場合にはこちらのように関数化すればよいです。

message: ()=>{
    const {name} = this.state;
    const {ID} = this.state;
    var ret = 'こちらで登録します   名前：' + name + '    ID：' + ID;
    return ret;
}

入力された値を判定したり、処理したり、変数をメンバ変数に格納したりする場合にはこちらのvalidatorを用いればよいです。

validator:(value) => {
    this.setState({
        ID: value
    });
    return true;
},

別関数実行したい場合もvalidatorやmessageを関数化してその中で実行すればよいです。

validator:(value) => {
    var ret = this.renderText(value);
    if(ret){
        flg=1;
        console.log("test is ",test);
        return true;
    }else{
        flg=0;
        console.log("test is ",test);
        return true;
    }
},

これらの処理を組み合わせてtriggerとidにより処理順を決めていけばchatbotが作れるようになります。

最後に、、、
こちらに作成したソースコードを格納しました！！
https://github.com/Elsammit/chatbot.git

今回は実施しませんでしたが、
前回のサーバサイドとの通信方法を用いれば、ユーザが入力した内容に応じて
　・サーバへデータを書き込み
　・サーバからデータを読み出し
ができるようになるかと思います。

もっと面白もの、便利なもの、を作成したいな！！と思うのですが、、、
思いつかない。。。泣

面白そうなネタ探してみたいと思います！！