Mehr
Flutter, Google Wallet und Back4App: Anleitung zur Umweltbelohnungs-App

15min
Einführung
In diesem Tutorial erstellen wir eine Flutter-App, die die Benutzer dazu ermutigt, umweltfreundliche Maßnahmen zu ergreifen, und sie mit digitalen Abzeichen und Veranstaltungstickets belohnt, die in Google Wallet gespeichert werden. Wir integrieren Back4app als Backend, um Benutzerdaten zu verwalten und umweltfreundliche Beiträge zu verfolgen. Jedes Mal, wenn ein Benutzer eine Aufgabe abschließt, erhält er ein sammelbares Abzeichen oder Veranstaltungsticket, das zu seinem Google Wallet zur sicheren Aufbewahrung hinzugefügt werden kann.
Funktionen
Benutzer können umweltfreundliche Aufgaben protokollieren (z. B. Recycling, Freiwilligenarbeit).
Benutzer verdienen digitale Abzeichen und Veranstaltungspässe basierend auf ihren Beiträgen.
Google Wallet speichert und zeigt diese digitalen Vermögenswerte an.
Backend-Integration mit Back4app zur Verfolgung und Datenverwaltung.
Voraussetzungen
Flutter-Entwicklungsumgebung: Befolgen Sie die Flutter-Installationsanleitung.
Back4app-Konto: Melden Sie sich bei Back4app an.
Zugriff auf die Google Wallet API: Richten Sie Ihr Projekt ein, indem Sie die Dokumentation zur Google Wallet API befolgen.
Google Wallet API-Schlüssel: Generieren und verwenden Sie die erforderlichen API-Schlüssel für den Zugriff auf Google Wallet.
Schritt 1: Back4app als Backend einrichten
1.1 Erstellen Sie ein Back4app-Projekt
Melden Sie sich bei Back4app an und erstellen Sie ein neues Projekt.
Erstellen Sie eine Parse-Klasse namens EnvironmentalActions mit den folgenden Feldern:
Benutzername (String): Der Benutzername des Benutzers.
Aktionstyp (String): Art der Umweltaktion (z.B. Recycling, Baumpflanzung).
Zeitstempel (DateTime): Das Datum, an dem der Benutzer die Aktion abgeschlossen hat.
BelohnungAusgegeben (Boolean): Ob eine Belohnung für die Aktion ausgegeben wurde.
1.2 Fügen Sie Beispieldaten zu Back4app hinzu
Sie können einige Beispielaufzeichnungen zu Testzwecken hinzufügen, aber die App wird die Dateneingabe später übernehmen, wenn Benutzer Aufgaben abschließen.
Schritt 2: Parse SDK in Flutter initialisieren
2.1 Erstellen Sie ein neues Flutter-Projekt
Öffnen Sie Ihr Terminal und erstellen Sie ein neues Flutter-Projekt:
Bash
flutter create env_rewards_app
flutter create env_rewards_app
﻿
2.2 Abhängigkeiten hinzufügen
Öffnen Sie die pubspec.yaml Datei und fügen Sie die erforderlichen Abhängigkeiten hinzu:
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
﻿
Führen Sie flutter pub get aus, um die Pakete zu installieren.
2.3 Parse SDK in der Hauptdatei initialisieren
In lib/main.dart, initialisieren Sie das Parse SDK, 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: '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(),
    );
  }
}
﻿
Führen Sie flutter pub get aus, um die Pakete zu installieren.
Ersetzen Sie YOUR_BACK4APP_APP_ID und YOUR_BACK4APP_CLIENT_KEY durch Ihre tatsächlichen Back4app-Anmeldeinformationen.
Schritt 3: Erstellen Sie die Benutzeroberfläche zum Protokollieren von Umweltaktionen
Wir werden eine grundlegende Benutzeroberfläche erstellen, die es den Benutzern ermöglicht, ihre Umweltaktionen zu protokollieren und ihre digitalen Belohnungen anzuzeigen.
3.1 Erstellen Sie das EnvironmentalRewardsScreen-Widget
Erstellen Sie ein neues 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)),
          ],
        ),
      ),
    );
  }
}
﻿
Diese Benutzeroberfläche ermöglicht es dem Benutzer:
Geben Sie Ihren Benutzernamen ein.
Wählen Sie eine umweltfreundliche Aktion aus.
Protokollieren Sie die Aktion, die das Backend auslöst und eine Belohnung über die Google Wallet API ausgibt.
Schritt 4: Integration von Google Wallet zur Ausgabe von Belohnungen
4.1 Google Wallet API einrichten
Befolgen Sie die Dokumentation der Google Wallet API um die API einzurichten und Ihre API-Schlüssel zu erhalten.
4.2 Ein digitales Abzeichen mit Google Wallet ausstellen
Im der _issueReward() Methode werden Sie die Logik implementieren, um ein digitales Abzeichen (generischer Pass) zu erstellen und es in der Google Wallet des Benutzers zu speichern. Hier ist eine grundlegende Struktur:
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.'),
    ));
  }
}
﻿
Schritt 5: Die App ausführen
Führen Sie die App mit flutter run aus, um Aktionen zu protokollieren und Belohnungen zu erhalten.
Wenn ein Benutzer eine Aktion protokolliert, wird sie in Back4app gespeichert, und ein Abzeichen wird mit der Google Wallet API ausgestellt.
Fazit
Dieses Tutorial zeigte, wie man eine Umweltbelohnungs-App mit Flutter, Google Wallet, und Back4app. Benutzer protokollieren Umweltaktionen, und nach Abschluss erhalten sie digitale Abzeichen oder Veranstaltungspässe, die in ihrer Google Wallet gespeichert sind. Dieses Projekt könnte mit Funktionen zum sozialen Teilen, Bestenlisten oder sogar standortbasierten Belohnungen mit QR-Codes erweitert werden.
Für weitere Informationen siehe:
﻿Flutter-Dokumentation﻿
﻿Google Wallet API-Dokumentation﻿
﻿Back4app-Dokumentation﻿
﻿
Aktualisiert 20 Jan 2025
Hat Ihnen diese Seite geholfen?
Dropdown-Menüs in Flutter mit Backend-Daten von Back4app erstellen
ALS NÄCHSTES
Ein nachhaltiges Spiel mit Flutter und Back4app entwickeln