knu_hobit_gr

최종 코드 : master branch ‼️‼️

installation

1. Clone the repository

   git clone https://github.com/KNU-HOBIT/knu_hobit_gr.git

   cd knu_hobit_gr

   git checkout master

2. Install NPM packages

   npm install

Usage

프로그램 실행

   npm start

Main Function

1.모니터링 fast API로 부터 SSE 통신을 통해 실시간으로 받아오는 트랜스포터 데이터를 "실시간"으로 모니터링 하는 기능입니다. 컴포넌트간 상태공유를 위해 React redux를 사용하였습니다.
좌측 상단에서 트랜스포터의 실시간 위치를 확인할 수 있습니다. 트랜스포터 데이터에 있는 gps 좌표를 표시하기 위해 kakao 지도 API를 활용하였습니다.
우측 상단에서 옵션창을 통해 트랜스포터 장비 ID에 따른 필터링 모니터링이 가능합니다.
하단의 table에서는 트랜스포터별 운행 여부, 적재량(무게), 실시간 누적 운행량을 확인할 수 있습니다.

2. 센서

센서의 종류, 이름, 장비 id를 등록할 수 있는 페이지 입니다.
센서 등록이 완료되면, fastAPI는 등록된 센서를 기준으로 MQTT로 실시간 데이터를 요청합니다.

3. 데이터셋

사용자가 열람하고자 하는 데이터셋을 고르고, 모니터링 할 수 있는 기능입니다.

4. 모델학습 사용자가 열람 및 모델 학습 시키고자 하는 데이터셋을 고르면 우측에서 학습 파라미터를 선택할 수 있습니다.
   

label column 은 오직한개, feature column은 label column을 제외한 여러개를 선택할 수 있도록 구현하였습니다.
react-datepicker 라이브러리를 활용하여 학습 시키고자 하는 데이터의 범위를 정하도록 하였습니다.
그리고 estimator는 100에서 1000까지 100 단위로 선택할 수 있고, split은 0부터 1까지 0.01 단위로 선택할 수 있도록 하였습니다.
학습 파라미터를 선택한 후 모델학습을 시키면,
그래프로 모델학습 결과를 모니터링할 수 있습니다.

6.모델학습 결과 모델학습 기록을 열람할 수 있는 페이지 입니다.
한 페이지당 10개의 결과만 볼 수 있게 pagination을 활용하였습니다.
열람하고자 하는 모델 학습 결과를 클릭하면, ML 결과 그래프와 학습 파라미터 등 학습 정보에 대해서 모니터링 할 수 있습니다.

dependencies

"dependencies": {
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "13.4.0",
"@testing-library/user-event": "13.5.0",
"axios": "^1.6.8",
"bootstrap": "5.3.0",
"bootstrap-icons": "1.10.5",
"dayjs": "^1.11.11",
"event-source-polyfill": "^1.0.31",
"http-proxy-middleware": "^3.0.0",
"react": "18.2.0",
"react-apexcharts": "1.4.0",
"react-datepicker": "^6.9.0",
"react-dom": "18.2.0",
"react-hook-form": "^7.51.5",
"react-paginate": "^8.2.0",
"react-redux": "^9.1.2",
"react-router-dom": "^6.23.1",
"react-scripts": "5.0.1",
"react-spinners": "^0.13.8",
"react-table": "^7.8.0",
"react-time-picker": "^7.0.0",
"reactstrap": "9.2.0",
"redux": "^5.0.1",
"web-vitals": "2.1.4"
},