Flutter, Google Wallet e Back4App: Tutorial do Aplicativo de Recompensas Ambientais

introdução neste tutorial, criaremos um aplicativo flutter que incentiva os usuários a tomar ações ambientais, recompensando os com emblemas digitais e ingressos para eventos armazenados no google wallet integraremos back4app como o backend para gerenciar os dados dos usuários e rastrear as contribuições ambientais cada vez que um usuário completa uma tarefa, ele recebe um emblema colecionável ou ingresso para evento, que pode ser adicionado ao seu google wallet para segurança recursos os usuários podem registrar tarefas ambientais (por exemplo, reciclagem, voluntariado) os usuários ganham emblemas digitais e ingressos para eventos com base em suas contribuições o google wallet armazena e exibe esses ativos digitais integração de backend com back4app para rastreamento e gerenciamento de dados pré requisitos ambiente de desenvolvimento flutter siga o guia de instalação do flutter https //flutter dev/docs/get started/install conta back4app inscreva se em back4app https //www back4app com acesso à api do google wallet configure seu projeto seguindo a documentação da api do google wallet https //developers google com/wallet chaves da api do google wallet gere e use as chaves da api necessárias para acessar o google wallet passo 1 configurando o back4app como backend 1 1 criar um projeto no back4app faça login no back4app https //www back4app com/ e crie um novo projeto crie uma classe parse chamada environmentalactions com os seguintes campos nome de usuário (string) o nome de usuário do usuário tipodeação (string) tipo de ação ambiental (por exemplo, reciclagem, plantio de árvores) datahora (datetime) a data em que o usuário completou a ação recompensaemitida (boolean) se uma recompensa foi emitida pela ação 1 2 adicionar dados de exemplo ao back4app você pode adicionar alguns registros de exemplo para fins de teste, mas o aplicativo lidará com a entrada de dados mais tarde, quando os usuários completarem as tarefas passo 2 inicializar o sdk do parse no flutter 2 1 criar um novo projeto flutter abra seu terminal e crie um novo projeto flutter flutter create env rewards app 2 2 adicionar dependências abra o pubspec yaml arquivo e adicione as dependências necessárias dependencies flutter sdk flutter parse server sdk flutter latest version http ^0 13 3 # for networking google wallet pass latest version # example package to handle google wallet passes execute flutter pub get para instalar os pacotes 2 3 inicializar o sdk do parse no arquivo principal no lib/main dart , inicialize o sdk do parse adicionando suas credenciais do back4app import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'environmental rewards', home environmentalrewardsscreen(), ); } } import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'environmental rewards', home environmentalrewardsscreen(), ); } } substitua your back4app app id e your back4app client key pelas suas credenciais reais do back4app passo 3 construa a interface do usuário para registrar ações ambientais vamos criar uma interface básica que permite aos usuários registrar suas ações ambientais e visualizar suas recompensas digitais 3 1 criar o widget environmentalrewardsscreen crie um novo widget em lib/environmental rewards screen dart import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ intl/intl dart'; // for formatting dates class environmentalrewardsscreen extends statefulwidget { @override environmentalrewardsscreenstate createstate() => environmentalrewardsscreenstate(); } class environmentalrewardsscreenstate extends state\<environmentalrewardsscreen> { final texteditingcontroller usernamecontroller = texteditingcontroller(); string? selectedaction; bool loading = false; string? rewardmessage; final list\<string> actions = \['recycling', 'tree planting', 'volunteering']; future\<void> logaction() async { if ( usernamecontroller text isempty || selectedaction == null) { scaffoldmessenger of(context) showsnackbar(snackbar( content text('please enter a username and select an action '), )); return; } setstate(() { loading = true; }); // save action to back4app final actionobject = parseobject('environmentalactions') set('username', usernamecontroller text) set('actiontype', selectedaction) set('timestamp', datetime now()) set('rewardissued', false); final response = await actionobject save(); if (response success) { setstate(() { rewardmessage = 'action logged! check your rewards!'; }); // call google wallet api to issue a reward here await issuereward(); } else { setstate(() { rewardmessage = 'failed to log action '; }); } setstate(() { loading = false; }); } future\<void> issuereward() async { // this is where you'd integrate the google wallet api to issue a digital badge // use the google wallet sdk to generate a pass and add it to the user's wallet } @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('environmental rewards')), body padding( padding const edgeinsets all(16 0), child column( children \[ textfield( controller usernamecontroller, decoration inputdecoration(labeltext 'username'), ), sizedbox(height 16), dropdownbutton\<string>( value selectedaction, hint text('select an environmental action'), items actions map((string action) { return dropdownmenuitem\<string>( value action, child text(action), ); }) tolist(), onchanged (string? newvalue) { setstate(() { selectedaction = newvalue!; }); }, ), sizedbox(height 16), elevatedbutton( onpressed loading ? null logaction, child loading ? circularprogressindicator() text('log action'), ), sizedbox(height 16), if ( rewardmessage != null) text( rewardmessage!, style textstyle(color colors green)), ], ), ), ); } } esta interface permite ao usuário inserir seu nome de usuário selecionar uma ação ambiental registrar a ação, que aciona o backend e emite uma recompensa usando a api do google wallet passo 4 integrando o google wallet para emissão de recompensas 4 1 configurar a api do google wallet siga a documentação da api do google wallet https //developers google com/wallet para configurar a api e obter suas chaves de api 4 2 emitir um distintivo digital com o google wallet no método issuereward() , você implementará a lógica para criar um distintivo digital (pass genérico) e salvá lo na carteira do google do usuário aqui está uma estrutura básica future\<void> issuereward() async { final badgedata = { 'title' 'environmental hero', 'description' 'awarded for completing environmental actions ', // add any additional information or metadata }; // call google wallet api to generate a pass // you can use the 'google wallet pass' package or direct api calls final response = await creategooglewalletpass(badgedata); // placeholder for actual implementation if (response success) { scaffoldmessenger of(context) showsnackbar(snackbar( content text('badge issued! check your google wallet '), )); } else { scaffoldmessenger of(context) showsnackbar(snackbar( content text('failed to issue badge '), )); } } passo 5 executando o app execute o app usando flutter run para começar a registrar ações e receber recompensas quando um usuário registra uma ação, ela será salva no back4app, e um distintivo será emitido usando a api do google wallet conclusão este tutorial mostrou como construir um app de recompensas ambientais usando flutter , google wallet , e back4app os usuários registram ações ambientais e, ao completá las, recebem distintivos digitais ou passes de evento armazenados em sua carteira do google este projeto poderia ser expandido com recursos de compartilhamento social, placares ou até recompensas baseadas em localização usando códigos qr para mais informações, consulte documentação do flutter https //flutter dev/docs documentação da api do google wallet https //developers google com/wallet documentação do back4app https //www back4app com/docs