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

1탄 보러가기

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

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

Firebase로 실시간 채팅만들기 2탄이 다가왔습니다.

오늘은 코딩을 하지 않고 코딩을 위한 준비만 하도록 하겠습니다!!

혹시라도 IONIC설치가 궁금하신분은 댓글달아주시면 5분안에 텨옵니다.ㅎㅎ

STEP 1. IONIC 프로젝트를 만들어주세요.

프로젝트를 만드실 위치에서 

ionic start realtime-chat

프로젝트가 생성이 되었습니다.!!!

realtime-chat 디렉토리로 들어가서

ionic serve를 실행해줍니다.

serve를 해주면 바로 웹브라우저에서 기본 앱이 실행이 되네요.

채팅에 걸맞는 셋팅을 하기위해 에디터를 열어줍시다!!!

저는 서브라임텍스트2로 할게요.

서브라임텍스트 소개/강의보러가기 <생활코딩>

STEP 2. 불필요한 건더기 걷어내기

우리를 생각해서 넣어주었지만 전혀 필요가 없는 코드를 삭제하도록 할게요.

마치 국물을 마실 때 컵라면 벽으로 몰아붙이게 되는 이녀석처럼 말이죠.

STEP 2-1. template 디렉터리

먼저 template디렉토리에서

chat-detail.html

tab-dash.html을 삭제해줍시다.

[tabs.html, tab-chat.html, tab-account.html] 3개만 있으면 됩니다!!

STEP 2-2. app.js

app.js 파일에서

tab,

tab.chats,

tab.account를 제외한 state구문을 삭제해줍시다.

그리고 맨 아래에 디폴트 페이지를 chats으로 변경해줄게요!! (원래는 dash인데 저희가 삭제했으니까요!)

STEP 2-3. controller.js

여기는 비교적 간단합니다.

ChatsCtrl, AccountCtrl을 제외하고 날려주세요!!

STEP 2-4. tabs.html

네. dash를 연결해주는 탭 또한 삭제해주세요.

다시 브라우저를 확인하시면 두 개의 탭을 갖는 앱이 있을겁니다.

그럼 3편에 계속!!

[3편 보러가기] >> 클릭