How to Build a Backend for Flutter?

소개 이 튜토리얼에서는 flutter용 백엔드를 구축하는 방법 을 배우게 됩니다 back4app은 오픈 소스이며 신뢰할 수 있는 백엔드 서비스(baas)입니다 우리는 데이터베이스 관리, 클라우드 함수, restful api, graphql api 및 사용자 인증과 같은 필수 back4app 기능을 flutter 프로젝트에 통합하는 방법을 안내할 것입니다 또한 실시간 업데이트를 처리하는 방법을 live queries를 사용하여 발견하게 될 것입니다 back4app의 강력한 백엔드 서버를 사용하면 많은 수동 구성을 건너뛰고 동적인 flutter 앱을 만드는 데 집중할 수 있습니다 이 가이드는 flutter 개발자에게 클라이언트 측과 원활하게 통신하는 안전하고 확장 가능하며 강력한 백엔드 구조를 설정하는 방법을 보여줄 것입니다 또한 back4app이 호스팅, 사용자 인증 및 서버 논리와 같은 무거운 작업을 처리하도록 하는 장점을 강조할 것입니다 이를 통해 자동 확장, 고급 보안 및 간소화된 유지 관리와 같은 기능을 누릴 수 있습니다 flutter 프로젝트가 있고 백엔드 설정에 수많은 시간을 절약하고 싶다면, 여기가 시작하기에 적합한 장소입니다 이 튜토리얼이 끝나면 back4app으로 생성할 수 있는 백엔드 유형을 이해하고, 프로덕션 준비가 완료된 애플리케이션을 위한 백엔드 서비스를 확장하거나 외부 api 및 고급 사용자 인증과 같은 더 복잡한 기능을 통합할 준비가 될 것입니다 시작해 봅시다! 전제 조건 이 튜토리얼을 완료하려면 다음이 필요합니다 back4app 계정과 새로운 back4app 프로젝트 back4app 시작하기 https //www back4app com/docs/get started/new parse app 계정이 없으시면 무료로 생성할 수 있습니다 위의 가이드를 따라 프로젝트를 준비하세요 기본 flutter 개발 환경 flutter sdk 설치 및 설정이 완료되었는지 확인하세요 https //docs flutter dev/get started/install 또한 flutter에 대해 구성된 ide(예 android studio 또는 vs code)가 있는지 확인하세요 dart (프로그래밍 언어) 환경 보통 flutter와 함께 설치됩니다 오류 없이 dart 패키지를 가져올 수 있는지 확인하세요 flutter 기본 사항에 대한 이해 flutter 공식 문서 https //docs flutter dev flutter가 처음이라면 시작하기 전에 공식 문서나 초보자 튜토리얼을 검토하세요 이 모든 전제 조건이 준비되어 있는지 확인하세요 back4app 프로젝트가 설정되고 로컬 flutter 환경이 구성되어 있으면 더 쉽게 따라할 수 있습니다 1단계 – back4app에서 새 프로젝트 만들기 및 연결하기 새 프로젝트 만들기 back4app에서 flutter 백엔드를 구축하는 첫 번째 단계는 새 프로젝트를 만드는 것입니다 아직 만들지 않았다면 다음 단계를 따르세요 back4app 계정에 로그인하세요 back4app 대시보드에서 “새 앱” 버튼을 클릭하세요 앱에 이름을 지정하세요 (예 “flutter backend tutorial”) 프로젝트가 생성되면 back4app 대시보드에 나열된 것을 볼 수 있습니다 이 프로젝트는 우리가 논의할 모든 백엔드 구성의 기초가 될 것입니다 flutter 앱에 parse sdk 설치 및 초기화 back4app은 데이터 관리, 실시간 업데이트, 사용자 인증 등을 위해 parse 플랫폼에 의존합니다 flutter 프로젝트를 back4app에 연결하려면 다음 단계를 따르세요 parse flutter sdk 를 앱에 추가하세요 dependencies parse server sdk flutter ^4 0 0 parse 패키지를 당신의 main dart 에 가져오세요 (또는 앱을 초기화하는 곳에) import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ flutter/material dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyparseserverurl = 'https //parseapi back4app com'; const keyclientkey = 'your client key'; // initialize parse with debug set to true await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true, debug true, ); runapp(const myapp()); } class myapp extends statelesswidget { const myapp({key? key}) super(key key); @override widget build(buildcontext context) { return materialapp( title 'flutter + back4app example', theme themedata(primaryswatch colors blue), home const scaffold( body center( child text('hello from flutter + back4app!'), ), ), ); } } back4app 대시보드에서 앱의 security & keys 섹션으로 이동하여 application id , client key , 및 parse server url 위의 자리 표시자를 자신의 자격 증명으로 교체하십시오 이 초기화로 인해 flutter 앱의 모든 요청이 back4app 인스턴스로 안전하게 라우팅됩니다 flutter 앱의 클라이언트 측에서는 절대 master key 를 사용하지 않아야 합니다 master key가 필요하면 서버나 안전한 환경에 보관하십시오 2단계 – 데이터베이스 설정 데이터 모델 만들기 flutter 앱이 back4app에 연결되면 데이터베이스 스키마를 설계할 수 있습니다 back4app 대시보드에서 수동으로 수행할 수 있습니다 대시보드의 “database” 섹션으로 이동하십시오 새 클래스를 만드십시오 (예 “todo”) 및 관련 열을 추가하십시오 (예 제목, 완료 여부) back4app은 자동 스키마 생성을 돕기 위해 ai agent 를 제공합니다 ai 에이전트 열기 앱 대시보드 또는 메뉴에서 데이터 모델 설명하기 간단한 언어로 (예 “완전한 클래스 스키마로 새로운 todo 앱 만들기 ”) ai 에이전트에게 스키마 생성하기 당신을 위해 이것은 데이터 아키텍처 설정을 간소화합니다 필드를 자동으로 생성하려면, 앱에서 객체를 저장하기 시작하면 됩니다—parse는 즉석에서 스키마 생성을 지원합니다 ai 에이전트를 사용하여 데이터 모델 만들기 back4app ai 에이전트를 사용하기로 선택하면, 짧은 설명을 제공하기만 하면 스키마를 구축하거나 제안해 줄 것입니다 이는 플러터 프로젝트의 초기 데이터 모델링 단계를 가속화하는 훌륭한 방법입니다 flutter parse sdk를 사용하여 데이터 읽기 및 쓰기 아래는 parse flutter sdk를 사용하여 객체를 생성하고 검색하는 방법을 보여주는 간단한 예입니다 import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> createtodoitem(string title, bool iscompleted) async { final todo = parseobject('todo') set('title', title) set('iscompleted', iscompleted); final response = await todo save(); if (response success && response result != null) { print('todo saved successfully ${response result}'); } else { print('error saving todo ${response error? message}'); } } future\<list\<parseobject>?> fetchtodos() async { final querybuilder\<parseobject> querytodo = querybuilder\<parseobject>(parseobject('todo')); final response = await querytodo query(); if (response success && response results != null) { print('fetched todo items ${response results}'); return response results as list\<parseobject>; } else { print('error fetching todos ${response error? message}'); return null; } } 이것을 사용하면 flutter 앱에서 back4app 데이터베이스와 직접 상호작용할 수 있습니다 단순히 호출하십시오 createtodoitem('feed the cat', false) 또는 fetchtodos() 데이터를 쓰고 읽습니다 rest api를 사용한 데이터 읽기 및 쓰기 다른 서비스와 통합해야 하거나 더 전통적인 접근 방식을 선호하는 경우, back4app rest api를 여전히 사용할 수 있습니다 curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo graphql api를 사용한 데이터 읽기 및 쓰기 back4app은 graphql 엔드포인트도 제공합니다 mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } 이것은 flutter 앱에 가장 적합한 접근 방식을 구축할 수 있는 유연성을 제공합니다 라이브 쿼리 작업하기 back4app은 라이브 쿼리 를 제공하여 데이터에 대한 실시간 업데이트를 받을 수 있습니다 back4app 대시보드(서버 설정)에서 라이브 쿼리를 활성화한 후 parse livequery flutter 클라이언트를 사용하세요 import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ parse server sdk flutter/live query dart'; future\<void> subscribetotodos() async { final livequery = livequery(); final query = querybuilder\<parseobject>(parseobject('todo')); subscription subscription = await livequery client subscribe(query); subscription on(livequeryevent create, (value) { print('new todo created $value'); }); subscription on(livequeryevent update, (value) { print('todo updated $value'); }); subscription on(livequeryevent delete, (value) { print('todo deleted $value'); }); } 이 구독을 통해 데이터 변경 사항이 발생할 때마다 들을 수 있습니다 이는 여러 사용자가 실시간 데이터 업데이트를 볼 수 있는 협업 앱을 구축하는 데 환상적입니다 핫 리로드가 트리거되면 앱이 재시작되지 않는 한 구독은 유지됩니다 3단계 – acl 및 clp로 보안 적용하기 acl과 clp란 무엇인가요? back4app은 acl(액세스 제어 목록) 과 clp(클래스 수준 권한) 를 사용하여 객체 및 클래스 수준에서 누가 데이터를 읽거나 쓸 수 있는지를 제한합니다 이 계층은 데이터가 무단 접근으로부터 보호되도록 보장합니다 클래스 수준 권한 설정하기 back4app 대시보드에서 database 로 이동하여 클래스(예 “todo”)를 선택합니다 class level permissions 로 이동합니다 기본값 설정(예 인증된 사용자만 새 객체를 생성할 수 있음) 코드에서 acl 구성하기 flutter 코드에서 객체 수준에서 acl을 적용할 수도 있습니다 import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> createprivatetodo(parseuser owneruser, string title) async { final todo = parseobject('todo') set('title', title); final acl = parseacl(owner owneruser); acl setpublicreadaccess(allowed false); acl setpublicwriteaccess(allowed false); todo setacl(acl); final response = await todo save(); if (response success) { print('private todo saved '); } else { print('error ${response error? message}'); } } clp와 acl을 결합하여 올바른 사람이나 역할만 특정 데이터에 접근하거나 수정할 수 있도록 할 수 있습니다 4단계 – 클라우드 코드 함수 작성하기 클라우드 코드가 필요한 이유? 클라우드 코드는 백엔드 서버를 수동으로 설정하지 않고도 서버 측 로직을 실행할 수 있게 해줍니다 이는 데이터 검증, 외부 서비스와의 통합 또는 백엔드 서비스(baas)에서 특정 규칙을 적용하는 데 완벽합니다 예제 함수 다음은 텍스트의 길이를 계산하는 클라우드 함수의 예입니다 // main js in your cloud code parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); 이 코드는 back4app cli를 통해 또는 앱의 대시보드에서 클라우드 코드 아래에서 배포할 수 있습니다 배포 back4app cli 사용 b4a configure accountkey b4a deploy 대시보드 사용 앱의 대시보드에서 클라우드 코드 > 함수 로 이동합니다 javascript 코드를 붙여넣습니다 클릭 배포 flutter에서 클라우드 코드 호출하기 import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> gettextlength(string text) async { final function = parsecloudfunction('calculatetextlength'); final params = \<string, dynamic>{'text' text}; final parseresponse result = await function execute(parameters params); if (result success && result result != null) { print('text length ${result result\['length']}'); } else { print('error calling cloud code ${result error? message}'); } } 이 안전한 접근 방식은 민감한 로직이 서버에 남아 있도록 보장하며, flutter 앱은 단순히 요청을 보냅니다 5단계 – 인증 구성 사용자 인증 활성화 back4app은 사용자 가입 및 로그인을 처리하기 위해 parse user 클래스를 사용합니다 기본적으로 parse는 비밀번호 해싱, 세션 토큰 및 안전한 저장을 처리합니다 import 'package\ parse server sdk flutter/parse server sdk flutter dart'; future\<void> signupuser(string username, string password, string email) async { final user = parseuser(username, password, email); final response = await user signup(); if (response success) { print('user signed up successfully!'); } else { print('sign up error ${response error? message}'); } } future\<void> loginuser(string username, string password) async { final user = parseuser(username, password, null); final response = await user login(); if (response success) { print('user logged in ${response result}'); } else { print('login error ${response error? message}'); } } 소셜 로그인 back4app은 google, apple, facebook 등과의 통합을 지원합니다 각 제공자는 특정 접근 방식을 가지고 있으며 추가 라이브러리(예 facebook 또는 google 로그인용)가 필요할 수 있습니다 그런 다음 다음을 호출할 수 있습니다 await parseuser loginwith('facebook', \<string, dynamic>{ 'id' 'user facebook id', 'access token' 'facebook access token', 'expiration date' 'date' }); 제공자의 문서에 따라 매개변수를 조정하십시오 6단계 – 파일 저장 처리 파일 저장 설정 이미지, 문서 또는 기타 미디어 파일을 parsefile 을(를) 사용하여 저장할 수 있습니다 back4app은 이러한 파일을 안전하게 보호하고 검색을 위한 url을 제공합니다 import 'dart\ io'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ image picker/image picker dart'; future\<void> uploadimage() async { final picker = imagepicker(); final xfile? pickedfile = await picker pickimage(source imagesource gallery); if (pickedfile == null) { print('no file selected '); return; } final parsefile = parsefile(file(pickedfile path)); final response = await parsefile save(); if (response success) { print('file saved ${parsefile url}'); } else { print('error uploading file ${response error? message}'); } } 보안 고려사항 파일 수준 보안과 acl을 결합하여 파일에 대한 접근 권한(공개, 인증된 사용자 또는 제한된 사용자)을 정의할 수 있습니다 이는 파일 데이터가 안전하게 유지되도록 보장합니다 7단계 – 이메일 확인 및 비밀번호 재설정 왜 중요한가 이메일 확인은 사용자가 제공한 이메일 주소를 소유하고 있음을 확인하며, 비밀번호 재설정 흐름은 사용자 경험과 보안을 향상시킵니다 대시보드 구성 앱의 email settings 으로 이동하세요 email verification 및 password reset 을 활성화하세요 필요한 경우 이메일 템플릿이나 사용자 정의 도메인을 구성하세요 이 설정은 flutter 앱이 사용자 소유권 확인 및 비밀번호 복구를 자동으로 처리할 수 있도록 합니다 flutter에서의 구현 final user = parseuser('testuser', 'password123', 'test\@example com'); final signupresponse = await user signup(); if (signupresponse success) { // the user will receive a verification email } // for password reset final resetresponse = await parseuser requestpasswordreset('test\@example com'); if (resetresponse success) { print('reset email sent successfully!'); } 8단계 – 클라우드 작업으로 작업 예약하기 클라우드 작업 정기적인 작업(예 오래된 데이터 정리 또는 주기적인 이메일 전송)을 예약하고 싶을 수 있습니다 클라우드 작업을 통해 이를 수행할 수 있습니다 // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; }); 이 코드를 배포한 후, 앱 설정 > 서버 설정 > 백그라운드 작업 으로 이동하여 예약하세요 9단계 – 웹훅 통합 웹훅이란? 웹훅은 특정 이벤트가 발생할 때(예 새 객체 저장) back4app 앱이 외부 서비스에 http 요청을 보낼 수 있게 해줍니다 이는 서드파티 도구와 통합하는 데 이상적입니다 back4app 대시보드에서 더보기 > 웹훅 으로 이동하여 웹훅 추가 엔드포인트와 트리거를 설정하세요(예 “todo에 새 레코드”) cloud code에서 beforesave 또는 aftersave 트리거를 사용하여 http 요청을 만들어 웹훅을 수동으로 구성할 수도 있습니다 10단계 – back4app 관리 패널 탐색 어디서 찾을 수 있나요 “ back4app admin app ”은 비기술 팀원이 parse 대시보드를 열지 않고도 데이터(crud 작업, 데이터 작업 등)를 관리할 수 있는 사용자 친화적인 인터페이스입니다 “ 앱 대시보드 > 더보기 > 관리 앱 ”으로 이동합니다 “ 관리 앱 활성화 ”을 클릭합니다 관리 사용자를 생성하고, 하위 도메인을 선택하고, 새로 생성된 자격 증명으로 로그인합니다 관리 앱은 빠른 데이터 검토 및 수정을 도와줍니다 결론 이 튜토리얼에서는 flutter용 백엔드를 구축하는 방법 을 배웠습니다 클래스를 생성하고, 데이터를 저장하고, 실시간 쿼리를 구성하고, acl 및 clp로 보안을 적용하고, 클라우드 기능을 작성하고, 작업을 예약하고, 웹훅을 통합하고, back4app 관리 패널을 탐색했습니다 이 접근 방식은 복잡한 서버 구성보다 flutter 클라이언트 측에 집중할 수 있게 하여 개발을 가속화합니다 현재 가지고 있는 최종 문자열은 restful api, 사용자 인증 및 쉬운 데이터 조작을 활용하는 기능적이고 안전한 백엔드입니다 추가 클라우드 기능, 외부 api 호출 또는 사용자 정의 역할과 같은 더 고급 기능을 언제든지 통합할 수 있습니다 다음 단계 프로덕션 준비 완료 고급 캐싱, 분석 또는 역할 기반 액세스 제어를 구현합니다 앱 확장 타사 서비스를 통합하거나 전문 비즈니스 로직을 위한 더 많은 클라우드 기능을 구축합니다 back4app 문서 참조 고급 보안, 성능 조정, 로그 분석 등을 탐색합니다 더 배우기 라이브 채팅 앱, 위치 기반 서비스 또는 더 복잡한 데이터 구조에 대한 튜토리얼을 확인하세요 이를 flutter 프로젝트와 결합하여 실제 사용 사례에 적용하세요 이 설정을 계속 다듬어 나가면 flutter 앱을 강력하고 확장 가능한 솔루션으로 변환할 수 있습니다 튼튼한 백엔드 서비스 위에 구축됩니다 즐거운 코딩 되세요!