บทแนะนำการเริ่มต้นใช้งานอย่างง่าย

หากคุณยังไม่ได้ตั้งค่า ให้ปฏิบัติตามคู่มือการตั้งค่าแอพของเรา เพื่อตั้งค่าแอพ Facebook ของคุณสำหรับใช้งานร่วมกับแพลตฟอร์ม Messenger

คำขอทั้งหมดที่ส่งไปยัง API แพลตฟอร์ม Messenger จะได้รับการยืนยันตัวตนโดยการรวมโทเค็นการเข้าถึงระดับเพจไว้ในพารามิเตอร์ access_token ของสตริงการสืบค้น

หากคุณยังไม่ได้ดำเนินการดังกล่าวเมื่อตั้งค่าแอพ Facebook ของคุณ ให้สร้างโทเค็นการเข้าถึงเพจโดยปฏิบัติดังต่อไปนี้

เราขอแนะนำให้คุณรักษาข้อมูลที่ละเอียดอ่อน เช่น โทเค็นการเข้าถึงเพจ ให้ปลอดภัยอยู่เสมอโดยอย่าทำการฮาร์ดโค้ดข้อมูลเหล่านั้นลงใน Webhook ของคุณ

ในการดำเนินการเช่นนี้ ให้เพิ่มโค้ดด้านล่างนี้ลงในตัวแปรสภาพแวดล้อมของคุณ โดยที่ <PAGE_ACCESS_TOKEN> จะเป็นโทเค็นการเข้าถึงที่คุณเพิ่งสร้างขึ้นและ <VERIFY_TOKEN> เป็นสตริงแบบสุ่มที่คุณตั้งค่าไว้เพื่อตรวจสอบยืนยัน Webhook ของคุณ

PAGE_ACCESS_TOKEN="

ในตอนนี้ สิ่งที่คุณต้องทำมีเพียงการเพิ่มโทเค็นการเข้าถึงเพจและโทเค็นการตรวจสอบยืนยันของคุณที่ด้านบนของไฟล์ app.js เพื่อนำไปใช้ในตรรกะสำหรับ Webhook ของคุณ

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

ในการเริ่มต้น เราจะนำฟังก์ชั่น 3 อย่างที่จะจัดการกับประเภทเหตุการณ์ Webhook ขาเข้าที่เราต้องการรองรับออก รวมถึงการตอบกลับผ่าน API การส่ง ในการดำเนินการเช่นนี้ ให้นำโค้ดต่อไปนี้ไปต่อท้ายไฟล์ 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) {
  
}

หากต้องการตอบกลับผู้ใช้บน Messenger สิ่งแรกที่เราต้องทำคือการทราบว่าผู้ใช้เหล่านั้นเป็นใคร โดยใน Messenger การระบุว่าผู้ใช้รายนั้นเป็นใครจะทำได้โดยการเรียกดู ID ในเพจ (PSID) ของผู้ส่งข้อความนั้นๆ จากเหตุการณ์ Webhook ขาเข้า

PSID คืออะไร

บุคคลหนึ่งๆ จะได้รับการกำหนด ID ในเพจ (PSID) ที่ไม่ซ้ำกันสำหรับเพจ Facebook แต่ละเพจที่พวกเขาเริ่มการสนทนาด้วย โดย PSID จะใช้เพื่อระบุตัวตนของบุคคลเมื่อส่งข้อความ

หากคุณได้ทำตามทางเลือกใดทางเลือกหนึ่งที่ระบุไว้ในส่วน “โปรเจ็กต์ขั้นเริ่มต้น” ข้างต้นเสร็จสมบูรณ์แล้ว คุณควรจะมีตำแหน่งข้อมูล /webhook พื้นฐานที่ยอมรับคำขอ POST และบันทึกเนื้อความของเหตุการณ์ Webhook ที่ได้รับมาซึ่งจะมีลักษณะดังนี้

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);
  }

});

หากต้องการเรียกดู PSID ของผู้ส่ง ให้อัพเดตบล็อก body.entry.forEach ด้วยโค้ดต่อไปนี้ เพื่อดึง PSID จากคุณสมบัติ sender.id ของเหตุการณ์

เราต้องการให้ประสบการณ์ของเรานั้นสามารถจัดการกับเหตุการณ์ Webhook ได้ 2 ประเภท ได้แก่ messages และ messaging_postback ชื่อของประเภทเหตุการณ์จะไม่รวมอยู่ในเนื้อความของเหตุการณ์ แต่เราสามารถระบุได้โดยการตรวจสอบดูคุณสมบัติของอ็อบเจ็กต์บางอย่าง

เหตุการณ์ Webhook คืออะไร

แพลตฟอร์ม Messenger จะส่งเหตุการณ์ Webhook เพื่อแจ้งให้คุณถึงการดำเนินการต่างๆ ที่เกิดขึ้นใน Messenger ระบบจะส่งเหตุการณ์ในรูปแบบ JSON เป็นคำขอ POST ไปยัง Webhook ของคุณ โปรดดูข้อมูลเพิ่มเติมที่เหตุการณ์ Webhook

ในการดำเนินการเช่นนี้ ให้อัพเดตบล็อก body.entry.forEach ของ Webhook ของคุณ พร้อมเงื่อนไขที่ตรวจสอบว่าเหตุการณ์ที่ได้รับนั้นมีคุณสมบัติ message หรือ postback อยู่หรือไม่ นอกจากนี้ เราจะเพิ่มการเรียกใช้ไปยังฟังก์ชั่น handleMessage() และ handlePostback() ที่เราได้นำออกไปก่อนหน้านี้อีกด้วย

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);
  }
  
});

เนื่องจากข้อความขาเข้าของเราจะถูกนำไปยังฟังก์ชั่นตัวจัดการที่เหมาะสม เราจะอัพเดต handleMessage() เพื่อจัดการและตอบกลับข้อความ SMS พื้นฐานต่างๆ ในการดำเนินการเช่นนี้ ให้อัพเดตโค้ดเพื่อกำหนดเพย์โหลดข้อความของการตอบกลับของเรา จากนั้นให้ส่งเพย์โหลดดังกล่าวไปยัง callSendAPI() เราต้องการตอบกลับด้วยข้อความ SMS พื้นฐาน เราจึงกำหนดอ็อบเจ็กต์ JSON ที่มีคุณสมบัติ "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);    
}

ถึงเวลาส่งข้อความแรกของคุณด้วย API การส่งของแพลตฟอร์ม Messenger แล้ว!

ใน handleMessage() เราจะเรียกใช้ callSendAPI() ดังนั้น ตอนนี้เราจึงจำเป็นต้องอัพเดตเพื่อสร้างเนื้อความของคำขอที่ครบถ้วนและส่งไปยังแพลตฟอร์ม Messenger คำขอที่ส่งไปยัง API การส่งจะมีคุณสมบัติ 2 รายการ ดังนี้

• recipient: ตั้งค่าผู้ที่คุณต้องการให้เป็นผู้รับข้อความ ในกรณีนี้ เราจะระบุบุคคลดังกล่าวโดยใช้ PSID ของคนนั้นๆ
• message: ตั้งค่ารายละเอียดของข้อความที่จะส่ง ในที่นี้ เราจะตั้งค่าเป็นอ็อบเจ็กต์ข้อความที่เราได้ส่งไปจากฟังก์ชั่น handleMessage() ของเรา

ในการสร้างเนื้อความของคำขอ ให้อัพเดตเนื้อหาของ callSendAPI() เป็นดังต่อไปนี้

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

ในตอนนี้ สิ่งที่เราจำเป็นต้องทำมีเพียงการส่งข้อความโดยการส่งคำขอ POST ไปยัง API การส่งที่ https://graph.facebook.com/v2.6/me/messages

โปรดทราบว่าคุณจะต้องนำ PAGE_ACCESS_TOKEN ของคุณไปต่อท้ายในพารามิเตอร์ access_token ของสตริงการสืบค้น 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);
    }
  }); 
}

ทดสอบเลย!

ใน Messenger ให้ส่งข้อความ SMS อีก 1 ข้อความไปยังเพจ Facebook ของคุณ คุณควรได้รับการตอบกลับอัตโนมัติจากประสบการณ์การใช้งาน Messenger ซึ่งเป็นการทวนซ้ำข้อความของคุณและขอให้คุณส่งรูปภาพไป

เนื่องจากการตอบกลับของเราจะเป็นการส่งข้อความแจ้งให้ผู้รับทำการส่งรูปภาพ ขั้นตอนต่อไปจึงเป็นการอัพเดตโค้ดของเราเพื่อจัดการกับไฟล์แนบ แพลตฟอร์ม Messenger จะบันทึกไฟล์แนบที่ถูกส่งมาโดยอัตโนมัติ และไฟล์แนบนั้นจะสามารถใช้งานได้ผ่าน URL ในคุณสมบัติ payload.url ของดัชนีแต่ละรายการในอาร์เรย์ attachments ดังนั้น เราจึงจะดึงส่วนนี้ออกมาจากเหตุการณ์ด้วยเช่นกัน

ระบบรองรับไฟล์แนบประเภทใดบ้าง

ประสบการณ์การใช้งาน Messenger ของคุณสามารถส่งและรับองค์ประกอบในประเภทส่วนใหญ่ได้ ซึ่งรวมถึงรูปภาพ เสียง วิดีโอ และไฟล์ สื่อจะแสดงขึ้นและสามารถเล่นได้เลยในการสนทนา ซึ่งช่วยให้คุณสามารถสร้างประสบการณ์การรับชมสื่อแบบเต็มอิ่มได้

หากต้องการระบุว่าข้อความนั้นๆ เป็นไฟล์แนบหรือไม่ ให้อัพเดตเงื่อนไขในฟังก์ชั่น handleMessage() ของคุณเพื่อตรวจสอบ received_message เพื่อหาคุณสมบัติ attachments จากนั้นให้ดึงข้อมูล URL เพื่อรับไฟล์แนบนั้น ในบอทที่ใช้งานจริง เราจะทำซ้ำอาร์เรย์ดังกล่าวเพื่อตรวจสอบดูไฟล์แนบหลายๆ รายการ แต่สำหรับการเริ่มต้นใช้งานอย่างง่ายนี้ เราจะรับไฟล์แนบเพียงแค่ไฟล์แรกเท่านั้น

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);    
}

ถัดไป เราจะตอบกลับรูปภาพด้วยข้อความที่มีเทมเพลตแบบทั่วไป เทมเพลตทั่วไปเป็นข้อความที่มีการจัดโครงสร้างประเภทที่ใช้งานกันบ่อยที่สุด และช่วยให้คุณสามารถส่งรูปภาพ ข้อความ และปุ่มได้ในข้อความเดียว

มีเทมเพลตข้อความอื่นๆ ให้ใช้งานหรือไม่

มี แพลตฟอร์ม Messenger มาพร้อมชุดเทมเพลตข้อความที่มีประโยชน์ ซึ่งแต่ละเทมเพลตได้รับการออกแบบมาเพื่อรองรับโครงสร้างข้อความที่นิยมใช้แบบต่างๆ ซึ่งรวมถึงรายการ ใบเสร็จ ปุ่ม และอื่นๆ อีกมากมาย โปรดดูรายละเอียดทั้งหมดที่เทมเพลต

เทมเพลตข้อความจะได้รับการกำหนดไว้ในคุณสมบัติ attachment ของข้อความ ซึ่งประกอบด้วยคุณสมบัติ type และ payloadpayload เป็นจุดที่เราจะตั้งค่ารายละเอียดของเทมเพลตทั่วไปในคุณสมบัติดังต่อไปนี้

• template_type: ตั้งค่าประเภทของเทมเพลตที่ใช้สำหรับข้อความ เรากำลังใช้เทมเพลตทั่วไปอยู่ ค่าจึงเป็น “generic”
• elements: ตั้งค่าคุณสมบัติแบบกำหนดเองของเทมเพลต เราจะระบุชื่อ ชื่อรอง รูปภาพ และปุ่มโพสต์ย้อนกลับ 2 ปุ่มให้กับเทมเพลตทั่วไป

ในกรณีที่เป็นข้อความที่มีการจัดโครงสร้าง เราจะใช้ attachment_url ที่ส่งมาให้เราในส่วน image_url เพื่อแสดงในเทมเพลตของเรา และจะใส่ปุ่มโพสต์ย้อนกลับ 2 ปุ่ม เพื่อช่วยให้ผู้รับข้อความสามารถตอบกลับได้ หากต้องการสร้างเพย์โหลดข้อความและส่งเทมเพลตทั่วไป ให้อัพเดต handleMessage() เป็นดังต่อไปนี้

ขั้นตอนสุดท้ายของเราคือการจัดการกับเหตุการณ์ Webhook messaging_postbacks ซึ่งระบบจะส่งเมื่อผู้รับข้อความได้แตะที่ปุ่มโพสต์ย้อนกลับปุ่มใดปุ่มหนึ่งในเทมเพลตทั่วไปของเรา

ฉันจะทำอะไรกับโพสต์ย้อนกลับได้บ้าง

ปุ่มโพสต์ย้อนกลับจะส่งเหตุการณ์ Webhook messaging_postbacks ไปยัง Webhook ของคุณ ซึ่งจะมีสตริงแบบกำหนดเองที่มีอักขระไม่เกิน 1,000 ตัวในคุณสมบัติ payload การทำเช่นนี้ช่วยให้คุณสามารถปรับใช้เพย์โหลดของโพสต์ย้อนกลับแบบต่างๆ ได้ง่าย ซึ่งคุณสามารถแยกวิเคราะห์และตอบกลับด้วยลักษณะการทำงานที่เฉพาะเจาะจงได้

เนื่องจากเทมเพลตทั่วไปช่วยให้ผู้รับข้อความมีปุ่มโพสต์ย้อนกลับให้เลือกใช้อยู่ 2 รูปแบบ เราจะตอบกลับตามค่าของคุณสมบัติ payload ของเหตุการณ์โพสต์ย้อนกลับ ในการดำเนินการเช่นนี้ ให้อัพเดตเนื้อหาของ handlePostback() เป็นดังต่อไปนี้