Raccolta del feedback degli utenti in Flutter utilizzando il componente Feedback e archiviazione dei dati su Back4app

11min
Introduzione
Il feedback degli utenti è essenziale per gli sviluppatori per capire cosa funziona bene nella loro app e cosa necessita di miglioramenti. Implementare un meccanismo di feedback può richiedere tempo, ma con il feedback pacchetto in Flutter, puoi rapidamente impostare un pannello di feedback che consente agli utenti di inviare input testuali e screenshot annotati. In questo tutorial, ti mostreremo come integrare questo componente di feedback nella tua app Flutter e memorizzare il feedback raccolto in Back4app.
Requisiti
Prima di iniziare, assicurati di avere quanto segue:
Un account Back4app. Registrati per un account gratuito su Back4app.com.
Un ambiente di sviluppo Flutter configurato sul tuo computer locale. Segui la guida all'installazione di Flutter se non l'hai ancora configurato.
Conoscenze di base di Dart, dei widget Flutter e dell'uso di Back4app per i servizi backend.
Passo 1 – Configurare il tuo backend Back4app
Crea un Progetto Back4app: Accedi al tuo account Back4app e crea un nuovo progetto.
Crea Classi Parse: Per questo tutorial, crea una Classe Parse chiamata UserFeedback per memorizzare il feedback inviato dagli utenti:
username (String): Il nome dell'utente (opzionale).
feedbackText (String): Il feedback testuale fornito dall'utente.
screenshot (File): Lo screenshot annotato dall'utente.
Ottieni le tue Credenziali Back4app: Naviga nelle impostazioni del tuo progetto per recuperare il tuo ID Applicazione e la Chiave Client, che ti serviranno per connettere la tua app Flutter a Back4app.
Passo 2 – Configurazione del Progetto Flutter
Crea un Nuovo Progetto Flutter: Apri il tuo terminale o prompt dei comandi e esegui:
Bash
flutter create feedback_example
flutter create feedback_example
﻿
Aggiungi Dipendenze: Apri pubspec.yaml e aggiungi le seguenti dipendenze:
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
﻿
Esegui flutter pub get per installare queste dipendenze.
Inizializza Parse nella Tua App: In lib/main.dart, inizializza il SDK di 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();
  }
}
﻿
Sostituisci 'IL_TUO_BACK4APP_APP_ID' e 'IL_TUO_BACK4APP_CLIENT_KEY' con le tue credenziali effettive di Back4app.
Passo 3 – Implementazione del Componente di Feedback
Crea il Widget FeedbackScreen: In lib/main.dart, crea una nuova schermata che consenta agli utenti di inviare feedback:
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'),
        ),
      ),
    );
  }
}
﻿
Questo widget visualizza un semplice pulsante che, quando premuto, apre il pannello di feedback.
Personalizza il Pannello di Feedback: Puoi personalizzare l'aspetto e il comportamento del pannello di feedback passando parametri aggiuntivi al BetterFeedback widget. Ad esempio:
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,
  ),
)
﻿
Questa personalizzazione ti consente di cambiare i colori e lo stile del pannello di feedback per adattarlo al tema della tua app.
Passo 4 – Esecuzione dell'app
Esegui la tua app utilizzando flutter run. Dovresti vedere il pulsante di Feedback visualizzato sullo schermo. Cliccandolo si aprirà il pannello di feedback, consentendo all'utente di catturare uno screenshot, annotarlo e fornire un feedback testuale.
Verifica i dati in Back4app accedendo al tuo dashboard di Back4app e controllando la UserFeedback classe. Dovresti vedere voci corrispondenti al feedback inviato dall'app Flutter, inclusi il testo e lo screenshot.
Conclusione
In questo tutorial, abbiamo dimostrato come integrare un componente di feedback in un'app Flutter utilizzando il feedback pacchetto. Abbiamo anche mostrato come memorizzare il feedback raccolto, inclusi gli screenshot annotati, in Back4app. Questa configurazione ti consente di raccogliere rapidamente preziose informazioni dai tuoi utenti, aiutandoti a migliorare la tua app in base al loro feedback.
Per ulteriori informazioni sull'uso dei widget Flutter, dai un'occhiata alla documentazione di Flutter, e per suggerimenti sull'integrazione del backend, visita la documentazione di Back4app. Buon coding!
Aggiornato 23 Jan 2025
Questa pagina ti è stata di aiuto?
Come utilizzare i pulsanti segmentati in Flutter con Back4App?
AVANTI IL PROSSIMO
Comprendere il pattern matching in Flutter utilizzando il backend di Back4app