انتقل إلى المحتوى
أدلة المستخدم الدعم طلب عرض توضيحي تسجيل الدخول
Pushwoosh.com

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

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

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

Anchor link to

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

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

Anchor link to

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

Anchor link to

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

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

2. تهيئة React Native SDK

Anchor link to

في المكون الجذري لملف 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__"
});


Pushwoosh.register();

حيث:

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

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

Anchor link to

3.1 القدرات (Capabilities)

Anchor link to

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

في قسم Signing & Capabilities، أضف القدرات التالية:

  • Push Notifications
  • Background Modes. بعد إضافة هذه القدرة، حدد مربع Remote notifications.

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

3.2 Info.plist

Anchor link to

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

info.plist
<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>

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

Anchor link to

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

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

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

Anchor link to

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

Terminal window
pod install --repo-update

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

Anchor link to

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

Anchor link to

تأكد من إضافة الاعتماديات والإضافات المطلوبة إلى نصوص 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

Anchor link to

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

4.3 إضافة بيانات Pushwoosh الوصفية

Anchor link to

في ملف main/AndroidManifest.xml الخاص بك، أضف رمز Pushwoosh Device API داخل وسم <application>:

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

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

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

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

التكامل الممتد

Anchor link to

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

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

Anchor link to

في 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));
    });


  }
}

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

Anchor link to

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

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


class Registration {
  afterUserLogin(user: User) {


    // تعيين معرف المستخدم
    Pushwoosh.setUserId(user.getId());


    // تعيين بريد المستخدم الإلكتروني
    Pushwoosh.setEmails(user.getEmailList());


    // تعيين معرف المستخدم والبريد الإلكتروني في استدعاء واحد
    Pushwoosh.setUserEmails(user.getId(), user.getEmailList());


    // تعيين رقم SMS للمستخدم
    Pushwoosh.registerSMSNumber(user.getPhoneNumber());


    // تعيين رقم WhatsApp للمستخدم
    Pushwoosh.registerWhatsappNumber(user.getWhatsAppNumber());


    // تعيين معلومات إضافية للمستخدم كعلامات لـ Pushwoosh
    Pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}

العلامات (Tags)

Anchor link to

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

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


class UpdateUser {
  afterUserUpdateProfile(user: User) {


    // تعيين قائمة الفئات المفضلة
    Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });


    // تعيين معلومات الدفع
    Pushwoosh.setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}

الأحداث (Events)

Anchor link to

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

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


class Registration {


  // تتبع حدث تسجيل الدخول
  afterUserLogin(user: User) {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }


  // تتبع حدث الشراء
  afterUserPurchase(product: Product) {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}

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

Anchor link to

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