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.

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

Installez le plugin Expo de Pushwoosh en utilisant l’Expo CLI

expo install pushwoosh-expo-plugin

Installez le SDK React Native de Pushwoosh

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

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

{
  "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 Jeton d’API de l’appareil 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 inscrire aux notifications push.

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

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

Pushwoosh.register();

Où :

• __YOUR_APP_ID__ est le code d’application depuis le Control Panel de Pushwoosh.
• __YOUR_FCM_SENDER_ID__ est le numéro de projet Firebase depuis la console Firebase.

Ajouter 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 :

  "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__"
        }
      }
    ]
  ]
}

Définissez la propriété bundleIdentifier sur l’objet ios :

  "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__"
        }
      }
    ]
  ]
}

Générez le code natif et configurez les dépendances pour chaque plateforme en exécutant prebuild :

npx expo prebuild

1. Compilez et exécutez le projet :

npx expo run:android

npx expo run:ios

2. Allez dans le Control Panel de Pushwoosh et envoyez une notification push.
3. Vous devriez voir la notification dans l’application.

À 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.

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 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(): void {

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

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

  }
}

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

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

class Registration {
  afterUserLogin(user: User): void {

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

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

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

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 rend possible la messagerie ciblée.

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

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

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

Les événements sont des actions ou des occurrences spécifiques de l’utilisateur dans 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): void {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

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

Vous devez ajouter une cible d’Extension de Service de Notification à 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.

Si vous rencontrez des problèmes pendant le processus d’intégration, veuillez consulter la section support et communauté.

Assurez-vous que votre propriété Firebase googleServicesFile est configurée dans le fichier de configuration d’Expo et que le fichier google-services.json est ajouté au répertoire racine de votre projet :

"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__"
        }
      }
    ]
  ]
}

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.

npx expo prebuild