View Code? Open in Web Editor
NEW
This project forked from smart-beacon/opnc
Development of access management system for major facilities using smart phone and beacon sensor (BLE)
JavaScript 59.57%
C++ 5.41%
C 0.35%
Objective-C 0.01%
Java 2.06%
Dart 26.36%
CSS 0.83%
Swift 0.38%
HTML 0.44%
CMake 4.60%
opnc's Introduction
- 해당 프로젝트는 한남대학교 컴퓨터공학과 연구팀이 회사의 외주를 받아 제작하게 된 프로젝트입니다.
- 관리저용 웹 서비스, 사용자용 앱 서비스, 백엔드, 비콘을 이용한 출입시스템을 제작하였습니다.
- Front : NextJs, javascript, jwt, dayjs, react-calendar, chakra UI
- Back-end : express.js, mysql, bcrypt, jwt
- App: flutter
- 버전 및 이슈관리 : Github
- UI
- 페이지 : 관리자용 웹(출입문 현황, 출입문 관리설정, 출입문 입출이력, 출입자 관리, 출입 관리자, 경보 이력, 문자발생 이력) 페이지
- 전체 개발 기간 : 2022-06 ~ 2022-10
- Git을 사용하여 코드관리를 진행하였습니다.
- 주 3~4회씩 연구실에서 회의를 통해 현 상황을 공유하며 개발 진행을 함께 하였고, 3주마다 회사에 진행 상황을 보고하며 새로운 요청사항등을 수렴하고 진행하였습니다.
- 관리자 계정으로 로그인을 시도하는 페이지입니다.
- ID,PW의 유효성 검사가 존재합니다.
| 로그인화면 |
 |
- 상단배너
- 현재 날짜, 요일, 시각을 알 수 있습니다.
- 로그아웃 기능이 존재합니다.
- 등록된 모든 건물, 출입문, 비콘센서의 감시현황을 보여줍니다.
- 지정된 시간마다 데이터가 로드되어 현황이 업데이트 됩니다.
| 출입문 현황 |
 |
- 현재 관리되고 있는 건물 및 출입문의 현황을 보여줍니다.
- 새로운 출입문 등록이 가능합니다.
- 모달창에서는는 관리자 이름, 건물명, 건물 ID, 도어명, 도어 ID, 감시여부, 개방 날짜 선택을 입력받습니다.
- 조회할 출입문 이력 선택옵션, 옵션 선택시 그에 맞는 모든 출입문 입출이력이 표시됩니다.
- 관리자별 담당하는 출입문의 입출이력을 조회할 수 있고, 최고 관리자는 모든 입출이력을 조회할 수 있습니다.
- 엑셀 아이콘을 클릭하여 출입 기록을 csv파일로 다운받을 수 있습니다.
- 관리 건물 도어의 예약 방문자들의 승인을 할 수 있습니다.
- 날짜, 시간을 선택하여 필터링 할 수 있습니다.
- 엑셀 아이콘을 클릭하여 출입 기록을 csv파일로 다운받을 수 있습니다.
- 전체 개방 : 최고관리자는 모든 시설의 도어를 개방, 일반관리자는 담당도어들을 전체 개방
- 관리시설 선택 : 최고관리자는 모든 시설 선택 가능, 일반관리자는 담당도어의 시설만 선택가능
- 개방여부 체크시 해당 도어의 문이 열리게 됩니다.
| 출입문 입출이력 |
방문자 예약승인 |
비상도어 개방 |
 |
 |
 |
- 담당 건물들의 출입자들을 확인할 수 있습니다.
- 검색 기능을 통해 필터링하여 확인할 수 있습니다.
- 모달창을 열어 새로운 출입자들을 등록 할 수 있습니다.
| 출입자 관리 |
모달 |
 |
 |
- 최고 관리자 계정으로 로그인시 사이드바에 보여집니다.
- 모달창을 열어 새로운 일반 관리자들을 등록 할 수 있습니다.
- 소속, ID, PW, 등록일자, 로그인 상태, 문자 수신 내역을 확인할 수 있습니다.
| 출입 관리 |
모달 |
 |
 |
- 담당 도어들의 경보 이력을 확인 할 수 있습니다.
- 건물명, 도어명, 비콘ID, 날짜, 시간, 관리자이름을 확인할 수 있습니다.
- 엑셀 아이콘을 클릭하여 출입 기록을 csv파일로 다운받을 수 있습니다.
| 경보 이력 |
 |
- 발송된 문자들의 이력을 확인할 수 있습니다.
- 건물명, 출입문명, 비콘ID, 발송날짜, 시간, 관리자명, 문자발송 상태를 확인할 수 있습니다.
| 문자발생 이력 |
 |
| flow |
 |
| ERD |
 |
opnc's People
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent