もっと
FlutterとBack4appを使用した持続可能なゲームの構築

15min
はじめに
このチュートリアルでは、 持続可能なゲーム を Flutter と Back4app を使用して構築する方法を説明します。このゲームは、ユーザーに環境に優しい行動を教育し、ポジティブな行動を取ることで報酬を与えます。ユーザーの進捗を追跡し、デジタルアイテムで報酬を与えるために、Back4appをバックエンドサービスとして活用します。
ゲームコンセプト：エコウォリアー
ゲームの名前は エコウォリアー, ユーザーがリサイクル、水の節約、エネルギー消費の削減などの小さな環境タスクを引き受けるゲームです。ユーザーはタスクを完了することでポイントとデジタル報酬を獲得します。私たちは以下に焦点を当てます:
タスクの記録と進捗の追跡: ユーザーは自分が行った環境に優しい行動を記録します。
報酬システム: プレイヤーは貢献に対してポイントとバッジを獲得します。
バックエンド統合: すべてのユーザーデータと進捗は Back4app に保存されます。
前提条件
Flutter開発セットアップ: Flutterインストールガイド.
Back4appアカウント: Back4appに無料アカウントを登録します。
Flutterウィジェットの基本知識とバックエンドとの連携方法。
ステップ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」で、Back4app の資格情報を追加して 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(),
    );
  }
}
﻿
「YOUR_BACK4APP_APP_ID」と「YOUR_BACK4APP_CLIENT_KEY」を実際の Back4app の資格情報に置き換えてください。
ステップ 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、Google Wallet、Back4App：環境報酬アプリチュートリアル
OverlayPortalとBack4app統合を使用してFlutterアプリを構築する