React Native SDK v4.0.0-beta

ūüďė

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

Instalação

Ambiente de desenvolvimento

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

"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:

npm i @inngageregistry/inngage-react

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

"dependencies": {
	"@inngageregistry/inngage-react": "^4.4.0-alpha.3",
}

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:

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.72.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.

let subscription = {
  appToken: "Trocar pelo App Token do aplicativo",
  identifier: "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.
  • identifier: √Č 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.

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 Inngage.messagingHeadlessTask() contendo o setBackgroundMessageHandler no index.js. Adicione o seguinte código:

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

import Inngage from '@inngageregistry/inngage-react'; // Importe a função da Inngage.

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.

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.

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

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

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:

  1. Ouvir as Notifica√ß√Ķes

Utilize o notificationListener da Inngage para ouvir a chegada das notifica√ß√Ķes e atualizar o estado de exibi√ß√£o:

const [showInApp, setShowInApp] = useState(false)

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

Desta forma, você poderá detectar a chegada de mensagens In App e exibi-las com o aplicativo em segundo plano ou aberto. Para o cenário em que o aplicativo está fechado, a SDK automaticamente trata da renderização da mensagem In App.

  1. Adicionar o Componente InApp no Retorno do Componente Principal

Adicione a tag <InApp /> para que a mensagem possa ser exibida:

return (
  <View>
  	{showInApp && <InApp />}
  	// ...
  </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. ūüĎŹ