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

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 https //flutter dev/docs/get started/install akun back4app daftar di back4app https //www back4app com akses api google wallet siapkan proyek anda dengan mengikuti dokumentasi api google wallet https //developers google com/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 https //www back4app com/ 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 flutter create env rewards app 2 2 tambahkan dependensi buka file pubspec yaml dan tambahkan dependensi yang diperlukan 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 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 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 https //developers google com/wallet 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 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 https //flutter dev/docs dokumentasi api google wallet https //developers google com/wallet dokumentasi back4app https //www back4app com/docs