Make FREE chat bot with Heroku + Nodejs + Bot framework ❤

This tutorial will play with you about scaffold bot project from scratch to free version app in heroku server in 30 minutes

Prequistics

• OSX , Linux or Window with command line interface like Console2
• Install latest version of Node.js here .. to check node version use node -vin your terminal
• Download Microsoft Bot Framework Simulator here extract file then install program on desktop. we will use this program for test your bot in next step .
• Git command line install here

Step#1 Create Node.js project and test ‘Hello World’ in Bot framework emulator [5 mins]

• Create new project with mkdir YOUR_PROJECT_NAME
• Redirect to cd YOUR_PROJECT_NAME
• Prepare node package manager with npm init then continuously enter to create package.json file.
• Install require node packages in your terminal. (wait around 2–4 minutes to download file)

npm install --save botbuilder
npm install --save restify

• Create new file index.js in your project then copy these code.

// Reference the packages we require so that we can use them in creating the bot
var restify = require('restify');
var builder = require('botbuilder');
// =========================================================
// Bot Setup
// =========================================================
// Setup Restify Server
// Listen for any activity on port 3978 of our local server
var server = restify.createServer();
server.listen(process.env.port || process.env.PORT || 3978, function () {
 console.log('%s listening to %s', server.name, server.url);
});
// Create chat bot
var connector = new builder.ChatConnector({
 appId: process.env.MICROSOFT_APP_ID,
 appPassword: process.env.MICROSOFT_APP_PASSWORD
});
var bot = new builder.UniversalBot(connector);
// If a Post request is made to /api/messages on port 3978 of our local server, then we pass it to the bot connector to handle
server.post('/api/messages', connector.listen());
// =========================================================
// Bots Dialogs 
// =========================================================
// This is called the root dialog. It is the first point of entry for any message the bot receives
bot.dialog('/', function (session) {
// Send 'hello world' to the user
session.send("Hello World");
});

This file command node server to response ‘Hello World’ text to anyone who chat with this bot

• Run node index.js in your terminal to start bot server
• If everything OK , server should response something like these

restify listening to http://[::]:3978 < :3978 is connection port of server

Test your Hello world bot in emulator

• Open Bot-framework-emulator

• Add url http://localhost:3978/api/messages at input box then click connect.
• Emulator console will return POST 202 [conversationUpdate] if server can connect with emulator
• Write Hello facebook bot! in chat input then press enter
• Then server will response you Hello world!

OK ! First step is cleared... Next step wait for us

Step#2 Add GIT and Push your git code to Heroku [5 mins]

Prepare your project in git system

• Add git init in terminal
• Add some code in package.json

...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start" : "node index.js" <<-- add this line!
  },
...

• Create .gitignore file in your project then add this code in .gitignore

node_modules/

• Store new update in git with git add .
• Then commit file git commit -am “first commit”

Prepare Heroku

Heroku is free host service and easiest way to deploy your bot project , In this step we will create heroku instance and push git code to run on heroku server

• Open Heroku website
• Create new Heroku apps
• Back to your folder in terminal with cd YOUR_PROJECT_NAME
• Add heroku git:remote -a YOUR_PROJECT_NAME to sync git with heroku directory route
• Push project git push heroku master
• After push successfully you will receive log like this in terminal

remote: Verifying deploy.... done.
To https://git.heroku.com/YOUR_PROJECT_NAME.git  << copy this url
* [new branch]      master -> master

• Setup Heroku web service

heroku ps:scale web=1

In this tutorial we use Heroku instead of Github to deploy and host your project but It seem OK if you have some backup file in Github for future un-predictable accident

OK ! Second step is cleared… Next we will run our bot in microsoft bot framework <real app will begin!>

Step#3 Register your bot to microsoft bot framework program [8 mins]

Copy your bot domain

• In your terminal run heroku domains heroku will show your bot domain like this

your-bot.herokuapp.com

• Copy your bot domain in some paper we will use it later ❤

Register your chat bot

• Open Microsoft Bot framework website here
• Filling form to create new bot

ICON : add your bot image icon
Name : Your bot name
Bot handle  : Your bot name with NO SPACEBAR like this 'sample_bot' 
Description : Your bot description

• Fill your bot domain with https:// in message endpoint

https://your-bot.herokuapp.com/api/messages

• Click create Microsoft App ID & Password
• Microsoft will Generate bot ID with Your microsoft account (if you didn’t have microsoft account just create it .. use only 5 minutes to do)
• After microsoft generated you will see page like this

• Copy your APP ID & PASSWORD you will use it in few step!
• Click Finish and go back to Bot Framework
• Add your APP ID > click I agree to Term of Use… > Register

• After everything clear you will redirect to Bot Dashboard

Config Heroku .env variable with Microsoft app ID and password

• Open terminal and input APP ID & PASSWORD in this format

heroku config:set MICROSOFT_APP_ID=YOUR_APP_ID MICROSOFT_APP_PASSWORD=YOUR_APP_PASSWORD

• run heroku restart to restart your bot service.
• Then wait for 5 minutes come back again to your Bot framework to test connection with Heroku.
• Choose you bot
• Click Test at Test connection to request url from your heroku bot
• You should see “Accepted” in result

OK ! 3rd step is cleared… Next is the last part to go!

Step#4 Register bot to FACEBOOK [10 mins]

Add Facebook channel to Bot framework

• In your Bot framework page > click add at Facebook message channel

• You will redirect to Config tutorial page of bot framework
• Find [Configure webhook url and verify token] and copy Callback url and Verify token you will use to connect webhook later.

Create Facebook App

• Go to Facebook developer page at here
• Login to create new app (If you didn’t be fb developer just sign up)
• Goto My App > Add a new app
• Create App display name in the popup then click Create App ID

• Now you have your first facebook app! next.. we will add messenger service for you app
• In your App product page click Get started at messenger

• Find [Token Generation] and select your fan page (People can chat with your bot by facebook fan page .. if you didn’t have fan page just create it and refresh this screen)
• After select fan page .. messenger service will create your webhook access token copy Access token in some paper, we will use it later ❤

• Find [Webhooks] then click setup webhook
• Popup will shown up now paste Callback url and Verify token here
• Tick at messages ,messaging_postbacks and messaging_optins their is basic function to say ‘hello world’ with your app.
• click Verify and Save

Get Facebook App ID and App secret

• In your facebook app page > click Setting
• copy App ID and App Secret to some paper

Get Fanpage ID

• Goto your page at https://www.facebook.com/pages/?category=your_pages > Select your bot page
• At Your Page > Find About > Page ID > Copy your fanpage ID
• Now you have 4 credentials to connect your bot like this

facebook app id:      17305824605.....
facebook app secret:  7ad5c2222318384668fde35537cfb930
facebook page ID:     13420242792.....
access token:         EAAYl9KDR7yLOHVSZAlQPcsdZBrlRipYAq...

Submit credentials to config your bot live

• Come back to Config tutorial page of bot framework
• find [Enter your credentials]
• Enter credentials and Submit

• Done! now you can chat with your app go to fanpage and ready to say ‘Hello World’ with your bot!

Chat with your bot

• In Bot framework page click Message Us at facebook channel

• You redirect to facebook messenger room with your bot
• Then say ‘Hello’ to your bot wait for 2–3 minutes to get response

Heroku free tier server will sleep every 30minutes after non-reaction stage … In sleep stage if we contact server by message request from facebook .. server will use 2–3 minutes to awake and response to you

If you want 24hrs service for your bot chat .. just upgrade server to hobby tier for $7 a month. It is really worth price to spend ❤

• OK! We finished to create Facebook bot in 30minutes with no fee.

What’s Next ?

• Because this is only ‘Hello world’ tutorial to facebook chat so from now on their many thing to do
• First, your facebook app is now private so only you can chat with them, to public your app your must sign App Review for Messenger in facebook app console and publish your app at App review > Make YOUR-APP public?
• After submission facebook admin will test your bot chat then permit license your bot to the world.
• You can learn Bot-framework api to create more interest contact with people and your bot.
• You should understand Facebook Message API and to consider good UI for your conversation.
• Good Luck, Microsoft guys create some great example, just clone code in your project and push them to heroku then you will learn how fascinate thing happen with your bot ❤
• Their is many to learn so follow some cool channel in medium like Chatbot’s Life
• Enjoy.

Reference

• Create bot with Bot framework and Microsoft azure by Coach.Pol
• Set up heroku with node.js