Crea un gioco sostenibile utilizzando Flutter e Back4app

introduzione in questo tutorial, esploreremo come costruire un gioco sostenibile utilizzando flutter e back4app questo gioco educerà gli utenti su comportamenti ecologici e li ricompenserà per aver intrapreso azioni positive per l'ambiente sfrutteremo back4app per i servizi di backend, come il tracciamento dei progressi degli utenti e la loro ricompensa con oggetti digitali concetto di gioco ecowarrior il gioco si chiamerà ecowarrior , dove gli utenti si occupano di piccoli compiti ambientali come il riciclaggio, il risparmio d'acqua e la riduzione del consumo energetico gli utenti guadagneranno punti e ricompense digitali man mano che completano i compiti ci concentreremo su registrazione dei compiti e tracciamento dei progressi gli utenti registrano le azioni ecologiche che intraprendono sistema di ricompensa i giocatori guadagnano punti e badge per i loro contributi integrazione del backend tutti i dati e i progressi degli utenti saranno memorizzati in back4app prerequisiti impostazione dello sviluppo flutter segui la guida all'installazione di flutter https //flutter dev/docs/get started/install account back4app registrati per un account gratuito su back4app https //www back4app com/ conoscenze di base sui widget flutter e su come lavorare con un backend passo 1 configura back4app 1 1 crea un progetto back4app accedi a back4app https //www back4app com/ e crea un nuovo progetto backend chiamato ecowarriorgame crea una classe parse chiamata ecoactions con i seguenti campi username (string) il nome utente del giocatore actiontype (string) il tipo di azione (ad es , "riciclaggio", "conservazione dell'acqua") points (numero) i punti assegnati per l'azione timestamp (datetime) il momento in cui l'azione è stata registrata 1 2 configura le tue credenziali back4app vai alle impostazioni del tuo progetto back4app e ottieni il tuo id applicazione e chiave client questi saranno utilizzati per inizializzare back4app in flutter passo 2 configurare il tuo progetto flutter 2 1 crea un nuovo progetto flutter flutter create eco warrior cd eco warrior 2 2 aggiungi dipendenze apri pubspec yaml e aggiungi le seguenti dipendenze per parse sdk e flutter dependencies flutter sdk flutter parse server sdk flutter latest version provider ^5 0 0 # state management esegui flutter pub get per installare le dipendenze 2 3 inizializza parse sdk in flutter in lib/main dart , inizializza parse aggiungendo le tue credenziali 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(), ); } } sostituisci your back4app app id e your back4app client key con le tue effettive credenziali back4app passo 3 interfaccia e funzionalità del gioco ora costruiremo l'interfaccia del ecowarrior gioco e ci integreremo con back4app 3 1 crea la gamescreen in lib/game screen dart , crea un'interfaccia di gioco di base in cui i giocatori possono registrare compiti ambientali e visualizzare il loro punteggio 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 recupero dei dati utente da back4app recupereremo e visualizzeremo il punteggio totale e le azioni che l'utente ha registrato 4 1 recupera il punteggio del giocatore dal backend per ottenere il punteggio del giocatore, dobbiamo recuperare tutte le loro azioni da back4app e calcolare il punteggio totale in lib/game screen dart , aggiorna gamescreenstate per includere la logica di recupero 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; }); } } chiama fetchscore() quando la schermata è inizializzata @override void initstate() { super initstate(); fetchscore(); } passo 5 eseguire il gioco esegui l'app sul tuo dispositivo o emulatore il giocatore selezionerà un'azione dal menu a discesa, la registrerà e i suoi punti saranno salvati su back4app il punteggio totale sarà recuperato da back4app e visualizzato sullo schermo passo 6 espandere il gioco puoi espandere il ecowarrior gioco aggiungendo più compiti e azioni ambientali implementando una classifica per mostrare i migliori giocatori eco compatibili aggiungendo traguardi per il completamento di un certo numero di compiti conclusione in questo tutorial, abbiamo costruito un gioco sostenibile utilizzando flutter e back4app il gioco consente ai giocatori di registrare azioni eco compatibili, traccia i loro progressi utilizzando un backend e li premia con punti con il ricco framework ui di flutter e il backend scalabile di back4app, puoi facilmente estendere questo concetto per costruire giochi sostenibili più complessi e interattivi per ulteriori informazioni documentazione di flutter https //flutter dev/docs documentazione di back4app https //www back4app com/docs