🌳 What is ReBike?

---

생활 쓰레기 종류 AI 분석 및 분리수거 생활화를 위한 플랫폼

🪵 System Architecture

🌵 Tech Stack

Dev-Ops
Frontend
Backend
DB
AI
Monitoring
Others

🌸 Core Screens

Redux

acitions
⎿ DecodeActions.tsx
	dispatch가 어떤 type에 따라 함수를 실행해줄지 정한다. state값을 어떻게 변경할지 정해주는 파일
	인자로 token값을 받아서 그걸 디코딩 해준다 . 
	그리고 payload에 [success, action[success, payload]] 를 설정

⎿ ImgIDReducer.tsx
    dispatch로 실행할 액션 값 1개 (SAVE_ID) 이걸로 id 값을 넘겨준다.

reducer
⎿ DecodeReducer.tsx
	state 초기값 설정 및 dispatch를 포함하고 있는 곳 action 이 들어와서 action.payload로 
	id, alias 를 가져와 state값을 dispatch에서 넘어온 데이터를 활용해 변경해준다 .(전역관리 시작)
	ex.	const userIdtoRedux = ReduxModule().decodeInfo?.id;
	

⎿ ImgIDReducer.tsx
    SAVE_ID 타입으로 dispatch 가 실행됐으면 거기서 저장된 payload를 가져와 그 값을 리턴해준다.
    dispatch(save_ID(res.data.image_id)); 실행후 itemID 리턴
	  ex. const itemID = useSelector((state: RootReducerType) => state.ImgIDReducer);

⎿ index.tsx
    root 리듀서 관리 만들어 놓은 DecodeReducer, ImgIDReducer를 총괄한다. app.tsx에서 불러와 사용

ReduxModule 토큰이 있을 때만 dispatch를 통해 id를 가져오려고 따로 모듈로 뺴놓음 토큰을 decoderedux를 통해 디코딩시킨 후 id를 리턴한다.

• 정리
  1. redux를 통해 token decode 후 uuid 전역관리
  2. 컴포넌트 재활용을 위해 upload한 이미지 및 내가 버린 쓰레기 상세페이지를 위한 trash_id 전역관리

Mainpage

• Search

  

• UploadImage (polling)

  

• PopularTrash

  

Sign up/ Sign in

• Sign Up

  

• Sign In

  

MyPage

• MyTrashcan → 올렸던 사진들을 모두 확인가능
  autosave - On : 올린 사진을 자동 저장 / Off : 저장되지 않음
  

• Graph → 올린 사진의 종류와 수 파악 가능
  Default : 지금까지 올렸던 총 사진 종류, 개수
  시작 날짜, 끝 날짜를 지정하여 원하는 날짜에 올린 쓰레기 종류 확인
  

• Challenge → 사진을 올렸을 때 활성화/Change Info → 비밀번호, 닉네임 변경/Log Out

  

🌿 ERD

users api

• api/users/
  • GET : 회원가입 시 아이디, 닉네임 중복 체크 결과
  • POST : 회원 가입 정보 저장
  • PATCH : 회원 정보 수정
• api/users/auth
  • POST : access token, refresh token 갱신
• api/users/autosave
  • GET : 업로드 사진 자동저장 여부
  • PATCH : 업로드 사진 자동저장 여부 변경

trash api

• api/challenges
  • GET : 모든 도전과제 정보
• api/statistics/ranking
  • GET : 인기순으로 정렬된 일주일간의 재활용 데이터
• api/users/{user_id}/results/tasks
  • POST : 사용자가 업로드한 사진 분석 비동기 처리
• api/users/{user_id}/results/tasks/{task_id}
  • GET : task_id로 분석 완료 여부 확인, 프론트에서 polling
• api/users/{user_id}/challenges
  • GET : 사용자가 달성한 도전과제 정보
• api/users/{user_id}/pages/{page_number}
  • GET : 사용자가 업로드한 재활용 이미지 데이터, 페이지네이션 이용
• api/trash/users/{user_id}/statistics
  • GET : 사용자가 업로드한 모든 재활용 데이터의 통계
• api/trash/users/{user_id}/statistics/period/{from_date}/{to_date}
  • GET : 사용자가 설정한 날에 따른 재활용 데이터 통계

Search api

• api/search/
  • POST : value 값에 맞는 검색 결과 반환

Elastic_search

• used_library

  • elasticsearch
  • django_elasticsearch_dsl

• setup_es.py

  • elastic_search default data setter

    1. make connection with django_elasticsearch_dsl

       

    2. make default data by using search_cofig.json

       

    3. bulk default data on elastic_search

       

• elastic_search on Search api

  • get search_value from query_param

    <img src="https://user-images.githubusercontent.com/41159837/183143129-e310f3db-c82d-43fa-852b-38f8487959b2.png"width="50%" height="50%"/>

  • make connection with elastic_search by using django_elasticsearch_dsl

    

  • get data which contained key that has correlation with search_value

  • example

    1. send request

       

    2. output

       

• why_elastic_search?

  • elastic_search has bunch of useful functions with searching data

  • elastic_search is much lighter than other DB

    

KIBANA

• 일라스틱 서치의 각 데이터들을 시각화하며, 해당 데이터들을 관리하는데 도움을 주는 프로그램
• 추후. 데이터 관리 및, 데이터 시각화를 통한 보다 좋은 개발환경을 구현하기 위해 사용,

🪴 AI

• Result
  

JWT

• used_library

  • djangorestframework-jwt

• JWT_Settings.py

  • set JWT’s default_settings

    

• JWT on frontEND

  • restore tokens by using redux
  • if we need some user data, we don’t need to make connection with backend by opening JWT payload, we can get user data

• JWT on backEND

  • after we identify user by check login data, give authorization by using JWT
  • by using refresh_token, we enhanced our security level

💻 Monitoring

Prometheus

• exporter가 매트릭을 수집하고 HTTP 통신을 통해 metric data를 가져갈 수 있게 /metrics 라는 HTTP 엔드포인트를 제공한다. 그러면 Prometheus server가 이 exporter의 엔드포인트에 HTTP GET 요청을 이용하여 metric data를 pull 한다.
• 해당 노드의 metric data

Grafana

• Prometheus의 시각화 도구가 부족하여 이를 직접 사용하지는 않고 대게 Grafana라는 Data Visualization tool을 이용하여 시각화하고 있다.

CPU load / RAM usage / Memory swap

Cadvisor

• 생성된 도커 컨테이너등에 대한 데이터를 수집해준다.

How to Start

Project Tree

™️ⁱ Members of Team-E

이름	개발분야	소개페이지
🦥김용민	Back-end,DevOps	https://github.com/Ryokuman
💛김유림	Back-end,DevOps,AI	https://github.com/Ellie010707
🏆박성빈	Back-end,DevOps	https://github.com/SeongbinPark
🧚🏻‍♀️이채현	Front-end	https://github.com/chloe1129
🎹이정우	Front-end	https://github.com/RayLee-Kor
👼진호병	Front-end	https://github.com/bicco2