{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","settings":"","results":{"codes":[]},"params":[]},"next":{"description":"","pages":[]},"title":"Integração React Native 0.60.x","type":"basic","slug":"integração-react-native-060x-v2","excerpt":"Este tutorial tem como objetivo, guiar os desenvolvedores que desejam integrar seus aplicativos desenvolvidos em React Native.","body":"Recomendamos que você use a versão estável mais recente do React Native, definida em package.json. \nA **Inngage SDK React Native 2.3.3** foi verificado pela última vez na versão:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\\"react\\\": \\\"17.0.2\\\",\\n\\\"react-native\\\": \\\"0.66.3\\\",\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\n<br>\nSe o seu app se encontra na versão 0.60.x siga o seguinte passo-a-passo para realizar a integração da Inngage com seu app.\n\n<br>\n[ 1. Configuração do projeto no Firebase](https://inngage.readme.io/docs/configuração-firebase-e-google-dev-console)\n\n[2. Configuração no painel Inngage](https://inngage.readme.io/docs/android-configuracao-plataforma-inngage)\n\n[ 3. Configuração nativa iOS](https://inngage.readme.io/v1.0/docs/configuração-nativa-ios-sdk-20)\n\n[4. Configuração nativa Android](https://inngage.readme.io/v1.0/docs/configuração-nativa-sdk-20)\n\n<br>\n<br>\nApós fazer as configurações necessárias para que o seu código tenha acesso nativo às push notifications do Firebase iremos instalar a SDK da Inngage\n<br>\n[block:api-header]\n{\n  \"title\": \"1. Preparando o ambiente de produção\"\n}\n[/block]\nInstale as seguintes dependências externas que a SDK utiliza.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"\\\":::at:::react-native-firebase/app\\\": \\\"^14.11.0,\\n\\\"@react-native-firebase/messaging\\\": \\\"^14.11.0\\\",\\n\\\"react-native-localize\\\": \\\"^2.2.2\\\",\\n\\\"react-native-snap-carousel\\\": \\\"^3.9.1\\\",\\n\\\"@react-native-async-storage/async-storage\\\": \\\"^1.16.1\\\",\\n\\\"react-native-inappbrowser-reborn\\\": \\\"^3.6.3\\\",\\n\\\"@react-native-community/push-notification-ios\\\": \\\"^1.10.1\\\",\\n\\\"react-native-push-notification\\\": \\\"^8.1.1\\\",\\n\\\"react-native-device-info\\\": \\\"^8.4.9\\\"\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"2. Implementando a SDK\"\n}\n[/block]\nImporte 'GetPermission' do módulo da SDK.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import Inngage from '@inngageregistry/inngage-react'\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\nEste método deve ser chamado para que o usuário seja informado da chegada das notificações, deve sempre chamado dentro do 'index.js'.\n\nEssa função é responsável por autorizar o acesso à API da Inngage e ao Firebase Cloud Messaging e ativar os listeners de notificações.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"let request = {\\n      enableAlert: true, //Caso não deseje apresentar o alert com o conteúdo do Push após clicado trocar para false\\n  \\tappToken:'token', // Seu token da Inngage\\n  \\tonNotificationOpenedApp:(remoteMessage){} // Caso queira um callback das informações do push aberto \\n  \\t\\n    }\\n    await Inngage.GetPermission(request);\\n}\",\n      \"language\": \"json\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"3. Registro de usuário\"\n}\n[/block]\nEsse método é responsável por realizar o registro / subscription do usuário na plataforma Inngage, e pode ser utilizado em qualquer momento desejado, como quando o usuário abre o app, no momento do login ou cadastro, entre outros.\n\nRecomendamos que esse método seja chamado a cada nova sessão do usuário, pois utilizamos esse método para registrar as sessões do usuário na plataforma Inngage.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"let request = {\\n      friendlyIdentifier: 'identificador',//identificador amigável do usuário, informar null em caso de usuário sem identificador\\n  \\t\\tphoneNumer: 'telefone do usuário', // Padrão 5511999991234\\n      appToken: '{Trocar pelo App_Token do aplicativo}',\\n  \\t\\tauthKey: 'Adicionar Authorization Key gerada no painel Inngage', //Opcional\\n      PROD: true,//Sempre true\\n      customData: false,//Enviar true quando estiver mandando custom fields abaixo\\n      customFields: {\\n      }\\n    }\\n    await Inngage.Subscription(request);\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"4. In App Messages\"\n}\n[/block]\nA SDK React Native da Inngage tem a capacidade de disponibilizar ao usuários In App Messages. As mensagens podem ser enviadas tanto pela plataforma e pela API, e automaticamente é apresentada de acordo com as configurações recebidas no payload do Firebase.\n\nPara apresentar importe o conteúdo a seguir em cada tela que deseja possibilitar a apresentação de uma in app message.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import { Inapp } from '@inngageregistry/inngage-react';\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nA propriedade on close do componente define se as mensagens serão apagadas, ou se será mantido o registro de mensagens. Onde o parâmetro clear define que ao fechar a In App Message apaga todas as mensagens da Stack e se não for definido permanece.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<Inapp onClose='clear'/>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"5. Registrando eventos para o usuário\"\n}\n[/block]\nA SDK permite ao desenvolvedor que está integrando a SDK, enviar eventos customizados. Lembre-se de configura-los na plataforma Inngage.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"Inngage.SendEvent(\\n  {\\n    newEventRequest: {\\n      app_token: \\\"177d3286eb87ab2d94efb0da3eb87c9f\\\",\\n      identifier: \\\"[email protected]\\\",\\n      event_name: \\\"acessou_promo\\\",\\n      conversion_event: true,\\n      conversion_value: 1090.00,\\n      conversion_notid: \\\"2314klbkf41bsgav4hg12ab24v1h41\\\",\\n      event_values: {\\n        nome_promo: \\\"10OFF\\\",\\n        categoria: \\\"Fast Food\\\",\\n        foto_promo: \\\"https://inngage.com.br/wp-content/uploads/2021/08/calcular-efetividade-push-1.png\\\",\\n        redirect_link: \\\"https://inngage.com.br/21njnfa\\\"\\n      }\\n    },\\n    authKey: 'Adicionar Authorization Key gerada no painel Inngage', //Opcional\\n  }\\n)\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\nTemos 3 valores que sao obrigatórios para podermos ter uma boa performance e integração com Inngage \n\neventName: Define o nome que voce ira enviar para voce poder identificar de forma rápida na plataforma \nappToken: Precisamos validar suas credenciais.\nIdentifier ou registration (Firebase token): usamos pra identificar o usuario, pelo menos uma deve ser informada;\n\nJunto de um evento, pode ser enviados valores atribuídos a esse evento\neventValues: Array de objetos e valores.\n\nA API de eventos também pode receber um evento de conversão, para isso existem os campos\nconversion_event: True\nconversion_value: Valor monetário da conversão (Padrão 11000.00)\nconversion_notid: Opção para enviar o ID Único da Notificação da Inngage (NOTID), que foi recebido pelo app no momento do Push, para assim atribuir uma conversão a determinado Push\n\n\n[block:api-header]\n{\n  \"title\": \"6. Recuperando dados adicionais e outros de uma notificação\"\n}\n[/block]\nCaso queira recuperar algum Additional Data enviada pelo Firebase, implemente a seguinte função:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import { firebase } from '@react-native-firebase/messaging';\\nfirebase.messaging().onMessage(async (remoteMessage) => { \\n\\t\\tconsole.log(remoteMessage)\\n}\\n\\nfirebase.messaging().setBackgroundMessageHandler(async (remoteMessage) => { \\t   \\t\\t console.log(remoteMessage) \\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Projeto Sample\",\n  \"body\": \"Disponibilizamos um projeto sample com a implementação da SDK. Você pode acessa-lo aqui:\\n[https://github.com/inngage/inngage-react-native-sample](https://github.com/inngage/inngage-react-native-sample) \"\n}\n[/block]","updates":[],"order":3,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5f897e2938dca5004ffd203b","createdAt":"2020-10-16T11:04:09.757Z","user":"5724b9982ad0bc17001227fa","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"React Native SDK","slug":"react-native-sdk","order":5,"from_sync":false,"reference":false,"_id":"5c597e8b0abe110014bf1a11","project":"57240e292887bb0e00bb9d93","version":"57240e292887bb0e00bb9d96","createdAt":"2019-02-05T12:16:11.366Z","__v":0},"version":{"version":"1.0","version_clean":"1.0.0","codename":"","is_stable":true,"is_beta":false,"is_hidden":false,"is_deprecated":false,"categories":["57240e292887bb0e00bb9d97","57241b7deae5090e00ee6249","57241c06eae5090e00ee624a","57242abb2ad0bc170012279b","5734d18c7b9859320047f4b1","57688cc71f818b0e00695efb","577ead2ca74eb40e00d97bca","57b66af649a12a0e007b461b","597e5f8f13505b0014251a79","59964eb2f824b4000f961fbe","5a15ab12f2643f001ee8737c","5ab1151799750500797334e0","5c597e8b0abe110014bf1a11","5e395a05470bc3002d78d886","5e42a9647515f300509a594d","5f5e716dcc85f9004a4fa193","5f6dd615c624d800180bd237","5f984feb8aed05003a0032dc","60ac0e9c4c04970016613c6c","625010e649ff260020328542"],"_id":"57240e292887bb0e00bb9d96","createdAt":"2016-04-30T01:45:13.341Z","project":"57240e292887bb0e00bb9d93","releaseDate":"2016-04-30T01:45:13.341Z","__v":20},"project":"57240e292887bb0e00bb9d93","__v":0,"parentDoc":null}