{"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 1.20.3 • channel stable\\n<br>\\n**Versões suportadas:**\\n\\n**dart:** >=2.5.2 <3.0.0\\n\\n**flutter:** >=1.10.0\"\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 );\\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<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 deve permitir 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\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"final json = {\\n    \\\"nome\\\": \\\"Leonardo\\\",\\n    \\\"dt_nascimento\\\": \\\"01/09/1970\\\",\\n    \\\"genero\\\": \\\"M\\\",\\n    \\\"cartao\\\": \\\"N\\\",\\n    \\\"ultimo_abastecimento\\\": \\\"10/09/2018\\\",\\n    \\\"total_abastecido\\\": \\\"290,00\\\"\\n  };\\n\\nawait InngageSDK.subscribe(\\n   appToken: 'Trocar pelo App_Token do aplicativo',\\n   friendlyIdentifier: ‘[email protected]’,\\n   customFields: json,\\n   navigatorKey: navigatorKey,\\n );\\n\",\n      \"language\": \"text\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"title\": \"4. InngageWebViewProperties\"\n}\n[/block]\nA SDK deve permitir ao desenvolvedor que está integrando a SDK, customizar a webview e deixar mais amigável e com a cara do teu app 😉, vamos explorar estas propriedades? \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.","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"],"_id":"57240e292887bb0e00bb9d96","createdAt":"2016-04-30T01:45:13.341Z","project":"57240e292887bb0e00bb9d93","releaseDate":"2016-04-30T01:45:13.341Z","__v":19},"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 1.20.3 • channel stable\n<br>\n**Versões suportadas:**\n\n**dart:** >=2.5.2 <3.0.0\n\n**flutter:** >=1.10.0" } [/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 );\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. <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 deve permitir 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 \"cartao\": \"N\",\n \"ultimo_abastecimento\": \"10/09/2018\",\n \"total_abastecido\": \"290,00\"\n };\n\nawait InngageSDK.subscribe(\n appToken: 'Trocar pelo App_Token do aplicativo',\n friendlyIdentifier: ‘[email protected]’,\n customFields: json,\n navigatorKey: navigatorKey,\n );\n", "language": "text" } ] } [/block] [block:api-header] { "title": "4. InngageWebViewProperties" } [/block] A SDK deve permitir ao desenvolvedor que está integrando a SDK, customizar a webview e deixar mais amigável e com a cara do teu app 😉, vamos explorar estas propriedades? [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.