Ein nachhaltiges Spiel mit Flutter und Back4app entwickeln

einführung in diesem tutorial werden wir durch den prozess gehen, wie man ein nachhaltiges spiel mit flutter und back4app , erstellt dieses spiel wird die benutzer über umweltfreundliches verhalten aufklären und sie für positive aktionen für die umwelt belohnen wir werden back4app für backend dienste nutzen, wie z b das verfolgen des fortschritts der benutzer und das belohnen mit digitalen gegenständen spielkonzept ecowarrior das spiel wird ecowarrior , heißen, in dem die benutzer kleine umweltfreundliche aufgaben wie recycling, wassersparen und reduzierung des energieverbrauchs übernehmen die benutzer verdienen punkte und digitale belohnungen, während sie aufgaben abschließen wir werden uns auf folgendes konzentrieren aufgabenprotokollierung und fortschrittsverfolgung benutzer protokollieren die umweltfreundlichen aktionen, die sie durchführen belohnungssystem spieler verdienen punkte und abzeichen für ihre beiträge backend integration alle benutzerdaten und fortschritte werden in back4app gespeichert voraussetzungen flutter entwicklungssetup folgen sie dem flutter installationsanleitung https //flutter dev/docs/get started/install back4app konto melden sie sich für ein kostenloses konto bei back4app https //www back4app com/ grundkenntnisse über flutter widgets und wie man mit einem backend arbeitet schritt 1 back4app einrichten 1 1 erstellen sie ein back4app projekt melden sie sich bei back4app https //www back4app com/ an und erstellen sie ein neues backend projekt mit dem namen ecowarriorgame erstellen sie eine parse klasse mit dem namen ecoactions mit den folgenden feldern benutzername (string) der benutzername des spielers aktionstyp (string) der typ der aktion (z b "recycling", "wasserschutz") punkte (zahl) die für die aktion vergebenen punkte zeitstempel (datum/uhrzeit) der zeitpunkt, an dem die aktion protokolliert wurde 1 2 richten sie ihre back4app anmeldeinformationen ein gehen sie zu den einstellungen ihres back4app projekts und holen sie sich ihre anwendungs id und client schlüssel diese werden verwendet, um back4app in flutter zu initialisieren schritt 2 einrichten ihres flutter projekts 2 1 erstellen sie ein neues flutter projekt flutter create eco warrior cd eco warrior 2 2 abhängigkeiten hinzufügen öffnen sie pubspec yaml und fügen sie die folgenden abhängigkeiten für parse sdk und flutter dependencies flutter sdk flutter parse server sdk flutter latest version provider ^5 0 0 # state management führen sie flutter pub get aus, um die abhängigkeiten zu installieren 2 3 parse sdk in flutter initialisieren in lib/main dart , initialisieren sie parse, indem sie ihre back4app anmeldeinformationen hinzufügen 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(), ); } } ersetzen sie your back4app app id und your back4app client key durch ihre tatsächlichen back4app anmeldeinformationen schritt 3 spieloberfläche und funktionalität jetzt werden wir die benutzeroberfläche des ecowarrior spiels erstellen und mit back4app integrieren 3 1 erstellen des gamescreens in lib/game screen dart , erstellen sie eine grundlegende spieloberfläche, auf der die spieler umweltaufgaben protokollieren und ihren punktestand anzeigen können 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), ), ], ), ), ); } } schritt 4 abrufen von benutzerdaten von back4app wir werden die gesamtpunktzahl und die aktionen, die der benutzer protokolliert hat, abrufen und anzeigen 4 1 punktestand des spielers vom backend abrufen um den punktestand des spielers zu erhalten, müssen wir alle seine aktionen von back4app abrufen und die gesamtpunktzahl berechnen in lib/game screen dart , aktualisieren sie gamescreenstate um die abruflogik einzuschließen 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; }); } } rufen sie fetchscore() auf, wenn der bildschirm initialisiert wird @override void initstate() { super initstate(); fetchscore(); } schritt 5 das spiel ausführen führen sie die app auf ihrem gerät oder emulator aus der spieler wählt eine aktion aus dem dropdown menü, protokolliert sie und seine punkte werden in back4app gespeichert die gesamtpunktzahl wird von back4app abgerufen und auf dem bildschirm angezeigt schritt 6 das spiel erweitern sie können das ecowarrior spiel erweitern durch hinzufügen weiterer umweltfreundlicher aufgaben und aktionen implementierung eines bestenliste, um die besten umweltfreundlichen spieler anzuzeigen hinzufügen von auszeichnungen für das abschließen einer bestimmten anzahl von aufgaben fazit in diesem tutorial haben wir ein nachhaltiges spiel mit flutter und back4app das spiel ermöglicht es den spielern, umweltfreundliche aktionen zu protokollieren, verfolgt ihren fortschritt mit einem backend und belohnt sie mit punkten mit flutters reichhaltigem ui framework und back4apps skalierbarem backend können sie dieses konzept leicht erweitern, um komplexere und interaktive nachhaltige spiele zu erstellen für weitere informationen flutter dokumentation https //flutter dev/docs back4app dokumentation https //www back4app com/docs