‏منصة Messenger‏

عنية من تجربة دعم واجهة Messenger API في Instagram - Original Coast Clothing

تُعد Original Coast Clothing (OC) علامة تجارية وهمية للملابس تم إنشاؤها لعرض الميزات الأساسية لمنصة Instagram والتي توفر تجربة رائعة للعملاء. وباستخدام هذا العرض التوضيحي كمصدر إلهام، يمكن لأي شخص إنشاء تجربة دعم Messenger API في Instagram رائعة تستفيد من الأتمتة ودعم العملاء المباشر. كما يتم توفير رمز برمجي مفتوح المصدر للتطبيق، بالإضافة إلى دليل حول كيفية نشر التجربة على البيئة المحلية أو الخادم البعيد. وتوجد أيضًا عينة من تجربة Messenger مصاحبة.

جرِّب ذلك الآن من خلال مراسلة @originalcoastclothing أو التعليق على منشور.

ميزات المنصة

تستفيد هذه التجربة من ميزات المنصة التالية. وإذا كنت قد قررت نشر التجربة على صفحتك، فسيستخدمها الرمز البرمجي جميعًا:

نشر هذه التجربة على Instagram

في نهاية هذا الدليل، سيتوفر لديك تطبيق Instagram كامل يعمل على الخادم لديك ويرد على الرسائل الواردة من حسابك.

يكون الرمز الذي يشغل هذه التجربة مفتوح المصدر. ويمكن لأي شخص البدء في تطوير تجربة مراسلة رائعة بسهولة.

يتم إصدار الرمز ضمن ترخيص BSD، مما يسمح لك باستخدامه بحرية لتلبية احتياجاتك. وتتم استضافة الرمز على GitHub كمرجع إضافي.

متطلبات نشر تطبيق Instagram

  • حساب Instagram احترافي (إما حساب منشئ محتوى أو حساب أعمال).
  • صفحة Facebookمرتبطة بحساب Instagram. تأكد من وجود صفحة Facebook تمثل هوية حساب Instagram الاحترافي لديك عند التواصل مع المستخدمين. ولإنشاء صفحة جديدة، تفضل بزيارة https://www.facebook.com/pages/create، كما يمكنك إعداد صفحة اختبارية للبدء.
  • حساب مطوّر يمكنه تنفيذ المهام على صفحتك. يسمح لك حساب المطوّر بإنشاء التطبيقات الجديدة، والتي تُعد أساس أي عملية دمج في فيسبوك. ويمكنك التسجيل كمطوّر عن طريق الانتقال إلى موقع الويب لمطوّري فيسبوك والنقر على الزر "بدء الاستخدام".
  • تكوين تطبيق فيسبوك باستخدام الإعدادات الأساسية. ولإنشاء تطبيق جديد، تفضل بزيارة https://developers.facebook.com/ والنقر على إضافة تطبيق جديد

خطوات الإعداد

الهدف من هذا القسم هو جمع كل رموز الوصول والمعرفات اللازمة لتطبيق Instagram لإرسال الرسائل وتلقيها بنجاح. قبل أن تبدأ، تأكد من إكمال كل المتطلبات الموضحة أعلاه. ففي هذه المرحلة، يجب أن يكون لديك صفحة وتطبيق مسجّل على Facebook وحساب Instagram احترافي.

إذا تم إنشاء تطبيق جديد على Facebook، فمن المحتمل أن يكون في وضع التطوير. لاحظ أنه غير مسموح للتطبيقات الموجودة ضمن هذا الوضع إلا بمراسلة الأشخاص المتصلين بالتطبيق (المسؤولون والمطوّرون والمختبرون). ويمكنك المتابعة خلال هذا الدليل في هذا الوضع، ولكن بمجرد أن يكون تطبيقك جاهزًا لإصداره للعامة، سيحتاج التطبيق للخضوع إلى عملية مراجعة التطبيقات للحصول على الإذن instagram_manage_messages. لمزيد من المعلومات، يمكنك الرجوع إلى مراجعة التطبيقات

  1. قم بتكوين عملية دمج Instagram من خلال اتباع وثائق بدء الاستخدام.
  2. أضف بعض حسابات Instagram الاختبارية التي ستستخدمها لاختبار التجربة.

في هذه المرحلة، ينبغي أن يتوفر لديك ما يلي

  • معرف التطبيق
  • المفتاح السري للتطبيق
  • معرف الصفحة
  • رمز وصول الصفحة
  • حساب Instagram مرتبط بالصفحة
  • حساب (حسابات) Instagram مسجَّل كحساب اختباري

التثبيت

ستحتاج إلى ما يلي:

  • Node بالإصدار 10.x أو إصدار أعلى
  • خادم لتشغيل الرمز. تتضمن الخيارات ما يلي:
    • خدمة إنشاء الاتصال النفقي مثل ngrok
    • خدمة الخادم البعيد مثل Heroku أو Glitch
    • خادم الويب الخاص بك

النشر بنقرة واحدة باستخدام Heroku أو Glitch

يمكن نشر التجربة تلقائيًا إلى Heroku أو Glitch باستخدام الأزرار التالية. وستكون مطالبًا بإدخال متغيرات البيئة اللازمة لإكمال الإعداد.

النشر على Herokuالنشر على Glitch

النشر محليًا باستخدام ngrok

تعرض خدمة الاتصال النفقي خادم الويب المحلي الخاص بك على عنوان URL خارجي يمكن الوصول إليه بواسطة أحداث webhooks في Facebook. وتوجد عدة خدمات. ففي هذا المثال، سنستخدم ngrok.

1. نسخ المستودع

انسخ المستودع إلى جهازك المحلي:

git clone https://github.com/fbsamples/original-coast-clothing-ig.git
cd original-coast-clothing-ig

2. تثبيت خدمة الاتصال النفقي

إذا لم يتم تثبيت الخدمة بالفعل، فيمكنك تثبيت ngrok عبر التنزيل أو عبر سطر الأوامر:

$ npm install -g ngrok

في دليل هذا المستودع، اطلب إنشاء نفق إلى الخادم المحلي باستخدام المنفذ المفضل

$ ngrok http 3000

يجب أن تعرض الشاشة حالة ngrok:

Session Status                online
Account                       Redacted (Plan:iuluufkccebegkhifrlgfhudrtbthgln Free)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://1c3b838deacb.ngrok.io -> http://localhost:3000
Forwarding                    https://1c3b838deacb.ngrok.io -> http://localhost:3000

لاحظ عنوان URL لبروتوكول ‏https للخادم الخارجي الذي تتم إعادة توجيهه إلى جهازك المحلي. ففي المثال أعلاه، يكون https://1c3b838deacb.ngrok.io.

3. تثبيت التبعيات

افتح علامة تبويب وحدة طرفية جديدة أيضًا في دليل المستودع.

$ npm install

بدلاً من ذلك، يمكنك استخدام Yarn:

$ yarn install

4. إعداد ملف .env

انسخ الملف .sample.env إلى .env

$ cp .sample.env .env

قم بتعديل الملف .env لإضافة كل قيم تطبيقك وصفحتك.

5. تشغيل تطبيقك محليًا

$ node app.js

يجب الآن أن تكون قادرًا على الوصول إلى الصفحة الافتراضية للتطبيق في متصفحك من خلال http://localhost:3000

قم بتأكيد أنه يمكنك الوصول أيضًا إلى التطبيق من خلال عنوان URL الخارجي من الخطوة الثانية.

النشر باستخدام Heroku

1. نسخ المستودع

انسخ المستودع إلى جهازك المحلي:

git clone https://github.com/fbsamples/original-coast-clothing-ig.git
cd original-coast-clothing-ig

2. تثبيت Heroku CLI

إذا لم يكن الدليل مستودع git بالفعل، فأنشئ واحدًا:

$ git init
Initialized empty Git repository in .git/
$ git add .
$ git commit -m "My first commit"

3. تثبيت Heroku CLI

إذا لم يكن مثبتًا بالفعل، فقم بتنزيل Heroku CLI، وتثبيته

4. إنشاء تطبيق من CLI

$ heroku apps:create

Creating app... done, ⬢ mystic-wind-83
Created http://mystic-wind-83.herokuapp.com/ | git@heroku.com:mystic-wind-83.git

لاحظ الاسم المحدد لتطبيقك. ففي هذا المثال، كان بالاسم mystic-wind-83.

5. إعداد متغيرات البيئة

في لوحة معلومات التطبيق لدى Heroku، يمكنك العثور على تطبيقك وإعداد متغيرات التكوين باتباع التعليقات الموجودة في الملف .sample.env

بدلاً من ذلك، يمكنك إعداد متغيرات البيئة من سطر الأوامر كما يلي:

$ heroku config:set PAGE_ID=XXXX

6. نشر الرمز البرمجي

$ git push heroku master

7. عرض إخراج السجل

$ heroku logs --tail

ربط حدث webhook الخاص بك

يكون خادمك الآن قيد التشغيل، تصبح نقطة نهاية حدث webhook لديك في المسار /webhook. في مثال Heroku أعلاه، قد يكون http://mystic-wind-83.herokuapp.com/webhook.

قم بإعداد حدث webhook لديك من خلال اتباع [دليل أحداث Webhooks في منصة Messenger] (https://developers.facebook.com/docs/messenger-platform/webhooks

بعد التحقق من صحة اشتراك حدث webhook، يمكنك الاشتراك في الأحداث التالية:

  • comments
  • messages
  • messaging_postbacks

اختبر أحداث webhooks من خلال النقر على أزرار "الاختبار" بجوار الأحداث التي تم الاشتراك فيها. ويلزم مراجعة أحداث الاختبار في إخراج سجل خادمك.

اختبار إعداد تطبيقك بنجاح

عند تسجيل الدخول إلى أي حساب بصفتك تتمتع بدور "مختبر في Instagram"، جرِّب إرسال رسالة إلى حساب Instagram المرتبط بصفحتك أو ترك تعليق على منشور.

إذا ظهرت لك استجابة لرسالتك في Instagram، يمكنك إعداد تطبيقك بالكامل! أحسنت!

استكشاف الأخطاء وإصلاحها

التطبيق يرد عليّ فقط، وليس على أي شخص آخر

قد لا يزال تطبيق Facebook في وضع التطوير. ويمكنك إضافة أحد الأشخاص كمختبر للتطبيق، وإذا وافق، فحينئذ سيتمكّن التطبيق من مراسلته. وبمجرد أن تصبح جاهزًا، يمكنك طلب الإذن instagram_manage_messages حتى تتمكّن من الرد على أي شخص.

مشكلات أخرى

هل يحتوي الدليل على أخطاء؟ يمكنك إخبارنا بذلك من خلال إرسال مشكلتك