Saltar al contenido

Guía de integración básica del SDK de Flutter

Esta sección contiene información sobre cómo integrar el SDK de Flutter de Pushwoosh en su aplicación.

Requisitos

Anchor link to

Para integrar el SDK de Flutter de Pushwoosh en su aplicación, necesitará lo siguiente:

Pasos de integración

Anchor link to

1. Añadir la dependencia del SDK de Flutter de Pushwoosh

Anchor link to

Añada el paquete pushwoosh_flutter a su archivo pubspec.yaml:

pubspec.yaml
dependencies:
flutter:
sdk: flutter
# Use la última versión de https://pub.dev/packages/pushwoosh_flutter
pushwoosh_flutter: ^[LATEST_VERSION]

Consulte la última versión en pub.dev.

Luego, ejecute el siguiente comando en el directorio raíz de su proyecto para instalar la dependencia:

Terminal window
flutter pub get

Verifique que el paquete esté instalado correctamente:

Terminal window
flutter pub deps | grep pushwoosh_flutter
# Ejemplo de salida:
# ❯ flutter pub deps | grep pushwoosh_flutter
# └── pushwoosh_flutter 2.3.11

2. Inicialización del SDK de Flutter

Anchor link to

En el componente raíz de su archivo main.dart:

  • Importe el paquete pushwoosh_flutter.
  • Inicialice el SDK de Pushwoosh.
  • Llame a registerForPushNotifications() en su lógica de inicialización para registrarse para recibir notificaciones push.
main.dart
import 'package:pushwoosh_flutter/pushwoosh_flutter.dart';
void main() async {
runApp(const MyApp());
Pushwoosh.initialize({
"app_id": "__YOUR_APP_ID__"
});
Pushwoosh.getInstance.registerForPushNotifications();
}

Donde:

  • __YOUR_APP_ID__ es el código de la aplicación del Panel de Control de Pushwoosh.

3. Configuración nativa de iOS

Anchor link to

3.1 Capacidades

Anchor link to

Para habilitar las Notificaciones Push en su proyecto, necesita añadir ciertas capacidades.

En la sección Signing & Capabilities, añada las siguientes capacidades:

  • Push Notifications
  • Background Modes. Después de añadir esta capacidad, marque la casilla Remote notifications.

Si tiene la intención de usar Notificaciones Urgentes (iOS 15+), añada también la capacidad Time Sensitive Notifications.

3.2 Info.plist

Anchor link to

En su Runner/Info.plist establezca la clave __PUSHWOOSH_DEVICE_API_TOKEN__ con el Token de API de Dispositivo de Pushwoosh:

info.plist
<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>

3.3 Seguimiento de la entrega de mensajes

Anchor link to

Debe añadir un target de Extensión de Servicio de Notificaciones a su proyecto. Esto es esencial para un seguimiento preciso de la entrega y para funciones como Rich Media en iOS.

Siga los pasos de la guía nativa para añadir el target de la extensión y el código de Pushwoosh necesario dentro de él.

Para asegurarse de que la Extensión de Servicio de Notificaciones esté correctamente integrada en su proyecto de Flutter, necesita usar la siguiente configuración de Podfile:

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

3.4 Instalación de dependencias para el proyecto de Flutter en iOS

Anchor link to

Para instalar las dependencias para el proyecto de Flutter en iOS, ejecute el siguiente comando:

Terminal window
flutter run

o navegue a la carpeta ios en la terminal y ejecute:

Terminal window
pod install --repo-update

4. Configuración nativa de Android

Anchor link to

4.1 Instalar dependencias

Anchor link to

Asegúrese de que las dependencias y plugins requeridos se añadan a sus scripts de Gradle:

Añada el plugin de Gradle de Google Services a las dependencias de su build.gradle a nivel de proyecto:

android/build.gradle
buildscript {
dependencies {
classpath 'com.google.gms:google-services:4.3.15'
}
}

Aplique el plugin en su archivo build.gradle a nivel de aplicación:

app/build.gradle
apply plugin: 'com.google.gms.google-services'

4.2 Añadir archivo de configuración de Firebase

Anchor link to

Coloque el archivo google-services.json en la carpeta android/app en el directorio de su proyecto.

4.3 Añadir metadatos de Pushwoosh

Anchor link to

En su main/AndroidManifest.xml añada el Token de API de Dispositivo de Pushwoosh dentro de la etiqueta <application>:

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

Importante: Asegúrese de dar al token acceso a la aplicación correcta en su Panel de Control de Pushwoosh. Aprenda más

5. Ejecutar el proyecto

Anchor link to
  1. Compile y ejecute el proyecto.
  2. Vaya al Panel de Control de Pushwoosh y envíe una notificación push.
  3. Debería ver la notificación en la aplicación.

Integración extendida

Anchor link to

En este punto, ya ha integrado el SDK y puede enviar y recibir notificaciones push. Ahora, exploremos la funcionalidad principal.

Escuchadores de eventos de notificación push

Anchor link to

En el SDK de Pushwoosh hay dos escuchadores de eventos, diseñados para manejar notificaciones push:

  • El evento onPushReceived se dispara cuando se recibe una notificación push
  • El evento onPushAccepted se dispara cuando un usuario abre una notificación

Debe configurar estos escuchadores de eventos justo después de la inicialización del SDK al iniciar la aplicación:

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

Configuración de usuario

Anchor link to

Al centrarse en el comportamiento y las preferencias individuales del usuario, puede entregar contenido personalizado, lo que lleva a una mayor satisfacción y lealtad del usuario.

import 'package:pushwoosh_flutter/pushwoosh_flutter.dart';
class Registration {
void afterUserLogin(User user) {
// Establecer ID de usuario
Pushwoosh().setUserId(user.getId());
// Establecer email de usuario
Pushwoosh().setEmail(user.getEmail());
// Registrar número de SMS
// Los números de SMS y WhatsApp deben estar en formato E.164 (p. ej., "+1234567890") y ser válidos
Pushwoosh().registerSmsNumber(user.getSmsNumber());
// Registrar número de WhatsApp
Pushwoosh().registerWhatsappNumber(user.getWhatsappNumber());
// Establecer información adicional del usuario como etiquetas para Pushwoosh
Pushwoosh().setTags({
"age": user.getAge(),
"name": user.getName(),
"last_login": user.getLastLoginDate()
});
}
}

Las etiquetas son pares clave-valor asignados a usuarios o dispositivos, que permiten la segmentación basada en atributos como preferencias o comportamiento, habilitando la mensajería dirigida.

import 'package:pushwoosh_flutter/pushwoosh_flutter.dart';
class UpdateUser {
void afterUserUpdateProfile(User user) {
// Establecer lista de categorías favoritas
Pushwoosh().setTags({
"favorite_categories": user.getFavoriteCategoriesList()
});
// Establecer información de pago
Pushwoosh().setTags({
"is_subscribed": user.isSubscribed(),
"payment_status": user.getPaymentStatus(),
"billing_address": user.getBillingAddress()
});
}
}

Los eventos son acciones u ocurrencias específicas del usuario dentro de la aplicación que se pueden rastrear para analizar el comportamiento y activar los mensajes o acciones correspondientes.

import 'package:pushwoosh_flutter/pushwoosh_flutter.dart';
class Registration {
// Rastrear evento de inicio de sesión
void afterUserLogin(User user) {
Pushwoosh().postEvent("login", {
"name": user.getName(),
"last_login": user.getLastLoginDate()
});
}
void afterUserPurchase(Product product) {
// Rastrear evento de compra
Pushwoosh().postEvent("purchase", {
"product_id": product.getId(),
"product_name": product.getName(),
"price": product.getPrice(),
"quantity": product.getQuantity()
});
}
}

Usando ProGuard

Anchor link to

Por lo tanto, puede obtener esta excepción:

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

Hay dos soluciones en este caso:

  1. Use el comando flutter build apk --no-shrink para compilar su código sin ofuscación.
  2. O puede habilitar ProGuard manualmente y añadir las reglas necesarias.

Para habilitar ProGuard en su proyecto, añada las siguientes cadenas a su archivo build.gradle:

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

Luego, añada las siguientes reglas a android/app/proguard-rules.pro

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

Solución de problemas

Anchor link to

Si encuentra algún problema durante el proceso de integración, consulte la sección de soporte y comunidad.