Больше
Сбор отзывов пользователей в Flutter с использованием компонента обратной связи и хранения данных на Back4app

11min
Введение
Обратная связь пользователей имеет решающее значение для разработчиков, чтобы понять, что хорошо работает в их приложении, а что нуждается в улучшении. Реализация механизма обратной связи может занять много времени, но с помощью пакета feedback в Flutter вы можете быстро настроить панель обратной связи, которая позволяет пользователям отправлять текстовые сообщения и аннотированные скриншоты. В этом руководстве мы покажем вам, как интегрировать этот компонент обратной связи в ваше приложение Flutter и сохранить собранные отзывы в Back4app.
Предварительные требования
Перед началом убедитесь, что у вас есть следующее:
Учетная запись Back4app. Зарегистрируйтесь для получения бесплатной учетной записи на Back4app.com.
Настроенная среда разработки Flutter на вашем локальном компьютере. Следуйте руководству по установке Flutter если вы еще не настроили ее.
Базовые знания Dart, виджетов Flutter и использования Back4app для бэкенд-сервисов.
Шаг 1 – Настройка вашего бэкенда Back4app
Создайте проект Back4app: Войдите в свою учетную запись Back4app и создайте новый проект.
Создайте классы Parse: Для этого руководства создайте класс Parse с именем UserFeedback для хранения отзывов, отправленных пользователями:
username (String): Имя пользователя (необязательно).
feedbackText (String): Текст отзыва, предоставленный пользователем.
screenshot (File): Скриншот, аннотированный пользователем.
Получите свои учетные данные Back4app: Перейдите в настройки вашего проекта, чтобы получить ваш идентификатор приложения и ключ клиента, которые вам понадобятся для подключения вашего приложения Flutter к Back4app.
Шаг 2 – Настройка проекта Flutter
Создайте новый проект Flutter: Откройте ваш терминал или командную строку и выполните:
Bash
flutter create feedback_example
flutter create feedback_example
﻿
Добавьте зависимости: Откройте pubspec.yaml и добавьте следующие зависимости:
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
﻿
Запустите flutter pub get для установки этих зависимостей.
Инициализируйте Parse в вашем приложении: В lib/main.dart, инициализируйте 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();
  }
}
﻿
Замените 'ВАШ_BACK4APP_APP_ID' и 'ВАШ_BACK4APP_CLIENT_KEY' на ваши реальные учетные данные Back4app.
Шаг 3 – Реализация компонента обратной связи
Создайте виджет FeedbackScreen: В lib/main.dart, создайте новый экран, который позволяет пользователям отправлять отзывы:
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'),
        ),
      ),
    );
  }
}
﻿
Этот виджет отображает простую кнопку, которая, при нажатии, открывает панель обратной связи.
Настройте панель обратной связи: Вы можете настроить внешний вид и поведение панели обратной связи, передав дополнительные параметры в виджет BetterFeedback. Например:
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,
  ),
)
﻿
Эта настройка позволяет вам изменить цвета и стиль панели обратной связи, чтобы они соответствовали теме вашего приложения.
Шаг 4 – Запуск приложения
Запустите ваше приложение с помощью flutter run. Вы должны увидеть кнопку обратной связи на экране. Нажатие на нее откроет панель обратной связи, позволяя пользователю сделать скриншот, аннотировать его и предоставить текстовую обратную связь.
Проверьте данные в Back4app войдя в свою панель управления Back4app и проверив класс UserFeedback. Вы должны увидеть записи, соответствующие обратной связи, отправленной из приложения Flutter, включая текст и скриншот.
Заключение
В этом учебном пособии мы продемонстрировали, как интегрировать компонент обратной связи в приложение Flutter с использованием пакета feedback. Мы также показали, как хранить собранную обратную связь, включая аннотированные скриншоты, в Back4app. Эта настройка позволяет вам быстро собирать ценные отзывы от ваших пользователей, помогая вам улучшать ваше приложение на основе их обратной связи.
Для получения дополнительной информации о использовании виджетов Flutter, ознакомьтесь с документацией Flutter, а для получения советов по интеграции с бэкендом посетите документацию Back4app. Удачного кодирования!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Как использовать сегментированные кнопки в Flutter с Back4app
Понимание сопоставления шаблонов в Flutter с использованием Back4app как бэкенда