Creating Bot Using Azure Framework Composer

Okay, so to start with a bit of introduction about myself

Yeah, hi there. This is Kuljod Singh Bakshi, first year undergrad at IIT Bombay

and the Department of Environmental Science and Engineering. Okay, so now coming to the topic of a tutorial

the topic is Bot creation using Azure Bot Framework Composer. Now, let us look at the various ways to create a bot

They are two so basically there are two ways to create a board using Microsoft Azure offering

The first one is the board framework composer and the second work is the board framework SDK

Now what we are going to look in this tutorial is the board framework composer

So there are some very basic differences between both of these that is the board framework composer

and the Bot Framework SDK. And to start with, the first difference is that Bot Framework Composer

uses graphical user interface and a tad bit of coding. That means to create a bot using the Bot Framework Composer

you need not be a master at coding. Rather, if you have an idea in mind

you can just simply create a bot with that idea using graphical user interface

And now coming to the Bot Framework SDK, The board framework SDK contains all the libraries required to build a board and make it function efficiently and it lays a lot of emphasis on coding

so if you are a master at coding or I mean prefer to

Use coding as the main framework for create for the creation of a board

When you are good to go with the board framework SDK Now the second difference is BOT Framework Composer supports node.js and C sharp language

and on the other hand BOT Framework SDK is available for C sharp, Java, JavaScript, TypeScript

and Python language. Now coming to the flow of dialogues. So the first question is what exactly are dialogues

Now when we create a bot using the bot framework composer, dialogues are the most important part of your workspace area

Dialogues are used to enhance the flow of the bot. Dialogues basically tell the bot what activity to start

So dialogues are triggered by something called as triggers. And as the name suggests, triggers are used to start a particular dialogue whenever an

intent is detected. Let's say you want to know what the weather of a city is

So when you tell the bot, when you type the sentence as in telling the bot, tell me the

weather of London. So using a conversational language understanding model, the board recognizes your intent

that is to know the weather of London. And then after recognizing that intent

the board triggers the flow of dialogues that basically let you know the weather

what the weather of London is like at that particular time. I know this concept of dialogues and triggers can be a little hard to grasp at first, but

as you move forward into the tutorial, you will sort of get familiar with the flow of

dialogues and triggers. You can club your knowledge base and conversation language understanding model with your bot

to enhance it to utterances, phrases and intense, etc. I completely get it that the concept of triggers and dialogues can be a little difficult to

solve at first. I completely get it that it can be a little difficult to grasp at first, but I would like

to let you know as we move forward with the tutorial as we move on with that tutorial

you will surely get familiar with the concept of dialogues and triggers

Yeah, so the next point is you can always club your knowledge base and conversation language understanding model with the robot to enhance it detect

references phrases intense, etc. And if you don't know about knowledge be about what our knowledge base and conversation language understanding model

So I have made a video on these two also. So at the end of the write-up

I'll be pasting a link to these articles too. And in the end, it's a never-ending series

of updating your knowledge base and consequently refining it. So it's like the more defined data

that you feed your bot with, the more efficiently the bot works

on detecting the intents and basically then triggering the flow of dialogues accordingly

Okay, so that's this slide is just a graphical representation of what a simple dialogue trigger

looks like. So, let's say you have made a bot for a pizza delivery company

So as soon as you go to the main screen, the bot asks you to move ahead with your choices

of selecting a pizza. Then you move on to the select pizza screen where you select your pizza with your choices

of toppings, whether you want to add cheese or not, whether you want your crust to be

hand tossed or let's say you want a thin crust pizza, you put in all of these values and then

move on to your checkout screen where you make your payment your delivery

address and then you are good to go so as soon as the main screen starts the

board welcomes you and then it it it triggers a dialogue which takes you to

the select pizza screen and as soon as you make your choices of toppings

pizzas and stuff like that the board then triggers a dialogue which takes you

to the checkout screen so dialogues are nothing but the board making you flow

through everything yeah so this screen is nothing but an enhanced version of what we discussed in

the previous screen so just take your time take five to ten minutes have a look at the slide like

and question yourself again and again what is a dialogue and then you'll be good to go

okay so now moving on to the next slide on this slide we have something which is called an adaptive flow so then again adaptive flow is a

Very important concept and this can be used to create complex bot systems

And as the name suggests that this refers to the ability of the board to switch to dialogues depending upon the detected intent

order trends So this slide is again a graphical representation of what an adaptive flow looks like

So let's say you created the bot for a pizza ordering company and then on the checkout screen

you place your order of one medium pepperoni size, one medium size pepperoni pizza

And as soon as you go to the checkout screen, you remember I had to order another pizza

So you type in add another pizza and then through adaptive flow, the bot takes you to

the pizza ordering site again. So basically the conventional way would have been the bot would have taken you to the checkout

option then you would have made your payment and then again you would have

started the process all over again of ordering another pizza if adaptive flow

wouldn't have been used in the board now with adaptive flow what you do is if you

want to add another pizza you tell the port I want to add another pizza the

bot then takes you to the pizza ordering section again and without placing another order the cart

automatically gets updated so this is basically what adaptive flow is in a nutshell i know this

concept again is very hard to describe in works but then again as we move on with the tutorial

You will get to know what is what basically adaptive flow Actually is okay, so we are done with the theory part of the tutorial now we

Are good to go with the practical part of the tutorial So the first step would be to open what framework composer in your screen

Wait for some time now the next step would be to click on create new option

I am comfortable in C sharp language, so I'll be using C sharp for this tutorial

You if you are comfortable with note or Js you can go with note or Js

But this tutorial as of now will be covered in C sharp language

Now click we'll be selecting empty bought empty bought from here click on next

Let's name our bought as a aq i bottom runtime type is as your web app location is okay click on create okay so our

bot has finally been created up I know you must be they will be buildered by

the fact that I named my bot as aq i bought up so to tell you what we are

going to cover in the tutorial is we are going to make a bot which is gonna output the aqi value

of a location and to sum things up it will also output values such as co concentration and into

concentration so2 so3 concentration and stuff like that and for the creation of this bot we

We will be taking the data from open weather organizations API and yeah

So moving ahead with the tutorial to give you a look at what the dashboard looks like

Here is what our main work is going to take place in

So this is the area where the board reads a user. So as soon as the as the board starts turn dot activity dot members added method is triggered

and through dialogue flow the board sends a response as in welcome to your board

obviously depending upon your choice you can obviously always change what response the board will send in the form of greeting okay

so now let us add a new dialogue click on this eq i bought and three columns

stuff click on add a dialogue let us name this dialogue as get city and

description would be getting the location of city the user is

and send about so click on this add option click on ask a question click on text

and from this area click on show code now write this code in your computer as

as well activity text is equal to enter your city

now we want a variable to store the input of the user so to do this click on user input

And now in this property area, name your variable. So, I am naming my variable as dialog.city. Okay

Now, so what we are going to do here is, we are going to take an input from the user in

which he tells us the city of the city of whose weather he wants to know about and then

through the open weather API we get the long longitude and latitude values of the city and

then from the longitude and latitude values of the city we use the open weather's API

extract the AQI value of the city and the various concentrations of CO NO2 SO2 SO3

and stuff like that so to know about the open withers API go to open

weather map open visual map API documentation for a QI value

So this is the API documentation for getting the AQI value using the using open weather's data

So, yeah. So, what we do here is we throw a HTTP call for with the values of latitude and longitude

inputted into this URL and when the open APIs, when the open weather server receives that

HTTP request it sends a JSON formatted data output and from that JSON formatted

data output we extract the aqa values and the various and the values of the

various concentrations of various gases so to know the latitude and longitude of

the city that we're concerned about yeah so to know the value of longitude and

latitude of a city we have a geocoding API from open weather in which we make a HTTP call with the

city name and the API ID to get the respective longitude and latitude value of the city that

the user is concerned about okay so yeah now back to our board framework composer we click on this

add button we click on access external resources send an HTTP request

and first and foremost we we go to our account my API keys

and so that's the default key and this is the new key that I generated this

morning so I'll be using this new key copy this key paste it in note that

Okay, now back to the geocoding API

Click on this, paste it in the notepad again

So city name would basically be dialog.city, limit would as such be save 5 and API key

would be this. Copy this. http method would we get because we want to get the json formatted data from the

dataset of open weather organization we paste the url here and click the response type to json

now click on this ad manage properties set properties click on add new and so basically we want to set the properties of lot longitude and

latitude in form of two different variables so the first property would be okay so wait a minute

Here, we have to go to result property and store this JSON formatted data in form of

a variable again. So I named the variable dialogue.apiResponse. Go to set properties, click on add new

My property name would be dialog.longitude and the value would be

So this is what an API response of HTTP GET method looks like

So to know the longitude and latitude, the command would simply look like, yeah, the

command would simply look like dialog.apiResponse.content because it is a JSON formatted data

data output dot lon yeah lon here

it is and paste it here now creating variable again for storing the value of latitude

dialog.latitude is equal to dialog.apiResponse.content.lat

Okay, so now when I have the longitude and the latitude values of the city that the user

is concerned about, I can simply make a http get method API request call to get the values

of the aq index of the city and the values of the various concentration of various gases

that is observed for that particular city so now i add click on add again click on

access external resources send an http request http method would be get now url i will have to

look the API documentation again for getting the URL okay so the API call

looks something like this first you go to notepad paste the API call URL here

latitude would be and API key would again be the same thing as before

Copy this API key and simply paste it in front of API ID

Now copy this API call URL and paste it here. Now again this HTTP GET method is gone is gonna throw a

JSON formatted data output and to show that output I need to assign a variable again

So my variable name could be dialogue dot API final Response

And response type could obviously be JSON click on add click on manage properties click on set properties

now I want to set properties for the aqi index value and the concentration of let's say carbon

monoxide gas. So click on add new. I would name this property as dialog dot aqivalue

Okay so now I would have to look at the API response here

So the API response, sorry, the API response looks something like this

So, to access the aq value, I would have to go into this list array and then from this

main semicolon area, I would have to access the aq value. So, my command for accessing the aq value would look something like dialogue.apf

API final response.content because it's JSON file.content.list0.main.aqi

Click this and paste it here

Click on add new and let's say I would name this variable as dialog.coConcentration

Now for accessing the CO concentration, my command would look something like dialog.api finalresponse.content.list1.components.co

co yep that is it now copy this and paste here

now the only thing left is to display the AQI value and the co concentration on

the monitor to the user and to do this I would simply click on send response go to show code

and write this code as well text is equal to the aqi value is

a dialogue dot aq value and the carbon

monoxide the only thing left is to start the board so simply click on start a board

click on allow access open the chat Oh yeah, so yeah, basically we forgot to go to the greeting section and add a command

which starts the dialogue which is named as getCp. So to do this click on add here and click on go to dialogue management, begin a new

dialogue and from this area here get select the dialogue that you want to begin

So I have selected get city dialogue here. So restarting the bot again click on restart bot

You can open the chat. City of interest is London

Don't know why the bot isn't replying

Let's restart a conversation. Type in London again. Yeah, so here it is

The AQI value for London is 1 and the CO concentration is 247

According to the API data returned by the OpenWeatherMap organization

So that's pretty much it for the tutorial. We are done for today

Thank you and have a nice day ahead