binaryTime (Flask + mongoDB) flask REST API

*배포된 주소

youjunyong.shop/

Color of time

 

*프로젝트 의도

 

 내가 자주 사용하는 어플중에 공부시간을 체크하는 어플이 있다. 하지만 딴짓하며 낭비하는 시간과 공부하는 시간을 비교해보고 싶다는 생각을 했고,  web에서 작동한다면, 테블릿 , pc , 스마트폰에서 실시간으로 작동이 가능하다고 생각이 들어 만들어 보았다.

아마 이것을 나의 첫 프로젝트라고 말할 수 있는데, 계획없이 추상적인 생각만 가지고 즉흥적으로 만들다보니, 변수명도 일관되지 않고 말그대로 스파게티 코드가 된것같다. 특히 데이터베이스를 잘 설계하는게 중요하다는 점을 느꼈다.

 

*사용

• Chart.js
• Flask
• AWS EC2(배포)
• 가비아(도메인)
• MongoDB
• html, css, js

 

* Home 화면

https://startbootstrap.com/themes/

이곳에 있는 테마를 사용했다. 테마 이름은 Grayscale 이며 무료이다.

"시간관리"라는 컨셉에 맞게 시계사진과 현재시각을 현 위치에 맞게 표시하도록 JavaScript로 구현했다.

 

*회원가입 및 로그인

 

 

 

*타임라인

파란버튼이나 빨간버튼을 누르면 , 화면의 공이 색깔이 변하면서 위아래로 튕기듯이 움직이며 카운팅이 시작된다.

긍정적인 시간은 파란색으로 타임라인에 기록되며, 부정적인 시간은 빨간색으로 기록된다. 

제목을 눌러 수정하거나 삭제 가능하도록 만들었다. 

사용기기를 바꾸어 로그인했을때 , 카운트 되고있는 시간이 유지가 안되는 부분을 뒤늦게 발견해서 많이 삽질을 했었다.

 

 

*차트 (통계)

이렇게 타임라인을 체크하면서 기록이 쌓이게 되면 차트를 볼 수 있는 버튼이 생긴다. 버튼안에는 그날의 날짜가 삽입된다.

버튼을 누르게 되면, 파이그래프로 공백인 시간(기록 없는시간) , Plus 시간, Minus시간으로 3가지로 표시된다.  

차트는 Chart.JS 를 사용했다.

 

 

---

* 개선사항 (느낀점)

 원페이지 + 비동기 통신을 통해서 최대한 어플같은 느낌으로 만들어보고 싶었다. 아무도 쓰지 않을 만큼 구리지만, 정말 많은 공부가 된 것 같았다.

 기록 (계획 및 설계, 그리고 개발노트?) 을 남겼더라면 좋았겠다 라는 생각을 했다. 첫번째 프로젝트다 보니 , 어떻게 ? 뭐부터 ? 해야할지 몰라 무작정 시작했는데 그래도 한번 하고나니까 다음엔 어떻게 해야겠다 라는게 몸으로 와닿는다.  

 

 

 

 

 

* app.py  (일부)

from api_v1 import api as api_v1

app = Flask(__name__)
app.register_blueprint(api_v1 , url_prefix='/api/v1')

flask blueprint를 이용하여 api_v1로 모듈을 나누어 주었다. 

 

*api_v1 (일부)

from . import api
from flask import jsonify, request, Blueprint, session, redirect ,flash
from models import db , MyUser , SaveTime , LoadTime
import requests


@api.route('/plustime' , methods=["GET", "POST"])
def plustime():
    if request.method == "POST":
        timeType = request.form['timeType']
        time = request.form['Time']
        
        userEmail = session.get('userEmail', None)
        save = SaveTime
        save.saveTime(userEmail , time, timeType)
        if 'Start' in timeType :
            return jsonify({'result':'success','msg':'Plustime 시작'})
        elif 'End' in timeType :
            return jsonify({'result':'success','msg':'Plustime 끝'})

회원가입을 제외한 모든 데이터 통신은 api_v1에서 하도록 구성했다. 

 

 

*파일 구성

https://github.com/Youjunyong/binaryTime

* 소스코드

Youjunyong/binaryTime