もっと
Flutter、Google Wallet、Back4App：環境報酬アプリチュートリアル

14min
はじめに
このチュートリアルでは、ユーザーが環境行動を取ることを促し、デジタルバッジやイベントチケットを報酬として提供するFlutterアプリを作成します。これらはGoogle Walletに保存されます。ユーザーデータを管理し、環境への貢献を追跡するために、Back4appをバックエンドとして統合します。ユーザーがタスクを完了するたびに、収集可能なバッジやイベントチケットを受け取り、それをGoogle Walletに追加して保管できます。
機能
ユーザーは環境タスク（例：リサイクル、ボランティア）を記録できます。
ユーザーは貢献に基づいてデジタルバッジやイベントパスを獲得します。
Google Walletはこれらのデジタル資産を保存し、表示します。
データ管理と追跡のためのBack4appとのバックエンド統合。
前提条件
Flutter開発環境: Flutterインストールガイドに従ってください。
Back4appアカウント: Back4appにサインアップしてください。
Google Wallet APIアクセス: Google Wallet APIドキュメントに従ってプロジェクトを設定してください。
Google Wallet APIキー: Google Walletにアクセスするために必要なAPIキーを生成して使用してください。
ステップ 1: Back4app をバックエンドとして設定する
1.1 Back4app プロジェクトを作成する
にサインインします Back4app そして新しいプロジェクトを作成します。
次のフィールドを持つ EnvironmentalActions という Parse クラスを作成します:
username (文字列): ユーザーのユーザー名。
actionType (文字列): 環境行動のタイプ (例: リサイクル、植樹)。
timestamp (日付時刻): ユーザーがアクションを完了した日付。
rewardIssued (ブール): アクションに対して報酬が発行されたかどうか。
1.2 Back4app にサンプルデータを追加する
テスト目的でいくつかのサンプルレコードを追加できますが、アプリはユーザーがタスクを完了したときにデータ入力を処理します。
ステップ 2: Flutter で Parse SDK を初期化する
2.1 新しい Flutter プロジェクトを作成する
ターミナルを開いて、新しい Flutter プロジェクトを作成します:
Bash
flutter create env_rewards_app
flutter create env_rewards_app
﻿
2.2 依存関係を追加する
 pubspec.yaml ファイルを開いて、必要な依存関係を追加します:
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
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 を初期化します:
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: '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: 環境行動のログ用UIを構築する
ユーザーが自分の環境行動を記録し、デジタル報酬を表示できる基本的なUIを作成します。
3.1 環境報酬画面ウィジェットを作成する
新しいウィジェットを作成します lib/environmental_rewards_screen.dart:
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)),
          ],
        ),
      ),
    );
  }
}
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のドキュメントを参照してください。
4.2 Google Walletでデジタルバッジを発行する
「_issueReward()」メソッドでは、デジタルバッジ（一般的なパス）を作成し、ユーザーのGoogle Walletに保存するロジックを実装します。基本的な構造は次のとおりです:
Dart
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.'),
    ));
  }
}
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に保存され、Google Wallet APIを使用してバッジが発行されます。
結論
このチュートリアルでは、Flutter、Google Wallet、およびBack4appを使用して環境報酬アプリを構築する方法を示しました。ユーザーは環境行動を記録し、完了すると、Google Walletに保存されたデジタルバッジやイベントパスを受け取ります。このプロジェクトは、ソーシャル共有機能、リーダーボード、またはQRコードを使用した位置情報ベースの報酬で拡張できます。
詳細については、次を参照してください:
﻿Flutterドキュメント﻿
﻿Google Wallet APIドキュメント﻿
﻿Back4appドキュメント﻿
﻿
更新日 24 Jan 2025
このページは役に立ちましたか？
FlutterでBack4appからのバックエンドデータを使用したドロップダウンメニューの作成
FlutterとBack4appを使用した持続可能なゲームの構築