Ready?

mari, setelah sukses konfigurasi awal. kita tela'ah apa struktur yang dibuat saat sebuat pesan diterima dari user.

/Webhook POST Verb

app.post('/webhook', (req, res) => {
    console.log(req.body);
    if (req.body.object === 'page') {
      req.body.entry.forEach((entry) => {
        entry.messaging.forEach((event) => {
          if (event.message && event.message.text) {
            //sendMessage(event);
            //console.log(event);
          }
        });
      });
      res.status(200).end();
    }
  });

ketika dicek di console, maka struktur yang dikirim user adalah sebagai berikut

{ object: 'page',
  entry: 
   [ 
       { 
           id: '261180211076328',
           time: 1509126665343,
           messaging: [Object] 
       } 
   ] 
}

Lanjutannya. Kita akan buat gimana agar Webhook kita mampu mereply pesan. agar lebih mudah dalam proses request network. kita akan menggunakan module request.

$ npm install request --save

const request = require('request');

Proses Pengiriman Text Standard

{
  "recipient": {
    "id": "USER_ID"
  },
  "message": {
    "text": "Balasan!"
  }
}

Link Referensi : https://developers.facebook.com/docs/messenger-platform/send-messages

Fungsi Send Messages

function sendMessage(event) {
    let sender = event.sender.id;
    let text = event.message.text;

    /* Test Data */
    console.log("Dikirim ke %s ", sender);

    request({
      url: 'https://graph.facebook.com/v2.6/me/messages',
      qs: {access_token: ACCESS_TOKEN},
      method: 'POST',
      json: {
        recipient: {id: sender},
        message: {text: text}
      }
    }, function (error, response) {
      if (error) {
          console.log('Error sending message: ', error);
      } else if (response.body.error) {
          console.log('Error: ', response.body.error);
      }
    });
  }

kemudian cek dengan mencoba mengirimkan pesan di facebook page

Mencoba Attachment Files ? bisa jenis file apa saja ?

• [ ] audio
• [ ] video
• [ ] image
• [ ] file

Request Untuk Gambar Adalah Sebagai Berikut.

{
"recipient":{
    "id":"1254459154682919"
  },
  "message":{
    "attachment":{
      "type":"image", 
      "payload":{
        "url":"http://www.messenger-rocks.com/image.jpg", 
        "is_reusable":true
      }
    }
  }
}

mari mencoba implementasikannya di coding.

function sendImageFile(event) {
    let sender = event.sender.id;
    let text = event.message.text;

    /* Create Data Structured */
    var messageData = {
        "attachment":{
            "type":"image",
            "payload":{
                "url":"http://www.100resilientcities.org/wp-content/uploads/2017/06/semarang-tugu-muda.jpg", 
                "is_reusable":true
            }
        }
    };
    /* Test Data */
    console.log("Dikirim ke %s ", sender);

    request({
      url: 'https://graph.facebook.com/v2.6/me/messages',
      qs: {access_token: ACCESS_TOKEN},
      method: 'POST',
      json: {
        recipient: {id: sender},
        message: messageData
      }
    }, function (error, response) {
      if (error) {
          console.log('Error sending message: ', error);
      } else if (response.body.error) {
          console.log('Error: ', response.body.error);
      }
    });
  }

coba dijalankan. Bagaimana ?

Mencoba membuat Template untuk Reply.

var messageTemplate = {
        "attachment":{
            "type":"template",
            "payload":{
              "template_type":"button",
              "text":"Mau Trip Ke Semarang Nggak?",
              "buttons":[
                {
                    "type":"web_url",
                    "url":"https://www.rakaadinugroho.com",
                    "title":"Booking Hotel"
                },
                {
                    "type":"postback",
                    "title":"Paket Wisata",
                    "payload":"NANYA_CHAT"
                }
              ]
            }
          }
    };

Klik booking Hotel akan menuju situs messenger. dan klik nanya lagi, akan menampilkan data tertentu.

Handle Payload Dari Template. Hasil Response nya adalah sebagai berikut

{ recipient: { id: '261180211076328' },
  timestamp: 1509129607458,
  sender: { id: '1777062502356572' },
  postback: { payload: 'NANYA_CHAT', title: 'Paket Wisata' } }

Penambahan Untuk Handle postback standard template

if (event.message && event.message.text) {
            ......
}  else if(event.postback && event.postback.payload){
    console.log();
    switch(event.postback.payload){
        case 'NANYA_CHAT':
            quickReply(event.sender.id);
            break;

        default:
            console.log('nggak ada');
            break;
    }
  }

Fitur Quick Reply

var dataQuickReply  = {
        "text": "Choose your Trip Plan",
        "quick_replies":[
            {
                "content_type": "text",
                "title": "2D3N",
                "payload": "2D3N"
            },
            {
                "content_type": "text",
                "title": "3D2N",
                "payload": "3D2N"
            }
        ]
    };

Dan Hasil Akhirnya Seperti Ini.