सामग्री, जिसका अनुवाद आज हम आपके ध्यान में प्रस्तुत करते हैं, फेसबुक मैसेंजर के लिए चैट बॉट के विकास के लिए समर्पित है। A bot Bot नामक एक बॉट, उपयोगकर्ताओं के साथ संवाद करते हुए, उन्हें सुंदर बिल्लियों और कुत्तों की तस्वीरें भेजेगा।
शुरुआत हो रही है
आइए, आवश्यक फ़ील्ड्स भरकर
फेसबुक पर एक पेज बनाकर शुरू
करें । यह पृष्ठ बॉट के लिए है। इसके अलावा,
हम एक फेसबुक एप्लिकेशन
बनाएंगे , उसके बाद, एक उत्पाद जोड़ें पृष्ठ पर, हम मैसेंजर उत्पाद को एप्लिकेशन से कनेक्ट करेंगे। इसके बाद, हम खुद को मैसेंजर सेटिंग पेज पर पाएंगे। यहां आपको टोकन जेनरेशन सेक्शन ढूंढने की जरूरत है, इसमें - पेज लिस्ट में बॉट पेज को चुनें। उसके बाद, हमें अनुमतियों के बारे में पूछा जाएगा और एक पहुंच टोकन बनाया जाएगा। बॉट फेसबुक मैसेंजर एपीआई पर कॉल करने के लिए इस टोकन का उपयोग करेगा, जो इसे उपयोगकर्ताओं के साथ संवाद करने की अनुमति देगा।
वेब सर्वर सेटअप
हम HTTP सर्वर बनाने के लिए नोड.जेएस और एक्सप्रेस.जेएस का उपयोग करेंगे। निम्न आदेश चलाएँ:
npm install express body-parser request config
निम्न कोड को
index.js जोड़ें जो आपको एक सरल HTTP सर्वर बनाने की अनुमति देता है:
'use strict'; let express = require('express'), bodyParser = require('body-parser'), app = express(); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); app.listen(8989, () => console.log('Example app listening on port 8989!')); app.get('/', (req, res) => res.send('Hello World!'));
अब, यदि आप सर्वर शुरू करते हैं और
http://127.0.0.1:8989 पर अपने ब्राउज़र का उपयोग करते हुए जाते हैं, तो आपको सर्वर की प्रतिक्रिया के साथ एक पेज दिखाई देगा -
Hello World! ।
HTTPS और स्थानीय विकास वातावरण
Webhook प्रौद्योगिकी पर आगे बढ़ने से पहले, हमें विकास पर्यावरण के लिए HTTPS को कॉन्फ़िगर करने की आवश्यकता है। यदि आप स्व-हस्ताक्षरित एसएसएल प्रमाणपत्र का उपयोग करते हैं तो मैसेंजर हमारे सर्वर को सूचनाएं भेजने के लिए उपयोग किए जाने वाले वेबहूक पते को स्वीकार नहीं करेगा।
लेट्स एनक्रिप्ट से एक मुफ्त प्रमाण पत्र उपलब्ध है। हालांकि, आप केवल एक डोमेन के लिए एक प्रमाण पत्र प्राप्त कर सकते हैं, और एक आईपी पते के लिए नहीं। हम
ngrok सेवा का उपयोग करेंगे, जो आपको HTTPS का उपयोग करने वाले सार्वजनिक URL के माध्यम से स्थानीय सर्वर तक पहुंच व्यवस्थित करने की अनुमति देगा।
Ngrok सेटअप
ngrok आसान है। आपको प्रोजेक्ट साइट से केवल संपीड़ित
संग्रह डाउनलोड करना होगा, इसे अनज़िप करना होगा और निम्नलिखित कमांड को चलाना होगा:
./ngrok http 80
अपने राउटर की WAN सेटिंग्स में पोर्ट 80 से 8989 पर रीडायरेक्ट करें। परिणामस्वरूप,
ngrok स्थानीय सर्वर के लिए सार्वजनिक HTTP और HTTPS पते बनाएगा।
Webhook अधिसूचनाओं के साथ काम करना
मैसेंजर प्रमाणीकरण के लिए और आपके आवेदन की घटनाओं के बारे में सूचनाएं भेजने के लिए वेबहुक तकनीक का उपयोग करता है। एक प्रोग्रामिंग दृष्टिकोण से, यह सब HTTP अनुरोधों को संसाधित करने के सामान्य कॉलबैक कार्यों के लिए उबलता है जो घटनाओं के बारे में डेटा प्राप्त करेंगे, जैसे कि चैटबोट द्वारा प्राप्त संदेश। GET और POST अनुरोधों को पार्स करने के लिए, हम
body-parser मॉड्यूल का उपयोग करेंगे।
आवेदन के लिए निम्न मार्ग जोड़ें। यह Webhook सत्यापन अनुरोधों को संसाधित करने के लिए आवश्यक है।
// GET- webhook app.get('/webhook', (req, res) => { // . , let VERIFY_TOKEN = "SOMETHING_RANDOM"; // let mode = req.query['hub.mode']; let token = req.query['hub.verify_token']; let challenge = req.query['hub.challenge']; // , mode token if (mode && token) { // mode token if (mode === 'subscribe' && token === VERIFY_TOKEN) { // challenge console.log('WEBHOOK_VERIFIED'); res.status(200).send(challenge); } else { // '403 Forbidden' res.sendStatus(403); } } });
अब आपको मैसेंजर सेटिंग्स खोलने की जरूरत है, वहां वेबहुक अनुभाग ढूंढें और वेबहूक नोटिफिकेशन के साथ एप्लिकेशन एकीकरण को कॉन्फ़िगर करें। कॉलबैक URL फ़ील्ड में सेटिंग पृष्ठ पर, ngrok से प्राप्त हमारे HTTPS URL दर्ज करें। सत्यापन टोकन (जो कोड में मौजूद है और एक यादृच्छिक स्ट्रिंग का प्रतिनिधित्व करता है जिसे हमने बनाया था) को वेरिफाई टोकन फ़ील्ड में रखा जाना चाहिए। उसके बाद, आपको सत्यापन और सेव बटन पर क्लिक करके सेटिंग्स को सत्यापित करने और सहेजने में सक्षम होना चाहिए, यदि आपका URL वेबहूक सूचनाओं के प्रसंस्करण के लिए उपलब्ध है और सत्यापन टोकन कोड में एक से मेल खाता है।
Webhook सूचनाएँ प्राप्त करने के लिए आवेदन के लिए टोकन और URL कॉन्फ़िगर करेंसहेजने के बाद, ड्रॉप-डाउन सूची से अपने पृष्ठ का चयन करें और पृष्ठ घटनाओं की सदस्यता लें।
अब संदेशवाहक से POST घटनाओं को संभालने के लिए एक POST मार्ग बनाएं। आवेदन के लिए निम्न कोड जोड़ें।
// webhook app.post('/webhook', (req, res) => { let body = req.body; if (body.object === 'page') { // , body.entry.forEach(function(entry) { // entry.messaging , // , 0 let webhook_event = entry.messaging[0]; console.log(webhook_event); // PSID let sender_psid = webhook_event.sender.id; console.log('Sender PSID: ' + sender_psid); // , , message postback, // - if (webhook_event.message) { console.log(webhook_event.message) } else if (webhook_event.postback) { console.log(webhook_event.postback) } }); // '200 OK' res.status(200).send('EVENT_RECEIVED'); } else { // '404 Not Found', , res.sendStatus(404); } });
हम एप्लिकेशन सेट करते हैं ताकि यह दो प्रकार की घटनाओं को संभालता है -
message और
postback । वेबहूक सूचना तंत्र के संचालन की जांच करने के लिए, मैसेंजर खोलें और बॉट पेज पर एक संदेश भेजें। यदि सब कुछ उसी तरह से काम करता है जैसा कि प्रेषक के पीएसआईडी, घटना की जानकारी और संदेश सामग्री को लॉग इन करना होगा। अब हम हमारे लिए ब्याज की घटनाओं के लिए हैंडलर फ़ंक्शन लिखेंगे।
// message const handleMessage = (sender_psid, received_message) => { let response; if (received_message.text) { } } // postback const handlePostback = (sender_psid, received_postback) => { let response; // postback let payload = received_postback.payload; if(payload === 'GET_STARTED'){ } }
आने वाले संदेशों को संसाधित करने के लिए
handleMessage() विधि जिम्मेदार है, और आने वाली
postback घटनाओं के प्रसंस्करण
handlePostback() लिए
handlePostback() विधि
handlePostback() है। इन विधियों में कॉल जोड़कर अपने मौजूदा कोड को अपडेट करें:
// // - if (webhook_event.message) { handleMessage(sender_psid, webhook_event.message); } else if (webhook_event.postback) { handlePostback(sender_psid, webhook_event.postback); }
अब, जब हम
message या
postback प्राप्त करते
postback , तो डेटा को प्रेषक के PSID के साथ संबंधित हैंडलर को प्रेषित किया जाएगा।
बॉट के साथ बातचीत शुरू करने के लिए स्वागत स्क्रीन और पोस्टबैक घटनाओं को कॉन्फ़िगर करना
जब कोई नया उपयोगकर्ता बॉट के साथ बातचीत शुरू करता है, तो चैट विंडो में गेट स्टार्टेड बटन प्रदर्शित होता है। आप इस स्थिति के लिए अपने स्वयं के पोस्टबैक ईवेंट को कॉन्फ़िगर कर सकते हैं। उदाहरण के लिए, उपयोगकर्ता के लिए एक संदेश सेट करें जो बॉट का वर्णन करता है और इसके साथ कैसे संवाद करना है। अपने स्वयं के ग्रीटिंग को कॉन्फ़िगर करने के लिए, इस
curl कमांड को टर्मिनल में चलाएं:
curl -X POST -H "Content-Type: application/json" -d '{ "greeting": [ { "locale":"default", "text":"Hello {{user_first_name}}! Are you ready to see the cutests cats and dogs" } ] }' "https://graph.facebook.com/v2.6/me/messenger_profile?access_token=YOUR_PAGE_ACCESS_TOKEN"
हमने एएवी बॉट की स्थापना की ताकि यह एक संदेश प्रदर्शित करे जो उपयोगकर्ता से पूछ रहा है कि क्या वह सबसे प्यारे बिल्लियों और कुत्तों को देखने के लिए तैयार है। पोस्टबैक ईवेंट को कॉन्फ़िगर करने के लिए, टर्मिनल में इस कमांड को निष्पादित करें:
curl -X POST -H "Content-Type: application/json" -d '{ "get_started": {"payload": "GET_STARTED"} }' "https://graph.facebook.com/v2.6/me/messenger_profile?access_token=YOUR_PAGE_ACCESS_TOKEN"
यहां बॉट के साथ चैट सत्र कैसा दिखता है।
स्टार्टिंग स्क्रीनअनुप्रयोग सेटअप
पेज एक्सेस टोकन को एक अलग कॉन्फ़िगरेशन फ़ाइल में संग्रहीत करने के लिए हम npm कॉन्फ़िगरेशन मॉड्यूल का उपयोग करेंगे। हमारी परियोजना में
config निर्देशिका और उसमें
default.json फ़ाइल बनाएँ। इस फ़ाइल में, आपको पृष्ठ पर पहुँच टोकन जोड़ने और इस फ़ाइल को
.gitignore में रिकॉर्ड करने की आवश्यकता है।
{ "facebook": { "page": { "access_token": "PAGE_ACCESS_TOKEN" } } }
हमें
callSendAPI() विधि में
callSendAPI() config.get('facebook.page.access_token') कमांड का उपयोग करके पेज एक्सेस टोकन मिलेगा।
एक स्टार्ट इवेंट को हैंडल करना
यहां स्टार्ट इवेंट हैंडलिंग कोड है।
const handlePostback = (sender_psid, received_postback) => { let response;
आइए
askTemplate() विधि बनाएं, जो मैसेंजर एपीआई के लिए एक सही ढंग से तैयार की गई प्रतिक्रिया वस्तु
askTemplate() ।
callSendAPI() विधि उपयोगकर्ता को एक संदेश भेज देगी। आवेदन करने के लिए निम्नलिखित तरीके जोड़ें:
const askTemplate = (text) => { return { "attachment":{ "type":"template", "payload":{ "template_type":"button", "text": text, "buttons":[ { "type":"postback", "title":"Cats", "payload":"CAT_PICS" }, { "type":"postback", "title":"Dogs", "payload":"DOG_PICS" } ] } } } } // API Send const callSendAPI = (sender_psid, response, cb = null) => { // let request_body = { "recipient": { "id": sender_psid }, "message": response }; // HTTP- Messenger Platform request({ "uri": "https://graph.facebook.com/v2.6/me/messages", "qs": { "access_token": config.get('facebook.page.access_token') }, "method": "POST", "json": request_body }, (err, res, body) => { if (!err) { if(cb){ cb(); } } else { console.error("Unable to send message:" + err); } }); }
हम उपयोगकर्ता को दो बटन और टेक्स्ट वाला संदेश भेजते हैं। जब उपयोगकर्ता उचित बटन पर क्लिक करके अपनी आवश्यकता का चयन करता है, तो
postback ईवेंट के डेटा के साथ हमारे वेबहुक पते पर एक अनुरोध भेजा जाएगा और हम इसे संसाधित करेंगे।
उपयोगकर्ता को उस छवि के प्रकार का चयन करने के लिए प्रेरित किया जाता है जो उसे रुचि देता है।कस्टम पोस्टबैक ईवेंट्स को हैंडल करना
पोस्टबैक ईवेंट हैंडलर फ़ंक्शन कोड अपडेट करें:
const handlePostback = (sender_psid, received_postback) => { let response; // postback- let payload = received_postback.payload; // , if (payload === 'CAT_PICS') { response = imageTemplate('cats', sender_psid); callSendAPI(sender_psid, response, function(){ callSendAPI(sender_psid, askTemplate('Show me more')); }); } else if (payload === 'DOG_PICS') { response = imageTemplate('dogs', sender_psid); callSendAPI(sender_psid, response, function(){ callSendAPI(sender_psid, askTemplate('Show me more')); }); } else if(payload === 'GET_STARTED'){ response = askTemplate('Are you a Cat or Dog Person?'); callSendAPI(sender_psid, response); } // }
जब उपयोगकर्ता
Cats बटन पर क्लिक करता है, तो Webhook सूचनाओं को संसाधित करने के लिए उपयोग किए जाने वाले हमारे पते पर
CAT_PICS डेटा वाले
postback ईवेंट के साथ एक अनुरोध
CAT_PICS जाएगा।
Dogs विकल्प चुनने पर
DOG_PICS डेटा के साथ
postback ईवेंट भेजा जाएगा। हमने सिस्टम में एक और तरीका जोड़ा,
imageTemplate() , जो एक बिल्ली या कुत्ते की छवि के लिंक वाला संदेश देता है।
एक साधारण एपीआई बनाएं जो छवि लिंक लौटाता है
हम बिल्लियों या कुत्तों की छवियों के लिंक को वापस करने के लिए एक सरल एपीआई लिखेंगे जो उपयोगकर्ताओं द्वारा बॉट द्वारा भेजे गए संदेशों में उपयोग किए जाएंगे।
pics.js फ़ाइल बनाएँ और इसमें निम्न कोड जोड़ें:
module.exports = { cats : [ 'https://i.imgur.com/Qbg7CeM.jpg', 'https://i.imgur.com/nUzkpJY.jpg', 'https://i.imgur.com/NpDcKph.jpg', 'https://i.imgur.com/oJtSDaO.jpg', 'https://i.redd.it/82ajpsrd17111.jpg', 'https://i.redd.it/00km1d2rt0111.jpg', 'https://i.redd.it/rdbavhp0y7111.jpg', 'https://i.redd.it/5hn3mg0n98111.jpg', 'https://i.redd.it/d23pb8mta6111.jpg', 'https://i.redd.it/d2gyrwgy7oz01.jpg', 'https://i.redd.it/z4sgl84q72z01.jpg', 'https://i.redd.it/wvykzo8n1cy01.jpg' ], dogs : [ 'https://i.redd.it/6tjihi2qe7111.jpg', 'https://i.imgur.com/etRCs56.jpg', 'https://i.redd.it/nibw50f8y4111.jpg', 'https://i.redd.it/izcvnvj1o7111.jpg', 'https://i.redd.it/eqs1g9dldz011.jpg', 'https://i.redd.it/civ9dnu9u1111.jpg', 'https://i.redd.it/kk03qwclkp011.jpg', 'https://i.redd.it/2694pupjne011.jpg', 'https://i.redd.it/qk49ls5y6oy01.jpg', 'https://i.imgur.com/oM3mKgB.jpg', 'https://i.redd.it/8kx2riaulux01.jpg' ] };
अब इसे एप्लिकेशन में कनेक्ट करें।
images = require('./pics');
छवि के लिए लिंक वाला संदेश लिखने के लिए उपयोग किए गए कोड में निम्न विधि जोड़ें।
const = imageTemplate(type, sender_id) => { return { "attachment":{ "type":"image", "payload":{ "url": getImage(type, sender_id), "is_reusable":true } } } }
बॉट के साथ उपयोगकर्ता इंटरैक्शन की प्रक्रिया में, चित्रों को क्रम से सरणी से निकाला जाता है और उपयोगकर्ता को बॉट प्रतिक्रिया के रूप में भेजा जाता है। अंतिम छवि भेजने के बाद, हम सूची के शीर्ष पर लौट आते हैं।
हम प्रोजेक्ट में निम्नलिखित कोड जोड़ते हैं, जो बॉट के साथ संचार करने वाले उपयोगकर्ताओं के डेटा को स्टोर और प्रोसेस करने के लिए डिज़ाइन किया गया है।
let users = {}; const = getImage(type, sender_id) => { // - if(users[sender_id] === undefined){ users = Object.assign({ [sender_id] : { 'cats_count' : 0, 'dogs_count' : 0 } }, users); } let count = images[type].length, // user = users[sender_id], // , user_type_count = user[type+'_count']; // let updated_user = { [sender_id] : Object.assign(user, { [type+'_count'] : count === user_type_count + 1 ? 0 : user_type_count + 1 }) }; // users = Object.assign(users, updated_user); console.log(users); return images[type][user_type_count]; }
हम
users ऑब्जेक्ट में एक कुंजी के रूप में बॉट के साथ संचार करने वाले प्रत्येक उपयोगकर्ताओं के पीएसआईडी को स्टोर करते हैं। यदि अभी तक कोई उपयोगकर्ता रिकॉर्ड नहीं है, तो एक नया रिकॉर्ड बनाएं। उपयोगकर्ता द्वारा बिल्ली या कुत्ते की तस्वीर का अनुरोध करने पर हम हर बार छवि संख्या की जानकारी को अपडेट करेंगे। फिर हम उस छवि के पूर्ण पथ को वापस करते हैं जिसका उपयोग संदेश टेम्पलेट में किया जाएगा। अगला, हम
postback ईवेंट में प्रतिक्रिया के रूप में छवि के साथ एक संदेश भेजते हैं, जब उपयोगकर्ता उस छवि के प्रकार का चयन करता है जो उसे रुचती है।
// , postback- if (payload === 'CAT_PICS') { response = imageTemplate('cats', sender_psid); callSendAPI(sender_psid, response, function(){ callSendAPI(sender_psid, askTemplate('Show me more')); }); } else if (payload === 'DOG_PICS') { response = imageTemplate('dogs', sender_psid); callSendAPI(sender_psid, response, function(){ callSendAPI(sender_psid, askTemplate('Show me more')); }); } else if(payload === 'GET_STARTED'){ response = askTemplate('Are you a Cat or Dog Person?'); callSendAPI(sender_psid, response); }
इसके अलावा, छवि भेजने के बाद, हम उपयोगकर्ता को एक नया प्रश्न भेजने के लिए
callSendAPI() विधि में एक कॉलबैक फ़ंक्शन पास करते हैं जिसके बारे में वह रुचि रखता है। सफल होने पर, हम इस फ़ंक्शन को कहते हैं। यह कार्य योजना, कॉलबैक फ़ंक्शंस की अतुल्यकालिक प्रकृति को ध्यान में रखते हुए, उपयोगकर्ता को पहले से अनुरोध की गई छवि के साथ एक संदेश भेजे जाने के बाद अगली छवि के बारे में एक प्रश्न के साथ एक संदेश प्राप्त करने की अनुमति देता है।
बॉट के साथ संचारपरिणाम
यहाँ इस परियोजना के लिए भंडार है। वहाँ,
readme.md फ़ाइल में, आप बॉट को स्थापित करने और कॉन्फ़िगर करने के लिए निर्देश पा सकते हैं। अन्य लोगों को आपके बॉट के साथ चैट करने के लिए, आपके फेसबुक एप्लिकेशन को अनुमोदित होना चाहिए। इस बिंदु तक केवल आपके आवेदन के व्यवस्थापक और परीक्षक बॉट के साथ बात कर पाएंगे।
यहां एक वीडियो बॉट के साथ संचार करने की प्रक्रिया को प्रदर्शित करता है।
प्रिय पाठकों! क्या आप फेसबुक मैसेंजर के लिए बॉट बनाने की योजना बना रहे हैं?
