Im Rahmen des Projekts Venue (ehemals "Accelerator") haben wir uns zum Ziel gesetzt, das Frontend einem umfassenden Redesign zu unterziehen. Hierfür haben wir eine moderne UI mit einem neuen Logo gestaltet, um die Benutzerfreundlichkeit zu steigern. Zur Erreichung unserer Ziele in diesem Semester haben wir diese wie folgt priorisiert:
...
...
@@ -38,36 +40,27 @@ Durch diese Struktur können wir neue Funktionen isoliert entwickeln und gleichz
### Guidelines
## Aufbau
Für das Redesign von Venue haben wir uns entschieden, React als Framework zu nutzen. Hier ist ein Überblick über die wichtigsten Aspekte unserer Frontend Architektur:
### Struktur
Unsere Anwendung folgt einer komponentenbasierten Struktur, bei der jede UI-Einheit in isolierte, wiederverwendbare Komponenten aufgeteilt ist. Dies fördert die Wiederverwendbarkeit des Codes und ermöglicht bei Bedarf eine einfachere Erweiterung.
-**Hauptkomponenten**: Diese umfassen die grundlegenden Strukturen der Anwendung wie das Hauptmenü, die Settings und allgemein die Meetingräume.
-**UI-Komponenten**: Diese beinhalten kleinere, wiederverwendbare Elemente wie Buttons, Eingabefelder und Icons.
## Dependencies
### Frontend
#### [React](https://react.dev/)
**[React](https://react.dev/)**<br>
Nach sorgfältiger Abwägung der verfügbaren Optionen standen wir vor der Entscheidung zwischen zwei Frameworks: React und Vue. Vue ist bekannt dafür, das am einfachste zu erlernende JavaScript Framework zu sein. React hingegen zeichnet sich durch Leistungsfähigkeit, Skalierbarkeit und die Unterstützung durch eine große Entwickler-Community aus. Letztendlich fiel unsere Wahl auf React.
React bietet eine große und aktive Community sowie eine breite Palette an Ressourcen und Modulen und ermöglicht die Erstellung wiederverwendbarer, maßgeschneiderter Komponenten. Die komponentenbasierte Architektur von React ist hilfreich bei der Entwicklung, da sie eine effiziente Code-Organisation und eine gute Wiederverwendbarkeit von Code ermöglicht.
Ein weiterer Entscheidungspunkt war die Performance. Die Verwendung des virtuellen DOMs in React gewährleistet eine flüssige Benutzererfahrung, da nur die veränderten Komponenten aktualisiert werden müssen, was zu schnelleren Ladezeiten führt. Zudem unterstützt React die Einweg Datenbindung, was die Datenflüsse leichter zu handhaben macht.
Wir haben uns dafür entschieden, TypeScript in unserem Projekt zu verwenden. TypeScript fügt JavaScript statische Typisierung hinzu, was die Entwicklung erleichtert und dabei hilft, viele Fehler bereits zur Entwicklungszeit zu erkennen. Dies führt zu einer verbesserten Entwicklererfahrung und macht den Code besser skalierbar und strukturierter.
Tailwind CSS ist ein fortschrittliches CSS-Framework, das auf dem Utility-First-Ansatz basiert und Low-Level-CSS-Klassen in PostCSS bereitstellt. Tailwind wurde für das CSS-Styling verwendet, um das Erstellen separater CSS-Dateien zu vermeiden und stattdessen ausschließlich mit Klassen zu arbeiten.
#### [Shadcn/UI](https://ui.shadcn.com/)
**[Shadcn/UI](https://ui.shadcn.com/)**<br>
Shadcn/UI ist eine Sammlung von UI-Komponenten, die speziell für die Integration mit React-Anwendungen entwickelt wurden. Diese Komponenten sind Barrierefrei implementiert, anpassbar und Open Cource, was uns eine große Flexibilität bietet. Die Bibliothek bietet eine Vielzahl vorgefertigter Komponenten, darunter Dashboards, Karten, Formulare und mehr. Dabei können die Komponenten leicht an spezifische Designanforderungen angepasst werden.
#### [MUI (Material UI)](https://mui.com/)
**[MUI (Material UI)](https://mui.com/)**<br>
MUI ist eine beliebte React-Komponentenbibliothek, die auf Google's Material Design basiert. Sie bietet eine breite Palette an vorgefertigten, stilvollen und anpassbaren UI-Komponenten. Eine Alternative, die wir für die Icons in Betracht gezogen hatten, war das [Set von Lucide](https://lucide.dev/icons/). Jedoch haben wir uns aufgrund der Auswahl an benötigten Icons und der etwas anschaulicheren Darstellung für das Material Icons entschieden.
### Backend
#### [Socket.IO](https://socket.io/)
**[Socket.IO](https://socket.io/)**<br>
Socket.IO ist eine Bibliothek, die eine latenzarme, bidirektionale und ereignisbasierte Kommunikation zwischen Client und Server ermöglicht.
@@ -78,7 +71,7 @@ Die Socket.IO-Codebasis ist in zwei unterschiedliche Ebenen aufgeteilt: die Low-
## Design
In diesem Abschnitt werden die Designprinzipien des Venue-Frontends beschrieben.
### Farbschemata
### Farbschema
Wir haben uns bei Venue für ein ansprechendes Dark Mode Farbschema entschieden, welches ein einheitliches, modernes Erscheinungsbild darstellt.
Unsere Farbpalette umfasst die folgenden Hauptfarben:
...
...
@@ -94,29 +87,7 @@ Unsere Farbpalette umfasst die folgenden Hauptfarben:
Mit diesem Farbschema wird eine benutzerfreundliche und visuell ansprechende Oberfläche geschaffen, die den Nutzern eine angenehme Interaktion ermöglicht.
### UI-Komponenten
Für das Design wurde eine Vielzahl von UI-Komponenten genutzt, um eine ansprechende Benutzeroberfläche zu gewährleisten. Diese Komponenten bieten eine breite Palette an Funktionen und Designs, die zur Optimierung der Benutzererfahrung beitragen. Nachfolgend werden die genutzten UI-Komponenten vorgestellt:
| **Alert** | Alerts werden verwendet, um wichtige Benachrichtigungen oder Hinweise anzuzeigen. |  |
| **Avatar** | Avatare werden genutzt, um Benutzerbilder darzustellen. |  |
| **Button** | Buttons sind ein wesentlicher Bestandteil der Benutzeroberfläche und werden verwendet, um Aktionen auszulösen oder die Navigation zu erleichtern. |  |
| **Card** | Cards werden eingesetzt, um Informationen oder Inhalte in einem übersichtlichen und ansprechenden Format darzustellen. |  |
| **Command** | Command-Komponenten werden genutzt, um interaktive Befehle oder Aktionen zu repräsentieren. |  |
| **Dialog** | Dialogs werden verwendet, um wichtige Informationen oder Interaktionsmöglichkeiten in einem modalen Fenster darzustellen. |  |
| **Input** | Input-Komponenten werden genutzt, um Benutzereingaben entgegenzunehmen. |  |
| **Label** | Labels werden verwendet, um Beschriftungen für andere UI-Elemente bereitzustellen. |  |
| **Menubar** | Menubars werden genutzt, um Navigationsoptionen bereitzustellen. |  |
| **Resizable** | Die Resizable-Komponente ermöglicht es, bestimmte UI-Elemente in der Größe anzupassen, um die Anpassbarkeit zu verbessern. |  |
| **Scroll-Area** | Scroll-Area-Komponenten werden eingesetzt, um Inhalte darzustellen, die größer sind als der verfügbare Anzeigebereich. |  |
| **Select** | Select-Komponenten werden verwendet, um Dropdown-Listen bereitzustellen. |  |
| **Separator** | Separator-Komponenten werden genutzt, um visuelle Trennlinien zwischen verschiedenen Elementen in der Benutzeroberfläche zu erstellen. |  |
| **Tabs** | Tabs werden eingesetzt, um verschiedene Ansichten/Reiter im Meeting Raum zu organisieren. |  |
| **Textarea** | Textarea-Komponenten werden verwendet, um mehrzeilige Texteingaben oder Kommentare entgegenzunehmen. |  |
| **Toggle-Group und Toggle** | Toggle-Group- und Toggle-Komponenten werden genutzt, um Umschaltfunktionen bereitzustellen. |  |
Diese Komponenten wurden mit Blick auf Benutzerfreundlichkeit, Barrierefreiheit und Anpassbarkeit ausgewählt und trugen dazu bei, eine intuitive und effiziente Benutzeroberfläche für Venue zu gestalten.
### Logo
### Icons
Icons spielen eine wichtige Rolle in unserem Design, da sie zur visuellen Darstellung und Benutzerführung beitragen. Wir haben eine Vielzahl von Icons aus der MUI-Icon-Bibliothek verwendet, um verschiedene Funktionen/ Aktionen in Venue zu repräsentieren. Hier ist eine Auflistung der Icons, die wir eingesetzt haben:
...
...
@@ -150,25 +121,86 @@ Icons spielen eine wichtige Rolle in unserem Design, da sie zur visuellen Darste
| **SendIcon** | Symbolisiert den Sendevorgang. |  |
| **SentimentSatisfiedAltIcon** | Symbol für positive Stimmung oder Zufriedenheit.|  |
| **SignLanguageIcon** | Symbole für Klatschen. |  |
| **SpatialAudioIcon** | Symbole für Klatschen. |  |
| **SpatialAudioOffIcon** | Symbole für Klatschen. |  |
| **ThumbDownAltIcon** | Symbol für negative Bewertungen oder nicht Zustimmung. |  |
| **ThumbUpIcon** | Symbol für positive Bewertungen oder Zustimmung. |  |
| **UnfoldMoreIcon** | Symbol für "Mehr anzeigen". |  |
| **ViewInArIcon** | Symbol für 3D Objekte |  |
| **VideoCallIcon** | Symbol für Video an. |  |
| **VideoCamIcon** | Symbol für Video an. |  |
| **VideocamOffIcon** | Symbol für Video aus. |  |
| **VolumeUpIcon** | Symbol für Lautstärke erhöhen. |  |
| **VolumeOffIcon** | Symbol für stummschalten. |  |
"Icon für Test Audio Input, Audio Output und Video sowie Schloss noch hinzufügen"
Mit diesem Styleguide stellen wir sicher, dass das Design von Venue nicht nur ästhetisch ansprechend, sondern auch benutzerfreundlich ist.
Mit diesem Styleguide wird sichergestellt, dass das Design von Venue nicht nur ästhetisch ansprechend, sondern auch benutzerfreundlich ist.
## Aufbau
Venue folgt einer komponentenbasierten Struktur, bei der jede UI-Einheit in isolierte, wiederverwendbare Komponenten aufgeteilt ist. Dies fördert die Wiederverwendbarkeit des Codes und ermöglicht zukünftig eine einfachere Erweiterung. Die Hauptkomponenten umfassen die grundlegenden Strukturen der Anwendung wie das Hauptmenü, die Settings und allgemein die Meetingräume. Die UI-Komponenten beinhalten kleinere, wiederverwendbare Elemente wie Buttons und Eingabefelder.
### Hauptkomponenten
Die Hauptkomponenten von Venue umfassen die wesentlichen Seiten der Anwendung, welche die grundlegenden Funktionen und Strukturen bereitstellen. Im Folgenden werden diese Seiten näher beschrieben.
**Login**<br>
Die Login-Seite ist die erste Seite, die neue Nutzer sehen. Sie ermöglicht die Registrierung neuer Nutzer mit dem Namen.
Das Hauptmenü dient als zentrale Navigationsseite, dass eine Übersicht über die verfügbaren Räume bietet und Nutzern ermöglicht, mit einem Klick dem gewünschten Raum beizutreten.
Die Einstellungen zum Set-Up und das Nutzerprofil können im Hauptmenü über den Button oben Rechts "Settings" erreicht werden. Hier können Nutzer ihren Namen sowie ihr Profilbild jederzeit ändern. Mit den Buttons rechts neben den Set-Up Select-Boxen, können der Audio-Input, Audio-Output sowie der Video-Input geprüft werden.
Für das Design wurde eine Vielzahl von UI-Komponenten genutzt, um eine ansprechende Benutzeroberfläche zu gewährleisten. Diese Komponenten bieten eine breite Palette an Funktionen, die zur Optimierung der Benutzererfahrung beitragen. Nachfolgend werden die genutzten UI-Komponenten vorgestellt:
| **Alert** | Alerts werden verwendet, um wichtige Benachrichtigungen oder Hinweise anzuzeigen. |  |
| **Avatar** | Avatare werden genutzt, um Benutzerbilder darzustellen. |  |
| **Button** | Buttons sind ein wesentlicher Bestandteil der Benutzeroberfläche und werden verwendet, um Aktionen auszulösen oder die Navigation zu erleichtern. |  |
| **Card** | Cards werden eingesetzt, um Informationen oder Inhalte in einem übersichtlichen und ansprechenden Format darzustellen. |  |
| **Command** | Command-Komponenten werden genutzt, um interaktive Befehle oder Aktionen zu repräsentieren. |  |
| **Dialog** | Dialogs werden verwendet, um wichtige Informationen oder Interaktionsmöglichkeiten in einem modalen Fenster darzustellen. |  |
| **Input** | Input-Komponenten werden genutzt, um Benutzereingaben entgegenzunehmen. |  |
| **Label** | Labels werden verwendet, um Beschriftungen für andere UI-Elemente bereitzustellen. |  |
| **Menubar** | Menubars werden genutzt, um Navigationsoptionen bereitzustellen. |  |
| **Resizable** | Die Resizable-Komponente ermöglicht es, bestimmte UI-Elemente in der Größe anzupassen, um die Anpassbarkeit zu verbessern. |  |
| **Scroll-Area** | Scroll-Area-Komponenten werden eingesetzt, um Inhalte darzustellen, die größer sind als der verfügbare Anzeigebereich. |  |
| **Select** | Select-Komponenten werden verwendet, um Dropdown-Listen bereitzustellen. |  |
| **Separator** | Separator-Komponenten werden genutzt, um visuelle Trennlinien zwischen verschiedenen Elementen in der Benutzeroberfläche zu erstellen. |  |
| **Tabs** | Tabs werden eingesetzt, um verschiedene Ansichten/Reiter im Meeting Raum zu organisieren. |  |
| **Textarea** | Textarea-Komponenten werden verwendet, um mehrzeilige Texteingaben oder Kommentare entgegenzunehmen. |  |
| **Toggle-Group und Toggle** | Toggle-Group- und Toggle-Komponenten werden genutzt, um Umschaltfunktionen bereitzustellen. |  |
Diese Komponenten wurden mit Blick auf Benutzerfreundlichkeit, Barrierefreiheit und Anpassbarkeit ausgewählt und tragen dazu bei, eine intuitive und effiziente Benutzeroberfläche für Venue zu gestalten.
## Herausforderungen
## Ausblick und Weiterentwicklung
- Offene Aufgaben
- Verbesserungsvorschläge
Einige der möglichen nächsten Schritte umfassen:
- Option zur Geräuschunterdrückung
- Like-Funktion für Nachrichten
- Ausführlichere Tour und diese zu jeder Zeit anbieten
- Es besteht die Notwendigkeit, sich um die Datenbank zu kümmern und die Datenkonsistenz sicherzustellen, da nicht alle Räume dieselben Attribute besitzen (eine Überprüfung und Angleichung der Datenstruktur ist erforderlich).
- Eine Migration von Socket.IO auf Version 4 sollte in Betracht gezogen werden.
- Eine Funktion zur Geräuschunterdrückung für eine verbesserte Audioqualität während der Meetings.
- Die Möglichkeit für Benutzer, Nachrichten zu liken, um Zustimmung oder Interesse auszudrücken.
- Eine ausführlichere Tour durch Venue, die neuen Nutzern hilft, sich besser zurechtzufinden, sowie die Möglichkeit, die Tour zu jeder Zeit erneut durchzuführen.
