Angular.js 와 firebase 로 간단한 실시간 웹 앱 만들기

개요

아직도 회사에서는 팀내 찌끄래기 나이라서 팀의 비품 신청을 담당하게 되었는데, 매번 메일이나 메신저로 필요한 물품을 조사해서 그걸 하나하나 검색해서 찾아서 모아서 주문하는 방식이 아무래도 비효율적으로 느껴지고, 내가 센스가 워낙 부족하다 보니 여러사람을 만족시킬 수 없는 물품 선정이 될 것 같아서 애초에 팀원들이 직접 필요한 물품을 신청할 수 있는 페이지를 만들어야겠다는 생각이 들었다.

요구사항

  • 이마트 상품 검색 : 주로 이마트에서 비품을 주문하기 때문에 이마트 상품들을 검색할 수 있는 기능이 필요하다.
  • 가입 및 인증 : 외부인에게 이런 부끄러운 페이지를 보여주지 않으려면 최소한 우리 회사 사람이라는 인증을 해서 사용하도록 해야 한다.
  • 실시간 목록 편집 : 비품 신청을 받겠다고 하면 여러 사람이 한꺼번에 신청을 하게 되기 때문에 편집되는 목록이 서로의 페이지에 실시간으로 보여져야 했다. 그래야 같은 상품을 여러 사람이 신청하지 않고, 실시간으로 상품에 댓글을 통해 소통이 가능해지기 때문이다.
  • 비품 신청 메일 발송 : 때 되면 "자 이제부터 이번 비품 신청을 받겠습니다!" 라고 알려주는 메일을 발송해야 한다. 사실 이건 그냥 귀차니즘의 발로다. 없어도 상관 없다.

개발

주말에 슬금슬금 개발을 시작했다.

기술 스택 결정

백엔드

역시 이런건 웹이 사용하기도 편하니까 플랫폼은 당연히 웹이 되고, 서버는 php 를 사용할까 하다가 그냥 요즘 손에 익은 node.js 를 돌리기로 했다. 단순히 express 모듈을 썼고, 사용자 인증에는 요즘 트렌드라는 jwt 를 사용했다.

프론트엔드

프론트엔드에서 디자인의 경우는 그냥 css 를 하드코딩하기로 했고, 요새 한 번 뭔지 볼까 싶었던 angularjs 를 이번 기회에 써보기로 했다. 그리고 실시간 목록 공유를 어떻게 처리할까 하다가 firebase 라는 놈을 발견했고, 마침 angularfire 라는 라이브러리를 지원하길래 그걸 모델로 쓰기로 했다.

상품 검색

이마트 상품 검색 api 가 존재하는지 안하는지 그건 잘 모르겠고, 어쨌든 나는 못 찾았다. 그래서 이마트의 검색 페이지를 골똘히 들여다봤다. 거기서 점포 예약이 가능한 상품들만 검색해서 나오는 페이지를 ajax 같은 형태로 가져오는 걸 발견했고, 그게 html 형태긴 하지만 어쨌든 전체 페이지보다는 간략했기 때문에 그걸 파싱하기로 했다. url 구조 알아내고, html 구조 알아내고, 그걸 정규식으로 일케 절케 주물러서 json 형태로 뱉어내는 js 모듈을 만든 담에 node.js 서버에서 요청에 따라 보내주도록 코딩했다.

인증

나도 그렇지만 사이트 가입은 귀찮다. 우리 회사 직원은 모두들 ~~@neople.co.kr 형태의 이메일을 가지고 있으니까, 해당 메일 아이디와 비밀번호(메일 비번이 아니고 그냥 임의의 비번)만 받아서 가입을 시키기로 했다. 가입 요청을 하면 인증 메일을 보내고, 인증 메일에 있는 링크를 클릭하면 인증이 완료되어서 로그인이 가능해지는 구조다.

로그인 요청이 오면 검증 후에 서버에서는 인증 토큰을 뱉어내고, 클라는 매 요청마다 이 토큰을 http 헤더에 포함해서 보내게 만들었다. 토큰 없이 요청하면 로그인하라는 메시지만 뱉고 다시 로그인 페이지로 이동시키는 간단한 구조다.

목록 구성

이 페이지에서 실제 이마트 주문이 이루어질 수는 없기 때문에, 결국 필요한 건 상품의 링크 정도다. 유저가 상품을 구매 신청하면 상품의 간략한 정보들과 함께 이마트 홈페이지의 링크를 유추할 수 있는 상품 id 를 저장해둔다. 구매 신청이 마감되면 그 상품들의 링크를 통해 상품을 모두 장바구니에 담고 나는 그냥 결제만 하면 끝나는 구조다.

이를 위해서 firebase 에 가입을 하고, angularfire 의 사용법을 대충 읽고, 모델 구조를 대충 정하고 CRUD 를 대충 구현했다. 이걸 angularjs 페이지의 모델로 연동해두면 서버측 변동사항이 자동으로 실시간 반영된다. 와 세상 진짜 좋아졌다 ㅎㅎ

디자인

늘 어려운게 이건데, 일단 핸드폰으로 아무 사진이나 대충 찍어서 배경에 깔고, 로그인 화면과 가입 화면은 텀블러 로그인처럼 간략하게 만들었다. 개발자가 만든 페이지는 늘 디자인이 구리게 마련이라 그걸 사진빨로 어케 커버해보려는 속셈이었는데 생각보다 잘 작용해준 것 같다 ㅋㅋㅋㅋ

완성된 페이지

스크린샷 2015-02-24 오전 12.53.21.png 로그인 페이지 (배경 사진은 걍 개발하다 말고 내 노트북 대충 찍은거)

스크린샷 2015-02-24 오전 12.53.28.png 가입 페이지

스크린샷 2015-02-24 오전 12.53.50.png 이마트 상품을 이렇게 검색해서 (여기 배경은 그냥 사무실 구석탱이 찍은 거)

스크린샷 2015-02-24 오전 12.54.12.png 신청하면 이렇게 실시간 반영이 된다.

관련 링크

관련 링크에 이마트는 필요 없겠지....