كيفية إضافة إعلامات الدفع في تطبيق Cordova الخاص بك باستخدام Firebase

سوف ترشدك هذه المقالة خلال عملية إجراء الإخطارات Push لكل من أنظمة Android و iOS في تطبيق Cordova باستخدام cordova-plugin-firebase.

استكمال: وفقًا لبعض التعليقات ، قد لا تعمل العملية الموضحة أدناه في بعض أجهزة Android. كن على علم بذلك قبل محاولة استخدام الإرشادات التالية. آسف على ذلك الناس. آمل أن تظل بعض هذه المعلومات مفيدة ، لكن لسوء الحظ هذه هي حياة مطور تطبيقات هجين متنقل.

دعونا نكون صادقين ، قد يكون العمل باستخدام Push Notifications مع Cordova بمثابة ألم في المؤخرة ، خاصة إذا كنت لا تعرف الكثير عن بيئة iOS وتكوينه. هناك العديد من الخطوات التي يجب اتباعها قبل إضافة التطبيق الإضافي لك ، ونأمل أن توضح هذه المقالة الأمور ، لذا دعنا نبدأ بالجزء الممل: تكوين بيئة iOs.

1. تكوين وإعداد بيئة iOS

بالمناسبة ، لست مضطرًا إلى القيام بأي من هذا إذا كنت تعمل فقط مع منصات أندرويد ، فبالنسبة لنظام أندرويد ، العملية أسهل بكثير. (شكرا أبل)

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

الآن يجب أن تكون داخل حساب Apple Developer الخاص بك.

ننظر الآن إلى شريط الجانب الأيسر. يجب أن يشير الصف الثالث إلى "الشهادات والمعرفات والتوصيفات". حدد هذا الخيار.

الآن بعد أن أصبحت في صفحة "الشهادات والمعرفات والتوصيفات" ، انظر إلى الشريط الجانبي الأيسر ويجب أن يكون هناك قسم يسمى "المعرفات". وتحت هذا القسم ، يوجد رابط يقول "معرّفات التطبيقات". اضغط على ذلك.

يجب أن تشاهد جميع معرفات تطبيق iOS الخاصة بك.

الآن في الجزء العلوي الأيمن ، سترى زر +. اضغط ذلك. بعد ذلك ، يجب أن تكون في هذه المرحلة:

نحتاج الآن إلى ملء ما يلي:

  • وصف معرف التطبيق - الاسم. هنا ، يجب أن تضع اسم تطبيقك (مثل تجريبي لإشعار Firebase)
  • لاحقة معرف التطبيق - معرف التطبيق الصريح - معرف الحزمة. هنا ، تحتاج إلى تحديد معرف حزمة فريد لتطبيقك (على سبيل المثال com.possible.firebasenotificationsdemo). يرجى التأكد من استخدام معرف الحزمة الخاص بك بدلاً من استخدام الألغام.

ثم ضمن خدمات التطبيقات ، حدد "إعلامات الدفع". اضغط على "متابعة".

بعد ذلك ، سيتم إعادة توجيهك إلى صفحة "تأكيد معرف التطبيق الخاص بك". سجل الصحافة.

الآن عدنا إلى صفحة "معرفات تطبيق iOS". ابحث عن معرف التطبيق الذي أنشأته للتو. اضغط عليها وسترى قائمة منسدلة من خدمات التطبيقات.

قم بالتمرير لأسفل حتى تصل إلى نهاية القائمة المنسدلة وسترى زر "تحرير". اضغط ذلك.

ستظهر صفحة "إعدادات معرف تطبيق iOS" ، وقم بالتمرير طوال الطريق حتى ترى "إشعارات الدفع".

لقد حان الوقت لنا لإنشاء "شهادة SSL للعميل". سيسمح ذلك لخادم الإشعار (Firebase) الخاص بنا بالاتصال بخدمة إعلام Apple Push. ضمن شهادة تطوير SSL ، اضغط على الزر "إنشاء شهادة ...".

الآن سوف نرى هذا.

لإنشاء شهادة ، نحتاج إلى ملف طلب توقيع شهادة (CSR) من جهاز Mac الخاص بنا. سنعود إلى هذه الصفحة لاحقًا ، لكننا نحتاج الآن إلى ملف CSR.

إنشاء ملف CSR

لإنشاء ملف CSR ، اضغط على cmd + space وقم بالبحث عن "Keychain Access". افتح Keychain Access ، وانتقل إلى القائمة لتحديد Keychain Access> Certificate Assistant> طلب شهادة من هيئة إصدار الشهادات ...

يجب أن يظهر "مساعد الشهادة" المنبثقة.

املأ عنوان بريدك الإلكتروني واسمك. اختر "تم الحفظ على القرص" واضغط متابعة. ثم احفظ المسؤولية الاجتماعية للشركات في مكان ما على محرك الأقراص الثابتة.

تحميل ملف CSR الخاص بك

الآن وبعد أن تم إنشاء CSR لدينا ، أصبح جاهزًا للعودة إلى صفحة "إضافة شهادة iOS".

حرك الفأرة لأسفل. اضغط على "متابعة" ، ثم انقر فوق الزر "اختيار ملف ...". حدد ملف CSR الذي قمت بحفظه للتو على القرص الصلب. بعد ذلك ، انقر فوق "متابعة" مرة أخرى. ثم يجب أن تقول صفحة الويب "شهادتك جاهزة."

يمكنك الآن المضي قدمًا والنقر على زر التنزيل الأزرق لتنزيل شهادتك.

إعداد شهادة APNs

الآن بعد أن قمت بإنشاء شهادة iOS ، ستحتاج إلى إعداد شهادة APNs (اختصار لـ Apple Push Notifications) ، والتي سيتم استخدامها لاحقًا في تكوين Firebase. افتح Finder وحدد موقع الشهادة التي قمت بتنزيلها مسبقًا.

انقر نقرًا مزدوجًا فوق ملف الشهادة (مثل aps_development.cer) لإضافة الشهادة إلى Keychain Access.

افتح الآن Keychain Access. ضمن فئة "شهاداتي" ، سترى الشهادة التي أضفتها للتو. انقر فوق سهم التوسيع على يسار اسم الشهادة للكشف عن خيار المفتاح الخاص. انقر بزر الماوس الأيمن على المفتاح الخاص ثم اضغط على export.

بمجرد النقر فوق "تصدير" ، ستطالبك نافذة منبثقة بحفظ مفتاحك الخاص كملف .p12. المضي قدما وانقر فوق حفظ.

ثم أدخل كلمة مرور إذا كنت تريد حماية شهادتك المصدرة. انقر فوق موافق للتأكيد.

أخيرا! لقد انتهينا للتو من التكوين والإعداد لنظام التشغيل iOS. الآن نحن على استعداد للانتقال إلى Firebase! هيا بنا نبدأ.

2. تكوين Firebase لإخطارات الدفع

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

بمجرد وصولك إلى وحدة التحكم ، انقر فوق الزر "إنشاء مشروع جديد".

أسمي مشروعي على أنه "عرض توضيحي لـ Firebase" ، لكنك حر في استخدام أي اسم تريده. ببساطة انقر فوق الزر "إنشاء مشروع جديد" للمتابعة.

بعد ذلك ، تتم إعادة توجيهك إلى صفحة نظرة عامة على المشروع. الآن انقر على زر "إضافة Firebase إلى نظام iOS". أدخل معرف حزمة iOS الخاص بك ، يمكنك العثور عليه في بداية ملف config.xml لتطبيق Cordova.

معرف = "com.possible.firebasenotificationdemo"

ثم انقر فوق الزر "ADD APP".

اتبع التعليمات التي تظهر على الشاشة لتنزيل ملف GoogleInfo.plist. سنحتاج إلى هذا الملف لاحقًا.

انقر فوق "متابعة" للانتقال إلى الخطوة التالية. سترى التعليمات التي توضح لك كيفية إضافة Firebase SDK في مشروعنا. نظرًا لأننا لا نقوم بتطوير التطبيق محليًا ، فلا يتعين علينا اتباع هذه الخطوة. مجرد تجاهل وانقر فوق "متابعة" للمتابعة. أخيرًا ، انقر فوق "إنهاء" لإكمال التكوين. يجب أن تشاهد تطبيق iOS الخاص بك في صفحة نظرة عامة على Firebase.

بالنسبة إلى نظام Android ، سوف تنقر فوق "إضافة Firebase إلى Android الخاص بك" واتباع الخطوات نفسها بالضبط ، ولكن بدلاً من تنزيل ملف GoogleInfo.plist ، ستقوم بتنزيل ملف google-services.json.

الآن ، بالعودة إلى الجزء الخاص بنظام iOS ، نحتاج إلى إضافة شهادة APNs التي ننشئها من أجل إشعارات الدفع. ابحث عن رمز الإعداد في أعلى اليمين. انقر أيقونة الإعدادات> إعدادات المشروع.

حدد علامة التبويب المراسلة في السحاب.

قم بالتمرير لأسفل ، وانقر فوق الزر "تحميل الشهادة".

بعد ذلك ، يجب أن يظهر شريط يسألك عن شهادة تطوير APNs.

انقر على تصفح واختر شهادة APNs (أي ملف .p12) الذي أعددته في القسم السابق. إذا قمت بتكوين الملف بكلمة مرور ، فأدخل كلمة مرور الشهادة ، ثم انقر فوق الزر "تحميل".

يجب أن تشاهد الآن ملف شهادة تطوير APNs في إعداد Cloud Messaging.

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

رائع! ننتهي أخيرا جميع التكوينات لعنة. لنقم بتثبيت المكون الإضافي للإشعارات في تطبيق Cordova.

3. باستخدام cordova-plugin-firebase

لقد أمضينا بعض الوقت للوصول إلى هنا ، ولكن لا تقلق ، سيكون الأمر يستحق ذلك.

التركيب

ثبِّت المكوّن الإضافي عن طريق إضافته config.xml لمشروعك:

أو عن طريق الجري:

cordova plugin إضافة cordova-plugin-firebase@0.1.20 - حفظ

احصل على ملفات تهيئة Firebase ، و GoogleService-Info.plist لنظام ios و google-services.json لنظام Android ، وضعها في المجلد الجذر لمشروع cordova الخاص بك:

- مشروعي/
    منصات /
    الإضافات /
    شبكة الاتصالات العالمية /
    config.xml
    google-services.json <-
    GoogleService-Info.plist <-
    ...

يمكنك العثور على مزيد من التفاصيل حول كيفية استخدام البرنامج المساعد في صفحة Github للمشروع:

https://github.com/arnesson/cordova-plugin-firebase

4. ملاحظات اضافية

رمز الإخطار

سيستخدم تطبيق iOS أيقونة التطبيق الافتراضية ، ولكن بالنسبة لإصدارات Android الجديدة ، نحتاج إلى إضافة ملف أيقونة منفصل.

يمكنك العثور على المزيد حول مواصفات الرمز هنا ، وهناك أيضًا هذه الأداة التي يمكن أن تساعدك في إنشائها.

بعد ذلك ، يمكنك إضافة الرموز إلى المجلدات / platform / android / res / . يمكن القيام بذلك يدويًا أو إنشاء خطاف لأتمتة العملية.

هذا هو.

إذا أعجبك هذا المقال ، فالرجاء النقر فوق ❤ للتوصية به على "متوسط".

ترميز سعيد.