Materi, terjemahan yang kami sajikan untuk perhatian Anda hari ini, dikhususkan untuk pengembangan bot obrolan untuk Facebook Messenger. Bot bernama Aww Bot, yang berkomunikasi dengan pengguna, akan mengirimi mereka gambar kucing dan anjing lucu.
Memulai
Mari kita mulai dengan membuat halaman di
Facebook dengan mengisi kolom yang diperlukan. Halaman ini untuk bot. Selain itu,
kami akan membuat aplikasi Facebook, setelah itu, pada halaman Tambahkan Produk, kami akan menghubungkan produk Messenger ke aplikasi. Selanjutnya, kita akan menemukan diri kita di halaman pengaturan messenger. Di sini Anda perlu menemukan bagian Pembuatan Token, di dalamnya - pilih halaman bot dalam daftar Halaman. Setelah itu, kita akan ditanya tentang izin dan token akses akan dibuat. Bot akan menggunakan token ini untuk melakukan panggilan ke Facebook Messenger API, yang akan memungkinkannya untuk berkomunikasi dengan pengguna.
Penyiapan server web
Kami akan menggunakan node.js dan express.js untuk membuat server HTTP. Jalankan perintah berikut:
npm install express body-parser request config
Tambahkan kode berikut ke
index.js yang memungkinkan Anda membuat server HTTP sederhana:
'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!'));
Sekarang, jika Anda memulai server dan pergi, menggunakan browser Anda, di
http://127.0.0.1:8989 , Anda akan melihat halaman dengan respons server -
Hello World! .
HTTPS dan lingkungan pengembangan lokal
Sebelum beralih ke teknologi Webhook, kita perlu mengkonfigurasi HTTPS untuk lingkungan pengembangan. Messenger tidak akan menerima alamat Webhook yang digunakan untuk mengirim pemberitahuan ke server kami jika Anda menggunakan sertifikat SSL yang ditandatangani sendiri. Sertifikat gratis tersedia dari
Let's Encrypt . Di sini, bagaimanapun, Anda bisa mendapatkan sertifikat hanya untuk domain, dan bukan untuk alamat IP. Kami akan menggunakan layanan
ngrok , yang akan memungkinkan Anda untuk mengatur akses ke server lokal melalui URL publik yang menggunakan HTTPS.
Pengaturan Ngrok
ngrok mudah. Anda hanya perlu mengunduh
arsip terkompresi dari situs proyek, unzip dan jalankan perintah berikut:
./ngrok http 80
Ingatlah untuk mengalihkan port 80 ke 8989 di pengaturan WAN router Anda. Akibatnya,
ngrok akan membuat alamat HTTP dan HTTPS publik untuk server lokal.
Bekerja dengan Notifikasi Webhook
Utusan menggunakan teknologi Webhook untuk otentikasi dan untuk mengirim pemberitahuan tentang acara ke aplikasi Anda. Dari sudut pandang pemrograman, semua ini bermuara pada fungsi callback biasa untuk memproses permintaan HTTP yang akan menerima data tentang peristiwa, seperti pesan yang diterima oleh chatbot. Untuk mem-parsing permintaan GET dan POST, kita akan menggunakan modul
body-parser .
Tambahkan rute berikut ke aplikasi. Ini diperlukan untuk memproses permintaan verifikasi 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); } } });
Sekarang Anda perlu membuka pengaturan messenger, cari bagian Webhooks di sana dan konfigurasikan integrasi aplikasi dengan notifikasi Webhook. Pada halaman pengaturan, di bidang URL Callback, masukkan URL HTTPS kami yang diterima dari ngrok. Token verifikasi (yang ada dalam kode dan mewakili string acak yang kami buat) harus ditempatkan di bidang Verifikasi Token. Setelah itu, Anda harus dapat memverifikasi dan menyimpan pengaturan dengan mengklik tombol Verifikasi dan Simpan jika URL Anda untuk memproses pemberitahuan Webhook tersedia dan token verifikasi cocok dengan yang ada dalam kode.
Konfigurasikan token dan URL untuk aplikasi untuk menerima pemberitahuan WebhookSetelah menyimpan, pilih halaman Anda dari daftar drop-down dan berlangganan acara halaman.
Sekarang buat rute POST untuk menangani acara POST dari messenger. Tambahkan kode berikut ke aplikasi.
// 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); } });
Kami mengatur aplikasi sehingga menangani dua jenis peristiwa -
message dan
postback . Untuk memeriksa operasi mekanisme notifikasi Webhook, buka messenger dan kirim pesan ke halaman bot. Jika semuanya berjalan sebagaimana mestinya, PSID pengirim, informasi acara, dan konten pesan akan dicatat. Sekarang kita akan menulis fungsi penangan untuk acara yang menarik bagi kita.
// 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'){ } }
Metode
handleMessage() bertanggung jawab untuk memproses pesan masuk, dan metode
handlePostback() untuk memproses kejadian
postback masuk. Perbarui kode Anda yang ada dengan menambahkan panggilan ke metode ini:
// // - if (webhook_event.message) { handleMessage(sender_psid, webhook_event.message); } else if (webhook_event.postback) { handlePostback(sender_psid, webhook_event.postback); }
Sekarang, ketika kami menerima
message atau
postback , data akan dikirim ke penangan yang sesuai bersama dengan PSID pengirim.
Mengkonfigurasi layar pembuka dan acara postback untuk memulai dialog dengan bot
Ketika pengguna baru memulai percakapan dengan bot, tombol Memulai ditampilkan di jendela obrolan. Anda dapat mengonfigurasi acara postback Anda sendiri untuk situasi ini. Misalnya, atur pesan untuk pengguna yang menjelaskan bot dan cara berkomunikasi dengannya. Untuk mengkonfigurasi ucapan Anda sendiri, jalankan perintah
curl ini di terminal:
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"
Kami menyiapkan Aww Bot sehingga menampilkan pesan yang menanyakan pengguna apakah ia siap untuk melihat kucing dan anjing yang paling lucu. Untuk mengonfigurasi acara postback, jalankan perintah ini di terminal:
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"
Seperti apa sesi obrolan dengan bot tersebut.
Layar MemulaiPengaturan aplikasi
Kami akan menggunakan modul konfigurasi npm untuk menyimpan token akses halaman dalam file konfigurasi terpisah. Buat direktori
config di proyek kami dan file
default.json di dalamnya. Dalam file ini, Anda perlu menambahkan token akses ke halaman dan merekam file ini di
.gitignore .
{ "facebook": { "page": { "access_token": "PAGE_ACCESS_TOKEN" } } }
Kami akan mendapatkan token akses halaman dalam metode
callSendAPI() menggunakan perintah
config.get('facebook.page.access_token') .
Menangani acara mulai
Berikut adalah kode penanganan acara mulai.
const handlePostback = (sender_psid, received_postback) => { let response;
Mari kita buat metode
askTemplate() , yang akan mengembalikan objek respons yang disiapkan dengan benar untuk API messenger. Metode
callSendAPI() akan mengirim pesan kepada pengguna. Tambahkan metode berikut ke aplikasi:
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); } }); }
Kami mengirim pesan kepada pengguna yang berisi dua tombol dan teks. Ketika pengguna memilih apa yang dia butuhkan dengan mengklik tombol yang sesuai, permintaan akan dikirim ke alamat Webhook kami dengan data acara
postback dan kami akan memprosesnya.
Pengguna diminta untuk memilih jenis gambar yang menarik baginya.Menangani acara postback khusus
Perbarui kode fungsi pengendali acara 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); } // }
Ketika pengguna mengklik tombol
Cats , permintaan dengan acara
postback yang berisi data
CAT_PICS akan
CAT_PICS ke alamat kami yang digunakan untuk memproses pemberitahuan Webhook. Memilih opsi
Dogs akan mengirimkan acara
postback dengan data
DOG_PICS . Kami menambahkan metode lain ke sistem,
imageTemplate() , yang mengembalikan pesan yang berisi tautan ke gambar kucing atau anjing.
Buat API sederhana yang mengembalikan tautan gambar
Kami akan menulis API sederhana untuk mengembalikan tautan ke gambar kucing atau anjing yang akan digunakan dalam pesan yang dikirim oleh bot ke pengguna. Buat file
pics.js dan tambahkan kode berikut ke dalamnya:
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' ] };
Sekarang sambungkan ke aplikasi.
images = require('./pics');
Tambahkan metode berikut ke kode yang digunakan untuk menulis pesan yang berisi tautan ke gambar.
const = imageTemplate(type, sender_id) => { return { "attachment":{ "type":"image", "payload":{ "url": getImage(type, sender_id), "is_reusable":true } } } }
Dalam proses interaksi pengguna dengan bot, gambar diekstraksi secara berurutan dari array dan dikirim sebagai respons bot kepada pengguna. Setelah mengirim gambar terakhir, kami kembali ke atas daftar.
Kami menambahkan kode berikut ke proyek, yang dirancang untuk menyimpan dan memproses data tentang pengguna yang berkomunikasi dengan bot.
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]; }
Kami menyimpan PSID dari setiap pengguna yang berkomunikasi dengan bot sebagai kunci dalam objek
users . Jika belum ada catatan pengguna, buat catatan baru. Kami akan memperbarui informasi nomor gambar setiap kali pengguna meminta gambar kucing atau anjing. Kemudian kami mengembalikan jalur absolut ke gambar yang akan digunakan dalam templat pesan. Selanjutnya, kami mengirim pesan dengan gambar dalam bentuk respons terhadap peristiwa
postback yang dihasilkan ketika pengguna memilih jenis gambar yang menarik baginya.
// , 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); }
Selain itu, setelah mengirim gambar, kami meneruskan fungsi panggilan balik ke metode
callSendAPI() untuk mengirim pertanyaan baru kepada pengguna tentang gambar yang ia minati. Jika berhasil, kami memanggil fungsi ini. Skema kerja ini, dengan mempertimbangkan sifat asinkron dari fungsi callback, memungkinkan pengguna untuk menerima pesan dengan pertanyaan tentang gambar berikutnya setelah pesan dikirim kepadanya dengan gambar yang diminta sebelumnya.
Komunikasi dengan botRingkasan
Ini adalah repositori untuk proyek ini. Di sana, di file
readme.md , Anda dapat menemukan instruksi untuk menginstal dan mengkonfigurasi bot. Agar orang lain dapat mengobrol dengan bot Anda, aplikasi Facebook Anda harus disetujui. Hingga saat ini hanya administrator dan penguji aplikasi Anda yang dapat berbicara dengan bot.
Ini adalah video yang menunjukkan proses berkomunikasi dengan bot.
Pembaca yang budiman! Apakah Anda berencana membuat bot untuk Facebook Messenger?
