모든내용에 대한 구현은 회사측 깃허브에 private 권한으로써 보여드릴수 없습니다. 6.26
친구탭을 이용한 1대1 채팅 구현 flutter 학습
firebase 사용법 학습
issue -파이어베이스에 파라미터형식이 달라서 오류 났던 경우가 있음. 오류내용 The following StateError was thrown building StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(dirty, dependencies: [MediaQuery], state: _StreamBuilderBaseState<QuerySnapshot<Map<String, dynamic>>, AsyncSnapshot<QuerySnapshot<Map<String, dynamic>>>>#3fd4d): Bad state: field does not exist within the DocumentSnapshotPlatform 이내용이 해당 오류이다. 이내용이 있다면 파이어베이스 문서형식 확인하기
6.27,8,9
firebase 를 사용하여 Get함수,Getback 함수 then 함수,set 함수등을 활용하여 메소드를 만들어서 채팅신청 버튼을 눌렀을 때 해당 chatroom id 를 가지고 있는 채팅방을 생성하는 로직을 구현하였습니다. 원래 로그인 단계에서 로그인을 구현을 했다면 이런일은 없겠지만 이번회사에서 만들어보는 어플은 익명으로 로그인을 하기때문에 랜덤문자열을 뽑아주는 함수를 사용하여 인증을 하는 방법을 사용합니다.
6,30-7,4 firebase와 getx 를 활용하여 chat 기능을 구현하였습니다. 채팅을 쳤을때 한번만 추가가되었어야했는데 반복을 사용하지않았는데 끊임없이 찍힘과 동시에 firebase 에 데이터가 찍혔습니다. 이를 해결하기 위해서 json seriallize를 시행하였는데 이문제도 아니었고 인스턴스에 입력값이 잘못되어서 그런것이였습니다. 이를 해결하였습니다.
7,5 채팅방리스트와 채팅방을 구현하는데에 있어서 firebase 를 이용해서 최신메세지를 최신화하는작업을 하였습니다. 이는 streambuilder와 snapshot을 이용해서 최신화를 바로바로 할 수 있도록 하고있습니다. 또한 그에대한 마지막 메세지 시간을 채팅방 리스트에 놓았고 그시간과 채팅방 내용을 ui에 표시하고 있습니다. 채팅방리스트를 최신 시간별로 위부터 정렬하는 로직을 구현하였습니다.
7,6 채팅방리스트에 뜨는 채팅방이름에 대한 이슈가 있습니다. 자신이 만들었을때 만들어지는 채팅방이름에 대해 상대방이 보았을때는 그 상대편에 닉네임이 나와야하는데 그러지가않아서 이슈가 있었습니다. 이 이슈를 해결하기 위해 alamofire 에서의 두가지 컬렉션에서 따로 데이터를 받아와서 uid 를 확인하고 검색하여 자신의 participants 가 아닌걸 파악하고 그에대한 닉네임을 채팅방 스크린에 불러다 주는 역할을 수행하는 함수를 제작하였습니다.
7,7-7,18 구글맵스를 연동했습니다. 구글맵이 필요한 이유로는 상대방의 위치를 채팅방에서 실시간으로 확인할수있어야 하는 요청에 따른 기능입니다. 또한 실시간으로 움직이는 위치를 찍는 기능을 구현했습니다. 백그라운드에서도 이동을 한다면 알람식으로 얼마나 왔는지 확인을 하는식의 기능을 추가하였습니다. 이를 참고하는 것으로 https://medium.com/flutter-community/flutter-google-map-with-live-location-tracking-uber-style-12da38771829 이 링크를 참고하여 구현해보았습니다. 확실히 주스택 swiftui 보다는 많은 패키지와 라이브러리가 있었고 라이브러리 자체를 사용하는데 코코아팟이나 팟파일을 별도 설치하는것이 아닌 소스내에서 구현과 다운로드를 받을수있어서 공식문서만 잘 참고를 한다면 충분히 좋은 스택으로 가져갈수있을 거라는 생각을 했습니다.
7,19-7,24 이미지 캐싱을 구현했습니다. 이미지캐싱에는 여러가지 방법이 있는데 그중 이미지 캐쉬 네트워크를 사용해서 처음 불러오는 이미지는 조금 시간이 걸리지만 그다음 로딩부터는 속도가 훨씬 빨라지는 위젯이라고 생각하면 좋을것같습니다. 이가 필요한 이유는 이미지등을 사용하여 서로 통신하는데 채팅들은 스냅챗이라는 firebase 를 사용하는데 이미지 또한 실시간으로 반응을 해야하기 때문에 사용하였습니다.
7,25 채팅방 기능에대한 버그를 수정하였습니다. CHAT-Proto 에 대한 기능중 채팅방안에 지도가 연동되어있고 그 위치를 새로고침하는 토글이 있는데 이 토글을 활성화시킬때 지도뿐만아니라 모든 부분에 대한 리빌드가 되어서 화면이 깜빡이는 현상이 나타났습니다. 이러한 이유로 stream builder 를 expanded등으로 바꾸는 노력을 해보았지만 아무런 변화가 없었습니다. 이를 수정하기 위해 소스를 뜯어본결과 팀원분께서 로직에 대한 버그를 발견했습니다. 이 버그는 채팅방을 리빌드하는과정에서 다시한번 메세지버블을 호출하는 버그였습니다. 이부분을 주석처리하자 새로 불러오지않았기때문에 깔끔하게 수정이되었습니다. 이런 버그들말고 채팅을 치는 공간을 2번눌러야 키보드가 올라오는등의 버그들은 간단한 라이브러리등으로 상태관리를 수정하여 해결하였습니다.
7,25-7,30 푸시알람을 구현합니다. 채팅기능을 구현한다고 하면 알람기능은 필수적입니다. 처음에는 프로토타입이기 때문에 로컬에서만 푸시알람과 토스트업을 구현해보려고 하였습니다. 물론 모두 구현은 가능했지만 문제가 생깁니다. 사용자1과 사용자2가 같은 방에서 채팅을 하는중에는 서로에 대한 채팅에 알람이 뜨지않아야한다는것입니다. 하지만 이를 로컬에서 구분하기 위해서는 로컬 데이터베이스에 모든 메세지를 가지고있다가 같은 채팅방에 있는지없는지를 파악하여 없을경우에만 최신 메세지를 토스트나 알람으로 띄워야한다는것이었습니다. 현재 프로젝트에서 사용하는 Grpc 와 Firebase 두가지를 사용하면서 구현해내는게 쉽지않았고 회의를 통해 서버에서 메세지와 같은 방에있는지없는지에 대한 상태를 보내주는것으로 합의를보고 구현하였습니다. 그래서 백그라운드에서는 알람이 뜨고 포그라운드에서는 토스트업이 떠야하는것을 목표로 구현하였습니다. 이 기능을 구현하는데 어려웠던점은 서로 상태가 다른 데 협력을 해야하니까 구현방법을 구현할때 충분한 시간과 계획을 짜고 구현했어야하는 부분이 가장 힘들었던 부분이었던것같습니다.
7,31-8,8 토스트기능의 오류덕에 포그라운드 토스트의 버그를 다시 수정하였습니다. 이 버그에 이유는 grpc 에 통신 오류였습니다. 성격이 급한나머지 후다닥 토스트가 오는지 확인을 했고 그 속도를 토스트가 반응 하지못하였습니다. 이를 백앤드 팀과 상의하여 트래픽을 줄여내서 거의 동시에 토스트를 띄우는 것을 완료했습니다. 그와 동시에 토스트 ui 에 대한 디자인을 수정했습니다. 이는 토스트라이브러리가 아닌 토스트를 커스텀해주는 snackbar 등을 사용하여 백그라운드 노티와 디자인을 맞췄습니다. 또한 토스트를 눌렀을때 해당 채팅방으로 들어가는 반응을 추가하였습니다. 토스트는 이정도로 마무리가 되었고 다른 일중에 채팅하기버튼을 친구 목록에서 눌렀을때 새로운 방이 생성이되고 그방을 뒤로가기한 후 다시 그친구한테 채팅하기를 누른다면 원래 기록이되어있던 방으로 들어가야하는데 새로운 채팅방을 만드는 버그가 있었습니다. 이를 해결하였습니다. 이를 해결한 방식을 알려주기 위해서는 어떤 흐름인지 알아야하는데 채팅방 리스트를 스냅샷으로 실시간으로 불러오고 채팅방의 이름은 상대방 닉네임으로 해야해서 uid 를 검색해서 있는 방이면 그 방에 들어가는 방식이고 그 정보의 통신은 firebase를 사용하였습니다. 근데 firebase 에서 불러오는 과정에서 stream 에다가 firebase를 초기화한 탓에 채팅방리스트를 불러올때마다 있는 방을 검색해야하는것이 계속 초기화가 되었습니다. 그래서 기존의 방이 있는지 알지못하는 문제가 생겼습니다. 이를 버튼이 눌릴시에만 초기화하게 수정하여 버그를 수정하였습니다.
8,9-8,17 토스트 디자인을 바꾸엇습니다. 기존 flutter toast를 이용할경우에는 확실히 ui 적으로 다룰수있는것들이 제한적이었습니다. 그래서 팀장님께 도움을 받은 라이브러리중에 snackbar라는 토스트 업,다운 라이브러리를 발견했고 좀 더 다양한 디자인을 구현할수있었습니다. 또한 팀원의 소스에서 디버깅시 Google Map Prototype 문제가 있었는데 이게 문제가 생겼었고 이를 해결했습니다. 이문제는 firebase 에서 없던 방을 계속 호출 하는것때문에 인식을 못하고 계속 null 을뱉었고 해당방과 통신이 안되는 문제였습니다. 시간이 오래걸렸던 이유는 제가 이 프로젝트를 맨처음부터 합류한게 아닌 틀이 잡힌상태로 시작하여서 Uid 부분은 Grpc로 통신을 하고 나머지 부분은 firebase 로 통신을 해서 해결하는게 조금 걸렸었습니다. 마지막으로 백그라운드 토스트를 사용한 채팅방 종속관리에 대한 이슈 였습니다. 백그라운드에서는 방을 불러오지만 해당방에서 타이틀없음이라는 roomid 로 만들어지는데 뒤로갔다가 생성된 방으로 다시 들어가면 상대 닉네임으로 잘 나오는 문제를 해결했습니다. 이 이슈의 이유는 Getx에 대한 문제였습니다. Gettoname 을 사용하여 방을 불러왔는데 이 함수는 채팅방을 불러오는 것이 아닌 이름을 불러오는것으로 이를 채팅방에 적용해서 넣어야하는것이여서 이를 해결했습니다.