Create a Weather Forecast Bot with Azure LUIS and Maps Services in Bot Framework Composer

Published Mar 20 2022 10:31 PM 1,860 Views
Microsoft

Bot Framework Composer is based on Bot Framework SDK V4 and provides powerful visual design UI to create adaptive dialogs efficiently in low code mode. This article elaborates how to use latest Bot Framework Composer 2.1.2 to create a smart weather forecast bot app with Azure LUIS & Map services on Windows.

 

If you are a beginner on bot development, it is no problem to complete all steps in the article and create a bot app successfully. To know more details on how it is built in Bot Composer further, you may want to reference below articles from time to time, which will help you to understand how Bot Composer works and easily step into this domain:

 

Basics of the Bot Framework Service - Bot Service | Microsoft Docs

Conversation flow and memory in Bot Framework Composer | Microsoft Docs

Add language understanding in Bot Framework Composer | Microsoft Docs

Language generation in Bot Framework Composer | Microsoft Docs

 

Before we start, you should have a Windows 10/11, Azure Subscription as a development environment. Below are shortcut links to each section of this article:

 

Environment Preparation

Section 1: Build a bot integrated with Azure LUIS

Section 2: Add Weather feature supported by Azure Maps to the bot app

 

Environment Preparation

 

  1. Install Node.js LTS 14.x or later with npm.

freistli_0-1647617065403.png

 

  1. Install .NET Core SDK 3.1 

freistli_1-1647617065419.png freistli_2-1647617065457.png

 

Check the version in C:\Program Files\dotnet\sdk or C:\Program Files (X86)\dotnet\sdk to see if you have installed it.

 

  1. Install Bot Framework Composer
  1. Start Composer, enable firewall settings for it:

freistli_3-1647617065481.png freistli_0-1647617259880.png

 

5.  Have an Azure Subscription, ensure Azure Bot and Cognitive Services resource providers are registered in this subscription. Otherwise, can use Azure Cli to register them:

 

 

az provider register --namespace Microsoft.BotService
az provider register --namespace Microsoft.CognitiveServices

 

 

Section 1: Build a bot integrated with Azure LUIS

 

  1. In Bot Framework Composer, click Home, click Create New

freistli_1-1647617259885.png

 

  1. Choose Core Bot with Language, and click Next. This template creates a bot with Azure LUIS service.

freistli_2-1647617259902.png

 

  1. Input a bot name, such as MyWeatherBot, Runtime is Azure Web App, and click Create

freistli_3-1647617259909.png

 

Notice:

freistli_4-1647617259910.png

 

  1. After a while of loading, you will see this project interface:

freistli_0-1647617443813.png

 

        5.   Click Publish

 

freistli_1-1647617443826.png

 

 

       6.  Click Publish profiles

 

freistli_2-1647617443837.png

 

     7.  Click Add New

     

     8.  Give it a name, such as AzurePublish, choose Publishing Target as Publish bot to Azure, click Next

 

freistli_3-1647617443843.png

 

        9.    Click Next

 

freistli_0-1647700433388.png

 

     10.  Sign in your Azure subscription

freistli_1-1647700472187.png

 

     11.   After successfully login, if you have multiple Azure Directory, choose the correct one:

 

freistli_2-1647700496743.png

 

      12.  Create a new Azure resource group for this Bot app, name your bot, such as MyWeatherBot001 (this should be different from others), click Next

 

freistli_3-1647700496764.png

 

      13.    Review the Add Resources list, there are required resources and optional resources. Scroll down, un-check Optional resources, you can keep Application Insights, and click Next:

freistli_0-1647701365558.png

 

freistli_1-1647701365577.png

 

      14.   Click Create to provision Azure resources.

freistli_2-1647701365593.png

 

 

 

freistli_3-1647701365594.png

 

freistli_4-1647701365595.png

 

 

Note: if provision failed, please delete the resource group, and create the profile to provision again. Some useful Azure CLI commands may be helpful:

 

 

 

 

 

 

 

 

//Delete resource group
az group delete --name <resource group name>

//purge safe-deleted azure cognitive resource
az resource delete --ids "/subscriptions/{Subscription ID}/providers/Microsoft.CognitiveServices/locations/{location}/resourceGroups/{resource group name}/deletedAccounts/{safe-deleted cognitive service name}" --verbose

 

 

 

 

 

 

 

 

    15.  After provision completes successfully, go to https://portal.azure.com , check the resource group, we will see below resources are available now:

 

freistli_5-1647701517512.png

 

     16.  Click luis-authoring resource, click Key and Endpoint, copy a key, for example, KEY 2:

 

freistli_6-1647701517528.png

 

      17. Go to Composer, click Configure, select MyWeatherBot , click Development Resources , input the authoring key got at step 16, and LUIS region you configured at step 12:

 

freistli_7-1647701517553.png

 

     18. Scroll down to the bottom of the page, click Retrieve App ID

 

freistli_8-1647701517574.png

 

     19.  Choose your publish profile configured at step 8, click Save App ID, you will see your bot App ID and password automatically fill in the fields:

 

freistli_9-1647701517578.png

 

      20.   In Composer, click Create, we can see several default triggers and dialogs have been created. Select each of them, can get the ideas about how conversations are created in canvas:

 

freistli_0-1647702715276.png

 

 

When select the MyWeatherBot dialog, it shows the Recognizer/Dispatch type is Default, means we will use LUIS to recognize users’ inputs/intents:

 

freistli_1-1647702715280.png

 

      21. Click Start Bot on the top right, you will see a prompt about network access configure, click Allow access:

 

freistli_2-1647702715300.png

 

      22. Once you see the Local bot runtime manager starts, click Open Web Chat

 

freistli_3-1647702715303.png

 

     23. After getting the welcome message, type “how do you work”, you will see the local bot starts working:

 

freistli_4-1647702893813.png

 

Section 2: Add Weather feature supported by Azure Maps to the bot app

 

  1. Go to https://portal.azure.com, search Azure Map Accounts, create a new Azure Maps account if you don’t have: ( Use G1 (S1) tier is okay)

 

freistli_0-1647768443191.png

 

  1. Go to the Azure Map Account resource, click Authentication, copy Secondary Key. It will be used at step 4.

 

freistli_1-1647768443214.png

 

  1. Back to Composer, click Configuration, toggle on Advanced Settings View

 

freistli_2-1647768443216.png

 

  1. Add “WeatherApiKey” : <the Azure Map Account key> right before “skillConfiguration” key in the json configuration:

 

freistli_0-1647840236287.png

 

 

  1. Click Package Manager, in the Browser tab, search “weather”, find Bot.Builder.Community.Components.Dialogs.GetWeather  (4.13.2), click and install it

 

freistli_0-1647768824577.png

 

 

freistli_1-1647768824582.png

   

      6.  After install the GetWeather package, click Create, we can see the GetWeatherDialog, click BeginDialog below GetWeatherDialog, to be familiar with its conversation flow:

 

freistli_2-1647768824605.png

 

     7.  Select MyWeatherBot root dialog, click … , click Add New Trigger

 

freistli_3-1647768824615.png

 

     8.  Choose Intent recognized as the trigger type, set the trigger name as GetWeather, click Submit

 

freistli_4-1647768824621.png

 

    9.  In bot explorer, click the GetWeather trigger, add below content in the Tigger Phases property:

 

 

 

 

 

 

 

 


- how is the weather tomorrow
- tell me about the weather
- how is the weather outside
- How is the weather in Seattle
- What is the temperature in Melbourne
- Can you tell me the weather in New York

@ prebuilt geographyV2

 

 

 

 

 

 

 

 

Backend LUIS service will determine intents based on above content, give recognized intent score, and pick up locations based on prebuilt geographyV2 entity

 

Also in put =#GetWeather.Score>0.8 in the conditions field, means if the user input/intent score is above 0.8, then will trigger GetWeather

 

freistli_0-1647838279029.png

 

     10.   Click the + sign in Canvas, select Dialog management -> Begin a new dialog

 

freistli_1-1647838279066.png

 

      11.   Select Begin a new dialog in canvas, and choose GetWeatherDialog in its Dialog name

 

freistli_2-1647838279080.png

 

      12.  Click Start Bot

 

      13.  After Local Bot started, click Open Web Chat

 

freistli_3-1647838279084.png

 

      14.  In the bot message chat window, type message “how is the weather”, send it. Follow its next prompt, input a city name, such as “Seattle”, we will see:

 

freistli_0-1647838820641.png

 

15. In the bot message chat window, type message “how is the weather in Washington”, send it. Please notice that this time the bot doesn’t give more prompt for getting location. It can give answer directly, because LUIS helps to get the location entity directly in the statement:

 

freistli_1-1647838820651.png

 

Congratulations! The bot starts working with weather predict and language understanding features without coding!

 

However we note the city time and max/min info are still not correct/expected displayed in the adaptive card response, how to improve it if user wants to see more details about time zone, daylight saving, country, etc.? I will explain how to achieve this step by step in next article:

 

Improve the Weather Forecast Bot App in Bot Framework Composer - Microsoft Tech Community

 

Happy Modern Bot Development!

 

Freist Li

 

Co-Authors
Version history
Last update:
‎Jun 19 2022 05:48 AM
Updated by: