Setting Up Server

Creating a simple server in node.js is easy.

Navigate to your desired folder where you are going to setup this project. Open that folder in your Terminal and run npm init this will generate the package.json file.

Now, we have to install our dependencies,

Run npm i apiai axios body-parser express uuid –save

After installing dependencies create index.js file and import that dependencies that we just installed and create simple express server. Also, make one config.js file so we can store our credentials in that file for better code management and security purpose or instead of config.js you can also create env file.

Index.js

const apiai = require("apiai"); const express = require("express"); const bodyParser = require("body-parser"); const uuid = require("uuid"); const axios = require('axios'); //Import Config file const config = require("./config"); //setting Port app.set("port", process.env.PORT || 5000); //serve static files in the public directory app.use(express.static("public")); // Process application/x-www-form-urlencoded app.use( bodyParser.urlencoded({ extended: false }) ); // Process application/json app.use(bodyParser.json()); // Index route app.get("/", function (req, res) { res.send("Hello world, I am a chat bot"); }); // for Facebook verification app.get("/webhook/", function (req, res) { console.log("request"); if ( req.query["hub.mode"] === "subscribe" && req.query["hub.verify_token"] === config.FB_VERIFY_TOKEN ) { res.status(200).send(req.query["hub.challenge"]); } else { console.error("Failed validation. Make sure the validation tokens match."); res.sendStatus(403); } }); // Spin up the server app.listen(app.get("port"), function () { console.log("Magic Started on port", app.get("port")); }); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 const apiai = require ( "apiai" ) ; const express = require ( "express" ) ; const bodyParser = require ( "body-parser" ) ; const uuid = require ( "uuid" ) ; const axios = require ( 'axios' ) ; //Import Config file const config = require ( "./config" ) ; //setting Port app . set ( "port" , process . env . PORT || 5000 ) ; //serve static files in the public directory app . use ( express . static ( "public" ) ) ; // Process application/x-www-form-urlencoded app . use ( bodyParser . urlencoded ( { extended : false } ) ) ; // Process application/json app . use ( bodyParser . json ( ) ) ; // Index route app . get ( "/" , function ( req , res ) { res . send ( "Hello world, I am a chat bot" ) ; } ) ; // for Facebook verification app . get ( "/webhook/" , function ( req , res ) { console . log ( "request" ) ; if ( req . query [ "hub.mode" ] === "subscribe" && req . query [ "hub.verify_token" ] === config . FB_VERIFY _ TOKEN ) { res . status ( 200 ) . send ( req . query [ "hub.challenge" ] ) ; } else { console . error ( "Failed validation. Make sure the validation tokens match." ) ; res . sendStatus ( 403 ) ; } } ) ; // Spin up the server app . listen ( app . get ( "port" ) , function ( ) { console . log ( "Magic Started on port" , app . get ( "port" ) ) ; } ) ;

Spin up the server. We need to make communication live so here we are using ngrok to make our localhost live but you can always use any other platform like heroku, localtunnel or any other third party services.

To make our server live type ./ngrok http 5000 in your terminal which will give you live URL. But make sure while running above command you have ngrok downloaded for Your Suitable OS. Ngrok file should be in your current working directory to successfully execute above command.

Config.js

module.exports = { FB_PAGE_TOKEN: "Page Access Token", FB_VERIFY_TOKEN: "Facebook Verification code for Webhook", API_AI_CLIENT_ACCESS_TOKEN: "DialogFlow token", FB_APP_SECRET: "Facebook Secret Code", }; 1 2 3 4 5 6 module . exports = { FB_PAGE_TOKEN : "Page Access Token" , FB_VERIFY_TOKEN : "Facebook Verification code for Webhook" , API_AI_CLIENT_ACCESS_TOKEN : "DialogFlow token" , FB_APP_SECRET : "Facebook Secret Code" , } ;

FB_PAGE_TOKEN : Copy the Page Access token that we generated and paste in config.js.

FB_APP_SECRET : You will find App Secret on Settings<

Now click on set up webhook you will find that just below token generation window.

Paste your server URL with endpoint /webhook and Verify Token can be anything and check messages and messaging_postbacks.

When You click on Verify and Save You will receive verification GET request from Facebook. (make sure you copy https:// URL)

FB_VERIFY_TOKEN : Paste the verify token in your config.js file.

SERVER_URL : Copy your ngrok live URL and paste.

Dialogflow integration

Now let’s configure dialogflow with our webhook code. Add New agent and Select v1 API and copy client access token and paste in API_AI_CLIENT_ACCESS_TOKEN.

Let’s create intent in dialogflow.

Add intent from the left sidebar. Give an Intent Name: Send-text Add Training Phrases “Hey, send me an example of a text message” or relevant to it. Add Action Name “send-text” Save it. Now do the same thing for send-image, send-media, send-list, send-receipt, send-Quick Reply, send-graph, send-carouselMake sure you give the unique action to all intent. We need to identify the intent of a user to send the appropriate response from our webhook server. Click on the Fulfillment tab and add your webhook endpoint here and save it. That’s it nothing more in Dialogflow for this example.

If you are not familiar with dialogflow please read the documentation.

Let’s come back to the index.js add this code snippet to connect with Dialogflow.