هل فكرت يومًا في الإشعارات التي نتلقاها من التطبيقات التي قمنا بتثبيتها؟ أو كيف يستفزنا Swiggy أو Zomato لطلب الطعام في الساعة 3 صباحًا بإشعاراتهم الإبداعية؟ ?

دعونا نتعمق في مفهوم الإشعارات!

ما هي الإخطارات؟

الإشعار هو رسالة أو تنبيه يرسله التطبيق لإعلام المستخدمين بالتحديثات أو الأحداث أو الإجراءات، ويتم تسليمها عادةً خارج واجهة التطبيق.

الآن يمكن أن يكون هناك نوعين من الإشعارات كما هو موضح أدناه -

دفع الإخطار

إشعارات الدفع هي رسائل أو تنبيهات يتم إرسالها من الخادم إلى التطبيق عندما لا يكون التطبيق قيد التشغيل بشكل نشط في المقدمة. يتم استخدامها بشكل أساسي للحفاظ على تفاعل المستخدمين عن طريق إرسال التحديثات أو التذكيرات أو المحتوى المخصص. يتم تسليم الإشعارات الفورية من خلال خدمات نظام التشغيل مثل خدمة Apple Push Notification Service (APNs) لنظام التشغيل iOS أو Firebase Cloud Messaging (FCM) لنظام Android.

كيف يعمل إشعار الدفع:

1. التسجيل: عند تثبيت التطبيق أو فتحه لأول مرة، يطلب التطبيق رمزًا مميزًا فريدًا للجهاز من خدمة الإشعارات المباشرة لنظام التشغيل (APNs أو FCM).
2. اتصال الخادم: يرسل التطبيق هذا الرمز المميز إلى خادم الواجهة الخلفية للتطبيق، والذي يقوم بتخزينه للاستخدام المستقبلي.
3. إرسال الإشعارات: يرسل الخادم حمولة إعلام (تحتوي على عنوان ورسالة وأزرار إجراء وما إلى ذلك) إلى خدمة إشعارات الدفع (APNs/FCM) باستخدام الرمز المميز للجهاز.
4. التسليم: تقوم خدمة الإشعارات الفورية بتسليم الرسالة إلى الجهاز المعني، حتى لو لم يكن التطبيق قيد التشغيل.

الإخطار داخل التطبيق

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

كيف يعمل الإخطار داخل التطبيق:

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

التنفيذ في تطبيق React Native android:

الآن بعد أن عرفنا الإشعارات وأنواعها، حان الوقت لتطبيق الميزة في تطبيق التفاعل الأصلي الخاص بك. هذا الدليل مخصص لتنفيذ الإشعارات الفورية فقط في تطبيق React الأصلي لنظام Android فقط، إذا كنت تريد إشعارًا لنظام iOS أو داخل التطبيق، فاكتب تعليقًا وسأنشر ذلك بالتأكيد!

للبدء، سنستخدم خدمة خارجية تسمى OneSignal. لقد عثرت مؤخرًا على هذه المنصة وأذهلتني الخدمات التي تقدمها.

حول ون سيجنال:

OneSignal هي خدمة إشعارات دفعية تمكن مطوري التطبيقات من إرسال إشعارات مستهدفة للمستخدمين عبر منصات مختلفة، بما في ذلك تطبيقات الهاتف المحمول ومواقع الويب والبريد الإلكتروني. وهو يدعم إشعارات الدفع وداخل التطبيق والويب، ويوفر ميزات مثل التجزئة والأتمتة واختبار A/B والتحليلات في الوقت الفعلي. يتم استخدام OneSignal على نطاق واسع لتحسين تفاعل المستخدمين والاحتفاظ بهم من خلال تقديم حل سهل التكامل لإرسال رسائل مخصصة. تتكون الطبقة المجانية الخاصة بهم من 10,000 إرسال بريد إلكتروني مجاني شهريًا، وعمليات إرسال غير محدودة عبر الهاتف المحمول، وسير عمل الرحلات، ومتوافق مع اللائحة العامة لحماية البيانات، واختبار A/B

بالرجوع إلى الدليل، نظرًا لأننا نعلم بالفعل أن إشعارات الدفع تتطلب معالجة من جانب الخادم عبر FCM (Firebase Cloud Messaging) ومن ثم هناك بعض الخطوات التي يجب اتباعها:

1. إعداد مشروع Firebase (تجاهل الخطوتين الأوليين إذا كان لديك بالفعل مشروع Firebase):

   • انتقل إلى وحدة تحكم Firebase وقم بتسجيل الدخول إلى حسابك.
   • قم بإنشاء مشروع من هنا واتبع الخطوات
   • بمجرد إنشاء مشروعك، انتقل إلى إعدادات المشروع من الشريط الجانبي
   • انتقل إلى حسابات الخدمة من الشريط ويجب أن يبدو هكذا
   • انقر على إنشاء مفتاح خاص جديد وسيؤدي هذا إلى تنزيل ملف json، وتخزينه بعناية في مكان آمن، وسنحتاج إليه أثناء إعداد OneSignal.

2. إعداد OneSignal

   • اذهب إلى OneSignal وقم بإنشاء حساب.
   • بعد إنشاء حساب، انتقل إلى خطوات الإعداد وأنشئ مؤسسة والآن، سترى صفحة لإضافة التطبيقات.
   • في هذه الصفحة، أدخل اسم تطبيقك وحدد Google Android (FCM) لحالتنا. وانقر على تكوين النظام الأساسي الخاص بك
   • ستتم الآن إعادة توجيهك إلى هذه الصفحة حيث سنستخدم ملف json لحساب الخدمة الذي تم تنزيله أثناء تكوين firebase قم بتحميل ملف json ثم حفظ ومتابعة
   • في الصفحة التالية، حدد React Native/Expo كهدف SDK ثم حفظ ومتابعة مرة أخرى
   • في الشاشة التالية، ستحصل على معرف التطبيق، وهو معرف سري وباستخدام هذا المعرف يمكن لأي شخص تشغيل إشعار في تطبيقك، لذا كن حذرًا بشأن هذا السر.

لقد انتهينا من الإعداد في Firebase وOneSignal، والآن المهمة الوحيدة المتبقية هي بعض Coffee with Code

أضف OneSignal إلى تطبيقك وقم بتكوينه

• الخطوة 1: أضف OneSignal إلى تطبيقك عن طريق تشغيل هذا الأمر أولاً

                       npm i react-native-onesignal

• الخطوة 2: في ملف Index.js أو App.tsx أو App.js أيًا كان جذر مشروعك، قم باستيراد OneSignal

             import { OneSignal } from 'react-native-onesignal';

ولقد قمت بإضافة مقتطف الكود هذا لتهيئة OneSignal

                    OneSignal.initialize('YOUR_APP_ID');

يمكنك تغليف هذا داخل خطاف useEffect للتكامل والاتصال السلس مع OneSignal.

سيؤدي هذا إلى تهيئة الجهاز بمعرف فريد لـ OneSignal ويمكنك التحقق من ذلك في الاشتراكات في الشريط الجانبي. سيتم تعريف كل جهاز تتم تهيئته باستخدام معرف OneSignal الفريد هذا ويمكنك تعيينه يدويًا أيضًا إذا كان لديك مستخدمين بمعرفاتهم الفريدة بالفعل باستخدام مقتطف الرمز هذا:

                         OneSignal.login(userId)

بمجرد اشتراك المستخدم بنجاح، سيظهر في لوحة التحكم مثل هذا

الآن قد تواجه بعض المشكلات المتعلقة بعدم استخدام OneSignal بشكل صحيح أو بعض الأخطاء الجسيمة، لذا إليك جزء يمكنك متابعته والذي ساعدني في حل هذه المشكلات.

• الخطوة 3: داخل android\app\build.gradle أضف مقتطف الرمز هذا

dependencies{
...
implementation('com.onesignal:OneSignal:[3.15.4, 3.99.99]')
...
}

• الخطوة 4: في android لتوفير الأذونات اللازمة لدفع الإشعارات، في android\app\src\main\AndroidManifest.xml أضف

مباشرة قبل علامة التطبيق. يعد إذن الإنترنت اختياريًا، ولكن لأنه قد يتم تمكينه افتراضيًا.

بوم؟ تمت تغطية كافة الخطوات لتنفيذ الإشعارات، ويمكنك إرسال إشعار اختباري من لوحة تحكم OneSignal نفسها.

جرب بنفسك وإذا كان لديك أي شك يمكنك التعليق أدناه. اتبع للحصول على أدلة أكثر تفصيلا!

مراجع:
https://documentation.onesignal.com/docs/react-native-sdk-setup
https://documentation.onesignal.com/reference/push-notification
https://medium.com/tribalscale/mobile-push-notifications-implementation-in-react-native-with-one-signal-4e810dddd350

تعليمات سعيدة!؟‍?