BOT UIを使ってBOTを作成する


BOT UIとは

BOTを簡単に作れるJavaScriptフレームワーク。
2019年1月にやってみたことを書いていきます。

ドキュメント:docs.botui.org/index.html

https://examples.botui.org/

Git

HTML

<div class="botui-app-container" id="botui-app">
<bot-ui></bot-ui>
</div>

js

Gitから抜粋

var botui = new BotUI('botui-app') // id of container

botui.message.bot({ // show first message
  delay: 200,
  content: 'hello'
}).then(() => {
  return botui.message.bot({ // second one
    delay: 1000, // wait 1 sec.
    content: 'how are you?'
  })
}).then(() => {
  return botui.action.button({ // let user do something
    delay: 1000,
    action: [
      {
        text: 'Good',
        value: 'good'
      },
      {
        text: 'Really Good',
        value: 'really_good'
      }
    ]
  })
}).then(res => {
  return botui.message.bot({
    delay: 1000,
    content: `You are feeling ${res.text}!`
  })
})

ひっかかったところ

  • 最新のVue.jsだと動かなかった
    <script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>

  • fontawesomeはv4のアイコンから選ぶ。