더 많은
Flutter, 구글 월렛 및 백4앱: 환경 보상 앱 튜토리얼

15min
소개
이 튜토리얼에서는 사용자가 환경 행동을 취하도록 장려하는 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 구글 월렛으로 디지털 배지 발급하기
_issueReward() 메서드에서 디지털 배지(일반 패스)를 생성하고 사용자의 구글 월렛에 저장하는 로직을 구현합니다. 기본 구조는 다음과 같습니다:
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에 저장되고, 구글 월렛 API를 사용하여 배지가 발급됩니다.
결론
이 튜토리얼에서는 Flutter, Google Wallet, 및 Back4app을 사용하여 환경 보상 앱을 만드는 방법을 보여주었습니다. 사용자는 환경 행동을 기록하고 완료 시 구글 월렛에 저장된 디지털 배지 또는 이벤트 패스를 받습니다. 이 프로젝트는 소셜 공유 기능, 리더보드 또는 QR 코드를 사용한 위치 기반 보상으로 확장될 수 있습니다.
자세한 내용은 다음을 참조하세요:
﻿Flutter 문서﻿
﻿구글 월렛 API 문서﻿
﻿Back4app 문서﻿
﻿
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Back4app의 백엔드 데이터로 Flutter에서 드롭다운 메뉴 만들기
Flutter와 Back4app을 이용한 지속 가능한 게임 구축