रिएक्ट नेटिव 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 Application Code और Pushwoosh Device API Token।

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

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 Device API Token पर सेट करें:

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 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 में <application> टैग के अंदर Pushwoosh Device API Token जोड़ें:

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

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

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