Hierbei handelt es sich um das Frontend des CO2 Rechners, welcher im Rahmen des Bachelorpraktikums für das Büro für Nachhaltigkeit und das Institut für Fluidsystemtechnik entwickelt wurde.
Dieses Projekt ermöglicht eine Erfassung von CO2 Emissionen von TU Einheiten und die anschließende Auswertung.
- Nutzendenverwaltung
- Umfrageerstellung für Verantwortliche von TU Einheiten
- Befragung von Mitarbeitenden der eigenen TU Einheit
- Verwaltung und Bearbeitung von erstellten Umfragen
- Auswertung von Umfragen und Teilen der Umfrageergebnisse
- Administrative Schnittstelle an Datenbank zum Eintragen von Daten
- Einsicht aller vorhandenen Umfragen durch administrative Benutzende
Das Frontend kann nicht unabhängig betrieben werden.
Das Backend, welches als Controller und Schnittstelle zur Datenbank dient, ist hier einsehbar: Github
Die Interaktionen zwischen Frontend und Backend sind in einer REST artigen API definiert, welche hier eingesehen werden kann: Github
Der CO2 Rechner verwendet folgende Abhängigkeiten, um die Funktionalität bereitzustellen:
- core-js Version 3.6.5 - Javascript für Eventhandling
- vue Version 2.6.11 - Framework für Webdarstellung
- vue-router Version 3.5.3 - Routing von Seitenzugriffen
- vuetify Version 2.4.0 - Material Design UI Framework für einheitliche Darstellung
- vue-material-design-icons Version 4.13.0 - Material Design Icons zur Darstellung
- chart.js Version 2.9.4 - Javascript Graphenframwork
- chartjs-plugin-datalabels Version 1.0.0 - Labeling Plugin für Graphen
- vue-chartjs Version 3.5.1 - Chartjs integration in Vue
- file-saver Version 2.0.5 - clientseitiger Download von Auswertungen
- xlsx Version 0.17.5 - Auswertungsexport
- vue-keycloak-js 2.4.0 - Vue Keycloak Client
- katex 0.12.0 - TeX Rendering
- vue-katex 0.5.0 - KaTeX in Vue
- vue-i18n 8.28.2 - i18n für Vue
- vue-papa-parse 3.1.0 - PapaParse zum Parsen von CSV Dateien
Das Projekt wurde mit der Vue CLI v4.5.15 erstellt.
Im Backend Repository ist eine Docker Compose File gegeben, die folgende Container enthält:
- MongoDB als Datenbank
- NGINX als Webserver und Reverse Proxy
- Keycloak zur Authentifizierung und Kommunikation mit externen Diensten
- Postgres als Datenbank für Keycloak
Das Frontend und Backend müssen unabhängig von der Docker Compose lokal gestartet werden.
Die default Konfiguration erwartet das Frontend unter localhost:8081 und das Backend unter localhost:3000.
Installation von allen Abhängigkeiten über Paketverwaltung npm.
npm install
npm run serve
npm run build
In der Entwicklung haben wir den Linter ESLint verwendet, welcher Javascript code analysiert und gängige Probleme automatisch korrigiert, sodass die Code einer einheitlichen Struktur entspricht.
npm run lint