[SKKU DT] 34일차 -유니티 네트워크 -파이어베이스 웹, 플러터 플로우(FlutterFlow)

[SKKU DT] 34일차 -유니티 네트워크 -파이어베이스 웹, 플러터 플로우(FlutterFlow)

2023. 12. 15. 15:04ㆍSKKU DT

728x90

플러터 플로우(FlutterFlow)

플러터 플로우는 타 노코드 앱 제작툴에 비해 사용자 정의 및 고급 기능으로 구현할 수 있는 기능들이 상대적으로 풍부하다는 큰 장점이 있다. 특히 Firebase 클라우드 Firestore를 백엔드로 활용하여 라이브 데이터에 쉽게 연결할 수 있고, API 호출 기능을 제공하여 확장성이 높다.

FlutterFlow - Build beautiful, modern apps incredibly fast

FlutterFlow lets you build apps incredibly fast in your browser. Build fully functional apps with Firebase integration, API support, animations, and more. Export your code or even easier deploy directly to the app stores!

flutterflow.io

플러터 플로우(FlutterFlow) 설정하기

가입 완료 후 FlutterFlow 홈페이지

오른쪽 상단의 Create Project 후 Blank Project 생성.

Firebase 프로젝트 설정에서 [사용자 및 권한]에 [구성원 추가]로 firebase@flutterflow.io를 편집자로 추가.

구성원으로 들어갔다.

오른쪽 하단에 [고급 권한 설정]으로 들어간다.

firebase@flutterflow.io의 펜 모양을 눌러 주 구성원 수정

+다른 역할 추가 버튼 클릭, 역할 선택에서 [서비스 계정] - [서비스 계정 사용자] 클릭, 저장 클릭

다시 FlutterFlow에 돌아와서, [설정] - [Firebase] - [Connect Your Own Firebase Project]의 마법사 모자 클릭

마법사 모자를 누르고 뜨는 팝업에서 [Enamble Web] 활성화

Firebase에서 내 프로젝트 설정에서 프로젝트 ID를 복사한 후 해당 값을 입력해서 FlutterFlow와 연결한다. 성공하면 아래에 작게 Success! 알림 표시.

밑에 버튼 중에 [Auto Generate Config Files] 버튼을 누르고 [Generate Files]를 눌러 초기 구성 파일을 생성한다.

아래에 버튼 두개를 활성화 한다.

아리에 Select Initial Pages의 Entry Page의 Unset 부분을 클릭하면, 아래의 팝업이 생성된다.

Auth 4를 선택하고 [Default Theme] 선택, 이름은 Auth로 수정해서 Create Page 생성한다.

마지막으로 Start Building 눌러서 생성

성공적으로 Build가 되었다면 Firebase Setup Complete!가 보여진다.

파이어베이스에서 특정한 쿼리를 수행하려면 인덱스 배포가 필요하므로, 나중을 위해서 인덱스 배포를 한다.

마법사 모자를 누르고 1, 2단계를 Next를 눌러서 건너뛰면, Additional Setup이 나온다. 여기서 Deploy 버튼을 눌러서 인덱스를 배포하고 Start Building을 눌러 빌드한다.

[설정] - [Authentication]을 들어간다. 이미 Firebase의 Enable Authentication은 활성화가 되어있고, Initial Page에 아까 위에서 설정했던 Auth의 로그인 화면이 설정되어있다.

왼쪽 메뉴 모음에서 Widget Tree를 선택한 후 Auth라고 설정된 이름을 Login으로 바꾼다. Auth 이름은 오류가 나기 때문.

가운데에 에디터 화면에서 자유롭게 텍스트를 바꿀 수 있다.

이전에는 Sign In에 Create Account가 있는데 Welcome back으로 바꾸면 된다.

가입을 위한 비밀번호 확인란 만들기(위 내용과 일치하는지 확인하는 그 칸)

Password 창을 복제하고 아래의 텍스트 Password Confirm으로 내용을 바꾼다.

Sign Up 버튼에 액션 만들기

On Tap 확인(휴대폰의 클릭), [Backend/Database] - [Firebase Authentication] - [Create Account] 선택

위와 같은 설정을 준다. 새로 만든 password_confirm이 뜨지 않는다면 해당 input 칸의 이름을 바꾸면 뜬다.

구글 로그인 세팅

자바 SE 15.0.1 설치

https://www.oracle.com/java/technologies/javase/jdk15-archive-downloads.html

Java Archive Downloads - Java SE 15

WARNING: These older versions of the JRE and JDK are provided to help developers debug issues in older systems. They are not updated with the latest security patches and are not recommended for use in production. For production use Oracle recommends downlo

www.oracle.com

path를 검색해서 시스템 환경 변수 편집을 연다.

환경 변수 클릭,

cmd 명령창에서

keytool -list -v -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore 입력, password는 android 이다.

파이어베이스 콘솔에서 SHA-1 키 추가

위의 명령창에서 나온 SHA1 키를 '디지털 지문 추가'로 등록한다.

다시 FlutterFlow에 돌아와서 구성 파일을 다시 생성하기 위해 [Regenerate Config Files]을 누른다.

다시 Firebase에 돌아와서, [Authentication] - [Sign-in method] - [새 제공업체 추가]에서 구글을 선택한다.

웹 배포하기

원하는 사이트 이름을 설정한 후 Publish한다.

오류가 떠서 Publish가 되지 않았고, 오류를 클릭하면 Initial Page의 Logged In Page가 설정되지 않았기 때문이다.

경고는 뜨지만 일단 Publish...

다행히 Publish가 잘 되었다.

오른쪽 위에 번개 모양을 누르면 Test가 가능하다.

Ctrl + Shift + J 누르면 우측 창이 나온다.

구글 로그인 버튼을 누르면 Info: ~~~가 나오는데 "Add your domain (ff- .....app) 괄호 안의 부분을 복사해서

Firebase - [Authentication] - [Settings] - [승인된 도메인]으로 추가한다.

Publish한 인터넷 주소도 승인된 도메인에 추가한다.

빈 페이지 하나 만들기

pages에 마우스 오른쪽 버튼 누르고 [Add Page]를 눌러 Blank 페이지를 만든다.

로그인 화면으로 다시 돌아가기

빈 페이지에서 [Insert Widget]에서 버튼을 하나 만들고

액션을 추가해서 [Navigate To] - [Login] 페이지로 돌아가게끔 설정한다.

Google Cloud 콘솔 가입

API 및 서비스 클릭해서 진

OAuth 2.0 클라이언트 ID에서 가장 밑에 Web client 클릭

총 3개의 URL을 추가한다.

Firebase에서 승인된 도메인에 넣어줬던 링크,

https://app.flutterflow.io,

내가 Publish한 주소

Google 로그인을 누르면 구글 로그인 팝업이 뜬다.

대시보드 페이지 만들기

모니터링 툴로써 실무자외의 직원들이나 전사적으로 활용할 수도 있다. AGV 운영 모니터링이라면 AGV 모델 번호별로 다양한 데이터들을 수집할 수 있다.

Firestore 데이터베이스는 아래와 같게 만들 수 있다. 모델별로 정리, 각 모델마다 배터리나 고장 유무 등을 데이터베이스화 할 수 있다.

실제로 고장이 났을 때 로그를 찍을 수 있다. isBroken이 true일 때 로그 남기기 등

데이터베이스를 만들기 위해 FlutterFow의 Firestore에서 아래와 같이 컬렉션을 만든다.

DashBoard 빈 페이지 생성

AppBar 삭제, Column 삭제

DashBoard 밑에 Row 추가

템플릿 검색해서 Row 밑 끌어다 놓기 Row 틈에 잘 넣어야 함

Explore 삭제

Row 안에 Container를 넣는다.

Container 프로퍼티에서, Height는 무한대로.

가로 넓이는 Expanded 눌러서 전체를 덮는다.

상단에 데이터를 넣는다.

Container아래에 Column넣기, 그 밑에 Row 넣기

Row의 자식으로 다시 Column넣기. 얼마나 넣을지는 텍스트의 가로 세로 갯수에 다라 달라진다.

Column밑에 Text 생성.

Column에 여백주기 (상하좌우 20씩 주었다)

글자 크기 키우기 -Text Properties에서 24 크기 정도의 Headline Medium 선택

설명 Text도 글자 키운다.

Column 상에서 Align 하려면 Column의 프로퍼티 아래에 아이콘을 선택하면 보기 좋게 바뀐다.

중단 데이터 메인 컨텐츠

파이그래프를 넣는다.

Row 만들어서 Add Query하면 만들어놨던 컬렉션이 보인다.

위의 트리 구조에 주의한다!!!!!!!!!!

이 모양이 나왔는지 확인. 마지막 Row에는 Database 아이콘이 붙어있다.

마지막 Row 밑에 Column만든다.

Column에 ProgressBar 추가

ProgressBar에 데이터 쿼리

기존 데이터 지우고 작은 버튼 클릭, BatteryStatus를 가져온다. (Int, Double 자료형만 가져올 수 있다.)

Diameter로 지름 수정 가능. 240으로 해서 두 배정도 키웠다.

프로퍼티의 아래로 내려오면 Text가 있다. 빨간 단추 클릭,

BatteryStatus의 숫자 형태를 변형해야 한다. Number Format - Percent

Progress Color 수정 -Conditional Value

지금까지 한 결과를 오른쪽 상단 번개모양 아이콘을 눌러서 테스트한다.

데이터를 넣지 않아서 데이터를 넣어야한다. [Manage Content] 클릭, Add Document로 한 줄씩 추가할 수 있다. 물론 CSV로도 가능하다.

다시 테스트 해서 확인한다. 잘 나온다.

ProgressBar 밑에 모델명과 단추 버튼을 추가

Subtitle 지우기

Title에는 ModelNumber 넣기

모델명 밑에 로그 기록 넣기

텍스트 추가, 설정 -DateTime 표현형을 확정한다.

담당자 이름 넣기

Column에 Text 추가, personInCharge 데이터 연결하

작동 안하는 원인 보여주기

체크박스 선택, 프로퍼티 가면, 고장났을 때 체크박스가 활성화가 되지 않는다.

차트보기 버튼 추가

아직 차트가 없기 때문에 처음에 만든 빈 페이지로 이동하게 만든다.

테스트 버튼을 통해 테스트할 수 있다.

과거 데이터 찍히게 만들기

Data Table 하나 생성

프로퍼티에서 Number of Columns를 5로 수정

방금 만든 Data Table위에 마우스 우클릭, Wrap Widget, Container로 감싸기

Data Table에 Add Query

아래의 설정을 맞춘다. Data Table 옆에 데이터베이스 아이콘 확인

Edit Column 1 선택, Text 수정.

Logs 데이터가 있다면 테스트할 때 잘 나오는데 지금은 들어있지 않다.

API Call

파이어베이스 -프로젝트 설정, 웹 API키 복사.

RealTiime Database에서, 링크 복사

FlutterFlow로 돌아와서, API Calls - Create API Call 생성

URL 형식은 https://데이터베이스 URL/최상위 key값.json?auth=<웹 API key>

0이 최상위 key 값이다.

이런 형식으로 쓰여진다.

API Call Name은 아무거나, Add Call 클릭

Response & Test에서 테스트한다. 값이 불러와지는지 확인.

안되면 Firebase Setting에서 Firestore Rules를 Deploy, Regenerate Config Files 다시 활성화, Enable Remote Config도 활성화 한다.

다시 API Calls를 만들어서 결국 불러오는 데에 성공했다.