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 доступ к api google wallet настройте свой проект, следуя документации по api google wallet https //developers google com/wallet ключи api google wallet сгенерируйте и используйте необходимые ключи api для доступа к google wallet шаг 1 настройка back4app в качестве бэкенда 1 1 создание проекта back4app войдите в back4app https //www back4app com/ и создайте новый проект создайте класс parse под названием environmentalactions с следующими полями имя пользователя (string) имя пользователя тип действия (string) тип экологического действия (например, переработка, посадка деревьев) временная метка (datetime) дата, когда пользователь завершил действие выданная награда (boolean) выдана ли награда за действие 1 2 добавить образцы данных в back4app вы можете добавить несколько образцов записей для тестирования, но приложение будет обрабатывать ввод данных позже, когда пользователи выполнят задачи шаг 2 инициализация parse sdk в flutter 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 , инициализируйте parse sdk, добавив ваши учетные данные 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(), ); } } замените 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)), ], ), ), ); } } этот интерфейс позволяет пользователю ввести свое имя пользователя выбрать экологическое действие зарегистрировать действие, что запускает серверную часть и выдает вознаграждение с использованием api google wallet шаг 4 интеграция google wallet для выдачи вознаграждений 4 1 настройка api google wallet следуйте за документацией api google wallet 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, и значок будет выдан с помощью api google wallet заключение этот учебник показал, как создать приложение для экологических вознаграждений с использованием flutter , google wallet , и back4app пользователи регистрируют экологические действия, и по завершении они получают цифровые значки или пропуска событий, хранящиеся в их google wallet этот проект можно расширить функциями социального обмена, таблицами лидеров или даже вознаграждениями на основе местоположения с использованием qr кодов для получения дополнительной информации смотрите документация flutter https //flutter dev/docs документация api google wallet https //developers google com/wallet документация back4app https //www back4app com/docs