Flutter, Google Wallet, dan Back4App: Tutorial Aplikasi Reward Lingkungan

15min
Pendahuluan
Dalam tutorial ini, kita akan membuat aplikasi Flutter yang mendorong pengguna untuk mengambil tindakan lingkungan, memberi mereka penghargaan dengan lencana digital dan tiket acara yang disimpan di Google Wallet. Kita akan mengintegrasikan Back4app sebagai backend untuk mengelola data pengguna dan melacak kontribusi lingkungan. Setiap kali pengguna menyelesaikan tugas, mereka menerima lencana koleksi atau tiket acara, yang dapat ditambahkan ke Google Wallet mereka untuk disimpan.
Fitur
Pengguna dapat mencatat tugas lingkungan (misalnya, daur ulang, sukarela).
Pengguna mendapatkan lencana digital dan tiket acara berdasarkan kontribusi mereka.
Google Wallet menyimpan dan menampilkan aset digital ini.
Integrasi backend dengan Back4app untuk pelacakan dan manajemen data.
Prasyarat
Lingkungan Pengembangan Flutter: Ikuti panduan instalasi Flutter.
Akun Back4app: Daftar di Back4app.
Akses API Google Wallet: Siapkan proyek Anda dengan mengikuti dokumentasi API Google Wallet.
Kunci API Google Wallet: Hasilkan dan gunakan kunci API yang diperlukan untuk mengakses Google Wallet.
Langkah 1: Menyiapkan Back4app sebagai Backend
1.1 Buat Proyek Back4app
Masuk ke Back4app dan buat proyek baru.
Buat Kelas Parse bernama EnvironmentalActions dengan field berikut:
username (String): Nama pengguna.
actionType (String): Jenis tindakan lingkungan (misalnya, Daur ulang, Penanaman pohon).
timestamp (DateTime): Tanggal ketika pengguna menyelesaikan tindakan.
rewardIssued (Boolean): Apakah hadiah telah diberikan untuk tindakan tersebut.
1.2 Tambahkan Data Contoh ke Back4app
Anda dapat menambahkan beberapa catatan contoh untuk tujuan pengujian, tetapi aplikasi akan menangani entri data nanti ketika pengguna menyelesaikan tugas.
Langkah 2: Inisialisasi Parse SDK di Flutter
2.1 Buat Proyek Flutter Baru
Buka terminal Anda dan buat proyek Flutter baru:
Bash
flutter create env_rewards_app
flutter create env_rewards_app
﻿
2.2 Tambahkan Dependensi
Buka file pubspec.yaml dan tambahkan dependensi yang diperlukan:
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
﻿
Jalankan flutter pub get untuk menginstal paket.
2.3 Inisialisasi Parse SDK di File Utama
Di lib/main.dart, inisialisasi Parse SDK 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: '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(),
    );
  }
}
﻿
Ganti YOUR_BACK4APP_APP_ID dan YOUR_BACK4APP_CLIENT_KEY dengan kredensial Back4app Anda yang sebenarnya.
Langkah 3: Membangun UI untuk Mencatat Tindakan Lingkungan
Kami akan membuat UI dasar yang memungkinkan pengguna untuk mencatat tindakan lingkungan mereka dan melihat hadiah digital mereka.
3.1 Buat Widget EnvironmentalRewardsScreen
Buat widget baru di 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)),
          ],
        ),
      ),
    );
  }
}
﻿
Antarmuka pengguna ini memungkinkan pengguna untuk:
Masukkan nama pengguna mereka.
Pilih tindakan lingkungan.
Catat tindakan tersebut, yang memicu backend dan memberikan hadiah menggunakan Google Wallet API.
Langkah 4: Mengintegrasikan Google Wallet untuk Memberikan Hadiah
4.1 Siapkan Google Wallet API
Ikuti dokumentasi Google Wallet API untuk menyiapkan API dan mendapatkan kunci API Anda.
4.2 Mengeluarkan Lencana Digital dengan Google Wallet
Dalam _issueReward() metode, Anda akan mengimplementasikan logika untuk membuat lencana digital (pass generik) dan menyimpannya ke Google Wallet pengguna. Berikut adalah struktur dasar:
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.'),
    ));
  }
}
﻿
Langkah 5: Menjalankan Aplikasi
Jalankan aplikasi menggunakan flutter run untuk mulai mencatat tindakan dan menerima hadiah.
Ketika seorang pengguna mencatat tindakan, itu akan disimpan ke Back4app, dan lencana akan dikeluarkan menggunakan API Google Wallet.
Kesimpulan
Tutorial ini menunjukkan cara membangun aplikasi penghargaan lingkungan menggunakan Flutter, Google Wallet, dan Back4app. Pengguna mencatat tindakan lingkungan, dan setelah selesai, mereka menerima lencana digital atau pass acara yang disimpan di Google Wallet mereka. Proyek ini dapat diperluas dengan fitur berbagi sosial, papan peringkat, atau bahkan penghargaan berbasis lokasi menggunakan kode QR.
Untuk informasi lebih lanjut, lihat:
﻿Dokumentasi Flutter﻿
﻿Dokumentasi API Google Wallet﻿
﻿Dokumentasi Back4app﻿
﻿
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Membangun Menu Dropdown di Flutter dengan Data Backend dari Back4app
BERIKUTNYA
Membangun Game Berkelanjutan Menggunakan Flutter dan Back4app