How to make bots

on Microsoft Bot Framework

Shukhratbek Mamadaliev

/ShuhratBek

shuhratbek.26@gmail.com

EPAM, Senior Software Engineer

What is a Chat Bot?

Why Chat Bot?

THE EVOLUTION OF TECHNOLOGY

1980s

Desktop

1990s

INTERNET

Search
"Visits" on website

2000s

MOBILE

Social
Other apps to download from stores/markets

FUTURE

CONVERSATIONS

Natural Language between people and technology
Conversational canvas
Bots and agents

Conversational User Interfaces (CUI)

VOICE ASSISTANT

CHATBOTS

CUI - Voice Assistant

CONVERSATIONS

as a platform

DEVELOPERS

BUSINESS

The new canvas

The new opportunity

Where should I use it?

Icon made by Freepik from www.flaticon.com

Icon made by Freepik from www.flaticon.com

Order Pizza (Traditional)

Icon made by Freepik from www.flaticon.com

Order Pizza (Bot)

Handoff to human

An x-ray of a typical bot

Bot Builder - SDK V4

Stable release

Stable release

Preview release

Preview release

Bot Builder CLI tools

(stable release)

Bot Framework Emulator

Bot Framework webchat

<!DOCTYPE html>
<html>
 <body>
  <div id="webchat"></div>
  <script src="https://cdn.botframework.com
/botframework-webchat/latest/webchat.js"></script>
  <script>
   window.WebChat.renderWebChat(
    {
     directLine: window.WebChat.createDirectLine(
      {
       secret: 'YOUR_BOT_SECRET_FROM_AZURE_PORTAL'
      }
     )
    }, document.getElementById('webchat'));
  </script>
 </body>
</html>

botframework-webchat

Bot Framework webchat

React

import DirectLine from 'botframework-directlinejs';
import React from 'react';
import ReactWebChat from 'botframework-webchat';

export default class extends React.Component {
  constructor(props) {
    super(props);

    this.directLine = new DirectLine({ token: 'YOUR_BOT_SECRET' });
  }

  render() {
    return (
      <ReactWebChat directLine={ this.directLine } />
      element
    );
  }
}