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 previos

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

Requisitos

• Una cuenta de Pushwoosh.
• Un proyecto de Pushwoosh configurado en su cuenta.
• Para la integración con iOS:
  • Una plataforma iOS configurada para enviar notificaciones push. Recomendamos usar la configuración de autenticación basada en token como el enfoque más simple.
  • Establezca el Gateway en Sandbox para enviar pushes a un simulador.
• Para la integración con Android:
  • Una plataforma Android configurada
  • El número de proyecto (también conocido como Sender ID), el archivo google-services.json y el nombre del paquete de su proyecto de Firebase.
  • Un proyecto de Firebase conectado a su aplicación de Android. Siga la guía de configuración de Firebase si es necesario.
• Su Código de Aplicación de Pushwoosh y el Token de API de Dispositivo de Pushwoosh desde el Panel de Control de Pushwoosh para su aplicación.

Pasos de integración

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

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

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  # Use the latest version from 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:

flutter pub get

Verifique que el paquete esté instalado correctamente:

flutter pub deps | grep pushwoosh_flutter

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

2. Inicialización del SDK de Flutter

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__",
    "sender_id": "__YOUR_FCM_SENDER_ID__"
  });
  Pushwoosh.getInstance.registerForPushNotifications();
}

Donde:

• __YOUR_APP_ID__ es el código de la aplicación desde el Panel de Control de Pushwoosh.
• __YOUR_FCM_SENDER_ID__ es el número de proyecto de Firebase desde la Consola de Firebase.

3. Configuración nativa de iOS

3.1 Capacidades

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 Sensibles al Tiempo (iOS 15+), añada también la capacidad Time Sensitive Notifications.

3.2 Info.plist

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

Debe añadir un target de Extensión de Servicio de Notificación 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 ella.

Para asegurarse de que la Extensión de Servicio de Notificación 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

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

flutter run

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

pod install --repo-update

4. Configuración nativa de Android

4.1 Instalar dependencias

Asegúrese de que las dependencias y plugins necesarios se añaden 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

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

4.3 Añadir metadatos de Pushwoosh

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

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

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

Listeners de eventos de notificación push

En el SDK de Pushwoosh hay dos listeners 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 listeners de eventos justo después de la inicialización del SDK al inicio de 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

Al centrarse en el comportamiento y las preferencias individuales de los usuarios, 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) {

    // Set user ID
    Pushwoosh().setUserId(user.getId());

    // Set user email
    Pushwoosh().setEmail(user.getEmail());

    // Register SMS number
    // The SMS and WhatsApp numbers must be in E.164 format (e.g., "+1234567890") and be valid
    Pushwoosh().registerSmsNumber(user.getSmsNumber());

    // Register WhatsApp number
    Pushwoosh().registerWhatsappNumber(user.getWhatsappNumber());

    // Setting additional user information as tags for Pushwoosh
    Pushwoosh().setTags({
      "age": user.getAge(),
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }
}

Etiquetas

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) {

    // Set list of favorite categories
    Pushwoosh().setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Set payment information
    Pushwoosh().setTags({
      "is_subscribed": user.isSubscribed(),
      "payment_status": user.getPaymentStatus(),
      "billing_address": user.getBillingAddress()
    });
  }
}

Eventos

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

import 'package:pushwoosh_flutter/pushwoosh_flutter.dart';

class Registration {

  // Track login event
  void afterUserLogin(User user) {
    Pushwoosh().postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  void afterUserPurchase(Product product) {

  // Track purchase event
  Pushwoosh().postEvent("purchase", {
    "product_id": product.getId(),
    "product_name": product.getName(),
    "price": product.getPrice(),
    "quantity": product.getQuantity()
  });
 }
}

Uso de ProGuard

Nota

Tenga en cuenta que el comando flutter build apk ofusca su código por defecto.

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 manualmente ProGuard 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

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