BUild a bot

PNWPHP 2017

Ian Littman / @iansltx

follow along at http://ian.im/botpnw17s

Our bot will

• Be accessed via a browser
• 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

Get Ready

You'll need...

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

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

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)

api.ai

• 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 api.ai wired Up

• api-ai/apiai-javascript-client is already included for you
• Here's what I did (see: implement-text-requests branch)
• Tips
  • Remember to set your API_AI_KEY env var
  • api.ai'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
  • api.ai 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/api-ai-bridge

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

This is the part where you need ngrok

Step 1: Set up the Web Hook

• Look at the readme for api-ai-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 api.ai are formatted Y-m-d

Step 2: Do something useful*

• composer require iansltx/pnwphp-2017-schedule-client
• 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.

THanks! Questions?

• http://ian.im/botpnw17s - these slides
• http://ian.im/botpnw17 - requirements doc
• https://joind.in/talk/b67a1 - joind.in
• https://twitter.com/iansltx - me!
• https://github.com/iansltx - my code!