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

소개 디지털 시스템에서 파일은 종종 바이트의 시퀀스로 표현되며, dart는 uint8list 를 사용하여 바이트 데이터를 효율적으로 처리하는 방법을 제공합니다 uint8list 는 부호 없는 8비트 정수의 고정 길이 목록으로, 각 숫자는 0에서 255까지의 범위를 가집니다 이 구조는 메모리 효율성이 중요한 이미지나 파일과 같은 이진 데이터 작업에 유용합니다 이 튜토리얼에서는 flutter에서 uint8list 를 사용하는 방법, 파일을 바이트 목록으로 변환하는 방법, 그리고 parse sdk for flutter를 사용하여 back4app의 백엔드에 데이터를 지속하는 방법을 다룰 것입니다 전제 조건 시작하기 전에 다음 사항을 확인하세요 back4app 계정 back4app com https //www back4app com 에서 무료 계정에 가입하세요 로컬 머신에 flutter 개발 환경이 설정되어 있어야 합니다 아직 설정하지 않았다면 flutter 설치 가이드 https //flutter dev/docs/get started/install 를 따르세요 dart, flutter 위젯 및 back4app을 백엔드 서비스로 사용하는 기본 지식 1단계 – back4app 백엔드 설정 back4app 프로젝트 생성 back4app 계정 https //www back4app com/ 에 로그인하고 새 프로젝트를 생성하세요 parse 클래스 생성 이 튜토리얼을 위해 filestorage 라는 이름의 parse 클래스를 생성하여 이진 데이터를 저장하세요 filename (문자열) 파일의 이름 filedata (파일) 파일의 이진 데이터 back4app 자격 증명 가져오기 프로젝트 설정으로 이동하여 flutter 앱을 back4app에 연결하는 데 필요한 application id와 client key를 가져오세요 2단계 – flutter 프로젝트 설정 새로운 flutter 프로젝트 만들기 터미널 또는 명령 프롬프트를 열고 다음을 실행하세요 flutter create uint8list example 종속성 추가 pubspec yaml 을 열고 다음 종속성을 추가하세요 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를 초기화하세요 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 로 변환합니다 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에 지속적으로 저장합니다 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 문서 https //flutter dev/docs 및 back4app 문서 https //www back4app com/docs 를 방문하세요 즐거운 코딩 되세요!