Construire un jeu durable en utilisant Flutter et Back4app

introduction dans ce tutoriel, nous allons expliquer comment construire un jeu durable en utilisant flutter et back4app ce jeu éduquera les utilisateurs sur les comportements écologiques et les récompensera pour avoir pris des mesures positives pour l'environnement nous allons tirer parti de back4app pour les services backend, tels que le suivi des progrès des utilisateurs et la récompense avec des objets numériques concept du jeu ecowarrior le jeu s'appellera ecowarrior , où les utilisateurs accomplissent de petites tâches environnementales comme le recyclage, la conservation de l'eau et la réduction de la consommation d'énergie les utilisateurs gagneront des points et des récompenses numériques en complétant des tâches nous nous concentrerons sur journalisation des tâches et suivi des progrès les utilisateurs enregistrent les actions écologiques qu'ils entreprennent système de récompense les joueurs gagnent des points et des badges pour leurs contributions intégration backend toutes les données et les progrès des utilisateurs seront stockés dans back4app prérequis configuration de développement flutter suivez le guide d'installation de flutter https //flutter dev/docs/get started/install compte back4app inscrivez vous pour un compte gratuit sur back4app https //www back4app com/ connaissances de base des widgets flutter et de la façon de travailler avec un backend étape 1 configurer back4app 1 1 créer un projet back4app connectez vous à back4app https //www back4app com/ et créez un nouveau projet backend appelé ecowarriorgame créez une classe parse appelée ecoactions avec les champs suivants nom d'utilisateur (string) le nom d'utilisateur du joueur typeaction (string) le type d'action (par exemple, "recyclage", "conservation de l'eau") points (nombre) les points attribués pour l'action horodatage (datetime) le moment où l'action a été enregistrée 1 2 configurez vos identifiants back4app allez dans les paramètres de votre projet back4app et obtenez votre id d'application et votre clé client ceux ci seront utilisés pour initialiser back4app dans flutter étape 2 configuration de votre projet flutter 2 1 créer un nouveau projet flutter flutter create eco warrior cd eco warrior 2 2 ajouter des dépendances ouvrez pubspec yaml et ajoutez les dépendances suivantes pour parse sdk et flutter dependencies flutter sdk flutter parse server sdk flutter latest version provider ^5 0 0 # state management exécutez flutter pub get pour installer les dépendances 2 3 initialiser parse sdk dans flutter dans lib/main dart , initialisez parse en ajoutant vos identifiants 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(), ); } } remplacez your back4app app id et your back4app client key par vos véritables identifiants back4app étape 3 interface et fonctionnalité du jeu maintenant, nous allons construire l'interface utilisateur du ecowarrior jeu et l'intégrer avec back4app 3 1 créer l'écran de jeu dans lib/game screen dart , créez une interface de jeu de base où les joueurs peuvent enregistrer des tâches environnementales et voir leur score 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), ), ], ), ), ); } } étape 4 récupération des données utilisateur depuis back4app nous allons récupérer et afficher le score total et les actions que l'utilisateur a enregistrées 4 1 récupérer le score du joueur depuis le backend pour obtenir le score du joueur, nous devons récupérer toutes ses actions depuis back4app et calculer le score total dans lib/game screen dart , mettez à jour gamescreenstate pour inclure la logique de récupération 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; }); } } appelez fetchscore() lorsque l'écran est initialisé @override void initstate() { super initstate(); fetchscore(); } étape 5 exécution du jeu exécutez l'application sur votre appareil ou émulateur le joueur sélectionnera une action dans le menu déroulant, l'enregistrera et ses points seront sauvegardés sur back4app le score total sera récupéré depuis back4app et affiché à l'écran étape 6 élargir le jeu vous pouvez élargir le jeu ecowarrior en ajoutant plus de tâches et d'actions environnementales implémentant un classement pour montrer les meilleurs joueurs éco responsables ajoutant des réalisations pour avoir complété un certain nombre de tâches conclusion dans ce tutoriel, nous avons construit un jeu durable en utilisant flutter et back4app le jeu permet aux joueurs d'enregistrer des actions éco responsables, suit leurs progrès à l'aide d'un backend et les récompense avec des points avec le riche framework ui de flutter et le backend évolutif de back4app, vous pouvez facilement étendre ce concept pour créer des jeux durables plus complexes et interactifs pour plus d'informations documentation flutter https //flutter dev/docs documentation back4app https //www back4app com/docs