DigiSchulLab

Dieses Projekt zielt darauf ab, die Art und Weise, in der wir in der heutiger Zeit Lernen zu verbessern und zu erweitern, in dem wir neue Lernumgebungen erzeugen, die Schüler:innen und Studierenden helfen, sich schneller zurechtzufinden, sowie eine einfache Planung und Arbeitsumgebung zu erstellen, welche ebenso Informationen zu ihrem alltäglichen Studienverlauf bereitstellen und damit das gesamte Lernerlebnis auf ein neues Niveau zu bringen.

Agile Projektstruktur

In diesem Projekt war vorausgesetzt, dass wir individuell als Gruppen arbeiten und uns selbst organisiert haben. Alle sollten die gleiche Verantwortung und den gleichen Anteil an dem Projekt haben. Dadurch sind Organisationsstrukturen mit Hierarchien und unterschiedlichen Anteil für uns ausgeschieden. Des Weiteren war vorausgesetzt, dass wir uns selbst erarbeiten sollen, was wir innerhalb des Projektes umsetzen wollen, passend zu dem Thema digitales Schullabor.

Dadurch haben wir einen Ablauf, in dem die Ziele des Projektes erst im Laufe der Durchführung entstehen und die Zeiten, in denen wir uns treffen, variabel waren, und die Arbeitsteilung sich entschieden hatte, je nachdem, woran die Person das meiste Interesse hatte, stellte sich die Projektstruktur recht schnell als agil heraus.

Die agile Projektstruktur betont die Zusammenarbeit zwischen unseren Teammitgliedern. Durch regelmäßiges Treffen, die in der Hochschule stattfanden, und der Feedbackschleife durch unsere Betreuerin und gemeinsame Entscheidungen können Teams schnell auf Probleme reagieren und Lösungen finden.

Die agile Methode ist besonders gut für die kontinuierliche Verbesserung und unseren Lernprozess. Wir konnten uns dadurch gegenseitig überwachen, und auch Feedback geben, um uns zu verbessern.

Die Flexibilität, die uns die agile Projektstruktur bot, erlaubte uns, unsere individuelle Arbeitszeit gut einzuteilen und für eine bessere Effizienz zu sorgen.

Open Source

Bei der gesamten Umsetzung unseres Projektes wurde besonders Wert darauf gelegt, dass alle Software und Tools Open Source sind. Da deren Quellcode öffentlich zugänglich ist und somit von einer Community von Entwickler:innen und Nutzer:innen frei genutzt, modifiziert und verbessert werden kann. Open Source-Software kann von allen genutzt und angepasst werden, die über die notwendigen Fähigkeiten und Kenntnisse verfügen.

Arbeits-Infrastruktur

Die Strukturen, in denen wir die Arbeit umsetzen, sind ebenso wichtig. Wir haben uns hierbei mit diversen Kommunikations- und Dokumentations-, sowie Planungstools auseinandergesetzt um zu sehen, welche die Arbeit für uns am einfachsten und übersichtlichsten gestalten.

Dokumentation

HedgeDoc

Hedgedoc ist eine Markdown-basierte Technologie und bietet die Möglichkeit, gemeinsam in Echtzeit Dokumente zu erstellen und zu bearbeiten. Markdown erfordert keine besonderen Kenntnisse, um mit dieser umzugehen, sie ist schnell zu lernen und umzusetzen.

In Bezug auf die gemeinsame Zusammenarbeit bietet HedgeDoc vielerlei Möglichkeiten, diese umzusetzen. Unter anderem auch einen Live-Chat für die gemeinsame Kommunikation während der Zusammenarbeit, sowie die Anzahl der Bearbeiter:innen zu begrenzen oder die Zugriffsrechte für bestimmte Benutzer:innen zu beschränken.

Hedgedoc speichert automatisch das Dokument in einer Versionshistorie, sodass Benutzer:innen auf frühere Versionen des Dokuments zurückgreifen können. So erlaubt Hedgedoc auch den Import und Export von verschiedenen Dateiformaten wie Text, HTML und Microsoft Word.

Ein weiterer Vorteil ist, dass Hedgedoc eine Webanwendung ist, die über den Browser aufgerufen werden kann. Ebenso gibt es auch eine mobile App für Android und iOS, wodurch Benutzer:innen von überall aus zusammenarbeiten und auf ihre Dokumente zugreifen können.

Wir haben Hedgedoc genutzt, von der Hochschule auf einem Server bereigestellt: https://hedgedoc.informatik.hs-bremerhaven.de/ Um unser Projekt zu dokumentieren, gehört hierzu ein wöchentliches Protokoll, wo festgehalten wurde, was gemacht wurde, was noch gemacht werden muss, sowie die Einteilung der jeweiligen Personen mit deren Zuständigkeiten. Auch haben wir es genutzt, um generelle Informationen zu dokumentieren, die das Projekt betreffen.

GitLab

GitLab ist ein Open Source Code-Repository und eine webbasierte kollaborative Entwicklungsplattform, die auf Git-Versionskontrolle aufgebaut ist. Es wird verwendet, um Quellcode zu verwalten, daran zusammenzuarbeiten und zu veröffentlichen.

Es bietet diverse Code-Review-Tools an, die es den Entwickelnden erleichtern, den Code von anderen Teammitgliedern zu überprüfen und Feedback zu geben.

Sie bietet eine Rechtsverwaltung, die ermöglicht, den Zugriff auf die Quellcode-Repositories und -Tools zu verwalten und zu beschränken, sowie auch verschiedene Projektmanagement-Tools, wie z.B:

Issue-Tracking, um Fehler oder Verbesserungsvorschläge zu dokumentieren. Issues können auch mit Meilensteinen, Labels, Prioritäten und Zuweisungen versehen werden, um Probleme zu kategorisieren und an Entwickelnde zu verteilen.

Merge-Requests, hier können Entwickelnde Änderungen an einem Code-Repository vorschlagen und diskutieren. Andere Teammitglieder können den Code überprüfen und Feedback geben, bevor die Änderungen in das Haupt-Repository übernommen werden.

Zeit-Tracking kann die Zeit, die für bestimmte Aufgaben aufgewendet wird, verfolgen und Berichte darüber erstellen.

Wir haben GitLab verwendet, um das von uns gewohnte Versionsverwaltungssystem Git nutzen zu können und auch eine einfache Übersicht zu haben, was aktuell in den Repositories vorhanden ist und nachverfolgen zu können, wie gearbeitet wurde.

GitLab bietet uns an, unsere Entwicklungsinfrastruktur an einem Ort zu verwalten, anstatt verschiedene Tools und Dienste zu nutzen und unsere gemeinsame Arbeit übersichtlicher zu gestalten.

Kommunikation

Matrix

Matrix ist ein Open Source-Projekt und ein sicheres, dezentrales, offenes Netzwerk für Instant Messaging und Echtzeit-Kommunikation. Es ermöglicht den Benutzer:innen, über verschiedene Server hinweg zu kommunizieren. Es bietet einfache HTTP-APIs und SDKs (iOS, Android, Web) zum Erstellen von Chatrooms, direkten Chats und Chatbots, Datenübertragung, synchronisiertem Gesprächsverlauf, formatierten Nachrichten, Lesebestätigungen und mehr.

Matrix besitzt eine hochmoderne Ende-zu-Ende-Verschlüsselung über die kryptografischen Ratschen Olm und Megolm. Dadurch wird sichergestellt, dass nur die beabsichtigten Empfänger:innen die Nachrichten entschlüsseln können, während sie gewarnt werden, wenn der Konversation unerwartete Geräte hinzugefügt werden.

WebRTC bietet den Entwickelnden die Möglichkeit, qualitativ hochwertige Sprach- und Videoanrufe auszutauschen – aber keine Standardmethode, um die Anrufe tatsächlich weiterzuleiten.

Speziell haben wir die Anwendung https://element.io/ benutzt, welche eine Web- sowie Android- und iOS Anwendung bietet und unsere Hochschule hat hierfür einen eigenen Server bereitstellt, um uns so eine einfache und vielfältige Möglichkeit bietet, sicher miteinander zu kommunizieren.

Jitsi

Jitsi ist eine kostenlose Open Source-Plattform für Videokonferenzen, die es ermöglicht, dass Benutzer:innen sich in Echtzeit über Video und Audio verbinden und kommunizieren können. Benutzer:innen können einem Meeting über einen Webbrowser beitreten oder die Jitsi-Desktop oder mobile Anwendung herunterladen.

Jitsi ermöglicht es Benutzer:innen, ihren Bildschirm mit anderen Teilnehmenden zu teilen, was die Zusammenarbeit an Projekten oder den Austausch von Informationen erleichtert. So bietet Jitsi auch die Option, Besprechungen aufzuzeichnen, was nützlich sein kann, um wichtige Informationen zu überprüfen oder für diejenigen, die nicht in Echtzeit an der Besprechung teilnehmen können.

Benutzer:innen können so auch über eine textbasierte Chat-Funktion miteinander kommunizieren. Dies kann nützlich sein, um Links, Notizen oder andere Informationen während eines Meetings zu teilen.

Jitsi haben wir für Online-Meetings genutzt, so auch um Probleme zu lösen, die schwer über Text auszudrücken waren.

Hochschulapp

Themenfindung

Zu Beginn stand die Integration von diversen Tools und Planungsmöglichkeiten zur Verbesserung des Lernens über Nextcloud(https://nextcloud.com/de/) im Vordergrund.

Nextcloud ist eine flexible und erweiterbare Plattform, die von Einzelpersonen, Unternehmen und Organisationen genutzt werden kann, um ihre eigenen Cloud-Speicherlösungen zu erstellen und zu verwalten. Die Software kann auf einem eigenen Server oder auf einem Cloud-Server gehostet werden, und es gibt eine große Anzahl von Add-Ons und Plug-ins, die die Funktionalität der Plattform erweitern können.

Hierzu wollten wir Nextcloud mit Tools wie Whiteboards ähnlich dem von Miro (https://miro.com/de/) erweitern, sowie auch BBB (Big Blue Button), Element.io und anderen Organisations-Tools, dies stellte sich im Laufe der Zeit jedoch als problematisch dar.

Nach vielerlei Diskussion und Ideenaustausch haben wir uns für ein kleineres, aber ähnliches Projekt entschieden welches den Alltag für uns Studierende etwas vereinfachen sollte. Die Idee war die Erstellung einer Web-App, die simpel vom Browser aus zugänglich ist, sodass diese von vielen Geräten (Android, iOS, Windows, Linux, Mac) erreichbar ist.

Web App - die Idee

Die Web-App sollte die Kombination aus verschiedenen bereits vorhandenen Webseiten und Funktionen sein, welche in einfacher Form den Studierenden bereitgestellt werden soll, so dass diese alle Funktionen und Informationen erhalten, die sie im Laufe ihres Studiums benötigen.

Kalender und Prüfungen

Unter anderem wollten wir das IuP-Amt (Immatrikulations- und Prüfungsamt) einbringen, sowie die Stundenpläne für alle Studiengänge. Auch enthalten sein sollten die Prüfungstermine, sowie Anmeldefristen.

Hochschul-, Asta-, Studierendenwerk Bremen- und Mensa-News

Wie das IuP-Amt, haben wir viele externe Webseiten, die wir als Studierende nutzen, um Informationen zu erhalten. Diese wollten wir in einer App unterbringen, um den Zugriff zu vereinfachen. Außerdem auch um die Ladezeiten zu verkürzen und die Übersicht der Informationen besser darstellen zu können, sodass wichtigere Informationen für die Studierenden auf einen Seite ablesbar sind.

Darunter befinden sich Informationen von der eigentlichen Webseite der Hochschule, sowie eine Infobox, die über Ausfälle von Veranstaltungen informiert. https://www.hs-bremerhaven.de/de

Der AStA (Allgemeiner Studierendenausschuss) hilft uns Studierenden nicht nur in allgemeinen Fragen im Studium, er bietet auch vielerlei verschiedene Freizeitangebote an und organisiert viele Events, die den Studierenden das Studium versüßen und Erinnerung schaffen, die wir ein Leben lang behalten. Daher sind Informationen und direkte Benachrichtigung vom AStA für uns Studierende besonders wichtig. https://www.astaonline.de/gremien/asta

So zu guter Letzt Informationen vom Studierendenwerk Bremen, welches nicht nur Essenspläne für die Mensa und Cafeteria bereitstellt, sondern auch bei allerlei Fragen und Hilfe zur Verfügung steht, besonders in Sachen BAföG. https://www.stw-bremen.de/

Element und Smail

Die Hochschule legt Wert auf sichere und schnelle Kommunikation, daher stellt sie einen Element- Matrixserver für die Studierenden und Hochschulangehörigen bereit, sowie einen Mail-Account. Smail wurde in die Hochschulapp eingebunden.

Zusätzlich zu dem bereits vorhandenem Matrixserver haben wir uns entschieden, einen weiteren, eigenen aufzusetzen. Zum einen da uns interessiert hat, wie man so einen Server selbst aufsetzt und zum anderen, um damit experimentieren und diesen in die Hochschulapp einbinden zu können.

Matrix sollte dann für die hochschulinterne Kommunikation als Alternative zur E-Mail genutzt werden, sowie um Neuigkeiten und Rundschreiben übersichtlich zu verbreiten. Um das umzusetzen, haben wir auf unserem Matrixserver Accounts für die entsprechenden Mitarbeitenden der verschiedenen Servicestellen erstellt, unter anderem für den AStA und die Servicestelle Lernen und Lehren.

Als nächstes haben wir in JavaScript einen Bot erstellt und diesen als User in die Räume hinzugefügt. Dieser Bot liest die dort von Mitarbeitenden verfassten Nachrichten und schreibt sie in eine externe Datei, die dann an die Web App weitergeleitet wird. So sollen in Matrix verfasste Nachrichten den Nutzer:innen der App als Push- Benachrichtigung erscheinen.

Planung & Umsetzung der App

Alle diese Informationen sowie Kommunikationsmöglichkeiten wollten wir in einer App zusammenbringen und den Studierenden zur Verfügung stellen.

PWA (Progressive Web Application)

Um auch die breite Masse an verschiedenen Geräten (Android, iOS, WIndows, Linux,mac etc.) zu erreichen, fiel unsere Wahl auf eine Progressive Web App, welche uns erlaubt, nicht nur die App über das Web für alle Geräte zugänglich zu machen, sondern auch durch Push Benachrichtigungen das Gefühl einer nativen App herstellt. So erlaubt uns eine PWA auch, die vorgeladenen Inhalte auf dem genutzten Gerät abzuspeichern und einen Offline-Zugang zu den Informationen zu gestatten.

Die PWA basiert auf einer Reihe von Webtechnologien wie HTML, CSS und JavaScript, die auf dem Client ausgeführt werden. Die PWA wird normalerweise über HTTPS bereitgestellt und kann in jedem modernen Webbrowser ausgeführt werden, der die erforderlichen Funktionen unterstützt.

Einer der Hauptbestandteile von PWAs ist der Service Worker: PWAs verwenden einen Service Worker, um das Caching von Ressourcen und das Offline-Verhalten zu verwalten. Der Service Worker ist ein JavaScript-Worker, der als Proxy zwischen der Anwendung und dem Netzwerk fungiert und die Möglichkeit bietet, die Anwendung im Hintergrund zu aktualisieren und zu synchronisieren.

Ein weiterer Teil von PWAs ist das Web App Manifest: Das Web App Manifest ist eine JSON-Datei, die beschreibt, wie die Anwendung auf dem Gerät installiert werden soll und wie sie auf dem Startbildschirm des Geräts angezeigt werden soll. Es enthält Informationen wie den Namen der Anwendung, das Icon, das Farbschema, die Start-URL und andere Eigenschaften.

Vue.js

Vue.js ist ein JavaScript-Framework zur Erstellung von Benutzeroberflächen (UIs). Es wurde von Evan You im Jahr 2014 ins Leben gerufen. Es ist eine Open-Source-Bibliothek und steht unter der MIT-Lizenz und basiert auf dem Model-View-ViewModel (MVVM) Muster und ist in der Lage, eine Anwendung in kleinere und wiederverwendbare Komponenten zu zerlegen.

Unter anderem ermöglicht Vue es, eine Anwendung in kleinere und wiederverwendbare Komponenten zu unterteilen (komponentenbasierte Architektur), die jeweils eine bestimmte Funktionalität bereitstellen. So ermöglicht Vue auch eine reaktive Datenbindung, welche Daten und UI-Elemente miteinander verknüpft, sodass Änderungen an den Daten automatisch auf die UI übertragen werden.

Vue kann auch über CDN oder den Node.js-basierten Paketmanager npm sowie Yarn installiert werden. Auch kann es mit anderen Bibliotheken und Frameworks wie Vuex, Vue Router und Vue CLI verwendet werden, um die Entwicklung von Anwendungen zu vereinfachen.

Wir haben uns dafür entschieden mit dem Framework Vue.js zu arbeiten, welches uns nicht nur erlaubt Erfahrung mit einem Framework zu sammeln, sondern auch eine Single-Page-Application aufzubauen, welche es ermöglicht Inhalte der Webseite schneller darzustellen und so für eine userfreundliche Umgebung zu sorgen.

PWA Einbindung

Die Einbindung von PWA in Vue.js ist relativ einfach, Vue.js bietet diesbezüglich sogar ein Command-line Interface (CLI), welches über den gewählten Package Manager eingebunden werden kann. Dieses automatisiert einige Vorgänge, wie das Speichern der Inhalte im Cache des Browsers. Dies bietet jedoch nicht den Grad der Einsicht in die Vorgänge, der uns gewünscht war und für spätere Entwickler:innen, die mit dem Konzept nicht vertraut sind, könnte dies zu einem erheblichen Zeitaufwand führen. Für unsere Anwendung entschieden wir uns deshalb für die manuelle Einbindung, welche eine bessere Übersicht der Vorgänge bietet.

Mensaplan Einbindung

Der Mensaplan für unsere Hochschule wird über die Webseite des Studierendenwerks Bremen (https://www.stw-bremen.de/de/mensa/bremerhaven) ausgestellt. Da ein direkter Zugang zu den Daten für uns nicht zu erhalten war, haben wir uns für das Scrappen der Informationen des Mensaplans entschieden.

Cheerio

Um die Informationen des Mensaplans von der Webseite zu scrappen haben, wir uns für Cheerio entschieden. Cheerio ist eine Bibliothek für JavaScript-Entwickler:innen, die es ermöglicht, HTML- oder XML-Code auf dem Server zu manipulieren, ohne einen Browser öffnen zu müssen. Das bedeutet, dass Entwickler:innen den DOM-Baum eines Dokuments analysieren und ändern können, um Daten zu extrahieren oder Webseiten zu erstellen, bevor sie sie an den Client senden.

Cheerio ist besonders nützlich für Web-Scraping und automatisierte Tests von Webanwendungen, da es Entwickler:innen eine einfache Möglichkeit bietet, den DOM-Baum einer Webseite zu untersuchen und Daten zu extrahieren. Es ist auch eine großartige Option für die Erstellung von serverseitig gerenderten Webanwendungen, da es Entwickler:innen ermöglicht, den DOM-Baum auf dem Server zu manipulieren, bevor eine Antwort an den Client gesendet wird.

Die Informationen der Webseite haben wir mithilfe von Axios abgerufen. Axios sendet HTTP-Anfragen an die angegebene URL und wartet auf die Antwort. Wenn die Antwort zurückgegeben wird, extrahiert Axios den HTML-Code aus der Antwort und gibt ihn als Antwort an die Benutzer:innen zurück.

Mithilfe von Cheerio haben wir dann die benötigten Informationen aus dem HTML-Code auf der Serverseite unserer Anwendung extrahiert und diese einzelnen Informations-Teile in ein geeignetes Format umgewandelt. Sobald die Informationen richtig geordnet waren, haben wir diese in einer JSON-Datei niedergeschrieben.

Diese JSON-Datei wird täglich über den Server aktualisiert und anschließend über eine RESTful-API zum Abruf bereitgestellt.

REStful-API - Node.js

Eine RESTful API ist eine Schnittstelle, die es anderen Anwendungen ermöglicht, auf eine Datenbank oder eine andere Datenquelle zuzugreifen und mit ihr zu interagieren. Node.js und JavaScript sind beide beliebte Technologien für die Erstellung von RESTful APIs, da sie schnell und einfach zu verwenden sind.

Technisch gesehen verwendet eine RESTful API HTTP-Anfragen, um Daten von der Datenquelle abzurufen oder zu ändern. Wenn eine Anwendung beispielsweise auf eine bestimmte Ressource zugreifen möchte, sendet sie eine HTTP-Anfrage an die API, die dann die entsprechenden Daten aus der Datenquelle abruft und als Antwort zurückgibt.

Wir haben die RESTful API in Node.js mit Hilfe des Frameworks Express erstellt. Express bietet eine einfache Möglichkeit, HTTP-Endpunkte für die API zu definieren, auf die andere Anwendungen zugreifen können. Entwickler:innen können dann Anfragen an diese Endpunkte definieren und entsprechende Antworten zurückgeben.

Nach dem Erhalt der JSON-Datei durch eine Anfrage an die RESTful API haben wir dann die JSON-Datei mit Hilfe von Javascript in Array-Objekte umgewandelt und dessen Informationen über Vue dargestellt.

Stundenplan Einbindung

Um die Daten von der Hochschule zu erhalten und um den Stundenplan von allen Studiengängen und Fachbereichen abzurufen, haben wir zwei Python-Anwendungen verwendet: eine Python-Anwendung, die die Modul-IDs liest und die Stundenpläne herunterlädt, und eine andere Python-Anwendung, die die heruntergeladenen Stundenpläne in das JSON-Format umwandelt.

Zuerst wird eine Datei gelesen, die alle Modul-IDs ausführt, für die der Stundenplan abgerufen werden soll. Dann werden diese IDs verwendet, um den Stundenplan von der Website der Hochschule Bremerhaven herunterzuladen. Das Python-Skript verwendet die Curl Bibliothek, um eine GET-Anfrage an die Website zu senden und den Stundenplan herunterzuladen. Der Stundenplan wird dann als ICS-Datei gespeichert, wobei der Dateiname der Modul-ID entspricht.

Danach wird die Python-Anwendung ausgeführt, um die heruntergeladenen ICS-Dateien in das JSON-Format umzuwandeln. Dies wird durchgeführt, um die Arbeit mit den Daten zu erleichtern und ein einheitliches Datenformat zu haben. Das Skript liest alle Dateien im vorher spezifizierten Verzeichnis aus und wandelt sie in ein geeignetes JSON Format um und speichert sie.

Das weitere Vorgehen ist ähnlich wie bei der Einbindung des Mensaplans. Wir haben die einzelnen JSON Dateien über eine weitere RESTful-API unserer Hochschulapp zum Abrufen bereitgestellt, welche nach deren Abruf über Vue in dem dafür von uns angefertigtem Design dargestellt werden.

Fazit und Ausblick

Im Rahmen des Bachelorprojekts konnten wir mit der Erstellung einer Hochschulapp als PWA viele unserer Ziele erreichen und verschiedene, bereits vorhandene Webseiten und Funktionen in einer Web App kombinieren. So war es uns möglich, eine Anbindung zum Studierendenwerk Bremen zu erstellen, sowie die Stundenpläne und einen Kalender mit einzubinden. Ebenso besteht die Möglichkeit eine ToDo-Liste erstellen zu können.

Leider konnten wir nicht alles umsetzen, so haben wir beispielsweise die Matrixnachrichten nicht mit in die Web App integriert. Diese liegen allerdings im JSON-Format auf unseren Server für den Import in die Web App vor. Auch eine Anpassung speziell für mobile Endgeräte haben wir noch nicht vorgenommen.

Die Organisation und Kommunikation im Team hat im Wesentlichen gut funktioniert. Natürlich wäre an der einen oder anderen Stelle etwas mehr Konsequenz nötig gewesen, gerade in der Kommunikation zwischen den einzelnen Teilgruppen, die sich im Laufe der Zeit gebildet haben. Dies gilt auch für die Planung im Allgemeinen. Während der beiden Semester haben wir immer wieder verschiedene Ansätze ausprobiert und diese wieder über den Haufen geworfen. Das war zwar hilfreich, um unterschiedliche Herangehensweisen auszuprobieren und hat uns diesbezüglich auch etwas genützt, allerdings haben wir so leider auch viel Zeit verloren, die wir gerade am Ende nötig gehabt hätten.

Natürlich bestehen auch einige Möglichkeiten, die Web App zu ergänzen. So wäre es zum Beispiel denkbar, den Stundenplan bei Änderungen live und automatisch zu aktualisieren oder weitere Info-Boxen sowie eine Anbindung zum Immatrikulations- und Prüfungsamt zu bieten.

Abschließend lässt sich festhalten, dass wir im vergangenen Jahr viel lernen konnten. Einerseits, was die Entwicklung einer Web App oder von Bots zum auslesen von Chaträumen angeht. Andererseits aber auch, dass eine gute Planung und Kommunikation ebenfalls wichtige Faktoren in einem umfangreichen Projekt sind.

Stundenplan in der Nextcloud

Nextcloud

Was ist Nextcloud?

Nextcloud ist eine Open-Source Cloud zum Speichern und Verteilen von Dateien, welche in Browsern und von vielen Betriebssystemen genutzt werden kann. Nextcloud kann mit entweder von der Community erstellen Apps oder auch selbst entwickelten Apps erweitert werden. Auch die Apps sind alle Open-Source.

Warum Nextcloud?

Nextcloud ermöglicht das leichte verteilen von Dateien und Dokumenten. Dies ist eine ernorme Erleichterung zum Beispiel im Online Unterricht. Aber auch im herkömmlichen Unterricht wird immer mehr im digitalen Raum gearbeitet.

Open-Source bietet mehr Kontrolle über die Software und Sicherheit, da jeder den Code überprüfen kann und Fehler dadurch schneller erkannt und behoben werden können.

Daher kam uns schnell die Idee die Nextcloud zu erweitern um für Schulen ein System zu bauen, welches es Schulen ermöglich, nur eine Nextcloud zu benötigen und nicht viele verschieden Teil-Systeme. Nachdem wir uns mit der Nextcloud befasst haben, stellten wir fest das es noch kein Stundenplan gibt. Daher wollten wir einen mit einer dazugehörigen Gruppenverwaltung entwickeln.

Verwendete Werkzeuge

Nextcloud

Ist ein selbst gehostete Plattform für Dateispeicherung. Auf dieser haben wir unsere Stundenplan-App entwickelt.

Vue.js

ist ein Javascript-Framework für die Entwicklung von Benutzeroberflächen. Dieses Framework haben wir für unser Frontend verwendet. Ebenfalls habe wir Nextcloud-Vue Komponenten mit eingebunden z.B. für unsere Buttons und Textboxen. Dadurch konnte sich die App vom Design sehr gut in die Nextcloud einfügen lassen.

FullCalendar

ist eine Open-Source-JavaScript-Bibliothek zur Erstellung interaktiver Kalender auf Webseiten. Dieser Kalender wurde gewählt um unseren Kalender darzustellen.

JSON

ist ein Dateiformat für den Datenaustausch. Dieses Werkzeug wurde verwendet, um die Daten für den Kalender zwischen Frontend und Backend auszutauschen.

CSV und iCAL

ist ebenfalls ein Dateiformat, für Tabellenkalkulationsdaten. Beide Dateiformate wurden für den Import von Nutzern und Terminen in die Stundenplan-App verwendet.

PHP

ist eine Skriptsprache und wird oft für die Entwicklung von Webanwendungen verwendet. Diese haben wir für die Entwicklung unseres Backends genutzt. Mit Hilfe von PHP wurde die Datenbankanbindung und die Serverlogik für die Stundenplan-App implementiert.

Projektmanagement

Arbeitsweise und Kommunikation

Während der Arbeit an unserem Projekt haben wir uns wöchentlich zusammengesetzt um Ergebnisse zusammen zu tragen, Probleme zu besprechen, Ansätze zu entwickeln und weitere Aufgaben zu verteilen. Zusätzlich gab es regelmäßige wöchentliche Termine an denen wir uns online trafen, um den aktuellen Stand zu besprechen und uns gegenseitig zu unterstützen.

Die verschieden Aufgaben, die sich während der Arbeit ergaben, haben wir dabei versucht regelmäßig schriftlich für uns festzuhalten. So konnte sich jeder in der Gruppe einen guten Überblick über den Teilfortschritt verschaffen und über Dinge die noch erledigt werden mussten.

Als Versionsverwaltung für unsere Dateien haben wir mit GitLab gearbeitet. Dadurch war es möglich, dass jedes Teammitglied frei am Code arbeiten konnte ohne die anderen zu beeinträchtigen. Die Teilprogramme wurden dann in regelmäßigen Abständen von uns allen überprüft, besprochen, verbessert und zusammengeführt.

Stundenplan und deren Funktionen

Der Stundenplan lässt sich grob in drei Teile aufteilen: Kalender, Terminimport und die Gruppenverwaltung. Außerdem war uns für die Schüler wichtig, dass der Kalender gut auf iPads genutzt werden kann.

Kalender

Im Kalender können die Termine auf übersichtliche Art und Weise dargestellt werden. Man kann oben auf der Seite eine Gruppe auswählen, für die man gerade die Termine sehen möchte. Außerdem besteht die Möglichkeit das Wochenende ein- und auszublenden, zur aktuellen Woche zu springen und einen neuen Termin anzulegen. Zusätzlich kann über die Pfeiltasten noch die Woche gewechselt werden.

Der Stundenplan unserer Nextcloud-App wurde im Frontend mithilfe von Fullcalendar realisiert. Die Daten werden mithilfe eines JSON-Feeds an den Kalender übermittelt. Wenn man auf die Pfeiltasten klickt, wird eine Anfrage an die hinterlegte URL („Link zur Nextcloud App/appointment/getByDate“) mit dem Start- und Enddatum gesendet. Der Endpunkt ist so aufgebaut, dass dann nur Daten in diesem Zeitraum zurückgeliefert werden. Außerdem wird die aktuell ausgewählte Gruppe mit übermittelt, damit nur Termine der richtigen Gruppe angezeigt werden können.

Im Backend wurde PHP verwendet. Dabei haben wir uns an die objektorientierte Struktur aus der Nextcloud-Dokumentation gehalten. Für die Kommunikation mit dem Frontend haben wir HTTP- Requests verwendet. Die Requests im Frontend wurden mithilfe von axios gesendet. Die URLs wurden in der Datei routes.php hinterlegt. Dort konnte man eine PHP-Methode angeben, welche beim Aufruf ausgeführt wird. Außerdem konnte die HTTP-Methode festgelegt werden.

Auf die Datenbank wurde lediglich über PHP zugegriffen. Für die Termine hatten wir beispielsweise die Entitäts-Klasse „Appointment“, welche einen Datenbankeintrag der Tabelle „oc_appointment“ abbildet. In dieser Tabelle liegen alle Termine des Stundenplans. Der Zugriff auf diese Daten erfolgte dann über einen Mapper. Dafür haben wir den QBMapper von Nextcloud erweitert. In diesem sind manche Datenbankoperationen bereits implementiert und konnten einfach von uns genutzt werden (z. B. update). Den Mapper haben wir dann noch um zusätzlich benötigte Funktionalitäten erweitert. Dafür haben wir zum Beispiel eine Methode geschrieben, welche alle Termine in einem bestimmten Zeitraum und einer bestimmten Gruppe zurückliefert. Diese benötigen wir für den JSON-Feed unseres Kalenders.

Wenn man einen Termin erstellen möchte, muss man oben auf den Knopf „Termin erstellen“ klicken. Dann öffnet sich ein Fenster, wo man in einem Formular alle Daten eingeben kann. Nachdem man das Formular abgeschickt hat, wird der Termin gespeichert und man kann den Termin im Kalender sehen, ohne dass man die Seite neu laden muss.

Termine importieren

Für unseren Stundenplan gibt es die Möglichkeit, Termine zu importieren. Dafür kann wahlweise eine CSV-Datei oder eine iCal Datei hochgeladen werden. Der Import läuft in der folgenden Reihenfolge ab:

Nachdem die Datei hochgeladen wurde, wird diese mit einem POST Request an unseren PHP-Endpunkt gesendet. Dort werden die Daten in der Datei ins JSON-Format umgewandelt. Das JSON-Objekt wird dann ans Frontend zurückgeliefert und in Form einer Tabelle dargestellt. An diesem Punkt kann man nun die Daten bearbeiten.

Nachdem man die Daten fertig bearbeitet hat, kann man mithilfe eines Buttons die Termine speichern. Beim Klicken des Buttons wird wieder ein POST-Request gesendet, mit dem JSON-Objekt als Parameter. Dort werden die Daten dann final in die Datenbank geschrieben.

Gruppenverwaltung

Die Gruppenverwaltung verfügt über 2 Funktionen. Einmal das Erstellen von Gruppen und das Hinzufügen einer Liste von Nutzenden.

Gruppen erstellen

Das Erstellen einer Gruppe sendet einen POST Request an den PHP-Endpunkt. Dieser ruft mit dem gesendeten Namen den Controller auf, welche die Anfrage an den Service der Gruppenverwaltung weiterleitet.

Hier arbeiten wir mit den Funktionen der Gruppenverwaltung von Nextcloud selber. Zuerst wird überprüft, ob die Gruppe schon existiert, wenn das nicht der Fall ist, wird die Gruppe erstellt. Anschließend wird der Admin hinzugefügt, da dieser Teil aller Gruppen sein soll. Dadurch wird sichergestellt, dass immer alle Gruppen bekannt sind.

Das Löschen von Gruppen haben wir nicht implementiert, da diese einfach über Nextcloud geht und es nicht mit zusätzlichen Funktionen versehen werden musste, um das Funktionieren des Systems zu gewährleisten.

Importieren von Usern in eine Gruppe

Das Hinzufügen der Nutzenden ist über eine CSV Datei möglich. Hierfür ist eine Spalte mit dem Namen „username“ nötig. Die Datei darf weitere Spalten enthalten, diese werden ignoriert.

Die Verarbeitung funktioniert ähnlich wie bei dem Import von Terminen. Ist die Datei hochgeladen, wird diese mit einem POST Request an unseren PHP-Endpunkt gesendet.

In diesem wird die CSV-Datei in einzelne Nutzende aufgelöst und sie werden nacheinander der zuvor gewählten Gruppe hinzugefügt, wenn sie nicht schon Teil der Gruppe waren.

Ist eine der beiden Aktionen erfolgreich ausgeführt, taucht ein grünes Feld auf, welches die ausgeführte Aktion bestätigt. Kommt es zu einem Fehler, wird dieser in einem roten Feld angezeigt. Dies wird über die Response des Request überprüft.

Ausblick

Während der Arbeit an unserer App, gab es noch weitere Ideen und Ansätze, wie der Stundenplan erweitert werden könnte. Eine Möglichkeit besteht darin, Termine über eine Auswahlschaltfläche zu blockieren, um verschiedene Ferienzeiträume im Stundenplan festzulegen. Es gibt auch Überlegungen, die Gruppenverwaltung zu erweitern, indem bestehende Klassen geändert werden können. Ein weiteres Feature betrifft die Möglichkeit, Ordner oder Dateien aus der Nextcloud als Lernmaterialien für Termine zuweisen zu können. Eine Funktion für Serientermine wurde bereits vorbereitet aber noch nicht beendet, die es ermöglicht, eine ganze Reihe von Terminen mit verschiedenen Intervallen zu erstellen.

Digitale Lernumgebung

Explorative Projektstruktur

In unserem Projekt DigiSchulLab ging es von Anfang an grundsätzlich um explorative Forschungen und eine eigene Gruppenstruktur für unser Projekt zu finden, um am Ende des Projekts ein zielgerechtes Gruppenergebnis aufweisen zu können. Wir haben länger gebraucht um uns strukturell und zielgerecht aufzustellen und haben es nach einer gewissen Eingewöhnungsphase geschafft, da auch die meisten von uns keine bis wenig Erfahrung mit explorativen Forschungen gehabt haben, die richtigen Tools, Technologien und Herangehensweisen für unser Projekt zu finden. Es war unsere Aufgabe ein eigenes exploratives Projektmodell zu erarbeiten.

Der Vorteil bestand darin die Möglichkeit zu haben sich frei entfalten zu können und wie die eben angesprochen neuen Tools und Technologien kennenlernen zu können oder auch mit Tools zu arbeiten, mit denen wir uns schon vertraut gemacht hatten, im Verlauf unseres Studiums, woraus sich ergeben hatte, in welche Richtung es geht. Wir hatten die Idee- und Technische Vorstellungen gegenüber der Realität gestellt, Abwägungen angestellt wie man eine Projektidee am besten verwirklichen kann und sind zur Entscheidung gekommen die Umsetzung in der Art und Weise anzugehen. Immer wieder sind wir auf Idee ansätze gestoßen, die in der Form nicht gepasst hatten bis wir uns langsam angenähert haben. Wir haben uns schlussendlich von der Projektgruppe letztes Jahr(3D-Ausstellungsumgebung, Workadventure) inspirieren lassen aber unser eigenes Projekt draus gemacht.

Wichtig war es auch die eigenen Ziele und Interessen zu verfolgen, die wir ins Projekt einbinden konnten. Das Ziel fürs Projekt war es eben während der Findungsphase alle Projektmitglieder zu versammeln, die sich auch wirklich dafür interessierten, um am Ende des Tages eine virtuelle 2D-Ausstellungsumgebung für den Tag der Informatik aufbauen und einsetzen zu können.

Fragestellung und Idee

Durch die Corona-Pandemie hat sich an Schulen sowie auch hier an der Hochschule vermehrt die Situation ergeben, dass anstelle von Präsenzvorlesungen Online-Vorlesungen gehalten worden und im schulischen Kontext Online-Unterricht stattgefunden haben. Dies bietet natürlich Vorteile, aber auch Nachteile. Zum Beispiel gibt es im schulischen Lernumfeld Probleme, mit denen wir uns befasst haben. Wenn man als Beispiel am Online-Unterricht teilnimmt, sind Schülerinnen und Schüler oft unkonzentriert.

Je nachdem, was für Unterricht gegeben wird, ist dieser dann nicht interessant genug für denjenigen. Man lässt sich leicht ablenken, da man am PC sitzt und auch das Handy in Reichweite hat. Das führt dann dazu, dass nicht viel Stoff aus dem Online-Unterricht mitgenommen wird.

Doch wie kann dieses Problem behoben werden? Wir haben uns gedacht, dass durch das Ansprechen mehrerer Sinne beim Lernen, wie zum Beispiel die Verbindung von auditiven und visuellen Kanälen, dazu beigetragen werden kann, dass der Lernstoff besser im Gehirn verankert wird. Ebenfalls sollte das Einbinden von Spaßfaktoren beim Lernen die Motivation für Schülerinnen und Schüler erhöhen, was dann anschließend dazu führt, dass der Unterrichtsstoff besser im Kopf bleibt.

Dies könnte schon erreicht werden durch die Verwendung von Audiodateien und Slideshows, wodurch SuS die Informationen gleichzeitig hören und sehen können. Aus diesen Gründen haben wir uns als Teilgruppe dazu entschieden, eine digitale Lernumgebung für den Online-Unterricht zu entwickeln.

Arbeits-Infrastruktur

Open Source

In unserem Projekt haben wir uns für opensource-basiertes-Werkzeug entschieden. Der Begriff „Open Source“ wurde 1998 von der Open Source Initiative (OSI) ins Leben gerufen. Er geht ursprünglich auf Open-Source-Software (OSS) zurück und steht für ein dezentrales, kollaboratives Arbeitsmodell: Da viele unabhängige Entwickler gemeinsam am Code arbeiten und ihn fortlaufend überprüfen werden Fehler sowie Sicherheitslücken häufig schnell gefunden und behoben. Zudem kann Code geteilt und erweitert werden. Für den Nutzer - Privatperson oder Firma - ist der große Vorteil, dass keine Lizenzen zu bezahlen sind.

Auf Entwicklerseiten gibt es eine Menge weiterer Vorteile. Dadurch, dass der Code von vielen unabhängigen Entwicklern gelesen wird, würde ein Missbrauch der Software sofort auffallen. Codestellen mit böswilligem Code würden schnell entdeckt werden, weshalb Open Source Software sehr sicher ist. Das wirkt sich insgesamt auch positiv auf Qualität, Stabilität und Sicherheit der Software aus.

GitLab

GitLab ist ein Open-Source-Code-Repository und eine kollaborative Softwareentwicklungsplattform für große DevOps- und DevSecOps-Projekte. GitLab ist auch für Einzelpersonen kostenlos und bietet einen Ort für die Online-Codespeicherung.

Das Repository ermöglicht es, verschiedene Entwicklungsketten und Versionen zu hosten, und erlaubt es den Benutzern, früheren Code einzusehen, zu dokumentieren, zu erweitern und bei unvorhergesehenen Problemen darauf zurückzugreifen, weshalb wir uns auch im Verlauf des Projekts schnell dafür entschieden haben, da es den meisten Studenten auch vorher schon bekannt war. Es war hilfreich, dass man verschiedene Branches erstellen konnten sodass jeder auf seinem Branch arbeiten konnte und sich auf seine Aufgabe konzentrieren konnte.

HedgeDoc

Mit HedgeDoc konnten wir kollaborative Markdown-Notizen in Echtzeit erstellen. Es ist inspiriert von Hackpad, Etherpad und ähnlichen kollaborativen Editoren. Dieses Projekt wurde ursprünglich vom HackMD-Team entwickelt und ist nun in eine eigene Organisation überführt worden. Er verwendet die Markdown-Sprache, die eine einfache Möglichkeit zur Formatierung von Text darstellt.

HedgeDoc bietet eine große Auswahl an Funktionen für alle gängigen Verwendungszwecke der Textverarbeitung: Verwaltung von Überschriften, Inhaltsverzeichnis, Einfügen von Bildern, Tabellen, Graphen und Diagrammen erstellen, Folien erstellen und präsentieren, Fußnoten, Einbetten von Videos, PDF-Betrachtern usw. Verschiedene Berechtigungsstufen ermöglichen es, festzulegen, wer das Dokument lesen oder bearbeiten darf.

Das haben wir im Laufe unseres Projektes entdeckt und auf die Hochschule Server gehostet. Wir haben das als kollaborativen Editor für unsere wöchentlichen Protokolle, Präsentationen, usw. benutzt.

Wekan

Wekan ist eine Open-Source-Software für das Aufgabenmanagement, die es Teams ermöglicht, Aufgaben und Projekte zu organisieren und zu verwalten. Wekan verfügt über eine intuitive Benutzeroberfläche, die es Benutzern erleichtert, Aufgaben zu erstellen, zuzuweisen und zu priorisieren.

Die Software unterstützt auch die Zuweisung von Aufgaben an bestimmte Benutzer, das Hinzufügen von Kommentaren und Anhängen, das Setzen von Fälligkeitsdaten und das Verfolgen von Fortschritten. Wekan bietet auch eine Kalenderansicht, mit der Benutzer ihre Aufgaben und Projekte im Kontext von anderen Ereignissen sehen und planen können.

Des Weiteren ist Wekan auch mit anderen Open-Source-Tools wie Nextcloud und GitLab kompatibel, um eine nahtlose Integration zu ermöglichen. Insgesamt bietet Wekan eine robuste und benutzerfreundliche Lösung für das Aufgabenmanagement, die von Unternehmen und Organisationen jeder Größe genutzt werden kann.

Meet-Jitsi

Jitsi-Meet ist eine Open-Source-Plattform für Webkonferenzen, die für Video- und Audiokonferenzen, Instant Messaging und Bildschirmfreigabe verwendet wird. Jitsi Meet ist eine großartige Lösung für alle, die einfach und schnell eine Videokonferenz veranstalten möchten, ohne sich mit der Installation oder komplizierten Einrichtung auseinandersetzen zu müssen.

Ein großer Vorteil von Jitsi ist, dass es geräteunabhängig ist und auf jedem Gerät verwendet werden kann. Jitsi Meet funktioniert direkt in Ihrem Webbrowser, sodass Sie keine App herunterladen müssen. Wer jedoch Apps bevorzugt, kann die Jitsi-App auf seinem Smartphone oder Tablet installieren. Eine der besten Funktionen von Jitsi Meet ist, dass keine Registrierung erforderlich ist.

Benutzer können einfach einen Videokonferenznamen auswählen und den Link teilen, um andere Teilnehmer einzuladen. Dies ist eine großartige Lösung für Benutzer, die einfach und schnell eine Videokonferenz veranstalten möchten, ohne sich Gedanken über die Installation oder komplizierte Einrichtung machen zu müssen. Auch in unserer Anwendung haben wir Jitsi genutzt, um Online-Unterricht durchzuführen. Wie bereits oben erwähnt, ist Jitsi einfach zu integrieren und erfordert keine Registrierung.

Element-Matrix

Matrix ist Open-Source-Software, veröffentlicht unter der Apache-Lizenz 2.0. Das bedeutet, dass jeder den Quellcode anzeigen, bearbeiten und verbessern kann. Die Veröffentlichung des Quellcodes trägt zur Verbesserung der Sicherheit und Integrität der Plattform bei.

Der Vorteil von Element ist die Möglichkeit, verschlüsselte Kommunikation zu nutzen. Matrix ist für die Echtzeitkommunikation zwischen Benutzern konzipiert. Es wurde entwickelt, um eine offene, dezentrale und sichere Kommunikation zu ermöglichen. Es gibt auch native Element-Apps für Android und iOS. Wir haben es während des gesamten Projekts häufig als Messaging-Dienst verwendet, um Besprechungen zu planen und Informationen über das Projekt auszutauschen.

Verwendete Technologien

Tomcat

Die Apache Tomcat-Software ist eine Open-Source-Implementierung der Spezifikationen Jakarta Servlet, Jakarta Server Pages, Jakarta Expression Language, Jakarta WebSocket, Jakarta Annotations und Jakarta Authentication. Diese Spezifikationen sind Teil der Jakarta EE-Plattform. Die Jakarta EE-Plattform ist die Weiterentwicklung der Java EE-Plattform.

Die Apache-Tomcat-Software wird in einer offenen und partizipativen Umgebung entwickelt und unter der Apache-Lizenz Version 2 veröffentlicht. Tomcat ist ausgereift und der am häufigsten verwendeten Java-Anwendungsserver. Er kann als eigenständiger Server ausgeführt werden. Die Apache Tomcat-Software ist die Grundlage für zahlreiche große, unternehmenskritische Webanwendungen in den unterschiedlichsten Branchen und Organisationen.

Docker Compose

Docker Compose ist ein Tool für die Verwaltung von Docker-Containern und -Diensten. Es ermöglicht Entwicklern und IT-Teams, Containeranwendungen zu definieren und zu orchestrieren, die aus mehreren Containern bestehen können. Mit Docker Compose können Anwender die Konfiguration von Containern in einer YAML-Datei definieren, die dann von Docker Compose interpretiert wird.

Eine typische Docker-Compose-Datei definiert eine Gruppe von Containern, die eine Anwendung bilden. Es können beispielsweise ein Webserver-Container, ein Datenbank-Container und ein Anwendungscontainer definiert werden. Docker Compose kümmert sich dann um das Starten und Stoppen dieser Container als eine Einheit, sodass die Anwendung als Ganzes ausgeführt werden kann. Außerdem vereinfacht Docker Compose auch die Verwaltung von Konfigurationsdaten für Container.

Zum Beispiel können Umgebungsvariablen, Volumes und Netzwerke für die Container in der Compose-Datei definiert werden. Diese können dann in den Container-Definitionen referenziert werden, sodass der Container auf diese Daten zugreifen kann.

Darüber hinaus ermöglicht Docker Compose auch das Skalieren von Containern, so dass mehrere Instanzen desselben Containers ausgeführt werden können. Es können auch Netzwerke zwischen Containern eingerichtet werden, sodass sie miteinander kommunizieren können.

WebSockets

Bei einem WebSocket, handelt es sich um eine Technologie, die es ermöglicht eine bidirektionale Verbindung in Echtzeit zwischen einem Client und einem Server aufzubauen. Hier wird im Gegensatz zur HTTP Anfrage, die Verbindung dauerhaft gehalten, ohne das der Client auf die Antwort des Servers wartet. Dadurch ist es möglich Daten in Echtzeit zu übertragen, ohne dass der Client ständig Anfragen an den Server senden muss.

Die Verbindungen eines WebSockets werden durch einen speziellen WebSocket-Protokoll-Handshake aufgebaut. Dieser läuft in der Regel über den Standard HTTP Port 80oder den sichern HTTPS Port 443. Nach diesem Handshake wird die Verbindung aufgebaut, die es dem Client und dem Server ermöglicht, Daten in beide Richtungen zu senden, ohne dass zusätzliche Anfragen oder Antworten erforderlich sind.

Der Nutzen dieser Art von Technologie findet sich oft in Echtzeitanwendungen wieder. Hierzu gehören zum Beispiel Online-Spiele, Chat Anwendungen und Echtzeit Kollaboration Tools. Denn diese Art von Anwendungen erfordern eine reaktionsschnelle und effiziente Kommunikation zwischen dem Client und dem Server. Abschließend ist zu erwähnen, dass die WebSocket Verbindung auch effektiver als die herkömmliche Polling Technik ist, da sie den Datenverkehr, sowie die Serverbelastung reduzieren kann.

MariaDB

MariaDB ist ein relationales Datenbank-Management-System, das eine Alternative zu MySQL darstellt. Es ist ein Fork von MySQL und bietet viele der gleichen Funktionen und Eigenschaften sowie einige zusätzliche Funktionen und Verbesserungen. MariaDB ist Open-Source-Software, die von der Community entwickelt wurde.

Es ist eine schnelle und robuste Datenbank, die eine hohe Verfügbarkeit und Skalierbarkeit bietet und in einer Vielzahl von Anwendungsfällen eingesetzt werden kann. MariaDB unterstützt alle gängigen Programmiersprachen und bietet zahlreiche Funktionen. MariaDB wird für Webanwendungen, E-Commerce-Websites, Cloud-Computing, Content-Management-Systeme und andere Anwendungen eingesetzt, die eine zuverlässige und skalierbare Datenbank benötigen. Durch seine Open-Source-Natur und zahlreichen Funktionen hat sich MariaDB zu einer der beliebtesten Datenbanken entwickelt und wird von vielen Unternehmen und Organisationen weltweit verwendet.

phpMyAdmin

phpMyAdmin ist eine kostenfreie Webanwendung, die in PHP geschrieben ist und als Administrationswerkzeug für MySQL-Datenbanken dient. Mit diesem Tool kann man MySQL-Datenbanken über einen Webbrowser verwalten und bearbeiten, ohne dass man dafür Kenntnisse in SQL oder anderen Programmiersprachen haben muss. phpMyAdmin bietet eine Benutzeroberfläche, die es ermöglicht, Datenbanken, Tabellen, Spalten, Indizes und andere MySQL-Objekte zu erstellen, zu löschen oder zu bearbeiten.

Es ist ebenfalls möglich, SQL-Abfragen auszuführen, Benutzerkonten zu verwalten, Datenbank-Backups zu erstellen und diese wiederherzustellen sowie die Server- und Datenbankeinstellungen zu ändern. Insgesamt erleichtert phpMyAdmin die Arbeit mit MySQL-Datenbanken, indem es eine benutzerfreundliche Oberfläche zur Verfügung stellt, die das Management von Datenbanken erleichtert und Zeit spart.

Bash

Ein Bash-Shell-Skript ist eine Abfolge von Befehlen und Anweisungen, die in der Shell-Programmiersprache Bash geschrieben sind und von einem Benutzer oder einem System ausgeführt werden können. Es automatisiert komplexe Aufgaben und erleichtert die Verwaltung von Systemen und Anwendungen. Bash-Skripte sind plattformübergreifend und können auf verschiedenen Betriebssystemen und Systemarchitekturen ausgeführt werden.

build.sh

Kompiliert eine Webanwendung und packt in eine WAR-Datei. Zunächst werden einige Verzeichnisse und Pfade erstellt und das CLASSPATH exportiert. Dann werden alle Java-Dateien im Verzeichnis "src" kompiliert und in das Verzeichnis "build/WEB-INF/classes" kopiert. Schließlich wird eine WAR-Datei im Verzeichnis "target" erstellt und das Skript gibt eine Erfolgsmeldung aus, wenn alles funktioniert hat. Wenn jedoch ein Fehler auftritt, wird das Skript mit einem Fehlercode beendet.

check.sh

Verwendet das Programm "curl", um eine HTTP-Anfrage an eine bestimmte URL zu senden, die aus dem lokalen Host, dem Namen einer Webanwendung und einem Manager besteht. Die Antwort auf die Anfrage wird auf der Konsole ausgegeben.

deploy.sh

Dieses Skript ist nützlich, um schnell und einfach eine Webanwendung auf einem lokalen Tomcat-Server zu deployen, ohne dass dazu eine manuelle Konfiguration erforderlich ist. Sendet WAR-Datei an einen Webanwendungsserver, um eine Anwendung zu deployen

undeploy.sh

Sendet eine HTTP-Anfrage an einen Server, um eine Anwendung zu undeployen.

clean.sh

Löscht einige Dateien und Verzeichnisse im aktuellen Arbeitsverzeichnis. Dabei wird "rm" verwendet, um rekursiv alle Dateien und Unterverzeichnisse im "build"-Verzeichnis zu löschen, sowie alle Dateien mit den Suffixen "war" und "jar" im aktuellen Verzeichnis und im "target"-Verzeichnis.

list.sh

Erstellt zwei Variablen mit den Benutzernamen und Suffixen. Dann wird mit "curl" eine Ressource von einer bestimmten URL abgerufen. Die Anmeldeinformationen des Benutzers werden in einer Datei gespeichert, die durch die Option "--netrc-file" angegeben wird. Der Inhalt der Ressource, die von der URL abgerufen wird, wird als Text ausgegeben.

build-deploy-check.sh

Wird verwendet, um eine Anwendung zu bauen, zu deployen und zu überprüfen. Viel praktischer als jedes Bash-Skript einzeln auszuführen. Ruft drei andere Skripte auf: build.sh, deploy.sh, check.sh.

docker-build-deploy.sh

Dient dazu, eine Anwendung in einem Docker-Container zu deployen. Ruft ein anderes Skript namens "build.sh" auf. Wenn das "build.sh"-Skript erfolgreich ausgeführt wird, wird eine .war-Datei in das Docker-Image kopiert und eine Erfolgsmeldung ausgegeben. Anschließend wird das Skript mit dem Fehlercode 1 beendet. Wenn das "build.sh"-Skript jedoch fehlschlägt, wird das Skript mit dem Fehlercode 0 beendet.

Tiled

Tiled ist ein Open-Source-Programm, das zur Erstellung von 2D-Karten (Maps) für Computerspiele und andere Anwendungen verwendet wird. Es ermöglicht die einfache Erstellung von Karten durch die Verwendung von Tilesets, die aus einer Sammlung von Grafiken bestehen, die erstmals als Gitter unterteilt werden und später einzeln oder als Ganzes platziert werden können.

Um eine Karte mit Tiled zu erstellen, muss man zuerst ein Tileset auswählen oder erstellen, welches die Grafiken enthält, die man für die Karte benötigt. Anschließend kann man die Kacheln aus dem Tileset auf der Karte platzieren und die verschiedenen Eigenschaften, wie z.B. Kollisionsbereiche Ebenen und Objekte einstellen.

Im Rahmen des Projekts haben wir Tiled genutzt, um eine digitale Karte der Hochschule Bremerhaven zu erstellen. Wir haben verschiedene Tilesets aus dem Internet benutzt, die verschiedene Grafiken wie z.B. Gebäude, Wege und Grünflächen enthalten. Dann haben wir durch Platzieren der Kacheln und Anordnung dieser in verschiedenen Layern ein räumliches Bild geschaffen.

Die fertige Karte dient nun als digitale Lernplattform für die Studenten der Hochschule Bremerhaven, um sich über den Campus zu orientieren und nützliche Informationen zu erhalten.

Die Anwendung

Die Hochschul-Map

Um unser Projekt zu visualisieren, haben wir uns dazu entschlossen den kompletten Außenbereich der Hochschule, sowie verschiedene Teile vom Innenbereich auf einer Map darzustellen. Diese Map haben wir mit dem Programm "Tiled" erstellt.

Beim Erstellen der Map war uns besonders wichtig das Gelände der Hochschule, die einzelnen Gebäude und die Innenräume so realitätsnah wie möglich zu visualisieren. Dies war aufgrund vieler kleiner Details sehr zeitaufwändig, aber mit Tiled gut zu realisieren. Zusätzlich hat und das Programm "Gimp", welches zur Bildbearbeitung dient, erlaubt einzelne "tiles" zu bearbeiten und zuzuschneiden.

Die Map soll dazu dienen, sich mit seinem eigenen Player visuell auf dem Hochschulgelände zu bewegen. Die verschiedenen Innenbereiche können vom Außenbereich aus betreten werden und öffnen sich, sobald der Player den Eingang des jeweiligen Bereichs betritt. Au§erdem haben wir um alle Bereiche, die mit dem Player nicht betreten werden sollen, eine Kollision gelegt, um zu vermeiden, dass man beispielsweise über Gebäude, Tische oder andere Gegenstände hinweglaufen kann.

Spieler-Animation

Die Spieler-animation ist ein wichtiger Bestandteil jedes Spiels, da sie dazu beiträgt, die Bewegungen der Spielcharaktere realistischer und ansprechender zu gestalten. Für unser Projekt haben wir die Spielfigur aus einem der verwendeten Tilesets verwendet. Die Spielercharaktere werden normalerweise Sprites genannt.

Um eine flüssige und realistische Animation zu erreichen, wurden verschiedene Bilder zur Verfügung gestellt, die eine Abfolge von Bewegungen zeigen, die zusammen die Bewegung des Spielers ergeben. Diese Bilder werden nacheinander angezeigt, um den Eindruck von Bewegung zu erzeugen.

Um die Animation abzuspielen, haben wir ein Skript geschrieben, welches die Bilder wechselt, während der Spieler einen der Bewegungsknöpfe drückt. Das Skript überwacht die Bewegungen des Spielers und wechselt die Bilder entsprechend aus. Wenn der Spieler stillsteht und keine Bewegungen ausführt, wird die Idle-animation angezeigt, die eine Atmung der Spielerfigur animiert.

Interpolation für ein flüssigeres Erlebnis

Server-Ticks sind ein Zeitmaß für das Zeitintervall, in dem der Server aktualisiert wird. Während eines Server-Ticks führt der Server alle erforderlichen Berechnungen durch, um beispielsweise alle Position der Spieler zu aktualisieren.

Eine höhere Server-Tickrate bedeutet in der Regel ein flüssigeres Spielerlebnis, da der Spiel-Zustand häufiger aktualisiert wird. Allerdings erhöht eine höhere Server-Tickrate auch die Belastung des Servers, um alle erforderlichen Berechnungen durchzuführen. Bei unserer Architektur wurde auch durch viele Spieler kombiniert mit einer hohen Server-Tickrate eine besonders hohe Netzwerkbelastung verursacht.

Um die Belastung zu minimieren und ein flüssiges Erlebnis zu bieten, nutzen wir Interpolation und eine niedrige Server-Tickrate.

Die Interpolation nutzt die zuletzt empfangenen Daten der Spieler und schätzt ihre Position basierend auf der aktuellen Geschwindigkeit und Richtung des Spielers. Dies ermöglicht den Spielern, sich zwischen den Server-Ticks auf dem Bildschirm zu bewegen. Interpolation kann auch dazu beitragen, Ruckeln und Verzögerungen zu minimieren, die auftreten können, wenn ein Spieler aufgrund von Netzwerkverzögerungen plötzlich von einer Position zur nächsten springt.

In der Darstellung steht “0” für den ersten Tick und “1” für den zweiten. Zu jeder Zahl gehört die darunter dargestellte Spielerposition und Animation. Die roten Zahlen passieren zwischen den Server-Ticks und belasten damit weder Server noch Netzwerk.

Nextcloud-Einbindung

Die Einbindung von Nextcloud war in der Hinsicht sinnvoll, da wir somit einen Speicherort für Dateien hatten. Denn Nextcloud ist eine freie Software für das Speichern von Daten und kann in die Server-Infrastruktur der Hochschulen und Schulen integriert werden.

Dabei haben wir uns die Funktion der Nextcloud, Ordner zu teilen, zunutze gemacht. Es ist möglich, als eingeloggter User Dateien in einen erzeugten Ordner hochzuladen. Dieser kann dann über einen Link mit eingeschränkter Berechtigung geteilt werden. Wird dieses Verzeichnis dann über den Link geöffnet, können die darin enthaltenen Dateien sowohl von eingeloggten als auch nicht-eingeloggten Usern angesehen und heruntergeladen werden, jedoch nicht bearbeitet oder gelöscht werden und auch keine neuen Dateien hochgeladen werden. Dies ist eingebaut in die digitale Lernumgebung sinnvoll, da es den Lehrenden ermöglicht, Dateien ganz einfach an die Schüler:innen und Studierenden bereitzustellen.

In unserer digitalen Lernumgebung haben wir so z.B. an auf der Map eingezeichneten Rechnern ein Event getriggert, wodurch sich der in ein iFrame eingebettete Link in einer geteilten Ansicht öffnete. Die geteilte Ansicht wurde so implementiert, dass sie als Sidebar fungiert. Mit einem Drag-and-Drop konnte die Ordner-Ansicht vergrößert werden, wodurch die Map auf der rechten Seite sich verkleinert.

Jitsi-Einbindung

In unserem Projekt haben wir Jitsi-Räume eingebunden, indem wir die Jitsi Meet API verwendet haben. Hierzu muss die API zunächst in den HTML-Header eingebunden werden. Anschließend wird eine Instanz der Klasse "JitsiMeetExternalAPI" erstellt, indem die API-Funktion in einer Variable gespeichert wird und die Parameter "domain" und "options" übergeben werden. In der "domain"-Variable wird die URL unseres Jitsi-Servers als String gespeichert, während die Einstellungen wie z.B. der “roomName” oder “userInfo” im "options"-Objekt abgelegt werden.

Sobald die API-Instanz erstellt ist, kann ein Benutzer mit der "join()" Methode einem Raum beitreten und mit der "dispose()" Methode den Raum wieder verlassen. Diese Methoden werden bei entsprechenden WebSocket-Nachrichten aufgerufen.

WebSocket-Protokoll und Server-Architektur

Die Kommunikation zwischen dem Client und dem Server erfolgt über eine WebSocket-Verbindung. Dabei sendet der Server Nachrichten in Form von JSON-Strings in Echtzeit an den Client. Der Client liest diese Nachrichten und reagiert darauf mit einer entsprechenden if-else Struktur. Wenn die empfangene Nachricht beispielsweise den Inhalt "closeEvent" aufweist, wird eine entsprechende Funktion aufgerufen, die Jitsi-Räume schließt. Der Client kann auch über Server-Endpunkte Funktionen des Servers aufrufen, solange die WebSocket-Verbindung besteht. Der Server besitzt mehrere dieser Endpoints, beispielsweise auch für die Bewegung des Spielers.

Login

Der Login wurde in der Sprache Java entwickelt und nutzt eine MariaDB-Datenbankverbindung. Die Tabelle, in der die Nutzer gespeichert werden, besteht aus ID, Name und Passwort. Das Passwort wird in SHA-256 verschlüsselt, die ID automatisch beim Erstellen eines neuen Nutzers vergeben und der Name kann vom Ersteller frei gewählt werden. Um sich einzuloggen, gibt man Name und Passwort in die entsprechenden Felder ein und drückt auf Verbinden. Nun werden Name und Passwort an den Serverendpunkt gesendet und der Login-Prozess beginnt.

Während des Login-Prozesses wird zunächst einmal überprüft, ob es den Benutzer überhaupt gibt. Dafür wird geschaut, ob es einen Benutzer mit diesem Benutzernamen überhaupt gibt und, wenn ja, ob das Passwort richtig ist. Ist dies der Fall, wird eine neue Session erstellt. Als letztes wird überprüft, ob der Nutzer bereits eingeloggt ist. Sollte dies der Fall sein, wird die Session direkt wieder beendet. Andernfalls wird man eingeloggt und findet sich in der 2D-Umgebung wieder.

Rechts sind drei Knöpfe in einer Leiste zu erkennen. Beim Anklicken eines dieser Knöpfe öffnet sich ein kleines Fenster von rechts, in dem sich der Chat befindet. Ebenfalls befinden sich dort der Log-Out-Button und ein Button, um das Fenster wieder zu schließen.

Es ist auch möglich, auf "Nutzer Erstellen" zu klicken, auf der Login-Seite. Dies leitet einen auf die Registrierungsseite weiter.

Nach dem Registrieren wird man auf die Login-Seite zurückgeleitet.

Abschließendes zum Projekt

Fazit

Das Projekt zur Erstellung einer Zwei dimensionalen Lernumgebung war eine angehnehme neue Lernerfahrung. Die Gruppe konnte hier das gelernte aus anderen Modulen Praxis orientiert anwenden. Aber es ist auch zu sagen, dass sich alle Mitglieder auch mit neuen Dingen ( z.B. Planung eines größeren Projektes in mehreren Schritten, Arbeit in einem großen Team und Javascript) auseinandersetzen mussten und somit auch neue Dinge dazugelernt haben. Es war gut zu erkennen, wo jeder einzelne seine Stärken und seine Schwächen hatte. Durch diese homogene Mischung konnte sich das Team hervorragend ausgleichen. Dadurch hatte jeder einen Lerneffekt und konnte sich durch die Hilfe der anderen neue Dinge beibringen. Es war auch eine gute Erfahrung zu sehen, wie so ein großes Projekt Gestalt annehmen kann. Im Einzelnen hat jeder in der Gruppe ein gutes Bild davon bekommen, was alles dazu gehört und wie der Weg aussieht bis ein fertiges Produkt auf dem Tisch liegt.

Wir entwickelten die Planung des Projektes: Angefangen damit, was gemacht werden soll, bis hin zur Umsetzung der Idee und die Auswahl der benötigten Werkzeuge. Dazu kam es, dass wir gelernt haben auch mit Rückschlägen umzugehen. Wenn eine Sache nicht geklappt hat, ist das Team dann einen oder mehrere Schritte zurückgegangen und hat das Ganze noch einmal aus einem anderen Blickwinkel betrachtet, um für das entstandene Problem eine Lösung zu finden. Auch in Sachen Kommunikation im Team konnten wir alle was dazu lernen. Es war etwas schwer zu Beginn des Projektes alles zu koordinieren. Aber nach einer Weile hat das Team Strategien entwickelt, um sich effektiv auszutauschen.

Am Ende waren alle Stolz auf die fertige 2D Lernumgebung. Es hat jedem im Team Spaß gemacht sich mit dem Thema auseinander zu setzen und die dazugehörigen Methoden zu lernen und anzuwenden. Es gibt im Nachhinein Dinge, die anders hätten gemacht werden können. Dazu gehört z.B. die Arbeitsaufteilung im Team, die am Anfang klar eingeteilt und kommuniziert werden sollte. Aber das gehört zum Lernprozess dazu, aus solchen Dingen zu lernen, um es später in noch größeren Teams besser zu machen. Wir alle werden uns diese Dinge für die Zukunft mitnehmen und hoffen, dass die nächsten Projekte genauso erfolgreich sind. Es war eine gute Erfahrung unsere kleine Idee über das Jahr wachsen zu sehen. Wir freuten uns am Tag der Informatik über die positive Resonanz am Stand und sind stolz auf das, was wir als Team geschaffen haben.

Abschließend bedanken wir uns für das Jahr bei allen aus dem Team, an die anderen Teams im Projekt und an unsere Dozentin Karin für die schöne Zeit und Erfahrung.

Ausblick

Für die Zukunft könnte das Projekt um noch einige Weitere hilfreiche Funktionen erweitert werden. Hier möchten wir euch einen möglichen Ausblick über die Möglichkeiten geben. Eigener Map Editor: Um sich von Tiled zu trennen und nicht auf ein weiteres Tool angewiesen zu sein, wäre es in Zukunft hervorragend eine eigenes Map Design Tool zu haben, welches sich in einem Admin Bereich befindet. So könnte der Admin der Lernumgebung jederzeit auf Wunsch neue Maps direkt erstellen, oder alte vorhandene Bearbeiten.

Verbesserter Chat: Bislang ist es möglich mit dem Chat nur Global zu interagieren, was bedeutet jeder User der Online ist sieht die Nachrichten der anderen. In Zukunft wäre es jedoch besser, wenn der Chat mehrere Räume besitzt. So könnte es neben dem globalen Raum auch Chat Räume, für die unterschiedlichen Lernräume geben, oder für die verschiedenen Kurse/Klassen. Außerdem sollte es in Zukunft auch möglich seine privaten Nachrichten an Personen zu senden.

Verbesserung des Hardware-Supports: Eine weitere zukünftige Verbesserung wäre, das Projekt besser an die unterschiedlichen Endnutzer Geräte anzupassen. Dadurch würde es besser auf Tablets und Smartphones laufen. Hierzu müsste auch der derzeitige Touchcontroller überarbeitet werden, damit dieser präziser wird.

Im Großen und Ganzen hat dieses Projekt noch eine große Fülle an Möglichkeiten es weiterzuentwickeln. Vielleicht greift irgendwann ein neuer Projektkurs dieses Projekt noch einmal auf und entwickelt es weiter.