‏منصة Messenger‏

عينة من تجربة Messenger مع Original Coast Clothing

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

لعرض تجربة Messenger الكاملة بنقاط إدخال متعددة، تحتوي صفحة النشاط التجاري الخيالية على الميزات التالية:

ميزات المنصة

تستخدم عينة التطبيق هذه الميزات التالية:

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

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

قبل البدء

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

إذا كان لديك بيئات منفصلة للتطوير والتجهيز والإنتاج، فستحتاج كل بيئة إلى تطبيق Meta وصفحة فيسبوك.

إعداد بيئة محلية

لتشغيل عينة من التطبيق على البيئة المحلية، ستحتاج إلى الإصدار 10.x أو إصدار أحدث من NodeJS.

الخطوة الأولى. نسخ مستودع عينة التطبيق

يمكنك نسخ مستودع original-coast-clothing على الجهاز المحلي.

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

الخطوة الثانية. تثبيت تبعيات الرمز

yarn install

الخطوة الثالثة. الحصول على عنوان خارجي

لتلقي الرسائل، يجب أن تكون قادرًا على تلقي أحداث webhooks الواردة من خوادم فيسبوك.

إذا كنت بحاجة إلى عنوان خارجي، فاستخدم ngrok نظرًا لأنه سيوفر عنوان https خارجي سيؤدي إلى إنشاء نفق إلى تطبيق NodeJS.

تثبيت ngrok

npm install -g ngrok

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

ngrok http 3000

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

Session Status                online
Account                       Redacted (Plan: 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

Connections                   ttl     opn     rt1     rt5     p50     p90
0       0       0.00    0.00    0.00    0.00

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

الخطوة الرابعة. تعيين أحداث webhooks والملف الشخصي في Messenger

نسخ عينة قالب البيئة في تطبيقك

mv .sample.env .env

إضافة القيم البيئية

يمكنك تعديل الملف .env لإضافة القيم لمعرف تطبيق فيسبوك ومعرف صفحة فيسبوك ورمز وصول الصفحة والمفتاح السري للتطبيق. يمكنك تعيين قيمة VERIFY_TOKEN لتكون سلسلة عشوائية. وسيستخدمها تطبيقك للتحقق من استدعاءات API.

الخطوة الخامسة. تشغيل تطبيقك

node app.js

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

الخطوة السادسة. تكوين تطبيقك

يمكنك تشغيل الأمر التالي لتكوين إعدادات اشتراك webhooks لتطبيقك والملف الشخصي للصفحة على Messenger. ولاحظ أنك تحتاج إلى استخدام قيمة VERIFY_TOKEN التي تمت إضافتها في الملف .env.

http://localhost:3000/profile?mode=all&verify_token=<VERIFY_TOKEN>

الخطوة السابعة. اختبار إعداد التطبيق

أرسل رسالة إلى صفحتك من فيسبوك أو في Messenger، وإذا تلقى webhook حدثًا، فستكون قد انتهيت بذلك من إعداد تطبيقك بالكامل!

إجراء تغيير على الرمز

يمكننا تعديل الملف locales/en_US.json، من خلال استبدال الرسالة الموجودة ضمن get_started.welcome وتغييرها من "مرحبًا {{userFirstName}}! مرحبًا بك في Original Coast Clothing..." إلى رسالة أخرى.

عند الرجوع إلى الوحدة الطرفية الأولى وفي كل مرة تقوم خلالها بتغيير الرمز البرمجي، ستحتاج إلى إعادة تشغيل خادم NodeJS. ودعونا نوقف الخادم باستخدام المفتاحين Ctrl-C، ثم نقوم بتشغيله مجددًا لإعادة تحميل الرمز البرمجي الجديد.

node app.js

افتح تطبيق Messenger لديك وأرسل كلمة "مرحبًا" إلى صفحتك، ومن ثمّ يجب أن تتلقى الرسالة الجديدة.

إعداد Heroku

ويمكن استخدام مثيل Heroku لاستضافة بيئة الإنتاج أو التجهيز لتطبيق نشاطك التجاري أو موقع الويب الخاص به.

الخطوة الأولى. إنشاء تطبيق Heroku

git init
heroku apps:create
# Creating app... done, ⬢ YOUR-APP-NAME
# Created http://YOUR-APP-NAME.herokuapp.com/ | git@heroku.com:YOUR-APP-NAME.git

الخطوة الثانية. نشر الرمز في Heroku

heroku git:remote -a YOUR-APP-NAME
git push heroku master

الخطوة الثالثة. تعيين متغيرات البيئة

ابحث عن متغيرات التكوين لتطبيقك في لوحة معلومات تطبيق Heroku ضمن الإعدادات. أضف القيم لمعرف تطبيق فيسبوك ومعرف صفحة فيسبوك ورمز وصول الصفحة والمفتاح السري للتطبيق وأنشئ VERIFY_TOKEN.

الخطوة الرابعة. تعيين أحداث webhooks والملف الشخصي في Messenger

يجب أن تكون قادرًا الآن على الوصول إلى التطبيق. ويمكنك استخدام VERIFY_TOKEN الذي أنشأته كجزء من متغيرات التكوين واستدعاء نقطة النهاية /profile.

https://YOUR-APP-NAME.herokuapp.com/profile?mode=all&verify_token=<VERIFY_TOKEN>

اختياري سيؤدي عنوان URL الموجود أعلاه إلى إرجاع معرفات الهويات التي تم تحميلها. ونظرًا لأنه يتم الاحتفاظ بها في الذاكرة، ستحتاج إلى إضافة هذه المعرفات التي تم إرجاعها كمتغيرات تكوين بحيث، تظل متوفرة بعد عملية إعادة التحميل.

heroku config:set PERSONA_BILLING=<PERSONA_ID> -a YOUR-APP-NAME
heroku config:set PERSONA_ORDER=<PERSONA_ID> -a YOUR-APP-NAME
heroku config:set PERSONA_SALES=<PERSONA_ID> -a YOUR-APP-NAME

الخطوة الخامسة. اختبار تطبيقك

أرسل رسالة إلى صفحتك من فيسبوك أو في Messenger. وإذا تلقى webhook حدثًا، فبذلك تكون قد أعددت تطبيقك بشكل كامل!

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

إعادة تشغيل التطبيق محليًا

بعد تشغيل ngrok، سيتم تقديم عنوان خارجي جديد. ويمكنك تحديث العنوان APP_URL الموجود في الملف .env، ثم تشغيل خادم NodeJS.

node app.js

تحديث عنوان webhook الموجود في إعدادات تطبيق فيسبوك من خلال زيارة http://localhost:3000/profile?mode=webhook&verify_token=<VERIFY_TOKEN>

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

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

معرفة المزيد