졸업 작품에서 웹페이지의 기능은 QR코드를 통해 로그인을 진행한 후 머신러닝을 통해 탈모를 예측해서 DB에 저장하는 역할을 하고 있습니다.
- Client , Server 설정
웹 페이지에서는 로그인 , 측정 결과를 JSON 형태로 DB에 저장하는 역할을 하기 때문에 Client 와 Server를 나눌 필요가 있었다.
해당 서버는 프록시 서버로 지정하기로 했다.
- Database 연결
데이터베이스를 연동시키기 위해서 mysql 모듈을 사용하여 DB와 연결해줍니다.
DB에 저장하기 위해서 연동해둔 프록시 서버를 통해서 DB와 통신을 합니다.
위와 같이 5000포트를 입력했을시에 프록시 서버를 통해 API를 가져올 수 있다.
- 초기 화면 (QR 로그인)
다음은 QR 코드를 통해서 로그인을 진행하는 페이지인 Login.js 페이지이다.
QR코드 로그인을 진행하기위한 QR 코드는 안드로이드 어플리케이션에서 회원가입 시 제공해준다.
QR코드 인식 코드입니다. QR코드는 node js BarcodeScannerComponent 모듈을 통해 인식을 진행하였습니다.
QR코드를 통해 인식된 result가 초기에 입력해준 userNum으로 초기화하고 , QR코드가 입력되었는지를 알려주는 isQR값을 true로 설정해 줍니다. 자동 로그인을 위해서 isQR 값이 True로 변경되었을 경우 setTimeout을 이용하여 자동으로 로그인이 될 수 있도록 설정해줍니다. 바뀐 userNum 값을 fetch구문을 통해서 Database에 있는 userNum과 비교 하여 로그인을 진행합니다.
- 탈모 예측 화면(머신 러닝)
다음은 머신러닝을 통해 탈모 예측을 진행하는 페이지 이다. 머신러닝은 구글에서 지원하는 Teachable Machine을 사용하였다.
초반 이미지 데이터셋을 모으는 작업이 힘들었지만 블로그 ( 구글 이미지 , 인스타 이미지 클로링 ) 글을 통해서 그나마 쉽게 데이터셋을 만들 수 있었다.
머신러닝을 무료로 제공해주는 TeachableMachine의 소스를 이용하여 분류한 4개의 클래스를 high , middle , low , good 으로 초기화 해줍니다. 초기화 후에 SetTeachValue를 통해서 해당 값을 Predict.js 클래스에서도 사용할 수 있게끔 값을 넘겨줍니다.
넘겨주면 [로딩화면과 탈모검사 화면] 과 같이 값을 출력해주는 모습을 볼 수 있습니다.
해당 화면 역시 setTimeout을 이용하여 사용자의 제어 없이 자동으로 화면이 넘어가는 모습을 확인할 수 있습니다.
- 데이터 전송 화면
해당 프로젝트는 최대한 사용자의 제어 없이 자동으로 데이터 전송까지 이루어지기 때문에 전송을 하는 경우에는 사용자가 인식하기 쉽게 모달창을 이용하여 전송을 완료했다는 메시지를 보여주기로 했습니다.
해당 페이지 역시 setTimeout 함수를 이용해서 자동으로 측정을 완료하고, 데이터를 전송하도록 합니다.
state에서 isOpen 변수를 통해서 측정화면에서 자동으로 Submit 버튼이 눌릴 시 state.isOpen을 True로 만들어 Modal 창을 열어줍니다. 이후 닫기 버튼 역시 자동으로 클릭하고 state.isOpen 값을 다시 false로 설정하여 모달창을 닫아줍니다.
이후 데이터 전송 form을 이용하여 사용자가 측정한 값을 handleFormPredict 함수를 통해 DB에 전송합니다.
사용자가 측정한 탈모 예측 값을 Server.js를 통해 DB에 저장합니다.
저장 방법은 addpredict함수를 이용해서 formData를 보내줍니다. 보낸 데이터는 프록시 서버를 통해 DB에 값에 들어가는 것을 확인 할 수 있습니다.
웹에서 이러한 과정을 거쳐 DB까지 저장이 되고, 이후의 작업은 성재가 만든 앱을 통해서 결과를 확인할 수 있다.
프로젝트 전체 영상은 해당링크에 있다.
졸업작품 영상 : https://www.youtube.com/watch?app=desktop&v=4XMnau_PSn0
졸업작품 깃허브 주소 : https://github.com/beombeom1119/Namigation/tree/WEB
GitHub - beombeom1119/Namigation
Contribute to beombeom1119/Namigation development by creating an account on GitHub.
github.com
'휴지통.. > IT' 카테고리의 다른 글
| REACT + Spring Boot 를 이용한 선수 정보 웹페이지 (0) | 2022.03.30 |
|---|---|
| 졸업 작품 리뷰 ( 매직미러와 모니터 조립) (0) | 2021.10.25 |
