# Guide d'intégration de base du SDK Expo

Cette section contient des informations sur la manière d'intégrer le SDK Expo de Pushwoosh dans votre application.

## Prérequis

Pour intégrer le SDK Expo de Pushwoosh dans votre application, vous aurez besoin des éléments suivants :

<Aside type="note" title="Exigences">
 - Un [compte Pushwoosh](https://sso.pushwoosh.com/login).
 - Un [projet Pushwoosh](/fr/product/first-steps/start-with-your-project/create-your-project) configuré dans votre compte.
 - **Pour l'intégration iOS :**
    - Une plateforme iOS configurée pour envoyer des notifications push. Nous vous recommandons d'utiliser la [configuration d'authentification basée sur un token](/fr/developer/first-steps/connect-messaging-services/ios-configuration/ios-token-based-configuration/) comme approche la plus simple.
    - Définissez la passerelle (Gateway) sur `Sandbox` pour envoyer des notifications push à un simulateur.
 - **Pour l'intégration Android :**
    - Une [plateforme Android configurée](/fr/developer/first-steps/connect-messaging-services/android-configuration/android-firebase-configuration)
    - Le fichier `google-services.json` et le `package name` de votre projet Firebase.
    - Un projet Firebase connecté à votre application Android. Suivez le [guide de configuration de Firebase](https://firebase.google.com/docs/android/setup#manually_add_firebase) si nécessaire.
 - Votre `Pushwoosh Application Code` et votre [token d'API de l'appareil Pushwoosh](/fr/developer/api-reference/api-access-token/#device-api-token) depuis le Control Panel de Pushwoosh pour votre application.
</Aside>

## Étapes d'intégration

### 1. Installer le plugin

Installez le plugin Pushwoosh Expo en utilisant l'Expo CLI

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

Installez le SDK Pushwoosh React Native

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

### 2. Définir les propriétés du plugin

Ajoutez le plugin au début du tableau des plugins avec les propriétés nécessaires :

```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__"
          }
        }
      ]
    ]
  }
}
```
Où :

- `mode` est utilisé pour configurer le droit d'environnement APNs. Les valeurs « Development » ou « production » sont disponibles.
- `PW_API_TOKEN`, `apiToken` est votre [token d'API de l'appareil Pushwoosh](/fr/developer/api-reference/api-access-token/#device-api-token).

### 3. Initialiser Pushwoosh

Dans le composant racine de votre application :
- Importez le plugin `pushwoosh-react-native-plugin`.
- Initialisez le SDK Pushwoosh.
- Appelez `register()` dans votre logique d'initialisation pour vous enregistrer aux notifications push.

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

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

Pushwoosh.register();
```
Où :
- `__YOUR_APP_ID__` est le code d'application du Control Panel de Pushwoosh.

### 4. Configuration native Android

Ajoutez le fichier de configuration Firebase :

1. Copiez votre fichier `google-services.json` dans le répertoire racine du projet.
2. Définissez la propriété `googleServicesFile` sur le chemin de votre `google-services.json` et spécifiez la propriété `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. Configuration native iOS

Définissez la propriété `bundleIdentifier` sur l'objet `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. Pré-compiler l'application
Générez le code natif et configurez les dépendances pour chaque plateforme en exécutant prebuild :
```bash
npx expo prebuild
```

### 7. Exécuter le projet

1. Compilez et exécutez le projet :
<Tabs>
<TabItem label="Android">
```bash
npx expo run:android
```
</TabItem>

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

2. Allez dans le Control Panel de Pushwoosh et [envoyez une notification push](/fr/product/messaging-channels/push-notifications/send-push-notifications/one-time-push).
3. Vous devriez voir la notification dans l'application.

## Intégration étendue

À ce stade, vous avez déjà intégré le SDK et pouvez envoyer et recevoir des notifications push. Explorons maintenant les fonctionnalités de base.

### Écouteurs d'événements de notification push

Dans le SDK Pushwoosh, il y a deux écouteurs d'événements, conçus pour gérer les notifications push :

- L'événement `onPushReceived` est déclenché lorsqu'une notification push est reçue
- L'événement `onPushAccepted` est déclenché lorsqu'un utilisateur ouvre une notification

Vous devez configurer ces écouteurs d'événements juste après l'initialisation du SDK au démarrage de l'application :

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

  }
}
```

### Configuration de l'utilisateur

En vous concentrant sur le comportement et les préférences individuels des utilisateurs, vous pouvez fournir un contenu personnalisé, ce qui entraîne une satisfaction et une fidélité accrues des utilisateurs.

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

### Tags

Les tags sont des paires clé-valeur attribuées aux utilisateurs ou aux appareils, permettant une segmentation basée sur des attributs tels que les préférences ou le comportement, ce qui permet des messages ciblés.

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

### Événements

Les événements sont des actions ou des occurrences spécifiques de l'utilisateur au sein de l'application qui peuvent être suivies pour analyser le comportement et déclencher des messages ou des actions correspondants.

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

### Suivi de la livraison des messages pour iOS

Vous devez ajouter une cible Notification Service Extension à votre projet. Ceci est essentiel pour un suivi précis de la livraison et des fonctionnalités comme Rich Media sur iOS.

Suivez les [étapes du guide natif](/fr/developer/pushwoosh-sdk/ios-sdk/setting-up-pushwoosh-ios-sdk/basic-integration-guide/#4-message-delivery-tracking) pour ajouter la cible d'extension et le code Pushwoosh nécessaire à l'intérieur.

### Propriétés supplémentaires du plugin

| Propriété <div style="width:180px"></div> | Défaut <div style="width:100px"></div> | Description |
|-----------------|---------|-------------|
| **Propriétés iOS** | | |
| `Pushwoosh_LOG_LEVEL` | `INFO` | Niveau de journalisation pour iOS. Valeurs possibles : `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE` |
| **Propriétés Android** | | |
| `logLevel` | `INFO` | Niveau de journalisation pour Android. L'un des suivants : `NONE`, `ERROR`, `WARN`, `INFO`, `DEBUG`, `NOISE` |
| `multiNotificationMode`| `true` | Peut être changé à false si vous souhaitez afficher uniquement la dernière notification pour l'utilisateur |
| `icon` | - | Chemin vers une icône de notification personnalisée pour Android |

## Dépannage

Si vous rencontrez des problèmes lors du processus d'intégration, veuillez vous référer à la section [support et communauté](/fr/developer/pushwoosh-sdk/support-and-community).

###### Erreur d'enregistrement FCM : Échec de la récupération du token. Firebase est-il correctement configuré ?

Assurez-vous que votre propriété Firebase `googleServicesFile` est configurée dans le fichier de configuration Expo et que le fichier `google-services.json` est ajouté au répertoire racine de votre projet :
```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

Vous pourriez rencontrer cette erreur en essayant d'exécuter l'application sur un appareil.\
Pour résoudre le problème, assurez-vous d'avoir terminé l'étape de pré-compilation. Elle génère le code natif et configure les dépendances pour chaque plateforme.

```bash
npx expo prebuild
```