Больше
Создание устойчивой игры с использованием Flutter и Back4app

15min
Введение
В этом учебном пособии мы пройдем через процесс создания устойчивой игры с использованием Flutter и Back4app. Эта игра будет обучать пользователей экологически чистым действиям и вознаграждать их за положительные действия в отношении окружающей среды. Мы будем использовать Back4app для бэкенд-сервисов, таких как отслеживание прогресса пользователей и вознаграждение их цифровыми предметами.
Концепция игры: EcoWarrior
Игра будет называться EcoWarrior, где пользователи выполняют небольшие экологические задачи, такие как переработка, экономия воды и снижение потребления энергии. Пользователи будут зарабатывать очки и цифровые награды по мере выполнения задач. Мы сосредоточимся на:
Регистрация задач и отслеживание прогресса: Пользователи регистрируют экологически чистые действия, которые они предпринимают.
Система вознаграждений: Игроки зарабатывают очки и значки за свои вклады.
Интеграция бэкенда: Все данные пользователей и прогресс будут храниться в Back4app.
Предварительные требования
Настройка разработки Flutter: Следуйте за руководством по установке Flutter.
Аккаунт Back4app: Зарегистрируйтесь для бесплатного аккаунта на Back4app.
Базовые знания о виджетах Flutter и о том, как работать с бэкендом.
Шаг 1: Настройка Back4app
1.1 Создание проекта Back4app
Войдите в Back4app и создайте новый проект бэкенда под названием EcoWarriorGame.
Создайте класс Parse под названием EcoActions с следующими полями:
имя пользователя (String): Имя пользователя игрока.
тип действия (String): Тип действия (например, "Переработка", "Сохранение воды").
очки (Number): Очки, присуждаемые за действие.
временная метка (DateTime): Время, когда действие было зарегистрировано.
1.2 Настройка ваших учетных данных Back4app
Перейдите в настройки вашего проекта Back4app и получите ваш ID приложения и Ключ клиента. Эти данные будут использоваться для инициализации Back4app в Flutter.
Шаг 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 Инициализация Parse SDK в Flutter
В lib/main.dart, инициализируйте Parse, добавив ваши учетные данные 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: '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: Интерфейс и функциональность игры
Теперь мы создадим интерфейс игры EcoWarrior и интегрируем его с 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. Игра позволяет игрокам фиксировать экологически чистые действия, отслеживает их прогресс с помощью бэкенда и вознаграждает их очками. С богатым UI-фреймворком Flutter и масштабируемым бэкендом Back4app вы можете легко расширить эту концепцию, чтобы создать более сложные и интерактивные устойчивые игры.
Для получения дополнительной информации:
﻿Документация Flutter﻿
﻿Документация Back4app﻿
﻿
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Flutter, Google Wallet и Back4App: Учебник по приложению для экологических наград
Создание приложения на Flutter с интеграцией OverlayPortal и Back4app