Flutter Completers를 Back4app의 백엔드와 함께 사용하는 방법

소개 future 와 stream 은 모든 종류의 비동기 작업에서 가야 할 길입니다 그러나 때때로 둘 다 충분하지 않습니다 future 에 대해 더 고급 제어를 원한다면 completer 를 사용하세요 이는 future 를 프로그래밍 방식으로 완료할 수 있는 도구입니다 어떤 면에서는 비동기 작업에 대한 더 나은 제어를 제공합니다 이 튜토리얼은 back4app 에서 백엔드와 상호작용하는 애플리케이션에서 flutter completers 를 사용하는 방법을 안내합니다 이 튜토리얼이 끝나면 completers 를 사용하여 flutter 애플리케이션에서 비동기 작업을 관리하고 이러한 작업을 back4app 에서 제공하는 백엔드 서비스와 통합하는 방법을 배우게 됩니다 우리는 completer 를 사용하여 애플리케이션의 흐름을 제어하는 매우 간단한 앱을 만들 것입니다 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app 계정 back4app com https //www back4app com 에서 무료 계정에 가입하세요 로컬 머신에 flutter 개발 환경이 설정되어 있어야 합니다 아직 설정하지 않았다면 flutter 설치 가이드 https //flutter dev/docs/get started/install 를 따르세요 dart 및 flutter의 비동기 프로그래밍에 대한 기본 지식 복습이 필요하다면 flutter 비동기 프로그래밍 가이드 https //dart dev/codelabs/async await 를 확인하세요 1단계 – back4app 백엔드 설정하기 먼저, flutter 애플리케이션이 상호작용할 간단한 백엔드를 back4app에서 설정해 보겠습니다 back4app 계정에 로그인하세요 그리고 새 프로젝트를 만드세요 새로운 parse class를 설정하세요 이름은 task , flutter 앱이 가져올 작업을 저장할 것입니다 task 클래스에 다음 열을 추가하세요 name (string) 작업의 이름 status (boolean) 작업의 상태 (완료 또는 미완료) 테스트를 위해 back4app 데이터베이스에 몇 개의 샘플 작업을 추가하세요 예를 들어 작업 1 name = "flutter 튜토리얼 완료", status = true 작업 2 name = "새 프로젝트 시작", status = false 이제 flutter 앱에서 back4app 백엔드에 접근할 준비가 되었습니다 2단계 – flutter 프로젝트 만들기 다음으로, 새로운 flutter 프로젝트를 생성하겠습니다 터미널 또는 명령 프롬프트를 엽니다 다음 명령을 실행하여 새로운 flutter 프로젝트를 생성합니다 flutter create completer demo 프로젝트 디렉토리로 이동합니다 cd completer demo 2\ 선호하는 코드 편집기(예 vs code, android studio)에서 프로젝트를 엽니다 3단계 – parse sdk 추가 및 앱 구성 이제 back4app과 상호작용하기 위해 필요한 종속성을 추가하겠습니다 pubspec yaml 을 열고 다음 종속성을 추가합니다 dependencies flutter sdk flutter parse server sdk flutter ^3 0 0 2\ 실행 flutter pub get 의존성을 설치합니다 3\ lib/main dart , parse sdk를 가져옵니다 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'dart\ async'; 4\ main 함수에서 parse를 초기화합니다 void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your app id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(myapp()); } 'your app id' 과 'your client key' 을(를) 실제 back4app 자격 증명으로 교체하세요 4단계 – completers를 사용하여 비동기적으로 데이터 가져오기 이제 completer 를 사용하여 back4app 백엔드에서 데이터를 가져오고 ui에서 데이터가 사용 가능할 때를 제어해 보겠습니다 lib/main dart 에서 , completer 를 사용하여 back4app에서 작업을 가져오는 새 클래스를 만듭니다 class taskmanager { final completer\<list\<parseobject>> completer = completer(); future\<list\<parseobject>> get tasks => completer future; taskmanager() { fetchtasks(); } void fetchtasks() async { querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('task')); final parseresponse response = await query query(); if (response success && response results != null) { completer complete(response results); } else { completer completeerror('failed to load tasks'); } } } 이 클래스는 completer 를 초기화하고, 데이터를 가져오는 작업을 시작하며, 데이터가 사용 가능할 때 completer 를 완료합니다 2\ myapp 위젯에서 taskmanager 를 사용하여 작업을 가져오고 표시합니다 class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home scaffold( appbar appbar(title text('flutter completer demo')), body futurebuilder\<list\<parseobject>>( future taskmanager() tasks, builder (context, snapshot) { if (snapshot connectionstate == connectionstate waiting) { return center(child circularprogressindicator()); } else if (snapshot haserror) { return center(child text('error ${snapshot error}')); } else if (!snapshot hasdata || snapshot data! isempty) { return center(child text('no tasks found ')); } else { return listview\ builder( itemcount snapshot data! length, itembuilder (context, index) { final task = snapshot data!\[index]; return listtile( title text(task get\<string>('name') ?? 'no name'), subtitle text('completed ${task get\<bool>('status') ? 'yes' 'no'}'), ); }, ); } }, ), ), ); } } 3\ flutter 앱을 실행하세요 백엔드에서 가져온 작업 목록과 해당 이름 및 완료 상태가 표시됩니다 결론 이 튜토리얼에서는 flutter completers 를 사용하여 비동기 작업을 관리하고 애플리케이션에서 데이터 가져오기 흐름을 제어하는 방법을 배웠습니다 back4app과 통합하여 flutter 앱을 위한 간단하면서도 강력한 백엔드를 생성하여 데이터를 동적으로 가져오고 표시할 수 있게 되었습니다 이 접근 방식은 사용자 인증, 데이터 조작 등과 같은 더 복잡한 시나리오를 처리하도록 확장할 수 있습니다 back4app과 함께 flutter를 사용하는 방법에 대한 자세한 내용은 back4app flutter 문서 https //www back4app com/docs/flutter/overview 즐거운 코딩 되세요!