M151 / M152 Personenverwaltung

Execution

Prerequisites

• Docker
• Gradle
• Node package manager
• JDK 11

Run locally

1. git clone [email protected]:Lenoxy/M151-M152-Personenverwaltung.git
2. cd M151-M152-Personenverwaltung/frontend
3. npm install
4. npm run build
5. cd ../backend
6. gradle build
7. cd ..
8. docker-compose up -d
9. Open localhost:81 in your browser

Info: für die zwei vordefinierten Benutzer lautet dass Passwort Hallovelo1

Einführung

In diesem Projekt erstellen wir eine Personenverwaltung für ein fiktives Unternehmen. Dazu gibt es Administratoren, welche alle Benutzer verwalten können. Die "normalen" Benutzer haben ausschliesslich Leserechte auf alle Benutzer.

Personengruppen

Stefan Keller

• 61 Jahre alt
• Kadermitglied
• 11'000 Franken pro Monat

Stefan ist im Kader der Firma und möchte mit wenig Aufwand seine Mitarbeiter im System verwalten können. Stefan kennt sich nicht so gut mit Computern aus, deshalb sollte die Applikation für ihn möglichst einfach zu bedienen sein.

Anna Baumann

• 35 Jahre alt
• HR Mitarbeiterin
• 6'000 Franken pro Monat

Anna arbeitet im HR und muss regelmässig Adressen und Telefonnummern von anderen Mitarbeitern nachschauen. Deshalb möchte sie möglichst einfach die Personalien eines Arbeitskollegen finden.

Otto Heller

• 31 Jahre alt
• Sekretär
• 5'000 Franken pro Monat

Otto arbeitet im Sekretariat der Firma. Er zieht ungefähr vier Mal im Jahr um und möchte daher seine Adresse im Personenverwaltungstool schnell und einfach ändern.

Userstories

Als Benutzer und Administrator möchte ich mich mit meinem Benutzeraccount Anmelden können, sodass die persönlichen Daten nur von Mitarbeitern angeschaut werden können.

Als Benutzer und Administrator möchte ich mich abmelden können, sodass eine höhere Sicherheit gewährleistet werden kann.

Als Benutzer und Administrator möchte ich die Personalien von allen meinen Arbeitskollegen sehen und suchen können, sodass ich Mitarbeitende einfach kontaktieren kann.

Als Benutzer und Administrator möchte ich meine eigenen Personalien editieren können, sodass ich bei einem Umzug oder sonstigen Änderungen meine Daten selbstständig anpassen kann.

Als Administrator möchte ich Benutzer sowie Administratoren anlegen, bearbeiten und löschen können, damit Firmenein- und Austritte einfach ablaufen können.

Technologiestack

Runtime

• Docker für alle Teile

Frontend

• Vue3 als Framework
• Vuex als Store

Backend

• Java Spring als Framework
• JPA als connector zur Datenbank
• Gradle als package manager

Datenbank

• Dokumentbasiert, da die Personaldaten recht ineinander abgeschlossen sind.
• MongoDB als DB

Mockups

Die restlichen Seiten sehen im responsive Design gleich aus, wie im browser. z.B.:

Designentscheidungen

Beim bestimmen von Schriftarten und Farben im Frontend haben wir diverse Möglichkeiten angeschaut. Da wir Vue 3 gebraucht haben, mussten wir uns hier für eine den neusten Design-Frameworks entscheiden. Primevue hat unsere Meinung nach eine gute Darstellung in Bezug auf Farben, Schriftarten und responsive Design.

Bei den Elementen war das wichtigste für uns, dass wir Karten einsetzen können. Somit waren Karten auf jeder Seite obligatorisch. Der nächste Punkt für uns war, dass der Content der Seite ausserhalb des Headers in der Mitte der Seite dargestellt wird.

Unsere Zielgruppe besteht aus Personen aus verschiedenen Altersgruppen. Aus dem Grund haben wir eine entsprechende Schriftgrösse gewählt. Sonst haben wir noch Login aufgeteilt auf Benutzer ohne und mit Passwort. Das haben wir gemacht, dass wir unser Login möglichst einfach halten, sodass jeder Benutzer sich problemlos einloggen kann. Wir haben eine navbar erstellt, dass alles mit den richtigen Berechtigungen Seite zugreifbar ist. Für die Sprache haben wir Englisch gewählt, sodass die App international angewendet werden kann.

Bei der Responsiveness funktioniert die App einwandfrei für Geräte mit 360px in der Breite. Wir haben noch eine Home Seite eingefügt, damit die Rollen des Webapps allen Besuchern klar sind.