Brook Preloader

Blog

Integrating Bot with BotFrameWork using Node JS, ngrok into MS TEAMS

Microsoft teams is a channel will be used to integrate for communicating bot with groups of people.

Prerequisites

Install Node.js and NPM

Install Visual Studio Code

Build and run the sample

Create a folder in our system , that would like to serve as the root directory for our bot. Navigate to that folder and initialize a new project by running

npm init

Follow the project directory structure as shown in below.

In app.js file write the below code
‘use strict’;
var express = require(‘express’);
var app = express();var bot = require(‘./bot’);
bot.setup(app);
var port = process.env.PORT || 3333;
app.listen(port, function() {
console.log(App started listening on port ${port});
});
In bot.js file write below code
‘use strict’;
module.exports.setup = function (app) {
var builder = require(‘botbuilder’);
var teams = require(‘botbuilder-teams’);
var config = require(‘config’);
var request = require(‘request’);
if (!config.has(“bot.appId”)) {
process.env.NODE_CONFIG_DIR = “../config”;
delete require.cache[require.resolve(‘config’)];
config = require(‘config’);
}
var connector = new teams.TeamsChatConnector({
appId: config.get(“bot.appId”),
appPassword: config.get(“bot.appPassword”)
});
var inMemoryBotStorage = new builder.MemoryBotStorage();
// Define a simple bot with the above connector that echoes what it received
var bot = new builder.UniversalBot(connector, function (session) {
// Message might contain @mentions which we would like to strip off in the response
var text1 = teams.TeamsMessage.getTextWithoutMentions(session.message);
session.send(‘You said: %s’, text1);
}).set(‘storage’, inMemoryBotStorage);
// Setup an endpoint on the router for the bot to listen.
// NOTE: This endpoint cannot be changed and must be api/messages
app.post(‘/api/messages’, connector.listen());
// Export the connector for any downstream integration — e.g. registering a messaging extension
module.exports.connector = connector;
};

Host the app tunnel using ngrok

For the Teams platform to load our app, our app must be reachable from the internet. To make our app reachable from the internet, we need to host our app. We can either host it in Microsoft Azure for free or create a tunnel to the local process on our development machine using ngrok.

Please refer the ngrok downloaded path download and install . Make sure you add it to a location in your PATH.

Once we install it, we can open a new terminal window and run the following command to create a tunnel as shown below. The sample port am using 3333. With ngrok we can get a web address such as https://d0ac14a5.ngrok.io((this URL is just an example).

Ngrok command: ngrok http 3333

Deploy our app to Microsoft Teams

After hosting our app, we need to do a few updates to our app before it is ready to be deployed in Microsoft Teams environment.

Step 1: Change the appId and appPassword in the default.json file in config folder

We need a unique ID to distinguish our app from others on the Microsoft Teams platform. This APP ID is a GUID and is set in the default.json file.

To get a unique value for our app follow the instructions in Create a bot for Microsoft Teams

Create a bot for Microsoft Teams

Microsoft Bot Framework is a SDK allowing us as a developer to create conversational chatbots with ease. Using the bot framework we can create our own bots with SDK’s available in C#, Node.JS and using REST requests.

Create the bot using this link: https://dev.botframework.com/bots/new.

Bot Profile

Configuration

App Registration

We are unable to make app registrations in our organization and need another party to create the App ID for the bot we are building.
To create our own App ID, follow the steps below.

1. Sign into our Azure account. If you don’t have an Azure account, we can sign up for free account.

2. Go to the App registration and click New registration in the action bar at the top.

3. Enter a display name for the application registration in the Name field for bot and select the supported account types. The name does not have to match the bot ID.

4. Click Register After a few moments, the newly created app registration should open a blade. Copy the Application (client) ID in the Overview blade and paste it in to the App ID field.

We are making our bot in the Azure portal, so we need to generate a secret for our app registration.

1. Click on Certificates & secrets in the left navigation column of our app registration’s blade.

2. In that blade, click the New client secret button. In the dialog that pops up, enter an optional description for the secret and select Never from the Expires radio button group.

Paste the APP ID in the below app ID column

Finally we agree terms & conditions and click on register button to register

In connect to channels add MS Teams channel by clicking the MS Teams icon.

Configure teams to our bot by clicking save button.

Now edit the default.json file and set the values of appID and appPassword will returned by Bot Framework.

{
“bot”: {
“appId”: “XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX”,
“appPassword”: “xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”
},
“storage”: “memory”
}
Now run the project by giving below commands

npm install

npm start

When the app starts, it displays App started listening on port 3333 in the terminal window.

Testing our Bot in MS Teams

Copy and paste the AppID in the MS Teams search bar, bot will be displayed with bot name. now we can test our bot as shown below image.

So, finally I hope I’ve made the integration process simple. Bots are fun to build and can help the business a lot. Hope you build bots that are useful to people and makes life simple.

0 0 vote
Rating
guest
0 Comments
Inline Feedbacks
View all comments