Di più
Crea un gioco sostenibile utilizzando Flutter e Back4app

15min
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.
Account Back4app: Registrati per un account gratuito su Back4app.
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 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
Bash
flutter create eco_warrior
cd eco_warrior
flutter create eco_warrior
cd eco_warrior
﻿
2.2 Aggiungi dipendenze
Apri pubspec.yaml e aggiungi le seguenti dipendenze per Parse SDK e 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
﻿
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:
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(),
    );
  }
}
﻿
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.
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),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
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:
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;
    });
  }
}
﻿
Chiama _fetchScore() quando la schermata è inizializzata:
Dart
@override
void initState() {
  super.initState();
  _fetchScore();
}
@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﻿
﻿Documentazione di Back4app﻿
﻿
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Flutter, Google Wallet e Back4App: Tutorial per un'app di ricompense ambientali
AVANTI IL PROSSIMO
Crea un'app Flutter con integrazione OverlayPortal e Back4app