Firebase 기반 메신저 앱 - DirectTalk9 (Web과 PC 버전)

DirectTalk9 Web과 PC 버전은 이전에 작성한 Android 버전을(Firebase Firestore 예제) 변환한 예제로,

Web은 React (Redux)을 익히기 위해서

PC 버전은 Electron을 학습하기 위한 예제로 제작하였다.

특히, PC 버전은 Web 버전과 동일한 코드로 작성되었지만 PC 환경에 맞추어 수정하였다.

현재는 기본적인 채팅 기능 위주로 구현되었고, 계속 버그 수정 및 기능을 보강할 예정(?)이다.

디자인은 능력이 되지 않아서 Google's Material Design 가이드를 준수하는 material-ui.com을 사용하였다.

먼저, Web 버전을 설치하기 위해서는 NodeJS와 git이 설치되어 있어야 한다.

NodeJS와 git 설치는 찾아보길 바라고 여기에서 정리하지 않는다.

DirectTalk9 Web 버전은 다음과 같이 5 단계의 과정으로 설치를 진행한다.

1. 소스 다운로드: git clone https://github.com/gujc71/DirectTalk9_web.git
2. 관련 라이브러리 설치: npm install
3. Firestore.js에 접속 정보 입력
4. Firebase 관련 서비스 (Authentication, Storage, Firestore) 활성화
5. 실행: npm start

상세하게 정리하면, 콘솔(cmd) 창에서 github의 소스를 다운로드 받는다.

git clone https://github.com/gujc71/DirectTalk9_web.git

소스를 다운로드 받은 폴더로 이동(cd DirectTalk9_web) 해서 필요한 라이브러리들을 설치한다.

npm install

DirectTalk9 Web 버전은 React, Redux, Material-ui, ImageTool (image Resize)등이 사용되었고,

package.json 파일에서 설치된 라이브러리를 확인할 수 있다.

설치한 폴더(DirectTalk9_web) 하위의 src\reducer 폴더에 있는 Firestore.js 파일에

다음 그림과 같이 Firebase 설정 정보를 채워준다.

Firebase 설정 정보를 가져오는 방법은 이 문서나 문서내의 우측에 있는 동영상을 참고 하면 된다.

이전에 작성된 NodeJs 예제 문서를 참고해도 된다.

다음으로 Firebase console에 접속해서 Authentication, Storage, Firestore를 사용할 수 있도록 해야 한다.

Firebase는 Gmail 계정만 있으면 사용할 수 있다.

웹 브라우저에서 Firebase console에 접속해서 Gmail 계정으로 로그인하면 된다.

로그인을 위한 인증(Authentication)은 다양한 방식이 제공되는데

, "이메일/비밀번호"을 사용할 수 있도록 하고, 설정 방법은 이전에 작성한 Firebase 설정 문서를 참고하면 된다.

데이터를 저장할 Cloud Firestore는 [테스트 모드로 시작]을 선택하면 되고, 설정 방법은 이전에 작성한 Firebase 설정 문서를 참고한다.

파일을 저장할 Storage는 그림과 같이 콘솔의 왼쪽 메뉴에서 Storage를 선택하고, 화면 중앙에 나타나는 [시작하기] 버튼을 눌러주면 된다.

설정을 마쳤으면 콘솔 창에서 NodeJS 서버를 실행한다.

npm start

웹 브라우저에서 다음과 같은 화면이 실행된다.

처음에는 가입된 회원이 없으니 계정으로 사용할 이메일과 비밀번호를 입력하고,

"Create Account" 버튼을 눌러서 회원 가입을 하면 된다.

테스트 용이기 때문에 이메일 주소는 꼭 사용하는 이메일일 필요는 없다.

user1@test.com 와 같이 입력해도 된다.

로그인을 하고 나면 사용자 리스트(UserList) 화면이 나타난다.

왼쪽 메뉴에서 채팅방 리스트(Rooms)를 실행한다.

몇 개의 계정을 생성하고, 대화 상대를 선택해서 채팅을 하면 된다.

브라우저의 크기를 줄이면 반응형으로 변하는 화면을 볼 수 있다.

다음으로, PC 버전을 설치하는 방법은 Web 방식과 거의 유사하다.

1. 소스 다운로드: git clone https://github.com/gujc71/DirectTalk9_pc.git
2. 관련 라이브러리 설치: npm install
3. Firestore.js에 접속 정보 입력
4. Firebase 관련 서비스 (Authentication, Storage, Firestore) 활성화
5. 실행: npm run dev

다운로드 받는 주소가 DirectTalk9_web에서 DirectTalk9_pc로 바뀌고

라이브러리 설치 등은 모두 동일하다 (Electron 설치로 라이브러리 설치 시간이 더 많이 걸린다).

Firebase 서비스를 사용하기 위해 콘솔에서 지정하는 설정은 Web 버전에서 진행한 경우 별도로 지정하지 않아도 된다.

Web 버전과 가장 큰 차이점은 실행 방식이다.

Web 버전은 npm start로 시작하지만

PC 버전은 다운로드 받은 설정이 npm run dev로 실행하게 되어 있다.

npm run dev로 실행하면 웹과 응용프로그램이 동시에 실행되고,

npm run build로 빌드를 진행하고

npm run electron을 실행하면 응용프로그램만 실행된다.

 참고  React (특히 create-react-app)와 Electron을 같이 실행하는 방법은 설정이 복잡하다.

여기에서는 Christian Sepulveda이 제시한 방법을 사용했으니, 상세한 설정은 관련 자료를 읽어보면 된다.

실행 화면은 다음과 같다.

Web 버전에서는 왼쪽 메뉴로 구성했던 사용자, 채팅방, 계정 정보를

그림과 같이 탭(Tab)으로 제작하였다.

사용법은 웹 버전과 동일하지만 다음 그림처럼 대화 상대별로 채팅창을 실행할 수 있다.

Web 버전에서는 웹 브라우저내의 다이알로그로 구성했기 때문에 하나의 채팅창만 실행할 수 있고,

PC 버전에서는 별창(new Window)으로 구현하여 동시에 여러 채팅창을 실행 할 수 있다.

이상으로 DirectTalk9의 Web버전과 PC 버전을 설치하는 방법을 정리하였다.

Android 버전과는 채팅 할 수 없다.

Android 버전은 메시지 전송 시간을 서버 시간을 사용하고(serverTimestamp),

Web과 PC 버전은 클라이언트(JS의 new Date) 시간을 사용하기 때문에 오류가 발생한다.

Web과 PC 버전에서 서버 시간을 사용하도록 작성하면 되지만 Firebase 설치와 설정이 필요해서 제외하였다.

이외에도 몇 가지 버그가 있고, 구현해야 될 기능도 많지만 제법 그럴듯하게 작동하는 예제(?)로,

응용해서 사용한다면 개발에 도움이 될 것 같다.

작성된 데이터 Cloud Firestore에 저장하고, 구조는 Android 버전과 동일하다.

먼저 사용자(users)와 채팅방(rooms) 정보를 저장하는 컬렉션(collection)으로 구성하였다.

사용자(users)에는 사용자 고유 식별값(uid)과 계정(이메일, userid), 상태 메시지(usermsg), 사용자 이름(usernm)으로 구성한 일종의 회원 테이블이다.

토큰(token)은 Firebase에서 제공하는 것으로 FCM(Firebase Cloud Message)을 사용하기 위해 필요한 필드로

Andoid 버전에서는 사용하지만 Web과 PC 버전에서는 아직 구현하지 않아서 사용하지 않는다.

로그인과 회원에 대한 기본 정보는 Firebase 인증(Authentication)으로 처리하지만

Firebase 인증으로 처리되지 않는 정보들을 users 컬렉션에서 저장하고 관리한다.

채팅방(rooms)은 채팅 정보를 관리하는 컬렉션으로,

마지막 메시지(lastmessage), 채팅방 참여자(users)의 필드로 구성된다.

메시지(messsge)는 사용자가 작성한 메시지로 각 채팅방의 하위  컬렉션으로 작성되고,

메시지 문장(msg), 메시지 종류(텍스트, 이미지, 파일), 작성시간(timestamp), 작성자(uid)로 구성했다.

메시지를 읽은 사용자(readusers)는 메시지별 안 읽은(unread) 사용자 수(참여자수-읽은 사용자수)를 보여주는데 사용한다.

마지막 메시지(lastmessage)와 관련된 필드는 메시지(messsge) 컬렉션과 동일한 구조를 가지고,

채팅방 리스트를 출력할 때 마지막 메시지 내용과 시간을 보여주기 위해 사용했다.

채팅방 참여자(users) 사용자의 고유값(uid) 값을 키(필드)로 사용한다.