Guide d'intégration de base du SDK Expo

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

Prérequis

Pour intégrer le SDK Pushwoosh Expo 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 jeton comme approche la plus simple.
  • Réglez la passerelle (Gateway) sur Sandbox pour envoyer des notifications push à un simulateur.
• Pour l’intégration Android :
  • Une plateforme Android configurée
  • Le numéro de projet (également connu sous le nom de Sender ID), le fichier google-services.json et le nom du package de votre projet Firebase.
  • Un projet Firebase connecté à votre application Android. Suivez le guide de configuration de Firebase si nécessaire.
• Votre Code d'Application Pushwoosh et votre Jeton d’API de l’appareil Pushwoosh depuis le Panneau de Contrôle Pushwoosh pour votre application.

Étapes d’intégration

1. Installez le plugin

Installez le plugin Pushwoosh Expo en utilisant l’Expo CLI

expo install pushwoosh-expo-plugin

Installez le SDK Pushwoosh React Native

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

2. Définissez les propriétés du plugin

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

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 Jeton d’API de l’appareil Pushwoosh.

3. Initialisez 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.

index.tsx

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 du Panneau de Contrôle Pushwoosh.
• __YOUR_FCM_SENDER_ID__ est le numéro de projet Firebase de la Console Firebase.

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 :

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 :

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é-construisez l’application

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

npx expo prebuild

7. Exécutez le projet

1. Construisez et exécutez le projet :

Android

npx expo run:android

iOS

npx expo run:ios

2. Allez dans le Panneau de Contrôle 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 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 :

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.

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

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

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

    // Définir l'e-mail 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()
    });
  }
}

Tags

Les tags sont des paires clé-valeur assigné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.

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

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

Suivi de la livraison des messages pour iOS

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 des fonctionnalités comme les 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.

Propriétés supplémentaires du plugin

Propriété	Défaut	Description
Propriétés iOS
Pushwoosh_LOG_LEVEL	INFO	Niveau de log pour iOS. Valeurs possibles : NONE, ERROR, WARN, INFO, DEBUG, NOISE
Propriétés Android
logLevel	INFO	Niveau de log pour Android. L’une des valeurs suivantes : NONE, ERROR, WARN, INFO, DEBUG, NOISE
multiNotificationMode	true	Peut être changé en false si vous souhaitez n’afficher que 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é.

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

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 :

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é-construction (prebuild). Elle génère le code natif et configure les dépendances pour chaque plateforme.

npx expo prebuild