Flutter, 구글 월렛 및 백4앱: 환경 보상 앱 튜토리얼

소개 이 튜토리얼에서는 사용자가 환경 행동을 취하도록 장려하는 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 클래스를 만드세요 username (문자열) 사용자의 사용자 이름 actiontype (문자열) 환경 행동의 유형 (예 재활용, 나무 심기) timestamp (날짜/시간) 사용자가 행동을 완료한 날짜 rewardissued (부울) 행동에 대한 보상이 발급되었는지 여부 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단계 환경 행동 기록을 위한 ui 구축 사용자가 환경 행동을 기록하고 디지털 보상을 볼 수 있는 기본 ui를 만들 것입니다 3 1 환경 보상 화면 위젯 만들기 새로운 위젯을 생성하세요 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)), ], ), ), ); } } 이 ui는 사용자가 다음을 수행할 수 있도록 합니다 사용자 이름을 입력합니다 환경 행동을 선택합니다 행동을 기록하여 백엔드를 트리거하고 google wallet api를 사용하여 보상을 발급합니다 4단계 보상 발급을 위한 google wallet 통합 4 1 google wallet api 설정 api를 설정하고 api 키를 얻으려면 google wallet api 문서 https //developers google com/wallet 를 따르세요 4 2 구글 월렛으로 디지털 배지 발급하기 issuereward() 메서드에서 디지털 배지(일반 패스)를 생성하고 사용자의 구글 월렛에 저장하는 로직을 구현합니다 기본 구조는 다음과 같습니다 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를 사용하여 배지가 발급됩니다 결론 이 튜토리얼에서는 flutter , google wallet , 및 back4app 을 사용하여 환경 보상 앱을 만드는 방법을 보여주었습니다 사용자는 환경 행동을 기록하고 완료 시 구글 월렛에 저장된 디지털 배지 또는 이벤트 패스를 받습니다 이 프로젝트는 소셜 공유 기능, 리더보드 또는 qr 코드를 사용한 위치 기반 보상으로 확장될 수 있습니다 자세한 내용은 다음을 참조하세요 flutter 문서 https //flutter dev/docs 구글 월렛 api 문서 https //developers google com/wallet back4app 문서 https //www back4app com/docs