FBEye Web Server

실행

• npm start

기능

FBEye Web Server는 시험 감독자를 위한 시험 관리/감독 웹 어플리케이션입니다. 시험 관리자(감독) 계정으로 회원가입 및 로그인하여 사용할 수 있습니다.

• 시험 관리 페이지, 문제 관리 페이지, 응시자 관리 페이지를 이용해 시험을 생성하거나 삭제할 수 있으며, 시험 문제와 응시자에 대한 정보를 수정할 수 있습니다.
• 시험 도중 채팅으로 응시자들과 실시간으로 소통하며 시험에 관한 피드백을 빠르게 주고받을 수 있습니다.
• 응시자가 부정 행위로 의심되는 행위를 할 시 해당 사항에 대한 로그가 감독관에게 전송됩니다. 감독관은 웹 페이지로 전송된 로그를 보고 누가 어떤 행위를 했는지 확인할 수 있습니다.
• 참여자 목록에서 응시자를 선택하여 해당 응시자의 얼굴과 화면 영상을 실시간으로 볼 수 있습니다.

특징

• Javascript 런타임 Node.js와 웹 프레임워크 Express.js를 사용하여 구현했습니다.
• socket.io를 통한 실시간 채팅 및 사진 스트리밍
• MongoDB를 사용하여 DB 서버 구현

작동 원리

FBEye Web Server의 작동 원리에 대해 설명하는 파트입니다.

회원가입

• 회원가입 페이지에서 이메일과 비밀번호, 확인 비밀번호를 입력하여 회원가입을 합니다. 회원가입을 하며 사용자가 입력한 데이터는 서버로 전송됩니다.
• 비밀번호와 확인 비밀번호가 일치하는지 검사합니다. 일치하지 않는다면 패스워드가 일치하지 않는다고 flash를 전송하며 회원가입 페이지로 리다이렉트하고, 일치한다면 다음 단계로 넘어갑니다.
• 전송받은 데이터와 동일한 정보가 DB에 저장되어 있는지 검사합니다. 동일한 정보가 DB에 이미 저장되어 있다면 이미 등록된 이메일이라고 flash를 전송하며 회원가입 페이지로 리다이렉트하고, 새로운 데이터라면 DB에 데이터를 저장한 뒤 회원가입에 성공하였다고 flash를 전송하며 로그인 페이지로 리다이렉트합니다.

로그인

• 사용자가 로그인을 시도하면서 입력한 이메일과 비밀번호가 서버로 전송됩니다.
• 서버는 DB 내에 전송받은 데이터와 일치하는 데이터가 있는지 검사합니다. 검사에 실패하면 이메일이나 패스워드가 잘못되었다고 flash를 전송하며 로그인 페이지를 클라이언트에게 전송하고, 성공하면 세션에 로그인 정보를 등록합니다.

시험 관리

시험 추가

• 새로운 시험을 추가하는 페이지입니다. 시험 이름, 시험 감독관, 시험 시작/종료 시간, 시험 코드를 결정합니다.
• 사용자는 시험 이름, 시험 시작/종료 시간을 입력합니다. 감독관은 현재 세션의 주인으로, 변경할 수 없습니다. 시험 코드는 무작위로 생성되는 코드로, 변경할 수 없습니다.
• 추가된 시험은 시험 관리 목록에 나타나 개요 열람/수정 및 감독이 가능하게 됩니다.

시험 개요

• 시험에 대한 정보를 표시합니다. 이름, 시작/종료 시간, 시험 코드를 확인할 수 있고, 시험에 총 몇 문제가 있는지, 응시자는 총 몇 명이 있는지 확인할 수 있습니다. 이 페이지에서는 문제 관리, 응시자 관리 페이지로 넘어갈 수 있습니다.

문제 관리

• 시험에 등록되어 있는 문제들의 문제 번호, 문제 내용, 문제 형식, 배점의 정보를 확인할 수 있습니다.
• 문제 추가 버튼을 눌러 새로운 문제를 추가하는 페이지로 넘어갈 수 있고, 각 문제를 눌러 해당 문제를 수정하는 페이지로 넘어갈 수 있습니다.

문제 추가

• 형식, 배점, 문제, 정답을 입력할 수 있습니다. 사용자가 완료 버튼을 누르면 입력한 데이터가 서버로 전송되어 DB에 저장됩니다.

문제 편집

• 추가된 문제를 수정할 수 있는 페이지입니다.

응시자 관리

• 시험에 등록된 응시자들의 목록을 볼 수 있는 페이지입니다. 응시자 추가 버튼을 눌러 새로운 응시자를 추가하는 페이지로 넘어갈 수 있습니다.

응시자 추가

• 응시자 이메일, 이름, 응시자 코드를 등록하는 페이지입니다. 이 중 응시자 코드는 무작위로 생성되는 코드로, 변경할 수 없습니다.

시험 감독

시험이 치뤄지는 동안 참여자들을 감독하는 페이지입니다.

• 감독 페이지는 크게 참여자 목록, 참여자 영상, 부정행위 로그, 채팅의 4개의 패널로 나뉘어집니다.
• 참여자 목록 패널에서는 시험에 등록된 참여자를 확인할 수 있습니다. (( 참여자가 시험에 입장했는지 색을 통해 확인할 수 있습니다. ))
• 참여자 영상 패널에서는 참여자들의 얼굴 영상과 시험 화면을 확인할 수 있습니다. 참여자 목록에서 영상을 확인하고 싶은 참여자를 눌러서 선택하면 해당 참여자의 얼굴 영상과 시험 화면이 실시간으로 보이게 됩니다.
• 부정행위 로그 패널에서는 참여자가 부정행위를 했다고 의심될 때마다 전송되는 로그를 볼 수 있습니다. 부정행위를 했다고 의심되는 참여자가 누구고, 언제 어떤 행동을 했는지 확인할 수 있습니다.
• 채팅 패널에서는 시험에 대한 정보, 시험 문제에 대한 피드백 등을 실시간으로 참여자들과 주고받으며 소통할 수 있습니다.

외부 라이브러리

• Bootstrap (프론트엔드 프레임워크)
• Node.js (Javascript 런타임)
• Express.js (Node.js 웹 프레임워크)
• ejs (Jake) (템플릿 엔진)
• socket.io (WebSocket 라이브러리)
• MongoDB (문서형 NoSQL 데이터베이스)