BUild a bot

php[world] 2017

Ian Littman / @iansltx

follow along at https://ian.im/botworld17s

join the #build-a-bot-workshop Slack channel

NOTE: this isn't an Alexa Skill talk

See VoiceHacks tutorials for that

We aren't building bots for Siri, Slack, or Facebook either.

If you want to do that, you're probably looking for botman.

Our bot will

• Be accessed via a browser (initially, anyway)
• Accept text and speech input
• Respond with text and speech
• Recognize various phrasings of a question
• Pull information from a web hook we set up
• Remember context from previous questions
• Integrate with Google Assistant

Get Ready

You'll need...

• Google Chrome
• Docker or PHP 7.1
• An ngrok (ngrok.com) account
• A Dialogflow api.ai account (a Google product)

Requirements Gist at http://ian.im/botworld17

Pieces of a Bot

UI (web, chat, voice)

Natural Language Understanding

Data Sources (web hooks)

Pieces of a Bot

UI (web, chat, voice)

Natural Language Understanding

Data Sources (web hooks)

DIalogflow

• Intents
• Utterances
• Entities
• Slots + Parameters
• Actions
• Contexts
• Fulfillment

Pieces of a Bot

UI (web, chat, voice)

Natural Language Understanding

Data Sources (web hooks)

git clone iansltx/build-a-bot*

composer install

git checkout initial-setup

* You probably want to fork my repo

JS Judgment-free zone starts now

Step 1: Get Dialogflow wired Up

• dialogflow/dialogflow-javascript-client is already included
• Here's what I did (see: implement-text-requests branch)
• Tips
  • Remember to set your API_AI_KEY env var
  • Dialogflow's docs will help decipher their response format
  • You can use a .then() after a .catch() to loosely simulate "finally" in a promise

Step 2: Speak your response

• window.speechSynthesis
• Here's what I did (see: add-speech-synthesis branch)
• Tips
  • Dialogflow may send different responses for speech and text
  • An utterance has a .voice property
  • speechSynthesis has a .getVoices() method
  • Check this example, and the code behind it, though it may not work until you try this other example

Step 3: Add Voice Recognition

• SpeechRecognition
  • Chrome only; uses Google Cloud Speech
  • Easy wrapper: annyang
• Here's what I did (see: add-voice-recognition branch)
• Tips
  • You can use "*text" to map all recognition input to one function (param name "text") in annyang
  • annyang will keep listening until you tell it not to

Pieces of a Bot

UI (web, chat, voice)

Natural Language Understanding

Data Sources (web hooks)

composer require iansltx/dialogflow-bridge

This is the part where you need ngrok

Step 1: Set up the Web Hook

• Look at the readme for dialogflow-bridge
• Here's what I did (see add-web-hook branch)
  • Add the route, the library, and a fallback handler
  • Add a handler for "schedule"
• Tips
  • ngrok shows request payloads at localhost:4040
  • Dates from Dialogflow are formatted Y-m-d

Step 2: Do something useful*

• composer require iansltx/joind-in-client

  • You'll need to set minimum-stability to dev here...

  • ...and you may want to add prefer-stable: true

• Use classes, rather than callables, to  handle actions
• Here's what I did

* No special bot fairy dust here

Step 3: Add some context

• $question->getContextParam($contextName, $paramName)
• $answer->setContext($name, $params, $lifetime)
• Here's what I did
• Look ma, no database!

Bot Built. Boom.

integrate with Google Assistant

THanks! Questions?

• https://ian.im/botworld17s - these slides
• https://ian.im/botworld17 - requirements doc
• https://joind.in/talk/a03a8 - joind.in
• https://twitter.com/iansltx - me!
• https://github.com/iansltx - my code!
• https://longhornphp.com - another conference