Series gồm 3 phần:
- Giới thiệu một số khái niệm, cơ chế hoạt động của Facebook bot
- Hướng dẫn cách code và test bot Facebook
- Cách deploy bot và nộp cho Facebook xét duyệt
Thấy các bạn test hộ nhiều quá, mình rất cảm động nên đã thêm chức năng “đàm luận nhân sinh” vào bot để các bạn có người chém gió nhe. Các bạn có thể tiếp tục trò chuyện với bot tại m.me/toidicodedao nhé
Ở phần trước, mình đã giới thiệu cơ chế hoạt động của bot Faceobok, cùng với một số khái niệm các bạn cần nắm rõ. Ở bài này, chúng ta sẽ bắt tay vào tạo fanpage và code nhé. Lần này mình hướng dẫn bằng video, các bạn bật phụ đề lên xem nhé.
Bước 1 – Tạo Fanpage, thêm chức năng Messenger
Các bạn làm theo clip dưới để tạo fanpage nhé. Với bạn nào đã có Fanpage thì xem đoạn sau để tích hợp chức năng Messenger vào fanpage.
Tính mình thích ngắn gọn, không muốn lê thê dài dòng nên video cũng rất ngắn gọn, chỉ khoảng 1-2 phút để không lãng phí thời gian của mọi người.
Bước 2 – Tạo Webhook và kết nối với Fanpage
Như mình đã nói ở bài trước, viết bot bằng ngôn ngữ gì cũng được, chỉ tạo được webhook và gọi được RestAPI là ok. Tuy nhiên, Facebook sẽ check Webhook của bạn, đòi hỏi webhook phải là https. Việc code và deploy webhook sẽ khá phiền phức, do đó chúng ta sử dụng Cloud9 – IDE trên mây. Các bạn xem lại bài cũ để biết sơ cách sử dụng nhé.
Sau khi đăng nhập vào cloud9, bạn làm theo các bước sau nhé. Link Github chứa code là https://github.com/ToiDiCodeDaoSampleCode/facebook-chat-bot
Bạn đã thành công trong việc tạo Webhook và kết nối nó với fanpage. Mỗi khi có người nhắn tin cho fanpage, bot server sẽ nhận được tin nhắn. Bắt đầu viết code xử lý tin nhắn thôi nào.
Bước 3 – Xử lý tin nhắn và trả lời
Mỗi khi có tin nhắn, facebook sẽ POST một request như sau lên Webhook của chúng ta (Thông tin chi tiết về webhook ở đây).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"object":"page", | |
"entry":[ | |
{ | |
"id": "PAGE_ID", | |
"time":1457764198246, | |
"messaging":[ | |
{ | |
"sender":{ | |
"id":"USER_ID" | |
}, | |
"recipient":{ | |
"id":"PAGE_ID" | |
}, | |
"timestamp":1457764197627, | |
"message":{ | |
"mid":"mid.1457764197618:41d102a3e1ae206a38", | |
"seq":73, | |
"text":"hello, world!" | |
} | |
} | |
] | |
} | |
] | |
} |
Ta đọc trường messaging.message.text, xử lý và gửi chuỗi JSON sau đến RestAPI của facebook để trả lời (Thông tin chi tiết về API ở đây).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"recipient":{ | |
"id":"USER_ID" | |
}, | |
"message":{ | |
"text":"hello, world!" | |
} | |
} |
Các bạn tiếp tục làm theo video nhé
Đây là file server.js thành quả cho các bạn ko đọc được code. Nhớ gắn token của bạn vào để chạy!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// # SimpleServer | |
// A simple chat bot server | |
var logger = require('morgan'); | |
var http = require('http'); | |
var bodyParser = require('body-parser'); | |
var express = require('express'); | |
var router = express(); | |
var app = express(); | |
app.use(logger('dev')); | |
app.use(bodyParser.json()); | |
app.use(bodyParser.urlencoded({ | |
extended: false | |
})); | |
var server = http.createServer(app); | |
var request = require("request"); | |
app.get('/', (req, res) => { | |
res.send("Home page. Server running okay."); | |
}); | |
// Đây là đoạn code để tạo Webhook | |
app.get('/webhook', function(req, res) { | |
if (req.query['hub.verify_token'] === 'ma_xac_minh_cua_ban') { | |
res.send(req.query['hub.challenge']); | |
} | |
res.send('Error, wrong validation token'); | |
}); | |
// Xử lý khi có người nhắn tin cho bot | |
app.post('/webhook', function(req, res) { | |
var entries = req.body.entry; | |
for (var entry of entries) { | |
var messaging = entry.messaging; | |
for (var message of messaging) { | |
var senderId = message.sender.id; | |
if (message.message) { | |
// If user send text | |
if (message.message.text) { | |
var text = message.message.text; | |
console.log(text); // In tin nhắn người dùng | |
sendMessage(senderId, "Tui là bot đây: " + text); | |
} | |
} | |
} | |
} | |
res.status(200).send("OK"); | |
}); | |
// Gửi thông tin tới REST API để trả lời | |
function sendMessage(senderId, message) { | |
request({ | |
url: 'https://graph.facebook.com/v2.6/me/messages', | |
qs: { | |
access_token: "token", | |
}, | |
method: 'POST', | |
json: { | |
recipient: { | |
id: senderId | |
}, | |
message: { | |
text: message | |
}, | |
} | |
}); | |
} | |
app.set('port', process.env.OPENSHIFT_NODEJS_PORT || process.env.PORT || 3002); | |
app.set('ip', process.env.OPENSHIFT_NODEJS_IP || process.env.IP || "127.0.0.1"); | |
server.listen(app.get('port'), app.get('ip'), function() { | |
console.log("Chat bot server listening at %s:%d ", app.get('ip'), app.get('port')); | |
}); |
Hiện giờ bạn có thể test và viết thêm chức năng cho bot của mình được rồi đấy. Ở phần 3 mình sẽ hướng dẫn cách deploy bot lên server và submit cho Facebook duyệt nhé.
Hay quá, Hoàng dúng là thần tượng trong lòng anh :v
LikeLike
Anh Hoàng ơi!
Cái này là phải đưa code của mình lên Github trước hả anh.
LikeLike
Ko cần, a đưa lên github để mọi người dễ copy code thôi 😉
LikeLiked by 1 person
Hehe làm được rồi, tks anh Hoàng nha… Hóng part 3 sướng quá :3
LikeLike
Dạ bác share e vs ah.
LikeLike
cái ‘ma_xac_minh_cua_ban’ là gì vậy a Hoàng? là Page Access Token hả a?
LikeLike
Chuỗi gì ko rỗng là đc, chỉ cần set bên facebook app rồi check trong botserver là đv
LikeLiked by 1 person
Cái này bạn sẽ điền vào phần setting webhook.
LikeLike
a ơi cái lúc cmd np gì z anh em nhìn k thấy
LikeLike
Bật subtitle lên nhé.
LikeLike
Phần 3 có còn dài không a 🙂 Hi vọng a ra sớm. (Phần 3 ~ End luôn hay còn phần nào nữa không a)
LikeLike
Phần 3 thứ 3 có nhé 😉
LikeLike
Phần 3, 4 a chưa post nhưng e có xem qua video trong kênh của a rồi :v nhưng ở phần sử dụng git trên openshift để đưa source code lên server e làm mãi không được (vì xưa giờ e đưa code php lên openshift không dùng git). Nodejs nó sẽ được upload lên thư mục nào của openshift khi không dùng git vậy a 🙂
LikeLike
Ko dùng git thì a chịu :)), lúc dùng git ko chỉ copy file mà nó còn build lại, truyền biến môi trường v..v vào nữa. Nếu đã code bằng NodeJS thì em cứ làm theo hướng dẫn mà deploy bằng git thôi?
LikeLike
cái này có dùng java để code được không
LikeLike
Được
LikeLike
mình cũng làm được 1 con bot, tuy nhiên cách xử lý các button post back về thì làm thế nào nhỉ. Ví dụ: mình tạo ra 2 nút (1 nút là tán gẫu, 1 nút là xem hình ngẫu nhiên). làm thế nào để biết nút nào được bấm mà xử lý nhỉ.
Mình dùng PHP, sau đây là file webhook.php của mình.
$input = json_decode(file_get_contents(‘php://input’), true);
$sender = $input[‘entry’][0][‘messaging’][0][‘sender’][‘id’]; //sender facebook id
$message = $input[‘entry’][0][‘messaging’][0][‘message’][‘text’]; //text that user sent
$payload= $input[‘entry’][0][‘messaging’][0][‘postback’][‘payload’];// get payload => nhưng biến này không có giá trị, khi mình bấm nút có postbank
Thank you
LikeLike
Lúc gửi button cho người dùng thì bạn phải set payload cho button trước nhé:
https://developers.facebook.com/docs/messenger-platform/send-api-reference
LikeLike
Anh ơi, làm sao để e làm cái Greeting lúc bắt đầu dc vậy anh, e mò mãi còn mỗi phần step 1 này thì chịu ạ
LikeLike
Ở đây nhé: https://developers.facebook.com/docs/messenger-platform/guidelines#get_started
LikeLike
Cám ơn bạn nhé!
LikeLike
Anh ơi em không đăng kí được tài khoản cloud9 vậy em dùng codeanywhere hay Codeenvy có được không ạ
LikeLike
Thằng nào chạy được NodeJS thì dùng e nhé 😉
LikeLike
cái chỗ anh nhập npm install người ta gọi là command phải không ạ?
LikeLike
Uhm
LikeLike
codeanywhere nó không có nút run cho file mà nó chỉ có run project, vậy có cách khác để chạy file server.js không anh
LikeLike
Tự mò nhé, a ko dùng nên ko biết
LikeLike
Error: Cannot find module ‘morgan’
at Function.Module._resolveFilename (module.js:325:15)
at Function.Module._load (module.js:276:25)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (/home/ubuntu/workspace/server.js:3:14)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
Nó báo lỗi như trên là bị gì vậy nhỉ
LikeLike
Chắc e chưa chạy npm íntall, xem kĩ lại clip nhé.
LikeLiked by 1 person
Mình không login đc tài khoản github vào trang c9
LikeLike
Gần đây nó bắt dùng credit card để xác nhận mới đăng ký đc bạn nhé :(.
LikeLike
Ai làm giúp em với ạ :((( bot em hư rồi :(((
LikeLike
Bạn để lại số điện thoại hoặc gọi cho mình nhé, mình set giúp cho 0977557435
LikeLike
Hôm nay làm theo tut của anh, facebook đã verify thành công nhưng chat với bot thì không có phản hồi nào cả.
– Em debug thì thấy facebook k gửi POST request lên cho app?.
– Em thấy app dùng api 2.6 mà bây giờ facebook support 2.8 em thử sửa lại thành 2.8 trong app nhưng cũng không thành công.
giờ em phải làm gì :v?
LikeLike
Em kiểm tra xem sau khi Setup Webhook thì đã subscribe chưa nhé (Xem lại đoạn cuối phần 2, từ giây thứ 50 ấy).
LikeLike
có cách nào dùng cho tài khoản cá nhân duoc k anh
LikeLike
Hình như ko đâu e.
LikeLike
Hướng dẫn tạo ngân hàng câu trả lời luôn bạn ơi :D\
LikeLike
hay quá em làm đc rồi cảm ơn anh
LikeLike
Chào anh Hoàng , em rất cảm ơn anh đã hướng dẫn bài viết này
em đã làm theo và mắc 1 lỗi là khi mình gửi tin nhắn nhưng group không nhắn lại ạ anh xem giúp em với, anh có thể xem ảnh này, khi mình gửi tin nhắn thì chương trình vẫn nhận được và log ra màn hình ạ
[img]http://wtai.cf/f/1634/code.png[/img]
LikeLike
Em check lại xem đã thay access token ở dòng 57 thành token của trang mình chưa nhé ;).
LikeLike
rồi anh ạ , em làm từng bước mà anh,em lấy token như trong video của anh mà, hay facebook mới có cái gì khác không ạ
LikeLike
à ok rồi anh ơi, đang trong chế độ phát triển nên chỉ tương tác với quản trị viên, cảm ơn anh
LikeLike
Ơ a có nói rõ ở đoạn đầu phần 3 rồi mà 🙂
LikeLike
Cho em hỏi là khi chạy npm install thì hiện WARN là “No repository field” và “No license field” . Lỗi này là sao vậy anh ?
LikeLike
warning thì chỉ là thiếu trường trong file package.json thôi, ko ảnh hưởng gì đâu em.
LikeLike
mà token của mình sẽ điền vào đâu vậy anh
LikeLike
mình bị lỗi này khi run server.js
(node:13872) [DEP0062] DeprecationWarning: `node –debug` and `node –debug-brk` are invalid. Please use `node –inspect` or `node –inspect-brk` instead.
LikeLike
node: bad option: –nocrankshaft
Process exited with code: 9
anh cho em hỏi lỗi trên là lỗi gì ạ
LikeLike
node: bad option: –nocrankshaft
Process exited with code: 9
Sao e chạy server.js thì nó bị lỗi thế a?
LikeLike
Cái này hình như lỗi của cloud9. E dùng glitch.com hoặc codeanywhere nhé 😉
LikeLike
anh ơi làm theo phần 3 là đc ạ. Sao em làm theo mà k đc a. gửi tin nhắn xong k nhận đc để trả lời ạ
LikeLike
a ơi cho em hỏi . em làm con bot đặt server trên codeenywhere . mà nt thì thấy server đã nhận được tin nhắn , nhưng mà nó không tự động trả lời ? a có thể cho em chút lời khuyên được không ?thanks a
LikeLike
Hay quá mà phức tạp quá. Có bạn nào làm dịch vụ tạo chatbot cho fanpafe không vậy?
LikeLike
Giờ có harafunnel rồi, mình dùng tạo chatbot messenger khỏe lắm 🙂 . https://harafunnel.com
LikeLike
Em gặp lỗi này do đâu hả anh ?
Error: listen EADDRINUSE 127.0.0.1:8080
at Object.exports._errnoException (util.js:1020:11)
at exports._exceptionWithHostPort (util.js:1043:20)
at Server._listen2 (net.js:1271:14)
at listen (net.js:1307:10)
at net.js:1417:9
at _combinedTickCallback (internal/process/next_tick.js:83:11)
at process._tickCallback (internal/process/next_tick.js:104:9)
at Timeout.Module.runMain [as _onTimeout] (module.js:613:11)
at ontimeout (timers.js:386:11)
at tryOnTimeout (timers.js:250:5)
Process exited with code: 1
LikeLike
cảm ơn anh đã chia sẻ. rất chi tiết & cẩn thận, rất dễ hiểu. mong a ra thêm nhiều bài hữu ích nữa
LikeLike
anh ơi bây giờ em muốn làm 1 con bot mà em coi video của anh rồi làm nhưng mà fb cập nhập nhiều quá em mò không ra ,hi vọng anh ra video mới ❤ ❤
LikeLike
giờ FB thay đổi nhiều quá rồi, mình mới deploy lên heroku mà bị lỗi mãi 😦
LikeLike
em đang làm theo phần 2 mà tài khoản C9 tạo không được, Anh / Chị nào có thể cho em mượn tài khoản đc ko ạ?hay tạo giúp em đc ko ạ
LikeLike
anh ơi cái tài khoản aws là mất phí hả anh
LikeLike
anh ơi a có tài liệu làm chatbot giữa người dùng facebook thật với nhau k, em tìm toàn chatbot trả lời tự động thôi
LikeLike
Nice xừ….
LikeLike
Could9 bây giờ là của Amazon rồi. Sài nó khá là rắc rối. Em tạo đc cái enviroment + git clone mà anh hướng dẫn mà tới đó là đứng. Ko biết làm sao để mà install npm (nó kêu ko tìm ra file morgan, readme,…). Hy vọng anh làm 1 cái clip nâng cấp của Facebook chat bot. Cám ơn. ❤
LikeLike