창고? 어땠냐고? 지옥 같았지...
창고 물자 관리를 어떻게 하냐고? 그냥 그때그때마다 세고 있어
창고 항상 그거 난장판이야 그거
혹시 XX 어디있는지 아십니까? 그거는 이제 창고 저어쪽 구석에 ...
군부대의 수많은 군수품들을 관리하는 창고, 각 창고는 모두 올바르게 관리되고 있을까요?
상급제대로부터 받은 군수품 혹은 필요할 때마다 그때그때 받은 모든 물품들은 창고에 저장되는데요
그렇다면 저장된 물품들의 상태와 수량, 종류, 위치를 모두 정확하게 최신화 하고 있을까요?
수많은 부대에서 아직도 보급담당 계원들만 골머리를 앓는채 그대로 유지되는게 맞을까요?
더이상 그때그때 정리하고 보여주기를 위해서만 창고정리는 그만
한번 정리하고 앞으로 쭉 관리하기 위한, 국방물자관리체계
단순한 UI, 기능적으로 복잡하지 않고, 기존의 창고를 있는 그대로 본뜨기 위한 간단한 창고 관리
일괄 추가 일괄 제거, 그리고 세부적인 검색이 가능한 물자 관리
검색은 이젠 그만! QR 코드 를 통한 간편한 인식과 재고 확인
이거 벌써 유통기한 지났네? 알람기능 을 통한 유통기한 임박 물품 리스트 확인
이걸 언제 다쓴거지? 히스토리 확인
 |
기존 부대의 각 창고의 모양을 본뜨기 위해서 간단한 UI 를 통해 창고의 모양을 생성하는 기능 |
| 창고 속 층과 구역을 간단히 나눠 그 누구든 검색한 위치로 쉽게 찾아갈 수 있도록 하는 창고 관리 기능 |
 |
 |
웹 사이트를 통한 수동 추가 또는 기존의 델리스 체계와의 호환을 위한 엑셀 맞춤형 물자 추가 |
| 사용 가능 기한, 담당자 등을 바탕으로 하여 세부 특성에 맞춘 검색 기능과 창고와 창고별 위치를 바탕으로 위치별 물자 검색 |
 |
 |
특정 물품에 가시성 있도록 바코드를 부착하여 간단한 관리 물자가 보관된 박스에 이를 조회해 들어있어야 하는 물품을 조회하거나 박스 이름을 조회 가능한 기능 |
 |
부대 물품이 변동된 기록을 확인하여 사용처와 사용량을 체크 가능 |
| 단순 웹사이트만 제공하는 체계들과 달리 휴대폰을 활용하여 창고에 직접 접속하여 물품의 리스트를 확인 QR 코드를 인식하여 조회할 수 있는 QR코드 검색 기능 |
 |
 |
부대에 속한 물품들이 유통기한이 임박했을 경우 이를 확인할 수 있음, 또한 부대 내 전파사항이 있을 경우 공지사항 게시판을 통해 서로에게 전파할 수 있음 |
$ git clone git주소
$ cd WEB(BE)
$ yarn
$ yarn start or yarn dev$ git clone git주소
$ cd WEB\(FE\)/mwms
$ yarn
$ yarn startapk 다운로드하기
위에 링크를 클릭후 다운을 받아준 후 압축해제
app-debug.apk 파일 설치
상단 이미지를 클릭하여 GIT-BOOK:프로젝트 사용법으로 이동할 수 있습니다.
- ECMAScript 6 지원 브라우저 사용
- 권장: Google Chrome 버젼 77 이상
- 권장 해상도: 1920 x 1200 (WEB) / 414 x 896 (APP)
권장 해상도가 아닐 경우 일부 요소가 보이지 않을 수 있음
박스/물자 추가 오류 발생 시 창고 관리 - 캐비넷 추가 후 저장
APP DEMO 웹 상에서 홈페이지가 로딩되지 않습니다 - APK 빌드에서는 정상 작동합니다
| YES | 11+ | YES | YES | YES |
1. DB, Framework
DB는 RDBMS의 MySQL을 사용하였고, 서버 프레임워크는 Node.js기반의 Fastify를 사용하여 개발 편의성을 높였습니다.
서비스의 특성상 테이블간 Relation 구성이 매우 중요하기 때문에, 본격적인 개발 시작에 앞서 DB 설계에 많은 시간을 투자했습니다.
2. ORM
MySQL - Fastify간의 ORM으로 Prisma를 사용했습니다. Prisma는 다양한 종류의 DB들을 서로 비슷한 문법으로 개발할 수 있도록 해주는 ORM입니다.
npx primsa generate로 DB Schema에 맞는 Typescript 타입 정의 파일을 생성할 수 있고, npx prisma migrate 한번으로 Schema에 맞게 연결된 DB의 테이블을 자동으로 조작해줍니다.
3. Swagger for API Docs
백엔드는 프론트엔드 개발자들과 협업을 하기 위해 각각의 API에 대한 스펙을 적절한 방법으로 전달해야 합니다.
그 중 API Route별로 Response, Request Body의 형태를 상세히 기술한 API Document를 제작하는 경우가 흔한데, 이를 자동으로 생성해주는 Swagger을 사용했고, 그 중에서도 서버 프레임워크인 Fastify에 맞는 Fastify Swagger을 사용하였습니다.
1. Framework
웹 프론트 개발 때 사용한 Framework는 React와 TailWind입니다.
React를 사용하여 JS 기반으로 웹 컴포넌트들을 구성하여 서버와 연동하였고, 창고 관리라는 프로젝트의 방향성에 맞추어 직관적인 UI를 구성하고자 TailWind라는 CSS 프레임워크를 사용하였습니다.
1. Framwork 앱 개발시 사용한 Framework는 Flutter입니다. 웹 사용시 보조적인 사용 도구로 앱이 필요하기 때문에 android, ios 둘 다 사용이 가능하도록 Flutter를 이용해 크로스 플랫폼 개발을 진행하였습니다. 또한, 웹과 비슷한 목적으로 사용성을 높이기 위해 UI의 직관성을 높이고자 하였습니다.
RackVisor
가상 현실(VM) 속 창고(RACK) 을 다루는 프로그램(HYPERVISOR) 처럼 군대 속 창고들을 쉽게 다룰 수 있는 프로젝트를 만들기 위해 모인 팀입니다.
| Name | Role | Github | |
|---|---|---|---|
| 제태호 (팀장) |
Product Manager FrontEnd Developer |
|  |
| 조영현 | BackEnd Developer |
|  |
| 이현우 | BackEnd Developer |
|  |
| 이원형 | App Developer |
|  |
| 여호영 | App Developer |
|  |
| 정유환 | Designer |
|  |
This project is licensed under the terms of the MIT license.
더 자세한 정보는 GIT-BOOK을 통해 확인하세요!