End-to-End ChatBot Build using Microsoft Bot Framework
Build an EchoBot and integrate with Microsoft Teams
Microsoft Bot Framework makes it easy to build and integrate your ChatBot.
The steps are as below -
- Setup tunneling using ngrok
- Register your web app as a bot with Microsoft Bot Framework.
- Create your web app and run it.
- Test Connectivity to Web App from Azure.
- Create your teams app manifest and build package.
- Upload package to Microsoft Teams.
For hosting the WebApp you can use the following -
- Microsoft Azure WebApp
- Third party hosting platform
I am using Windows for running ngrok. It can be run on other platform too.
- Download .zip file from https://ngrok.com/download and unzip to your path
- Configure ngrok auth token — ngrok authtoken your_auth_token
- 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.
- In the Azure portal, under Azure services, select Create a resource.
- In the search box enter “bot”. And in the drop-down list, select Bot Channels Registration.
- Select the Create button.
- 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.
To build the WebApp follow the steps below -
- Install yo and botbilder generator
npm install -g yo generator-botbuilder
2. Use the generator to create an echo bot.
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
? 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
4. Start your bot — it will run on port 3978 as default
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.
- Bot Framework — https://dev.botframework.com/
- How to create Bot for MS Teams— https://docs.microsoft.com/en-us/microsoftteams/platform/bots/how-to/create-a-bot-for-teams
- Download and configure ngrok — https://ngrok.com/download
- App Studio for MS Teams — https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/app-studio-overview
- 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