{"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}