عينة من عنوان URL الاستدعاء لاختبار أحداث Webhooks

يمكنك نسخ عينة من تطبيق الاستدعاء باستخدام Glitch لإنشاء عنوان URL عام للاستدعاء في خوادم Glitch التي يمكنك استخدامها لاختبار أحداث Webhooks. الغرض من إنشاء مشروع Glitch هو أنه يوفر إمكانية كتابة حمولات بيانات حدث webhook في ملف سجل يمكنك عرضه بشكل فوري بينما يتم تشغيل أحداث webhooks.

قبل إعداد نقطة نهاية لاختبار حدث webhook في API السحابة

هذا الدليل هو جزء من عملية متعددة الخطوات وعليك إكمال بعض هذه الخطوات قبل بدء تكوين عينة من نقطة نهاية التطبيق باستخدام Glitch. عليك إكمال ما يلي:

1. إعداد أصول المطوّرين والوصول إلى المنصة
2. إرسال رسالة اختبارية
3. تكوين حدث Webhook

تتوفر إرشادات كاملة حول بدء استخدام API السحابة في واتساب للأعمال حتى تتمكن من إرسال أول رسالة اختبارية في بدء استخدام API السحابة في واتساب للأعمال.

إعداد Glitch وتكوينه

1. انتقل إلى glitch.com وقم بإنشاء حساب. يتيح لك هذا استخدام كل الميزات التي نناقشها في هذا الدليل ويضمن تناسق واجهة المستخدم التي نناقشها مع واجهة المستخدم المعروضة. إذا لم تنشئ حسابًا، فستفقد معظم ميزات واجهة المستخدم وستبدو مختلفة.
2. بعد إعداد حساب Glitch، افتح قالب مشروع Glitch المبدئي باستخدام الرابط التالي: قالب مشروع حدث Webhook في منصة واتساب.
3. انقر على الزر Remix to Edit في أعلى الجانب الأيمن في صفحة ويب Glitch لنسخ عينة من التطبيق.
   

   انقر على "Remix to Edit" لإنشاء مشروع Glitch الخاص
   سيتم إنشاء نسخة من المشروع في حسابك.
4. في الملف .env، قم بتحديث قيمة WEBHOOK_VERIFY_TOKEN لتكون سلسلة عشوائية من اختيارك. بعد ذلك، يمكنك اختياريًا، نسخ قيمة رمز الوصول المؤقت/الدائم من واتساب > إعداد API في لوحة معلومات التطبيق ولصق تلك القيمة في GRAPH_API_TOKEN.
   

   تحديث متغيرات بيئة Glitch في مشروعك
5. انقر على مشاركة في أعلى اليسار للحصول على عنوان URL للموقع المنشور. أضف /webhook في نهاية عنوان URL للحصول على عنوان URL استجابة الاستدعاء الكامل. وسيبدو على نحو مماثل لـ https://<project-name>.glitch.me/webhook.

والآن بعدما أصبحت نقطة النهاية جاهزة، يجب العودة إلى لوحة معلومات التطبيق.

تكوين لوحة معلومات التطبيق من خلال نقطة نهاية Glitch ورمز التحقق

1. في لوحة معلومات التطبيق، ابحث عن منتج واتساب وانقر على تكوين.
   
2. ثم ابحث عن قسم أحداث webhooks وانقر على تعديل. وبعد النقر، سيظهر مربع حوار على الشاشة وسيطلب عنوان URL الاستدعاء ورمز التحقق منك. يجب استخدام القيم التي استخدمتها لتكوين مشروع Glitch في قسم إعداد Glitch وتكوينه. على سبيل المثال، (https://<project-name>.glitch.me/webhook) لعنوان URL الاستدعاء و("HAPPY") لرمز التحقق.
   
3. عند العودة إلى الصفحة "تكوين"، انقر على إدارة لتشغيل مربع حوار حقول Webhook للوحة معلومات التطبيق.
   

   إدارة مربع حوار حقول Webhook
4. في جدول الحقول، انقر على اشتراك في كل أحداث Webhook التي تريد الاشتراك فيها (نوصيك بالاشتراك في كل الأحداث) في العمود على أقصى يسار الجدول.
5. ثم في صف الرسائل، انقر على اختبار لإرسال إشعار إلى نقطة النهاية.

   لتأكيد بدء إشعار 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 داخل المواقع الخاصة بمنصة واتساب للأعمال

1. انتقل إلى مشروع حدث webhook المبدئي على Glitch: الدمج على Glitch
2. انقر على server.js في جزء التنقل الأيمن لتنفيذ نقطة نهاية Webhook.
3. انقر على مشاركة في أعلى اليسار للحصول على عنوان URL للموقع المنشور. سيكون هذا هو عنوان URL استجابة الاستدعاء. سيبدو على نحو مماثل لذلك https://<project-name.glitch.me/webhook.
4. انقر على زر الحالة في جزء التنقل الأيمن. وستجد أن تطبيقك يمكنه تلقي الأحداث عبر منفذ محدد.
5. أرسل رسالة أو أرسل إلى نفسك رسالة اختبارية لعرض الإشعار. يعرض المثال التالي للسجل رسالة نصية مستلمة تتضمن النص "مرحبًا" ورسالة مُرسلة بالحالة المحدثة "تم الإرسال"، ثم "تم التسليم"، ثم "تمت القراءة".

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