세마고등학교 물품관리 사이트 개발 프로젝트

목차

• 프로젝트
• 기획 및 개발
• 제작 기간
• 사용 기술
• 배포
• 수정 사항
• 추후 예정
• 프로젝트 기획배경
• 구현 기능
• 회고

프로젝트 제목

세마고등학교 물품관리 사이트 개발

기획 및 개발

문진혁 (기획, 개발)

제작 기간

2022.03.05 ~ 2022.03.19

사용 기술

• Front-End: Ejs , Css , Bootstrap
• Back-End: Node-Js, Express, MongoDB

배포

세마고 과학실 물품과학사이트

CloudTYPE 에서 배포하였음.

수정사항

Fixed(2022.12.30)

추후 예정

• ~~REST.API 에 의거하여 프로그래밍
• 빠른 접속을 위해 WebView 앱 제작 예정 및 플레이스토어에 배포 예정

프로젝트 기획 배경

2020년 고등학교 소속 동아리(SEDA) 에서 과학실 물품관리 프로젝트라는 이름으로, 과학실의 물품들을 데이터로 저장 한 후에 이를 관리하는 프로젝트를 진행한 적이 있음.

• 2019년 - 물품에 대한 RFID카드를 제작, node-mcu 를 이용하여 리더기에 물품 카드를 대면 사용할 수 있는 방식으로 제작
• 2020년 - HTML을 이용하여 물품에 대한 페이지를 계속 작성, QR코드와 매치를 시킨 후 해당 QR을 찍으면 물품에 대한 정보를 보여주는 웹페이지 제작.

해당 프로젝트에서의 문제

• 추가로 물품에 대한 페이지 생산 불가 (직접 Html 파일을 제작해야 함)
• 물품에 대한 수정 사항이 생길 경우, 직접 Html을 수정해야 함
• QR코드로만 접근이 가능하여, 과학실이 외에서 해당 정보가 필요한 경우에는 사용이 불가능
• 물품에 대한 RFID카드를 사용해야 사용 중으로 바꿀 수 있음
• 계속해서 물품이 늘어날 때마다 RFID카드를 만들어야 함
• 기본적인 HTML만을 사용하여 매우 보기 불편한 웹 페이지

이에 대한 문제들을 해결 하기 위해서 개인 프로젝트로 선정함.

구현 기능

해당 github 페이지 내 sourceCode 에서 코드를 볼 수 있음

※해당 sourceCode로는 사이트를 운영시킬 수 없음(DB_URL 제거 및 일부 private코드 제거)

• resources 이미지 폴더
• routes 벡엔드 코드 폴더
• styles css 코드 폴더
• views ejs 코드 폴더

데이터베이스 설계

API 명세서

Fixed(2022.12.30) 참고

기능 설명

• 메인페이지

  

  물품 리스트를 서버에서 받아와 메인페이지에 출력

• 물품 추가

  

• 물품 상세 페이지

  • 사용하는 사람이 없을 경우

    

  • 사용하는 사람이 있는 경우 - 주황색 창으로 테두리 변경

    

  • 물품을 모두 사용한 경우 - 빨간색 창으로 테두리 변경

    

    • 물품 사용 금지에 대한 알림창 생성

• 물품 사용자 명단 페이지

  

  • 교실별로 각 물품마다 아이콘으로 나타냄
  • 빠른 사용완료 버튼 추가
  • 현재 사용하는 전체인원 조회

• 교실별 물품 페이지

  • 뉴턴실

  

  다윈실

  

  케플러실

  

• 추가 기능

  • QR코드 생성을 눌렀을 경우 (기능)

    

  • 검색 기능

    

Fixed. (2022.12.30)

• REST API 에 맞게 URL 변경
• 세부사항 수정

API 명세서 업데이트

• 물품 공지사항 전체 조회
  • GET /

물품

• 교실별 물품 조회
  • 뉴턴실 - GET /newton
  • 퀴리실 - GET /curie
  • 다윈실 - GET /dawrin
  • 케풀러실 - GET /kepler
  • 리소스실 - GET /resource
• 물품 검색 조회
  • GET /search
• 물품 상세 조회
  • GET /items/{id}
• 물품 추가 요청
  • GET /items
  • POST /items
• 물품 수정 요청
  • GET /edit/{id}
  • POST /edit-items
• 물품 삭제
  • DELETE /items

사용자

• 사용자 조회
  • GET /members
• 사용자 추가 요청
  • POST /members
• 사용자 삭제 요청
  • DELETE /members

공지사항 추가

• 공지사항 추가 요청
  • GET /notices
  • POST /items
• 공지사항 수정 요청
  • GET /edit/{id}
  • POST /edit-notice
• 공지사항 삭제 요청
  • DELETE /items

최대한 REST API 에 맞게 작성 하지만 edit 관련 부분은 처음 설계 실패로 수정 불가능

회고

이 프로젝트는 처음으로 설계부터 배포까지 직접 해본 프로젝트이다. 한 달 전에 Node.js+Express 를 배우고, MongoDB를 통하여 커뮤니티를 제작해본적이 있다. 이를 이용하여 한번 제작을 해보았는데 직접 벡엔드와 프론트엔드 두가지를 잡아보려 하다보니 어려움이 조금 많이 있었다. 특히 벡엔드 작업을 할때, 원하는 정보를 Ajax로 받아서 요청해야하는데 요청을 받지 못한다거나 하는 일이나, 원하는 대로 웹 화면이 잘 보이지 않는 그런 경우들이 있었다. 또한 REST.API에 맞추어 서버 작업하는 것도 많이 어려웠다. 처음부터 API를 계획하고 했어야하는데 거의 막 제작하다보니, 오류가 많이 있었다. 서버 배포할 때에도 문제가 있었다. 처음 서버는 Heroku를 이용하여 무료로호스팅을 했는데, 어느순간부터 무료호스팅 기능이 사라져 새로운 호스팅 사이트를 찾느라 시간을 소비하기도 했다. 최종적으로는 나의 맘에는 드는 사이트를 개발할 수 있었다. 나중에 도메인도 직접 구입하여 바꿔준다면 좋을 것 같다. 다음 프로젝트를 할때부터는 기획을 아주 중요하게 하고, 개발을 해야할 것같다. 그러기 위해서는 협업이 얼마나 중요한지 깨달을 수 있었다. 직접 프로그래밍을 하여 웹을 제작할 수 있는 좋은 기회가 되었다.