@@ -25,21 +25,24 @@ Während dieses Semesters wurde der Fokus auf die Hauptziele gelegt, da sie esse
...
@@ -25,21 +25,24 @@ 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
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 main-Branch. Diese Vorgehensweise ermöglicht es, an einem bestimmten Feature zu arbeiten, ohne die Haupt-Codebasis zu beeinträchtigen. Im Master-Branch befindet sich die Hauptversion von Venue. 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.
-**venue-settings:** Dieser Branch war für die Entwicklung von Profil- und Setup-Einstellungen zuständig.
-**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-home:** In diesem Branch erfolgte die Entwicklung der Startseite.
-**venue-backend:** Auf diesem Branch wurden die Backend-Anpassungen durchgeführt.
-**venue-backend:** Auf diesem Branch wurden die Backend-Anpassungen durchgeführt.
-**venue-bugfixes:** Dieser Branch wurde angelegt, um Bugs zu fixen.
-**venue-socket.io:** Hier wurden alle Anpassungen in Bezug auf socket.IO 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.
-**venue-styling:** Auf diesem Branch wurde das Design umgesetzt.
-**venue-audio:** Hier erfolgte die Implementierung der Audio Funktionalität.
-**venue-chat:** In diesem Branch wurde der Gruppen Chat implementiert.
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 main-Branches aufrechterhalten werden.
## Verwendete Technologien
## Verwendete Technologien
### Frontend
### Frontend
**[React](https://react.dev/)**<br>
**[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.
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.
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.
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.
...
@@ -223,16 +226,14 @@ Diese Komponenten wurden mit Blick auf Benutzerfreundlichkeit, Barrierefreiheit
...
@@ -223,16 +226,14 @@ Diese Komponenten wurden mit Blick auf Benutzerfreundlichkeit, Barrierefreiheit
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.
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.
### 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.
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>
Es wurde beschlossen, das alte Frontend aus dem Backend auszugliedern und die Backend-Antworten entsprechend anzupassen. <br>
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
### 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>
