रिएक्ट नेटिव SDK बेसिक इंटीग्रेशन गाइड

इस सेक्शन में यह जानकारी दी गई है कि Pushwoosh रिएक्ट नेटिव SDK को अपने एप्लिकेशन में कैसे इंटीग्रेट करें।

पूर्वापेक्षाएँ

अपने ऐप में Pushwoosh रिएक्ट नेटिव SDK को इंटीग्रेट करने के लिए, आपको निम्नलिखित की आवश्यकता होगी:

आवश्यकताएँ

• एक Pushwoosh अकाउंट।
• आपके अकाउंट में एक Pushwoosh प्रोजेक्ट सेटअप।
• iOS इंटीग्रेशन के लिए:
  • पुश नोटिफिकेशन भेजने के लिए कॉन्फ़िगर किया गया एक iOS प्लेटफ़ॉर्म। हम सबसे सरल तरीके के रूप में टोकन-बेस्ड ऑथेंटिकेशन कॉन्फ़िगरेशन का उपयोग करने की सलाह देते हैं।
  • सिम्युलेटर पर पुश भेजने के लिए गेटवे को Sandbox पर सेट करें।
• Android इंटीग्रेशन के लिए:
  • एक कॉन्फ़िगर किया गया Android प्लेटफ़ॉर्म
  • आपके Firebase प्रोजेक्ट से project number (जिसे सेंडर आईडी भी कहा जाता है), google-services.json फ़ाइल और package name।
  • आपके Android एप्लिकेशन से जुड़ा एक Firebase प्रोजेक्ट। यदि आवश्यक हो तो Firebase सेटअप गाइड का पालन करें।
• आपके एप्लिकेशन के लिए Pushwoosh कंट्रोल पैनल से आपका Pushwoosh एप्लिकेशन कोड और Pushwoosh डिवाइस API टोकन।

इंटीग्रेशन के चरण

1. Pushwoosh रिएक्ट नेटिव SDK डिपेंडेंसी जोड़ें

Pushwoosh रिएक्ट नेटिव SDK डिपेंडेंसी को अपने प्रोजेक्ट में जोड़ें:

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

2. रिएक्ट नेटिव 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 प्रोजेक्ट नंबर है।

3. iOS नेटिव सेटअप

3.1 कैपेबिलिटीज़

अपने प्रोजेक्ट में पुश नोटिफिकेशन को सक्षम करने के लिए, आपको कुछ कैपेबिलिटीज़ जोड़ने की आवश्यकता है।

साइनिंग और कैपेबिलिटीज़ सेक्शन में, निम्नलिखित कैपेबिलिटीज़ जोड़ें:

• Push Notifications
• Background Modes। इस कैपेबिलिटी को जोड़ने के बाद, Remote notifications के लिए बॉक्स को चेक करें।

यदि आप टाइम सेंसिटिव नोटिफिकेशन (iOS 15+) का उपयोग करना चाहते हैं, तो Time Sensitive Notifications कैपेबिलिटी भी जोड़ें।

3.2 Info.plist

अपने Runner/Info.plist में __PUSHWOOSH_DEVICE_API_TOKEN__ की को Pushwoosh डिवाइस API टोकन पर सेट करें:

info.plist

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

3.3 मैसेज डिलीवरी ट्रैकिंग

आपको अपने प्रोजेक्ट में एक नोटिफिकेशन सर्विस एक्सटेंशन टारगेट जोड़ना होगा। यह सटीक डिलीवरी ट्रैकिंग और iOS पर रिच मीडिया जैसी सुविधाओं के लिए आवश्यक है।

एक्सटेंशन टारगेट और उसके भीतर आवश्यक Pushwoosh कोड जोड़ने के लिए नेटिव गाइड के चरणों का पालन करें।

3.4 iOS रिएक्ट नेटिव प्रोजेक्ट के लिए डिपेंडेंसीज़ इंस्टॉल करना

iOS रिएक्ट नेटिव प्रोजेक्ट के लिए डिपेंडेंसीज़ इंस्टॉल करने के लिए, टर्मिनल में ios फ़ोल्डर पर जाएँ और चलाएँ:

pod install --repo-update

4. Android नेटिव सेटअप

4.1 डिपेंडेंसीज़ इंस्टॉल करें

सुनिश्चित करें कि आवश्यक डिपेंडेंसीज़ और प्लगइन्स आपकी Gradle स्क्रिप्ट्स में जोड़े गए हैं:

Google सर्विसेज 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 में <application> टैग के अंदर Pushwoosh डिवाइस API टोकन जोड़ें:

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) {

    // यूज़र आईडी सेट करें
    Pushwoosh.setUserId(user.getId());

    // यूज़र ईमेल सेट करें
    Pushwoosh.setEmails(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()
    });
  }
}

टैग्स

टैग्स यूज़र्स या डिवाइस को असाइन किए गए की-वैल्यू पेयर होते हैं, जो प्राथमिकताओं या व्यवहार जैसे गुणों के आधार पर सेगमेंटेशन की अनुमति देते हैं, जिससे लक्षित मैसेजिंग संभव होती है।

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

इवेंट्स

इवेंट्स ऐप के भीतर विशिष्ट यूज़र एक्शन या घटनाएँ होती हैं जिन्हें व्यवहार का विश्लेषण करने और संबंधित संदेशों या कार्यों को ट्रिगर करने के लिए ट्रैक किया जा सकता है।

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

समस्या निवारण

यदि आपको इंटीग्रेशन प्रक्रिया के दौरान कोई समस्या आती है, तो कृपया समर्थन और समुदाय सेक्शन देखें।