Construindo um Jogo Sustentável Usando Flutter e Back4app

introdução neste tutorial, vamos mostrar como construir um jogo sustentável usando flutter e back4app este jogo educará os usuários sobre comportamentos ecológicos e os recompensará por tomar ações positivas para o meio ambiente vamos aproveitar o back4app para serviços de backend, como rastrear o progresso dos usuários e recompensá los com itens digitais conceito do jogo ecowarrior o jogo será chamado de ecowarrior , onde os usuários realizam pequenas tarefas ambientais, como reciclar, economizar água e reduzir o consumo de energia os usuários ganharão pontos e recompensas digitais à medida que completam as tarefas vamos nos concentrar em registro de tarefas e rastreamento de progresso os usuários registram as ações ecológicas que realizam sistema de recompensas os jogadores ganham pontos e emblemas por suas contribuições integração de backend todos os dados e progresso dos usuários serão armazenados no back4app pré requisitos configuração de desenvolvimento flutter siga o guia de instalação do flutter https //flutter dev/docs/get started/install conta back4app inscreva se para uma conta gratuita em back4app https //www back4app com/ conhecimento básico sobre widgets flutter e como trabalhar com um backend passo 1 configurar o back4app 1 1 criar um projeto back4app faça login em back4app https //www back4app com/ e crie um novo projeto de backend chamado ecowarriorgame crie uma classe parse chamada ecoactions com os seguintes campos nome de usuário (string) o nome de usuário do jogador tipodeação (string) o tipo de ação (por exemplo, "reciclagem", "conservação de água") pontos (número) os pontos concedidos pela ação timestamp (datetime) o momento em que a ação foi registrada 1 2 configure suas credenciais back4app vá para as configurações do seu projeto back4app e obtenha seu id da aplicação e chave do cliente estes serão usados para inicializar o back4app no flutter passo 2 configurando seu projeto flutter 2 1 criar um novo projeto flutter flutter create eco warrior cd eco warrior 2 2 adicionar dependências abra pubspec yaml e adicione as seguintes dependências para parse sdk e flutter dependencies flutter sdk flutter parse server sdk flutter latest version provider ^5 0 0 # state management execute flutter pub get para instalar as dependências 2 3 inicializar parse sdk no flutter em lib/main dart , inicialize o 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 'ecowarrior game', theme themedata(primaryswatch colors green), home gamescreen(), ); } } substitua your back4app app id e your back4app client key pelas suas credenciais reais do back4app passo 3 interface e funcionalidade do jogo agora vamos construir a interface do ecowarrior jogo e integrar com o back4app 3 1 criar a tela do jogo em lib/game screen dart , crie uma interface básica do jogo onde os jogadores podem registrar tarefas ambientais e visualizar sua pontuação import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; class gamescreen extends statefulwidget { @override gamescreenstate createstate() => gamescreenstate(); } class gamescreenstate extends state\<gamescreen> { string? selectedaction; int score = 0; final list\<string> actions = \['recycling', 'water conservation', 'energy saving']; future\<void> logaction() async { if ( selectedaction == null) { scaffoldmessenger of(context) showsnackbar(snackbar( content text('please select an action '), )); return; } // assign points for the action int points = 0; switch ( selectedaction) { case 'recycling' points = 10; break; case 'water conservation' points = 15; break; case 'energy saving' points = 20; break; } // save action to back4app final ecoaction = parseobject('ecoactions') set('username', 'player1') // example username set('actiontype', selectedaction) set('points', points) set('timestamp', datetime now()); final response = await ecoaction save(); if (response success) { setstate(() { score += points; }); scaffoldmessenger of(context) showsnackbar(snackbar( content text('action logged! you earned $points points '), )); } else { scaffoldmessenger of(context) showsnackbar(snackbar( content text('failed to log action '), )); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('ecowarrior'), ), body padding( padding const edgeinsets all(16 0), child column( crossaxisalignment crossaxisalignment stretch, children \[ text( 'select an eco friendly action ', style textstyle(fontsize 18), ), dropdownbutton\<string>( value selectedaction, hint text('choose action'), items actions map((string action) { return dropdownmenuitem\<string>( value action, child text(action), ); }) tolist(), onchanged (string? newvalue) { setstate(() { selectedaction = newvalue; }); }, ), sizedbox(height 20), elevatedbutton( onpressed logaction, child text('log action'), ), sizedbox(height 20), text( 'current score $ score', style textstyle(fontsize 20, fontweight fontweight bold), ), ], ), ), ); } } passo 4 recuperando dados do usuário do back4app nós iremos recuperar e exibir a pontuação total e as ações que o usuário registrou 4 1 buscar a pontuação do jogador do backend para obter a pontuação do jogador, precisamos buscar todas as suas ações de back4app e calcular a pontuação total em lib/game screen dart , atualize gamescreenstate para incluir a lógica de busca future\<void> fetchscore() async { final query = querybuilder\<parseobject>(parseobject('ecoactions')) whereequalto('username', 'player1'); // example username final response = await query query(); if (response success && response results != null) { int totalscore = 0; for (var result in response results!) { totalscore += result get\<int>('points')!; } setstate(() { score = totalscore; }); } } chame fetchscore() quando a tela for inicializada @override void initstate() { super initstate(); fetchscore(); } passo 5 executando o jogo execute o aplicativo no seu dispositivo ou emulador o jogador selecionará uma ação no menu suspenso, registrará e seus pontos serão salvos em back4app a pontuação total será recuperada de back4app e exibida na tela passo 6 expandindo o jogo você pode expandir o jogo ecowarrior ao adicionar mais tarefas e ações ambientais implementar um placar para mostrar os principais jogadores ecológicos adicionar conquistas por completar um certo número de tarefas conclusão neste tutorial, construímos um jogo sustentável usando flutter e back4app o jogo permite que os jogadores registrem ações ecológicas, acompanhem seu progresso usando um backend e sejam recompensados com pontos com o rico framework de ui do flutter e o backend escalável do back4app, você pode facilmente expandir este conceito para construir jogos sustentáveis mais complexos e interativos para mais informações documentação do flutter https //flutter dev/docs documentação do back4app https //www back4app com/docs