Flutter、Google Wallet 和 Back4App：环境奖励应用程序教程

介绍 在本教程中，我们将创建一个flutter应用程序，鼓励用户采取环保行动，并通过数字徽章和存储在 google wallet 中的活动门票来奖励他们。我们将集成 back4app 作为后端来管理用户数据和跟踪环保贡献。每当用户完成一项任务时，他们将获得一个可收集的徽章或活动门票，可以添加到他们的google wallet中以便保存。 功能 用户可以记录环保任务（例如，回收、志愿服务）。 用户根据他们的贡献获得数字徽章和活动通行证。 google wallet存储和显示这些数字资产。 与back4app的后端集成，用于跟踪和数据管理。 先决条件 flutter开发环境 请遵循 flutter安装指南 https //flutter dev/docs/get started/install 。 back4app账户 请在 back4app https //www back4app com 注册。 google wallet api访问 按照 google wallet api文档 https //developers google com/wallet 设置您的项目。 google wallet api密钥 生成并使用访问google wallet所需的api密钥。 步骤 1：将 back4app 设置为后端 1 1 创建 back4app 项目 登录到 back4app https //www back4app com/ 并创建一个新项目。 创建一个名为 environmentalactions 的 parse 类，包含以下字段： 用户名 (字符串)：用户的用户名。 行动类型 (字符串)：环境行动的类型（例如，回收、植树）。 时间戳 (日期时间)：用户完成行动的日期。 奖励发放 (布尔值)：是否已为该行动发放奖励。 1 2 向 back4app 添加示例数据 您可以添加一些示例记录以供测试，但应用程序将在用户完成任务时处理数据输入。 步骤 2：在 flutter 中初始化 parse sdk 2 1 创建一个新的 flutter 项目 打开终端并创建一个新的 flutter 项目： flutter create env rewards app 2 2 添加依赖项 打开 pubspec 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 运行 flutter pub get 来安装这些包 2 3 在主文件中初始化 parse sdk 在 lib/main dart , 通过添加您的 back4app 凭据来初始化 parse sdk： 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(), ); } } 替换 your back4app app id 和 your back4app client key 为您的实际 back4app 凭据。 步骤 3：构建环境行动记录的用户界面 我们将创建一个基本的用户界面，允许用户记录他们的环境行动并查看他们的数字奖励。 3 1 创建 environmentalrewardsscreen 小部件 在 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)), ], ), ), ); } } 此用户界面允许用户： 输入他们的用户名。 选择一个环境行动。 记录该行动，这会触发后端并使用 google wallet api 发放奖励。 步骤 4：集成 google wallet 以发放奖励 4 1 设置 google wallet api 按照 google wallet api 文档 https //developers google com/wallet 设置 api 并获取您的 api 密钥。 4 2 使用 google wallet 发放数字徽章 在 issuereward() 方法中，您将实现创建数字徽章（通用通行证）并将其保存到用户的 google wallet 的逻辑。以下是基本结构： 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 '), )); } } 步骤 5：运行应用程序 使用 flutter run 运行应用程序以开始记录操作并接收奖励。 当用户记录一个操作时，它将被保存到 back4app，并使用 google wallet api 发放徽章。 结论 本教程展示了如何使用 flutter , google wallet , 和 back4app 构建环保奖励应用程序。用户记录环保行动，完成后，他们会收到存储在 google wallet 中的数字徽章或活动通行证。该项目可以扩展社交分享功能、排行榜，甚至使用二维码进行基于位置的奖励。 有关更多信息，请参阅： flutter 文档 https //flutter dev/docs google wallet api 文档 https //developers google com/wallet back4app 文档 https //www back4app com/docs