React Native SDK v4.0.0-beta

📘

A versão mais recente da SDK React Native é a v4.0.0-beta.1, que está disponível atualmente.

Instalação

Ambiente de desenvolvimento

Antes de começar a utilizar nossa SDK, instale as dependências externas utilizadas:

JSON

"dependencies": {
  "@react-native-async-storage/async-storage": "^1.18.1",
  "@react-native-community/push-notification-ios": "^1.11.0",
  "@react-native-firebase/app": "^17.4.2",
  "@react-native-firebase/messaging": "^17.4.2",
  "react-native-device-info": "^10.6.0",
  "react-native-localize": "^2.2.6",
  "react-native-permissions": "^3.8.0",
  "react-native-push-notification": "^8.1.1",
}

📘

Recomendamos instalar nas versões conforme descritas nesta documentação.

Importando o FCM Token (API Key)

Para aproveitar nossos SDKs, será necessário importar o FCM Token (API Key) do seu projeto Firebase em nossa plataforma. Siga o passo a passo neste link para executar essa ação.

Instalando o package utilizando o NPM

Para adicionar o SDK Flutter da Inngage ao seu projeto, execute o seguinte comando utilizando o NPM:

Shell

npm i @inngageregistry/inngage-react

Este comando adiciona a seguinte linha no arquivo package.json de seu pacote:

JSON

"dependencies": {
	"@inngageregistry/inngage-react": "^4.0.0-beta.1",
}

📘

Se a instalação via npm não funcionar corretamente, você pode instalar a dependência utilizando o yarn.

Para instalar a SDK com o yarn, siga os passos abaixo:

1. No arquivo package.json, adicione a seguinte dependência em dependencies: "@inngageregistry/inngage-react": "^4.0.0-beta.1".
2. No terminal, dentro da pasta do seu projeto, execute o comando: yarn install. Isso irá instalar a SDK corretamente.

Inclusão da dependência

Após configurar o SDK React Native da Inngage, é simples importá-lo em seu projeto. Para isso, basta adicionar o pacote ao seu código:

TypeScript

import Inngage from '@inngageregistry/inngage-react'

🚧

Recomendamos que você utilize a versão estável mais recente do React Native, definida no arquivo package.json. A Inngage SDK React Native 3.0.4 foi verificada pela última vez na versão: React Native 0.71.6 • canal estável.

Versões suportadas:

"react": "18.2.0", "react-native": "0.71.6"e "typescript": "^5.0.4"

---

Implementando a SDK

Notificações push

As notificações serão enviadas do servidor da Inngage para um ou mais dispositivos móveis, mesmo quando o aplicativo estiver em primeiro plano, segundo plano ou até mesmo fechado. Essas mensagens têm o objetivo de alertar o usuário sobre informações importantes, atualizações ou qualquer outro dado relevante relacionado ao seu aplicativo.

As notificações push aparecem na tela de bloqueio ou na barra de notificações do dispositivo. Quando o usuário toca na notificação, o aplicativo é aberto e pode direcioná-lo para uma página específica ou exibir mais detalhes sobre o conteúdo da notificação.

Inngage.Subscribe()

Esta função desempenha a função de registrar ou inscrever o usuário na plataforma Inngage, sendo aplicável em diversas ocasiões, como ao abrir o aplicativo, durante o processo de login, ou ao se cadastrar, entre outras situações oportunas. Geralmente, é chamado no arquivo index.ts, mas, dependendo da arquitetura do seu aplicativo, pode ser chamado dentro de uma classe ou função.

TypeScript

let subscription = {
  appToken: "Trocar pelo App Token do aplicativo",
  friendlyIdentifier: "Trocar pelo objeto Identificador do usuário",
  customFields: {}, // Campo opcional.
  phoneNumer: "Trocar pelo telefone do usuário", // Campo opcional. Ex: "5511999991234"
  email:'Trocar pelo email do usuário', // Campo opcional. Ex: "[email protected]"
}

async function InngageSubscribeSDK() {
  await Inngage.subscribe(subscription);
}

InngageSubscribeSDK();

O trecho de código menciona alguns parâmetros e funcionalidades do Inngage SDK no contexto do React Native. Aqui está uma explicação das principais informações:

• appToken: É o token do aplicativo na plataforma Inngage, essencial para a comunicação com os serviços da Inngage.
• friendlyIdentifier: É usado para identificar o usuário dentro do sistema. Esse parâmetro deve ser preenchido para que o usuário possa ser corretamente associado e receber as notificações push de forma personalizada.
• customFields: Este parâmetro permite ao desenvolvedor adicionar campos personalizados, como: nome, email, gênero, etc. Eles devem antes ser configurados na plataforma da Inngage.
• phoneNumber: Você pode registrar o número de telefone/celular do usuário. O parâmetro é opcional.
• email: Você pode registrar o email do usuário. O parâmetro é opcional.

📘

Para assegurar uma rastreabilidade completa das atividades do usuário, Recomendamos que esse método seja chamado a cada nova sessão do usuário. Essa prática é particularmente relevante, pois utilizamos esse método para registrar as sessões do usuário na plataforma Inngage.

Inngage.notificationListener()

Essa função é responsável em realizar as configurações de push no aplicativo e, principalmente, solicitar o acesso às notificações do usuário.

TypeScript

Inngage.notificationListener((notification: any) => {
  console.log(notification) // Callback dos dados do firebase 
}

Permite que uma função seja passada para ser chamada quando o aplicativo estiver em segundo plano e receber uma notificação push contendo os dados da notificação pelo remoteMessage.

Ao executar essa função, o aplicativo informa ao sistema operacional que deseja receber notificações push e é autorizado a fazê-lo, desde que o usuário conceda permissão para receber tais notificações.

Para configurar um manipulador de segundo plano e fechado, é preciso chamar o método messagingHeadlessTask() contendo o setBackgroundMessageHandler no index.js. Adicione o seguinte código:

TypeScript

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

import { messagingHeadlessTask } from '@inngageregistry/inngage-react/src/firebase/notifications_listener'; // Importe a função da Inngage.

messagingHeadlessTask(); // Adicione este método.

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

📘

Caso queiram verificar os logs da Inngage enquanto estão desenvolvendo, basta implementar no seu código o método Inngage.setDebugMode(true).

Personalização (para sua identidade)

Atualizando e/ou adicionando novos Campos Personalizados

Com o método addUserData(), você poderá atualizar o valor do campo personalizado configurado no Inngage.Subscribe(). Além disso, é possível adicionar um novo campo, inserindo-o no método. Dessa maneira, mesmo que você chame o Subscribe novamente sem ter configurado o novo campo nele, ele será carregado automaticamente.

TypeScript

await Inngage.addUserData({
  "name": "Inngage",
  "age": 20,
  "login": "ativo"
})

É importante ressaltar que todos os campos personalizáveis devem ser configurados na plataforma, sendo o nome do campo na plataforma exatamente igual ao que for configurado no código.

🚧

Se o campo tiver um valor definido no método Subscribe, ao passar por ele novamente, o valor do campo será definido conforme estiver nesse método, e não como foi configurado no addUserData.

Envio de eventos

A SDK permite que o desenvolvedor que está integrando a SDK envie eventos customizados. É importante configurá-los na plataforma Inngage para garantir uma boa performance e integração.

TypeScript

let event = {
    appToken: "36174c4746e84f49fa822076b0b859d1", // Trocar pelo App Token do aplicativo
    identifier: "@inngage-react", // Trocar pelo objeto Identificador do usuário. Opcional: "identifier" ou "registration"
    registration: "daUxLcpRQX-L8ZoVlacU64:APA91bGMFAn5WllgUP36Y7", // Trocar pelo fcm token. Opcional: "registration" ou "identifier"
    eventName: "dados_usuario",
    conversionEvent: true, // Campo opcional
    conversionValue: 1090.00, // Valor monetário da conversão. Campo opcional
    conversionNotId: "2314klbkf41bsgav4hg12ab24v1h41", // ID da mensagem. Campo opcional
    eventValues: {
      "produto": 'Bola de tenis',
    	"valor": '40' 
    } // Exemplo de valores. (Opcional)
}

async function InngageSendEvent() {
  await Inngage.sendEvent(event)
}

InngageSendEvent();

Existem três valores obrigatórios para garantir o correto funcionamento:

• eventName: Define o nome do evento, que será usado para identificá-lo rapidamente na plataforma.

Você também pode adicionar valores avançados para esse evento usando o parâmetro event_values, que é um array contendo chaves e valores com dados que serão anexados ao evento.

A API de eventos também pode receber um evento de conversão, para isso, existem os seguintes campos:

• conversion_event: Defina como True para indicar que é um evento de conversão.
• conversion_value: Esse campo permite inserir o valor monetário da conversão. O valor padrão é FLOAT 11000.00.
• conversion_notid: Opção para enviar o ID Único da Notificação da Inngage (NOTID), que foi recebido pelo app no momento do Push. Isso possibilita atribuir uma conversão a um determinado Push."

In App Messages

A SDK React Native da Inngage permite a exibição de Mensagens In App para os usuários. Essas mensagens podem ser enviadas tanto pela plataforma quanto pela API e são automaticamente apresentadas com base nas configurações recebidas no payload do Firebase.

Importando o Componente InApp

Para apresentar as mensagens In App, importe o componente InApp em seu projeto:

TypeScript

import { InApp } from '@inngageregistry/inngage-react';

Configuração da In App no projeto

Para garantir que as mensagens In App funcionem corretamente em todos os cenários (aplicativo aberto, em segundo plano e fechado), siga estas etapas:

1. Adicionar um Estado para Controlar a Exibição da In App

Crie um estado para controlar quando a mensagem In App deve ser exibida. O useInAppHandler detectará a chegada de mensagens In App e exibirá no aplicativo ao abri-lo do cenário em segundo plano ou fechado:

TypeScript

import { useInAppHandler } from '@inngageregistry/inngage-react/src/firebase/notifications_listener'

const { showInApp, setShowInApp } = useInAppHandler();

2. Ouvir as notificações

Utilize o notificationListener da Inngage para ouvir a chegada das mensagens In App no cenário aberto e atualizar o estado de exibição:

TypeScript

Inngage.notificationListener((notification: any) => {
  if(notification?.additional_data)
    setShowInApp(true);
});

3. Adicionar o Componente InApp no Retorno do Componente Principal

Adicione a tag <InApp /> juntamente com a função onDismiss para que a mensagem possa ser exibida e assim que fechada, possa ser aberta novamente quando enviada pela plataforma:

TypeScript

return (
  <View>
  	{showInApp && <InApp onDismiss={() => setShowInApp(false)} />}
  	// ...
  </View>
)

---

👍

Você está pronto para começar!

Seguindo os passos acima da documentação você estará pronto para utilizar todas as ferramentas necessárias para as funcionalidades da SDK. 👏