Más
Recopilación de Comentarios de Usuarios en Flutter Usando el Componente de Comentarios y Almacenando Datos en Back4app

11min
Introducción
La retroalimentación de los usuarios es esencial para que los desarrolladores comprendan qué funciona bien en su aplicación y qué necesita mejoras. Implementar un mecanismo de retroalimentación puede llevar tiempo, pero con el feedback paquete en Flutter, puedes configurar rápidamente un panel de retroalimentación que permite a los usuarios enviar texto y capturas de pantalla anotadas. En este tutorial, te mostraremos cómo integrar este componente de retroalimentación en tu aplicación Flutter y almacenar la retroalimentación recopilada en Back4app.
Requisitos previos
Antes de comenzar, asegúrate de tener lo siguiente:
Una cuenta de Back4app. Regístrate para obtener una cuenta gratuita en Back4app.com.
Un entorno de desarrollo de Flutter configurado en tu máquina local. Sigue la guía de instalación de Flutter si aún no lo has configurado.
Conocimientos básicos de Dart, widgets de Flutter y uso de Back4app para servicios de backend.
Paso 1 – Configurando tu backend de Back4app
Crea un proyecto de Back4app: Inicia sesión en tu cuenta de Back4app y crea un nuevo proyecto.
Crea clases de Parse: Para este tutorial, crea una clase de Parse llamada UserFeedback para almacenar la retroalimentación enviada por los usuarios:
nombre de usuario (String): El nombre del usuario (opcional).
textoDeRetroalimentación (String): El texto de retroalimentación proporcionado por el usuario.
capturaDePantalla (Archivo): La captura de pantalla anotada por el usuario.
Obtén tus credenciales de Back4app: Navega a la configuración de tu proyecto para recuperar tu ID de aplicación y clave de cliente, que necesitarás para conectar tu aplicación Flutter a Back4app.
Paso 2 – Configuración del Proyecto Flutter
Crear un Nuevo Proyecto Flutter: Abre tu terminal o símbolo del sistema y ejecuta:
Bash
flutter create feedback_example
flutter create feedback_example
﻿
Agregar Dependencias: Abre pubspec.yaml y agrega las siguientes dependencias:
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
﻿
Ejecuta flutter pub get para instalar estas dependencias.
Inicializa Parse en Tu Aplicación: En lib/main.dart, inicializa el SDK de 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();
  }
}
﻿
Reemplaza 'TU_BACK4APP_APP_ID' y 'TU_BACK4APP_CLIENT_KEY' con tus credenciales reales de Back4app.
Paso 3 – Implementando el Componente de Retroalimentación
Crea el Widget FeedbackScreen: En lib/main.dart, crea una nueva pantalla que permita a los usuarios enviar retroalimentación:
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'),
        ),
      ),
    );
  }
}
﻿
Este widget muestra un botón simple que, al presionarlo, abre el panel de retroalimentación.
Personaliza el Panel de Retroalimentación: Puedes personalizar la apariencia y el comportamiento del panel de retroalimentación pasando parámetros adicionales al BetterFeedback widget. Por ejemplo:
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,
  ),
)
﻿
Esta personalización te permite cambiar los colores y el estilo del panel de retroalimentación para que coincida con el tema de tu aplicación.
Paso 4 – Ejecutando la Aplicación
Ejecuta tu aplicación usando flutter run. Deberías ver el botón de Retroalimentación mostrado en la pantalla. Al hacer clic en él, se abrirá el panel de retroalimentación, permitiendo al usuario capturar una captura de pantalla, anotarla y proporcionar comentarios en texto.
Verifica los datos en Back4app iniciando sesión en tu panel de Back4app y revisando la UserFeedback clase. Deberías ver entradas correspondientes a la retroalimentación enviada desde la aplicación Flutter, incluyendo el texto y la captura de pantalla.
Conclusión
En este tutorial, demostramos cómo integrar un componente de retroalimentación en una aplicación Flutter utilizando el feedback paquete. También mostramos cómo almacenar la retroalimentación recopilada, incluyendo capturas de pantalla anotadas, en Back4app. Esta configuración te permite recopilar rápidamente información valiosa de tus usuarios, ayudándote a mejorar tu aplicación en función de sus comentarios.
Para más información sobre el uso de widgets de Flutter, consulta la documentación de Flutter, y para consejos sobre integración de backend, visita la documentación de Back4app. ¡Feliz codificación!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Cómo usar botones segmentados en Flutter con Back4app
Entendiendo la coincidencia de patrones en Flutter utilizando el backend de Back4app