End-to-End ChatBot Build using Microsoft Bot Framework

Build an EchoBot and integrate with Microsoft Teams

Overview

Microsoft Bot Framework makes it easy to build and integrate your ChatBot.

In this article I will build the Web App using Bot Framework SDK for JavaScript, host it on my laptop and use ngrok to allow access from Internet. Then register it in Azure using Bot Channels Registration and test it using Web Chat from Azure. Finally crate and deploy an App for Microsoft Team to use the Bot. The solution will look like the following -

The steps are as below -

1. Setup tunneling using ngrok
2. Register your web app as a bot with Microsoft Bot Framework.
3. Create your web app and run it.
4. Test Connectivity to Web App from Azure.
5. Create your teams app manifest and build package.
6. Upload package to Microsoft Teams.

For hosting the WebApp you can use the following -

1. Microsoft Azure WebApp
2. Third party hosting platform

Install ngrok

I am using Windows for running ngrok. It can be run on other platform too.

1. Download .zip file from https://ngrok.com/download and unzip to your path
2. Configure ngrok auth token — ngrok authtoken your_auth_token
3. Run ngrok in another terminal to tunnel to your WebApp — ngrok http localhost:3978. Note the external endpoint e.g. https://cecaaffba561.ngrok.io

Register the WebApp

Now register your WebApp in Azure using Bot Channels Registration as per below steps -

You can also register your web service by creating a Bot Channels Registration resource in the Azure portal.

1. In the Azure portal, under Azure services, select Create a resource.
2. In the search box enter “bot”. And in the drop-down list, select Bot Channels Registration.
3. Select the Create button.
4. In the Bot Channel Registration blade, provide the requested information about your bot.

5. Click Microsoft App ID and password and then Create New.

6. Click Create App ID in the App Registration Portal link.

7. In the displayed App registration window, click the New registration tab in the upper left.

8. Enter the name of the bot application you are registering, we used xEchoBot

9. For the Supported account types select Accounts in any organizational directory (Any Azure AD directory — Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox).

10. Click the Register button. Once completed, Azure displays the Overview page for the application.

11. Copy and save to a file the Application (client) ID value.

12. In the left panel, click Certificate and secrets.

13. Under Client secrets, click New client secret.

14. Add a description to identify this secret from others you might need to create for this app.

13. Set Expires to your selection.

14. Click Add.

15. Copy the client secret and save it to a file.

16. Go back to the Bot Channel Registration window and copy the App ID and the Client secret in the Microsoft App ID and Password boxes, respectively.

17. Click OK.

18. Finally, click Create.

After Azure has created the registration resource it will be included in the resource group list.

Build WebApp

To build the WebApp follow the steps below -

1. Install yo and botbilder generator

npm install -g yo generator-botbuilder

2. Use the generator to create an echo bot.

yo botbuilder

Yeoman prompts you for some information with which to create your bot. For this tutorial, use the default values.

? What’s the name of your bot? echo-bot
? What will your bot do? Demonstrate the core capabilities of the Microsoft Bot Framework
? What programming language do you want to use? JavaScript
? Which template would you like to start with? Echo Bot — https://aka.ms/bot-template-echo
? Looking good. Shall I go ahead and create your new bot? Yes

3. Set your AppId and Password in .env file or as Environment Variable that you get from Microsoft Bot Registration in Azure above

MicrosoftAppId=xxxx
MicrosoftAppPassword=xxxx

4. Start your bot — it will run on port 3978 as default

cd echo-bot
npm start

TestWebApp

Click on the above bot when it is created from Bot Services. And click on Web Chat -

If the connectivity is ok, you will get a reply like below -

Build Teams App

You can build MS Teams App using App Studio for MS Teams but in this tutorial, I have built the app using a manifest file and zipping it up. My deployment.zip file contains the following -

Create a free MS Teams account and after login create on the Apps tab on left. Click on the Upload a custom app and select the deployment.zip file created above -

If upload is complete, you will find the app available in the Apps -

This will open a new Window. Select Add to a team from Open Tab -

Select the Teams and Channel Name and click on Setup a bot.

The bot will be available under Chat and sample conversation is below

The sample manifest file that I have used is below. Modify ms_bot_id with the AppId that you get from Microsoft Bot Registration.

References:

1. Bot Framework — https://dev.botframework.com/
2. How to create Bot for MS Teams— https://docs.microsoft.com/en-us/microsoftteams/platform/bots/how-to/create-a-bot-for-teams
3. Bot Framework SDK for JavaScript — https://docs.microsoft.com/en-us/azure/bot-service/javascript/bot-builder-javascript-quickstart?view=azure-bot-service-4.0
4. Download and configure ngrok — https://ngrok.com/download
5. App Studio for MS Teams — https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/app-studio-overview
6. Manifest for MS Teams App — https://docs.microsoft.com/en-us/microsoftteams/platform/resources/schema/manifest-schema

7. MS Teams App Icon and Color — https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/apps-package