Ein nachhaltiges Spiel mit Flutter und Back4app entwickeln

15min
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.
Back4app-Konto: Melden Sie sich für ein kostenloses Konto bei Back4app.
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 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
Bash
flutter create eco_warrior
cd eco_warrior
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:
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
﻿
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:
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(),
    );
  }
}
﻿
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.
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),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
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:
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;
    });
  }
}
﻿
Rufen Sie _fetchScore() auf, wenn der Bildschirm initialisiert wird:
Dart
@override
void initState() {
  super.initState();
  _fetchScore();
}
@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﻿
﻿Back4app-Dokumentation﻿
﻿
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Flutter, Google Wallet und Back4App: Anleitung zur Umweltbelohnungs-App
ALS NÄCHSTES
Erstellen einer Flutter-App mit OverlayPortal und Back4app-Integration