[Firebase 3편] AngularJS로 실시간 채팅&공유 웹/앱을 만들고 싶다면?

2탄 보러가기

1탄 보러가기

소스 다운로드 > https://github.com/cpromise/realtimeChat

initAgain을 다운로드 받으시면 완성된 샘플소스를 보실 수 있습니다.

Firebase로 실시간채팅 만들기 최종편!!

Firebase를 적용하는게 요리라면 지금까지 한건 마트에서 장을 본것에 불과합니다.

이제 본격적으로 Firebase을 저희 앱에 심어보도록 합시다!

STEP 1. Firebase의 라이브러리를 심어주겠습니다.

<기존의 /www/index.html>

https://www.firebase.com/docs/web/libraries/angular/quickstart.html 에서

저희는 Angular.js는 이미 갖고있으니

아래에 있는 firebase관련 라이브러리만 가져옵시다.

1. <!-- Firebase -->
2. <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
4. <!-- AngularFire -->
5. <script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>

얘네들만 복/붙해주시면 됩니다.

STEP 1의 결과물

AngularFire는 https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js 로 해주세요

최신버전쓰니까 에러나네요 ㅠㅠ

STEP 2. app.js, controller.js 에 firebase서비스 등록하기

 app.js(8번줄)의 모듈에 firebase를 추가해주었습니다.

controller.js(1번줄)의 모듈에 firebase를 추가해주었습니다.

당연히 이건 해당 js파일에서 firebase를 사용하겠다는 뜻이겠죠?

STEP 3. ChatsCtrl 컨트롤러를 수정합시다.

STEP 4. 채팅화면을 수정합시다. (tab-chats.html)

여기나온 클래스 이름들은 모두 Ionic에서 제공하는 디자인입니다.

http://ionicframework.com/docs/components/ 에서 원하는 디자인으로 바꿔 사용하셔도 됩니다!

STEP3, STEP4의 결과물

데이터 바인딩도 잘되는걸 확인했습니다.

STEP 5. 이제 ng-repeat을 이용해서 채팅내용을 동기화시켜봅시다.

채팅화면을 수정해봅시다. (tab-chats.html)

* ng-repeat을 통해 컨트롤러에 있는 chats 객체배열을 갖고와 반복해서 뿌려줍시다.

STEP 6(Final). 이제 채팅이 잘 되는걸 보실 수 있을겁니다.

여러분이 입력한 채팅은 아래에서 확인하실 수 있습니다.

firebase에 가입하셨던 사이트 기억하시나요?

이 화면이었는데요. 여러분이 설정하셨던 아이디를 클릭하시면 (빨간밑줄)

여러분의 앱에서 전송한 객체들의 내용이 저장되어있음을 확인하실 수 있습니다.

최종모습!!!

빠밤~~~!! 

Firebase의 기나긴 여정이 끝났습니다. CSS는 원하는대로 수정해서 이쁘게 사용하시길 바랍니다!!

BGM을 깔고 싶지만.. 블로거의 기본은 BGM을 깔지 않는것이므로 ㅠㅠ

추후 업로드 내용

 - 페이스북으로 로그인하기

 - 이메일인증을 통한 회원가입/로그인하기

 - 카메라/앨범 사용하여 채팅에 전송하기

Firebase는 구글에서 인수한 서비스입니다. 취미로 개발하시는거라면 안심하고 사용하셔도 될 듯합니다^^