더 많은
Flutter에서 Uint8List 사용 및 Back4app을 사용하여 백엔드에 유지하는 방법

12min
소개
디지털 시스템에서 파일은 종종 바이트의 시퀀스로 표현되며, Dart는 Uint8List를 사용하여 바이트 데이터를 효율적으로 처리하는 방법을 제공합니다. Uint8List는 부호 없는 8비트 정수의 고정 길이 목록으로, 각 숫자는 0에서 255까지의 범위를 가집니다. 이 구조는 메모리 효율성이 중요한 이미지나 파일과 같은 이진 데이터 작업에 유용합니다.
이 튜토리얼에서는 Flutter에서 Uint8List를 사용하는 방법, 파일을 바이트 목록으로 변환하는 방법, 그리고 Parse SDK for Flutter를 사용하여 Back4app의 백엔드에 데이터를 지속하는 방법을 다룰 것입니다.
전제 조건
시작하기 전에 다음 사항을 확인하세요:
Back4app 계정. Back4app.com에서 무료 계정에 가입하세요.
로컬 머신에 Flutter 개발 환경이 설정되어 있어야 합니다. 아직 설정하지 않았다면 Flutter 설치 가이드를 따르세요.
Dart, Flutter 위젯 및 Back4app을 백엔드 서비스로 사용하는 기본 지식.
1단계 – Back4app 백엔드 설정
Back4app 프로젝트 생성: Back4app 계정에 로그인하고 새 프로젝트를 생성하세요.
Parse 클래스 생성: 이 튜토리얼을 위해 FileStorage라는 이름의 Parse 클래스를 생성하여 이진 데이터를 저장하세요:
filename (문자열): 파일의 이름.
fileData (파일): 파일의 이진 데이터.
Back4app 자격 증명 가져오기: 프로젝트 설정으로 이동하여 Flutter 앱을 Back4app에 연결하는 데 필요한 Application ID와 Client Key를 가져오세요.
2단계 – Flutter 프로젝트 설정
새로운 Flutter 프로젝트 만들기: 터미널 또는 명령 프롬프트를 열고 다음을 실행하세요:
Bash
flutter create uint8list_example
flutter create uint8list_example
﻿
종속성 추가: pubspec.yaml을 열고 다음 종속성을 추가하세요:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  file_picker: latest_version
  path_provider: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
  file_picker: latest_version
  path_provider: 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';

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 MaterialApp(
      home: Uint8ListExample(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.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 MaterialApp(
      home: Uint8ListExample(),
    );
  }
}
﻿
다음으로 교체하세요 'YOUR_BACK4APP_APP_ID' 및 'YOUR_BACK4APP_CLIENT_KEY' 실제 Back4app 자격 증명으로.
3단계 – Flutter에서 Uint8List 작업하기
파일 선택 및 읽기: file_picker 패키지를 사용하여 장치에서 파일을 선택하고 이를 Uint8List:로 변환합니다.
Dart
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:path_provider/path_provider.dart';

class Uint8ListExample extends StatefulWidget {
  @override
  _Uint8ListExampleState createState() => _Uint8ListExampleState();
}

class _Uint8ListExampleState extends State<Uint8ListExample> {
  Uint8List? _fileBytes;
  String? _fileName;

  Future<void> _pickFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      PlatformFile file = result.files.first;

      setState(() {
        _fileBytes = file.bytes;
        _fileName = file.name;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Uint8List Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickFile,
              child: Text('Pick a File'),
            ),
            if (_fileName != null)
              Text('Selected File: $_fileName'),
            if (_fileBytes != null)
              ElevatedButton(
                onPressed: _saveToBackend,
                child: Text('Save to Backend'),
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _saveToBackend() async {
    // Implement the saving logic in the next step
  }
}
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:path_provider/path_provider.dart';

class Uint8ListExample extends StatefulWidget {
  @override
  _Uint8ListExampleState createState() => _Uint8ListExampleState();
}

class _Uint8ListExampleState extends State<Uint8ListExample> {
  Uint8List? _fileBytes;
  String? _fileName;

  Future<void> _pickFile() async {
    FilePickerResult? result = await FilePicker.platform.pickFiles();

    if (result != null) {
      PlatformFile file = result.files.first;

      setState(() {
        _fileBytes = file.bytes;
        _fileName = file.name;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Uint8List Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickFile,
              child: Text('Pick a File'),
            ),
            if (_fileName != null)
              Text('Selected File: $_fileName'),
            if (_fileBytes != null)
              ElevatedButton(
                onPressed: _saveToBackend,
                child: Text('Save to Backend'),
              ),
          ],
        ),
      ),
    );
  }

  Future<void> _saveToBackend() async {
    // Implement the saving logic in the next step
  }
}
﻿
이 코드는 사용자가 파일을 선택하고, 파일을 Uint8List,로 읽고 파일 이름과 저장 버튼을 표시합니다.
4단계 – Back4app에 Uint8List 지속하기
파일을 Back4app에 저장하기 위해, 우리는 ParseFile 객체를 사용하여 이미지나 문서와 같은 이진 데이터를 업로드할 수 있습니다.
파일을 Back4app에 저장하기: _saveToBackend 메서드를 업데이트하여 선택한 파일을 Back4app에 지속적으로 저장합니다:
Dart
Future<void> _saveToBackend() async {
  if (_fileBytes != null && _fileName != null) {
    final parseFile = ParseFile(null, name: _fileName, byteData: _fileBytes);

    // Create a new ParseObject to store the file
    final fileStorage = ParseObject('FileStorage')
      ..set('filename', _fileName)
      ..set('fileData', parseFile);

    // Save the file in Back4app
    final response = await fileStorage.save();

    if (response.success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('File saved successfully!'),
      ));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Failed to save file.'),
      ));
    }
  }
}
Future<void> _saveToBackend() async {
  if (_fileBytes != null && _fileName != null) {
    final parseFile = ParseFile(null, name: _fileName, byteData: _fileBytes);

    // Create a new ParseObject to store the file
    final fileStorage = ParseObject('FileStorage')
      ..set('filename', _fileName)
      ..set('fileData', parseFile);

    // Save the file in Back4app
    final response = await fileStorage.save();

    if (response.success) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('File saved successfully!'),
      ));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text('Failed to save file.'),
      ));
    }
  }
}
﻿
이 메서드는 ParseFile을 사용하여 파일을 이진 데이터로 Back4app에 업로드합니다. 성공하면 확인 메시지를 표시합니다.
5단계 – 앱 실행하기
앱 실행하기 flutter run. 파일을 선택할 수 있는 버튼이 표시되고, 선택 후 백엔드에 저장할 수 있는 옵션이 표시됩니다.
Back4app에서 데이터 확인하기 Back4app 대시보드에 로그인하여 FileStorage 클래스를 확인합니다. 파일이 이름과 함께 저장된 것을 볼 수 있어야 합니다.
이진 데이터 저장을 위한 모범 사례
 Uint8List 및 이진 데이터 작업 시 다음과 같은 모범 사례가 있습니다:
사용하기 : Back4app의 ParseFile은 이미지, 비디오 및 문서와 같은 이진 데이터를 저장하고 검색하는 효율적인 방법입니다.
Parse 객체에 대용량 파일 직접 저장 피하기: 파일이 크면 AWS S3와 같은 저장 서비스 사용을 고려하고, 파일 자체 대신 Parse 객체에 파일 URL을 저장하세요.
압축 및 최적화: 대용량 이미지나 파일의 경우 성능 향상을 위해 업로드 전에 파일을 압축하는 것을 고려하세요.
결론
이 튜토리얼에서는 Uint8List를 Flutter에서 사용하고, 파일을 바이트 리스트로 변환하며, Parse SDK를 사용하여 Back4app에 이 데이터를 지속하는 방법을 다루었습니다. Uint8List는 Dart에서 바이트 데이터를 처리하는 메모리 효율적인 방법을 제공하여 이미지 업로드, 문서 저장 등과 같은 파일 작업에 적합합니다. 이를 Back4app과 통합하면 클라우드에서 이진 데이터를 쉽게 저장하고 관리할 수 있습니다.
자세한 정보는 Flutter 문서 및 Back4app 문서를 방문하세요. 즐거운 코딩 되세요!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter에서 Back4app 백엔드를 이용한 패턴 매칭 이해하기
Back4app의 백엔드 데이터로 Flutter에서 드롭다운 메뉴 만들기