Firebase Web 채팅앱 만들기 - 예제 소개

Firebase 웹용 라이브러리들을 활용하여 아래와 같은  채팅앱을 만들어 보겠습니다.  채팅앱의 모든 기능이 포함되어 있지는 않습니다.  예제를 열심히 만들었지만.. 버그도 있을 수 있습니다. Firebase 의 기능을 한 번씩 활용해본다고 생각해주셨으면 좋겠습니다.

Firebase의 여러 기능을 사용하면 카카오톡과 같은 메신저에 포함되어 있는 대부분의 기능이 구현 가능하겠지만, 지금부터 구현할 기능은 다음과 같습니다.

• 유저 가입 및 로그인 
• 유저데이터 저장
• 유저 리스팅 화면
• 채팅메세지 리스팅 화면
  
• 채팅 메세지 전송
• 채팅방 리스팅 화면
• 채팅방 초대기능
• 파일 전송
• 접속 중인 유저 표시기능
• 파일 전송기능
• 푸시 기능
  
  

위 기능을 구현을 하면 아래와 같은 Realtime Database는 아래와 같은 데이터 구조를 가지게 될 것입니다. 

예제 코드는 아래와 같이 ES5 prototype 방식의 클래스로 구현이 되어 있습니다. React 또는 Angular와 같은 자바스크립트 프레임워크와 Firebase를 함께 다루는 것은 추후 블로그 포스팅으로 다루도록 하겠습니다.

화면 구성의 경우 CSS framework의 도움을 받을 것입니다. 그 중에 선택한 것은 구글의 머티리얼 디자인을 채용한 Materialize CSS 입니다. 구글 Android에서 밀고 있는 디자인이며, 모바일 친화적인  CSS framework 입니다. 아래 URL에 가시면 자세한 내용을 확인할 수 있습니다.  가이드 문서들이 한글화가 되어 있어 접근하시기가 용이하시리라 생각됩니다.

http://materializecss.com/

지금부터 구성할 예제는 크롬 브라우저에서 가장 최적화가 되어 있고, Firefox에서도 가능하며, 안드로이드 6.0이상 브라우저에서는 정상 작동 됨을 확인 하였습니다. 예제를 따라오실 때는 되도록이면 크롬 또는 파이어폭스에서 실행해 주시기를 바랍니다.

자 이제부터 시작해보겠습니다!

예제 소개 Firebase 설정하기 Hosting을 활용한 프로젝트 준비 작업 Authentication을 이용한 유저 가입 및 로그인 구현하기 Realtime Database를 이용한 채팅기능 구현 - Reatime Database 특징 및 데이터 구조 Realtime Database를 이용한 채팅기능 구현 - 유저데이터 저장하기 Realtime Database를 이용한 채팅기능 구현 - 유저리스팅 화면 Realtime Database를 이용한 채팅기능 구현 - 채팅화면 및 채팅메세지 리스팅 Realtime Database를 이용한 채팅기능 구현 - 채팅메세지 전송기능 Realtime Database를 이용한 채팅기능 구현 - 채팅방 리스팅화면 Realtime Database를 이용한 채팅기능 구현 - 채팅방 초대 기능 Realtime Database를 이용한 채팅기능 구현 - 접속 중인 유저 표시하기 Storage를 이용한 파일 전송기능 Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - FCM Token 정보 저장 Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - Functions를 통한 FCM 발송 Cloud Messaging과 Functions을 이용한 푸시메세지 기능 - Service worker를 이용한 FCM수신 Realtime Database 권한 설정