[FlutterFlow] 플러터플로우에서 서버 연동하기, CRUD 학습하기

 

✔️ 플러터플로우에서 서버와 연동하는 방법을 정리해보자.

 

Firebase 연동하기

서버는 Firebase 데이터베이스를 사용할 것이다.

 

우선 Settings and Intergrations → Firebase → Create Project 를 눌러서 진행한다.

몇분 기다리면 Firebase Project가 완료되는데, 이제 앱과 연결할 수 있는 서버가 생성된 것이고 여러가지 데이터를 저장할 수 있는 데이터베이스가 제공된다.

 

▼ 🔗 Firebase Setup 공식 문서

https://docs.flutterflow.io/integrations/firebase/connect-to-firebase/

Connect to Firebase | FlutterFlow Documentation

 

 

Firebase의 내가 사용할 도구들은 다음과 같다.

• Cloud Firetore : 데이터베이스
• Firebase Authentication : 인증 (로그인 / 회원가입)
• Enable Storage : 파일을 저장

해당 버튼을 통해 활성화 해주자.

 

Authentication

로그인 방법으로 <이메일 / 비밀번호>을 추가하고, 사용 설정하게 해주고 저장한다.

 

Storage

파일을 저장할 Storage도 생성해준다.

 

필요한 설정을 해뒀으니 로그인에 필요한 users Collection을 아래처럼 만들었다.

 

Collection을 생성하고 마지막으로

Settings → Firebase → Generate Config Files 버튼을 눌러, 여태까지 생성한 변경사항들을 저장하고 서버 세팅을 마무리한다.

 

로그인 / 회원가입

로그인 및 회원가입 페이지를 직접 화면과 기능을 전부 만들기 전에 Flows의 Account & Profile Creation를 프로젝트에 추가해서 연습할 수 있다.

로그인과 관련된 페이지를 한 번에 추가하는 기능이다!  flow 에 맞게 user collection의 필드도 채워지게 된다.

 

로그인 설정하기

⚠️ 프로젝트 이슈에서 Errors를 확인하고 수정하자.

• Authentication → Initial Page를 설정
• Firestore Settings → Firestore Rules의 Deploy 버튼 누르기 (user의 CRUD 규칙)
• Firebase의 Firebase Storage → Deploy 버튼 누르기 ( Storage 규칙)
• Firebase Storage →  Deploy 버튼 누르기

Logged In Page는 반드시 설정되어야 하고 설정된 Logged In Paged에는 NavBar가 반드시 있어야 한다.

 

데이터 베이스 데이터 관리하기

위의 설정을 완료하고 테스트모드로 실행해보면, 데이터베이스의 Manage Content에서 users에 새로 생성된 데이터를 확인할 수 있다.

또한 관리자가 여러 가지 정보를 변경해 줄 수도 있다.

 

이때 photo_url을 업로드하려 할 경우, 업로드가 되지 않는 버그가 있는데, 해결하기 위해서는 Firebase 스토리지의 Rule을 다음과 같이 수정해야 한다.  

Firebase → Storage → <규칙>탭 으로 이동하여, 다음과 같이 수정하여 게시해주자.

allow, read, write : if request.auth != null;

 

이후에 레이아웃을 원하는 대로 수정해서 회원가입/ 로그인 등 기능을 사용할 수 있다

 

CRUD

✔️ 서버 안에 나만의 Collection 데이터베이스를 만들어보자.

 

내가 만드는 서비스인 수식을 저장하고 이후에 목록을 확인하는 컬렉션을 만들어 기능을 적용할 것이다.

 

☑️ Create : 수식 저장하기

이렇게 해당 기록을 저장할 컬렉션을 만들어 필요한 필드를 만들어줬다.

👉 여기서 Document Reference는 문서에 대한 바로 가기를 뜻하며, 하이퍼링크같은 역할을 한다.

Reference Type을 users로 설정하여 유저에 대한 정보를 가진 문서에 바로가기를 지원한다.

https://docs.flutterflow.io/resources/backend-query/document-from-reference/

Document From Reference | FlutterFlow Documentation

 

 

이제 제출 버튼을 눌렀을 때, 수식과 결과값이 history 에 입력될 수 있도록 하는 액션을 만들었다.

• Backend/Database의 Firestore에서 Create Document를 선택

위와 같이 필드의 값을 설정하였다. 컬렉션에서 만들었던 4개의 필드를 모두 추가해서 설정했다.

 

☑️ Read Document 

서버에서 실제 Formula History 데이터를 가져오는 작업을 해보자.

 

📌 우선 가져온 데이터를 표시해 줄 Column에서 Wrap Widget버튼을 누르고 ListView 위젯을 선택해 Column을 감싸준다.

ListView는 데이터가 리스트(목록)일 때, 그것을 목록으로 표현해 주는 위젯인데, 이를 위해선 데이터 리스트를 전달해줘야한다.

 

리스트를 가져오는 방식은 2가지가 있다.

 

1) Backend Query를 통해서 서버에서 가져오는 방법

• 쿼리의 종류에는 대표적으로 4가지가 있다: Query Collection, Document from Reference, API Call, Algolia Search
• Query Collection: 백엔드 서버에서 조건을 주면 데이터베이스의 콜렉션을 전부 불러오는 가장 기본적인 쿼리
• Document from Reference: Reference(바로 가기)로부터 실제 문서를 불러오는 쿼리

2) Generating Children from Variable 기능으로 이미 리스트인 변수(Variable)가 있을 때, 목록을 가져오는 방법

 

 

📌 백엔드 쿼리를 통해 쿼리컬렉션을 사용해 리스트를 가져왔다.

필터와 정렬은 다음과 같이 선택해서 내 수식의 히스토리를 불러올 수 있다.

 

목록을 불러왔으니, 위젯을 쿼리 결과(formula_history Document)와 대응해줘야 한다.

다음과 같이 리스트뷰의 필드값을 선택하면 불러온 값을 보여줄 수 있다.

 

 

☑️ Delete & Update Document

삭제하는 액션도 간단히 추가할 수 있다.

• Backend/Database의 Firestore에서 Delete Document를 선택
• Select Reference to Delete에서 formula_history Document 중에서 Reference를 선택

 

단, 바로 삭제하는 액션이 어색하기 때문에

삭제 액션 전에 조건문을 추가하여 Confirm Dialog 액션을 추가해주는 것이 훨씬 자연스럽게 삭제할 수 있는 방법이다.

 

 

Update를 이용해서 문서를 변경하는 과정도 간단하다.

Edit Profile 컴포넌트에서 Update 기능을 확인할 수 있는데, Backend/Database에 FireStore에서 Update Document를 선택하여 이용 중이다.

Select Reference to Update에서 Authenticated User중에서 Reference를 선택하여 업데이트할 대상을 지정하고 있으며,  Set Fields 항목을 지정하여 수정할 수 있는 것을 확인할 수 있다.

 

 

오늘은 플러터플로우에서 Firebase 서버 연동과 CRUD 프로세스를 공부해봤다.