Flutter, Google Wallet et Back4App : Tutoriel sur l'application de récompenses environnementales

introduction dans ce tutoriel, nous allons créer une application flutter qui encourage les utilisateurs à prendre des actions environnementales, les récompensant avec des badges numériques et des billets d'événements stockés dans google wallet nous intégrerons back4app comme backend pour gérer les données des utilisateurs et suivre les contributions environnementales chaque fois qu'un utilisateur termine une tâche, il reçoit un badge ou un billet d'événement collectible, qui peut être ajouté à son google wallet pour le garder en sécurité fonctionnalités les utilisateurs peuvent enregistrer des tâches environnementales (par exemple, le recyclage, le bénévolat) les utilisateurs gagnent des badges numériques et des passes d'événements en fonction de leurs contributions google wallet stocke et affiche ces actifs numériques intégration backend avec back4app pour le suivi et la gestion des données prérequis environnement de développement flutter suivez le guide d'installation de flutter https //flutter dev/docs/get started/install compte back4app inscrivez vous sur back4app https //www back4app com accès à l'api google wallet configurez votre projet en suivant la documentation de l'api google wallet https //developers google com/wallet clés api google wallet générez et utilisez les clés api requises pour accéder à google wallet étape 1 configuration de back4app en tant que backend 1 1 créer un projet back4app connectez vous à back4app https //www back4app com/ et créez un nouveau projet créez une classe parse appelée environmentalactions avec les champs suivants nom d'utilisateur (string) le nom d'utilisateur de l'utilisateur typeaction (string) type d'action environnementale (par exemple, recyclage, plantation d'arbres) horodatage (datetime) la date à laquelle l'utilisateur a complété l'action récompenseémise (boolean) indique si une récompense a été émise pour l'action 1 2 ajouter des données d'exemple à back4app vous pouvez ajouter quelques enregistrements d'exemple à des fins de test, mais l'application gérera la saisie des données plus tard lorsque les utilisateurs complèteront des tâches étape 2 initialiser le sdk parse dans flutter 2 1 créer un nouveau projet flutter ouvrez votre terminal et créez un nouveau projet flutter flutter create env rewards app 2 2 ajouter des dépendances ouvrez le pubspec yaml fichier et ajoutez les dépendances requises 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 exécutez flutter pub get pour installer les packages 2 3 initialiser le sdk parse dans le fichier principal dans lib/main dart , initialisez le sdk parse en ajoutant vos identifiants back4app 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(), ); } } remplacez your back4app app id et your back4app client key par vos véritables identifiants back4app étape 3 créer l'interface utilisateur pour enregistrer les actions environnementales nous allons créer une interface utilisateur de base qui permet aux utilisateurs d'enregistrer leurs actions environnementales et de voir leurs récompenses numériques 3 1 créer le widget environmentalrewardsscreen créez un nouveau widget dans 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)), ], ), ), ); } } cette interface utilisateur permet à l'utilisateur de entrer leur nom d'utilisateur sélectionner une action environnementale enregistrer l'action, ce qui déclenche le backend et émet une récompense en utilisant l'api google wallet étape 4 intégration de google wallet pour l'émission de récompenses 4 1 configurer l'api google wallet suivez la documentation de l'api google wallet https //developers google com/wallet pour configurer l'api et obtenir vos clés api 4 2 émettre un badge numérique avec google wallet dans la issuereward() méthode, vous allez implémenter la logique pour créer un badge numérique (pass générique) et le sauvegarder dans le google wallet de l'utilisateur voici une structure de base 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 '), )); } } étape 5 exécution de l'application exécutez l'application en utilisant flutter run pour commencer à enregistrer des actions et à recevoir des récompenses lorsqu'un utilisateur enregistre une action, elle sera sauvegardée dans back4app, et un badge sera émis en utilisant l'api google wallet conclusion ce tutoriel a montré comment construire une application de récompenses environnementales en utilisant flutter , google wallet , et back4app les utilisateurs enregistrent des actions environnementales, et à l'achèvement, ils reçoivent des badges numériques ou des passes d'événements stockés dans leur google wallet ce projet pourrait être étendu avec des fonctionnalités de partage social, des classements, ou même des récompenses basées sur la localisation utilisant des codes qr pour plus d'informations, référez vous à documentation flutter https //flutter dev/docs documentation de l'api google wallet https //developers google com/wallet documentation back4app https //www back4app com/docs