Step 1 : Creating our app 👾

We will create a simple chatbot that tells us the nutritional value of food items consumed by us (we will be using a 3rd party api to get the nutrition data). So let’s get started by creating a simple web server with our webhook endpoint. Everything that happens to your Messenger bot is sent as an event to your webhook. This is where your code lives, and is the core of your Messenger Platform integration, where you will receive, process, and send messages.

Let us create a directory and we are going to name it facebook-bot. You could name it whatever you like

I am using VS code as my code editor.

Want to read this story later? Save it in Journal.

Now that we have created the directory lets initialize the node app by typing npm init .

Now that your node is setup let us install few packages that we would be requiring for setting up our server.

npm install express body-parser morgan request nodemon -- save

Once the installation is complete you can see these packages in your package.json file and also don’t forget to add "start": "nodemon server.js" to your package.json file It basically restarts the application whenever there is any change in the code saves you the pain of manually restarting your server.

Now we are going to create a file named server.js and a folder named routes and inside the routes folder we will be creating a file webhook_verify.js

If everything went well your directory should look like this

Now let’s add the following code to our server.js file

const express = require(‘express’)

const morgan = require('morgan');

const bodyParser = require('body-parser');

const app = express(); // app configuration

app.set('port', (process.env.PORT || 3000)); // setup our express application app.use(morgan('dev')); // log every request to the console.

app.use(bodyParser.urlencoded({ extended:false }));

app.use(bodyParser.json()); // app routes

require('./routes/webhook_verify')(app); // warming up the engines !! setta !! go !!!. app.listen(app.get('port'), function() {

const url = 'http://localhost:' + app.set('port');

console.log('Application running on port: ', app.get('port')); });

Step 2: setting up the webhook. 🔧

Now its time to write the code for creating the webhook endpoint that accepts POST requests, checks the request is a webhook event, then parses the message. This endpoint is where the Messenger Platform will send all webhook events. Now write the following code in the webhook_verify.js file.

const processPostback = require('../processes/postback');

const processMessage = require('../processes/messages');

module.exports = function(app, chalk){

app.get('/webhook', function(req, res) {

if (req.query['hub.verify_token'] === process.env.VERIFY_TOKEN){

console.log('webhook verified');

res.status(200).send(req.query['hub.challenge']);

} else {

console.error('verification failed. Token mismatch.');

res.sendStatus(403);

}

});



app.post('/webhook', function(req, res) {

//checking for page subscription.

if (req.body.object === 'page'){



/* Iterate over each entry, there can be multiple entries

if callbacks are batched. */ req.body.entry.forEach(function(entry) {

// Iterate over each messaging event

entry.messaging.forEach(function(event) {

console.log(event);

if (event.postback){

processPostback(event);

} else if (event.message){

processMessage(event);

}

});

});

res.sendStatus(200);

}

});

}

The process.env.VERIFY_TOKEN is the verification token that we will create while creating a facebook app and then we will save that in the environment variable when we deploy it to heroku. You can directly hard code but its not a good practice to do it.