การเก็บข้อเสนอแนะแบบผู้ใช้ใน Flutter โดยใช้ส่วนประกอบ Feedback และการจัดเก็บข้อมูลบน Back4app

บทนำ ความคิดเห็นจากผู้ใช้เป็นสิ่งสำคัญสำหรับนักพัฒนาในการเข้าใจว่าสิ่งใดทำงานได้ดีในแอปของพวกเขาและสิ่งใดที่ต้องปรับปรุง การนำกลไกการให้ข้อเสนอแนะแบบฟีดแบ็กมาใช้สามารถใช้เวลานาน แต่ด้วย feedback แพ็คเกจใน flutter คุณสามารถตั้งค่าพาเนลฟีดแบ็กได้อย่างรวดเร็วที่อนุญาตให้ผู้ใช้ส่งข้อมูลข้อความและภาพหน้าจอที่มีการทำเครื่องหมาย ในบทแนะนำนี้ เราจะแสดงให้คุณเห็นวิธีการรวมส่วนฟีดแบ็กนี้เข้ากับแอป flutter ของคุณและจัดเก็บฟีดแบ็กที่รวบรวมไว้ใน back4app ข้อกำหนดเบื้องต้น ก่อนเริ่มต้น ให้แน่ใจว่าคุณมีสิ่งต่อไปนี้ บัญชี back4app ลงทะเบียนสำหรับบัญชีฟรีที่ back4app com https //www back4app com ตั้งค่าสภาพแวดล้อมการพัฒนา flutter บนเครื่องของคุณ หากคุณยังไม่ได้ตั้งค่าให้ทำตาม คู่มือการติดตั้ง flutter https //flutter dev/docs/get started/install ความรู้พื้นฐานเกี่ยวกับ dart, วิดเจ็ต flutter และการใช้ back4app สำหรับบริการแบ็กเอนด์ ขั้นตอนที่ 1 – ตั้งค่าแบ็กเอนด์ back4app ของคุณ สร้างโปรเจกต์ back4app เข้าสู่ระบบบัญชี back4app https //www back4app com/ และสร้างโปรเจกต์ใหม่ สร้างคลาส parse สำหรับบทแนะนำนี้ ให้สร้างคลาส parse ชื่อ userfeedback เพื่อจัดเก็บฟีดแบ็กที่ผู้ใช้ส่ง username (string) ชื่อของผู้ใช้ (ไม่บังคับ) feedbacktext (string) ข้อความฟีดแบ็กที่ผู้ใช้ให้ screenshot (file) ภาพหน้าจอที่ผู้ใช้ทำเครื่องหมาย รับข้อมูลประจำตัว back4app ของคุณ ไปที่การตั้งค่าโปรเจกต์ของคุณเพื่อดึงหมายเลขประจำตัวแอปพลิเคชันและคีย์ลูกค้า ซึ่งคุณจะต้องเชื่อมต่อแอป flutter ของคุณกับ back4app ขั้นตอนที่ 2 – การตั้งค่าโปรเจกต์ flutter สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลหรือพรอมต์คำสั่งของคุณและรัน flutter create feedback example เพิ่ม dependencies เปิด pubspec yaml และเพิ่ม dependencies ต่อไปนี้ dependencies flutter sdk flutter feedback latest version parse server sdk flutter latest version รัน flutter pub get เพื่อติดตั้ง dependencies เหล่านี้ เริ่มต้น parse ในแอปของคุณ ใน lib/main dart , เริ่มต้น parse sdk import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ feedback/feedback 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 betterfeedback( child materialapp( home feedbackscreen(), ), onfeedbacksubmitted sendfeedbacktobackend, ); } future\<void> sendfeedbacktobackend(userfeedback feedback) async { final parseobject = parseobject('userfeedback') set('feedbacktext', feedback text) set('screenshot', parsefile(await feedback screenshot)); await parseobject save(); } } แทนที่ 'your back4app app id' และ 'your back4app client key' ด้วยข้อมูลรับรอง back4app ที่แท้จริงของคุณ ขั้นตอนที่ 3 – การนำส่วนประกอบ feedback ไปใช้ สร้าง widget feedbackscreen ใน lib/main dart , สร้างหน้าจอใหม่ที่อนุญาตให้ผู้ใช้ส่งข้อเสนอแนะ class feedbackscreen extends statelesswidget { @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('feedback example')), body center( child elevatedbutton( onpressed () { betterfeedback of(context) show(); }, child text('give feedback'), ), ), ); } } widget นี้แสดงปุ่มง่ายๆ ที่เมื่อกดจะเปิดแผงข้อเสนอแนะ ปรับแต่งแผงข้อเสนอแนะ คุณสามารถปรับแต่งลักษณะและพฤติกรรมของแผงข้อเสนอแนะโดยการส่งพารามิเตอร์เพิ่มเติมไปยัง betterfeedback widget ตัวอย่างเช่น betterfeedback( child materialapp( home feedbackscreen(), ), onfeedbacksubmitted sendfeedbacktobackend, feedbacktheme feedbackthemedata( background colors grey\[900], feedbacksheetcolor colors white, activecolor colors blue, drawingcolor colors red, ), ) การปรับแต่งนี้ช่วยให้คุณเปลี่ยนสีและสไตล์ของแผงความคิดเห็นให้ตรงกับธีมของแอปของคุณ ขั้นตอนที่ 4 – การรันแอป รันแอปของคุณ โดยใช้ flutter run คุณควรเห็นปุ่ม feedback แสดงบนหน้าจอ การคลิกที่มันจะเปิดแผงความคิดเห็น ซึ่งอนุญาตให้ผู้ใช้จับภาพหน้าจอ ทำการบันทึก และให้ความคิดเห็นเป็นข้อความ ตรวจสอบข้อมูลใน back4app โดยการเข้าสู่ระบบในแดชบอร์ด back4app ของคุณและตรวจสอบ userfeedback คลาส คุณควรเห็นรายการที่ตรงกับความคิดเห็นที่ส่งจากแอป flutter รวมถึงข้อความและภาพหน้าจอ บทสรุป ในบทเรียนนี้ เราได้แสดงให้เห็นถึงวิธีการรวมส่วนประกอบความคิดเห็นเข้ากับแอป flutter โดยใช้ feedback แพ็คเกจ เราได้แสดงวิธีการเก็บความคิดเห็นที่รวบรวมได้ รวมถึงภาพหน้าจอที่มีการบันทึกใน back4app การตั้งค่านี้ช่วยให้คุณรวบรวมข้อมูลเชิงลึกที่มีค่าอย่างรวดเร็วจากผู้ใช้ของคุณ ซึ่งช่วยให้คุณปรับปรุงแอปของคุณตามความคิดเห็นของพวกเขา สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้วิดเจ็ต flutter โปรดดูที่ เอกสาร flutter https //flutter dev/docs , และสำหรับเคล็ดลับการรวมระบบแบ็กเอนด์ โปรดเยี่ยมชม เอกสาร back4app https //www back4app com/docs ขอให้สนุกกับการเขียนโค้ด!