Contoh URL Panggilan Balik untuk Pengujian Webhooks

Anda dapat mengklona contoh aplikasi panggilan balik kami menggunakan Glitch untuk membuat URL panggilan balik publik di server Glitch yang dapat Anda gunakan untuk menguji Webhooks. Tujuan dari membuat proyek Glitch adalah menulis payload Webhooks ke file catatan yang dapat Anda lihat secara realtime saat Webhooks terpicu.

Sebelum Anda menyiapkan endpoint untuk pengujian Webhooks bagi Cloud API

Panduan ini merupakan bagian dari proses beberapa langkah dan Anda harus telah menyelesaikan sejumlah langkah ini sebelum Anda mulai mengonfigurasi endpoint contoh aplikasi Anda menggunakan Glitch. Anda harus telah menyelesaikan hal-hal berikut:

1. Menyiapkan Aset Developer dan Akses Platform
2. Mengirim Pesan Pengujian
3. Mengonfigurasi Webhooks

Instruksi lengkap untuk memulai Cloud API WhatsApp Business sehingga Anda dapat mengirim pesan pengujian pertama Anda ada di Memulai Cloud API WhatsApp Business.

Menyiapkan dan Mengonfigurasi Glitch

1. Buka glitch.com dan buat akun. Hal ini memungkinkan Anda untuk menggunakan semua fitur yang kita diskusikan dalam panduan ini dan memastikan bahwa UI yang kita diskusikan dan UI yang Anda lihat sudah konsisten. Jika Anda tidak membuat akun, sebagian besar fitur UI akan hilang dan akan terlihat berbeda.
2. Setelah Anda mengatur akun Glitch Anda, buka template proyek Glitch pemula kami menggunakan tautan berikut: Template proyek Webhooks Platform WhatsApp.
3. Klik tombol Remix to Edit di pojok kanan atas halaman web Glitch untuk mengklona contoh aplikasi kami.
   

   Klik Remix to Edit untuk membuat proyek Gitch Anda sendiri
   Salinan proyek akan dibuat untuk akun Anda.
4. Di file .env, perbarui nilai WEBHOOK_VERIFY_TOKEN ke string acak pilihan Anda. Kemudian, Anda dapat menyalin nilai token akses sementara/permanen Anda secara opsional dari WhatsApp > Pengaturan API di Dasbor Aplikasi Anda dan tempelkan nilai itu untuk GRAPH_API_TOKEN.
   

   Memperbarui variabel lingkungan Glitch untuk proyek Anda
5. Klik Bagikan di sisi kanan atas untuk mendapatkan URL Situs live. Tambahkan /webhook di akhir URL untuk mendapatkan URL panggilan balik lengkap Anda. Ini akan terlihat seperti https://<project-name>.glitch.me/webhook.

Sekarang setelah endpoint Anda siap, Anda harus kembali ke Dasbor Aplikasi Anda.

Konfigurasikan Dasbor Aplikasi dengan endpoint Glitch dan token verifikasi

1. Di Dasbor Aplikasi Anda, temukan produk WhatsApp dan klik Konfigurasi.
   
2. Lalu, temukan bagian Webhooks dan klik Edit. Setelah mengeklik, dialog muncul di layar dan meminta URL Panggilan Balik serta meminta Anda untuk Memverifikasikan Token. Anda perlu menggunakan nilai-nilai yang Anda gunakan untuk mengonfigurasi proyek Glitch Anda di bagian Menyiapkan dan Mengonfigurasi Glitch. Misalnya: (https://<project-name>.glitch.me/webhook) untuk URL Panggilan Balik dan ("HAPPY") untuk Verifikasikan token.
   
3. Kembali ke halaman Konfigurasi, klik Kelola untuk meluncurkan dialog Kolom Webhooks Dasbor Aplikasi.
   

   Mengelola Dialog Kolom Webhook
4. Di tabel kolom, klik Langganan untuk semua peristiwa Webhooks yang Anda ingin berlangganan (kami merekomendasikan untuk berlangganan semuanya) di kolom paling kanan tabel.
5. Lalu di baris pesan, klik Uji untuk mengirim notifikasi ke endpoint Anda.

   Untuk mengonfirmasi bahwa notifikasi Webhooks terpicu, kembali ke Glitch dan pilih LOGS. Output-nya harus terlihat seperti gambar berikut.

   
   Payload notifikasi Webhooks lengkap harus terlihat seperti berikut:

   {
     "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"
                   }
                 }
               ]
             }
           }
         ]
       }
     ]
   }

On-Premises API Platform WhatsApp Business

1. Buka proyek Webhooks pemula kami di Glitch: Remix di Glitch
2. Klik server.js di navigasi kiri untuk penerapan endpoint Webhooks.
3. Klik Share di kanan atas untuk mendapatkan URL situs Aktif. Ini akan menjadi URL panggilan balik Anda. Ini akan terlihat seperti https://<project-name.glitch.me/webhook.
4. Klik tombol Status di panel navigasi kiri. Anda akan melihat bahwa aplikasi Anda mendengarkan di port tertentu.
5. Kirim pesan atau kirim pesan uji ke diri Anda sendiri untuk melihat notifikasi. Contoh catatan berikut menunjukkan pesan teks yang diterima dengan isi "Hai" dan pesan terkirim dengan status terbaru terkirim, lalu tersampaikan, kemudian dibaca.

   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"}]}