First published on MSDN on Apr 22, 2018
Here are the simplified steps to start developing
Azure Bot Function
. In this blog post we will create a test bot that talks to
LUIS
and
QnA Maker
. LUIS will help us understand user’s natural language. QnA Maker will help us answer user’s frequently asked questions.
In this sample Bot, we will convert temperature from Fahrenheit to Celsius. We will use
LUIS
to understand user intent and extract temperature value and unit information. We will use
QnA Maker
to answer user questions on temperature conversion.
Here is link to add this test Bot to your Skype and Microsoft Teams and play with web chat
https://wabacbotweb.azurewebsites.net/
Trying typing
80 f to c
in the chat window
Here are high level steps :
-
Create a Bot Function App
-
Test Bot
-
Add current time to this Bot App
-
Create a LUIS App
-
Add LUIS as Dialog in Bot Function App
-
Test Bot for LUIS commands
-
Add this Bot to a website
-
Add this Bot to Skype
-
Add this Bot to Microsoft Teams
Step 1 : Create a
Bot Function App
-
Log into
Azure Portal
-
Click on “Create a resource” on the top left navbar
-
Type Bot in search box
-
Click on the “Functions Bot”
-
Click on Create button
-
Click Create button
Step 2 : Test this Bot
-
In the Azure Portal, click on the
Bot Services
from the left navbar
-
If the
Bot Service
is missing , click on the
All Services,
search for Bot and click on the star icon as shown below
-
Now, click on the newly created Bot
-
In the next blade, click on the
Test in Web Chat
-
Type Hello in the chat window as shown below
-
Our test bot will reply with text “
1: You said hello
”
-
“
1
” in the reply is count of messages it got from user in that session
-
if you type hello again, you should see “
2: You said hello
” as shown below
Step 3 : Lets add current time to Bot
-
Click
Build
-
Click
Open this bot in Azure Functions
as shown below
-
This will open
Azure Function
blade. Here you can edit your Bot code and settings
-
Click on the
messages
Function, this should open your Bot source code
-
Check line # 48, here we are calling
EchoDialog
if there is a message from user
-
Lets check
EchoDialog
class code
-
Click on the
View files
on the right navbar and select
EchoDialog.csx
file as shown
-
Add below code
[code language="csharp" highlight="1,2,3,4,5"]
else if (message.Text == "time")
{
await context.PostAsync($"{this.count++}: current time is {DateTime.Now}");
context.Wait(MessageReceivedAsync);
}
else
{
await context.PostAsync($"{this.count++}: You said {message.Text}");
context.Wait(MessageReceivedAsync);
}
[/code]
-
Here is the complete function code
-
Now we are going to test it in the
Web Chat
-
Open a new browser window, go to Azure Portal, click
Bot Service
, click on your
Bot Function
, click on
Test in Web Chat
-
In the chat window, type
time
. You should now see the current time as shown below
Step 4 : Create LUIS App
-
Open a new browse window and go to
LUIS portal (luis.ai)
-
Click on
Login/Sign Up
button, login using your Microsoft Account
-
Now, click on the "
Create New App
” button as shown below
-
Enter a app name and description as shown below and click on the done button
-
-
Next, we are going to add
Entities
to capture temperature data from user’s messages
-
We have three variables to capture :
-
Temperature Value
-
Current Temperature Unit
(Fahrenheit or Celsius)
-
Temperature Unit to convert
-
Lets create these three entities in LUIS
-
Click on the
Entities
on the left navbar and click on
Create new entity
as shown below
-
In the new Entity dialog box type a name and set the type to simple as shown below
-
-
Create two more, one for
TemperatureUnitTo
and
TemperatureValue
as shown
-
-
Next, we need to create Intents. At this time there will be only one intent : convert temperature between units
-
-
Now, let train LUIS by providing few sample sentences
-
Convert 100 f to c
-
Convert 100 c to f
-
Change 100 f to c
-
Change 100 c to f
-
What is 100 c in f
-
What is 100 f in c
-
100 f in c
-
100 c in f
-
Here is the screenshot
-
-
For each of this sample sentences, tell LUIS which is
TemperatureValue
,
TemperatureUnitFrom
and
TemperatureUnitTo
-
Convert 100 f to c
-
100 is
TemperatureValue
-
f is
TemperatureUnitFrom
-
c is
TemperatureUnitTo
-
Here is the screenshot
-
-
Now, lets build LUIS and test it
-
In the top menu, click on the
Train
button
-
Next, click on the
Test
button. In the test textbox type “75 f to c” and hit enter, click on the
inspect
as shown
-
check the entities values
-
-
Now lets publish this LUIS service, click on the publish menu item and click on “publish to production slot” as shown
-
-
Once published, you should see the keys available below as shown
-
-
Copy these keys, we need them in the next step
Step 5 : Add LUIS as Dialog to Bot
-
Go back to Azure portal, navigate to Bot services, click on the
Build
and click on the “
Open this bot in Azure Functions
”
-
Add a new file and name it as TemperatureLuisDialog.csx
-
Add this below code
-
Add the LUIS key in
Line # 10
-
Note in
line # 37,41 and 45
, we are using LUIS API to get our temperature value and units
-
[code language="csharp" highlight="10,37,41,45"]
using System;
using System.Threading.Tasks;
using Microsoft.Bot.Builder.Dialogs;
using Microsoft.Bot.Builder.Luis;
using Microsoft.Bot.Builder.Luis.Models;
using Microsoft.Bot.Connector;
using System.Threading;
[Serializable]
[LuisModel("54201f7e-4b88-4686-841c-5f47364eb875", "737bf507949b4bada390bf914b41176d")]
public class TemperatureLuisDialog : LuisDialog<object>
{
// Name of entity
public const string Entity_TemperatureUnitTo = "TemperatureUnitTo"; // fahrenheit";
public const string Entity_TemperatureUnitFrom = "TemperatureUnitFrom"; //celsius";
public const string Entity_TemperatureValue = "TemperatureValue"; //100";
// methods to handle LUIS intents
[LuisIntent("")]
public async Task None(IDialogContext context, LuisResult result)
{
string message = $"try 100 f to c";
await context.PostAsync(message);
context.Wait(MessageReceived);
}
[LuisIntent("Convert")]
public async Task SerialNumber(IDialogContext context, LuisResult result)
{
string tempTo = "not found";
string tempFrom = "not found";
string tempValue = "not found";
EntityRecommendation entity;
if (result.TryFindEntity(Entity_TemperatureUnitTo, out entity))
{
tempTo = entity.Entity;
}
if (result.TryFindEntity(Entity_TemperatureUnitFrom, out entity))
{
tempFrom = entity.Entity;
}
if (result.TryFindEntity(Entity_TemperatureValue, out entity))
{
tempValue = entity.Entity;
}
/*
[°C] = ([°F] - 32) × 5/9
[°F] = [°C] × 9/5 + 32
*/
double d = 0.0, t = 0.0;
if (double.TryParse(tempValue, out d))
{
if (tempTo.Contains('f') || tempTo.Contains('F'))
{
t = ((d * 9) / 5) + 32;
}
else
{
t = ((d - 32) * 5) / 9;
}
}
string answer = String.Format("{0:0.00}", t);
//string message = $"{answer}";
string message = $"answer={answer} ; tempTo={tempTo} ; tempFrom={tempFrom} ; tempValue={tempValue}";
await context.PostAsync(message);
context.Wait(this.MessageReceived);
}
}
[/code]
Step 6 : Test Bot for LUIS commands
-
Go back to Azure portal, navigate to Bot Services, click on Test WebChat
-
type
66 f to c
-
you should see 18.89 as answer shown below
-
Step 7 : Add this Bot to a website
-
In the Azure portal, navigate to Bot Services, click on your Bot and click on
Channels
-
Add these three channels
-
Web
-
Skype
-
Microsoft Teams
-
-
Next click on the “
Get bot embed codes
” as shown below
-
-
Copy the embed codes for each one of them as shown
-
-
Create a Azure Website and in the default.html page, add all three embed codes as shown
-
[code language="html"]
<a href='https://join.skype.com/bot/b485e689-665a-493b-8501-723c659c0826'>
<img src='https://dev.botframework.com/Client/Images/Add-To-Skype-Buttons.png'/></a>
<hr>
<a href='https://teams.microsoft.com/l/chat/0/0?users=28:b485e689-665a-493b-8501-723c659c0826'>
<img src='https://dev.botframework.com/Client/Images/Add-To-MSTeams-Buttons.png'/></a>
<hr>
<iframe src='https://webchat.botframework.com/embed/wabac?s=Y60jzKS3B8g.cwA.iIw.ijI4IqVhAKy_6DjJFoW31cz4sO_nPoswb...' width="400" height="400">
</iframe>
[/code]
-
Now browse to the test website, in the chat window type “
100 f to c
”
-
Should see the temperature value in Celsius as shown
-
Step 8 : Add this Bot to Skype
-
At this above test website, click on the “Add to Skype”
-
Wabac Bot will be added to your Skype account as shown
-
type
100 f to c
and check the return value
-
Step 9 : Add this Bot to Microsoft Team
-
At this above test website, click on the “Add to Teams”
-
Wabac Bot will be added to your Microsoft Teams
-
type
100 f to c
and check the return value
-