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

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

## आवश्यक शर्तें

अपने ऐप में Pushwoosh एक्सपो 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 एप्लीकेशन कोड` और [Pushwoosh डिवाइस API टोकन](/hi/developer/api-reference/api-access-token/#device-api-token)।
</Aside>

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

### 1. प्लगइन इंस्टॉल करें

एक्सपो CLI का उपयोग करके Pushwoosh एक्सपो प्लगइन इंस्टॉल करें

```bash
expo install pushwoosh-expo-plugin
```

Pushwoosh React Native SDK इंस्टॉल करें

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

### 2. प्लगइन प्रॉपर्टीज़ सेट करें

आवश्यक प्रॉपर्टीज़ के साथ प्लगइन को प्लगइन ऐरे के सामने जोड़ें:

```json title="app.json/app.config.js"
{
  "expo": {
    "plugins": [
      [
        "pushwoosh-expo-plugin",
        {
          "mode": "development",
          "ios": {
            "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
          },
          "android": {
            "apiToken": "__YOUR_DEVICE_API_TOKEN__"
          }
        }
      ]
    ]
  }
}
```
जहाँ:

- `mode` का उपयोग APNs एनवायरनमेंट एंटाइटलमेंट को कॉन्फ़िगर करने के लिए किया जाता है। “Development” या “production” वैल्यू उपलब्ध हैं।
- `PW_API_TOKEN`, `apiToken` आपका [Pushwoosh डिवाइस API टोकन](/hi/developer/api-reference/api-access-token/#device-api-token) है।

### 3. Pushwoosh को इनिशियलाइज़ करें

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

```javascript title="index.tsx"
import Pushwoosh from 'pushwoosh-react-native-plugin';

Pushwoosh.init({
    "pw_appid": "__YOUR_APP_ID__"
});

Pushwoosh.register();
```
जहाँ:
- `__YOUR_APP_ID__` Pushwoosh कंट्रोल पैनल से एप्लिकेशन कोड है।

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

Firebase कॉन्फ़िगरेशन फ़ाइल जोड़ें:

1. अपनी `google-services.json` फ़ाइल को प्रोजेक्ट की रूट डायरेक्टरी में कॉपी करें।
2. `googleServicesFile` प्रॉपर्टी को अपनी `google-services.json` के पाथ पर सेट करें और `package` प्रॉपर्टी निर्दिष्ट करें:

```json title="app.json/app.config.js"
  "expo": {
    "name": "sample",
  "android": {
    "package": "com.pushwoosh.sample",
    "googleServicesFile": "./google-services.json"
  },
  "plugins": [
    [
      "pushwoosh-expo-plugin",
      {
        "mode": "development",
        "ios": {
          "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
        },
        "android": {
          "apiToken": "__YOUR_DEVICE_API_TOKEN__"
        }
      }
    ]
  ]
}
```

### 5. iOS नेटिव सेटअप

`bundleIdentifier` प्रॉपर्टी को `ios` ऑब्जेक्ट पर सेट करें:

```json title="app.json/app.config.js"
  "expo": {
    "name": "sample",
    "ios": {
      "bundleIdentifier": "com.pushwoosh.sample"
    },
    "plugins": [
    [
      "pushwoosh-expo-plugin",
      {
        "mode": "development",
        "ios": {
          "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
        },
        "android": {
          "apiToken": "__YOUR_DEVICE_API_TOKEN__"
        }
      }
    ]
  ]
}
```

### 6. ऐप को प्रीबिल्ड करें
प्रीबिल्ड चलाकर प्रत्येक प्लेटफॉर्म के लिए नेटिव कोड जेनरेट करें और डिपेंडेंसी को कॉन्फ़िगर करें:
```bash
npx expo prebuild
```

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

1. प्रोजेक्ट को बिल्ड और रन करें:
<Tabs>
<TabItem label="Android">
```bash
npx expo run:android
```
</TabItem>

<TabItem label="iOS">
```bash
npx expo run:ios
```
</TabItem>
</Tabs>

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

## विस्तारित इंटीग्रेशन

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

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

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

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

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

```typescript 
import { DeviceEventEmitter } from 'react-native';
import Pushwoosh from 'pushwoosh-react-native-plugin';

class PushwooshNotificationHandler {
  setupPushListeners(): void {

    DeviceEventEmitter.addListener("pushReceived", (e) => {
      console.warn("Push received: " + JSON.stringify(e));
    });

    DeviceEventEmitter.addListener("pushOpened", (e) => {
      console.warn("Push opened:" + JSON.stringify(e));
    });

  }
}
```

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

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

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

class Registration {
  afterUserLogin(user: User): void {
    
    // Set user ID
    Pushwoosh.setUserId(user.getId());

    // Set user email
    Pushwoosh.setEmails(user.getEmailList());

    // Setting additional user information as tags for Pushwoosh
    Pushwoosh.setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}
```

### टैग्स

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

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

class UpdateUser {
  afterUserUpdateProfile(user: User): void {

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

### इवेंट्स

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

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

class Registration {

  // Track login event
  afterUserLogin(user: User): void {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // Track purchase event
  afterUserPurchase(product: Product): void {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}
```

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

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

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

### अतिरिक्त प्लगइन प्रॉपर्टीज़

| प्रॉपर्टी <div style="width:180px"></div> | डिफ़ॉल्ट <div style="width:100px"></div> | विवरण |
|-----------------|---------|-------------|
| **iOS प्रॉपर्टीज़** | | |
| `Pushwoosh_LOG_LEVEL` | `INFO` | iOS के लिए लॉग लेवल। संभावित वैल्यू: `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE` |
| **Android प्रॉपर्टीज़** | | |
| `logLevel` | `INFO` | Android के लिए लॉग लेवल। इनमें से एक: `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE` |
| `multiNotificationMode`| `true` | यदि आप यूज़र के लिए केवल अंतिम नोटिफिकेशन दिखाना चाहते हैं तो इसे false में बदला जा सकता है |
| `icon` | - | Android के लिए कस्टम नोटिफिकेशन आइकन का पाथ |

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

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

###### FCM registration error: Failed to retrieve token. Is firebase configured correctly?

सुनिश्चित करें कि आपकी Firebase `googleServicesFile` प्रॉपर्टी एक्सपो कॉन्फ़िगरेशन फ़ाइल में सेटअप है और `google-services.json` फ़ाइल आपके प्रोजेक्ट की रूट डायरेक्टरी में जोड़ी गई है:
```json title="app.json/app.config.js"
"expo": {
  "name": "sample",
  "android": {
    "package": "com.pushwoosh.sample",
    "googleServicesFile": "./google-services.json"
  },
  "plugins": [
    [
      "pushwoosh-expo-plugin",
      {
        "mode": "development",
        "ios": {
          "PW_API_TOKEN": "__YOUR_DEVICE_API_TOKEN__"
        },
        "android": {
          "apiToken": "__YOUR_DEVICE_API_TOKEN__"
        }
      }
    ]
  ]
}
```

###### TypeError: Cannot read property 'init' of null

डिवाइस पर ऐप चलाने का प्रयास करते समय आपको यह त्रुटि मिल सकती है।
समस्या को हल करने के लिए, सुनिश्चित करें कि आपने प्रीबिल्ड चरण पूरा कर लिया है। यह नेटिव कोड जेनरेट करता है और प्रत्येक प्लेटफॉर्म के लिए डिपेंडेंसी को कॉन्फ़िगर करता है।

```bash
npx expo prebuild
```