소개

여러분 링핏 어드벤처 하고 계십니까?
코로나 패의 영향으로 별로 외출을 할 수 없고, 특히 리모트 워크의 경우 운동 부족에 빠지기 쉽습니다.
그런 가운데, 자실에서 즐겁게 운동할 수 있는 링 피트 피트 어드벤처는 매우 편리합니다. 💪
이러한 상황도 함께 현재도 품박 상태가 계속되고있는 것 같네요.

그런데, 그런 링 피트 어드벤처입니다만, 플레이하고 있던 이하와 같은 것을 느꼈습니다.

일상적인 운동 기록은 볼 수 있지만 게임을 시작하는 것이 어려워집니다

switch 본체의 시간 조작을하고 있으면 올바르게 기록되지 않는다 (이것은 사람에 의합니다만 ...)

운동 기록을 그래프로 해 보고 싶다!

그래서 흔한 피트니스 앱처럼 운동 기록을 입력하여 그래프에서 볼 수 있도록 했습니다.
제작 기간은 2개월 정도입니다.

링핏 로그

GitHub

기능

기록 입력 화면

아래 이미지의 링핏 어드벤처 운동 종료 후 표시되는 오늘의 운동 결과 항목을 입력할 수 있도록 하고 있습니다.

달력

달력 보기에서 달의 운동 기록을 시각적으로 표시합니다. 어느 날에 사보 버렸는지 모르겠다 ...

그래프

그래프에서 일상적인 운동량의 변화를 볼 수 있습니다.
그래프를 만들려면 vue-chartjs을 사용합니다.

사용 기술

프런트 엔드

Nuxt.js + TypeScript + Vuetify

익숙한 Vue.js 프레임 워크의 Nuxt.js를 SSR 모드에서 사용하고 있습니다.
UI 프레임워크도 사용한 적이 있는 Vuetify로 했습니다.

Nuxt.js(Vue.js)를 TypeScript로 작성한 적은 없었습니다만, 한 번 개발시의 쾌적함을 맛보면 더 이상 JavaScript를 사용하는 것은 생각할 수 없을 정도였습니다.

또, Nuxt.js의 PWA 모듈을 사용하면 간단하게 PWA화할 수 있으므로 도입하고 있습니다.

백엔드

Express + TypeScript

백엔드는 Nuxt.js의 serverMiddleWare로 구현되며 BFF처럼 처리됩니다.
Nuxt.js 외에 외부 서버를 필요로하지 않는 것이 기쁩니다. 언어로 Node.js만 선택할 수 있는 단점이 있습니다...

Express는 Node.js의 프레임워크입니다. 상대적으로 자유도가 높기 때문에 MVC 프레임워크를 따라 구축하고 있습니다.

데이터베이스

MongoDB

다음과 같은 점에서 데이터베이스로 MongoDB를 채용하고 있습니다.

응용 프로그램의 특성상 데이터 무결성은 중요하지 않습니다

사용자가 많기 때문에 정보를 얻기 쉽습니다

NoSQL이지만 합계 및 평균과 같은 집계 작업이 가능합니다.

MongoDB의 ODM으로서 mongoose 가 유명합니다만, 이것을 TypeScript로 기술하는 경우 확장하지 않으면 안되는 것이 많아서 힘들었습니다...

테스트 프레임워크

Jest

서버

에 6

배포 대상으로는 작은 응용 프로그램이기 때문에 heroku를 선택했습니다.

결론

제작에 그렇게 시간이 걸리지 않는다고 생각했습니다만, 생각보다 시간이 걸려 버렸습니다.
개인개발이라면 하지도 자유도 없고, 그 날의 기분으로 개발을 권하고 있었기 때문에 엉망이 되어 가 버렸습니다.
명확한 일정을 설정하고 진행해야했습니다 ...