Changes

Page history
Update Venue-Doc authored by Okan Kaya's avatar Okan Kaya
Show whitespace changes
Inline Side-by-side
Venue.md
View page @ e3d3aaab
[[_TOC_]] [[_TOC_]]
## Einführung ## Einführung
![KS_-_Abschlusspräsentation](uploads/6ac0f35ba524e2e8011be207f8c2a86c/KS_-_Abschlusspräsentation.png)
Im Rahmen des Projekts Venue (ehemals "Accelerator") wurde das Ziel verfolgt, das Frontend einem umfassenden Redesign zu unterziehen. Hierfür wurde eine moderne UI mit einem neuen Logo gestaltet, um die Benutzerfreundlichkeit zu steigern. Zur Erreichung der Ziele in diesem Semester wurden diese wie folgt priorisiert: ![KS\_-\_Abschlusspräsentation](uploads/6ac0f35ba524e2e8011be207f8c2a86c/KS_-_Abschlusspr%C3%A4sentation.png) Im Rahmen des Projekts Venue (ehemals "Accelerator") wurde das Ziel verfolgt, das Frontend einem umfassenden Redesign zu unterziehen. Hierfür wurde eine moderne UI mit einem neuen Logo gestaltet, um die Benutzerfreundlichkeit zu steigern. Zur Erreichung der Ziele in diesem Semester wurden diese wie folgt priorisiert:
| Hauptziele | Nice-to-haves | | Hauptziele | Nice-to-haves |
| ------ | ------ | |------------|---------------|
| Grundfunktionalitäten | Benachrichtigung, bei neuer Nachricht im Chat | | Grundfunktionalitäten | Benachrichtigung, bei neuer Nachricht im Chat |
| Barrierefreiheit (Grundsteine) | Tooltips über alle UI-Elemente | | Barrierefreiheit (Grundsteine) | Tooltips über alle UI-Elemente |
| Dokumentation | Testabdeckung | | Dokumentation | Testabdeckung |
...@@ -24,11 +24,13 @@ Während dieses Semesters wurde der Fokus auf die Hauptziele gelegt, da sie esse ...@@ -24,11 +24,13 @@ Während dieses Semesters wurde der Fokus auf die Hauptziele gelegt, da sie esse
In dieser Dokumentation wird eine Übersicht über das Vorgehen, den Aufbau und das Design von Venue sowie ein Ausblick für die zukünftige Weiterentwicklung gegeben. In dieser Dokumentation wird eine Übersicht über das Vorgehen, den Aufbau und das Design von Venue sowie ein Ausblick für die zukünftige Weiterentwicklung gegeben.
## Vorgehen ## Vorgehen
### Gruppeneinteilung ### Gruppeneinteilung
Die Gruppe besteht aus sechs Studierenden des Masterstudiengangs Human-Centered Computing.
![TEAM-Folie](uploads/e919aa3347234efa5d546273f420ce46/TEAM-Folie.png) Die Gruppe besteht aus sechs Studierenden des Masterstudiengangs Human-Centered Computing. ![TEAM-Folie](uploads/e919aa3347234efa5d546273f420ce46/TEAM-Folie.png)
Die Hauptverantwortlichkeiten innerhalb der Gruppe sind wie folgt aufgeteilt: Die Hauptverantwortlichkeiten innerhalb der Gruppe sind wie folgt aufgeteilt:
- **Entwicklung:** Cara Wendt, Okan Kaya und Anette Adam. - **Entwicklung:** Cara Wendt, Okan Kaya und Anette Adam.
- **Styling:** Irem Belik und Sherna Barwig. - **Styling:** Irem Belik und Sherna Barwig.
- **Dokumentation:** Banu Sarikaya. - **Dokumentation:** Banu Sarikaya.
...@@ -36,10 +38,11 @@ Die Hauptverantwortlichkeiten innerhalb der Gruppe sind wie folgt aufgeteilt: ...@@ -36,10 +38,11 @@ Die Hauptverantwortlichkeiten innerhalb der Gruppe sind wie folgt aufgeteilt:
Trotz festgelegter Hauptverantwortlichkeiten hat jeder im Team an verschiedenen Aspekten des Projekts mitgearbeitet. Trotz festgelegter Hauptverantwortlichkeiten hat jeder im Team an verschiedenen Aspekten des Projekts mitgearbeitet.
### Projektplanung ### Projektplanung
Die gesamte Projektplanung erfolgte über ein [Figma Board](https://www.figma.com/board/MMLvpgeg5J0V5CxYRNMTEh/Organisation?node-id=0-1&t=KTT33TStL559ytqF-0
). Über ein Kanban-Board wurden hier die Aufgaben verteilt, Zwischenstände dokumentiert, Termine geplant und viele weitere organisatorische Aufgaben erledigt. Die gesamte Projektplanung erfolgte über ein [Figma Board](https://www.figma.com/board/MMLvpgeg5J0V5CxYRNMTEh/Organisation?node-id=0-1&t=KTT33TStL559ytqF-0). Über ein Kanban-Board wurden hier die Aufgaben verteilt, Zwischenstände dokumentiert, Termine geplant und viele weitere organisatorische Aufgaben erledigt.
### Branching-Strategie ### Branching-Strategie
Um eine strukturierte Entwicklung zu gewährleisten, wird im Projekt der Feature-Branch-Strategie gefolgt. Die gesamte Feature-Entwicklung erfolgt somit in separaten Branches und nicht im Master-Branch. Diese Vorgehensweise ermöglicht es, an einem bestimmten Feature zu arbeiten, ohne die Haupt-Codebasis zu beeinträchtigen. Im Master-Branch Venue befindet sich die Hauptversion. Für die Entwicklung neuer Funktionen werden Feature-Branches verwendet, die mit "venue-" beginnen, gefolgt von einer kurzen Beschreibung des Features, z. B. "venue-featurebeschreibung". Feature-Branches, die während der Entwicklung erstellt wurden: Um eine strukturierte Entwicklung zu gewährleisten, wird im Projekt der Feature-Branch-Strategie gefolgt. Die gesamte Feature-Entwicklung erfolgt somit in separaten Branches und nicht im Master-Branch. Diese Vorgehensweise ermöglicht es, an einem bestimmten Feature zu arbeiten, ohne die Haupt-Codebasis zu beeinträchtigen. Im Master-Branch Venue befindet sich die Hauptversion. Für die Entwicklung neuer Funktionen werden Feature-Branches verwendet, die mit "venue-" beginnen, gefolgt von einer kurzen Beschreibung des Features, z. B. "venue-featurebeschreibung". Feature-Branches, die während der Entwicklung erstellt wurden:
- **venue-meeting-room:** Hier wurden die grundlegenden Funktionen für die Meetingräume entwickelt. - **venue-meeting-room:** Hier wurden die grundlegenden Funktionen für die Meetingräume entwickelt.
...@@ -55,227 +58,232 @@ Um eine strukturierte Entwicklung zu gewährleisten, wird im Projekt der Feature ...@@ -55,227 +58,232 @@ Um eine strukturierte Entwicklung zu gewährleisten, wird im Projekt der Feature
Durch diese Struktur können neue Funktionen isoliert entwickelt und gleichzeitig die Stabilität des Master-Branches aufrechterhalten werden. Durch diese Struktur können neue Funktionen isoliert entwickelt und gleichzeitig die Stabilität des Master-Branches aufrechterhalten werden.
## Verwendete Technologien ## Verwendete Technologien
### Frontend ### Frontend
**[React](https://react.dev/)** <br>
Nach sorgfältiger Abwägung der verfügbaren Optionen stand die Entscheidung zwischen zwei Frameworks an: 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 die Wahl auf React.
React bietet eine große und aktive Community sowie eine breite Palette an Ressourcen und Modulen und ermöglicht die Erstellung wieder verwendbarer, 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.
**[TypeScript](https://www.typescriptlang.org/)** <br> [**React**](https://react.dev/) \
Nach sorgfältiger Abwägung der verfügbaren Optionen stand die Entscheidung zwischen zwei Frameworks an: 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 die Wahl auf React. React bietet eine große und aktive Community sowie eine breite Palette an Ressourcen und Modulen und ermöglicht die Erstellung wieder verwendbarer, 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.
[**TypeScript**](https://www.typescriptlang.org/) \
Es wurde entschieden, TypeScript in diesem 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. Es wurde entschieden, TypeScript in diesem 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.
**[Vite.js](https://vitejs.dev/)** <br> [**Vite.js**](https://vitejs.dev/) \
Vite ist ein lokaler Entwicklungsserver, das speziell für die Anforderungen moderner Webentwicklung entwickelt wurde. Vite zeichnet sich durch Geschwindigkeit und Flexibilität aus. Wurde verwendet, um eine Entwicklungsumgebung für React einzurichten. Vite ist ein lokaler Entwicklungsserver, das speziell für die Anforderungen moderner Webentwicklung entwickelt wurde. Vite zeichnet sich durch Geschwindigkeit und Flexibilität aus. Wurde verwendet, um eine Entwicklungsumgebung für React einzurichten.
**[Tailwind CSS](https://www.ionos.de/digitalguide/websites/web-entwicklung/tailwind-css-im-ueberblick/)** <br> [**Tailwind CSS**](https://www.ionos.de/digitalguide/websites/web-entwicklung/tailwind-css-im-ueberblick/) \
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. 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/)** <br> [**Shadcn/UI**](https://ui.shadcn.com/) \
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. 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/)** <br> [**MUI (Material UI)**](https://mui.com/) \
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 für Venue in Betracht gezogen wurde, war das [Set von Lucide](https://lucide.dev/icons/). Jedoch wurde aufgrund der Auswahl an benötigten Icons und der etwas anschaulicheren Darstellung für die Icons von MUI entschieden. 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 für Venue in Betracht gezogen wurde, war das [Set von Lucide](https://lucide.dev/icons/). Jedoch wurde aufgrund der Auswahl an benötigten Icons und der etwas anschaulicheren Darstellung für die Icons von MUI entschieden.
### Backend ### Backend
**[Socket.IO](https://socket.io/)** <br>
Socket.IO ist eine Bibliothek, die eine latenzarme, bidirektionale und ereignisbasierte Kommunikation zwischen Client und Server ermöglicht.
[![image](uploads/59a0032ff374f25f9c00b1ecd19869c0/image.png)](https://socket.io/docs/v4/) [**Socket.IO**](https://socket.io/) \
Socket.IO ist eine Bibliothek, die eine latenzarme, bidirektionale und ereignisbasierte Kommunikation zwischen Client und Server ermöglicht.
Der bidirektionale Kanal zwischen dem Socket.IO-Server (Node.js) und dem Socket.IO-Client (Browser, Node.js etc.) wird, wenn möglich, mit einer WebSocket-Verbindung hergestellt und verwendet als Fallback HTTP Long-Polling. Der bidirektionale Kanal zwischen dem Socket.IO-Server (Node.js) und dem Socket.IO-Client (Browser, Node.js etc.) wird, wenn möglich, mit einer WebSocket-Verbindung hergestellt und verwendet als Fallback HTTP Long-Polling. Die Socket.IO-Codebasis ist in zwei unterschiedliche Ebenen aufgeteilt: die Low-Level-Infrastruktur, die als Engine.IO bezeichnet wird, und die High-Level-API, die Socket.IO selbst darstellt. Engine.IO ist für die Herstellung der Low-Level-Verbindung zwischen Server und Client verantwortlich.
Die Socket.IO-Codebasis ist in zwei unterschiedliche Ebenen aufgeteilt: die Low-Level-Infrastruktur, die als Engine.IO bezeichnet wird, und die High-Level-API, die Socket.IO selbst darstellt. Engine.IO ist für die Herstellung der Low-Level-Verbindung zwischen Server und Client verantwortlich.
## Design ## Design
In diesem Abschnitt werden die Designprinzipien des Venue-Frontends beschrieben. <br>
![image](uploads/d566b2bcb7ab74386ac2d142a6d81748/image.png){width=229 height=223} In diesem Abschnitt werden die Designprinzipien des Venue-Frontends beschrieben. \
![image](uploads/d566b2bcb7ab74386ac2d142a6d81748/image.png){width="229" height="223"}
### Farbschema ### Farbschema
Für Venue wurde ein ansprechendes Dark-Mode Farbschema gewählt, das ein modernes Erscheinungsbild bietet. Die Farbpalette umfasst die folgenden Hauptfarben: Für Venue wurde ein ansprechendes Dark-Mode Farbschema gewählt, das ein modernes Erscheinungsbild bietet. Die Farbpalette umfasst die folgenden Hauptfarben:
| Element | [Farbcode](https://encycolorpedia.com/) | Beschreibung | | Element | [Farbcode](https://encycolorpedia.com/) | Beschreibung |
|-------------------------|------------|--------------------------------------------------------------------------------------------------| |---------|-----------------------------------------|--------------|
| **Hintergrund** | <img src="uploads/78e658a6c3bffa98944f71b030df6339/image.png" width="90" /> | Diese Farbe basiert auf der Farbe des Masterstudiengangs Human-centered Computing. Der dunkle Hintergrund bietet einen hohen Kontrast zu anderen UI-Elementen und verbessert dadurch die Lesbarkeit. | | **Hintergrund** | ![](uploads/78e658a6c3bffa98944f71b030df6339/image.png){width="90"} | Diese Farbe basiert auf der Farbe des Masterstudiengangs Human-centered Computing. Der dunkle Hintergrund bietet einen hohen Kontrast zu anderen UI-Elementen und verbessert dadurch die Lesbarkeit. |
| **Boxen** | <img src="uploads/d7ffe123facd4f801a83b9937c05deea/image.png" width="90" /> | Die etwas hellere Farbe für Boxen und Container sorgt für eine klare Abgrenzung der verschiedenen Bereiche innerhalb der Benutzeroberfläche. | | **Boxen** | ![](uploads/d7ffe123facd4f801a83b9937c05deea/image.png){width="90"} | Die etwas hellere Farbe für Boxen und Container sorgt für eine klare Abgrenzung der verschiedenen Bereiche innerhalb der Benutzeroberfläche. |
| **Buttons** | <img src="uploads/68e512fbb615053aa936d51fc883d666/image.png" width="90" /> | Dieses Gelb symbolisiert die Fakultät Informatik, weshalb für die Buttons diese Farbe genutzt wurde. Diese sind so gestaltet, dass sie interaktive Elemente hervorheben und die Navigation für die Benutzer erleichtern. | | **Buttons** | ![](uploads/68e512fbb615053aa936d51fc883d666/image.png){width="90"} | Dieses Gelb symbolisiert die Fakultät Informatik, weshalb für die Buttons diese Farbe genutzt wurde. Diese sind so gestaltet, dass sie interaktive Elemente hervorheben und die Navigation für die Benutzer erleichtern. |
| **Button Hover** | <img src="uploads/88cd111ace2d7484f5bf04b86bea0dea/image.png" width="90" /> | Bei Maus-Hover über Buttons wird eine hellere Gelbfarbe angezeigt, die den interaktiven Zustand visuell hervorhebt und dem Benutzer Rückmeldung gibt. | | **Button Hover** | ![](uploads/88cd111ace2d7484f5bf04b86bea0dea/image.png){width="90"} | Bei Maus-Hover über Buttons wird eine hellere Gelbfarbe angezeigt, die den interaktiven Zustand visuell hervorhebt und dem Benutzer Rückmeldung gibt. |
| **Chat** | <img src="uploads/e82b3a953a9eaa9d48a64af935bf5f0e/image.png" width="90" /> | Die im Vergleich zum Hintergrund hellere Farbe für den Chat-Bereich verbessert die Lesbarkeit von Nachrichten und sorgt für eine klare Trennung von anderen Inhalten. | | **Chat** | ![](uploads/e82b3a953a9eaa9d48a64af935bf5f0e/image.png){width="90"} | Die im Vergleich zum Hintergrund hellere Farbe für den Chat-Bereich verbessert die Lesbarkeit von Nachrichten und sorgt für eine klare Trennung von anderen Inhalten. |
Mit diesem Farbschema wird eine visuell ansprechende Oberfläche geschaffen, die den Nutzern eine angenehme Interaktion ermöglicht. Mit diesem Farbschema wird eine visuell ansprechende Oberfläche geschaffen, die den Nutzern eine angenehme Interaktion ermöglicht.
### Light-Modus ### Light-Modus
Die Möglichkeit in den Light-Modus zu wechseln besteht ebenfalls. Die _theme-provider.tsx_ Datei von shadcn verbindet die CSS Variablen entsprechend und sorgt dafür, dass sie in der gesamten Anwendung einheitlich angewendet werden. Die _mode-toggle.tsx_ Komponente bietet eine einfache Möglichkeit, zwischen verschiedenen Anzeigemodi umzuschalten, indem sie als _<ModeToggle>_ Komponente auf Seiten integriert wird.
Die Farben werden in der index.css Datei festgelegt und können bei Bedarf angepasst werden. Die _background_ Variable steuert die Hintergrundfarben von Komponenten, während _foreground_ für Texte und Icons verwendet wird. Diese CSS-Variablen können in der _tailwind.config.js_ Datei konfiguriert werden und als Klassen über _className=""_ genutzt werden. Die Möglichkeit in den Light-Modus zu wechseln besteht ebenfalls. Die _theme-provider.tsx_ Datei von shadcn verbindet die CSS Variablen entsprechend und sorgt dafür, dass sie in der gesamten Anwendung einheitlich angewendet werden. Die _mode-toggle.tsx_ Komponente bietet eine einfache Möglichkeit, zwischen verschiedenen Anzeigemodi umzuschalten, indem sie als Komponente auf Seiten integriert wird. Die Farben werden in der index.css Datei festgelegt und können bei Bedarf angepasst werden. Die _background_ Variable steuert die Hintergrundfarben von Komponenten, während _foreground_ für Texte und Icons verwendet wird. Diese CSS-Variablen können in der _tailwind.config.js_ Datei konfiguriert werden und als Klassen über _className=""_ genutzt werden.
### Logo ### Logo
Das neue Logo von Venue ist eine stilisierte Audiowelle, die mit einem Farbverlauf der Hauptfarben aus dem Farbschema gestaltet ist. Der Farbverlauf beginnt auf der linken Seite mit der Farbe der Informatik (#FFCC00), geht in der Mitte in ein Grün über, dass die Hochschule Reutlingen symbolisieren soll und endet auf der rechten Seite mit der Farbe des Studiengangs Human-centered Computing (#13678A). Mit diesem neuen Logo soll die Identität von Venue gestärkt werden. Das neue Logo von Venue ist eine stilisierte Audiowelle, die mit einem Farbverlauf der Hauptfarben aus dem Farbschema gestaltet ist. Der Farbverlauf beginnt auf der linken Seite mit der Farbe der Informatik (#FFCC00), geht in der Mitte in ein Grün über, dass die Hochschule Reutlingen symbolisieren soll und endet auf der rechten Seite mit der Farbe des Studiengangs Human-centered Computing (#13678A). Mit diesem neuen Logo soll die Identität von Venue gestärkt werden.
<img src="uploads/8a1108862bf8de1927e03505bbb0595b/Logo_Venue.svg" width="200" /> ![](uploads/8a1108862bf8de1927e03505bbb0595b/Logo_Venue.svg){width="200"}
### Icons ### Icons
Icons spielen eine wichtige Rolle im Design, da sie zur visuellen Darstellung und Benutzerführung beitragen. Für das Design von Venue wurde eine Vielzahl von Icons aus der MUI-Icon-Bibliothek verwendet, um verschiedene Funktionen/Aktionen zu repräsentieren. Hier ist eine Auflistung der Icons, die eingesetzt wurden: Icons spielen eine wichtige Rolle im Design, da sie zur visuellen Darstellung und Benutzerführung beitragen. Für das Design von Venue wurde eine Vielzahl von Icons aus der MUI-Icon-Bibliothek verwendet, um verschiedene Funktionen/Aktionen zu repräsentieren. Hier ist eine Auflistung der Icons, die eingesetzt wurden:
| Import | Beschreibung | [Icon](https://mui.com/material-ui/icons/) | | Import | Beschreibung | [Icon](https://mui.com/material-ui/icons/) |
|-----------------------------|----------------------------------------------------------|-----------------------------------------------------------| |--------|--------------|--------------------------------------------|
| **AddAPhotoIcon** | Dieses Icon symbolisiert das Hinzufügen von Fotos oder Bildern. | <img src="uploads/ef4feb60f538781f8be1a4051748bf49/image.png" width="40" /> | | **AddAPhotoIcon** | Dieses Icon symbolisiert das Hinzufügen von Fotos oder Bildern. | ![](uploads/ef4feb60f538781f8be1a4051748bf49/image.png){width="40"} |
| **AddCircleIcon** | Dieses Icon symbolisiert das Hinzufügen von Inhalten. | <img src="uploads/64f0b9b30cb7b02a2793c5695cca60ca/image.png" width="40" /> | | **AddCircleIcon** | Dieses Icon symbolisiert das Hinzufügen von Inhalten. | ![](uploads/64f0b9b30cb7b02a2793c5695cca60ca/image.png){width="40"} |
| **BackHandIcon** | Dieses Icon symbolisiert eine Meldung. | <img src="uploads/ef38e649c843c95f7e85f155e79b63d3/image.png" width="40" /> | | **BackHandIcon** | Dieses Icon symbolisiert eine Meldung. | ![](uploads/ef38e649c843c95f7e85f155e79b63d3/image.png){width="40"} |
| **CheckCircleIcon** | Dieses Icon symbolisiert eine Bestätigung oder das Speichern von Einstellungen. | <img src="uploads/6635bce651fd95ea34b5d6d5a461a51d/image.png" width="40" /> | | **CheckCircleIcon** | Dieses Icon symbolisiert eine Bestätigung oder das Speichern von Einstellungen. | ![](uploads/6635bce651fd95ea34b5d6d5a461a51d/image.png){width="40"} |
| **ChevronLeftIcon** | Dieses Icon symbolisiert die Navigation nach links. | <img src="uploads/7b4777c8d732c78742ce236ca16d8fc5/image.png" width="40" /> | | **ChevronLeftIcon** | Dieses Icon symbolisiert die Navigation nach links. | ![](uploads/7b4777c8d732c78742ce236ca16d8fc5/image.png){width="40"} |
| **ChevronRightIcon** | Dieses Icon symbolisiert die Navigation nach rechts. | <img src="uploads/b351c1d8f62cc7adec1137b0fc2addca/image.png" width="40" /> | | **ChevronRightIcon** | Dieses Icon symbolisiert die Navigation nach rechts. | ![](uploads/b351c1d8f62cc7adec1137b0fc2addca/image.png){width="40"} |
| **DeleteIcon** | Dieses Icon symbolisiert die Löschfunktion. | <img src="uploads/4360acbdd3fd9f782022f48f07412f07/image.png" width="40" /> | | **DeleteIcon** | Dieses Icon symbolisiert die Löschfunktion. | ![](uploads/4360acbdd3fd9f782022f48f07412f07/image.png){width="40"} |
| **DescriptionIcon** | Dieses Icon symbolisiert ein Dokument/ den Bereich, wo die Dokumente sind. | <img src="uploads/3f6c7a1e3c50b1ca71119efa7947550d/image.png" width="40" /> | | **DescriptionIcon** | Dieses Icon symbolisiert ein Dokument/ den Bereich, wo die Dokumente sind. | ![](uploads/3f6c7a1e3c50b1ca71119efa7947550d/image.png){width="40"} |
| **ErrorOutlineIcon** | Dieses Icon symbolisiert einen Hinweis oder ein Problem. | <img src="uploads/8fdd5fe3d5c972668504ad7204df86aa/image.png" width="40" /> | | **ErrorOutlineIcon** | Dieses Icon symbolisiert einen Hinweis oder ein Problem. | ![](uploads/8fdd5fe3d5c972668504ad7204df86aa/image.png){width="40"} |
| **FirstPageIcon** | Dieses Icon symbolisiert die Navigation zur ersten Seite. | <img src="uploads/b9c45d321ebc29f17fe4f3ab666905b5/image.png" width="40" /> | | **FirstPageIcon** | Dieses Icon symbolisiert die Navigation zur ersten Seite. | ![](uploads/b9c45d321ebc29f17fe4f3ab666905b5/image.png){width="40"} |
| **GroupsIcon** | Dieses Icon symbolisiert den Meetingraum. | <img src="uploads/39b41e92eb5fd008c8c7eb8db8d5e4ea/image.png" width="40" /> | | **GroupsIcon** | Dieses Icon symbolisiert den Meetingraum. | ![](uploads/39b41e92eb5fd008c8c7eb8db8d5e4ea/image.png){width="40"} |
| **HomeIcon** | Dieses Icon symbolisiert den Home-Bereich. | <img src="uploads/0fb37b258c5a4777184736a0860ff8f5/image.png" width="40" /> | | **HomeIcon** | Dieses Icon symbolisiert den Home-Bereich. | ![](uploads/0fb37b258c5a4777184736a0860ff8f5/image.png){width="40"} |
| **LoginIcon** | Dieses Icon symbolisiert den Anmeldevorgang. | <img src="uploads/df231c5c6b209a11d09ef3050d15d645/image.png" width="40" /> | | **LoginIcon** | Dieses Icon symbolisiert den Anmeldevorgang. | ![](uploads/df231c5c6b209a11d09ef3050d15d645/image.png){width="40"} |
| **LocalCafeIcon** | Dieses Icon symbolisiert, dass sich jemand in der Pause befindet. | <img src="uploads/42dad6da2bacf0c238c177627c986290/image.png" width="40" /> | | **LocalCafeIcon** | Dieses Icon symbolisiert, dass sich jemand in der Pause befindet. | ![](uploads/42dad6da2bacf0c238c177627c986290/image.png){width="40"} |
| **ManageAccountsIcon** | Dieses Icon symbolisiert die Settings. Sproch die Einstellungen für das Benutzerkonto sowie dem Set-Up. | <img src="uploads/0bec92489f8ad735c294c14deba7fba3/image.png" width="40" /> | | **ManageAccountsIcon** | Dieses Icon symbolisiert die Settings. Sproch die Einstellungen für das Benutzerkonto sowie dem Set-Up. | ![](uploads/0bec92489f8ad735c294c14deba7fba3/image.png){width="40"} |
| **MicNoneIcon** | Dieses Icon symbolisiert, dass das Mikrofon aktiviert ist. | <img src="uploads/4677428ef335e41792b0e2abe8330c68/image.png" width="40" /> | | **MicNoneIcon** | Dieses Icon symbolisiert, dass das Mikrofon aktiviert ist. | ![](uploads/4677428ef335e41792b0e2abe8330c68/image.png){width="40"} |
| **MicOffIcon** | Dieses Icon symbolisiert, dass das Mikrofon deaktiviert ist. | <img src="uploads/fb12ce50cf52f26bc0a4771ea43ffc6c/image.png" width="40" /> | | **MicOffIcon** | Dieses Icon symbolisiert, dass das Mikrofon deaktiviert ist. | ![](uploads/fb12ce50cf52f26bc0a4771ea43ffc6c/image.png){width="40"} |
| **NearMeIcon** | Dieses Icon symbolisiert die Navigation. | <img src="uploads/de4de1ec1712589b2368b5e2e2bf08aa/image.png" width="40" /> | | **NearMeIcon** | Dieses Icon symbolisiert die Navigation. | ![](uploads/de4de1ec1712589b2368b5e2e2bf08aa/image.png){width="40"} |
| **NoteAltIcon** | Dieses Icon symbolisiert ein Textfeld. | <img src="uploads/c1306810419a642741b55d5ff7bcc13c/image.png" width="40" /> | | **NoteAltIcon** | Dieses Icon symbolisiert ein Textfeld. | ![](uploads/c1306810419a642741b55d5ff7bcc13c/image.png){width="40"} |
| **NotificationsActiveIcon** | Dieses Icon symbolisiert aktive Benachrichtigungen. | <img src="uploads/614e2d2d31da4ac1724635a145239bc7/image.png" width="40" /> | | **NotificationsActiveIcon** | Dieses Icon symbolisiert aktive Benachrichtigungen. | ![](uploads/614e2d2d31da4ac1724635a145239bc7/image.png){width="40"} |
| **PersonIcon** | Dieses Icon symbolisiert einen Benutzer oder ein Benutzerkonto. | <img src="uploads/f02f3c36e0e55be5055924e3e8735261/image.png" width="40" /> | | **PersonIcon** | Dieses Icon symbolisiert einen Benutzer oder ein Benutzerkonto. | ![](uploads/f02f3c36e0e55be5055924e3e8735261/image.png){width="40"} |
| **PresentToAllIcon** | Dieses Icon symbolisiert die Funktion für die Bildschirmpräsentation. | <img src="uploads/ef75951e3a47ab102d2e18852e784356/image.png" width="40" /> | | **PresentToAllIcon** | Dieses Icon symbolisiert die Funktion für die Bildschirmpräsentation. | ![](uploads/ef75951e3a47ab102d2e18852e784356/image.png){width="40"} |
| **SaveIcon** | Dieses Icon symbolisiert die Speicherfunktion. | <img src="uploads/bfeb0f16d2e6f0aad1eb2393f71ed4ac/image.png" width="40" /> | | **SaveIcon** | Dieses Icon symbolisiert die Speicherfunktion. | ![](uploads/bfeb0f16d2e6f0aad1eb2393f71ed4ac/image.png){width="40"} |
| **ScreenshotMonitorIcon** | Dieses Icon symbolisiert die Funktion für das Teilen vom Bildschirm. | <img src="uploads/5795611c13ce99ae60b94b6f5835595a/image.png" width="40" /> | | **ScreenshotMonitorIcon** | Dieses Icon symbolisiert die Funktion für das Teilen vom Bildschirm. | ![](uploads/5795611c13ce99ae60b94b6f5835595a/image.png){width="40"} |
| **SendIcon** | Dieses Icon symbolisiert den Sendevorgang im Chat. | <img src="uploads/84e381fac7372480fd3c6110bc30cb51/image.png" width="40" /> | | **SendIcon** | Dieses Icon symbolisiert den Sendevorgang im Chat. | ![](uploads/84e381fac7372480fd3c6110bc30cb51/image.png){width="40"} |
| **SentimentSatisfiedAltIcon** | Dieses Icon symbolisiert das Emoji Set für den Chat. | <img src="uploads/b050549336cbaf9bb75db83671a0d897/image.png" width="40" /> | | Icon | Beschreibung | [Darstellung](https://mui.com/material-ui/icons/) | **SentimentSatisfiedAltIcon** | Dieses Icon symbolisiert das Emoji Set für den Chat. | ![](uploads/b050549336cbaf9bb75db83671a0d897/image.png){width="40"} |
| **SignLanguageIcon** | Dieses Icon symbolisiert das Klatschen. | <img src="uploads/ad2fceda787a50d30f268a6ae255ab03/image.png" width="40" /> | | **SignLanguageIcon** | Dieses Icon symbolisiert das Klatschen. | ![](uploads/ad2fceda787a50d30f268a6ae255ab03/image.png){width="40"} |
| **SpatialAudioIcon** | Dieses Icon symbolisiert die Testfunktion für den Audio-Input. | <img src="uploads/385cd3e85f1569e36efb5eef2ff35497/image.png" width="40" /> | | **SpatialAudioIcon** | Dieses Icon symbolisiert die Testfunktion für den Audio-Input. | ![](uploads/385cd3e85f1569e36efb5eef2ff35497/image.png){width="40"} |
| **SpatialAudioOffIcon** | Dieses Icon symbolisiert die Testfunktion für den Audio-Output. | <img src="uploads/ee1bebe320cad7053fae25449e21fb61/image.png" width="40" /> | | **SpatialAudioOffIcon** | Dieses Icon symbolisiert die Testfunktion für den Audio-Output. | ![](uploads/ee1bebe320cad7053fae25449e21fb61/image.png){width="40"} |
| **ThumbDownAltIcon** | Dieses Icon symbolisiert eine negative Bewertungen oder nicht Zustimmung. | <img src="uploads/6e30fdbe5a17b7c8f59ba49de532fd8d/image.png" width="40" /> | | **ThumbDownAltIcon** | Dieses Icon symbolisiert eine negative Bewertungen oder nicht Zustimmung. | ![](uploads/6e30fdbe5a17b7c8f59ba49de532fd8d/image.png){width="40"} |
| **ThumbUpIcon** | Dieses Icon symbolisiert eine positive Bewertungen oder Zustimmung. | <img src="uploads/6ba2c8a1348cdde172a82a66b2734b3f/image.png" width="40" /> | | **ThumbUpIcon** | Dieses Icon symbolisiert eine positive Bewertungen oder Zustimmung. | ![](uploads/6ba2c8a1348cdde172a82a66b2734b3f/image.png){width="40"} |
| **UnfoldMoreIcon** | Dieses Icon symbolisiert die Funktion mehr anzeigen zu können. | <img src="uploads/d75471f4f22e81c5e566fa9b01bad814/image.png" width="40" /> | | **UnfoldMoreIcon** | Dieses Icon symbolisiert die Funktion mehr anzeigen zu können. | ![](uploads/d75471f4f22e81c5e566fa9b01bad814/image.png){width="40"} |
| **ViewInArIcon** | Dieses Icon symbolisiert die Funktion zum Hinzufügen von 3D-Modellen. | <img src="uploads/460d361e463ac8cf9a203af6f147e1c8/image.png" width="40" /> | | **ViewInArIcon** | Dieses Icon symbolisiert die Funktion zum Hinzufügen von 3D-Modellen. | ![](uploads/460d361e463ac8cf9a203af6f147e1c8/image.png){width="40"} |
| **VideoCallIcon** | Dieses Icon symbolisiert das Hinzufügen einer Kamera. | <img src="uploads/b98cbda74f48bf8640345f3f14b9f99a/image.png" width="40" /> | | **VideoCallIcon** | Dieses Icon symbolisiert das Hinzufügen einer Kamera. | ![](uploads/b98cbda74f48bf8640345f3f14b9f99a/image.png){width="40"} |
| **VideoCamIcon** | Dieses Icon symbolisiert die Aktivierung der Kamera. | <img src="uploads/2748dd26b839d6764630dbdd59e74598/image.png" width="40" /> | | **VideoCamIcon** | Dieses Icon symbolisiert die Aktivierung der Kamera. | ![](uploads/2748dd26b839d6764630dbdd59e74598/image.png){width="40"} |
| **VideocamOffIcon** | Dieses Icon symbolisiert die Deaktivierung der Kamera. | <img src="uploads/5976a9468b5eadb28bb9c5629cb53705/image.png" width="40" /> | | **VideocamOffIcon** | Dieses Icon symbolisiert die Deaktivierung der Kamera. | ![](uploads/5976a9468b5eadb28bb9c5629cb53705/image.png){width="40"} |
| **VolumeUpIcon** | Dieses Icon symbolisiert das Einschalten von Ton. | <img src="uploads/ec0f1249f31bcce9257d2eda393ffb1e/image.png" width="40" /> | | **VolumeUpIcon** | Dieses Icon symbolisiert das Einschalten von Ton. | ![](uploads/ec0f1249f31bcce9257d2eda393ffb1e/image.png){width="40"} |
| **VolumeOffIcon** | Dieses Icon symbolisiert das Abschalten von Ton. | <img src="uploads/3ef22f89d390b3100f52c4f737d95303/image.png" width="40" /> | | **VolumeOffIcon** | Dieses Icon symbolisiert das Abschalten von Ton. | ![](uploads/3ef22f89d390b3100f52c4f737d95303/image.png){width="40"} |
Mit diesem Styleguide wird sichergestellt, 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 ## 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. 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 ### 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. 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> **Login** \
Die Login-Seite ist die erste Seite, die neue Nutzer sehen. Sie ermöglicht die Registrierung neuer Nutzer mit dem Namen. Die Login-Seite ist die erste Seite, die neue Nutzer sehen. Sie ermöglicht die Registrierung neuer Nutzer mit dem Namen. ![image](uploads/a3cdd9ebbd884b82510165543ce614cd/image.png)
![image](uploads/a3cdd9ebbd884b82510165543ce614cd/image.png)
Über den dafür vorgesehenen Button oben links kann bei Wunsch in den Light-Modus gewechselt werden. Über den dafür vorgesehenen Button oben links kann bei Wunsch in den Light-Modus gewechselt werden. ![image](uploads/07686f8c178ea2cdb6290fe1d9f8a955/image.png) ![image](uploads/e9b7f3e2a3f2f597a042d985074cb9dc/image.png)
![image](uploads/07686f8c178ea2cdb6290fe1d9f8a955/image.png)
![image](uploads/e9b7f3e2a3f2f597a042d985074cb9dc/image.png)
**Hauptmenü** <br> **Hauptmenü** \
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. 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. ![image](uploads/22535e465a527df8bfcb1895a561199c/image.png)
![image](uploads/22535e465a527df8bfcb1895a561199c/image.png)
Zusätzlich können Nutzer mit dem Button oben Rechts "Add new room" neue Räume erstellen. Diese können bei Bedarf mit einem Passwort geschützt werden. <br> Zusätzlich können Nutzer mit dem Button oben Rechts "Add new room" neue Räume erstellen. Diese können bei Bedarf mit einem Passwort geschützt werden. \
![image](uploads/9ea64ff788e6e2ad95a8c3d50185ca1b/image.png) ![image](uploads/9ea64ff788e6e2ad95a8c3d50185ca1b/image.png) ![image](uploads/3402896e0d5d3f69e35e3d2e09b6bfe4/image.png)
![image](uploads/3402896e0d5d3f69e35e3d2e09b6bfe4/image.png)
**Settings** <br> **Settings** \
Die Einstellungen zum Set-Up und das Nutzerprofil können im Hauptmenü über den Button oben Rechts "Settings" erreicht werden. <br> Die Einstellungen zum Set-Up und das Nutzerprofil können im Hauptmenü über den Button oben Rechts "Settings" erreicht werden. \
![image](uploads/e964f8874ff0ae5555b5e290f046e647/image.png) ![image](uploads/e964f8874ff0ae5555b5e290f046e647/image.png) \
<br> Hier können Nutzer den Namen, das Profilbild sowie die Audio-/ Mikrofon-/ Video-Einstellungen 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. Des Weiteren besteht auch hier nochmal die Möglichkeit, in den Light-Modus zu wechseln. ![image](uploads/04cbe461bfd126067a5997405f281487/image.png)
Hier können Nutzer den Namen, das Profilbild sowie die Audio-/ Mikrofon-/ Video-Einstellungen 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. Des Weiteren besteht auch hier nochmal die Möglichkeit, in den Light-Modus zu wechseln.
![image](uploads/04cbe461bfd126067a5997405f281487/image.png)
**Meetingraum** <br> **Meetingraum** \
Der Meetingraum wurde in 3 Hauptbereiche gegliedert. <br> Der Meetingraum wurde in 3 Hauptbereiche gegliedert. \
![image](uploads/12810309b4fdf1678f5aa404b262ab6f/image.png) ![image](uploads/12810309b4fdf1678f5aa404b262ab6f/image.png)
<br>
1. Der Linke Bereich beinhaltet die Teilnehmer Liste, die Switch Funktion zum Moderator, die Uhrzeit und unten die Buttons Settings und Leave Room. Hier können wieder die Einstellungen angepasst oder der Raum verlassen werden. <br> 1. Der Linke Bereich beinhaltet die Teilnehmer Liste, die Switch Funktion zum Moderator, die Uhrzeit und unten die Buttons Settings und Leave Room. Hier können wieder die Einstellungen angepasst oder der Raum verlassen werden. \
![image](uploads/e1d73af3616399852f40eaea869156a4/image.png) ![image](uploads/e1d73af3616399852f40eaea869156a4/image.png)
<br>
2. Der mittlere Bereich beinhaltet den Home-Bereich und die Panels für die User sowie die Moderator-Toolbar im Moderations-Modus. <br> \
![image](uploads/b43ac812683dd8c3ff699cf8f4c03255/image.png) 2. Der mittlere Bereich beinhaltet den Home-Bereich und die Panels für die User sowie die Moderator-Toolbar im Moderations-Modus. \
![image](uploads/1f54a1885695df266b045372114f1d8f/image.png) ![image](uploads/b43ac812683dd8c3ff699cf8f4c03255/image.png) ![image](uploads/1f54a1885695df266b045372114f1d8f/image.png) \
<br> Hier sollen bei einer Präsentation zum Beispiel später auch die Folien angezeigt werden. <br> Hier sollen bei einer Präsentation zum Beispiel später auch die Folien angezeigt werden. \
![image](uploads/8e0ad8d04631c22800abac24befb6b10/image.png) ![image](uploads/8e0ad8d04631c22800abac24befb6b10/image.png) \
<br>
3. Der rechte Bereich ist nochmal unterteilt in 3 Tabs. 3. Der rechte Bereich ist nochmal unterteilt in 3 Tabs.
- Im linken Tab befindet sich der Gruppenchat. Dieser bietet eine Echtzeit-Kommunikationsmöglichkeit zwischen den Nutzern im selben Raum. - Im linken Tab befindet sich der Gruppenchat. Dieser bietet eine Echtzeit-Kommunikationsmöglichkeit zwischen den Nutzern im selben Raum.
- Der mittlere Bereich ist für den File Upload. Hier können Dokumente hochgeladen werden. - Der mittlere Bereich ist für den File Upload. Hier können Dokumente hochgeladen werden.
- Der rechte Bereich soll die Möglichkeit bietet, sich während einem Call/ Meeting/ Vorlesung Notizen zu machen und diese später als .txt Datei zu downloaden oder im Chat mit anderen Teilnehmern zu teilen. Des Weiteren soll hier die Möglichkeit bestehen, auch Dokumente hochzuladen. Hierbei ist wichtig zu erwähnen, dass für den Tab Notizen, die Funktionalität noch nicht implementiert ist. - Der rechte Bereich soll die Möglichkeit bietet, sich während einem Call/ Meeting/ Vorlesung Notizen zu machen und diese später als .txt Datei zu downloaden oder im Chat mit anderen Teilnehmern zu teilen. Des Weiteren soll hier die Möglichkeit bestehen, auch Dokumente hochzuladen. Hierbei ist wichtig zu erwähnen, dass für den Tab Notizen, die Funktionalität noch nicht implementiert ist. ![image](uploads/c5c3d434e3e690a9223a033c0a00525a/image.png)
![image](uploads/c5c3d434e3e690a9223a033c0a00525a/image.png)
### UI-Komponenten ### 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, die zur Optimierung der Benutzererfahrung beitragen und diese sind alle mit der Tab-Steuerung bedienbar, wodurch der Grundstein für Barrierefreiheit gelegt wurde. Es sollte jedoch angemerkt werden, dass die Tab-Navigation im Meetingraum noch nicht so gut funktioniert wie auf der Homepage. Nachfolgend werden die genutzten UI-Komponenten vorgestellt: 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 und diese sind alle mit der Tab-Steuerung bedienbar, wodurch der Grundstein für Barrierefreiheit gelegt wurde. Es sollte jedoch angemerkt werden, dass die Tab-Navigation im Meetingraum noch nicht so gut funktioniert wie auf der Homepage. Nachfolgend werden die genutzten UI-Komponenten vorgestellt:
**Alert**: Alerts werden verwendet, um wichtige Benachrichtigungen oder Hinweise anzuzeigen. <br> **Alert**: Alerts werden verwendet, um wichtige Benachrichtigungen oder Hinweise anzuzeigen. \
**Avatar**: Avatare werden genutzt, um Benutzerbilder darzustellen. **Avatar**: Avatare werden genutzt, um Benutzerbilder darzustellen. ![image](uploads/3bd27d335329ead199e519dfa1fcdc78/image.png)
![image](uploads/3bd27d335329ead199e519dfa1fcdc78/image.png)
**Button**: Buttons sind ein wesentlicher Bestandteil der Benutzeroberfläche und werden verwendet, um Aktionen auszulösen oder die Navigation zu erleichtern. **Button**: Buttons sind ein wesentlicher Bestandteil der Benutzeroberfläche und werden verwendet, um Aktionen auszulösen oder die Navigation zu erleichtern. ![image](uploads/67a128c2e2e228a01f5032817f9fc114/image.png)
![image](uploads/67a128c2e2e228a01f5032817f9fc114/image.png)
**Card**: Cards werden eingesetzt, um Informationen oder Inhalte in einem übersichtlichen und ansprechenden Format darzustellen. **Card**: Cards werden eingesetzt, um Informationen oder Inhalte in einem übersichtlichen und ansprechenden Format darzustellen. ![image](uploads/057a6a2c15649b2c35ed9d9084cde286/image.png)
![image](uploads/057a6a2c15649b2c35ed9d9084cde286/image.png)
**Command**: Command-Komponenten werden genutzt, um Befehle auszuführen. Hier wird die Command Box für die Suchfunktion verwendet. **Command**: Command-Komponenten werden genutzt, um Befehle auszuführen. Hier wird die Command Box für die Suchfunktion verwendet. ![image](uploads/d6419c4e64d1cb4192c0d30bbdd8db62/image.png)
![image](uploads/d6419c4e64d1cb4192c0d30bbdd8db62/image.png)
**Dialog**: Dialogs werden verwendet, um wichtige Informationen oder Interaktionsmöglichkeiten in einem modalen Fenster darzustellen. **Dialog**: Dialogs werden verwendet, um wichtige Informationen oder Interaktionsmöglichkeiten in einem modalen Fenster darzustellen. ![image](uploads/d037573ab91e63181d8f0b687526d5e6/image.png)
![image](uploads/d037573ab91e63181d8f0b687526d5e6/image.png)
**Input**: Input-Komponenten werden genutzt, um Benutzereingaben entgegenzunehmen. **Input**: Input-Komponenten werden genutzt, um Benutzereingaben entgegenzunehmen. ![image](uploads/184afe564ef5d4c07299717ad1615b5b/image.png)
![image](uploads/184afe564ef5d4c07299717ad1615b5b/image.png)
**Label**: Labels werden verwendet, um Beschriftungen für andere UI-Elemente bereitzustellen. **Label**: Labels werden verwendet, um Beschriftungen für andere UI-Elemente bereitzustellen. ![image](uploads/a631cf74dbaab86a11c4878473ce0033/image.png)
![image](uploads/a631cf74dbaab86a11c4878473ce0033/image.png)
**Menubar**: Menubars werden genutzt, um Navigationsoptionen bereitzustellen. **Menubar**: Menubars werden genutzt, um Navigationsoptionen bereitzustellen. ![image](uploads/f8ec99c2014d52a0bd9e98df96bd0ffb/image.png)
![image](uploads/f8ec99c2014d52a0bd9e98df96bd0ffb/image.png)
**Resizable**: Die Resizable-Komponente ermöglicht es, bestimmte UI-Elemente in der Größe anzupassen, um die Anpassbarkeit zu verbessern. <br> **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. <br> **Scroll-Area**: Scroll-Area-Komponenten werden eingesetzt, um Inhalte darzustellen, die größer sind als der verfügbare Anzeigebereich.
**Separator**: Separator-Komponenten werden genutzt, um visuelle Trennlinien zwischen verschiedenen Elementen in der Benutzeroberfläche zu erstellen. **Separator**: Separator-Komponenten werden genutzt, um visuelle Trennlinien zwischen verschiedenen Elementen in der Benutzeroberfläche zu erstellen.
**Select**: Select-Komponenten werden verwendet, um Dropdown-Listen bereitzustellen. **Select**: Select-Komponenten werden verwendet, um Dropdown-Listen bereitzustellen. ![image](uploads/fc305deb4ee7a98c1dd53bd50b78d06f/image.png)
![image](uploads/fc305deb4ee7a98c1dd53bd50b78d06f/image.png)
**Tabs**: Tabs werden eingesetzt, um verschiedene Ansichten/Reiter im Meeting Raum zu organisieren. **Tabs**: Tabs werden eingesetzt, um verschiedene Ansichten/Reiter im Meeting Raum zu organisieren. ![image](uploads/b0562256cc42c86cad8996b5926af5d3/image.png)
![image](uploads/b0562256cc42c86cad8996b5926af5d3/image.png)
**Toggle-Group und Toggle**: Toggle-Group- und Toggle-Komponenten werden genutzt, um Umschaltfunktionen bereitzustellen. Wurde genutzt für die Contrall Bar. **Toggle-Group und Toggle**: Toggle-Group- und Toggle-Komponenten werden genutzt, um Umschaltfunktionen bereitzustellen. Wurde genutzt für die Contrall Bar. ![image](uploads/59e64424380ee8f57f5381d45ed2cce4/image.png)
![image](uploads/59e64424380ee8f57f5381d45ed2cce4/image.png)
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. 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 ## Herausforderungen
Während der Entwicklung traten mehrere Herausforderungen auf, die zu einer Anpassung der ursprünglichen Pläne führten. Diese werden im folgenden genauerer erläutert. <br>
![image](uploads/0d782db6f0b11951a9f95f59ffef07da/image.png){width=224 height=312} Während der Entwicklung traten mehrere Herausforderungen auf, die zu einer Anpassung der ursprünglichen Pläne führten. Diese werden im folgenden genauerer erläutert. \
![image](uploads/0d782db6f0b11951a9f95f59ffef07da/image.png){width="224" height="312"}
### Backend ### Backend
Der ursprüngliche Plan sah vor, das alte Backend auszugliedern. Jedoch konnte trotz enger Zusammenarbeit mit Raphael der Loadbalancer nicht zum Laufen gebracht werden. Es traten Probleme bei der Einbindung des “ezMCU” auf (siehe Screenshot). Statt nutzbarer Daten wurden HTML-Codeabschnitte gerendert und an das Frontend geschickt. Sprich das ezMCU konnte nicht richtig verwendet werden. Deshalb konnte auch zum Beispiel die Funktion zur Steuerung von Audio nicht implementiert werden. <br>
Der ursprüngliche Plan sah vor, das alte Backend auszugliedern. Jedoch konnte trotz enger Zusammenarbeit mit Raphael der Loadbalancer nicht zum Laufen gebracht werden. Es traten Probleme bei der Einbindung des “ezMCU” auf (siehe Screenshot). Statt nutzbarer Daten wurden HTML-Codeabschnitte gerendert und an das Frontend geschickt. Sprich das ezMCU konnte nicht richtig verwendet werden. Deshalb konnte auch zum Beispiel die Funktion zur Steuerung von Audio nicht implementiert werden. \
![image](uploads/0ce684960d3fb1cd42fc23fce393c5ea/image.png) ![image](uploads/0ce684960d3fb1cd42fc23fce393c5ea/image.png)
**Neue Ansatz:** **Neue Ansatz:** Es wurde beschlossen, das alte Frontend aus dem Backend auszugliedern und die Backend-Antworten entsprechend anzupassen.
Es wurde beschlossen, das alte Frontend aus dem Backend auszugliedern und die Backend-Antworten entsprechend anzupassen. <br>
#### Socket.io
### Socket.io Ein weiteres Problem bestand in der Socket.io-Verbindung zwischen dem neuen Frontend und Backend, die nicht zustande kam. Im ursprünglichen Ansatz war der Socket.io-Client im Accelerator vollständig in der connect.js implementiert (siehe Screenshot). \
Ein weiteres Problem bestand in der Socket.io-Verbindung zwischen dem neuen Frontend und Backend, die nicht zustande kam. Im ursprünglichen Ansatz war der Socket.io-Client im Accelerator vollständig in der connect.js implementiert (siehe Screenshot). <br>
![image](uploads/a7b058969ffa4df6f4e21c9b8ca17063/image.png) ![image](uploads/a7b058969ffa4df6f4e21c9b8ca17063/image.png)
**Neuer Ansatz:** Ein Socket.io-Service wurde entwickelt, der die Verbindung bereitstellt. Die notwendigen Funktionen werden nun in den jeweiligen Komponenten implementiert (siehe Screenshots).
<div>
![Bild 1](uploads/74a01f505e83fa44a7105e65886b5ad3/image.png){width="400"} ![Bild 2](uploads/404c2ea7e2edcb660509e2aaa7bd4435/image.png){width="400"}
#### API-Calls
API-Calls vom neuen Frontend aus waren nicht möglich. Nach viel Recherche und der Integration von axios im Frontend, wurde schnell das Cross-Origin Ressource Sharing als Übeltäter ausfindig gemacht.
**Neuer Ansatz:** **Neuer Ansatz:**
Ein Socket.io-Service wurde entwickelt, der die Verbindung bereitstellt. Die notwendigen Funktionen werden nun in den jeweiligen Komponenten implementiert (siehe Screenshots).
<div style="display: flex;"> Integration einer CORS-Library und das explizite whitelisting des Frontends.
<img src="uploads/74a01f505e83fa44a7105e65886b5ad3/image.png" alt="Bild 1" width="400" />
<img src="uploads/404c2ea7e2edcb660509e2aaa7bd4435/image.png" alt="Bild 2" width="400" /> ### Frontend
</div>
Das Accelerator-Frontend wird durch ein neues Frontend mit aktueller Technologie ersetzt. Dafür wurde React im Verbund mit TypeScript ausgemacht. Dies hatte nun zur Folge, dass die meiste Logik, die im Accelerator zum Einsatz kam, nun nicht mehr verwendet werden kann, da diese auf jQuery basiert.
Die Länge der bisherigen Frontend-Dateien erreichten bis zu 2500 Zeilen Code. Zudem existierte eine große index.html, die den gesamten statischen HTML-Code Accelerators in sich vereinte. Diese Abschnitte wurden dann von variablen HTML-Code vervollständigt, je nach Datenlage und Server-Antworten.
</div>**Neuer Ansatz:**
Grundlegende Funktionen konnten für den neuen Techstack übersetzt und integriert werden. Eine 1:1 Integration der bisherigen Dateien war leider nicht möglich, weshalb eine Migration durchgeführt wurde. Da diese für alle Funktionen in einer kurzen Zeitspanne nicht umsetzbar sind, wurde sich auf die grundlegensten Funktionen beschränkt.
Teil der Migration wurde somit auch ein neues Routing zwischen den Seiten im neuen Frontend. Wo vorher eine große index-Datei verwendet wurde, sind nun viele kleine Komponenten-Dateien, die zusammen das neue Frontend bilden und mittels dem Routing untereinander kommunizieren können.
## Ausblick ## Ausblick
Im Rahmen des Projekts Venue wurden die priorisierten Hauptziele in diesem Semester trotz einiger Herausforderungen erreicht. Es gibt jedoch noch viele weitere Entwicklungsmöglichkeiten, die in Zukunft verfolgt werden können. Einige der möglichen nächsten Schritte umfassen: Im Rahmen des Projekts Venue wurden die priorisierten Hauptziele in diesem Semester trotz einiger Herausforderungen erreicht. Es gibt jedoch noch viele weitere Entwicklungsmöglichkeiten, die in Zukunft verfolgt werden können. Einige der möglichen nächsten Schritte umfassen:
- Die Notwendigkeit, sich um die Datenbank zu kümmern und die Datenkonsistenz sicherzustellen, da nicht alle Räume dieselben Attribute besitzen. - Die Notwendigkeit, sich um die Datenbank zu kümmern und die Datenkonsistenz sicherzustellen, da nicht alle Räume dieselben Attribute besitzen.
...@@ -289,6 +297,7 @@ Im Rahmen des Projekts Venue wurden die priorisierten Hauptziele in diesem Semes ...@@ -289,6 +297,7 @@ Im Rahmen des Projekts Venue wurden die priorisierten Hauptziele in diesem Semes
- Login als Gast ohne ein Passwort ist noch nicht möglich, dies sollte entsprechend implementiert werden. - Login als Gast ohne ein Passwort ist noch nicht möglich, dies sollte entsprechend implementiert werden.
- Im Meetingroom stehen noch offene Aufgaben wie zum Beispiel; Emojos im Chat, Notes und Controllbar, Draggables, Präsentationsmodus und Upload, Screenshare, 3D, Whiteboard, YT Cast. - Im Meetingroom stehen noch offene Aufgaben wie zum Beispiel; Emojos im Chat, Notes und Controllbar, Draggables, Präsentationsmodus und Upload, Screenshare, 3D, Whiteboard, YT Cast.
- Des Weiteren sollte die Suchfunktion im Home Bereich implementiert werden. - Des Weiteren sollte die Suchfunktion im Home Bereich implementiert werden.
<br>
Vielen Dank an alle Beteiligten für ihre Arbeit. <br> \
![image](uploads/80a979f1af9d602a2f8cbb37e3b46c45/image.png){width=228 height=229} Vielen Dank an alle Beteiligten für ihre Arbeit. \
\ No newline at end of file ![image](uploads/80a979f1af9d602a2f8cbb37e3b46c45/image.png){width="228" height="229"}
\ No newline at end of file