/uphere-web

Primary LanguageJavaScriptMIT LicenseMIT

Uphere-web · CircleCI

Introduction

Uphere는 Facebook Messenger의 기본적인 기능과 Chatlog를 분석, 감정 상태를 실시간으로 반영한 이모티콘을 볼 수 있는 간단한 채팅 어플리케이션 입니다.

ScreenShot

Requirements

  • Uphere는 Facebook API를 사용했습니다.
  • Facebook 친구들과 서비스를 이용할 수 있습니다.
  • Facebook 가입이 선행되어야 합니다.
  • Chrome Browser를 권장합니다.

Prerequisites

MongoDB, Node.js 설치

Installation

Client

git clone https://github.com/uphere2017/uphere-web
cd uphere-web
npm install
npm start

Server

git clone https://github.com/uphere2017/uphere-server
cd uphere-server
npm install
npm start

Features

  • Facebook을 이용한 로그인 구현
  • Facebook 친구 리스트 연동
  • 최신 메시지 sort
  • 최신 메시지 preview
  • 실시간 접속 상태 표시
  • Chatroom 생성과 삭제
  • 실시간 Chat
  • Chatlog 분석을 통한 실시간 감정 상태 표시 (English Only)
  • 파일 전송 (Image Only)
  • 미확인 메시지 푸쉬 알림
  • JSON Web Token Authentication

Client-Side

  • Babel을 통한 모던 자바스크립트(ES2015+)
  • Redux 라이브러리를 사용한 Flux 아키텍처 기반 설계
  • React, Webpack, CSS Modules을 사용한 컴포넌트 베이스 UI 아키텍처 구현
  • Redux time-travel debugging를 통한 Application state 관리
  • React Hot Loader 플러그인을 사용, 프런트 개발 환경 간편화
  • HTTP Client 라이브러리는 Promise 베이스의 axios
  • 실시간 양방향 소통을 위한 Socket.io
  • 감정 분석을 위한 Sentiment analysis
  • CSS는 별도의 프레임워크를 사용하지 않았습니다.

Server-Side

  • 자바스크립트 엔진(V8 engine)기반의 서버사이드 플랫폼 Node.js
  • 서버사이드에서는 Node.js가 권장하는 ES5+
  • Node.js 웹 어플리케이션 프레임워크 Express
  • JSON Web Token Authentication
  • 대표적인 NoSQL 데이터베이스, MongoDB
  • MongoDB 기반의 Node.js 전용 ODM 라이브러리 Mongoose
  • 실시간 양방향 소통을 위한 Socket.io
  • BrowserSync
  • 빌드 자동화 툴인 Gulp
  • MongoDB 호스팅 플랫폼인 mlab

Test

  • 자바스크립트 테스트 프레임워크 Mocha
  • BDD / TDD assertion 라이브러리 Chai

Continuous Integration

  • 소스관리/빌드/테스트/배포의 지속적인 통합을 위한 CircleCI

Deployment

Client

  • AWS S3 Bucket의 Static Website Hosting
  • AWS CloudFront 서비스 대기시간과 성능을 개선(CDN서비스)

Server

  • AWS Codedeploy 배포 자동화 구축

Version Control

  • Web, Server의 독립적인 관리를 위한 GIT Repo 구분
  • Branch, Pull Request 기반 개발 진행

Collaboration Tool

  • Slack 팀원 간의 의사소통
  • Trello 스케쥴 관리 및 Task 배분

DevOps

  • Uphere Application은 개발부터 배포까지 상당 부분 자동화되어 있습니다.
  • Uphere Application은 uphere-Web / uphere-Server 두개의 Repo로 관리합니다.
  • 각자의 Branch를 Push하는 순간 Github과 연동되어 있는 Code Climate이 Code Review를 시작합니다.
  • Coveralls가 Test Coverage를 시작합니다.
  • dev Branch가 최종적으로 Merge되는 순간 CircleCI가 동작합니다.
  • Webhook 기능으로 모든 과정이 Slack 푸쉬 알림으로 전달됩니다.
  • CircleCI 빌드와 테스트가 통과되면 uphere-Web의 최종본은 AWS S3버킷으로 전달 후, Static Website Hosting 됩니다.
  • AWS CloudFront를 통해 웹사이트 전송을 가속화 합니다.
  • CircleCI 빌드와 테스트를 통과되면 uphere-Server의 최종본은 서버용 AWS S3버킷으로 전달 된 후, AWS EC2 Instance가 저장합니다.
  • AWS CodeDeploy로 자동 배포 됩니다.

Things to do

실력적으로 부족함이 많고 갈 길도 먼 5명의 팀원이 자바스크립트를 기반으로 3주간 진행한 Uphere Project. 짧은 프로젝트 기간으로 인한 아쉬움이 고스란히 보완할 점으로 남았습니다.

  • Seperate Concerns
  • Unit Test
  • Integration Test
  • HTTPS 세팅
  • Video Chat
  • 전반적인 UX 향상
  • Cross Browser Compatibility
  • Mobile 반응형
  • Code Refactoring
  • 버그 해결

Team Members

손효정, 윤송이, 도진호, 이시우, 안정현

Special thanks to Ken Huh