{"metadata":{"image":[],"title":"","description":""},"api":{"url":"","auth":"required","settings":"","results":{"codes":[]},"params":[]},"next":{"description":"","pages":[]},"title":"Integração Flutter","type":"basic","slug":"integração-flutter","excerpt":"Este tutorial tem como objetivo, guiar os desenvolvedores que desejam integrar seus aplicativos desenvolvidos em Flutter.","body":"[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/71387cb-Artboard.png\",\n        \"Artboard.png\",\n        2511,\n        687,\n        \"#385862\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"Recomendamos que você use a versão estável mais recente do Flutter, definida em pubspec.yaml. A Inngage SDK foi verificado pela última vez na versão Flutter 3.0.0 • channel stable\\n<br>\\n**Versões suportadas:**\\n\\n**sdk:** >=2.17.0 <3.0.0\\n\\n**flutter:** >=2.2.3\"\n}\n[/block]\n\n<br>\n**Passos da integração:**\n\n[1. Configuração do projeto no Firebase](https://inngage.readme.io/docs/configuração-firebase-e-google-dev-console)\n[2. Configuração no painel Inngage](https://inngage.readme.io/docs/android-configuracao-plataforma-inngage)\n[3. Configuração nativa iOS \n](https://inngage.readme.io/v1.0/docs/configuração-nativa-ios-flutter)\n[4. Configuração nativa Android](https://inngage.readme.io/v1.0/docs/configuração-nativa-android-flutter)\n\n<br>\n\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. <br>\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"1. Preparando o ambiente de produção\"\n}\n[/block]\nInstale a SDK no seu projeto, procure a ultima versão  e instale no pubspec.yaml da seguinte forma:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"inngage_plugin: ^x.y.z\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"2. Implementando a SDK\"\n}\n[/block]\nImporte **\"InngageSDK\"** do módulo da SDK, da seguinte forma:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"import 'package:inngage_plugin/inngage_sdk.dart';\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n**InngageSDK.subscribe()**: este método deve ser chamado para que o usuário seja informado da chegada das notificações e assim inicializar o inngage dentro do seu app, quase sempre chamado dentro do ‘main.dart' mas dependendo da sua arquitetura pode ser chamado dentro do MyApp() essa 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\": \"void main() async {\\n  // it should be the first line in main method\\n  WidgetsFlutterBinding.ensureInitialized();\\n  await InngageSDK.subscribe(\\n   appToken: 'Trocar pelo App_Token do aplicativo',\\n   friendlyIdentifier: 'Trocar pelo objeto identificador do usuário',\\n   navigatorKey: navigatorKey,\\n   requestAdvertiserId:true\\n );\\n  runApp(MyApp());\\n}\\n\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n**Parametros requeridos ou obrigatórios:\n**\n**:::at:::required appToken: **App token do aplicativo \n**@required navigatorKey:** No Flutter, as GlobalKeys podem ser usadas para acessar o estado de um StatefulWidget.\n**requestAdvertiserId**: Valor booleano, se true solicita o Advertising Id do android e idfa no IOS, falso por padrão.\n<br>\nNo main.dart, passamos nossa GlobalKey como NavigatorKey para nosso MaterialApp esta é a mesma navigatorKey que passamos no InngageSDK.subscribe()\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"@override\\n  Widget build(BuildContext context) {\\n    return MaterialApp(\\n      navigatorKey: navigatorKey,\\n      home: HomePage(),\\n    );\\n  }\\n\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"3. Adicionando Custom Fields / User Properties\"\n}\n[/block]\nA SDK permite ao desenvolvedor que está integrando a SDK, adicionar campos customizáveis, como Nome, e-mail, gênero etc. Esses parâmetros devem antes ser configurados na plataforma da Inngage.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"final json = {\\n    \\\"nome\\\": \\\"Leonardo\\\",\\n    \\\"dt_nascimento\\\": \\\"01/09/1970\\\",\\n    \\\"genero\\\": \\\"M\\\"\\n  };\\n\\nawait InngageSDK.subscribe(\\n   appToken: 'Trocar pelo App_Token do aplicativo',\\n   friendlyIdentifier: ‘[email protected]’,\\n   phoneNumber: '5511999998888',\\n   customFields: json,\\n   navigatorKey: navigatorKey,\\n   requestAdvertiserId:true\\n );\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nA SDK permite ao desenvolvedor que está integrando a SDK, adicionar campos customizáveis, como Nome, e-mail, gênero etc. Esses parâmetros devem antes ser configurados na plataforma da Inngage\n\nCaso for necessário registrar um usuário em área não logada do App, o parâmetro firendlyIdentifier deve vir como null, assim atribuiremos o mesmo ao Device Token do mesmo.\n[block:api-header]\n{\n  \"title\": \"4. Alterando Identifier e adicionando novos Custom Fields (Fora do subscription)\"\n}\n[/block]\nCaso o App precise registrar um identificador amigável no momento do login, o método Subscribe não precisa ser chamado novamente, \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"await InngageSDK.addUserData(\\n   identifier:'' ,\\n   registration:'', \\n   \\t{\\n    \\t\\\"nome\\\": \\\"Leonardo\\\",\\n    \\t\\\"dt_nascimento\\\": \\\"01/09/1970\\\",\\n    \\t\\\"genero\\\": \\\"M\\\"\\n  \\t};\\n );\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nQuando enviado um registration válido + identifier,  a API realiza a troca do identifier para o informado na request, e adiciona os demais custom fields.\n\nCaso apenas o identifier ou apenas registration for informado a API apenas realiza o registro dos Custom Fields\n[block:api-header]\n{\n  \"title\": \"5. Registro de eventos\"\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\": \"await InngageSDK.sendEvent(\\n     eventName: 'compra',\\n     appToken: 'MyAppToken',\\n     identifier: '[email protected]',\\n     //registration: '', Firebase Token,\\n     conversion_event: true, //\\n     conversion_value: 1090.00, //Valor monetário da conversão\\n     conversion_notid: \\\"2314klbkf41bsgav4hg12ab24v1h41\\\", //ID da mensagem\\n     eventValues: {\\n     \\t\\t'produto': 'Bola de tenis',//Exemplo\\n        'valor': '40'//Exemplo\\n    },\\n  );\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nTemos 3 valores que sao obrigatórios para podermos ter uma boa performance e integração com Inngage \n\n**eventName**: Define o nome que voce ira enviar para voce poder identificar de forma rápida na plataforma \n**appToken:** Precisamos validar suas credenciais.\n**Identifier ou registration (Firebase token):** usamos pra identificar o usuario, pelo menos uma deve ser informada;\n\nVocê também pode adicionar valores avançados para esse evento,\n**eventValues**: Array com chave e valor com dados que serão anexados ao evento.\n\nA API de eventos também pode receber um evento de conversão, para isso existem os campos:\n**conversion_event**: True\n**conversion_value**: Valor monetário da conversão (Padrão FLOAT 11000.00)\n**conversion_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[block:api-header]\n{\n  \"title\": \"6. InngageWebViewProperties\"\n}\n[/block]\nA SDK permite ao desenvolvedor que está integrando a SDK, customizar a Web View e deixar mais amigável e com a cara do seu app 😉, vamos explorar estas propriedades?\n\nA Web View será aberta automaticamente quando o usuário clicar em uma Notificação que contenha uma URL não Deep Link.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"final inngageWebViewProperties = InngageWebViewProperties(\\n    appBarColor: Colors.pink,\\n    appBarText: Text(\\n      'AppTitle',\\n    ),\\n    backgroundColor: Colors.white,\\n    loaderColor: Colors.pink,\\n    debuggingEnabled: true,\\n    withJavascript: true,\\n    withLocalStorage: true,\\n    withZoom: true,\\n  );\\n\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\nTodos são parâmetros opcionais e maioria deles tem defaults caso voce não precisar customizar:\n\n**appBarColor:** Opção para mudar a cor do app bar, a barra superior de navegação\n**appBarText:** Opção para colocar um Texto na barra superior de navegação, podendo assim ganhar todo o poder do flutter (fontsize,styles,etc).\n**backgroundColor:** Opção para alterar a cor do fundo da pagina da webview por default é white.\n**loaderColor:** Opção para alterar a cor do loading da webview, a sdk utiliza o CircularProgressIndicator como componente de loading.\n**customLoading:** Aqui deixamos uma propriedade bem legal caso você queira utilizar sua própria animação de loaging, ele recebe um widget como parâmetro, quando aplicada ele vai ignorar o loaderDefault do app e utilizar o componente que voce utilizar.\n[block:callout]\n{\n  \"type\": \"warning\",\n  \"body\": \"A partir da API31 (Android 12), seu aplicativo Android deve listar todos os aplicativos com os quais interage. Adicione:\\n\\n<uses-permission android:name=\\\"android.permission.QUERY_ALL_PACKAGES\\\"/>\\nin your android manifest to bypass it or specifically list them.\\n\\nPara mais informações: [https://developer.android.com/about/versions/11/privacy/package-visibility](https://developer.android.com/about/versions/11/privacy/package-visibility)\",\n  \"title\": \"Caso tenha algum problema para abrir URLs no Android:\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"7. In App Messages\"\n}\n[/block]\nA SDK Flutter 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 chame a função a seguir em cada tela que deseja possibilitar a apresentação de uma in app message.\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"InngageInapp.show();\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]","updates":[],"order":0,"isReference":false,"hidden":false,"sync_unique":"","link_url":"","link_external":false,"_id":"5f5e76023694310012924549","createdAt":"2020-09-13T19:41:54.633Z","user":"5724b9982ad0bc17001227fa","category":{"sync":{"isSync":false,"url":""},"pages":[],"title":"Flutter SDK","slug":"flutter","order":6,"from_sync":false,"reference":false,"_id":"5f5e716dcc85f9004a4fa193","createdAt":"2020-09-13T19:22:21.320Z","version":"57240e292887bb0e00bb9d96","project":"57240e292887bb0e00bb9d93","__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}

Integração Flutter

Este tutorial tem como objetivo, guiar os desenvolvedores que desejam integrar seus aplicativos desenvolvidos em Flutter.

[block:image] { "images": [ { "image": [ "https://files.readme.io/71387cb-Artboard.png", "Artboard.png", 2511, 687, "#385862" ] } ] } [/block] [block:callout] { "type": "warning", "body": "Recomendamos que você use a versão estável mais recente do Flutter, definida em pubspec.yaml. A Inngage SDK foi verificado pela última vez na versão Flutter 3.0.0 • channel stable\n<br>\n**Versões suportadas:**\n\n**sdk:** >=2.17.0 <3.0.0\n\n**flutter:** >=2.2.3" } [/block] <br> **Passos da integração:** [1. Configuração do projeto no Firebase](https://inngage.readme.io/docs/configuração-firebase-e-google-dev-console) [2. Configuração no painel Inngage](https://inngage.readme.io/docs/android-configuracao-plataforma-inngage) [3. Configuração nativa iOS ](https://inngage.readme.io/v1.0/docs/configuração-nativa-ios-flutter) [4. Configuração nativa Android](https://inngage.readme.io/v1.0/docs/configuração-nativa-android-flutter) <br> Apó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. <br> [block:api-header] { "type": "basic", "title": "1. Preparando o ambiente de produção" } [/block] Instale a SDK no seu projeto, procure a ultima versão e instale no pubspec.yaml da seguinte forma: [block:code] { "codes": [ { "code": "inngage_plugin: ^x.y.z", "language": "text" } ] } [/block] [block:api-header] { "title": "2. Implementando a SDK" } [/block] Importe **"InngageSDK"** do módulo da SDK, da seguinte forma: [block:code] { "codes": [ { "code": "import 'package:inngage_plugin/inngage_sdk.dart';", "language": "text" } ] } [/block] **InngageSDK.subscribe()**: este método deve ser chamado para que o usuário seja informado da chegada das notificações e assim inicializar o inngage dentro do seu app, quase sempre chamado dentro do ‘main.dart' mas dependendo da sua arquitetura pode ser chamado dentro do MyApp() essa função é responsável por autorizar o acesso à API da Inngage e ao Firebase Cloud Messaging e ativar os listeners de notificações. [block:code] { "codes": [ { "code": "void main() async {\n // it should be the first line in main method\n WidgetsFlutterBinding.ensureInitialized();\n await InngageSDK.subscribe(\n appToken: 'Trocar pelo App_Token do aplicativo',\n friendlyIdentifier: 'Trocar pelo objeto identificador do usuário',\n navigatorKey: navigatorKey,\n requestAdvertiserId:true\n );\n runApp(MyApp());\n}\n", "language": "text" } ] } [/block] **Parametros requeridos ou obrigatórios: ** **@required appToken: **App token do aplicativo **@required navigatorKey:** No Flutter, as GlobalKeys podem ser usadas para acessar o estado de um StatefulWidget. **requestAdvertiserId**: Valor booleano, se true solicita o Advertising Id do android e idfa no IOS, falso por padrão. <br> No main.dart, passamos nossa GlobalKey como NavigatorKey para nosso MaterialApp esta é a mesma navigatorKey que passamos no InngageSDK.subscribe() [block:code] { "codes": [ { "code": "@override\n Widget build(BuildContext context) {\n return MaterialApp(\n navigatorKey: navigatorKey,\n home: HomePage(),\n );\n }\n", "language": "text" } ] } [/block] [block:api-header] { "title": "3. Adicionando Custom Fields / User Properties" } [/block] A SDK permite ao desenvolvedor que está integrando a SDK, adicionar campos customizáveis, como Nome, e-mail, gênero etc. Esses parâmetros devem antes ser configurados na plataforma da Inngage. [block:code] { "codes": [ { "code": "final json = {\n \"nome\": \"Leonardo\",\n \"dt_nascimento\": \"01/09/1970\",\n \"genero\": \"M\"\n };\n\nawait InngageSDK.subscribe(\n appToken: 'Trocar pelo App_Token do aplicativo',\n friendlyIdentifier: ‘[email protected]’,\n phoneNumber: '5511999998888',\n customFields: json,\n navigatorKey: navigatorKey,\n requestAdvertiserId:true\n );", "language": "text" } ] } [/block] A SDK permite ao desenvolvedor que está integrando a SDK, adicionar campos customizáveis, como Nome, e-mail, gênero etc. Esses parâmetros devem antes ser configurados na plataforma da Inngage Caso for necessário registrar um usuário em área não logada do App, o parâmetro firendlyIdentifier deve vir como null, assim atribuiremos o mesmo ao Device Token do mesmo. [block:api-header] { "title": "4. Alterando Identifier e adicionando novos Custom Fields (Fora do subscription)" } [/block] Caso o App precise registrar um identificador amigável no momento do login, o método Subscribe não precisa ser chamado novamente, [block:code] { "codes": [ { "code": "await InngageSDK.addUserData(\n identifier:'' ,\n registration:'', \n \t{\n \t\"nome\": \"Leonardo\",\n \t\"dt_nascimento\": \"01/09/1970\",\n \t\"genero\": \"M\"\n \t};\n );", "language": "text" } ] } [/block] Quando enviado um registration válido + identifier, a API realiza a troca do identifier para o informado na request, e adiciona os demais custom fields. Caso apenas o identifier ou apenas registration for informado a API apenas realiza o registro dos Custom Fields [block:api-header] { "title": "5. Registro de eventos" } [/block] A SDK permite ao desenvolvedor que está integrando a SDK, enviar eventos customizados. Lembre-se de configura-los na plataforma Inngage. [block:code] { "codes": [ { "code": "await InngageSDK.sendEvent(\n eventName: 'compra',\n appToken: 'MyAppToken',\n identifier: '[email protected]',\n //registration: '', Firebase Token,\n conversion_event: true, //\n conversion_value: 1090.00, //Valor monetário da conversão\n conversion_notid: \"2314klbkf41bsgav4hg12ab24v1h41\", //ID da mensagem\n eventValues: {\n \t\t'produto': 'Bola de tenis',//Exemplo\n 'valor': '40'//Exemplo\n },\n );", "language": "text" } ] } [/block] Temos 3 valores que sao obrigatórios para podermos ter uma boa performance e integração com Inngage **eventName**: Define o nome que voce ira enviar para voce poder identificar de forma rápida na plataforma **appToken:** Precisamos validar suas credenciais. **Identifier ou registration (Firebase token):** usamos pra identificar o usuario, pelo menos uma deve ser informada; Você também pode adicionar valores avançados para esse evento, **eventValues**: Array com chave e valor 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 campos: **conversion_event**: True **conversion_value**: Valor monetário da conversão (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, para assim atribuir uma conversão a determinado Push [block:api-header] { "title": "6. InngageWebViewProperties" } [/block] A SDK permite ao desenvolvedor que está integrando a SDK, customizar a Web View e deixar mais amigável e com a cara do seu app 😉, vamos explorar estas propriedades? A Web View será aberta automaticamente quando o usuário clicar em uma Notificação que contenha uma URL não Deep Link. [block:code] { "codes": [ { "code": "final inngageWebViewProperties = InngageWebViewProperties(\n appBarColor: Colors.pink,\n appBarText: Text(\n 'AppTitle',\n ),\n backgroundColor: Colors.white,\n loaderColor: Colors.pink,\n debuggingEnabled: true,\n withJavascript: true,\n withLocalStorage: true,\n withZoom: true,\n );\n", "language": "text" } ] } [/block] Todos são parâmetros opcionais e maioria deles tem defaults caso voce não precisar customizar: **appBarColor:** Opção para mudar a cor do app bar, a barra superior de navegação **appBarText:** Opção para colocar um Texto na barra superior de navegação, podendo assim ganhar todo o poder do flutter (fontsize,styles,etc). **backgroundColor:** Opção para alterar a cor do fundo da pagina da webview por default é white. **loaderColor:** Opção para alterar a cor do loading da webview, a sdk utiliza o CircularProgressIndicator como componente de loading. **customLoading:** Aqui deixamos uma propriedade bem legal caso você queira utilizar sua própria animação de loaging, ele recebe um widget como parâmetro, quando aplicada ele vai ignorar o loaderDefault do app e utilizar o componente que voce utilizar. [block:callout] { "type": "warning", "body": "A partir da API31 (Android 12), seu aplicativo Android deve listar todos os aplicativos com os quais interage. Adicione:\n\n<uses-permission android:name=\"android.permission.QUERY_ALL_PACKAGES\"/>\nin your android manifest to bypass it or specifically list them.\n\nPara mais informações: [https://developer.android.com/about/versions/11/privacy/package-visibility](https://developer.android.com/about/versions/11/privacy/package-visibility)", "title": "Caso tenha algum problema para abrir URLs no Android:" } [/block] [block:api-header] { "title": "7. In App Messages" } [/block] A SDK Flutter 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. Para apresentar chame a função a seguir em cada tela que deseja possibilitar a apresentação de uma in app message. [block:code] { "codes": [ { "code": "InngageInapp.show();", "language": "text" } ] } [/block]