แพลตฟอร์ม WhatsApp Business > Cloud API > คำแนะนำ

ตัวอย่าง URL การเรียกกลับสำหรับการทดสอบ Webhooks

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

ก่อนที่คุณจะตั้งค่าตำแหน่งข้อมูลสำหรับการทดสอบ Webhook ให้กับ API ระบบคลาวด์

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

คุณสามารถดูคำแนะนำฉบับเต็มเกี่ยวกับการเริ่มต้นใช้งาน API ระบบคลาวด์ของ WhatsApp Business เพื่อให้สามารถส่งข้อความทดสอบรายการแรกได้ที่เริ่มต้นใช้งาน API ระบบคลาวด์ของ WhatsApp Business

ตั้งค่าและกำหนดค่า Glitch

ไปที่ glitch.com แล้วสร้างบัญชี ซึ่งจะช่วยให้คุณสามารถใช้ฟีเจอร์ทั้งหมดที่เราพูดถึงในคู่มือนี้ได้ และช่วยให้มั่นใจได้ว่า UI ที่เราพูดถึงจะตรงกันกับ UI ที่คุณเห็น แต่หากคุณไม่สร้างบัญชี ฟีเจอร์ UI ส่วนใหญ่ก็จะขาดหายไปและมีลักษณะที่ดูต่างออกไป
หลังจากตั้งค่าบัญชี Glitch แล้ว ให้เปิดเทมเพลตโปรเจ็กต์ Glitch ขั้นเริ่มต้นขึ้นมาโดยใช้ลิงก์ต่อไปนี้: เทมเพลตโปรเจ็กต์ Webhook สำหรับแพลตฟอร์ม WhatsApp
ให้คลิกที่ปุ่ม "Remix to Edit" (รีมิกซ์เพื่อแก้ไข) ที่มุมบนขวาของเว็บเพจ Glitch เพื่อโคลนแอพตัวอย่างของเรา
คลิก "Remix to Edit" (รีมิกซ์เพื่อแก้ไข) เพื่อสร้างโปรเจ็กต์ Glitch ของคุณเอง
ระบบจะสร้างสำเนาโปรเจ็กต์ให้กับบัญชีของคุณ
ในไฟล์ .env ให้อัพเดตค่าของ WEBHOOK_VERIFY_TOKEN เป็นสตริงแบบสุ่มตามที่คุณต้องการ จากนั้น คุณสามารถเลือกที่จะคัดลอกค่าของโทเค็นการเข้าถึงแบบชั่วคราว/ถาวรจาก WhatsApp > การตั้งค่า API ในแดชบอร์ดของแอพ แล้ววางค่าดังกล่าวในส่วน GRAPH_API_TOKEN ได้
อัพเดตตัวแปรสภาพแวดล้อมใน Glitch ให้กับโปรเจ็กต์ของคุณ
คลิก "Share" (แชร์) ที่ด้านบนขวาเพื่อรับ URL ของเว็บไซต์ที่เผยแพร่อยู่ เพิ่ม /webhook ที่ส่วนท้ายของ URL เพื่อรับ URL การเรียกกลับแบบสมบูรณ์ โดยจะมีลักษณะเหมือนกับ https://<project-name>.glitch.me/webhook

เมื่อตำแหน่งข้อมูลของคุณพร้อมแล้ว คุณต้องกลับไปที่แดชบอร์ดของแอพ

กำหนดค่าแดชบอร์ดของแอพด้วยตำแหน่งข้อมูลใน Glitch และโทเค็นการตรวจสอบยืนยัน

ในแดชบอร์ดของแอพ ให้ค้นหาผลิตภัณฑ์ WhatsApp แล้วคลิกการกำหนดค่า
จากนั้นให้ค้นหาส่วน Webhooks แล้วคลิกแก้ไข หลังจากคลิกแล้ว กล่องโต้ตอบจะปรากฏขึ้นบนหน้าจอของคุณ และขอ URL การเรียกกลับและโทเค็นการตรวจสอบยืนยันจากคุณ คุณจำเป็นต้องใช้ค่าที่คุณใช้ในการกำหนดค่าโปรเจ็กต์ Glitch ในส่วนตั้งค่าและกำหนดค่า Glitch ตัวอย่างเช่น (https://<project-name>.glitch.me/webhook) สำหรับ URL การเรียกกลับและ ("HAPPY") สำหรับโทเค็นการตรวจสอบยืนยัน
กลับมาที่หน้า "การกำหนดค่า" ให้คลิกจัดการเพื่อเปิดกล่องโต้ตอบ "ช่อง Webhook" ในแดชบอร์ดของแอพ
จัดการกล่องโต้ตอบ "ช่อง Webhook"
ในตารางช่อง ให้คลิกสมัครรับข้อมูลเหตุการณ์ Webhook ทั้งหมดที่คุณต้องการสมัครรับข้อมูล (เราขอแนะนำให้คุณสมัครรับข้อมูลทุกเหตุการณ์) ที่คอลัมน์ขวาสุดของตาราง

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

หากต้องการยืนยันว่ามีการทริกเกอร์การแจ้งเตือน Webhook แล้ว ให้กลับไปยัง Glitch แล้วเลือก "LOGS" (บันทึก) และผลลัพธ์ควรมีลักษณะดังภาพด้านล่างนี้

เพย์โหลดการแจ้งเตือน Webhook ที่สมบูรณ์ควรมีลักษณะดังนี้

{
  "object": "whatsapp_business_account",
  "entry": [
    {
      "id": "0",
      "changes": [
        {
          "field": "messages",
          "value": {
            "messaging_product": "whatsapp",
            "metadata": {
              "display_phone_number": "16505551111",
              "phone_number_id": "123456123"
            },
            "contacts": [
              {
                "profile": {
                  "name": "test user name"
                },
                "wa_id": "16315551181"
              }
            ],
            "messages": [
              {
                "from": "16315551181",
                "id": "ABGGFlA5Fpa",
                "timestamp": "1504902988",
                "type": "text",
                "text": {
                  "body": "this is a text message"
                }
              }
            ]
          }
        }
      ]
    }
  ]
}

API ภายในองค์กรของแพลตฟอร์ม WhatsApp Business

ไปที่โปรเจ็กต์ Webhook ขั้นเริ่มต้นบน Glitch รีมิกซ์บน Glitch
คลิกที่ server.js ในเมนูนำทางด้านซ้ายเพื่อนำตำแหน่งข้อมูล Webhook มาใช้
คลิก "Share" (แชร์) ที่ด้านบนขวาเพื่อรับ URL ของเว็บไซต์ที่เผยแพร่อยู่ ซึ่งจะเป็น URL การเรียกกลับของคุณ โดยจะมีลักษณะเป็นแบบ https://<project-name.glitch.me/webhook
คลิกที่ปุ่ม "Status" (สถานะ) ในแผงนำทางด้านซ้าย คุณจะเห็นว่าแอพของคุณกำลังรับค่าบนพอร์ตที่เจาะจงอยู่
ส่งข้อความจริงหรือส่งข้อความทดสอบให้ตัวคุณเองเพื่อดูการแจ้งเตือน ตัวอย่างของบันทึกต่อไปนี้แสดงข้อความที่ได้รับโดยมีเนื้อความว่า "Hi" และแสดงข้อความที่ส่งแล้วโดยมีการอัพเดตสถานะเป็น "sent" ตามด้วย "delivered" จากนั้นเป็น "read"
```
Incoming webhook: {"messages":[{"from":"1234567890","id":"ABGGhSkIc2B_Ago-sDy5BNm-1gI5","text":{"body":"Hi"},"timestamp":"1529381066","type":"text"}]}
Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"sent","timestamp":"1529381072"}]}
Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"delivered","timestamp":"1529381072"}]}
Incoming webhook: {"statuses":[{"id":"gBGGhSkIc2B_AgkXDygfSDwgG5s","recipient_id":"1234567890","status":"read","timestamp":"1529381076"}]}
```

แพลตฟอร์ม WhatsApp Business | API ระบบคลาวด์ | API ภายในองค์กร | API การจัดการธุรกิจ