Más
Flutter, Google Wallet y Back4App: Tutorial de aplicación de recompensas ambientales

15min
Introducción
En este tutorial, crearemos una aplicación Flutter que anima a los usuarios a tomar acciones ambientales, recompensándolos con insignias digitales y entradas para eventos almacenadas en Google Wallet. Integraremos Back4app como el backend para gestionar los datos de los usuarios y rastrear las contribuciones ambientales. Cada vez que un usuario completa una tarea, recibe una insignia coleccionable o una entrada para un evento, que puede añadirse a su Google Wallet para su resguardo.
Características
Los usuarios pueden registrar tareas ambientales (por ejemplo, reciclaje, voluntariado).
Los usuarios ganan insignias digitales y pases para eventos según sus contribuciones.
Google Wallet almacena y muestra estos activos digitales.
Integración de backend con Back4app para el seguimiento y la gestión de datos.
Requisitos previos
Entorno de desarrollo de Flutter: Sigue la guía de instalación de Flutter.
Cuenta de Back4app: Regístrate en Back4app.
Acceso a la API de Google Wallet: Configura tu proyecto siguiendo la documentación de la API de Google Wallet.
Claves de API de Google Wallet: Genera y utiliza las claves de API necesarias para acceder a Google Wallet.
Paso 1: Configuración de Back4app como Backend
1.1 Crear un Proyecto en Back4app
Inicia sesión en Back4app y crea un nuevo proyecto.
Crea una Clase Parse llamada EnvironmentalActions con los siguientes campos:
nombreDeUsuario (String): El nombre de usuario del usuario.
tipoDeAcción (String): Tipo de acción ambiental (por ejemplo, Reciclaje, Plantación de árboles).
marcaDeTiempo (DateTime): La fecha en que el usuario completó la acción.
recompensaEmitida (Boolean): Si se ha emitido una recompensa por la acción.
1.2 Agregar Datos de Ejemplo a Back4app
Puedes agregar algunos registros de ejemplo para fines de prueba, pero la aplicación manejará la entrada de datos más tarde cuando los usuarios completen tareas.
Paso 2: Inicializar el SDK de Parse en Flutter
2.1 Crear un Nuevo Proyecto de Flutter
Abre tu terminal y crea un nuevo proyecto de Flutter:
Bash
flutter create env_rewards_app
flutter create env_rewards_app
﻿
2.2 Agregar Dependencias
Abre el pubspec.yaml archivo y agrega las dependencias requeridas:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  http: ^0.13.3 # For networking
  google_wallet_pass: latest_version # Example package to handle Google Wallet Passes
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  http: ^0.13.3 # For networking
  google_wallet_pass: latest_version # Example package to handle Google Wallet Passes
﻿
Ejecuta flutter pub get para instalar los paquetes.
2.3 Inicializar el SDK de Parse en el Archivo Principal
En lib/main.dart, inicializa el SDK de 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: 'Environmental Rewards',
      home: EnvironmentalRewardsScreen(),
    );
  }
}
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: 'Environmental Rewards',
      home: EnvironmentalRewardsScreen(),
    );
  }
}
﻿
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: 'Environmental Rewards',
      home: EnvironmentalRewardsScreen(),
    );
  }
}
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: 'Environmental Rewards',
      home: EnvironmentalRewardsScreen(),
    );
  }
}
﻿
Reemplace YOUR_BACK4APP_APP_ID y YOUR_BACK4APP_CLIENT_KEY con sus credenciales reales de Back4app.
Paso 3: Construir la interfaz de usuario para registrar acciones ambientales
Crearemos una interfaz de usuario básica que permita a los usuarios registrar sus acciones ambientales y ver sus recompensas digitales.
3.1 Crear el Widget EnvironmentalRewardsScreen
Crea un nuevo widget en lib/environmental_rewards_screen.dart:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:intl/intl.dart'; // For formatting dates

class EnvironmentalRewardsScreen extends StatefulWidget {
  @override
  _EnvironmentalRewardsScreenState createState() => _EnvironmentalRewardsScreenState();
}

class _EnvironmentalRewardsScreenState extends State<EnvironmentalRewardsScreen> {
  final TextEditingController _usernameController = TextEditingController();
  String? _selectedAction;
  bool _loading = false;
  String? _rewardMessage;

  final List<String> _actions = ['Recycling', 'Tree Planting', 'Volunteering'];

  Future<void> _logAction() async {
    if (_usernameController.text.isEmpty || _selectedAction == null) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Please enter a username and select an action.'),
      ));
      return;
    }

    setState(() {
      _loading = true;
    });

    // Save action to Back4app
    final actionObject = ParseObject('EnvironmentalActions')
      ..set('username', _usernameController.text)
      ..set('actionType', _selectedAction)
      ..set('timestamp', DateTime.now())
      ..set('rewardIssued', false);

    final response = await actionObject.save();

    if (response.success) {
      setState(() {
        _rewardMessage = 'Action logged! Check your rewards!';
      });
      // Call Google Wallet API to issue a reward here
      await _issueReward();
    } else {
      setState(() {
        _rewardMessage = 'Failed to log action.';
      });
    }

    setState(() {
      _loading = false;
    });
  }

  Future<void> _issueReward() async {
    // This is where you'd integrate the Google Wallet API to issue a digital badge
    // Use the Google Wallet SDK to generate a pass and add it to the user's wallet
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Environmental Rewards')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            SizedBox(height: 16),
            DropdownButton<String>(
              value: _selectedAction,
              hint: Text('Select an environmental action'),
              items: _actions.map((String action) {
                return DropdownMenuItem<String>(
                  value: action,
                  child: Text(action),
                );
              }).toList(),
              onChanged: (String? newValue) {
                setState(() {
                  _selectedAction = newValue!;
                });
              },
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _loading ? null : _logAction,
              child: _loading ? CircularProgressIndicator() : Text('Log Action'),
            ),
            SizedBox(height: 16),
            if (_rewardMessage != null)
              Text(_rewardMessage!, style: TextStyle(color: Colors.green)),
          ],
        ),
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:intl/intl.dart'; // For formatting dates

class EnvironmentalRewardsScreen extends StatefulWidget {
  @override
  _EnvironmentalRewardsScreenState createState() => _EnvironmentalRewardsScreenState();
}

class _EnvironmentalRewardsScreenState extends State<EnvironmentalRewardsScreen> {
  final TextEditingController _usernameController = TextEditingController();
  String? _selectedAction;
  bool _loading = false;
  String? _rewardMessage;

  final List<String> _actions = ['Recycling', 'Tree Planting', 'Volunteering'];

  Future<void> _logAction() async {
    if (_usernameController.text.isEmpty || _selectedAction == null) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Please enter a username and select an action.'),
      ));
      return;
    }

    setState(() {
      _loading = true;
    });

    // Save action to Back4app
    final actionObject = ParseObject('EnvironmentalActions')
      ..set('username', _usernameController.text)
      ..set('actionType', _selectedAction)
      ..set('timestamp', DateTime.now())
      ..set('rewardIssued', false);

    final response = await actionObject.save();

    if (response.success) {
      setState(() {
        _rewardMessage = 'Action logged! Check your rewards!';
      });
      // Call Google Wallet API to issue a reward here
      await _issueReward();
    } else {
      setState(() {
        _rewardMessage = 'Failed to log action.';
      });
    }

    setState(() {
      _loading = false;
    });
  }

  Future<void> _issueReward() async {
    // This is where you'd integrate the Google Wallet API to issue a digital badge
    // Use the Google Wallet SDK to generate a pass and add it to the user's wallet
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Environmental Rewards')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            SizedBox(height: 16),
            DropdownButton<String>(
              value: _selectedAction,
              hint: Text('Select an environmental action'),
              items: _actions.map((String action) {
                return DropdownMenuItem<String>(
                  value: action,
                  child: Text(action),
                );
              }).toList(),
              onChanged: (String? newValue) {
                setState(() {
                  _selectedAction = newValue!;
                });
              },
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _loading ? null : _logAction,
              child: _loading ? CircularProgressIndicator() : Text('Log Action'),
            ),
            SizedBox(height: 16),
            if (_rewardMessage != null)
              Text(_rewardMessage!, style: TextStyle(color: Colors.green)),
          ],
        ),
      ),
    );
  }
}
﻿
Esta interfaz de usuario permite al usuario:
Ingresar su nombre de usuario.
Seleccionar una acción ambiental.
Registrar la acción, lo que activa el backend y emite una recompensa utilizando la API de Google Wallet.
Paso 4: Integrar Google Wallet para Emitir Recompensas
4.1 Configurar la API de Google Wallet
Sigue la documentación de la API de Google Wallet para configurar la API y obtener tus claves de API.
4.2 Emitir una Insignia Digital con Google Wallet
En el _issueReward() método, implementarás la lógica para crear una insignia digital (pase genérico) y guardarla en la Google Wallet del usuario. Aquí hay una estructura básica:
Dart
Future<void> _issueReward() async {
  final badgeData = {
    'title': 'Environmental Hero',
    'description': 'Awarded for completing environmental actions.',
    // Add any additional information or metadata
  };

  // Call Google Wallet API to generate a pass
  // You can use the 'google_wallet_pass' package or direct API calls
  final response = await createGoogleWalletPass(badgeData); // Placeholder for actual implementation

  if (response.success) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text('Badge issued! Check your Google Wallet.'),
    ));
  } else {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text('Failed to issue badge.'),
    ));
  }
}
Future<void> _issueReward() async {
  final badgeData = {
    'title': 'Environmental Hero',
    'description': 'Awarded for completing environmental actions.',
    // Add any additional information or metadata
  };

  // Call Google Wallet API to generate a pass
  // You can use the 'google_wallet_pass' package or direct API calls
  final response = await createGoogleWalletPass(badgeData); // Placeholder for actual implementation

  if (response.success) {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text('Badge issued! Check your Google Wallet.'),
    ));
  } else {
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(
      content: Text('Failed to issue badge.'),
    ));
  }
}
﻿
Paso 5: Ejecutar la Aplicación
Ejecuta la aplicación usando flutter run para comenzar a registrar acciones y recibir recompensas.
Cuando un usuario registra una acción, se guardará en Back4app, y se emitirá una insignia utilizando la API de Google Wallet.
Conclusión
Este tutorial mostró cómo construir una aplicación de recompensas ambientales usando Flutter, Google Wallet, y Back4app. Los usuarios registran acciones ambientales, y al completarlas, reciben insignias digitales o pases de eventos almacenados en su Google Wallet. Este proyecto podría ampliarse con funciones de compartir en redes sociales, tablas de clasificación, o incluso recompensas basadas en ubicación usando códigos QR.
Para más información, consulta:
﻿Documentación de Flutter﻿
﻿Documentación de la API de Google Wallet﻿
﻿Documentación de Back4app﻿
﻿
Actualizado 20 Jan 2025
¿Esta página le fue útil?
Construyendo Menús Desplegables en Flutter con Datos de Backend de Back4app
Construyendo un juego sostenible utilizando Flutter y Back4app