Prototyping Applikation

Die Prototyping Applikation umfasst die Plattform für den Endnutzer. Hier kann der Nutzer die Core Funktionen des Digital Prototyping nutzen.

Funktionen:

Raum Erstellen

Der Nutzer kann einen Raum erstellen, worin er an Prototypen arbeiten kann. Dazu wird ein Name und eine Raumnummer benötigt. Die Raumnummer wird von der Applikation zufällig generiert. Dies wurde, wo entschieden, da die Raumnummer einzigartig sein muss. Wenn der Nutzer die Möglichkeit hat eine bereits vorhandene Raumnummer auszuwählen, was zu möglichen Problemen führen kann.

Raum Beitreten

Der Nutzer kann eine bereits laufende Sitzung beitreten, indem die Raumnummer der Sitzung und ein Name eingegeben wird. Wird eine Raumnummer angegeben, die einer laufenden Sitzung gehört, wird der Nutzer der Sitzung hinzugefügt. Zudem bekommt der Nutzer alle bisher passierten Ereignisse nachträglich mit, damit diese/r den jetzigen Zustand der Sitzung hat. Wird eine nicht zulässige Raumnummer angegeben oder eine Nummer, die keiner laufenden Sitzung gehört, wird ein Fehler zurückgegeben.

Drag-and-drop von Plättchen

Befindet sich ein Nutzer in einem Raum, so hat er/sie Zugriff auf das Plättchen in der Applikation. Diese könne in Hauptfeld gezogen und platziert werden. Diese Aktionen werden an alle anderen Nutzern im Raum widergespiegelt. Die Position des platzierten Plättchen kann geändert werden, in dem man das Plättchen in eine andere Position zieht.

Löschen von Plättchen

Wenn der Nutzer ein Plättchen nicht mehr im Feld haben möchte, kann diese/r den über Rechtsklick löschen. Alle anderen Nutzer in der Sitzung sehen ebenfalls dass dieser gelöscht wurde.

Die Hauptapplikation wurde auf die wesentlichen Funktionen beschränkt, damit der Nutzer vollsten auf das Erstellen von prototypischen Vorgängen.

Technische Umsetzung:

Die Hauptapplikation wurde mit den folgenden Technologien umgesetzt.

• ReactJS
• React-Konva
• SocketIO Client
• Zustand
• TailwindCSS

Canvas und React-Konva:

Canvas ist ein HTML Standard zur Darstellung von Grafiken und Animationen in HTML. Im Web wird Canvas ebenfalls zur Erstellung von Spiele im Web genutzt. Es ist also davon auszugehen, dass Canvas in der Lage ist das ziehen und bewegen von Plättchen darzustellen.

Eine große Inspiration beim Design der App war „Miro“, eine ebenfalls Canvas basierte Applikation.

React unterstützt zwar Canvas in nativer Form, jedoch bietet die native Implementierung keine Standardfunktionen, die beim Arbeiten mit Canvas notwendig sind. Beispiele für solch einer Funktion ist das Erstellen von Grundlegenden Formen oder das Standardverhalten von der Drag Funktion. Diese Funktionen müssen selbst implementiert werden.

Es gibt jedoch Bibliotheken, die diese Funktionen bereits mitbringen.

p5.js

P5.JS ist die beliebteste Bibliothek zur Entwicklung von Grafiken und insbesondere Animationen mit Canvas. Die Bibliothek bietet eine Umgebung an, die für das Erstellen von animierten Grafiken geschaffen wurde. Jedoch müssen hier auch viele Standardfunktionen selbst geschrieben werden, dass p5 viel Wert darauf legt den Entwickler nicht einzuschränken.

Da p5.JS von über 10.000 Entwickler aktiv genutzt wird, gibt es bereits fertige Lösungen für die Standardfunktionen.

Das Zusammenspiel zwischen p5 und React stellt jedoch ein Problem dar, da React ein bestimmtes Entwicklungsprinzip (React Komponenten) folgt, die mit dem Prinzip von p5 nicht vereinbar ist. Es wurde bereits von anderen Entwicklern versucht eine Version von p5.JS für React zu schreiben, diese ist jedoch nicht besonders performant und eignet sich daher nur für kleine Skizzen.

React-Konva

Konva ist eine Canvas Bibliothek, die für die Entwicklung von kompletten Canvas basierten Applikationen entwickelt wurde. Es bietet sowohl Standard Implementation von benötigten Funktionen, aber auch erweiterte Funktionen zur Optimierung der Applikation. Außerdem bietet Konva eine Version der Bibliothek die für React abgestimmt ist. Somit ist die Einbindung von Konva problemlos. Der Erfinder von Konva ist besonders hilfreich und bietet Hilfe in gängigen Foren. Dazu ist die Dokumentation sehr detailliert und mit vielen Beispielen versehen was die Entwicklung sehr erleichtert. Besonders wichtig war, dass Konva aktive genutzt. Dies war ebenfalls gegeben also, bietet sich React-Konva als die beste Option für das Projekt an.

SocketIO Client

Da eins der Ziele des Projekts ist, eine kollaborative Plattform zu entwickeln worin mehrere Nutzer an einer Sitzung teilnehmen können und alle Aktionen in der Sitzung live verfügbar sein sollen, muss es einen Weg geben, Ereignisse mit anderen Nutzern zu teilen. Hierzu bieten sich Websockets an. Ein Websocket ist eine dauerhafte Verbindung mit einem Server, die es ermöglicht Daten zu Echtzeit mit dem Server auszutauschen. In diesem Projekt werden Websockets genutzt, um Ergebnisse von

Anderen Nutzern zu bekommen und in der Applikation widerzuspiegeln. Wie das funktioniert, wird im Backend Abschnitt der Dokumentation erklärt.

SocketIO ist eine Websocket Bibliothek, die die Verwendung von Websockets sowohl im Backend als auch im Frontend vereinfacht. SocketIO ist ebenfalls das beliebteste Websocket Bibliothek und bindet sich sehr einfach ins React Code ein. Durch die weit verbreitete Verwendung gibt es zahlreiche Hilfestellungen die das Entwickeln erleichtern. SocketIO Client wird im Frontend genutzt, um Daten und Ereignisse an den Server zu schicken.

Zustand

Die Frontendapplikation ist durch seine Natur sehr Daten lastig. Es muss zu jedem Zeitpunkt klar sein, welche Plättchen sich momentan im Feld befinden, wo ihre Positionen genau sind, wer sie bewegt und in welchem Zustand sie sich befinden (gezogen oder statisch). Außerdem werden die Daten an verschiedenen Orten erzeugt und wieder an verschiedenen Stellen im Code gebraucht. Aus diesen Gegebenheiten ist es erforderlich, dass die Daten zentral gespeichert werden. React bietet zwar eine Lösung dafür namens Context API, jedoch ist diese in der Verwendung äußert umständlich. Beliebte Lösungen wie Redux hätten super funktioniert, jedoch ist Redux für die große der Applikation zu groß und bietet Funktionen, die nicht genutzt werden würden. Um die Menge an JavaScript Dateien im Projekt zu minimieren und die Komplexität niedrig zu halten wurde Zustand gewählt.

Zustand ist ein kleines State Management Paket, dass das gleiche Problem von Context API und Redux löst aber mit weniger Code. In Zustand werden Daten an einer zentralen Funktion gespeichert. Über Variablen und Funktionen, die vom Entwickler definiert werden, können diese Daten entweder gelesen oder verändert werden. Diese Variablen und Funktionen können dann überall importiert und aufgerufen werden.

TailwindCSS

Tailwind bietet ein klassennamen basiertes Styling System, die direkt in React Elemente eingebunden werden kann. Die regulären CSS Klassen werden mit Tailwind Klassen nachgestellt. Sollte man aber auf CSS Klassen zugreifen wollen, die nicht von Tailwind abgebildet werden, ist dies immer noch möglich. Außerdem. Können die Tailwind Klassen überschrieben werden, jedoch ist das nicht empfehlenswert da der Sinn von Tailwind negiert wird. Tailwind übernimmt ebenfalls das Responsive Design einer Seite, was dabei hilft keine Media Queries schreiben zu müssen. Insgesamt hilft Tailwind dabei schneller Seiten zu gestalten und reduziert die Anzahl an benötigten CSS Dateien, da Klassen direkt in den React Elementen zu schreiben.