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

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

Prerrequisitos

Para integrar el SDK de Expo 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 project number (también conocido como Sender ID), el archivo google-services.json y el package name 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 Pushwoosh Application Code y token de API de dispositivo de Pushwoosh desde el Panel de Control de Pushwoosh para su aplicación.

Pasos de integración

1. Instale el plugin

Instale el plugin de Expo de Pushwoosh usando la CLI de Expo

expo install pushwoosh-expo-plugin

Instale el SDK de React Native de Pushwoosh

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

2. Establezca las propiedades del plugin

Añada el plugin al principio del array de plugins con las propiedades necesarias:

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

Donde:

• mode se utiliza para configurar el derecho del entorno de APNs. Los valores “Development” o “production” están disponibles.
• PW_API_TOKEN, apiToken es su token de API de dispositivo de Pushwoosh.

3. Inicialice Pushwoosh

En el componente raíz de su aplicación:

• Importe el plugin pushwoosh-react-native-plugin.
• Inicialice el SDK de Pushwoosh.
• Llame a register() en su lógica de inicialización para registrarse para las notificaciones 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();

Donde:

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

4. Configuración nativa de Android

Añada el archivo de configuración de Firebase:

1. Copie su archivo google-services.json al directorio raíz del proyecto.
2. Establezca la propiedad googleServicesFile en la ruta de su google-services.json y especifique la propiedad 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. Configuración nativa de iOS

Establezca la propiedad bundleIdentifier en el objeto 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. Precompile la aplicación

Genere código nativo y configure las dependencias para cada plataforma ejecutando prebuild:

npx expo prebuild

7. Ejecute el proyecto

1. Compile y ejecute el proyecto:

Android

npx expo run:android

iOS

npx expo run:ios

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

Escuchas de eventos de notificación push

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

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

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

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

  }
}

Configuración de usuario

Al centrarse en el comportamiento y las preferencias individuales de los usuarios, puede ofrecer contenido personalizado, lo que conduce a una mayor satisfacción y lealtad del usuario

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

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

    // Establecer ID de usuario
    Pushwoosh.setUserId(user.getId());

    // Establecer correo electrónico del usuario
    Pushwoosh.setEmails(user.getEmailList());

    // Establecer información adicional del usuario como etiquetas para 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, lo que permite la mensajería dirigida.

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

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

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

Eventos

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 Pushwoosh from 'pushwoosh-react-native-plugin';

class Registration {

  // Rastrear evento de inicio de sesión
  afterUserLogin(user: User): void {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

  // Rastrear evento de compra
  afterUserPurchase(product: Product): void {
    Pushwoosh.postEvent("purchase", {
      "product_id": product.getId(),
      "product_name": product.getName(),
      "price": product.getPrice(),
      "quantity": product.getQuantity()
    });
  }
}

Seguimiento de entrega de mensajes para iOS

Debe agregar un destino 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 agregar el destino de la extensión y el código de Pushwoosh necesario dentro de él.

Propiedades adicionales del plugin

Propiedad	Predeterminado	Descripción
Propiedades de iOS
Pushwoosh_LOG_LEVEL	INFO	Nivel de registro para iOS. Valores posibles: NONE, ERROR, WARN, INFO, DEBUG, NOISE
Propiedades de Android
logLevel	INFO	Nivel de registro para Android. Uno de: NONE, ERROR, WARN, INFO, DEBUG, NOISE
multiNotificationMode	true	Se puede cambiar a false en caso de que desee mostrar solo la última notificación al usuario
icon	-	Ruta a un icono de notificación personalizado para Android

Solución de problemas

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

Error de registro de FCM: Failed to retrieve token. Is firebase configured correctly?

Asegúrese de que su propiedad googleServicesFile de Firebase esté configurada en el archivo de configuración de Expo y que el archivo google-services.json se haya agregado al directorio raíz de su proyecto:

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

Puede encontrar este error al intentar ejecutar la aplicación en un dispositivo. Para resolver el problema, asegúrese de haber completado el paso de precompilación. Este genera el código nativo y configura las dependencias para cada plataforma.

npx expo prebuild