Create A Bot With Microsoft Bot Framework Using Node.js

In this article, you will learn how to create a Bot with Microsoft Bot Framework. We will create a bot that can visually identify Men's and Women's outfits using Custom Vision Service. But first, we are going to create an echo bot.

Prerequisites

Installs needed

Node.js (and npm)
git
VS Code

Signups needed

MSID
botframework.com
Azure Account

So, let's get started.

First of all, let's create a Git repository and set it gitignore for ignoring Node Modules and the usual Readme.

It will look like this,

The reason we are doing this is that we want to implement Continuous Integration and Continuous Deployment process to Azure later.

Now, log into Azure Management portal.

Click New (+ Icon) > Web + Mobile > Web App.

Fill the required fields.

Go to your Web App > Deployment Option > Choose Source > GitHub.

Authorise with your GitHub account and select the repository.

Check if your web app is working or not. visit http://YOUR_APP_NAME.azurewebsites.net. Whoa! It works! Don't worry if it shows Permission error.

Now visit: https://dev.botframework.com/

Fill in the following details

Bot Name (Name for your Bot)

Bot Handle (Used in the URL of your Bot)

Description (Your bot's long description which may appear in bot directories.)

Configuration

Messaging Endpoint:

Enter your Azure Website URL with https and append /api/messages

Example -

https://YOUR_APP_NAME.azurewebsites.net/api/messages

Click on “Create Microsoft App ID and Password”.

In New tab, click on "Generate Password".

Note - Save your password and App ID in a separate file. It will be shown only once.

Now, hit Return.

Once you are back to “Tell us About your bot” page, leave everything as it is, then accept the T&C and click "Register".

Now, let’s write code!

Open Command Prompt and clone the repository:

Take the URL from GitHub and run.

git clone REPOSITORY_URL
cd FOLDER_NAME
git status
code README.md
npm init ::(Set the package.json attributes set entrypoint app.js)
npm install --save botbuilder
npm install --save restify

Open app.js and paste this code,

var restify = require('restify');
var builder = require('botbuilder');
var server = restify.createServer();
server.listen(process.env.port || process.env.PORT || 3978, function () { });
// Create the chat connector for communicating with the Bot Framework Service
var connector = new builder.ChatConnector({
appId: 'MICROSOFT_APP_ID’ ,
appPassword: 'MICROSOFT_APP_PASSWORD’
});
// Listen for messages from users
server.post('/api/messages', connector.listen());
server.get('/', restify.plugins.serveStatic({
directory: __dirname,
default: '/index.html'
}));
var bot = new builder.UniversalBot(connector, function (session) {
var msg = session.message;
if (msg.attachments && msg.attachments.length > 0) {
// Echo back attachment
var attachment = msg.attachments[0];
session.send({
text: "You sent:",
attachments: [
{
contentType: attachment.contentType,
contentUrl: attachment.contentUrl,
name: attachment.name
}
]
});
} else {
// Echo back users text
session.send("You said: %s", session.message.text);
}
});

Replace ‘MICROSOFT_APP_ID’ and ‘MICROSOFT_APP_PASSWORD’ with your app id and password. Then "Save" the code.

Now, go to http://dev.botbuilder.com and click on your bot followied by selection of web chat.

Copy the Iframe code, create an index.html file, and paste the code into that:

<iframe src='https://webchat.botframework.com/embed/botforartical?s=YOUR_SECRET_HERE' height="90%" width="90%"></iframe>

Replace YOUR_SECRET_HERE with your own Secret key. You will get that on the same page.

And finally, run these commands.

git add .
git commit –m “Added all requirements”
git push origin master

Your echo bot is ready and running. Visit your Azure website URL.

Conclusion

In this article, we learned how to create an echo bot and deploy it on Azure.

What's Coming

In the next post, I will show you how to create a custom image classifier using Microsoft Custom Vision Service and connect it to the bot we created today.