더 많은
플러터에서 피드백 컴포넌트를 사용하여 사용자 피드백 수집하기 및 Back4app에 데이터 저장하기

10min
소개
사용자 피드백은 개발자가 앱에서 잘 작동하는 것과 개선이 필요한 것을 이해하는 데 필수적입니다. 피드백 메커니즘을 구현하는 것은 시간이 걸릴 수 있지만, Flutter의 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에 연결하는 데 필요한 Application ID와 Client Key를 가져오세요.
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_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 백엔드를 이용한 패턴 매칭 이해하기