Azure Bot Function

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 :
1. Temperature Value
2. Current Temperature Unit
  
  (Fahrenheit or Celsius)
3. 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
1. Convert 100 f to c
2. Convert 100 c to f
3. Change 100 f to c
4. Change 100 c to f
5. What is 100 c in f
6. What is 100 f in c
7. 100 f in c
8. 100 c in f

Here is the screenshot

For each of this sample sentences, tell LUIS which is

TemperatureValue

,

TemperatureUnitFrom

and

TemperatureUnitTo
1. Convert 100 f to c
2. 100 is
  
  TemperatureValue
3. f is
  
  TemperatureUnitFrom
4. 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
1. Web
2. Skype
3. 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_nPoswbyzrS_H6mf4‘ 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