@@ -31,10 +31,12 @@ Um eine strukturierte Entwicklung zu gewährleisten, wird im Projekt der Feature
-**venue-settings:** Dieser Branch war für die Entwicklung von Profil- und Setup-Einstellungen zuständig.
-**venue-home:** In diesem Branch erfolgte die Entwicklung der Startseite.
-**venue-backend:** Auf diesem Branch wurden die Backend-Anpassungen durchgeführt.
-**venue-socket.io:** Hier wurden alle Anpassungen in Bezug auf socket.IO durchgeführt.
-**venue-styling:** Auf diesem Branch wurde das Frontend aufgesetzt.
Durch diese Struktur können neue Funktionen isoliert entwickelt und gleichzeitig die Stabilität des Master-Branches aufrechterhalten werden.
## Dependencies
## Verwendete Technologien
### 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 unsere Wahl auf React.
...
...
@@ -44,6 +46,9 @@ Ein weiterer Entscheidungspunkt war die Performance. Die Verwendung des virtuell
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 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 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.
...
...
@@ -74,11 +79,12 @@ Für Venue wurde ein ansprechendes Dark-Mode Farbschema gewählt, das ein modern
| **Boxen** | <imgsrc="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** | <imgsrc="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 den Benutzer erleichtern. |
| **Button Hover** | <imgsrc="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. |
| **Deaktivierte Elemente** | <imgsrc="uploads/00c2e769ad4284d60dd655415fa28ba1/image.png"width="90"/>| Die Farbe für deaktivierte Elemente zeigt an, welche Optionen derzeit nicht verfügbar sind. |
| **Chat** | <imgsrc="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.
### Lightmode
### 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.
...
...
@@ -154,36 +160,62 @@ Die Einstellungen zum Set-Up und das Nutzerprofil können im Hauptmenü über de
Die Lade Seite erscheint während ein Raum betreten wird.
**Meetingraum**<br>
Der Meetingraum wurde in 3 Hauptbereiche gegliedert:
1. Der Linke Bereich beinhaltet die Teilnehmer Liste, die Switch Funktion zum Moderator, die Uhrzeit und unten die Buttons Settings und Leave Room.
2. Der mittlere Bereich beinhaltet den Home-Bereich und die Panels für die User sowie die Moderator-Toolbar. Hier werden zum Beispiel bei einer Präsentation die Folien angezeigt.
3. Der rechte Bereich ist nochmal unterteilt in 3 Tabs. <br>
3.1 Im linken Tab befindet sich der Gruppenchat. Dieser bietet eine Echtzeit-Kommunikationsmöglichkeit zwischen den Nutzern im selben Raum. <br>
3.2 Der mittlere Bereich ist für den File Upload. Hier können Dokumente hochgeladen werden. <br>
3.3 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.
-**Chat-Funktion:** Bietet eine Echtzeit-Kommunikationsmöglichkeit zwischen den Nutzern im selben Raum.
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. | |
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:
### UI Komponenten Beschreibung
**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.
...
...
@@ -195,7 +227,9 @@ Der ursprüngliche Plan sah vor, das alte Backend auszugliedern. Jedoch konnte t
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>
Eine weitere Herausforderung war, dass ezMCU nicht richtig verwendet werden konnte. Aufgrund dessen konnte die Funktion zur Steuerung von Audio nicht implementiert werden.
### 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).
...
...
@@ -210,12 +244,12 @@ Ein Socket.io-Service wurde entwickelt, der die Verbindung bereitstellt. Die not
</div>
## Ausblick
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:
- 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).
- Die Notwendigkeit, sich um die Datenbank zu kümmern und die Datenkonsistenz sicherzustellen, da nicht alle Räume dieselben Attribute besitzen.
- Die Funktionen sollten so umgeschrieben werden, dass asynchrone Kommunikation ermöglicht wird.
- 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.
- Eine Light Mode Version könnte entwickelt und der switch ermöglicht werden.
- Eine Funktion zur Geräuschunterdrückung für eine verbesserte Audioqualität während der Meetings sollte implementiert werden.
- Die Möglichkeit für Benutzer, Nachrichten zu liken, um Zustimmung oder Interesse auszudrücken sollte implementiert werden.
- Es sollte eine ausführliche Tour durch Venue, die neuen Nutzern hilft sich besser zurechtzufinden, bereitgestellt werden. Die Tour sollte zu jeder Zeit erneut aufrufbar sein.
- Die Lightmode Version steht bereits zur Verfügung, sollte aber optimiert und auf alle Seiten angewendet werden.
