프로젝트 개요
프로젝트 명
에듀키트 디지털 트윈 모니터링 시스템 구축
구성원
멘토 @허재준
팀장 @김채은
팀원 @김희선 @진아영 @백동기
프로젝트 기간
프로젝트 총 기간 2022-03-16 ~ 2022-04-28
프로젝트 기획
기획 목적
기획 아이디어
산업 분야로 옮겨진 메타버스 및 디지털 트윈을 통해 기존의 자동화된 기기 관리를 웹 UI UX로 구현하고, 구현한 기기의 실시간 데이터 확인 및 불량품 판독을 가능하게 하여 기기 관리자로 하여금 기기제어 및 생산품 관리가 용이하도록 함.
프로젝트 방법 및 과정
기능 정의
불량품 확인 및 체크
- edukit의 실시간 데이터를 three.js로 웹에서 확인 가능
- 웹에서 기기 클릭 후 방향키로 움직임을 조작 가능
- 비전인식으로 불량품 판별(주사위) 시 웹에서 체크 가능
실시간 데이터 확인 대시보드
- 실시간 데이터들을 three.js로 디지털 트윈된 3D 오브젝트와 함께 실시간 연동 그래프로 표시
- 지정한 주사위 숫자일 경우 불량품으로 간주
- 마이페이지는 사용자 정보 확인 및 수정이 가능하며 모달로 생성
- 그래프 항목 예시
- 3호기 좌표값 숫자 카드
- 비전센서 : 주사위 숫자 값 막대 그래프
- 주사위 홀짝 비율 값 도넛 그래프
- 불량 비율 값 도넛 그래프
- 하루 생산량 그래프 (이전 데이터는 가짜로 넣기) 꺾은선 그래프 선 2개(양품 수량 데이터 하나, 불량품 수량 데이터 하나)
기능 구현 방법
프론트엔드
- 프론트 화면은 Vue.js로 구현
- 3D 모델은 three.js로 구현
- 대쉬보드 그래프는 chart.js로 구현
백엔드
- 백엔드 서버는 Node.js로 구현
IoT/PLC
- 데이터 수집은 mqtt로 구현
Infra
- 코드 버전은 GitHub Repository로 관리
- discord 및 게더타운을 이용하여 소통 및 내용 기록
- notion을 통해 일정 및 문서 관리
프로젝트 상세
계획
요구사항 리스트
- 사용자 회원가입 및 로그인 기능
- 에듀키트의 실시간 데이터를 연동하여, 웹 기반으로 모니터링 할 수 있는 기능
- 에듀키트 가상 3D 모델이 디지털 트윈된 모습을 웹 화면으로 보고싶음
요구사항 분석
- 사용자 회원가입
- 사용자 회원가입 및 로그인은 심플한 UI를 통해서 빠르게 개발해낸다.
- 회원가입 할 때, 비밀번호는 암호화 한다.
- 사용자 로그인
- 로그인 할 때는 로컬 스토리지의 토큰을 통해서 세션을 유지한다.
- 에듀키트 실시간 데이터
- 에듀키트 실시간 데이터는 SmartConnector.exe를 실행하여 실시간 데이터를 MQTT로 받아 개발해낸다.
- 받아온 실시간 데이터를 대시보드 및 그래프를 통해 구현한다.
- 불량품이 생긴 경우 대시보드 화면 내부에서 발생한 수량을 표시한다.
- 에듀키트 가상 3D 모델
- 에듀키트 가상 3D 모델은 three.js를 사용해 웹에 표시한다.
작업 리스트
- 프론트엔드 관련 개발 리스트
- 각 기능 화면 화면구성 & 퍼블리싱
- 회원가입 및 로그인 화면 & 로직 구현
- 에듀키트 three.js 가상 모니터링 화면 & 로직 구현
- 실시간 데이터 대시보드 화면 & 로직 구현
- 백엔드 관련 개발 리스트
- 회원가입 및 로그인 기능을 위한 데이터 모델링 / API 설계 및 개발
- 실시간 데이터 모니터링 관련 데이터 모델링 / API 설계 및 개발
- MQTT로 수신한 정보 데이터베이스에 저장
- IoT/PLC 관련 개발 리스트
- SmartConnector.exe 사용하여 MQTT로 실시간 데이터 수신하기
- SmartConnector.exe 사용하여 MQTT로 웹에서 조작한 정보 전송하기
- 인프라 구축
- 도커 컴포즈로 vue, node.js, mqtt 실행하는 도커파일 만들고 공유하기
- github 레포지토리 만들고, 팀원들 콜라보레이터 추가하기
'공부 > [Project] Digital Twin Bootcamp' 카테고리의 다른 글
[team 6] three.js 특정 오브젝트 클릭 이벤트 (클릭 감지) (0) | 2022.03.25 |
---|---|
[Team 6] three.js Texture 구현 오류 해결 (0) | 2022.03.23 |
[Team 제주 넘는 차] 프로젝트 보고서 및 회고록 (0) | 2022.03.15 |
[Team 제주 넘는 차] 배열에서 여러 객체의 값 꺼내오기 (0) | 2022.03.10 |
[Team 제주 넘는 차] 차 정렬 페이지 api 연동 시 오류 'Cannot set properties of undefined (setting 'accesstoken')' (0) | 2022.03.10 |