# React Native SDK बेसिक इंटीग्रेशन गाइड

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

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

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

<Aside type="note" title="आवश्यकताएँ">
 - एक [Pushwoosh अकाउंट](https://sso.pushwoosh.com/login)।
 - आपके अकाउंट में एक [Pushwoosh प्रोजेक्ट](/hi/product/first-steps/start-with-your-project/create-your-project) सेटअप होना चाहिए।
 - **iOS इंटीग्रेशन के लिए:**
    - पुश नोटिफिकेशन्स भेजने के लिए कॉन्फ़िगर किया गया एक iOS प्लेटफ़ॉर्म। हम सबसे सरल तरीके के रूप में [टोकन-आधारित ऑथेंटिकेशन कॉन्फ़िगरेशन](/hi/developer/first-steps/connect-messaging-services/ios-configuration/ios-token-based-configuration/) का उपयोग करने की सलाह देते हैं।
    - सिम्युलेटर पर पुश भेजने के लिए गेटवे को `Sandbox` पर सेट करें।
 - **Android इंटीग्रेशन के लिए:**
    - एक [कॉन्फ़िगर किया गया Android प्लेटफ़ॉर्म](/hi/developer/first-steps/connect-messaging-services/android-configuration/android-firebase-configuration)
    - आपके Firebase प्रोजेक्ट से `google-services.json` फ़ाइल और `package name`।
    - आपके Android एप्लिकेशन से जुड़ा एक Firebase प्रोजेक्ट। यदि आवश्यक हो तो [Firebase सेटअप गाइड](https://firebase.google.com/docs/android/setup#manually_add_firebase) का पालन करें।
 - आपके एप्लिकेशन के लिए Pushwoosh कंट्रोल पैनल से आपका `Pushwoosh Application Code` और [Pushwoosh Device API Token](/hi/developer/api-reference/api-access-token/#device-api-token)।
</Aside>

## इंटीग्रेशन के स्टेप्स

### 1. Pushwoosh React Native SDK डिपेंडेंसी जोड़ें

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

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

### 2. React Native SDK इनिशियलाइज़ेशन

आपकी `index.js` फ़ाइल के रूट कंपोनेंट में:
- `pushwoosh-react-native-plugin` को इम्पोर्ट करें।
- Pushwoosh SDK को इनिशियलाइज़ करें।
- पुश नोटिफिकेशन्स के लिए रजिस्टर करने के लिए अपने इनिशियलाइज़ेशन लॉजिक में `register()` को कॉल करें।

```javascript title="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 नेटिव सेटअप

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

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

Signing & Capabilities सेक्शन में, निम्नलिखित कैपेबिलिटीज़ जोड़ें:
- `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](/hi/developer/api-reference/api-access-token/#device-api-token) पर सेट करें:
```swift title="info.plist"
<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>
```

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

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

एक्सटेंशन टारगेट और उसके भीतर आवश्यक Pushwoosh कोड जोड़ने के लिए [नेटिव गाइड के स्टेप्स](/hi/developer/pushwoosh-sdk/ios-sdk/setting-up-pushwoosh-ios-sdk/basic-integration-guide/#4-message-delivery-tracking) का पालन करें।

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

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

```bash
pod install --repo-update
```

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

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

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

अपने प्रोजेक्ट-लेवल `build.gradle` डिपेंडेंसीज़ में Google Services Gradle प्लगइन जोड़ें:

```groovy title="android/build.gradle"
buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}
```

अपने ऐप-लेवल `build.gradle` फ़ाइल में प्लगइन लागू करें:

```groovy title="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](/hi/developer/api-reference/api-access-token/#device-api-token) जोड़ें:

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

> **महत्वपूर्ण:** सुनिश्चित करें कि आप अपने Pushwoosh कंट्रोल पैनल में सही ऐप को टोकन एक्सेस दें। [और जानें](/hi/developer/api-reference/api-access-token/#edit-token)

### 5. प्रोजेक्ट चलाएँ

1. प्रोजेक्ट को बिल्ड और रन करें।
2. Pushwoosh कंट्रोल पैनल पर जाएँ और [एक पुश नोटिफिकेशन भेजें](/hi/product/messaging-channels/push-notifications/send-push-notifications/one-time-push)।
3. आपको ऐप में नोटिफिकेशन दिखना चाहिए।

## एक्सटेंडेड इंटीग्रेशन

इस स्तर पर, आपने SDK को पहले ही इंटीग्रेट कर लिया है और आप पुश नोटिफिकेशन्स भेज और प्राप्त कर सकते हैं। अब, आइए मुख्य कार्यक्षमता का पता लगाएं।

### पुश नोटिफिकेशन इवेंट लिसनर्स

Pushwoosh SDK में दो इवेंट लिसनर्स हैं, जो पुश नोटिफिकेशन्स को हैंडल करने के लिए डिज़ाइन किए गए हैं:

- `pushReceived` इवेंट तब ट्रिगर होता है, जब एक पुश नोटिफिकेशन प्राप्त होता है
- `pushOpened` इवेंट तब ट्रिगर होता है, जब कोई यूज़र नोटिफिकेशन खोलता है

आपको इन इवेंट लिसनर्स को एप्लिकेशन स्टार्टअप पर SDK के इनिशियलाइज़ेशन के ठीक बाद सेटअप करना चाहिए:

```javascript
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));
    });

  }
}
```

### यूज़र कॉन्फ़िगरेशन

व्यक्तिगत यूज़र के व्यवहार और वरीयताओं पर ध्यान केंद्रित करके, आप व्यक्तिगत कंटेंट दे सकते हैं, जिससे यूज़र की संतुष्टि और वफादारी बढ़ती है।

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

### टैग्स

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

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

### इवेंट्स

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

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

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

यदि आपको इंटीग्रेशन प्रक्रिया के दौरान कोई समस्या आती है, तो कृपया [सपोर्ट और कम्युनिटी](/hi/developer/pushwoosh-sdk/support-and-community) सेक्शन देखें।