pkiop / lifemanager

⏱ 한 일을 기록하면 시각화 해서 보여주는 웹 앱⏱

Lifemanager v5.1.0

🌟 서비스 소개

⏱ 하루동안 한 일을 기록하면 유용한 정보들을 시각화해서 보여주는 웹 어플리케이션 ⏱

배포 : https://lifemanager.pkiop.me

개발 배경

WIKI

🌟 주요 기능

👌 로그인

• 구글 계정으로 OAuth인증을 통해 로그인 할 수 있습니다.
• AWS의 cognito를 이용해서 인증하고 앱에 할당된 AWS 리소스 접근권한을 얻습니다.

1. cognito의 소셜로그인 활용 인증 및 로그인

2. 해당 인증 정보로 앱 AWS 리소스 접근

👌 메인 페이지

🧐 날짜 선택

• 확인하고 싶은 날짜를 선택합니다.

🧐 로그아웃

• 로그아웃 버튼을 눌러 로그아웃 할 수 있습니다.

🧐 목표와 진행상황 확인

• 사용자별로 설정한 목표에 따라 진행상황 / 목표까지 남은 시간을 계산한 결과를 보여줍니다.

🧐 카테고리별 진행상황 시각화

• billboard.js 라이브러리 활용해서 카테고리별로 지정한 색에 따라 한눈에 진행상황 확인할 수 있도록 파이 그래프를 보여줍니다.

🧐 기록 확인

• 로그인한 유저 & 선택한 날짜에 해당하는 기록들을 보여줍니다.

🧐 기록 입력

• 하단 바의 + 버튼을 눌러 기록을 추가할 수 있습니다.
• 제목, 시작시간, 종료시간(선택), 카테고리, 활용한 시간인지 여부를 입력하고 Add Recode를 클릭하면 기록이 추가됩니다.
• 잘못된 입력에 대해서 에러메세지를 보여줍니다.

🧐 기록 수정 및 삭제

• 수정을 원하는 기록을 클릭하면 해당 기록을 수정할 수 있습니다.
• Delete 버튼을 눌러 기록을 삭제할 수 있습니다.

🌟 배포

• pkiop.me DNS를 Route53으로 설정한 후 배포 S3에 연결된 CloudFront로 보내도록 설정합니다.
• CloudFront에서 SSL 인증을 해서 https로만 앱에 접근 가능하도록 합니다.
• S3의 Static Web Hosting을 이용해서 Frontend 앱을 배포합니다.
• 앱에서 인증 / DB데이터 조작이 필요할 때마다 AWS Cognito, AppSync 서비스를 활용해서 해당 기능을 이용합니다.

History

v1.5.1
v2.0.0
v3.0.0
v4.0.0

lifemanager's Issues

OAuth 쿠키로 처리하는 것 개선 or Back -> Front로 전송시 암호화

개선 방식

CRA에 적합한 OAuth 방식이 있는 것 같다 (PKCE)
다만 짧게 알아본 바로는 프론트에서 바로 인증을 하기 때문에 앱의 백엔드 API서버에서는 인증이 안될 것 같아서 일단 더 알아보려고 놔뒀다.

callback url에서 Access Token받고 Authorization header에 넣는 방법으로 전송하면 보안상 유리할 것 같지만 잘 되지 않았다. 하는방법을 찾아 적용하는 것도 좋겠다.

암호화

callback url로 Access Token이 오면 Frontend로 보내기 위해 쿠키에 담은 뒤 Frontend로 redirect가 끝나면 쿠키 삭제 후 localstorage에 저장하는 방식을 쓰려고 한다.

이 잠시동안 쿠키가 전달될 때 보안이 취약해서 서버와 Front사이에 암호화를 해서 전달한다면 보안에 유리해진다.

체크리스트

• 백엔드에서 쿠키 암호화
• 프론트에서 쿠키 복호화

오늘 해야할 것 적어놓는 칸 잘 보이게

아이디어 캡쳐해서 업로드

손으로쓰고싶은사람도 있음
손으로쓰고 큐알코드있는 종이로 찍으면 글씨인식후 업로드
관련 종이를 다이어리등으로 팔수도

뚝딱뚝딱

회전오목 만들자하기

Recode 컴포넌트 수정

목표

• Recode 하나의 항목을 보여주는 Recode컴포넌트를 만든다.

체크리스트

• 각 항목을 제대로 보여주는지
• onclick method를 만들었는지

카테고리별 시간 시각화용 파이 그래프 그리기

목표

체크리스트

• 카테고리별 시간에 따라 파이그래프를 그린다
• 파이그래프 중간에 효율적으로 쓴 시간 퍼센트를 표시한다
• 파이그래프 색이 어떤 카테고리인지 표시하는 것 만들기

branch 에 push하면 안올라가?

Recode / PUT API 구현

TR을 수정하는 API
query

// accessToken 함께
{
    index
    TR ( 수정하지 않을 것 넣지 않음)
}

body

{
    message: 'success'
}

Recode / GET API

시간 기록들을 가져오는 API

query

// accessToken 함께
{
    startDate: xxxx-xx-xx
    endDate: xxxx-xx-xx
    category: 'develop' | null 
}

body

{
    message: 'success'
    data: [ 
        {
            index
            TR
        }
     ]
}

맨위에 탭에 보이는 그림 나오게 하기

시간측정신뢰성

애플워치로 앉아있었는지
앱시간측정앱연동해서 폰 그시간동안뭐해뭐했는지

메인 페이지 컴포넌트 핵심 기능 구현

메인 페이지 예상 화면

체크 리스트

• 헤더바(위치만)
• Recode 리스트 보여주기
• Add, Finish 버튼
• 해당 날짜 제대로 보여주기

AccessToken 받은 것 user정보에 해당하는 TimeRecode만 받아오게 하기

구현할 내용

FE에서 AccessToken을 보내오면 해당하는 user의 TimeRecode만 받아오게 한다.

체크리스트

• AccessToken을 받아 user 누군지 해석
• 해당하는 time recode만 return

InputPage 구현

구현할 내용

체크리스트

• 위 그림과 같은 input을 받을 수 있는지
• submit시 데이터 전달이 잘 되는지

로그인 인증 시 mainpage로 라우팅

Koa로 github OAuth를 구현한다.

https 적용

Koa 로 백엔드 API 서버 구성

Koa기반 백엔드 API서버를 구축한다.

FE에서 TimeRecode추가하면 POST로 DB에 추가하기

구현할 내용

FE에서 TimeRecode 추가(Add Recode 버튼을 눌러 나타나는 입력창을 BE로 보냄)하면 DB에도 데이터가 추가된다.

체크리스트

• 입력을 하고 POST를 하면 BE에서 잘 받는지
• 받은 데이터를 DB에 저장할 수 있는지

Recode CSS 작업

구현할 내용

Recode 컴포넌트 CSS 를 기획과 맞게 수정

체크리스트

• Recode 컴포넌트가 만족스럽게 보이는지

OAuth 쿠키로 처리하는 것 개선 - HttpOnly false 한 것 관련

본인기록 블로그노출 api

.

[TODO]

• 종료시간 입력 칸 -1말고 미입력 등 다른 값 넣기 -- 200505 난이도가 높음(javascript + html)
• 시간 입력칸을 좀 더 예쁘게 (우선순위 밑)
• naver, 구글 등 소셜 로그인 기능 -> 주말에 빡
• submit 화면 예쁘게
• (입력창이 가장 중요한 부분) grid 사용해서 더 예쁘게
• 아래 퍼센트 디자인
• 주식처럼 차트
• 인바디처럼 종이로 프린트할수있는것처럼 차트 츌력?
• • 시즌제로 랭킹
  • 점수는 시즌참가하는사람들끼리 정한다.
  • 일일데이터 블로그에 개시할 수 있도록 뱃지같은거
  • 프라이빗한데이터는 뺄수 있도록
• 처음에 자기 계획 짜서 입력해두고 그것에 얼마나 맞게 행동했는지 점수화
  • 계획짜는건 구글캘린더에서 가져오기? -> OAuth 를 통해 가능. calander API접근가능
• 돈 기능 추가
• db최근몇개만 가져오는 것으로 최근 1~2주만 보도록
• 자주적는활동 즐겨찾기
• 앱 사용량 보여주는 앱 처럼 이쁘게 선 하나에 24시간이라 치고 각각 뭐했는지 보여주는 것
• 선택화면에서 카테고리나 시간만 수정했을 때, update 누르지 않고 카테고리만 수정하면 바로 업데이트 되도록

[블로그아이디어] issue기능같은 것 추가 및

생활코딩 advanced과정으로 배운 것 이용해 더 다양한 기능 만들어보기->예제나 유제 제공

[TODO] express 적용

OAuth로 로그인 안했을 때 입력 칸 막기

Recode / POST API 구현

시간 기록을 추가하는 API

query

// accessToken 함께
{
    title: string
    startTime: { hour, min }
    endTime: { hour, min }
    category: 'develop' | null 
}

body

{
    message: 'success'
}

RecodeList CSS 작업

구현할 내용

RecodeList 컴포넌트 CSS 를 기획과 맞게 수정

체크리스트

• RecodeList 컴포넌트가 Recode 컴포넌트를 잘 배치하는지

이전 버전 정리

Ver 1.0 : 프로그램 켜둔 시간으로 시간 측정
Ver 2.0 : input.txt파일 파싱해서 결과 시각화
Ver 3.0 : 시각화 결과 DB에 저장
Ver 4.0 : Web Frontend구현

하이브리드 플랫폼 -> ionic

로그인 페이지 CSS 작업

구현할 내용

체크리스트

• 위의 그림과 유사하게 보이는지

[사업화] 수익모델

• 광고 말고 다른 방법
  • 미결제 -> 데이터 수집 가능
    • 이렇게 하기 위해서 -> 카테고리를 정말 세분화, 자주 사용하는 카테고리 저장
  • 결제 -> 내가 데이터 수집하지 않음. github의 private 모드

Login Page 구현

시간 입력 클릭시 한번에 숫자 전부 block처리 되게 하기

50 이렇게 input에 들어가 있었으면 전부 선택위해 마우스 2번 클릭해야 전체클릭이 된다.
한번 눌러도 되게 하기

Img Atom, OAuthLogin Molecule 구현

private한 것과 public한 것 구분

시각화 할때 3차원으로 한 축은 카테고리별 보이게

메인 페이지 추가 기능 구현

목표

체크리스트

• 선택한 RecodeList 날짜 표시
• 게시판 구현
• 카테고리별 파이 그래프 그리기
• 파이 그래프 색 의미하는 것 적는 칸 만들기

하루 기록 끝나고 Confirm에서 Confirm 메세지 추가할 수 있게 하기

graph api serve

DB Scheme에 따라서 모델 구성하기

구현할 내용

체크리스트

• MongoDB Scheme작성

Transaction 컴포넌트 생성

일단위 시각화

Express, Passport 적용 이후 Google login 적용

게시판 컴포넌트 생성

목표

체크 리스트

• 지정한 목표시간을 표시 (각 user가 직접 설정한 값)
• 몇시간이나 효율적으로 했는지 표시
• 지정한 취침 시간까지 얼마나 남았는지 표시

MySQL -> MongoDB로 바꾼다.

Recode / DELETE API 구현

query

// accessToken 함께
{
    index
}

body

{
    message: 'success'
}

결과 Image 받아오는 API 구현

일, 주, 월 등 단위와 시작날짜를 body에 넣어 보내면 시각화 해서 image 리턴하는 API 구현

DB정보로 FE에서 TimeRecode 받아와 보여주기

구현할 내용

MainPage에서 GET API를 호출해서 DB의 Timerecode를 받아와 렌더링한다.

체크리스트

• FE에서 GET API를 호출해 데이터를 잘 받아 오는지
• 받은 데이터로 컴포넌트 생성을 했는지