Mehr
Sammeln von Benutzerfeedback in Flutter mit der Feedback-Komponente und Speichern von Daten auf Back4app

11min
Einführung
Benutzerfeedback ist entscheidend für Entwickler, um zu verstehen, was in ihrer App gut funktioniert und was verbessert werden muss. Die Implementierung eines Feedback-Mechanismus kann zeitaufwendig sein, aber mit dem feedback-Paket in Flutter können Sie schnell ein Feedback-Panel einrichten, das es Benutzern ermöglicht, Texteingaben und annotierte Screenshots einzureichen. In diesem Tutorial zeigen wir Ihnen, wie Sie diese Feedback-Komponente in Ihre Flutter-App integrieren und das gesammelte Feedback in Back4app speichern.
Voraussetzungen
Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:
Ein Back4app-Konto. Melden Sie sich für ein kostenloses Konto an unter Back4app.com.
Eine Flutter-Entwicklungsumgebung, die auf Ihrem lokalen Computer eingerichtet ist. Folgen Sie der Flutter-Installationsanleitung , wenn Sie sie noch nicht eingerichtet haben.
Grundkenntnisse in Dart, Flutter-Widgets und der Verwendung von Back4app für Backend-Dienste.
Schritt 1 – Einrichten Ihres Back4app-Backends
Erstellen Sie ein Back4app-Projekt: Melden Sie sich bei Ihrem Back4app-Konto an und erstellen Sie ein neues Projekt.
Erstellen Sie Parse-Klassen: Für dieses Tutorial erstellen Sie eine Parse-Klasse mit dem Namen UserFeedback , um das von den Benutzern eingereichte Feedback zu speichern:
benutzername (String): Der Name des Benutzers (optional).
feedbackText (String): Der vom Benutzer bereitgestellte Text-Feedback.
screenshot (Datei): Der vom Benutzer annotierte Screenshot.
Holen Sie sich Ihre Back4app-Anmeldeinformationen: Navigieren Sie zu Ihren Projekteinstellungen, um Ihre Anwendungs-ID und Ihren Client-Schlüssel abzurufen, die Sie benötigen, um Ihre Flutter-App mit Back4app zu verbinden.
Schritt 2 – Einrichten des Flutter-Projekts
Erstellen Sie ein neues Flutter-Projekt: Öffnen Sie Ihr Terminal oder Ihre Eingabeaufforderung und führen Sie aus:
Bash
flutter create feedback_example
flutter create feedback_example
﻿
Abhängigkeiten hinzufügen: Öffnen Sie pubspec.yaml und fügen Sie die folgenden Abhängigkeiten hinzu:
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
﻿
Führen Sie flutter pub get aus, um diese Abhängigkeiten zu installieren.
Initialisieren Sie Parse in Ihrer App: In lib/main.dart, initialisieren Sie das Parse SDK:
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();
  }
}
﻿
Ersetzen Sie 'DEIN_BACK4APP_APP_ID' und 'DEIN_BACK4APP_CLIENT_KEY' durch Ihre tatsächlichen Back4app-Anmeldeinformationen.
Schritt 3 – Implementierung der Feedback-Komponente
Erstellen Sie das FeedbackScreen-Widget: In lib/main.dart, erstellen Sie einen neuen Bildschirm, der es Benutzern ermöglicht, Feedback zu geben:
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'),
        ),
      ),
    );
  }
}
﻿
Dieses Widget zeigt einen einfachen Button an, der beim Drücken das Feedback-Panel öffnet.
Passen Sie das Feedback-Panel an: Sie können das Aussehen und Verhalten des Feedback-Panels anpassen, indem Sie zusätzliche Parameter an das BetterFeedback-Widget übergeben. Zum Beispiel:
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,
  ),
)
﻿
Diese Anpassung ermöglicht es Ihnen, die Farben und den Stil des Feedback-Panels zu ändern, um das Thema Ihrer App anzupassen.
Schritt 4 – Die App ausführen
Führen Sie Ihre App aus mit flutter run. Sie sollten sehen, dass die Feedback-Schaltfläche auf dem Bildschirm angezeigt wird. Ein Klick darauf öffnet das Feedback-Panel, das es dem Benutzer ermöglicht, einen Screenshot zu erfassen, ihn zu annotieren und textuelles Feedback zu geben.
Überprüfen Sie die Daten in Back4app indem Sie sich in Ihr Back4app-Dashboard einloggen und die UserFeedback-Klasse überprüfen. Sie sollten Einträge sehen, die dem Feedback entsprechen, das aus der Flutter-App eingereicht wurde, einschließlich des Textes und des Screenshots.
Fazit
In diesem Tutorial haben wir gezeigt, wie man eine Feedback-Komponente in eine Flutter-App integriert, indem wir das feedback-Paket verwendet haben. Wir haben auch gezeigt, wie man das gesammelte Feedback, einschließlich annotierter Screenshots, in Back4app speichert. Diese Einrichtung ermöglicht es Ihnen, schnell wertvolle Einblicke von Ihren Benutzern zu sammeln, die Ihnen helfen, Ihre App basierend auf ihrem Feedback zu verbessern.
Für weitere Informationen zur Verwendung von Flutter-Widgets, schauen Sie sich die Flutter-Dokumentation, und für Tipps zur Backend-Integration besuchen Sie die Back4app-Dokumentation. Viel Spaß beim Programmieren!
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man segmentierte Schaltflächen in Flutter mit Back4app verwendet
ALS NÄCHSTES
Verstehen von Mustererkennung in Flutter mit dem Back4app-Backend