Lebih
Membangun Game Berkelanjutan Menggunakan Flutter dan Back4app

15min
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.
Akun Back4app: Daftar untuk akun gratis di Back4app.
Pengetahuan dasar tentang widget Flutter dan cara bekerja dengan backend.
Langkah 1: Siapkan Back4app
1.1 Buat Proyek Back4app
Masuk ke Back4app 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
Bash
flutter create eco_warrior
cd eco_warrior
flutter create eco_warrior
cd eco_warrior
﻿
2.2 Tambahkan Dependensi
Buka pubspec.yaml dan tambahkan dependensi berikut untuk Parse SDK dan 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
﻿
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:
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(),
    );
  }
}
﻿
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.
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),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
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:
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;
    });
  }
}
﻿
Panggil _fetchScore() saat layar diinisialisasi:
Dart
@override
void initState() {
  super.initState();
  _fetchScore();
}
@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﻿
﻿Dokumentasi Back4app﻿
﻿
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Flutter, Google Wallet, dan Back4App: Tutorial Aplikasi Reward Lingkungan
BERIKUTNYA
Membangun Aplikasi Flutter dengan Integrasi OverlayPortal dan Back4app