Guia de integração básica do SDK para React Native

Esta seção contém informações sobre como integrar o SDK Pushwoosh para React Native em seu aplicativo.

Pré-requisitos

Para integrar o SDK Pushwoosh para React Native em seu aplicativo, você precisará do seguinte:

Requisitos

• Uma conta Pushwoosh.
• Um projeto Pushwoosh configurado em sua conta.
• Para integração com iOS:
  • Uma plataforma iOS configurada para enviar notificações push. Recomendamos usar a configuração de Autenticação Baseada em Token como a abordagem mais simples.
  • Defina o Gateway como Sandbox para enviar pushes para um simulador.
• Para integração com Android:
  • Uma plataforma Android configurada
  • O project number (também conhecido como Sender ID), o arquivo google-services.json e o package name do seu projeto Firebase.
  • Um projeto Firebase conectado ao seu aplicativo Android. Siga o guia de configuração do Firebase, se necessário.
• O seu Pushwoosh Application Code e o Pushwoosh Device API Token do Painel de Controle da Pushwoosh para o seu aplicativo.

Passos de integração

1. Adicionar a dependência do SDK Pushwoosh para React Native

Adicione a dependência do SDK Pushwoosh para React Native ao seu projeto:

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

2. Inicialização do SDK para React Native

No componente raiz do seu arquivo index.js:

• Importe o pushwoosh-react-native-plugin.
• Inicialize o SDK da Pushwoosh.
• Chame register() em sua lógica de inicialização para se registrar para notificações push.

index.js

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

Onde:

• __YOUR_APP_ID__ é o código do aplicativo do Painel de Controle da Pushwoosh.
• __YOUR_FCM_SENDER_ID__ é o número do projeto Firebase do Console do Firebase.

3. Configuração nativa para iOS

3.1 Capabilities

Para habilitar as Notificações Push em seu projeto, você precisa adicionar certas capabilities.

Na seção Signing & Capabilities, adicione as seguintes capabilities:

• Push Notifications
• Background Modes. Após adicionar esta capability, marque a caixa para Remote notifications.

Se você pretende usar Notificações Sensíveis ao Tempo (iOS 15+), adicione também a capability Time Sensitive Notifications.

3.2 Info.plist

No seu Runner/Info.plist, defina a chave __PUSHWOOSH_DEVICE_API_TOKEN__ para o Pushwoosh Device API Token:

info.plist

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

3.3 Rastreamento de entrega de mensagens

Você deve adicionar um target de Notification Service Extension ao seu projeto. Isso é essencial para o rastreamento preciso da entrega e para recursos como Rich Media no iOS.

Siga os passos do guia nativo para adicionar o target da extensão e o código Pushwoosh necessário dentro dele.

3.4 Instalando dependências para o projeto React Native iOS

Para instalar as dependências do projeto React Native iOS, navegue até a pasta ios no terminal e execute:

pod install --repo-update

4. Configuração nativa para Android

4.1 Instalar dependências

Certifique-se de que as dependências e plugins necessários sejam adicionados aos seus scripts Gradle:

Adicione o plugin Google Services Gradle às dependências do seu build.gradle de nível de projeto:

android/build.gradle

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

Aplique o plugin no seu arquivo build.gradle de nível de aplicativo:

app/build.gradle

apply plugin: 'com.google.gms.google-services'

4.2 Adicionar arquivo de configuração do Firebase

Coloque o arquivo google-services.json na pasta android/app do diretório do seu projeto.

4.3 Adicionar metadados da Pushwoosh

No seu main/AndroidManifest.xml, adicione o Pushwoosh Device API Token dentro da tag <application>:

AndroidManifest.xml

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

Importante: Certifique-se de dar ao token acesso ao aplicativo correto no seu Painel de Controle da Pushwoosh. Saiba mais

5. Executar o Projeto

1. Compile e execute o projeto.
2. Vá para o Painel de Controle da Pushwoosh e envie uma notificação push.
3. Você deve ver a notificação no aplicativo.

Integração estendida

Neste ponto, você já integrou o SDK e pode enviar e receber notificações push. Agora, vamos explorar a funcionalidade principal

Listeners de eventos de notificação push

No SDK da Pushwoosh, existem dois listeners de eventos, projetados para lidar com notificações push:

• O evento pushReceived é acionado quando uma notificação push é recebida
• O evento pushOpened é acionado quando um usuário abre uma notificação

Você deve configurar esses listeners de eventos logo após a inicialização do SDK, na inicialização do aplicativo:

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

  }
}

Configuração de usuário

Ao focar no comportamento e nas preferências individuais do usuário, você pode entregar conteúdo personalizado, levando a um aumento da satisfação e lealdade do usuário

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

Tags

Tags são pares de chave-valor atribuídos a usuários ou dispositivos, permitindo a segmentação com base em atributos como preferências ou comportamento, possibilitando o envio de mensagens direcionadas.

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

Eventos são ações ou ocorrências específicas do usuário dentro do aplicativo que podem ser rastreadas para analisar o comportamento e acionar mensagens ou ações correspondentes

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

Solução de problemas

Se você encontrar algum problema durante o processo de integração, consulte a seção de suporte e comunidade.