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

はじめに このチュートリアルでは、ユーザーが環境行動を取ることを促し、デジタルバッジやイベントチケットを報酬として提供する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 google walletでデジタルバッジを発行する 「 issuereward() 」メソッドでは、デジタルバッジ（一般的なパス）を作成し、ユーザーのgoogle walletに保存するロジックを実装します。基本的な構造は次のとおりです 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ドキュメント https //flutter dev/docs google wallet apiドキュメント https //developers google com/wallet back4appドキュメント https //www back4app com/docs