Guides
GuidesAPI ReferenceHome

Ionic Capacitor SDK

Suggest Edits

📘

A versão mais recente da SDK Ionic Capacitor é a v1.0.0, que está disponível atualmente.

Passos da integração

1. Configuração do projeto no Firebase
2. Configuração no painel Inngage
3. Configuração nativa iOS
4. Configuração nativa Android

Instalação

Ambiente de desenvolvimento

Antes de começar a utilizar nossa SDK, verifique se o seu ambiente de desenvolvimento possui o @ionic/cli , e o Capacitor versão superior a 7, como estrutura de desenvolvimento do projeto.

Instalando as dependências

Instale as dependências externas utilizadas:

"dependencies": {
    "@capacitor-firebase/messaging": "^7.3.1",
    "@capacitor/android": "7.0.0",
    "@capacitor/app": "^7.1.0",
    "@capacitor/core": "^7.4.3",
    "@capacitor/device": "^7.0.2",
    "@capacitor/geolocation": "^7.1.5",
    "@capacitor/ios": "7.0.0",
    "@capacitor/push-notifications": "^7.0.3",
    "@inngageregistry/inngage-ionic-capacitor": "file:..",
    "uuid": "^13.0.0"
  },

📘

Recomendação: Certifique-se de instalar as versões conforme especificado 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 nosso package

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

npm i @inngageregistry/inngage-ionic-capacitor

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

"dependencies": {
	"@inngageregistry/inngage-ionic-capacitor": "^1.0.0",
}

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. Esta SDK é baseada em classes instanciáveis, isso significa que, antes de utilizar os métodos (como registerSubscription, initPushHandlers ou sendEvent), você precisa criar uma instância da SDK:

import { InngageSDK } from '@inngageregistry/inngage-ionic-capacitor';

const inngage = new InngageSDK();

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.

registerSubscription()

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.

await inngage.registerSubscription({ 
  appToken: 'Adicionar o App Token do aplicativo', 	
  identifier: '[email protected]',
  customFields: {
    "name": "Saulo",
    "age": 27,
    "login": "inativo"
  },
});

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.
  • requestGeolocation: Um valor booleano que, quando definido como true, solicita a permissão para acessar a localização do usuário antes de registrá-lo. O valor padrão é false.

📘

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.

initPushHandlers()

Inicializa os handlers de notificações (recebimento em foreground e clique), além de enviar para a Inngage o status de clique da notificação quando houver um notId no payload.

await sdk.initPushHandlers({
  onReceive: (n) => console.log('📩 foreground:', n),
  onClick: ({ from, action }) => console.log('👆 click from', from, action)
});

Parâmetros

  • onReceive?: (n: AnyNotification) => void
    Chamado quando a notificação chega com o app em foreground.
  • onClick?: (ctx: { from: 'system' | 'foreground'; action: AnyAction }) => void
    Chamado quando o usuário clica na notificação (ou em uma action da notificação).

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.

await inngage.sendEvent({
  appToken: 'Adicionar o App Token do aplicativo',
  eventName: 'capacitor_event',
  conversionEvent: true,
  conversionValue: 1090.00,
  conversionNotId: "2314klbkf41bsgav4hg12ab24v1h41",
  eventValues: {
    "nome_sdk": 'Inngage Ionic',
    "valor": '40'
  }
});

Existem 2 campos obrigatórios para garantir o correto funcionamento:

  • appToken: É o token do aplicativo na plataforma Inngage, essencial para a comunicação com os serviços da Inngage.
  • 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."

👍

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

Updated 5 days ago