Tutorial Mulai Cepat

Jika Anda belum, ikuti panduan pengaturan aplikasi untuk menyiapkan aplikasi Facebook Anda untuk digunakan dengan Platform Messenger.

Semua permintaan ke API Platform Messenger diautentikasi dengan memasukkan token akses level halaman di parameter access_token dari string kueri.

Jika Anda belum melakukannya, saat Anda menyiapkan aplikasi Facebook Anda, buat token akses halaman, dengan melakukan hal berikut:

Anda direkomendasikan untuk menyimpan informasi sensitif seperti token akses halaman Anda dengan tidak melakukan hardcoding ke Webhooks Anda.

Untuk melakukan ini, tambahkan hal berikut ke variabel lingkungan Anda, dengan <PAGE_ACCESS_TOKEN> adalah token akses yang baru Anda buat dan <VERIFY_TOKEN> adalah string acak yang Anda atur untuk memverifikasi Webhooks:

PAGE_ACCESS_TOKEN="

Sekarang yang harus Anda lakukan adalah menambahkan token akses halaman Anda dan memverifikasi token di bagian atas file app.js, untuk digunakan dalam logika Webhooks Anda:

const PAGE_ACCESS_TOKEN = process.env.PAGE_ACCESS_TOKEN;
const VERIFY_TOKEN = process.env.VERIFY_TOKEN;

Untuk memulai, kami akan menyelesaikan tiga fungsi yang akan menangani jenis peristiwa Webhooks masuk yang ingin kami dukung, serta menanggapi melalui API Kirim. Untuk melakukan ini, tambahkan hal berikut ke file app.js:

// Handles messages events
function handleMessage(sender_psid, received_message) {

}

// Handles messaging_postbacks events
function handlePostback(sender_psid, received_postback) {

}

// Sends response messages via the Send API
function callSendAPI(sender_psid, response) {
  
}

Untuk menanggapi orang-orang di Messenger, hal pertama yang kita perlukan adalah mengetahui siapa mereka. Di Messenger, hal ini dicapai dengan mendapatkan ID lingkup halaman (PSID) pesan pengirim dari peristiwa Webhooks yang masuk.

Apa itu PSID?

Seseorang diberi ID lingkup halaman (PSID) unik untuk setiap Halaman Facebook tempat mereka memulai percakapan. PSID digunakan untuk mengidentifikasi seseorang ketika mengirimkan pesan.

Jika Anda menyelesaikan salah satu opsi di bagian Proyek Pemula di atas, Anda harus memiliki endpoint /webhook dasar yang menerima permintaan POST dan mencatat badan peristiwa Webhooks yang diterima dan terlihat seperti ini:

app.post('/webhook', (req, res) => {  

  // Parse the request body from the POST
  let body = req.body;

  // Check the webhook event is from a Page subscription
  if (body.object === 'page') {

    // Iterate over each entry - there may be multiple if batched
    body.entry.forEach(function(entry) {

      // Get the webhook event. entry.messaging is an array, but 
      // will only ever contain one event, so we get index 0
      let webhook_event = entry.messaging[0];
      console.log(webhook_event);
      
    });

    // Return a '200 OK' response to all events
    res.status(200).send('EVENT_RECEIVED');

  } else {
    // Return a '404 Not Found' if event is not from a page subscription
    res.sendStatus(404);
  }

});

Untuk mendapatkan PSID pengirim, perbarui blok body.entry.forEach dengan kode berikut untuk mengekstrak PSID dari properti sender.id peristiwa:

Kami ingin pengalaman kami dapat menangani dua jenis peristiwa Webhooks: messages dan messaging_postback. Nama jenis peristiwa tidak termasuk dalam badan peristiwa, tetapi kita bisa menentukannya dengan memeriksa properti objek tertentu.

Apa itu peristiwa Webhooks?

Platform Messenger mengirimkan peristiwa Webhooks untuk memberi tahu Anda tentang tindakan yang terjadi di Messenger. Peristiwa dikirim dalam format JSON sebagai permintaan POST ke Webhooks Anda. Untuk informasi selengkapnya, lihat Peristiwa Webhooks.

Untuk melakukan ini, perbarui blok body.entry.forEach Webhooks Anda dengan syarat yang memeriksa apakah peristiwa yang diterima berisi properti message atau postback. Kami juga akan menambahkan panggilan ke fungsi handleMessage() dan handlePostback() yang kami matikan sebelumnya:

body.entry.forEach(function(entry) {

  // Gets the body of the webhook event
  let webhook_event = entry.messaging[0];
  console.log(webhook_event);


  // Get the sender PSID
  let sender_psid = webhook_event.sender.id;
  console.log('Sender PSID: ' + sender_psid);

  // Check if the event is a message or postback and
  // pass the event to the appropriate handler function
  if (webhook_event.message) {
    handleMessage(sender_psid, webhook_event.message);        
  } else if (webhook_event.postback) {
    handlePostback(sender_psid, webhook_event.postback);
  }
  
});

Sekarang setelah pesan masuk kami sedang dirutekan ke fungsi penanganan yang tepat, kami akan memperbarui handleMessage() untuk menangani dan menanggapi pesan teks dasar. Untuk melakukan ini, perbarui kode untuk menentukan muatan pesan tanggapan kami, dan meneruskan muatan ke callSendAPI(). Kami ingin menanggapi dengan pesan teks dasar, jadi kami menentukan objek JSON dengan properti "text":

function handleMessage(sender_psid, received_message) {

  let response;

  // Check if the message contains text
  if (received_message.text) {    

    // Create the payload for a basic text message
    response = {
      "text": `You sent the message: "${received_message.text}". Now send me an image!`
    }
  }  
  
  // Sends the response message
  callSendAPI(sender_psid, response);    
}

Waktunya untuk mengirim pesan pertama Anda dengan API Kirim Platform Messenger!

Dalam handleMessage(), kami memanggil callSendAPI() jadi sekarang kami perlu memperbaruinya untuk membangun badan permintaan penuh dan mengirimkannya ke Platform Messenger. Permintaan ke API Kirim memiliki dua properti:

• recipient: Mengatur penerima pesan yang dimaksud. Dalam hal ini, kami mengidentifikasi orang dari PSID-nya.
• message: Mengatur detail pesan yang akan dikirim. Di sini, kami akan mengaturnya ke objek pesan yang kami teruskan dari fungsi handleMessage() kami.

Untuk membuat badan permintaan, perbarui potongan untuk callSendAPI() ke berikut:

function callSendAPI(sender_psid, response) {
  // Construct the message body
  let request_body = {
    "recipient": {
      "id": sender_psid
    },
    "message": response
  }
}

Sekarang yang harus kita lakukan adalah mengirim pesan dengan mengirimkan permintaan POST ke API Kirim di https://graph.facebook.com/v2.6/me/messages.

Harap diingat bahwa bahwa Anda harus menambahkan PAGE_ACCESS_TOKEN di parameter access_token dari string kueri URL.

const request = require('request');

function callSendAPI(sender_psid, response) {
  // Construct the message body
  let request_body = {
    "recipient": {
      "id": sender_psid
    },
    "message": response
  }

  // Send the HTTP request to the Messenger Platform
  request({
    "uri": "https://graph.facebook.com/v2.6/me/messages",
    "qs": { "access_token": process.env.PAGE_ACCESS_TOKEN },
    "method": "POST",
    "json": request_body
  }, (err, res, body) => {
    if (!err) {
      console.log('message sent!')
    } else {
      console.error("Unable to send message:" + err);
    }
  }); 
}

Ujilah!

Di Messenger, kirim pesan teks lain ke Halaman Facebook Anda. Anda harus menerima jawaban otomatis dari pengalaman Messenger Anda yang menggemakan kembali pesan Anda dan meminta Anda untuk mengirim gambar.

Karena tanggapan kami meminta penerima pesan untuk mengirim gambar, langkah kami berikutnya adalah memperbarui kode kami untuk menangani lampiran. Lampiran terkirim secara otomatis disimpan oleh Platform Messenger dan tersedia melalui URL di properti payload.url dari setiap indeks dalam array attachments, jadi kami juga akan mengekstrak ini dari peristiwa tersebut.

Jenis lampiran apa yang didukung?

Pengalaman Messenger Anda dapat mengirim dan menerima sebagian besar jenis aset, termasuk gambar, audio, video, dan file. Media ditampilkan dan bahkan dapat diputar dalam percakapan, memungkinkan Anda menciptakan pengalaman yang kaya media.

Untuk menentukan apakah pesan adalah lampiran, perbarui syarat dalam fungsi handleMessage() untuk memeriksa received_message bagi properti attachments, lalu ekstrak URL untuknya. Dalam bot dunia nyata, kami akan mengulangi array untuk memeriksa beberapa lampiran, tetapi untuk tujuan mulai cepat ini, kami hanya akan mendapatkan lampiran pertama.

function handleMessage(sender_psid, received_message) {

  let response;

  // Checks if the message contains text
  if (received_message.text) {
    
    // Creates the payload for a basic text message, which
    // will be added to the body of our request to the Send API
    response = {
      "text": `You sent the message: "${received_message.text}". Now send me an attachment!`
    }

  } else if (received_message.attachments) {
  
    // Gets the URL of the message attachment
    let attachment_url = received_message.attachments[0].payload.url;
  
  } 
  
  // Sends the response message
  callSendAPI(sender_psid, response);    
}

Selanjutnya, kami akan menanggapi gambar dengan pesan template umum. Template umum adalah jenis pesan terstruktur yang paling umum digunakan, dan memungkinkan Anda untuk mengirim gambar, teks, dan tombol dalam satu pesan.

Apakah template pesan lain tersedia?

Ya! Platform Messenger menyediakan set template pesan yang berguna, masing-masing dirancang untuk mendukung struktur pesan umum yang berbeda, termasuk daftar, tanda terima, tombol, dan banyak lagi. Untuk detail lengkap, lihat Template.

Template pesan didefinisikan dalam properti attachment pesan, yang berisi properti type dan payload. payload adalah tempat kami mengatur detail template umum kami di properti berikut:

• template_type: Mengatur jenis template yang digunakan untuk pesan. Kami menggunakan template umum, jadi nilainya adalah 'generic'.
• elements: Mengatur properti khusus dari template kami. Untuk template umum kami akan menentukan judul, subtitle, gambar, dan dua tombol postback.

Untuk pesan terstruktur kami, kami akan menggunakan attachment_url yang dikirimkan kepada kami sebagai image_url untuk ditampilkan dalam template kami, dan mencantumkan beberapa tombol posback untuk memungkinkan penerima pesan menanggapi. Untuk membangun pesan muatan dan mengirim template umum, perbarui handleMessage() menjadi berikut ini:

Langkah terakhir kami adalah menangani peristiwa Webhooks messaging_postbacks yang akan dikirim ketika penerima pesan mengetuk salah satu tombol postback di template umum kami.

Apa yang bisa saya lakukan dengan posback?

Tombol postback mengirim peristiwa Webhooks messaging_postbacks ke Webhooks Anda yang termasuk string khusus hingga 1.000 karakter dalam properti payload. Ini memungkinkan Anda untuk dengan mudah menerapkan berbagai muatan postback yang dapat Anda parse dan tanggapi dengan perilaku tertentu.

Karena template umum kami memungkinkan penerima pesan untuk memilih dari dua tombol postback, kami akan menanggapi berdasarkan nilai properti payload dari peristiwa postback. Untuk melakukan ini, perbarui potongan handlePostback()Anda menjadi berikut: