Mengumpulkan Umpan Balik Pengguna di Flutter Menggunakan Komponen Umpan Balik dan Menyimpan Data di Back4app

11min
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.
Lingkungan pengembangan Flutter yang disiapkan di mesin lokal Anda. Ikuti panduan instalasi Flutter 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 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:
Bash
flutter create feedback_example
flutter create feedback_example
﻿
Tambahkan Dependensi: Buka pubspec.yaml dan tambahkan dependensi berikut:
YAML
dependencies:
  flutter:
    sdk: flutter
  feedback: latest_version
  parse_server_sdk_flutter: latest_version
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:
Dart
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();
  }
}
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:
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'),
        ),
      ),
    );
  }
}
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:
Dart
BetterFeedback(
  child: MaterialApp(
    home: FeedbackScreen(),
  ),
  onFeedbackSubmitted: _sendFeedbackToBackend,
  feedbackTheme: FeedbackThemeData(
    background: Colors.grey[900],
    feedbackSheetColor: Colors.white,
    activeColor: Colors.blue,
    drawingColor: Colors.red,
  ),
)
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, dan untuk tips integrasi backend, kunjungi dokumentasi Back4app. Selamat coding!
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Cara Menggunakan Tombol Tersegmentasi di Flutter dengan Back4app
BERIKUTNYA
Memahami Pencocokan Pola di Flutter Menggunakan Backend Back4app