Membangun Game Berkelanjutan Menggunakan Flutter dan Back4app

pendahuluan dalam tutorial ini, kita akan membahas cara membangun sebuah permainan berkelanjutan menggunakan flutter dan back4app permainan ini akan mendidik pengguna tentang perilaku ramah lingkungan dan memberi mereka penghargaan atas tindakan positif untuk lingkungan kita akan memanfaatkan back4app untuk layanan backend, seperti melacak kemajuan pengguna dan memberi mereka hadiah digital konsep permainan ecowarrior permainan ini akan disebut ecowarrior , di mana pengguna melakukan tugas tugas kecil terkait lingkungan seperti mendaur ulang, menghemat air, dan mengurangi konsumsi energi pengguna akan mendapatkan poin dan hadiah digital saat mereka menyelesaikan tugas kita akan fokus pada pencatatan tugas dan pelacakan kemajuan pengguna mencatat tindakan ramah lingkungan yang mereka lakukan sistem penghargaan pemain mendapatkan poin dan lencana untuk kontribusi mereka integrasi backend semua data pengguna dan kemajuan akan disimpan di back4app prasyarat pengaturan pengembangan flutter ikuti panduan instalasi flutter https //flutter dev/docs/get started/install akun back4app daftar untuk akun gratis di back4app https //www back4app com/ pengetahuan dasar tentang widget flutter dan cara bekerja dengan backend langkah 1 siapkan back4app 1 1 buat proyek back4app masuk ke back4app https //www back4app com/ dan buat proyek backend baru bernama ecowarriorgame buat kelas parse bernama ecoactions dengan bidang berikut username (string) nama pengguna pemain actiontype (string) jenis tindakan (misalnya, "daur ulang", "konservasi air") points (number) poin yang diberikan untuk tindakan tersebut timestamp (datetime) waktu ketika tindakan dicatat 1 2 siapkan kredensial back4app anda pergi ke pengaturan proyek back4app anda dan dapatkan id aplikasi dan kunci klien ini akan digunakan untuk menginisialisasi back4app di flutter langkah 2 menyiapkan proyek flutter anda 2 1 buat proyek flutter baru flutter create eco warrior cd eco warrior 2 2 tambahkan dependensi buka pubspec yaml dan tambahkan dependensi berikut untuk parse sdk dan flutter dependencies flutter sdk flutter parse server sdk flutter latest version provider ^5 0 0 # state management jalankan flutter pub get untuk menginstal dependensi 2 3 inisialisasi parse sdk di flutter di lib/main dart , inisialisasi parse dengan menambahkan kredensial back4app anda 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(), ); } } ganti your back4app app id dan your back4app client key dengan kredensial back4app anda yang sebenarnya langkah 3 antarmuka dan fungsionalitas game sekarang kita akan membangun antarmuka pengguna dari game ecowarrior dan mengintegrasikannya dengan back4app 3 1 buat gamescreen di lib/game screen dart , buat antarmuka game dasar di mana pemain dapat mencatat tugas lingkungan dan melihat skor mereka 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), ), ], ), ), ); } } langkah 4 mengambil data pengguna dari back4app kami akan mengambil dan menampilkan total skor dan tindakan yang telah dicatat oleh pengguna 4 1 ambil skor pemain dari backend untuk mendapatkan skor pemain, kita perlu mengambil semua tindakan mereka dari back4app dan menghitung total skor di lib/game screen dart , perbarui gamescreenstate untuk menyertakan logika pengambilan 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; }); } } panggil fetchscore() saat layar diinisialisasi @override void initstate() { super initstate(); fetchscore(); } langkah 5 menjalankan permainan jalankan aplikasi di perangkat atau emulator anda pemain akan memilih tindakan dari dropdown, mencatatnya, dan poin mereka akan disimpan ke back4app total skor akan diambil dari back4app dan ditampilkan di layar langkah 6 memperluas permainan anda dapat memperluas permainan ecowarrior dengan menambahkan lebih banyak tugas dan tindakan lingkungan mengimplementasikan papan peringkat untuk menunjukkan pemain ramah lingkungan teratas menambahkan pencapaian untuk menyelesaikan sejumlah tugas tertentu kesimpulan dalam tutorial ini, kami membangun permainan berkelanjutan menggunakan flutter dan back4app permainan ini memungkinkan pemain untuk mencatat tindakan ramah lingkungan, melacak kemajuan mereka menggunakan backend, dan memberi mereka poin dengan kerangka ui yang kaya dari flutter dan backend yang dapat diskalakan dari back4app, anda dapat dengan mudah memperluas konsep ini untuk membangun permainan berkelanjutan yang lebih kompleks dan interaktif untuk informasi lebih lanjut dokumentasi flutter https //flutter dev/docs dokumentasi back4app https //www back4app com/docs