Guide d'intégration de base du SDK React Native

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

Prérequis

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

Exigences

• Un compte Pushwoosh.
• Un projet Pushwoosh configuré dans votre compte.
• Pour l’intégration iOS :
  • Une plateforme iOS configurée pour envoyer des notifications push. Nous recommandons d’utiliser la configuration d’authentification basée sur un token comme approche la plus simple.
  • Réglez la passerelle sur Sandbox pour envoyer des pushes à un simulateur.
• Pour l’intégration Android :
  • Une plateforme Android configurée
  • 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 si nécessaire.
• Votre Pushwoosh Application Code et votre token d’API de l’appareil Pushwoosh depuis le Control Panel de Pushwoosh pour votre application.

Étapes d’intégration

1. Ajouter la dépendance du SDK React Native de Pushwoosh

Ajoutez la dépendance du SDK React Native de Pushwoosh à votre projet :

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

2. Initialisation du SDK React Native

Dans le composant racine de votre fichier index.js :

• Importez le pushwoosh-react-native-plugin.
• Initialisez le SDK Pushwoosh.
• Appelez register() dans votre logique d’initialisation pour vous enregistrer aux notifications push.

index.js

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

AppRegistry.registerComponent(appName, () => App);

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

Pushwoosh.register();

Où :

• __YOUR_APP_ID__ est le code d’application du Control Panel de Pushwoosh.

3. Configuration native pour iOS

3.1 Capacités

Pour activer les notifications push dans votre projet, vous devez ajouter certaines capacités.

Dans la section Signing & Capabilities, ajoutez les capacités suivantes :

• Push Notifications
• Background Modes. Après avoir ajouté cette capacité, cochez la case Remote notifications.

Si vous avez l’intention d’utiliser les notifications urgentes (Time Sensitive Notifications) (iOS 15+), ajoutez également la capacité Time Sensitive Notifications.

3.2 Info.plist

Dans votre Runner/Info.plist, définissez la clé __PUSHWOOSH_DEVICE_API_TOKEN__ sur le token d’API de l’appareil Pushwoosh :

info.plist

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

3.3 Suivi de la livraison des messages

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

Suivez les étapes du guide natif pour ajouter la cible d’extension et le code Pushwoosh nécessaire à l’intérieur.

3.4 Installation des dépendances pour le projet React Native iOS

Pour installer les dépendances pour le projet React Native iOS, naviguez vers le dossier ios dans le terminal et exécutez :

pod install --repo-update

4. Configuration native pour Android

4.1 Installer les dépendances

Assurez-vous que les dépendances et les plugins requis sont ajoutés à vos scripts Gradle :

Ajoutez le plugin Google Services Gradle aux dépendances de votre build.gradle au niveau du projet :

android/build.gradle

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

Appliquez le plugin dans votre fichier build.gradle au niveau de l’application :

app/build.gradle

apply plugin: 'com.google.gms.google-services'

4.2 Ajouter le fichier de configuration Firebase

Placez le fichier google-services.json dans le dossier android/app de votre répertoire de projet.

4.3 Ajouter les métadonnées Pushwoosh

Dans votre main/AndroidManifest.xml, ajoutez le token d’API de l’appareil Pushwoosh à l’intérieur de la balise <application> :

AndroidManifest.xml

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

Important : Assurez-vous de donner au token l’accès à la bonne application dans votre Control Panel Pushwoosh. En savoir plus

5. Exécuter le projet

1. Compilez et exécutez le projet.
2. Allez dans le Control Panel de Pushwoosh et envoyez une notification 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 pushReceived est déclenché lorsqu’une notification push est reçue.
• L’événement pushOpened est déclenché lorsqu’un utilisateur ouvre une notification.

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

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

  }
}

Configuration de l’utilisateur

En vous concentrant sur le comportement et les préférences de chaque utilisateur, vous pouvez fournir un contenu personnalisé, ce qui conduit à une satisfaction et une fidélité accrues des utilisateurs.

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

class Registration {
  afterUserLogin(user: User) {

    // Définir l'ID utilisateur
    Pushwoosh.setUserId(user.getId());

    // Définir l'e-mail de l'utilisateur
    Pushwoosh.setEmails(user.getEmailList());

    // Définir le numéro SMS de l'utilisateur
    Pushwoosh.registerSMSNumber(user.getPhoneNumber());

    // Définir le numéro WhatsApp de l'utilisateur
    Pushwoosh.registerWhatsappNumber(user.getWhatsAppNumber());

    // Définir des informations utilisateur supplémentaires en tant que tags pour 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 une messagerie ciblée.

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

class UpdateUser {
  afterUserUpdateProfile(user: User) {

    // Définir la liste des catégories favorites
    Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Définir les informations de paiement
    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.

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

class Registration {

  // Suivre l'événement de connexion
  afterUserLogin(user: User) {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // Suivre l'événement d'achat
  afterUserPurchase(product: Product) {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}

Dépannage

Si vous rencontrez des problèmes lors du processus d’intégration, veuillez vous référer à la section support et communauté.