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/
Sign in with your Microsoft account and click on "Create a Bot" option. You will get a page similar to this.
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 () { });
-
-
-
-
- var connector = new builder.ChatConnector({
- appId: 'MICROSOFT_APP_ID’ ,
- appPassword: 'MICROSOFT_APP_PASSWORD’
- });
-
-
-
- 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) {
-
- var attachment = msg.attachments[0];
- session.send({
- text: "You sent:",
- attachments: [
- {
- contentType: attachment.contentType,
- contentUrl: attachment.contentUrl,
- name: attachment.name
- }
- ]
- });
- } else {
-
- 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.