[Flutter] 간단 배달앱, Firebase 환경설정 및 컬렉션 설계 (+트러블슈팅)

5.1.1-6)

- dynamic link는 24년 중 deprecate 될 예정.

- Firebase Local Emulator Suite 제공 서비스: cloud firestore, realtime db, firebase cloud storage, auth, hosting, cloud functions, etc.

- 에뮬레이터는 선호하는 기본값을 사용하여 머신의 다른 포트에 바인딩 됨. (지정포트 있음)

 

5.1.7)

- firebase init하고 프로젝트 생성하면서 아래의 문제가 뜸:

Error: Failed to create project because there is already a project with ID local-basic-test2. Please try again with a unique project ID.

다른 이름으로 계속 시도해보았으나 같은 에러가 떠서 stackoverflow 찾아보니 전체 클라우드 내 유니크한 이름이어야 했음...

The error message tells you what is wrong:

there is already a project with ID tour-of-heroes

Project IDs have to be globally unique within all Firebase projects (o across all users) and a project named tour-of-heroes already exists.

The error message also tells you what to do:

Please try again with a unique project ID.

The suggestion to use the console is precisely because that will ensure your project ID is unique amongst all Firebase projects.

If you want to use the CLI, it is up to you to use a unique project ID - for example by adding a unique suffix (e.g. tour-of-heroes-20220109 or yousafs-tour-of-heroes).

그래서 local-basic-test-fc 이런식으로 하니 정상적으로 생성됐음.

- 진짜 킹받는 에러가 나옴:

(base) @-Mac firebase-basic % firebase emulators:start
i  emulators: Starting emulators: firestore, database
i  firestore: Firestore Emulator logging to firestore-debug.log
✔  firestore: Firestore Emulator UI websocket is running on 9150.
i  database: Database Emulator logging to database-debug.log
i  ui: Emulator UI logging to ui-debug.log
⚠  ui: Fatal error occurred: 
   Emulator UI has exited with code: 1, 
   stopping all running emulators
i  ui: Stopping Emulator UI
i  database: Stopping Database Emulator
i  firestore: Stopping Firestore Emulator
i  hub: Stopping emulator hub
i  logging: Stopping Logging Emulator

- 찾아보니 node 버전과 안맞아서 그런 것 같다해서 기존의 v20에서 nvm을 사용하여 v18.15.0으로 낮췄으나 여전히 해결되지 않음.

- 아니 계속 안되다가 컴퓨터 껐다 키니까 됐음.

 

5.1.8-9)

- Firebase Auth 소개 및 코드 분석.

- Firebase Auth 실습 중 `require': cannot load such file -- xcodeproj (LoadError) 요런 에러가 뜨면서 lib 폴더 내 firebase_options.dart 파일 생성에 실패함.

이 커멘트가 도움이 됐음: https://stackoverflow.com/questions/59782485/pod-install-fails-with-cannot-load-such-file-xcodeproj

pod install fails with "cannot load such file -- xcodeproj"

- 자세히는, sudo gem install cocoapods --user-install 입력하고 설치한 후 다시 firebase configure~~~ 하니 돼버렸음.

- Firebase console에 로그인 데이터 들어온 것까지 잘 완성함. 간혹 에러가 날 수 있는건, 에뮬레이터에서 안드로이드의 경우 퍼미션이 추가가 안되면 안될 수 있음. 그래서 추가해주는 작업 필요함.

 

5.1.10-11)

- Firebase Cloud Storage는 사용자가 올리는 이미지, 영상, 파일 등 데이터를 저장할 수 있는 저장소. AWS S3 bucket 같은 느낌인듯.

- 이 뒤의 실습들은 안해도 될 것 같아서 안함.

- firebase는 try catch로 예외처리 꼭 해주래.

 

5.1.12-13)

- Firebase Cloud Firestore는 nosql임. 몽고디비 같은거임.

- collection/document/data 약간 이런 느낌.

- realtime db와 다른 점은 rtdb는 stores data as one large json tree, where cloud firestore stores data as collections of documents.

- collection 삭제는 사용자에게 제공하는 행위 권장하지 않는다함.

- 실습 과정 중 sdk issue 있어서 해결 방법도 보여줌.

- firestore가 최초로 만들었던 spartify 프로젝트에 쓰인 db인 듯 함.

 

5.1.14-15)

- RTDB도 nosql인데, 초기 firebase database 제품임. 요즘은 파이어스토어 많이 쓰는 추세지만 데이터모델 자체의 개념이 조금 다르다 함.

- json 데이터 저장 형식에 대한 주의사항들 알려줌.

 

5.1.16-18)

- 배달앱 환경설정, 프로젝트 준비. 꽤 친절하고 자세하게 설명해줌. 이거 좋은 듯.

- 사용할 패키지들 pubspec.yaml에 일괄 추가함.

 

5.1.19-20)

- build시 에러가 난다면 아마 minSdkVersion이 안맞아서 일 거. app/src/build.gradle에서 21로 맞추면 됨.

- 앱 기획 및 로그인 화면 구현 (w/ validator).

 

5.1.21-28)

- assets폴더 내 이미지. 키보드 올라오면 깨지는 건 singlechildscroll로도 해결 가능하지만 많은 영역을 잡아먹는 게 아니라면 resizeToAvoidBottomInset도 옵션임.

- 강사도 스크린부터 만듦 -> 위젯 작업 -> DB 모델링 -> 백엔드 구현

- 계속 화면 위주로 함 (판매자 화면, 제품 등록, 제품 상세, 장바구니, 제품 리뷰 등).

 

5.1.29-30)

- 데이터베이스 설계 및 백엔드 개발 스펙 정의.

- uid는 유저의 고유 아이디.

- db 설계 여러 방식 소개.

 

5.1.31)

- GoRouter로 라우터 작업 시작.

 

5.1.32)

- 데이터 모델링 (w/ @freezed).

-  dart run build_runner build 하면 코드를 생성할 수 있는 걸 만들어줌.

- json 파싱할 수 있게끔 설정도 해줌.

 

5.1.33)

- 회원가입 기능 구현.

- kDebugModel 세팅.

5.1.34) 이메일 로그인 기능 구현.

5.1.35-36) 구글 로그인 기능 구현 (이미지 -> InkWell).

- 구글 로그인은 로컬 에뮬레이터에서 따로 지원하지 않아.

- 파이어베이스 콘솔에서 인증서 지문 설정.

 

5.1.37-38)

- 판매자 화면 기능 구현.

- showAdaptiveDialog vs. showDialog: 플랫폼에 맞게 표시되게 해줌 (adaptive사용시(?))

 

5.1.39-40)

- image picker로 이미지 가져오기.

- 카메라 패키지로 카메라 엑세스.

 

5.1.41)

- 제품 정보 등록시 카테고리 갖고오는 거 구현.

- storage rule 수정하여 스토리지에 데이터 추가함.

- image compress 패키지로 이미지 사이즈 축소.

- 일괄등록도 간단하게 구현해봄 -> 이건 걍 테스트용.

 

5.1.42)

- 제품 정보 조회(사실 위에서 이미 함).

- 써치 기능은 future 보단 stream 사용 권장 (삭제 수정도 스트림으로 해두면 곧바로 반영됨/퓨처는 새로고침 해야됨).

 

5.1.43)

- 제품 정보 수정시 update 대신 set method도 가능한데 문제는 set은 덮어쓰는 느낌이라 지양.

 

5.1.44)

- 데이터 삭제 기능 구현.

 

5.1.45)

- 홈화면 기능 구현 by query 작성 (스트림 방식).

- 카테고리, 오늘의특가 기능 구현.

 

5.1.46)

- 제품 상세 화면 기능 구현.

 

5.1.47-50)

- 장바구니 기능 구현.

- 근데 장바구니 목록에서 쁠마+- 하는 건 플러터 내부가 아닌 파이어베이스에서 하고 스트림으로 가져오는 방식으로 구현함(--> 이러면 서버에 요청이 수시로 발생하여 부하가 많이 발생하지 않나?????).

 

5.1.51)

- 앞서 언급한 로그인 후 userCredential 상태관리를 riverpod 사용하여 처리.

- 로그인 상태가 필요한 곳에 컨슈머를 추가해줌.

 

5.1.52-53)

- 리뷰 기능 구현.

 

 

 

 

출처: 패스트캠퍼스