Set Up Your Development Environment
- Ensure you have Node.js and npm installed on your machine. You can verify this by running `node -v` and `npm -v` in your terminal.
- Choose an editor or IDE. Visual Studio Code is a popular choice, but feel free to use any environment you're comfortable with.
- Install `ngrok` to tunnel your local server to the internet. You'll need this to expose the webhook you're going to set up later.
Initialize Your Node.js Project
- In your terminal, create a new directory for your project and navigate into it, then initialize a new Node.js project by running:
npm init -y
- Install required packages:
npm install express request body-parser
Set Up a Basic Express Server
- Create a new file named `app.js` and set up a basic Express server:
const express = require('express');
const bodyParser = require('body-parser');
const request = require('request');
const app = express();
app.use(bodyParser.json());
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server is running on port ${PORT}`));
Integrate Facebook Messenger API
- Set up the webhook endpoint for your chatbot. For this, add the following code in your `app.js`:
app.post('/webhook', (req, res) => {
const { body } = req;
if (body.object === 'page') {
body.entry.forEach(entry => {
let webhook_event = entry.messaging[0];
console.log(webhook_event);
});
res.status(200).send('EVENT_RECEIVED');
} else {
res.sendStatus(404);
}
});
- To verify the webhook, add:
app.get('/webhook', (req, res) => {
const VERIFY_TOKEN = "YOUR_VERIFY_TOKEN";
let mode = req.query['hub.mode'];
let token = req.query['hub.verify_token'];
let challenge = req.query['hub.challenge'];
if (mode && token) {
if (mode === 'subscribe' && token === VERIFY_TOKEN) {
console.log('WEBHOOK_VERIFIED');
res.status(200).send(challenge);
} else {
res.sendStatus(403);
}
}
});
- Replace `YOUR_VERIFY_TOKEN` with a random string of your choice and use it when setting up the Webhook URL on the Facebook Developer portal. Use `ngrok` to expose your local server to the internet:
ngrok http 5000
Implement Messaging Functionality
- Add functionality to respond to messages:
app.post('/webhook', (req, res) => {
const { body } = req;
if (body.object === 'page') {
body.entry.forEach(entry => {
let webhook_event = entry.messaging[0];
let sender_psid = webhook_event.sender.id;
if (webhook_event.message) {
handleMessage(sender_psid, webhook_event.message);
}
});
res.status(200).send('EVENT_RECEIVED');
} else {
res.sendStatus(404);
}
});
function handleMessage(sender_psid, received_message) {
let response;
if (received_message.text) {
response = {
"text": `You sent the message: "${received_message.text}". Now send me an image!`
}
}
callSendAPI(sender_psid, response);
}
function callSendAPI(sender_psid, response) {
let request_body = {
"recipient": {
"id": sender_psid
},
"message": response
}
request({
"uri": "https://graph.facebook.com/v9.0/me/messages",
"qs": { "access_token": "YOUR_PAGE_ACCESS_TOKEN" },
"method": "POST",
"json": request_body
}, (err, res, body) => {
if (!err) {
console.log('message sent!');
} else {
console.error("Unable to send message:" + err);
}
});
}
- Replace `YOUR_PAGE_ACCESS_TOKEN` with your actual Page Access Token obtained from the Facebook Developer console. Make sure your Page Access Token is kept secure and not committed to source control.
Deploy and Test Your Chatbot
- Ensure your webhook URL is configured correctly in the Facebook Developer Console with your `ngrok` URL.
- Engage your Page from a personal account and observe interactions with the bot.
- Iterate on the bot functionality by expanding the logic within `handleMessage` to include more interactions such as quick replies or handling attachments.
