프로젝트/[백엔드] JS,HTML 트래킹맵
#6 [3단계] 특정날짜의 경로를 보여주는 HTML (최종)
SeokjunMan
2023. 11. 28. 17:07
이번엔 저번에 만든 서버코드3으로부터 gps데이터를 받아 그라파나 대시보드에 구현하는 html을 만들어보도록 하겠다.
< 3단계 서버코드3 >
https://jayindustry.tistory.com/84
#5 [3단계] 서버코드3 (최종)
이번 3단계에서는 2단계 서버코드2에서 날짜에 따른 경로표시 기능을 추가하기 위한 작업을 한다. < 2단계 서버코드 > https://jayindustry.tistory.com/82 #3 [2단계] 파이프라인 + 서버코드2 이번 포스트에
jayindustry.tistory.com
[ 3단계 개요 ]
2단계까지는 로봇의 현재위치와 최근 20분의 경로가 표시되었다면, 3단계(최종)에서는 소비자가 특정날짜를 선택하면 그 날짜의 모든 경로를 위성맵에 표시하는 기능을 구현한다.
이를 위해서는 날짜별로 실시간 모든 gps데이터들이 담긴 DB와 추가적인 연결이 필요하였다.
이제까지는 몽고DB에서 데이터를 저장하고 꺼내왔는데, 날짜별로 저장되어있는 DB는 PSQL이라는 PostgreSQL이다. (이는 위 링크의 서버코드에서 진행하였다.)
1. GPS데이터 받기
2. 받은 데이터를 필터링 및 정제하고 경로그리기 함수실행
3. 경로그리기 함수
[ 내용 ]
1. GPS데이터 받기
먼저 서버코드로부터 psql의 선택한 날짜의 gps데이터를 전달받는다.
('date-picker') 부분은 소비자가 입력할 날짜가 들어간다.
그 날짜를 date에 넣고 서버코드에 해당날짜에 대한 데이터들을 요청한다.
credentials : include는 서버와 클라이언트 사이 사용자 이용정보를 포함하는 기능인데, 자세히는 몰라서 혹시 몰라 추가했다.
헤더로 추가옵션을 주는데 application/json문구를 넣어줌으로서 데이텨형식을 명확히하고 특정 주소:외부포트로부터 오는 정보들은 허용하는 명령을 담았다.
마지막엔 받은 데이터를 제이슨형식으로 담았다.
2. 받은 데이터를 필터링 및 정제하고 경로그리기 함수실행
받은 데이터를 콘솔에 출력하고, 데이터가 존재하고 배열형태인지 확인한다.
만약 데이터가 위 조건을 만족하면, 기존에 선택되어진 날짜경로를 삭제하여 갱신하고,
서버로부터 받은 데이터를 map함수로 변환한다.
d.으로 원본배열 data의 각 요소를 순차적으로 돌며 새로운 객체로 만든다.
즉, data의 각 요소가 d로 전달되고,
parseFloat(d.latitude)와 parseFloat(d.longitude)는 d 객체의 latitude와 longitude 속성을 실수로 변환한다.
그리고 이는 gpsCoordinate라는 새로운 배열로 저장된다.
참고로 코드 맨 위에 특정날짜와 해당날짜의 경로를 저장할 변수를 만들어준다.
3. 경로그리기 함수
그리고 받은 gpsCoordinates를 기반으로 아래 함수를 실행시킨다.
그럼 기존의 특정날짜에 대한 경로는 없애고 새롭게 받은 날짜에 대한 경로만 표시하게 된다.
[ 결과 ]
위 결과물은 그라파나 대시보드 상에서 고객이 볼 수 있는 화면이다.
아래 날짜선택 드롭바를 누르면 캘린더가 나오고, 고객이 특정 날짜를 선택하면 위의 사진처럼 로봇의 해당날짜에 대한 모든 경로가 파랑색으로 표시된다. 주황색은 2단계에서 구현한 최근 20분의 경로이고, 노랑점은 현재위치를 나타내는 점이다.
서버코드를 잠깐 실행중단하여 주황색 20분 경로가 갱신이 안된모습이라 노랑*현재위치와 약간 멀리 있다.
[ 소감 및 피드백 ]
이번 프로젝트를 계기로 서버와 클라이언트를 다시한번 실전에서 사용해보았다.
그리고 파이썬이 아닌 html과 javascript로 서버,클라이언트를 구현해 보아서 어려웠지만 더 다양한 언어를 다뤄보았다는 것에 대해 매우 뿌듯하였다.
노시퀄인 몽고DB, 시퀄인 PostgreSQL 둘 모두와 연결하여 데이터를 저장하고 꺼내봄으로서 쿼리문에 대한 이해와 콜렉션,테이블, 전반적인 DB에 대한 이해도가 좀 더 상승하였다.