생활 쓰레기 종류 AI 분석 및 분리수거 생활화를 위한 플랫폼
| Dev-Ops |      |
|---|---|
| Frontend |      |
| Backend |         |
| DB |  |
| AI |    |
| Monitoring |    |
| Others |      |
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를 리턴한다.
- 정리
- redux를 통해 token decode 후 uuid 전역관리
- 컴포넌트 재활용을 위해 upload한 이미지 및 내가 버린 쓰레기 상세페이지를 위한 trash_id 전역관리
-
Search
-
UploadImage (polling)
-
PopularTrash
-
Sign Up
-
Sign In
-
MyTrashcan → 올렸던 사진들을 모두 확인가능
autosave - On : 올린 사진을 자동 저장 / Off : 저장되지 않음
-
Graph → 올린 사진의 종류와 수 파악 가능
Default : 지금까지 올렸던 총 사진 종류, 개수
시작 날짜, 끝 날짜를 지정하여 원하는 날짜에 올린 쓰레기 종류 확인
-
Challenge → 사진을 올렸을 때 활성화/Change Info → 비밀번호, 닉네임 변경/Log Out
- api/users/
GET: 회원가입 시 아이디, 닉네임 중복 체크 결과POST: 회원 가입 정보 저장PATCH: 회원 정보 수정
- api/users/auth
POST: access token, refresh token 갱신
- api/users/autosave
GET: 업로드 사진 자동저장 여부PATCH: 업로드 사진 자동저장 여부 변경
- 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: 사용자가 설정한 날에 따른 재활용 데이터 통계
- api/search/
POST: value 값에 맞는 검색 결과 반환
-
used_library
elasticsearchdjango_elasticsearch_dsl
-
setup_es.py
- elastic_search default data setter
-
make connection with
django_elasticsearch_dsl
-
make default data by using
search_cofig.json
-
bulk default data on elastic_search
-
- elastic_search default data setter
-
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
-
send request
-
output
-
-
-
why_elastic_search?
-
elastic_search has bunch of useful functions with searching data
-
elastic_search is much lighter than other DB
-
- 일라스틱 서치의 각 데이터들을 시각화하며, 해당 데이터들을 관리하는데 도움을 주는 프로그램
- 추후. 데이터 관리 및, 데이터 시각화를 통한 보다 좋은 개발환경을 구현하기 위해 사용,
- Result
-
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
- exporter가 매트릭을 수집하고 HTTP 통신을 통해 metric data를 가져갈 수 있게 /metrics 라는 HTTP 엔드포인트를 제공한다. 그러면 Prometheus server가 이 exporter의 엔드포인트에 HTTP GET 요청을 이용하여 metric data를 pull 한다.
- 해당 노드의 metric data
- Prometheus의 시각화 도구가 부족하여 이를 직접 사용하지는 않고 대게 Grafana라는 Data Visualization tool을 이용하여 시각화하고 있다.
CPU load / RAM usage / Memory swap
- 생성된 도커 컨테이너등에 대한 데이터를 수집해준다.
