More
Mengumpulkan Umpan Balik Pengguna di Flutter Menggunakan Komponen Umpan Balik dan Menyimpan Data di Back4app
11 mnt
pendahuluan umpan balik pengguna sangat penting bagi pengembang untuk memahami apa yang berfungsi dengan baik di aplikasi mereka dan apa yang perlu diperbaiki menerapkan mekanisme umpan balik bisa memakan waktu, tetapi dengan paket feedback di flutter, anda dapat dengan cepat menyiapkan panel umpan balik yang memungkinkan pengguna untuk mengirimkan masukan teks dan tangkapan layar yang dianotasi dalam tutorial ini, kami akan menunjukkan kepada anda cara mengintegrasikan komponen umpan balik ini ke dalam aplikasi flutter anda dan menyimpan umpan balik yang dikumpulkan di back4app prasyarat sebelum memulai, pastikan anda memiliki hal hal berikut akun back4app daftar untuk akun gratis di back4app com https //www back4app com lingkungan pengembangan flutter yang disiapkan di mesin lokal anda ikuti panduan instalasi flutter https //flutter dev/docs/get started/install jika anda belum menyiapkannya pengetahuan dasar tentang dart, widget flutter, dan menggunakan back4app untuk layanan backend langkah 1 – menyiapkan backend back4app anda buat proyek back4app masuk ke akun back4app anda https //www back4app com/ dan buat proyek baru buat kelas parse untuk tutorial ini, buat kelas parse bernama userfeedback untuk menyimpan umpan balik yang dikirimkan oleh pengguna username (string) nama pengguna (opsional) feedbacktext (string) teks umpan balik yang diberikan oleh pengguna screenshot (file) tangkapan layar yang dianotasi oleh pengguna dapatkan kredensial back4app anda arahkan ke pengaturan proyek anda untuk mengambil id aplikasi dan kunci klien anda, yang akan anda perlukan untuk menghubungkan aplikasi flutter anda ke back4app langkah 2 – menyiapkan proyek flutter buat proyek flutter baru buka terminal atau command prompt anda dan jalankan flutter create feedback example tambahkan dependensi buka pubspec yaml dan tambahkan dependensi berikut dependencies flutter sdk flutter feedback latest version parse server sdk flutter latest version jalankan flutter pub get untuk menginstal dependensi ini inisialisasi parse di aplikasi anda di lib/main dart , inisialisasi sdk parse 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(); } } ganti 'your back4app app id' dan 'your back4app client key' dengan kredensial back4app anda yang sebenarnya langkah 3 – mengimplementasikan komponen umpan balik buat widget feedbackscreen di lib/main dart , buat layar baru yang memungkinkan pengguna untuk mengirim umpan balik 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 ini menampilkan tombol sederhana yang, ketika ditekan, membuka panel umpan balik kustomisasi panel umpan balik anda dapat menyesuaikan penampilan dan perilaku panel umpan balik dengan mengirimkan parameter tambahan ke betterfeedback widget misalnya betterfeedback( child materialapp( home feedbackscreen(), ), onfeedbacksubmitted sendfeedbacktobackend, feedbacktheme feedbackthemedata( background colors grey\[900], feedbacksheetcolor colors white, activecolor colors blue, drawingcolor colors red, ), ) kustomisasi ini memungkinkan anda untuk mengubah warna dan gaya panel umpan balik agar sesuai dengan tema aplikasi anda langkah 4 – menjalankan aplikasi jalankan aplikasi anda menggunakan flutter run anda seharusnya melihat tombol umpan balik ditampilkan di layar mengkliknya akan membuka panel umpan balik, memungkinkan pengguna untuk menangkap tangkapan layar, memberi anotasi, dan memberikan umpan balik teks verifikasi data di back4app dengan masuk ke dasbor back4app anda dan memeriksa userfeedback kelas anda seharusnya melihat entri yang sesuai dengan umpan balik yang dikirim dari aplikasi flutter, termasuk teks dan tangkapan layar kesimpulan dalam tutorial ini, kami menunjukkan cara mengintegrasikan komponen umpan balik ke dalam aplikasi flutter menggunakan feedback paket kami juga menunjukkan cara menyimpan umpan balik yang dikumpulkan, termasuk tangkapan layar yang dianotasi, di back4app pengaturan ini memungkinkan anda untuk dengan cepat mengumpulkan wawasan berharga dari pengguna anda, membantu anda meningkatkan aplikasi anda berdasarkan umpan balik mereka untuk informasi lebih lanjut tentang menggunakan widget flutter, lihat dokumentasi flutter https //flutter dev/docs , dan untuk tips integrasi backend, kunjungi dokumentasi back4app https //www back4app com/docs selamat coding!