Más
Construyendo un juego sostenible utilizando Flutter y Back4app

15min
Introducción
En este tutorial, recorreremos cómo construir un juego sostenible utilizando Flutter y Back4app. Este juego educará a los usuarios sobre comportamientos ecológicos y los recompensará por tomar acciones positivas por el medio ambiente. Aprovecharemos Back4app para servicios de backend, como el seguimiento del progreso de los usuarios y recompensarlos con artículos digitales.
Concepto del juego: EcoWarrior
El juego se llamará EcoWarrior, donde los usuarios asumen pequeñas tareas ambientales como reciclar, ahorrar agua y reducir el consumo de energía. Los usuarios ganarán puntos y recompensas digitales a medida que completen tareas. Nos enfocaremos en:
Registro de tareas y seguimiento del progreso: Los usuarios registran las acciones ecológicas que realizan.
Sistema de recompensas: Los jugadores ganan puntos y medallas por sus contribuciones.
Integración de backend: Todos los datos y el progreso del usuario se almacenarán en Back4app.
Requisitos previos
Configuración de desarrollo de Flutter: Sigue la guía de instalación de Flutter.
Cuenta de Back4app: Regístrate para obtener una cuenta gratuita en Back4app.
Conocimientos básicos de widgets de Flutter y cómo trabajar con un backend.
Paso 1: Configurar Back4app
1.1 Crear un proyecto de Back4app
Inicia sesión en Back4app y crea un nuevo proyecto de backend llamado EcoWarriorGame.
Crea una Clase Parse llamada EcoActions con los siguientes campos:
nombre de usuario (String): El nombre de usuario del jugador.
tipoDeAcción (String): El tipo de acción (por ejemplo, "Reciclaje", "Conservación de Agua").
puntos (Número): Los puntos otorgados por la acción.
marca de tiempo (DateTime): El momento en que se registró la acción.
1.2 Configura tus credenciales de Back4app
Ve a la configuración de tu proyecto de Back4app y obtén tu ID de aplicación y Clave de cliente. Estos se utilizarán para inicializar Back4app en Flutter.
Paso 2: Configuración de tu proyecto Flutter
2.1 Crear un nuevo proyecto Flutter
Bash
flutter create eco_warrior
cd eco_warrior
flutter create eco_warrior
cd eco_warrior
﻿
2.2 Agregar dependencias
Abre pubspec.yaml y agrega las siguientes dependencias para Parse SDK y 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
﻿
Ejecuta flutter pub get para instalar las dependencias.
2.3 Inicializar Parse SDK en Flutter
En lib/main.dart, inicializa Parse agregando tus credenciales de 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(),
    );
  }
}
﻿
Reemplaza YOUR_BACK4APP_APP_ID y YOUR_BACK4APP_CLIENT_KEY con tus credenciales reales de Back4app.
Paso 3: Interfaz y Funcionalidad del Juego
Ahora construiremos la interfaz del EcoWarrior juego e integraremos con Back4app.
3.1 Crear la Pantalla del Juego
En lib/game_screen.dart, crea una interfaz básica del juego donde los jugadores puedan registrar tareas ambientales y ver su puntuación.
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),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
Paso 4: Recuperando Datos de Usuario de Back4app
Recuperaremos y mostraremos la puntuación total y las acciones que el usuario ha registrado.
4.1 Obtener la puntuación del jugador desde el backend
Para obtener la puntuación del jugador, necesitamos recuperar todas sus acciones de Back4app y calcular la puntuación total.
En lib/game_screen.dart, actualiza _GameScreenState para incluir la lógica de recuperación:
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;
    });
  }
}
﻿
Llama a _fetchScore() cuando se inicialice la pantalla:
Dart
@override
void initState() {
  super.initState();
  _fetchScore();
}
@override
void initState() {
  super.initState();
  _fetchScore();
}
﻿
Paso 5: Ejecutando el Juego
Ejecuta la aplicación en tu dispositivo o emulador:
El jugador seleccionará una acción del menú desplegable, la registrará y sus puntos se guardarán en Back4app.
La puntuación total se obtendrá de Back4app y se mostrará en la pantalla.
Paso 6: Ampliando el Juego
Puedes ampliar el EcoWarrior juego al:
Agregar más tareas y acciones ambientales.
Implementar una tabla de clasificación para mostrar a los mejores jugadores ecológicos.
Agregar logros por completar un cierto número de tareas.
Conclusión
En este tutorial, construimos un juego sostenible utilizando Flutter y Back4app. El juego permite a los jugadores registrar acciones ecológicas, rastrear su progreso utilizando un backend y recompensarlos con puntos. Con el rico marco de UI de Flutter y el backend escalable de Back4app, puedes ampliar fácilmente este concepto para construir juegos sostenibles más complejos e interactivos.
Para más información:
﻿Documentación de Flutter﻿
﻿Documentación de Back4app﻿
﻿
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Flutter, Google Wallet y Back4App: Tutorial de aplicación de recompensas ambientales
Construyendo una aplicación Flutter con OverlayPortal e integración de Back4app