회고) Firestore로 앱 쪽지에서 채팅으로 바꾸기

 

시작하게 된 과정

 

이번에 부트캠프에서 만든 앱 "피코 PICO"가 출시되었다.

 

MBTI를 통해 나와 맞는 사람을 PICK!

새로운 연인과 두근거리는 CONNECT!

 

위와 같은 컨셉을 바탕으로 매칭 어플을 출시하게 되었다.

https://apps.apple.com/kr/app/%ED%94%BC%EC%BD%94-pico-pick-connect/id6473959557

‎피코 PICO: Pick & Connect

 

출시 후 수많은 오류와의 만남이 있었지만

그 중에서 쪽지에서 채팅으로 변화하기 위해 재수정한 일을 회고하고자 한다.

 

쪽지를 선택하게 되었던 이유?

초반엔 다른 데이터베이스를 사용하기로 하였는데 웹소켓이 없어

채팅을 하기 힘들 것 같다는 말을 바탕으로 쪽지를 하기로 하였었다.

하지만 다른 여러 이유로 firebase를 사용하게 되면서 채팅을 할 수 있게 되었지만

부트캠프의 마감시간에 맞추지는 어려울 것 같아 쪽지를 우선적으로 만들었다.

 

그럼 지금에서야 채팅으로 바꾸는 이유?

부트캠프의 끝으로 수정이 가능하게 되었기도 하고

쪽지의 ui는 좋았으나 아무래도 소개팅 어플에서 쪽지로 대화를 한다는 것 자체가

너무 요즘과는 맞지 않는다는 느낌을 받아 출시 후 채팅을 만들어 보게 되었다.

---

어려웠던 점

 

데이터 구조를 제외하고 코드에서 가장 어려웠던 점은 채팅을 불러오고 보여주는 부분이였다.

Firebase에 대한 지식이 많지 않아 검색을 바탕으로 진행되었는데 대부분 채팅을 만들 때

Firebase realtimebase를 사용한 모습을 주로 볼 수 있어 firestore에서 데이터 구조를 짜고

그 부분을 가져오는 부분에서 많은 오류를 마주했었다.

 

- room 구조

 

원래는 room의 데이터 구조를 room - roomID - chatting - chatting 데이터의 형태로 데이터 구조를 짰지만

데이터를 제대로 받아오지 못하였다.(코드의 부족함일 가능성이 높음 ㅎㅎ)

현재는 room 데이터 구조를 room - 사용자ID - room 배열 형식으로 데이터 구조를 설정하였다.

room 배열 안에 마지막 메시지에 대한 데이터를 담아 room 배열을 만들었다.

 

roomID가 아닌 사용자ID를 사용한 이유가 있을까?

해당 사용자에 따라 room이 여러 개 형성되고 이에 따라 사용자에 따라

room 데이터를 받아오는 것이 더 편하다고 생각해 현재와 같이 진행하게 되었다.

 

마지막 채팅을 room 데이터에 저장한 이유는?

채팅 데이터로 이동해 데이터를 전체 비교해 데이터를 받아와 보여주는 방법보다는 채팅이 쳐지는 순간

해당 데이터가 업데이트 되면서 room에서 데이터를 받아와 보여주는 것이 더 편리하고 판단하였기 때문이다.

 

 

- chatting 구조

room에서 나온 chatting의 구조는

chatting - 사용자ID - receiverChatting/senderChatting으로 데이터 구조를 설정하였다.

 

roomID가 아닌 사용자ID를 사용한 이유는?

room으로 받아오는 것보다는 사용자ID를 활용해 속 데이터를 받아와야 했기에 사용자ID를 사용하게 되었다.

하지만 이 방식을 사용하다보니 데이터에서 roomID가 맞는지 해당 사용자의 모든 데이터를 확인해서 받아와야 하기에

맞게 데이터 구조를 짜서 사용하고 있는지에 대해서는 아직도 의문이다.

 

 

- 데이터를 가져오는 과정에서 발생한 오류 ( Error to decode document data )

데이터를 가져오는 과정에서는 데이터 model이 수정되는 일이 잦았기에 이에 따라

저장된 데이터와 해당 데이터의 model의 형태가 달라 데이터를 받아오는 데 오류가 자주 발생하였었다.

 

데이터를 받아오는 코드

 func loadChatDetail() {
    dbRef.collection(Collections.chatDetail.name)
        .document(roomId)
        .addSnapshotListener { (documentSnapshot, error) in
            guard let document = documentSnapshot else {
                print("Error fetching document: \(error!)")
                return
            }
            if let datas = try? document.data(as: ChatDetail.self).chatInfo {
                let sorted = datas.sorted(by: {$0.sendedDate < $1.sendedDate})
                self.chatInfoArray = sorted

                DispatchQueue.main.async {
                    self.reloadChatDetailTableViewPublisher.onNext(())
                }
            }
        }
}

Chatting 데이터 구조와 같은 데이터 중에서 senderChatting 내용을 받아오는 코드로

roomID를 비교해 같은 데이터들만 가져오도록 하였고

한 화면에 나타내는 채팅 내용을 페이징해 보여줄 수 있도록하였다.

 

receive 또한 동일한 방법으로 받아와 해당 채팅들을 시간 순으로 정렬하여 화면에 보여지도록 하였다.

 

데이터 세팅 코드

 

extension ChattingDetailViewController {
    private func bind() {
        let sendInput = ChattingViewModel.Input(listLoad: loadDataPublsher, refresh: refreshPublisher)
        let sendOutput = viewModel.transform(input: sendInput)
        
        sendOutput.reloadChattingTableView
            .withUnretained(self)
            .subscribe { viewController, _ in
                viewController.chattingView.reloadData()
            }
            .disposed(by: disposeBag)
    }
}

rxswift를 활용해서 해당 데이터을 받아와 리로드 될 수 있는 코드를 사용했다.

Rxswift에 대한 지식이 아직 제대로 정착되지 않아서

수정 사항이 있는 점이 많이 아쉽지만 수정해 더 좋은 코드가 되도록 할 것이다.

아쉬운 점

 

- 데이터 구조에 대한 지식이 적어 데이터 구조를 마음에 들도록 짜지 못했다.

---> 다른 데이터베이스를 사용해서 연결 해보고 싶다.

 

- rx에 대한 지식이 아직 적어 사용한 코드가 제일이냐고 하면 그렇다고 하진 못할 것 같다.

---> rxswift에 대한 지식을 키워 수정을 더 해보고 싶다.

 

- 이전 유저들이 사용하던 쪽지의 내용을 받아오지 못했다.

---> 다음에는 이 과정을 받아서 넣는 과정을 시도해보고자 한다. 

---

현재 채팅 상황

---