Flutter
Parse SDK (REST)
Flutter 앱에서 Parse 객체 기본 CRUD 작업 실행 방법
10 분
이 가이드는 flutter 플러그인을 사용하여 back4app에서 parse 객체를 관리하는 방법을 보여줍니다 기본 crud 작업인 생성, 읽기, 업데이트 및 삭제를 배우게 됩니다 이 튜토리얼은 이러한 작업을 설명하기 위해 간단한 todo 앱을 사용합니다 back4app 백엔드 데이터 저장소는 parseobject , json 호환 데이터의 키 값 쌍을 보유합니다 back4app 데이터 저장소는 문자열, 숫자, 불리언, datetime, geopoints, pointers, relations, 리스트 및 객체를 포함한 다양한 일반 데이터 유형을 수용합니다 본질적으로 json 형식으로 인코딩할 수 있는 모든 데이터를 지원하여 다양한 데이터 저장 요구에 대한 유연하고 강력한 솔루션을 제공합니다 필수 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 flutter 버전 3 x x 이상 android studio https //developer android com/studio 또는 vs code 설치 (과 플러그인 dart 및 flutter) back4app에서 생성된 앱 참고 새 parse 앱 튜토리얼 을 따라 back4app에서 parse 앱을 만드는 방법을 배우세요 back4app에 연결된 flutter 앱 참고 flutter 프로젝트에 parse sdk 설치 을 따라 back4app에 연결된 flutter 프로젝트를 만드세요 android 또는 ios를 실행하는 장치(또는 가상 장치) 1\ 객체 생성 저장할 savetodo 함수는 제목과 done 상태가 false로 설정된 새로운 작업을 생성합니다 작동 방식은 다음과 같습니다 속성을 설정하여 parse 객체 초기화 parseobject 의 인스턴스를 생성합니다(예 'todo') set 메서드를 사용하여 키 값 쌍을 정의합니다 객체 저장 save 메서드를 호출하여 객체를 데이터베이스에 저장합니다 future\<void> savetodo(string title) async { final todo = parseobject('todo') set('title', title) set('done', false); await todo save(); } 2\ 객체 읽기 gettodo 함수는 데이터베이스를 쿼리하고 작업 목록을 반환합니다 작동 방식은 다음과 같습니다 쿼리 초기화 클래스에 대한 querybuilder 인스턴스를 생성합니다 쿼리 실행 query 메서드를 사용하여 데이터를 검색합니다 응답 처리 쿼리가 성공했는지 확인하고 결과를 처리합니다 future\<list\<parseobject>> gettodo() async { querybuilder\<parseobject> querytodo = querybuilder\<parseobject>(parseobject('todo')); final parseresponse apiresponse = await querytodo query(); if (apiresponse success && apiresponse results != null) { return apiresponse results as list\<parseobject>; } else { return \[]; } } listview\ builder 함수를 업데이트하여 parse 객체 값을 추출하고 표시합니다 // get parse object values final vartodo = snapshot data!\[index]; final vartitle = vartodo get\<string>('title')!; final vardone = vartodo get\<bool>('done')!; 3\ 객체 업데이트 업데이트 updatetodo 함수는 기존 작업의 상태를 업데이트합니다 작동 방식은 다음과 같습니다 parse 객체 초기화 및 속성 설정 parseobject 의 인스턴스를 생성하고 objectid 를 설정합니다 set 메서드를 사용하여 키 값 쌍을 업데이트합니다 객체 저장 save 메서드를 호출하여 데이터베이스에서 객체를 업데이트합니다 future\<void> updatetodo(string id, bool done) async { var todo = parseobject('todo') objectid = id set('done', done); await todo save(); } 4\ 객체 삭제 삭제 deletetodo 함수는 데이터베이스에서 기존 작업을 제거합니다 작동 방식은 다음과 같습니다 parse 객체 초기화 parseobject 의 인스턴스를 생성하고 objectid 를 설정합니다 객체 삭제 delete 메서드를 호출하여 데이터베이스에서 객체를 제거합니다 future\<void> deletetodo(string id) async { var todo = parseobject('todo') objectid = id; await todo delete(); } 전체 예제 코드 여기 back4app 백엔드와 통합된 간단한 todo 앱의 전체 코드가 있습니다 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your app id here'; const keyclientkey = 'your client key here'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(const materialapp(home todoapp())); } class todoapp extends statefulwidget { const todoapp({super key}); @override // ignore library private types in public api todoappstate createstate() => todoappstate(); } class todoappstate extends state\<todoapp> { list\<parseobject> tasks = \[]; texteditingcontroller taskcontroller = texteditingcontroller(); @override void initstate() { super initstate(); gettodo(); } @override widget build(buildcontext context) { return materialapp( debugshowcheckedmodebanner false, theme themedata( primarycolor colors white, hintcolor colors black, scaffoldbackgroundcolor colors white, appbartheme appbartheme(backgroundcolor color fromargb(255, 68, 122, 246))), home scaffold( appbar appbar( title const text('todo list'), ), body container( decoration boxdecoration( border border all(color colors black), ), child column( children \[ const sizedbox(height 20), buildtaskinput(), const sizedbox(height 20), expanded(child buildtasklist()), ], ), ), ), ); } widget buildtaskinput() { return padding( padding const edgeinsets symmetric(horizontal 20), child row( children \[ expanded( child textfield( controller taskcontroller, decoration inputdecoration( hinttext 'enter tasks', filled true, fillcolor colors grey\[200], border outlineinputborder( borderradius borderradius circular(8), borderside borderside none, ), ), ), ), const sizedbox(width 10), elevatedbutton( onpressed addtodo, style buttonstyle( foregroundcolor materialstateproperty all\<color>(colors black)), child const text('add'), ), ], ), ); } widget buildtasklist() { return listview\ builder( itemcount tasks length, itembuilder (context, index) { final vartodo = tasks\[index]; final vartitle = vartodo get\<string>('title') ?? ''; bool done = vartodo get\<bool>('done') ?? false; return listtile( title row( children \[ checkbox( value done, onchanged (newvalue) { updatetodo(index, newvalue!); }, ), expanded(child text(vartitle)), ], ), trailing iconbutton( icon const icon(icons delete), onpressed () { deletetodo(index, vartodo objectid!); }, ), ); }, ); } future\<void> addtodo() async { string task = taskcontroller text trim(); if (task isnotempty) { var todo = parseobject('todo') set('title', task) set('done', false); var response = await todo save(); if (response success) { setstate(() { tasks add(todo); }); taskcontroller clear(); } else { // handle error } } } future\<void> updatetodo(int index, bool done) async { final vartodo = tasks\[index]; final string id = vartodo objectid tostring(); var todo = parseobject('todo') objectid = id set('done', done); var response = await todo save(); if (response success) { setstate(() { tasks\[index] = todo; }); } else { // handle error } } future\<void> gettodo() async { var querybuilder = querybuilder\<parseobject>(parseobject('todo')); var apiresponse = await querybuilder query(); if (apiresponse success && apiresponse results != null) { setstate(() { tasks = apiresponse results as list\<parseobject>; }); } else { // handle error } } future\<void> deletetodo(int index, string id) async { var todo = parseobject('todo') objectid = id; var response = await todo delete(); if (response success) { setstate(() { tasks removeat(index); }); } else { // handle error } } } 당신의 앱은 다음과 같아야 합니다 결론 이제 back4app에서 parse를 사용하여 flutter 앱에서 기본 crud 작업을 구현했습니다 이 튜토리얼에서는 todo 앱에서 작업을 추가, 검색, 업데이트 및 삭제하는 방법을 보여주었습니다