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

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 https //flutter dev/docs/get started/install back4app konto melden sie sich bei back4app https //www back4app com an zugriff auf die google wallet api richten sie ihr projekt ein, indem sie die dokumentation zur google wallet api https //developers google com/wallet 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 https //www back4app com/ 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 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 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 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 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 https //developers google com/wallet 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 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 https //flutter dev/docs google wallet api dokumentation https //developers google com/wallet back4app dokumentation https //www back4app com/docs