Flutter, Google Wallet, และ Back4App: บทแนะนำแอปพลิเคชันรางวัลด้านสิ่งแวดล้อม

บทนำ ในบทเรียนนี้ เราจะสร้างแอป flutter ที่กระตุ้นให้ผู้ใช้ทำกิจกรรมด้านสิ่งแวดล้อม โดยให้รางวัลเป็นเหรียญดิจิทัลและบัตรเข้าร่วมงานที่เก็บไว้ใน google wallet เราจะรวม back4app เป็นแบ็กเอนด์เพื่อจัดการข้อมูลผู้ใช้และติดตามการมีส่วนร่วมด้านสิ่งแวดล้อม ทุกครั้งที่ผู้ใช้ทำงานเสร็จ พวกเขาจะได้รับเหรียญสะสมหรือบัตรเข้าร่วมงาน ซึ่งสามารถเพิ่มลงใน google wallet ของพวกเขาเพื่อเก็บรักษาได้ ฟีเจอร์ ผู้ใช้สามารถบันทึกงานด้านสิ่งแวดล้อม (เช่น การรีไซเคิล การอาสาสมัคร) ผู้ใช้จะได้รับเหรียญดิจิทัลและบัตรเข้าร่วมงานตามการมีส่วนร่วมของพวกเขา google wallet เก็บและแสดงสินทรัพย์ดิจิทัลเหล่านี้ การรวมแบ็กเอนด์กับ back4app สำหรับการติดตามและการจัดการข้อมูล ข้อกำหนดเบื้องต้น สภาพแวดล้อมการพัฒนา flutter ทำตาม คู่มือการติดตั้ง flutter https //flutter dev/docs/get started/install บัญชี back4app ลงทะเบียนที่ back4app https //www back4app com การเข้าถึง google wallet api ตั้งค่าโครงการของคุณโดยทำตาม เอกสาร api ของ google wallet https //developers google com/wallet คีย์ api ของ google wallet สร้างและใช้คีย์ api ที่จำเป็นสำหรับการเข้าถึง google wallet ขั้นตอนที่ 1 การตั้งค่า back4app เป็น backend 1 1 สร้างโปรเจกต์ back4app ลงชื่อเข้าใช้ที่ back4app https //www back4app com/ และสร้างโปรเจกต์ใหม่ สร้างคลาส parse ชื่อ environmentalactions โดยมีฟิลด์ดังต่อไปนี้ ชื่อผู้ใช้ (string) ชื่อผู้ใช้ของผู้ใช้ ประเภทการกระทำ (string) ประเภทของการกระทำด้านสิ่งแวดล้อม (เช่น การรีไซเคิล, การปลูกต้นไม้) เวลาที่บันทึก (datetime) วันที่ผู้ใช้ทำการกระทำเสร็จสิ้น รางวัลที่ออก (boolean) ว่ามีการออกของรางวัลสำหรับการกระทำหรือไม่ 1 2 เพิ่มข้อมูลตัวอย่างไปยัง back4app คุณสามารถเพิ่มบันทึกตัวอย่างบางรายการเพื่อการทดสอบได้ แต่แอปจะจัดการการป้อนข้อมูลในภายหลังเมื่อผู้ใช้ทำงานเสร็จ ขั้นตอนที่ 2 เริ่มต้น parse sdk ใน flutter 2 1 สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลของคุณและสร้างโปรเจกต์ flutter ใหม่ flutter create env rewards app 2 2 เพิ่ม dependencies เปิดไฟล์ pubspec yaml และเพิ่ม dependencies ที่จำเป็น 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 รัน flutter pub get เพื่อติดตั้งแพ็กเกจ 2 3 เริ่มต้น parse sdk ในไฟล์หลัก ใน lib/main dart , เริ่มต้น parse sdk โดยการเพิ่มข้อมูลประจำตัว 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 'environmental rewards', home environmentalrewardsscreen(), ); } } แทนที่ your back4app app id และ your back4app client key ด้วยข้อมูลรับรอง back4app ที่แท้จริงของคุณ ขั้นตอนที่ 3 สร้าง ui สำหรับการบันทึกการกระทำด้านสิ่งแวดล้อม เราจะสร้าง ui พื้นฐานที่อนุญาตให้ผู้ใช้บันทึกการกระทำด้านสิ่งแวดล้อมและดูรางวัลดิจิทัลของพวกเขา 3 1 สร้างวิดเจ็ต environmentalrewardsscreen สร้างวิดเจ็ตใหม่ใน 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)), ], ), ), ); } } ui นี้อนุญาตให้ผู้ใช้ ป้อนชื่อผู้ใช้ของตน เลือกการกระทำด้านสิ่งแวดล้อม บันทึกการกระทำ ซึ่งจะกระตุ้น backend และออกของรางวัลโดยใช้ google wallet api ขั้นตอนที่ 4 การรวม google wallet เพื่อออกของรางวัล 4 1 ตั้งค่า google wallet api ติดตาม เอกสาร api ของ google wallet https //developers google com/wallet เพื่อตั้งค่า api และรับคีย์ api ของคุณ 4 2 ออกบัตรดิจิทัลด้วย google wallet ใน issuereward() วิธีการ คุณจะดำเนินการตรรกะในการสร้างบัตรดิจิทัล (พาสทั่วไป) และบันทึกลงใน google wallet ของผู้ใช้ นี่คือโครงสร้างพื้นฐาน 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 '), )); } } ขั้นตอนที่ 5 รันแอป รันแอปโดยใช้ flutter run เพื่อเริ่มบันทึกการดำเนินการและรับรางวัล เมื่อผู้ใช้บันทึกการดำเนินการ มันจะถูกบันทึกลงใน back4app และจะมีการออกบัตรโดยใช้ google wallet api บทสรุป บทเรียนนี้แสดงให้เห็นวิธีการสร้างแอปพลิเคชันรางวัลด้านสิ่งแวดล้อมโดยใช้ flutter , google wallet , และ back4app ผู้ใช้บันทึกการดำเนินการด้านสิ่งแวดล้อม และเมื่อเสร็จสิ้น พวกเขาจะได้รับบัตรดิจิทัลหรือพาสกิจกรรมที่เก็บไว้ใน google wallet ของพวกเขา โครงการนี้สามารถขยายได้ด้วยฟีเจอร์การแชร์ทางสังคม, กระดานผู้นำ, หรือแม้แต่รางวัลตามสถานที่โดยใช้ qr codes สำหรับข้อมูลเพิ่มเติม โปรดดูที่ เอกสาร flutter https //flutter dev/docs เอกสาร google wallet api https //developers google com/wallet เอกสาร back4app https //www back4app com/docs