seb-screen-proctoring-gui

GUI component for Safe Exam Browser screen proctoring project.

This is a sub-project of SEB Server. For full usage and installation, please visit the SEB Server page

Overview

This project consists of two parts. A client component and a server component. The server contains no businesses logic but serves as a lightweight api-gateway between the client and the SP-Server. The easiest way to build and deploy the project is via docker.

Client

The client uses the following technologies:

VueJs Version 3.4.*

• Composition API and Script Setup Syntax
• Typescript
• Vuetify as the componenet framework

Server

The server uses the following technologies:

ExpressJs Version 4.19.*

• Typescript
• Axios as API-Request library

Local development

Instructions on how to get a local development environment up and running.

Required technologies

• your favorite code editor such as VS-Code
• Node and NPM as CLI-Tools
  • Windows
  • Mac
  • Ubuntu
• SP-Server up and running (follow the SP-Server instructions)
• Optional: Docker for building and deploying the application

Refer to the seb-server-setup project to get a description on the environment variables. (Hier bitte noch den richtigen Link zum docker-compose File hinzufügen)

Steps to follow

1. Clone this repo to your local machine
2. navigate to the "client" folder
   • create a .env file
   • add the following content:

   VITE_SERVER_URL="http://localhost" 
   VITE_SERVER_PORT="3000"
   

3. run npm install
4. run npm run dev
5. if everything worked correctly, you should see an output in your terminal similar this one:

   VITE v4.4.9  ready in 281 ms
   ➜  Local:   http://localhost:8081/
   ➜  Network: use --host to expose
   ➜  press h to show help
   

6. navigate to the "server" folder
   • create a .env file
   • add the following content:

   NODE_ENV="dev"
   SERVER_PORT=3000
   
   PROCTOR_SERVER_URL="http://localhost"
   PROCTOR_SERVER_PORT="8090"
   PROCTOR_DEFAULT_URL="/admin-api/v1"
   
   DEV_SERVER_URL="http://localhost"
   DEV_SERVER_PORT="8080"
   
   PROCTOR_SERVER_USERNAME="{username for oauth}"
   PROCTOR_SERVER_PASSWORD="{pw for oauth}"
   
   SEB_SERVER_INTEGRATED_MODE="true"
   

7. run npm install
8. run npm run dev
9. if everything worked correctly, you should see an output in your terminal similar this one:

   10:45:22 AM - Starting compilation in watch mode...
   [0] 
   [0] 
   [0] 10:45:23 AM - Found 0 errors. Watching for file changes.
   [1] info: 26.10.2023 10:45:23: 	env mode: dev
   [1] info: 26.10.2023 10:45:23: 	⚡️[server]: Server is running at 0.0.0.0 3000
   

Troubleshooting