1. 들어가기에 앞서
- Firebase 웹용 라이브러리들을 활용하여 아래와 같은 채팅앱을 만들어 봅니다.
- 채팅앱의 모든 기능이 포함되어 있지는 않습니다.
- 예제를 열심히 만들었지만.. 버그도 있을 수 있습니다.
- Firebase 의 기능을 한 번씩 활용해본다고 생각해주셨으면 좋겠습니다.
2. 소개
-
Firebase의 여러 기능을 사용하면 카카오톡과 같은 메신저에 포함되어 있는 대부분의 기능이 구현 가능하겠지만, 지금부터 구현할 기능은 다음과 같습니다.
- 유저 가입 및 로그인
- 유저데이터 저장
- 유저 리스팅 화면
- 채팅메세지 리스팅 화면
- 채팅 메세지 전송
- 채팅방 리스팅 화면
- 채팅방 초대기능
- 파일 전송
- 접속 중인 유저 표시기능
- 파일 전송기능
- 푸시 기능
-
위 기능을 구현을 하면 아래와 같은 Realtime Database는 아래와 같은 데이터 구조를 가지게 될 것입니다.
- 예제 코드는 아래와 같이 ES5 prototype 방식의 클래스로 구현이 되어 있습니다.
- React 또는 Angular와 같은 자바스크립트 프레임워크와 Firebase를 함께 다루는 것은 추후 블로그 포스팅으로 다루도록 하겠습니다.
/**
* FirebaseChat ES5 클래스
*/
function FirebaseChat(){
this.init();
this.initEvent();
}
/**
* 초기 필드 변수 할당
*/
FirebaseChat.prototype.init = function(){
this.auth = firebase.auth();
this.liGoogleBtn = document.getElementById('liGoogleBtn');
}
/**
* 초기 이벤트 바인딩
*/
FirebaseChat.prototype.initEvent = function(){
this.liGoogleBtn.addEventListener('click', this.onGoogleBtnClick.bind(this));
this.auth.onAuthStateChanged(this.onAuthChange.bind(this));
}
/**
* Google 로그인 버튼 클릭
*/
FirebaseChat.prototype.onGoogleBtnClick = function(){
var googleProvider = new firebase.auth.GoogleAuthProvider();
this.auth.signInWithPopup(googleProvider).then(function(result) {
console.log('로그인 성공')
}).catch(function(error) {
alert('로그인에 실패하였습니다');
console.error('구글 로그인 과정 에러',error);
});
}
/**
* 인증 정보가 변화 되었을 시에 변화
*/
FirebaseChat.prototype.onAuthChange = function(user){
if (user) {
console.log('user로그인 : ',JSON.stringify(user));
} else {
console.log('로그아웃')
}
}
- 화면 구성의 경우 CSS framework의 도움을 받을 것입니다.
- 그 중에 선택한 것은 구글의 머티리얼 디자인을 채용한 Materialize CSS 입니다.
- 구글 Android에서 밀고 있는 디자인이며, 모바일 친화적인 CSS framework 입니다.
- 아래 URL에 가시면 자세한 내용을 확인할 수 있습니다.
- 가이드 문서들이 한글화가 되어 있어 접근하시기가 용이하시리라 생각됩니다.