Passer au contenu

Guide d'intégration de base du SDK Flutter

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

Prérequis

Anchor link to

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

Étapes d’intégration

Anchor link to

1. Ajouter la dépendance du SDK Flutter de Pushwoosh

Anchor link to

Ajoutez le package pushwoosh_flutter à votre fichier pubspec.yaml :

pubspec.yaml
dependencies:
flutter:
sdk: flutter
# Utilisez la dernière version depuis https://pub.dev/packages/pushwoosh_flutter
pushwoosh_flutter: ^[LATEST_VERSION]

Vérifiez la dernière version sur pub.dev.

Ensuite, exécutez la commande suivante à la racine de votre projet pour installer la dépendance :

Terminal window
flutter pub get

Vérifiez que le package est correctement installé :

Terminal window
flutter pub deps | grep pushwoosh_flutter
# Example output:
# ❯ flutter pub deps | grep pushwoosh_flutter
# └── pushwoosh_flutter 2.3.11

2. Initialisation du SDK Flutter

Anchor link to

Dans le composant racine de votre fichier main.dart :

  • Importez le package pushwoosh_flutter.
  • Initialisez le SDK Pushwoosh.
  • Appelez registerForPushNotifications() dans votre logique d’initialisation pour vous enregistrer aux notifications push.
main.dart
import 'package:pushwoosh_flutter/pushwoosh_flutter.dart';
void main() async {
runApp(const MyApp());
Pushwoosh.initialize({
"app_id": "__YOUR_APP_ID__",
"sender_id": "__YOUR_FCM_SENDER_ID__"
});
Pushwoosh.getInstance.registerForPushNotifications();
}

Où :

  • __YOUR_APP_ID__ est le code de l’application depuis le Panneau de contrôle Pushwoosh.
  • __YOUR_FCM_SENDER_ID__ est le numéro de projet Firebase depuis la console Firebase.

3. Configuration native pour iOS

Anchor link to

3.1 Capacités

Anchor link to

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 prévoyez d’utiliser les notifications urgentes (Time Sensitive Notifications) (iOS 15+), ajoutez également la capacité Time Sensitive Notifications.

3.2 Info.plist

Anchor link to

Dans votre Runner/Info.plist, définissez la clé __PUSHWOOSH_DEVICE_API_TOKEN__ sur le jeton 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

Anchor link to

Vous devez ajouter une cible d’extension de service de notification (Notification Service Extension) à votre projet. C’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.

Pour vous assurer que l’extension de service de notification est correctement intégrée à votre projet Flutter, vous devez utiliser la configuration Podfile suivante :

Podfile
target 'NotificationServiceExtension' do
use_frameworks!
use_modular_headers!
pod 'PushwooshXCFramework'
inherit! :search_paths
end

3.4 Installation des dépendances pour le projet Flutter iOS

Anchor link to

Pour installer les dépendances pour le projet Flutter iOS, exécutez la commande suivante :

Terminal window
flutter run

ou naviguez vers le dossier ios dans le terminal et exécutez :

Terminal window
pod install --repo-update

4. Configuration native pour Android

Anchor link to

4.1 Installer les dépendances

Anchor link to

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

Ajoutez le plugin Gradle des services Google à vos dépendances 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

Anchor link to

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

4.3 Ajouter les métadonnées Pushwoosh

Anchor link to

Dans votre main/AndroidManifest.xml, ajoutez le jeton 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 jeton l’accès à la bonne application dans votre Panneau de contrôle Pushwoosh. En savoir plus

5. Lancer le projet

Anchor link to
  1. Compilez et lancez le projet.
  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

Anchor link to

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

Écouteurs d’événements de notification push

Anchor link to

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 'package:pushwoosh_flutter/pushwoosh_flutter.dart';
class PushwooshNotificationHandler {
void setupPushListeners(Pushwoosh pushwoosh) {
pushwoosh.onPushReceived.listen((event) {
print("Push received: ${event.pushwooshMessage.payload}");
});
pushwoosh.onPushAccepted.listen((event) {
print("Push accepted: ${event.pushwooshMessage.payload}");
});
}
}

Configuration de l’utilisateur

Anchor link to

En vous concentrant sur le comportement et les préférences individuels des utilisateurs, vous pouvez fournir un contenu personnalisé, ce qui augmente la satisfaction et la fidélité des utilisateurs.

import 'package:pushwoosh_flutter/pushwoosh_flutter.dart';
class Registration {
void afterUserLogin(User user) {
// Définir l'ID utilisateur
Pushwoosh().setUserId(user.getId());
// Définir l'e-mail de l'utilisateur
Pushwoosh().setEmail(user.getEmail());
// Enregistrer le numéro SMS
// Les numéros SMS et WhatsApp doivent être au format E.164 (ex: "+1234567890") et être valides
Pushwoosh().registerSmsNumber(user.getSmsNumber());
// Enregistrer le numéro WhatsApp
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()
});
}
}

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

import 'package:pushwoosh_flutter/pushwoosh_flutter.dart';
class UpdateUser {
void 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

Anchor link to

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

import 'package:pushwoosh_flutter/pushwoosh_flutter.dart';
class Registration {
// Suivre l'événement de connexion
void afterUserLogin(User user) {
Pushwoosh().postEvent("login", {
"name": user.getName(),
"last_login": user.getLastLoginDate()
});
}
void afterUserPurchase(Product product) {
// Suivre l'événement d'achat
Pushwoosh().postEvent("purchase", {
"product_id": product.getId(),
"product_name": product.getName(),
"price": product.getPrice(),
"quantity": product.getQuantity()
});
}
}

Utilisation de ProGuard

Anchor link to

Par conséquent, vous pourriez obtenir cette exception :

java.lang.IllegalStateException: Could not find class for name: com.pushwoosh.plugin.PushwooshNotificationServiceExtension

Il y a deux solutions dans ce cas :

  1. Utilisez la commande flutter build apk --no-shrink pour compiler votre code sans offuscation.
  2. Ou vous pouvez activer manuellement ProGuard et ajouter les règles nécessaires.

Pour activer ProGuard pour votre projet, ajoutez les chaînes suivantes à votre fichier build.gradle :

build.gradle
buildTypes {
release {
minifyEnabled true
useProguard true
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
signingConfig signingConfigs.debug
}
}

Ensuite, ajoutez les règles suivantes à android/app/proguard-rules.pro

proguard-rules.pro
#Pushwoosh Flutter
-keep class com.pushwoosh.plugin.PushwooshPlugin { *; }
-keep class com.pushwoosh.plugin.PushwooshNotificationServiceExtension { *; }

Dépannage

Anchor link to

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