2. Experiment 2: [Web-ics-merger]

Datum: [18.04.2024] Thema: [Web-ics-merger]

2.1. Einleitung

Unser zweites Experiment ist eine direkte Weiterentwicklung unseres ersten Experiments. Wir haben weiterhin das Ziel verfolgt mehrere ICS-Dateien zu einer einzigen Datei zu fusionieren. Im vergleich zu unserem Letzten Experiment haben wir dieses mal aber zwei verschiedene Web-Frameworks genutzt, da wir dieses mal auch eine Grafische Oberfläche haben wollten anstatt einem simplen shell programm. Zum Einsatz kamen die frameworks Rocket um das ganze in Rust umzusetzen und React um das Problem mit JavaScript zu lösen.

2.2. Motivation

Da wir bereits erfahrung mit React hatten wollten wir das Problem einmal mit dem uns bekannten React lösen. Zusätzlich wollten wir aber auch noch das uns bisher unbekannte Framework Rocket für Rust lernen, weshalb wir uns entschieden haben das Problem auch noch auf diese Weise zu lösen.

2.3. Aufgabenstellung

Die Hauptaufgabe besteht darin, ein Tool zu entwickeln, das es ermöglicht, alle Vorlesungen, die ein Studierender in diesem Semester belegt, aus Untis heruntergeladene iCal-Dateien zu verwenden und sie miteinander zu fusionieren. Dabei soll das Tool in der Programmiersprache Zig implementiert werden. Die genauen Schritte umfassen:

  1. Analyse der Struktur und des Inhalts der heruntergeladenen iCal-Dateien.

  2. Entwicklung eines Algorithmus zum Zusammenführen mehrerer iCal-Dateien unter Berücksichtigung von Überschneidungen und Duplikaten.

  3. Implementierung des Tools unter Verwendung der Sprachen Rust und JavaScript.

  4. Testen des entwickelten Tools mit verschiedenen Szenarien und Datensätzen.

  5. Dokumentation der Implementierungsschritte sowie der Ergebnisse und Erkenntnisse aus den Tests.

2.4. Grundlagen

Für die Umsetzung des Tools werden die Programmiersprache Rust(Rocket) und JavaScript(React) verwendet. Anstelle der Nutzung einer REST-API und dem direkten Zugriff auf Stundenpläne in Untis werden bereits heruntergeladene iCal-Dateien verwendet und miteinander fusioniert. Die iCal-Dateien enthalten die Kalenderdaten im Standardformat und werden mittels geeigneter Bibliotheken bearbeitet.

2.5. Versuchsdurchführung

2.5.1. Rust/Rocket

Zur Erstellung des Rust Tools wurde das Framework Rocket genutzt. Rocket ist ein Web-Framework für Rust, das es ermöglicht, Webanwendungen einfach und effizient zu erstellen. Die Anwendung besteht aus zwei Hauptkomponenten:

  1. Ein Input-Feld, welches eine oder mehrere ICS-Dateien hochladen kann. Die hochgeladenen Dateien werden mit dem Rocket-Makro #[form(field = „file“)] in eine Variable gespeichert, um sie später weiterzuverarbeiten.

  2. Eine POST-Route, die aufgerufen wird, wenn der Benutzer auf den „Merge“-Button klickt. Diese Route prüft, ob eine oder mehrere Dateien hochgeladen wurden, entfernt bestimmte Zeichen aus den Dateien, fügt sie zusammen und erstellt eine neue Blob-Datei. Wenn keine Datei hochgeladen wurde, wird eine entsprechende Fehlermeldung ausgegeben.

Anschließend wird der Nutzer automatisch auf die Download-Seite weitergeleitet, wo er die zusammengeführte Datei automatisch herunterladen kann. Der Dateiname für den Download ist eine zufällig generierte Zeichenfolge. Leider gab es Probleme die Dateiendung vor dem schicken an den User zu ändern, weshalb die Datei nach dem downloaden noch mit der endung .ics versehen werden muss damit sie ordnungsgemäß funktioniert.

Um die Anwendung zu starten, und damit den Server zu hosten führt man den Befehl

cargo run

im Verzeichnis rocket-server aus.

2.5.2. JavaScript/React

Zur Erstellung der React Anwendung wurde das Tool Vite genutzt welches es sehr einfach macht React Anwendungen mit der nötigen Grundstruktur zu erstellen. An sich besteht der React Merger aus nur drei Bauteilen.

  1. Zwei Input-Felder: Diese Felder sind HTML-Input-Tags mit dem Attribut type=“file“, die es dem Benutzer ermöglichen, zwei ICS-Dateien hochzuladen. Die hochgeladenen Dateien werden mit dem useRef-Hook von React gespeichert, um sie später weiterzuverarbeiten.

  2. Eine mergeFiles-Funktion: Diese Funktion wird aufgerufen, wenn der Benutzer auf den „Merge“-Button klickt. Sie prüft, ob beide Dateien hochgeladen wurden, entfernt bestimmte Zeichen aus beiden Dateien, fügt sie zusammen und erstellt eine neue Blob-Datei. Wenn eine oder beide Dateien nicht hochgeladen wurden, wird eine entsprechende Fehlermeldung ausgegeben.

  3. Ein Download-Button: Wenn der Benutzer auf diesen Button klickt, wird die mergeFiles-Funktion aufgerufen und die zusammengeführte Datei wird zum Download bereitgestellt. Der Dateiname für den Download ist „mergedFile.ics“.

Um die Anwendung zu hosten wird der von Vite zur verfügung bereitgestellte Development Server genutzt welcher sich mit

npm run dev

starten lässt.