Больше
Flutter, Google Wallet и Back4App: Учебник по приложению для экологических наград

15min
Введение
В этом учебном пособии мы создадим приложение Flutter, которое побуждает пользователей принимать экологические меры, вознаграждая их цифровыми значками и билетами на мероприятия, хранящимися в Google Wallet. Мы интегрируем Back4app в качестве бэкенда для управления данными пользователей и отслеживания экологических вкладов. Каждый раз, когда пользователь выполняет задачу, он получает коллекционный значок или билет на мероприятие, который можно добавить в их Google Wallet для безопасного хранения.
Особенности
Пользователи могут регистрировать экологические задачи (например, переработка, волонтерство).
Пользователи зарабатывают цифровые значки и пропуска на мероприятия в зависимости от их вкладов.
Google Wallet хранит и отображает эти цифровые активы.
Интеграция бэкенда с Back4app для отслеживания и управления данными.
Предварительные требования
Среда разработки Flutter: Следуйте руководству по установке Flutter.
Учетная запись Back4app: Зарегистрируйтесь на Back4app.
Доступ к API Google Wallet: Настройте свой проект, следуя документации по API Google Wallet.
Ключи API Google Wallet: Сгенерируйте и используйте необходимые ключи API для доступа к Google Wallet.
Шаг 1: Настройка Back4app в качестве бэкенда
1.1 Создание проекта Back4app
Войдите в Back4app и создайте новый проект.
Создайте класс Parse под названием EnvironmentalActions с следующими полями:
имя пользователя (String): Имя пользователя.
тип действия (String): Тип экологического действия (например, переработка, посадка деревьев).
временная метка (DateTime): Дата, когда пользователь завершил действие.
выданная награда (Boolean): Выдана ли награда за действие.
1.2 Добавить образцы данных в Back4app
Вы можете добавить несколько образцов записей для тестирования, но приложение будет обрабатывать ввод данных позже, когда пользователи выполнят задачи.
Шаг 2: Инициализация Parse SDK в Flutter
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, инициализируйте Parse SDK, добавив ваши учетные данные Back4app:
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(),
    );
  }
}
﻿
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: Создание пользовательского интерфейса для регистрации экологических действий
Мы создадим базовый пользовательский интерфейс, который позволит пользователям регистрировать свои экологические действия и просматривать свои цифровые награды.
3.1 Создайте виджет EnvironmentalRewardsScreen
Создайте новый виджет в 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)),
          ],
        ),
      ),
    );
  }
}
﻿
Этот интерфейс позволяет пользователю:
Ввести свое имя пользователя.
Выбрать экологическое действие.
Зарегистрировать действие, что запускает серверную часть и выдает вознаграждение с использованием API Google Wallet.
Шаг 4: Интеграция Google Wallet для выдачи вознаграждений
4.1 Настройка API Google Wallet
Следуйте за документацией API Google Wallet для настройки API и получения ваших ключей 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, и значок будет выдан с помощью API Google Wallet.
Заключение
Этот учебник показал, как создать приложение для экологических вознаграждений с использованием Flutter, Google Wallet, и Back4app. Пользователи регистрируют экологические действия, и по завершении они получают цифровые значки или пропуска событий, хранящиеся в их Google Wallet. Этот проект можно расширить функциями социального обмена, таблицами лидеров или даже вознаграждениями на основе местоположения с использованием QR-кодов.
Для получения дополнительной информации смотрите:
﻿Документация Flutter﻿
﻿Документация API Google Wallet﻿
﻿Документация Back4app﻿
﻿
Обновлено 20 Jan 2025
Помогла ли вам эта страница?
Создание выпадающих меню в Flutter с данными из Back4app
Создание устойчивой игры с использованием Flutter и Back4app