Guia de integração básica do SDK Expo

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

Pré-requisitos

Para integrar o SDK Expo da Pushwoosh 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.
• Seu Pushwoosh Application Code e Token da API de Dispositivo Pushwoosh do Painel de Controle Pushwoosh para seu aplicativo.

Passos de integração

1. Instale o plugin

Instale o plugin Pushwoosh Expo usando a CLI do Expo

expo install pushwoosh-expo-plugin

Instale o SDK Pushwoosh React Native

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

2. Defina as propriedades do plugin

Adicione o plugin no início do array de plugins com as propriedades necessárias:

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

Onde:

• mode é usado para configurar o entitlement do ambiente APNs. Os valores “Development” ou “production” estão disponíveis.
• PW_API_TOKEN, apiToken é o seu Token da API de Dispositivo Pushwoosh.

3. Inicialize o Pushwoosh

No componente raiz do seu aplicativo:

• Importe o plugin pushwoosh-react-native-plugin.
• Inicialize o SDK Pushwoosh.
• Chame register() em sua lógica de inicialização para se registrar para notificações 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();

Onde:

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

4. Configuração Nativa do Android

Adicione o arquivo de configuração do Firebase:

1. Copie seu arquivo google-services.json para o diretório raiz do projeto.
2. Defina a propriedade googleServicesFile para o caminho do seu google-services.json e especifique a propriedade 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. Configuração Nativa do iOS

Defina a propriedade bundleIdentifier para o 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. Pré-compile o aplicativo

Gere o código nativo e configure as dependências para cada plataforma executando o prebuild:

npx expo prebuild

7. Execute o projeto

1. Compile e execute o projeto:

Android

npx expo run:android

iOS

npx expo run:ios

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

Integração estendida

Nesta fase, 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 Pushwoosh, existem dois listeners de eventos, projetados para lidar com notificações push:

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

Você deve configurar esses listeners de eventos logo após a inicialização do SDK no início do aplicativo:

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

  }
}

Configuração do 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): void {

    // Define o ID do usuário
    Pushwoosh.setUserId(user.getId());

    // Define o e-mail do usuário
    Pushwoosh.setEmails(user.getEmailList());

    // Define informações adicionais do usuário como tags para o 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): void {

    // Define a lista de categorias favoritas
    Pushwoosh.setTags({
      "favorite_categories": user.getFavoriteCategoriesList()
    });

    // Define as informações de pagamento
    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 {

  // Rastreia o evento de login
  afterUserLogin(user: User): void {
    Pushwoosh.postEvent("login", {
      "name": user.getName(),
      "last_login": user.getLastLoginDate()
    });
  }

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

Rastreamento de entrega de mensagens para iOS

Você deve adicionar um alvo de Extensão de Serviço de Notificação 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 alvo da extensão e o código Pushwoosh necessário dentro dele.

Propriedades adicionais do plugin

Propriedade	Padrão	Descrição
Propriedades do iOS
Pushwoosh_LOG_LEVEL	INFO	Nível de log para iOS. Valores possíveis: NONE, ERROR, WARN, INFO, DEBUG, NOISE
Propriedades do Android
logLevel	INFO	Nível de log para Android. Um de: NONE, ERROR, WARN, INFO, DEBUG, NOISE
multiNotificationMode	true	Pode ser alterado para false caso você queira exibir apenas a última notificação para o usuário
icon	-	Caminho para um ícone de notificação personalizado para Android

Solução de problemas

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

Erro de registro do FCM: Falha ao recuperar o token. O Firebase está configurado corretamente?

Certifique-se de que sua propriedade googleServicesFile do Firebase esteja configurada no arquivo de configuração do Expo e que o arquivo google-services.json seja adicionado ao diretório raiz do seu projeto:

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

Você pode encontrar o erro ao tentar executar o aplicativo em um dispositivo.
Para resolver o problema, certifique-se de ter concluído a etapa de prebuild. Ela gera o código nativo e configura as dependências para cada plataforma.

npx expo prebuild