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

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

المتطلبات المسبقة

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

المتطلبات

• حساب Pushwoosh.
• مشروع Pushwoosh تم إعداده في حسابك.
• لتكامل iOS:
  • منصة iOS مهيأة لإرسال Push Notifications. نوصي باستخدام تكوين المصادقة المستندة إلى الرمز المميز كأبسط طريقة.
  • اضبط Gateway على Sandbox لإرسال Push Notifications إلى محاكي.
• لتكامل Android:
  • منصة Android مهيأة
  • project number (المعروف أيضًا باسم Sender ID)، ملف google-services.json و package name من مشروع Firebase الخاص بك.
  • مشروع Firebase متصل بتطبيق Android الخاص بك. اتبع دليل إعداد Firebase إذا لزم الأمر.
• Pushwoosh Application Code الخاص بك و Pushwoosh Device API Token من Pushwoosh Control Panel لتطبيقك.

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

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() في منطق التهيئة الخاص بك للتسجيل في Push Notifications.

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__ هو Application Code من Pushwoosh Control Panel.
• __YOUR_FCM_SENDER_ID__ هو Project Number الخاص بـ 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__ على Pushwoosh Device API Token:

info.plist

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

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

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

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

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

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

pod install --repo-update

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

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

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

أضف Google Services Gradle plugin إلى تبعيات 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 الخاص بك، أضف Pushwoosh Device API Token داخل وسم <application>:

AndroidManifest.xml

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

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

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

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

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

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

مستمعي أحداث Push Notification

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

• يتم تشغيل حدث pushReceived عند استلام Push Notification
• يتم تشغيل حدث 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()
    });
  }
}

العلامات (Tags)

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

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()
    });
  }
}

الأحداث (Events)

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

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()
    });
  }
}

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

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