دليل التكامل الأساسي لـ React Native SDK

يحتوي هذا القسم على معلومات حول كيفية دمج Pushwoosh React Native SDK في تطبيقك.

المتطلبات الأساسية

لدمج Pushwoosh React Native SDK في تطبيقك، ستحتاج إلى ما يلي:

المتطلبات

• حساب Pushwoosh.
• مشروع Pushwoosh تم إعداده في حسابك.
• لتكامل iOS:
  • منصة iOS تم تكوينها لإرسال إشعارات الدفع. نوصي باستخدام تكوين المصادقة المستندة إلى الرمز المميز كأبسط نهج.
  • اضبط البوابة على Sandbox لإرسال الإشعارات إلى محاكي.
• لتكامل Android:
  • منصة Android مهيأة
  • رقم المشروع (المعروف أيضًا باسم Sender ID) ، ملف google-services.json و اسم الحزمة من مشروع Firebase الخاص بك.
  • مشروع Firebase متصل بتطبيق Android الخاص بك. اتبع دليل إعداد Firebase إذا لزم الأمر.
• رمز تطبيق Pushwoosh الخاص بك و رمز API لجهاز Pushwoosh من لوحة تحكم Pushwoosh لتطبيقك.

خطوات التكامل

1. إضافة تبعية Pushwoosh React Native SDK

أضف تبعية Pushwoosh React Native SDK إلى مشروعك:

npm install pushwoosh-react-native-plugin --save

2. تهيئة React Native SDK

في المكون الجذر لملف index.js الخاص بك:

• استورد pushwoosh-react-native-plugin.
• قم بتهيئة Pushwoosh SDK.
• استدعِ register() في منطق التهيئة الخاص بك للتسجيل في إشعارات الدفع.

index.js

import Pushwoosh from 'pushwoosh-react-native-plugin';

AppRegistry.registerComponent(appName, () => App);

Pushwoosh.init({
    "pw_appid" : "__YOUR_APP_ID__" ,
    "project_number" : "__YOUR_FCM_SENDER_ID__"
});

Pushwoosh.register();

حيث:

• __YOUR_APP_ID__ هو رمز التطبيق من لوحة تحكم Pushwoosh.
• __YOUR_FCM_SENDER_ID__ هو رقم مشروع Firebase من Firebase Console.

3. إعداد iOS الأصلي

3.1 الإمكانيات

لتمكين Push Notifications في مشروعك، تحتاج إلى إضافة بعض الإمكانيات.

في قسم Signing & Capabilities، أضف الإمكانيات التالية:

• Push Notifications
• Background Modes. بعد إضافة هذه الإمكانية، حدد المربع الخاص بـ Remote notifications.

إذا كنت تنوي استخدام Time Sensitive Notifications (iOS 15+)، فأضف أيضًا إمكانية Time Sensitive Notifications.

3.2 Info.plist

في Runner/Info.plist الخاص بك، اضبط مفتاح __PUSHWOOSH_DEVICE_API_TOKEN__ على رمز API لجهاز Pushwoosh:

info.plist

<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>

3.3 تتبع تسليم الرسائل

يجب عليك إضافة هدف Notification Service Extension إلى مشروعك. هذا ضروري لتتبع التسليم الدقيق وميزات مثل Rich Media على iOS.

اتبع خطوات الدليل الأصلي لإضافة هدف الامتداد ورمز Pushwoosh الضروري بداخله.

3.4 تثبيت التبعيات لمشروع iOS React Native

لتثبيت التبعيات لمشروع iOS React Native، انتقل إلى مجلد ios في الطرفية وقم بتشغيل:

pod install --repo-update

4. إعداد Android الأصلي

4.1 تثبيت التبعيات

تأكد من إضافة التبعيات والمكونات الإضافية المطلوبة إلى نصوص Gradle البرمجية الخاصة بك:

أضف مكون Google Services Gradle الإضافي إلى تبعيات build.gradle على مستوى مشروعك:

android/build.gradle

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

طبق المكون الإضافي في ملف build.gradle على مستوى تطبيقك:

app/build.gradle

apply plugin: 'com.google.gms.google-services'

4.2 إضافة ملف تكوين Firebase

ضع ملف google-services.json في مجلد android/app في دليل مشروعك.

4.3 إضافة بيانات تعريف Pushwoosh

في main/AndroidManifest.xml الخاص بك، أضف رمز API لجهاز Pushwoosh داخل علامة <application>:

AndroidManifest.xml

<meta-data android:name="com.pushwoosh.apitoken" android:value="__YOUR_DEVICE_API_TOKEN__" />

هام: تأكد من منح الرمز المميز حق الوصول إلى التطبيق الصحيح في لوحة تحكم Pushwoosh الخاصة بك. تعلم المزيد

5. تشغيل المشروع

1. قم ببناء وتشغيل المشروع.
2. انتقل إلى لوحة تحكم Pushwoosh و أرسل إشعار دفع.
3. يجب أن ترى الإشعار في التطبيق.

التكامل الموسع

في هذه المرحلة، قمت بالفعل بدمج SDK ويمكنك إرسال واستقبال إشعارات الدفع. الآن، دعنا نستكشف الوظائف الأساسية

مستمعو أحداث إشعارات الدفع

في Pushwoosh SDK، يوجد مستمعان للأحداث، مصممان للتعامل مع إشعارات الدفع:

• يتم تشغيل حدث pushReceived، عند استلام إشعار دفع
• يتم تشغيل حدث pushOpened، عندما يفتح المستخدم إشعارًا

يجب عليك إعداد مستمعي الأحداث هؤلاء مباشرة بعد تهيئة SDK عند بدء تشغيل التطبيق:

import {DeviceEventEmitter} from 'react-native'
import Pushwoosh from 'pushwoosh-react-native-plugin';

class PushwooshNotificationHandler {
  setupPushListeners() {

    DeviceEventEmitter.addListener('pushReceived', (e) => {
      console.warn("Push received: " + JSON.stringify(e));
    });

    DeviceEventEmitter.addListener('pushOpened', (e) => {
      console.warn("Push accepted: " + JSON.stringify(e));
    });

  }
}

تكوين المستخدم

من خلال التركيز على سلوك المستخدم الفردي وتفضيلاته، يمكنك تقديم محتوى مخصص، مما يؤدي إلى زيادة رضا المستخدم وولائه

import Pushwoosh from 'pushwoosh-react-native-plugin';

class Registration {
  afterUserLogin(user: User) {

    // Set user ID
    Pushwoosh.setUserId(user.getId());

    // Set user email
    Pushwoosh.setEmails(user.getEmailList());

    // Set user SMS number
    Pushwoosh.registerSMSNumber(user.getPhoneNumber());

    // Set user WhatsApp number
    Pushwoosh.registerWhatsappNumber(user.getWhatsAppNumber());

    // Setting additional user information as tags for Pushwoosh
    Pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}

العلامات

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

import Pushwoosh from 'pushwoosh-react-native-plugin';

class UpdateUser {
  afterUserUpdateProfile(user: User) {

    // Set list of favorite categories
    Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Set payment information
    Pushwoosh.setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}

الأحداث

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

import Pushwoosh from 'pushwoosh-react-native-plugin';

class Registration {

  // Track login event
  afterUserLogin(user: User) {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // Track purchase event
  afterUserPurchase(product: Product) {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}

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

إذا واجهت أي مشاكل أثناء عملية التكامل، يرجى الرجوع إلى قسم الدعم والمجتمع.