Flutter, Google Wallet e Back4App: Tutorial per un'app di ricompense ambientali

15min
Introduzione
In questo tutorial, creeremo un'app Flutter che incoraggia gli utenti a intraprendere azioni ambientali, premiandoli con badge digitali e biglietti per eventi memorizzati in Google Wallet. Integreremo Back4app come backend per gestire i dati degli utenti e monitorare i contributi ambientali. Ogni volta che un utente completa un compito, riceve un badge collezionabile o un biglietto per eventi, che può essere aggiunto al proprio Google Wallet per la conservazione.
Caratteristiche
Gli utenti possono registrare compiti ambientali (ad es., riciclaggio, volontariato).
Gli utenti guadagnano badge digitali e pass per eventi in base ai loro contributi.
Google Wallet memorizza e visualizza questi beni digitali.
Integrazione backend con Back4app per monitoraggio e gestione dei dati.
Requisiti
Ambiente di sviluppo Flutter: Segui la guida all'installazione di Flutter.
Account Back4app: Registrati su Back4app.
Accesso all'API di Google Wallet: Configura il tuo progetto seguendo la documentazione dell'API di Google Wallet.
Chiavi API di Google Wallet: Genera e utilizza le chiavi API necessarie per accedere a Google Wallet.
Passo 1: Configurare Back4app come Backend
1.1 Crea un Progetto Back4app
Accedi a Back4app e crea un nuovo progetto.
Crea una Classe Parse chiamata EnvironmentalActions con i seguenti campi:
username (String): Il nome utente dell'utente.
actionType (String): Tipo di azione ambientale (es. Riciclaggio, Piantumazione di alberi).
timestamp (DateTime): La data in cui l'utente ha completato l'azione.
rewardIssued (Boolean): Se è stata emessa una ricompensa per l'azione.
1.2 Aggiungi Dati di Esempio a Back4app
Puoi aggiungere alcuni record di esempio per scopi di test, ma l'app gestirà l'inserimento dei dati più tardi quando gli utenti completano i compiti.
Passo 2: Inizializza il Parse SDK in Flutter
2.1 Crea un Nuovo Progetto Flutter
Apri il tuo terminale e crea un nuovo progetto Flutter:
Bash
flutter create env_rewards_app
flutter create env_rewards_app
﻿
2.2 Aggiungi Dipendenze
Apri il pubspec.yaml file e aggiungi le dipendenze richieste:
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
﻿
Esegui flutter pub get per installare i pacchetti.
2.3 Inizializza il Parse SDK nel File Principale
In lib/main.dart, inizializza il Parse SDK 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: '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(),
    );
  }
}
﻿
Sostituisci YOUR_BACK4APP_APP_ID e YOUR_BACK4APP_CLIENT_KEY con le tue credenziali effettive di Back4app.
Passo 3: Costruire l'interfaccia utente per registrare azioni ambientali
Creeremo un'interfaccia utente di base che consente agli utenti di registrare le loro azioni ambientali e visualizzare le loro ricompense digitali.
3.1 Crea il Widget EnvironmentalRewardsScreen
Crea un nuovo widget in 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)),
          ],
        ),
      ),
    );
  }
}
﻿
Questa interfaccia utente consente all'utente di:
Inserire il proprio nome utente.
Selezionare un'azione ambientale.
Registrare l'azione, che attiva il backend e emette una ricompensa utilizzando l'API di Google Wallet.
Passo 4: Integrazione di Google Wallet per l'emissione di ricompense
4.1 Configurare l'API di Google Wallet
Segui la documentazione dell'API di Google Wallet per configurare l'API e ottenere le tue chiavi API.
4.2 Emissione di un Badge Digitale con Google Wallet
Nel metodo _issueReward() implementerai la logica per creare un badge digitale (pass generico) e salvarlo nel Google Wallet dell'utente. Ecco una struttura di base:
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.'),
    ));
  }
}
﻿
Passo 5: Esecuzione dell'App
Esegui l'app utilizzando flutter run per iniziare a registrare azioni e ricevere ricompense.
Quando un utente registra un'azione, verrà salvata su Back4app e un badge verrà emesso utilizzando l'API di Google Wallet.
Conclusione
Questo tutorial ha mostrato come costruire un'app di ricompense ambientali utilizzando Flutter, Google Wallet, e Back4app. Gli utenti registrano azioni ambientali e, al termine, ricevono badge digitali o pass per eventi memorizzati nel loro Google Wallet. Questo progetto potrebbe essere ampliato con funzionalità di condivisione sociale, classifiche o anche ricompense basate sulla posizione utilizzando codici QR.
Per ulteriori informazioni, fare riferimento a:
﻿Documentazione di Flutter﻿
﻿Documentazione API di Google Wallet﻿
﻿Documentazione di Back4app﻿
﻿
Aggiornato 20 Jan 2025
Questa pagina ti è stata di aiuto?
Build a dropdown menu in Flutter with backend data from Back4app
AVANTI IL PROSSIMO
Crea un gioco sostenibile utilizzando Flutter e Back4app