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

15min
소개
이 튜토리얼에서는 지속 가능한 게임을 Flutter와 Back4app을 사용하여 만드는 방법을 안내합니다. 이 게임은 사용자에게 친환경 행동에 대해 교육하고 환경을 위한 긍정적인 행동을 취할 때 보상을 제공합니다. 우리는 사용자 진행 상황을 추적하고 디지털 아이템으로 보상하는 등의 백엔드 서비스에 Back4app을 활용할 것입니다.
게임 개념: 에코전사
게임의 이름은 에코전사, 사용자가 재활용, 물 절약, 에너지 소비 감소와 같은 작은 환경 작업을 수행하는 게임입니다. 사용자는 작업을 완료할 때 포인트와 디지털 보상을 받게 됩니다. 우리는 다음에 집중할 것입니다:
작업 기록 및 진행 상황 추적: 사용자는 자신이 수행한 친환경 행동을 기록합니다.
보상 시스템: 플레이어는 자신의 기여에 대해 포인트와 배지를 얻습니다.
백엔드 통합: 모든 사용자 데이터와 진행 상황은 Back4app에 저장됩니다.
전제 조건
플러터 개발 설정: 다음을 따르세요 플러터 설치 가이드.
Back4app 계정: Back4app에서 무료 계정을 등록하세요.
플러터 위젯에 대한 기본 지식과 백엔드 작업 방법.
1단계: Back4app 설정하기
1.1 Back4app 프로젝트 만들기
 Back4app에 로그인하고 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 프로젝트 만들기
Bash
flutter create eco_warrior
cd eco_warrior
flutter create eco_warrior
cd eco_warrior
﻿
2.2 의존성 추가
다음 의존성을 추가하려면 pubspec.yaml을 열고 Parse SDK 및 Flutter을 추가하세요:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  provider: ^5.0.0  # State management
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를 초기화하세요:
Dart
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(),
    );
  }
}
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, 플레이어가 환경 작업을 기록하고 점수를 볼 수 있는 기본 게임 인터페이스를 만듭니다.
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),
            ),
          ],
        ),
      ),
    );
  }
}
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를 업데이트하여 가져오기 로직을 포함합니다:
Dart
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;
    });
  }
}
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()를 호출합니다:
Dart
@override
void initState() {
  super.initState();
  _fetchScore();
}
@override
void initState() {
  super.initState();
  _fetchScore();
}
﻿
5단계: 게임 실행하기
앱을 기기나 에뮬레이터에서 실행하세요:
플레이어는 드롭다운에서 행동을 선택하고, 이를 기록하며, 그들의 점수가 Back4app에 저장됩니다.
총 점수는 Back4app에서 가져와 화면에 표시됩니다.
6단계: 게임 확장하기
다음과 같이 EcoWarrior 게임을 확장할 수 있습니다:
더 많은 환경 작업과 행동 추가하기.
최고의 친환경 플레이어를 보여주는 리더보드 구현하기.
특정 수의 작업을 완료했을 때 성과 추가하기.
결론
이 튜토리얼에서는 Flutter와 Back4app을 사용하여 지속 가능한 게임을 만들었습니다. 이 게임은 플레이어가 친환경 행동을 기록하고, 백엔드를 사용하여 진행 상황을 추적하며, 점수로 보상합니다. Flutter의 풍부한 UI 프레임워크와 Back4app의 확장 가능한 백엔드를 통해 이 개념을 쉽게 확장하여 더 복잡하고 상호작용적인 지속 가능한 게임을 만들 수 있습니다.
자세한 정보는 다음을 참조하세요:
﻿Flutter 문서﻿
﻿Back4app 문서﻿
﻿
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter, 구글 월렛 및 백4앱: 환경 보상 앱 튜토리얼
OverlayPortal 및 Back4app 통합으로 Flutter 앱 구축