もっと
Flutterでフィードバックコンポーネントを使用してユーザーフィードバックを収集し、Back4appにデータを保存する

10min
はじめに
ユーザーフィードバックは、開発者がアプリでうまく機能していることと改善が必要なことを理解するために不可欠です。フィードバックメカニズムを実装するのは時間がかかることがありますが、feedbackパッケージを使用すれば、ユーザーがテキスト入力や注釈付きのスクリーンショットを送信できるフィードバックパネルを迅速に設定できます。このチュートリアルでは、このフィードバックコンポーネントをFlutterアプリに統合し、収集したフィードバックをBack4appに保存する方法を示します。
前提条件
始める前に、以下のものを用意してください:
Back4appアカウント。Back4app.comで無料アカウントにサインアップしてください。
ローカルマシンにFlutter開発環境を設定してください。まだ設定していない場合は、Flutterインストールガイドを参照してください。
Dart、Flutterウィジェット、及びバックエンドサービスとしてのBack4appの基本的な知識。
ステップ1 – Back4appバックエンドの設定
Back4appプロジェクトを作成する: あなたのBack4appアカウントにログインし、新しいプロジェクトを作成します。
Parseクラスを作成する: このチュートリアルでは、ユーザーから送信されたフィードバックを保存するために、「UserFeedback」という名前のParseクラスを作成します。
username（String）：ユーザーの名前（オプション）。
feedbackText（String）：ユーザーが提供したテキストフィードバック。
screenshot（File）：ユーザーによって注釈が付けられたスクリーンショット。
Back4appの認証情報を取得する: プロジェクト設定に移動して、FlutterアプリをBack4appに接続するために必要なアプリケーションIDとクライアントキーを取得します。
ステップ 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, 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();
  }
}
﻿
「'YOUR_BACK4APP_APP_ID'」と「'YOUR_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アプリから送信されたフィードバックに対応するエントリが表示されるはずです。テキストとスクリーンショットが含まれます。
結論
このチュートリアルでは、feedbackパッケージを使用してFlutterアプリにフィードバックコンポーネントを統合する方法を示しました。また、注釈付きのスクリーンショットを含む収集したフィードバックをBack4appに保存する方法も示しました。このセットアップにより、ユーザーから貴重な洞察を迅速に収集し、フィードバックに基づいてアプリを改善することができます。
Flutterウィジェットの使用に関する詳細情報は、Flutterドキュメントを確認し、バックエンド統合のヒントについては、Back4appドキュメントをご覧ください。コーディングを楽しんでください！
更新日 24 Jan 2025
このページは役に立ちましたか？
FlutterでBack4appを使用してセグメント化されたボタンを使用する方法
FlutterのバックエンドとしてBack4appを使用したパターンマッチングの理解