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

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

Requisitos previos

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

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 la puerta de enlace (Gateway) en Sandbox para enviar notificaciones push 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 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 Pushwoosh para React Native

Añada la dependencia del SDK de Pushwoosh para React Native a su proyecto:

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

2. Inicialización del SDK de React Native

En el componente raíz de su archivo index.js:

Importe el pushwoosh-react-native-plugin.
Inicialice el SDK de Pushwoosh.
Llame a register() en su lógica de inicialización para registrarse para recibir notificaciones push.

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

AppRegistry.registerComponent(appName, () => App);

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 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 (Capabilities)

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 para Remote notifications.

Si tiene la intención de usar Notificaciones Sensibles al Tiempo (Time Sensitive Notifications) (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:

<key>Pushwoosh_API_TOKEN</key>
<string>__PUSHWOOSH_DEVICE_API_TOKEN__</string>

3.3 Seguimiento de la entrega de mensajes

Debe añadir un objetivo de Extensión de Servicio de Notificación (Notification Service Extension) 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 objetivo de la extensión y el código de Pushwoosh necesario dentro de él.

3.4 Instalación de dependencias para el proyecto de React Native en iOS

Para instalar las dependencias para el proyecto de React Native en iOS, 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 los plugins necesarios 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:

buildscript {
  dependencies {
    classpath 'com.google.gms:google-services:4.3.15'
  }
}

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

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 en el 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>:

<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

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

Integración extendida

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

Escuchadores de eventos de notificaciones push

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

El evento pushReceived se activa cuando se recibe una notificación push.
El evento pushOpened se activa cuando un usuario abre una notificación.

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

import {DeviceEventEmitter} from 'react-native'
import Pushwoosh from 'pushwoosh-react-native-plugin';

class PushwooshNotificationHandler {
  setupPushListeners() {

    DeviceEventEmitter.addListener('pushReceived', (e) => {
      console.warn("Push received: " + JSON.stringify(e));
    });

    DeviceEventEmitter.addListener('pushOpened', (e) => {
      console.warn("Push accepted: " + 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) {

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

    // Set user email
    Pushwoosh.setEmails(user.getEmailList());

    // Set user SMS number
    Pushwoosh.registerSMSNumber(user.getPhoneNumber());

    // Set user 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 (Tags)

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

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

class UpdateUser {
  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 activar los mensajes o acciones correspondientes.

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

class Registration {

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

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

Solución de problemas

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