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

введение в этом учебном пособии мы пройдем через процесс создания устойчивой игры с использованием flutter и back4app эта игра будет обучать пользователей экологически чистым действиям и вознаграждать их за положительные действия в отношении окружающей среды мы будем использовать back4app для бэкенд сервисов, таких как отслеживание прогресса пользователей и вознаграждение их цифровыми предметами концепция игры ecowarrior игра будет называться ecowarrior , где пользователи выполняют небольшие экологические задачи, такие как переработка, экономия воды и снижение потребления энергии пользователи будут зарабатывать очки и цифровые награды по мере выполнения задач мы сосредоточимся на регистрация задач и отслеживание прогресса пользователи регистрируют экологически чистые действия, которые они предпринимают система вознаграждений игроки зарабатывают очки и значки за свои вклады интеграция бэкенда все данные пользователей и прогресс будут храниться в back4app предварительные требования настройка разработки flutter следуйте за руководством по установке flutter https //flutter dev/docs/get started/install аккаунт back4app зарегистрируйтесь для бесплатного аккаунта на back4app https //www back4app com/ базовые знания о виджетах flutter и о том, как работать с бэкендом шаг 1 настройка back4app 1 1 создание проекта back4app войдите в back4app https //www back4app com/ и создайте новый проект бэкенда под названием ecowarriorgame создайте класс parse под названием ecoactions с следующими полями имя пользователя (string) имя пользователя игрока тип действия (string) тип действия (например, "переработка", "сохранение воды") очки (number) очки, присуждаемые за действие временная метка (datetime) время, когда действие было зарегистрировано 1 2 настройка ваших учетных данных back4app перейдите в настройки вашего проекта back4app и получите ваш id приложения и ключ клиента эти данные будут использоваться для инициализации back4app в flutter шаг 2 настройка вашего проекта flutter 2 1 создание нового проекта flutter flutter create eco warrior cd eco warrior 2 2 добавление зависимостей откройте pubspec yaml и добавьте следующие зависимости для parse sdk и flutter 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 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 , создайте базовый интерфейс игры, где игроки могут регистрировать экологические задачи и просматривать свой счет 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 чтобы включить логику получения 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() при инициализации экрана @override void initstate() { super initstate(); fetchscore(); } шаг 5 запуск игры запустите приложение на вашем устройстве или эмуляторе игрок выберет действие из выпадающего списка, зафиксирует его, и их очки будут сохранены в back4app общая сумма очков будет получена из back4app и отображена на экране шаг 6 расширение игры вы можете расширить игру ecowarrior следующим образом добавление большего количества экологических задач и действий реализация таблицы лидеров для отображения лучших экологически чистых игроков добавление достижений за выполнение определенного количества задач заключение в этом учебном пособии мы создали устойчивую игру с использованием flutter и back4app игра позволяет игрокам фиксировать экологически чистые действия, отслеживает их прогресс с помощью бэкенда и вознаграждает их очками с богатым ui фреймворком flutter и масштабируемым бэкендом back4app вы можете легко расширить эту концепцию, чтобы создать более сложные и интерактивные устойчивые игры для получения дополнительной информации документация flutter https //flutter dev/docs документация back4app https //www back4app com/docs