Hướng dẫn build một con Facebook Messenger Bot bằng Nodejs và deploy lên Heroku

Xin chào các bạn, mình là Quân, hôm nay mình sẽ hướng dẫn các bạn tự build một con Chat Bot Facebook đơn giản cho riêng mình.

Bài này sẽ gồm 4 bước, nội dung có thể hơi dài nhưng rất đơn giản, ngoài ra ở bài hướng dẫn này mình có hướng dẫn theo hướng code, còn có một cách khác để tạo Bot là sử dụng Botsify, nhưng cách này thì kéo thả đơn giản, các bạn có thể search google cách tạo Chat Bot Facebook bằng botsify, có rất nhiều Tut hướng dẫn rồi.

Mục Lục:

Bước 1: Tạo Page facebook và một ứng dụng facebook

Bước 2: Viết code xử lý

Bước 3: Deploy code lên Heroku

Bước 4: Cài đặt Webhooks

Và Done…Bắt đầu thôi…

————————————————-

Bước 1: Chúng ta sẽ tạo một Page facebook và một ứng dụng facebook(app facebook)

Tạo page facebook thì đơn giản, trong menu bên phải facebook của bạn các bạn kích vào nút Trang và nhấn tạo trang, trong này thích tạo về chủ đề gì cũng được rồi cứ làm theo yêu cầu của FB, ví dụ của mình:

Sau khi tạo page xong thì thêm nút gửi tin nhắn cho page, nó hiện ngay trên đầu page vừa tạo ấy

Giờ tạo ứng dụng mess bot, các bạn truy cập vào https://developers.facebook.com/apps và chọn thêm ứng dụng, nhập tên hiển thị mà bạn muốn, email và chọn danh mục như ở dướ, sau đó nhấn Tạo ID ứng dụng.

Sau khi tạo xong FB sẽ tự chuyển bạn tới trang cài đặt ứng dụng, ở đây mình cần quan tâm đến Mã truy cập trang và webhooks, ok cứ dừng tạm tại đây đã, lát nữa mình sẽ dùng đến 2 thằng này.

—————————————————————————————————-

Bước 2: Chúng ta sẽ viết code để xử lý, việc đầu tiên là các bạn cần cài Nodejs và Git phía máy local của bạn.

Nodejs thì các bạn vào trang chủ của Node tìm phiên bản đúng với hệ điều hành của mình rồi dow về và cứ cài đặt mặc định như nó hướng dẫn thôi, không cần config gì cả, link đây Nodejs Dowload

Git thì cũng tương tự như thế, link đây Git-SCM Dowload

Cài Node và Git xong rồi giờ tạo project, mình sẽ tạo một thư mục ở Desktop tên là demo, xong rồi mở thư mục kích phải chuột chọn Git Bash Here

Tiếp theo gõ lệnh khởi tạo project node:

$ npm init

Đợi nó load một tí rồi nhập các thông tin mà nó yêu cầu, cuối cùng đến bước yes thì cứ  nhấn enter, không cần gõ gì cả, lúc này trong thư mục của bạn đã có file package.json. Ví dụ như của mình:

Tiếp nữa mình sẽ cài 4 modules cho project đó là body-parser, express, morgan, request, gõ lần lượt từng câu lệnh cài đặt một như sau:

$ npm install express
$ npm install body-parser
$ npm install morgan
$ npm install request

Tiếp theo chúng ta tạo một file là index.js và copy đoạn code dưới đây vào

// # SimpleServer
// A simple chat bot server

var logger = require('morgan');
var http = require('http');
var bodyParser = require('body-parser');
var express = require('express');
var request = require('request');
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);

app.listen(process.env.PORT || 3000);

app.get('/', (req, res) => {
  res.send("Server chạy ngon lành.");
});

app.get('/webhook', function(req, res) {
  if (req.query['hub.verify_token'] === 'quandeptrai') {
    res.send(req.query['hub.challenge']);
  }
  res.send('Error, wrong validation token');
});

// Đoạn code 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) {
        // Nếu người dùng gửi tin nhắn đến
        if (message.message.text) {
          var text = message.message.text;
          if(text == 'hi' || text == "hello")
          {
            sendMessage(senderId, "Trung Quân's Bot: " + 'Xin Chào');
          }
          else{sendMessage(senderId, "Trung Quân's Bot: " + "Xin lỗi, câu hỏi của bạn chưa có trong hệ thống, chúng tôi sẽ cập nhật sớm nhất.");}
        }
      }
    }
  }

  res.status(200).send("OK");
});

// Gửi thông tin tới REST API để Bot tự trả lời
function sendMessage(senderId, message) {
  request({
    url: 'https://graph.facebook.com/v2.6/me/messages',
    qs: {
      access_token: "mã_truy_cập_trang",
    },
    method: 'POST',
    json: {
      recipient: {
        id: senderId
      },
      message: {
        text: message
      },
    }
  });
}

Đoạn code trên các bạn để ý 2 chỗ đó là dòng thứ 26 verify_token các bạn nhập gì cũng được, nó đơn giản là 1 token để tí nữa xác thực thôi, ví dụ mình để là quandeptrai. 

Và dòng thứ 61 access_token là mã truy cập trang của bạn, là cái trang vừa tạo lúc nãy, bạn vào lại phần Cài đặt app phần tạo mã, chọn page sau đó copy đoạn mã rồi paste vào. (nhớ xoá cái chữ mã_truy_cập_trang đi đã rồi hãy paste =)) 

Chuẩn bị sang bước tiếp theo là Deploy code lên Heroku, để tránh một lỗi chắc chắn sẽ xảy ra khi deploy code, trước tiên các bạn cần tạo một file nữa trong project với tên là Procfile, và nội dung là:

web: node index.js

———————————————————————–

Bước 3: Deploy code lên Heroku

Bây giờ đến lúc deploy code lên Heroku server, các bạn truy cập vào trang chủ Heroku rồi tạo một account free mới, cái này đơn giản thôi, không làm được thì mình cũng bó tay =))

Sau đó cần dowload Heroku CLI để sử dụng command tại máy local của bạn, link dowload tại đây, các bạn vào rồi tự chọn hệ điều hành mà mình sử dụng rồi dow về cài đặt mặc định như bình thường nhé Heroku CLI Dowload

Quay lại với trang chủ heroku sau khi bạn đã đăng nhập, các bạn chọn Create New App, nhập tên app, để United States và nhấn Create App

Tạo xong App các bạn vào mục Deploy, và chú ý cách Heroku họ hướng dẫn các bạn push code lên server.

Bây giờ các bạn mở cmd của máy mình lên, chúng ta làm theo các bước lần lượt như trên để connect đến heroku.

Gõ heroku login, và nhập email với password tài khoản heroku của các bạn, chú ý là khi nhập pass thì nó sẽ không hiển thị gì, nhưung các bạn cứ gõ bình thường rồi nhấn enter nhé, sau khi logged thành công, thì cd đến thư mục project, ví dụ của mình là C:\Users\quanl\Desktop\demo

Tiếp theo gõ lệnh git init, xong rồi gõ heroku git:remote -a messbottrungquan17, của mình là messbottrungquan17, còn của các bạn thì tuỳ theo tên app heroku mà các bạn đặt nhé.

Để push code lên, chúng ta gõ tiếp lần lượt 3 lệnh sau

git add .      (nhớ là sau add phải cách ra và thêm dấu chấm nhé, không là lỗi đấy)

git commit -am “comment tuỳ ý”

git push heroku master

Kết quả thu được sau 3 câu lệnh trên:

Từ lần sau có sửa đổi code như thế nào thì khi push lên các bạn cũng chỉ việc gõ lại 3 câu lệnh như trên thôi.

Oke đã push code xong, bây giờ các bạn vào lại trang App Heroku, chọn sang tab Settings, kéo xuống dưới phần domain là sẽ thấy domain hiện tại của bạn, click vào nó, kết quả ngon lành

———————————————————————-

Bước 4: Setting Webhooks

Bước cuối cùng đây, đơn giản các bạn vào lại trang Setting App Facebook mà lúc nãy đã tạo, kéo xuống phần webhooks và chọn thiết lập Webhooks. 

Trong phần thiết lập này các bạn để ý cho mình:

Cái URL gọi lại là url cái domain heroku của các bạn mà đã tạo ở bước 3, và xuyệt thêm /webhook, vì code ở bước 2 cái hàm xác thực mình để route nó là /webhook, (dòng code 25)

Còn Mã xác minh là cái mã vừa nãy mình để (dòng code thứ 26), mình để là quandeptrai, các bạn để là gì thì nhập như thế vào.

Tích hết các ô checkbox phía dưới lại và nhấn Xác Minh

Xác minh xong thì các bạn tiếp tục chọn page lần nữa và nhấn đăng ký. Của mình là Trung Quân’s Bot

Cuối cùng ra page thử nhắn tin cho bot, thành công của bạn đây

Điều cuối cùng mình muốn nói, trên đây mình chỉ hướng dẫn làm  một con Bot đơn giản, muốn nó thông minh hơn, như cập nhật thời tiết, đọc báo…v.v…whatever… thì chỉ có cách là các bạn tự code theo ý tưởng của chính bạn thôi. Còn nhiều chức năng thú vị nữa, các bạn có thể tìm hiểu tại đây https://messengerplatform.fb.com/ . Chúc các bạn thành công.

Done.

Nếu có gì thắc mắc hoặc cần hỏi, bạn có thể comment dưới Bài Viết này hoặc Liên Hệ với mình, mình sẽ trả lời bạn sớm nhất. Cảm ơn các bạn và hẹn gặp lại các bạn ở những bài hướng dẫn tiếp theo.

Best Regards – Trung Quân