Construire un jeu durable en utilisant Flutter et Back4app

15min
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.
Compte Back4app: Inscrivez-vous pour un compte gratuit sur Back4app.
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 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
Bash
flutter create eco_warrior
cd eco_warrior
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:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  provider: ^5.0.0  # State management
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 :
Dart
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(),
    );
  }
}
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.
Dart
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),
            ),
          ],
        ),
      ),
    );
  }
}
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 :
Dart
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;
    });
  }
}
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é :
Dart
@override
void initState() {
  super.initState();
  _fetchScore();
}
@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﻿
﻿Documentation Back4app﻿
﻿
Mis à jour 23 Jan 2025
Cette page vous a-t-elle aidée?
Flutter, Google Wallet et Back4App : Tutoriel sur l'application de récompenses environnementales
Construire une application Flutter avec OverlayPortal et intégration de Back4app