Flutter와 Back4app을 이용한 지속 가능한 게임 구축

소개 이 튜토리얼에서는 지속 가능한 게임 을 flutter 와 back4app 을 사용하여 만드는 방법을 안내합니다 이 게임은 사용자에게 친환경 행동에 대해 교육하고 환경을 위한 긍정적인 행동을 취할 때 보상을 제공합니다 우리는 사용자 진행 상황을 추적하고 디지털 아이템으로 보상하는 등의 백엔드 서비스에 back4app을 활용할 것입니다 게임 개념 에코전사 게임의 이름은 에코전사 , 사용자가 재활용, 물 절약, 에너지 소비 감소와 같은 작은 환경 작업을 수행하는 게임입니다 사용자는 작업을 완료할 때 포인트와 디지털 보상을 받게 됩니다 우리는 다음에 집중할 것입니다 작업 기록 및 진행 상황 추적 사용자는 자신이 수행한 친환경 행동을 기록합니다 보상 시스템 플레이어는 자신의 기여에 대해 포인트와 배지를 얻습니다 백엔드 통합 모든 사용자 데이터와 진행 상황은 back4app 에 저장됩니다 전제 조건 플러터 개발 설정 다음을 따르세요 플러터 설치 가이드 https //flutter dev/docs/get started/install back4app 계정 back4app https //www back4app com/ 에서 무료 계정을 등록하세요 플러터 위젯에 대한 기본 지식과 백엔드 작업 방법 1단계 back4app 설정하기 1 1 back4app 프로젝트 만들기 back4app https //www back4app com/ 에 로그인하고 ecowarriorgame 이라는 새로운 백엔드 프로젝트를 만드세요 다음 필드를 가진 parse class 인 ecoactions 를 만드세요 username (string) 플레이어의 사용자 이름 actiontype (string) 행동의 유형 (예 "재활용", "물 절약") points (number) 행동에 대해 부여된 포인트 timestamp (datetime) 행동이 기록된 시간 1 2 back4app 자격 증명 설정하기 back4app 프로젝트의 설정으로 가서 application id 와 client key 를 가져오세요 이들은 flutter에서 back4app을 초기화하는 데 사용됩니다 2단계 flutter 프로젝트 설정 2 1 새 flutter 프로젝트 만들기 flutter create eco warrior cd eco warrior 2 2 의존성 추가 다음 의존성을 추가하려면 pubspec yaml 을 열고 parse sdk 및 flutter 을 추가하세요 dependencies flutter sdk flutter parse server sdk flutter latest version provider ^5 0 0 # state management 의존성을 설치하려면 flutter pub get 을 실행하세요 2 3 flutter에서 parse sdk 초기화 다음과 같이 lib/main dart 에서 parse를 초기화하세요 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 'ecowarrior game', theme themedata(primaryswatch colors green), home gamescreen(), ); } } 실제 back4app 자격 증명으로 your back4app app id 및 your back4app client key 을(를) 교체하세요 3단계 게임 ui 및 기능 이제 ecowarrior 게임의 ui를 구축하고 back4app과 통합하겠습니다 3 1 게임 화면 만들기 lib/game screen dart , 플레이어가 환경 작업을 기록하고 점수를 볼 수 있는 기본 게임 인터페이스를 만듭니다 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; class gamescreen extends statefulwidget { @override gamescreenstate createstate() => gamescreenstate(); } class gamescreenstate extends state\<gamescreen> { string? selectedaction; int score = 0; final list\<string> actions = \['recycling', 'water conservation', 'energy saving']; future\<void> logaction() async { if ( selectedaction == null) { scaffoldmessenger of(context) showsnackbar(snackbar( content text('please select an action '), )); return; } // assign points for the action int points = 0; switch ( selectedaction) { case 'recycling' points = 10; break; case 'water conservation' points = 15; break; case 'energy saving' points = 20; break; } // save action to back4app final ecoaction = parseobject('ecoactions') set('username', 'player1') // example username set('actiontype', selectedaction) set('points', points) set('timestamp', datetime now()); final response = await ecoaction save(); if (response success) { setstate(() { score += points; }); scaffoldmessenger of(context) showsnackbar(snackbar( content text('action logged! you earned $points points '), )); } else { scaffoldmessenger of(context) showsnackbar(snackbar( content text('failed to log action '), )); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('ecowarrior'), ), body padding( padding const edgeinsets all(16 0), child column( crossaxisalignment crossaxisalignment stretch, children \[ text( 'select an eco friendly action ', style textstyle(fontsize 18), ), dropdownbutton\<string>( value selectedaction, hint text('choose action'), items actions map((string action) { return dropdownmenuitem\<string>( value action, child text(action), ); }) tolist(), onchanged (string? newvalue) { setstate(() { selectedaction = newvalue; }); }, ), sizedbox(height 20), elevatedbutton( onpressed logaction, child text('log action'), ), sizedbox(height 20), text( 'current score $ score', style textstyle(fontsize 20, fontweight fontweight bold), ), ], ), ), ); } } 4단계 back4app에서 사용자 데이터 가져오기 사용자가 기록한 총 점수와 행동을 검색하여 표시합니다 4 1 백엔드에서 플레이어의 점수 가져오기 플레이어의 점수를 얻으려면 back4app 에서 모든 행동을 가져와야 합니다 lib/game screen dart , gamescreenstate 를 업데이트하여 가져오기 로직을 포함합니다 future\<void> fetchscore() async { final query = querybuilder\<parseobject>(parseobject('ecoactions')) whereequalto('username', 'player1'); // example username final response = await query query(); if (response success && response results != null) { int totalscore = 0; for (var result in response results!) { totalscore += result get\<int>('points')!; } setstate(() { score = totalscore; }); } } 화면이 초기화될 때 fetchscore() 를 호출합니다 @override void initstate() { super initstate(); fetchscore(); } 5단계 게임 실행하기 앱을 기기나 에뮬레이터에서 실행하세요 플레이어는 드롭다운에서 행동을 선택하고, 이를 기록하며, 그들의 점수가 back4app 에 저장됩니다 총 점수는 back4app 에서 가져와 화면에 표시됩니다 6단계 게임 확장하기 다음과 같이 ecowarrior 게임을 확장할 수 있습니다 더 많은 환경 작업과 행동 추가하기 최고의 친환경 플레이어를 보여주는 리더보드 구현하기 특정 수의 작업을 완료했을 때 성과 추가하기 결론 이 튜토리얼에서는 flutter 와 back4app 을 사용하여 지속 가능한 게임을 만들었습니다 이 게임은 플레이어가 친환경 행동을 기록하고, 백엔드를 사용하여 진행 상황을 추적하며, 점수로 보상합니다 flutter의 풍부한 ui 프레임워크와 back4app의 확장 가능한 백엔드를 통해 이 개념을 쉽게 확장하여 더 복잡하고 상호작용적인 지속 가능한 게임을 만들 수 있습니다 자세한 정보는 다음을 참조하세요 flutter 문서 https //flutter dev/docs back4app 문서 https //www back4app com/docs