Implementierung

Ich habe die Implementierung von meiner Application mithilfe von Angular im Frontend, Spring Boot im Backend und MongoDB als Datenbank realisiert. Ich kannte die Technologien bereits im Vorfeld. Dadurch konnte ich sofort mit der Implementierung beginnen und musste mich nicht zuerst in die Technologie einlesen.
In der Implementierung habe ich mich primär auf das Frontend also die Implementierung mit Angular fokussiert. Dadurch kann es sehr gut sein, dass im Backend gewisse Sachen wie Validation nicht einwandfrei funktionieren. Allerdings lag es auch nicht im Scop vom Modul eine einwandfreie API zu implementieren.
Allerdings habe ich mir im Allgemeinen durch meine Auswahlen von Technologien eher mehr Arbeit gemacht, als eigentlich nötig gewesen wäre. Angular ist supper für die Implementierung von SPA geeignet, und man kann es auch relativ gut bis ins kleinste Detail anpassen. Der Nachteil davon ist, dass man nur sehr wenige bis gar keine vorgefertigten Designs hat wie zum Beispiel bei Vaadin. Für die Implementierung habe ich mir bei gewissen Views Angular Materials verwendet. Dadurch hatte ich vorgefertigte Komponente und Icons.

Technologien

Angular

Angular ist ein Framework mit dem man einfach HTML Code clientseitlich generieren kann. Angular ist zwar nicht das E einfachste zu lernende Framwork für das erstellen von SPA. Allerdings hat es extrem viele Feature und auch eine extrem gute Documentation. Theoretisch kann man Angular mit JavaScript oder auch TypeScript verwenden. Persönlich tendiere ich eher zu TypeScript, da ich die Features von TypeScript wie Typensicherheit sehr zu schätzen weiss.

RXJS

Auch RXJS möchte ich noch kurz erwähnen. Ich verwende es dazu, um die Daten, welche ich vom Backend erhalte, im Frontend zu verwalten und zwischenzuspeichern. Vom Faktor her ist es eine Datenbank, die im Client läuft.

Spring Boot

Spring Boot ist ein Framwork mit dem man unter anderem auf einfachem Weg APIs implementieren kann. Sring Boot ist relativ angehem zu benutzen, da es unter anderm auch die ganze Verbindung mit der Datenbank regelt. Jsons die als Requests reingkommen, werden automatisch von Spring Boot validiert und anschliessend zu Java Objekte umgewandelt. Auch bei Abfragen an die Datenbank muss man nur minimale Querys schreiben, da der grösste Teil von Spring Boot erledigt wird.

MongoDB

MongoDB ist eine nicht relatione Datenbank die Speichern von Daten in json Form angewendet werden kann. Einser der tollen Feature an MongoDB find ich persönlich, dass man fast keine Relationen zwischen den Objekten hat. Ebenfalls kann man grundsätzlich einmal jedes Objekt in einer Collection (Table in SQL) abspeichern, ohne vorher zu definieren, wie die Struktur von dem Objekt aussieht. Auch das Stellen von Querys auf die Datenbank ist extrem einfach und hat auch eine Geschwindigkeiten wie bei relationalen Datensätzen. Ein weiteres sehr cooles Feature an MongoDB ist, dasss es nicht nur vertikal sondern auch horizontal skalierbar ist. In meinem kleinen Projekt spielt allerdings die Skalierbarkeit noch keine wichtige Rolle.

Docker

Docker selbst ist zwar keine Technologie die im Sourcecode verwendet wird. Allerdings denke ich, dass sie in dieser Liste dennoch nicht fehlen darf. Ich dokorisiere meine Applikationen bei jedem Commit automatisch mithilfe eines Dockerfiles, welches ich geschrieben habe. Dadurch kann ich dann jederzeit einfach diese Applikation aufstarten, ohne dass ich viel Ressourcen brauche oder die Applikationen verteilt auf mehreren VMs laufen lasse. Zudem bietet es auch noch den Vorteil, dass ich eventuell das Ganze später einmal auf einem Kubernetscluster deployen kann (sobald mein selbst gehostetes Cluster ready ist).

Aufbau

Wie bereits gesagt, ist eine Applikation in 3 Schichten aufgeteilt, die aus dem Frontend, dem Backend und der Datenbank bestehen. In diesem Modul ist der Hauptfokus auf dem Frontend gelegen, weshalb ich auch logischerweise die meiste Zeit damit verbracht habe, dieses zu implementieren und zu optimieren.

Im Frontend verwende ich sogenannte Komponents, umd die Logik voneinander zu trennen. Dabei gilt, dass jeder Komponent seine eigene Funktion hat. Ein Komponent besteht immer aus 4 Fieles. Das .html file enthält die Grundstruktur von dem Komponent. Die Logik dazu ist im .ts File zu finden und die Styles im .scss (andere schreibweise von css wie ts zu js). Zu guter letzt gibt es auch noch ein .spec.ts` File. Dieses beinhaltet die Tests.

Probleme und Lösungen

Während des Projektes hatte ich keine grössere Probleme mit meiner Applikation. Im Falle, dass ein kleines Problem auftrat, wusste ich schnell, woran es lag und konnte es dadurch dann auch beheben. Falls ich mal nicht weiter wusste, konnte ich mir einfach Hilfe im Internet oder der officiellen Dokumentation von Angular (die sehr gut und ausführlich ist) hohlen. Ein Problem, welches ich relativ lange hatte, war, dass der nginx Server, den ich als Loadbalancer einsetzte, im docker compose nicht mit dem Backend connecten wollte. Im Endeffekt hatte es sich allerdings als Tippfehler herausgestellt.
Ein weiteres Problem, welches ich kurz hatte, war, dass meine javax Validatoren einfach nicht wirkten. Sie sind einfach nicht aufgerufen worden. Nach ein paar sinnlosen Versuchen meinerseits, herauszufinden ob vielleicht ein Package fehlte, stellte sich heraus, dass diese nur beim initialen compilen eingesetzt werden. Sobald die Spring Devtools den kompletten Code neu compilen und das Programm reloaden, wurden die Validatoren nicht upgedatet. Möglicherweise handelt es sich auch um einen Fehler von meiner Seite aus. Da ich allerdings die Validatoren nicht konstant abändern musste, hat die Lösung mit stoppen und neustarten (vom Programm) für mich problemlos funktioniert.

Bewertung

Ich selber bin mit meiner geleisteten Arbeit sehr zufrieden. Ich habe viel Zeit in das Projekt gesteckt und konnte dadurch auch ein gutes Resultat erzielen. Die Views sehen nicht immer gleich aus wie in meinen Mockups und haben teilweise leichte Abänderungen. Allerdings denke ich, dass alle Abänderungen, welche ich gemacht habe, sinvoll sind, da mir teilweise während der Implementation aufgefallen ist, dass das Feature in der Realität doch nicht so gut zu bedienen ist wie es vorher in meinen Gedanken und den Mockups war.

Mockup	Implementation	Beschreibung
		Der Loginscreen unterscheidet sich in der Implementierung von den Mockups lediglih darin, dass die Farbgestalltung anderst ist. Die Grundstruktur habe ich zimlich genau übernommen
		Auch hier gilt wie bei der Login view, dass die Grundstruktur relativ übernomme worder ist und sich lediglich die Farbgestalltung geändert hat.
		Auch in dieser View hat sich die Grundstruktur nicht stark verändert.
		Auch in dieser View gilt dass sich lediglich die Farbwahl und ein wenig die Überschriften verändert haben
		Diese View hat sich im Gegensatz zu dem Mockups noch etwas stärker verändert. Die meisten Features bis auf die Suchbar sind auch in der Implementation vorhanden. Die Suchbar habe ich gewollt weggelassen, da ich denke dass man nicht so viele Folder haben wir dass sie zum Zuge kommt. Eebenfals habe ich ein Feature hizugefügt. Nähmlich lässt sich durch einen Rechtsklick ein kleines Contextmenü öffnen durch dass man die wichtigsten Aktions auch an dem Folder ausführen kann.
		Auch hier habe ich wie bei der Vorherigen View ein kleines Kontextmenü eingebaut. Ein zudem sehr wichtiges Feature finde ich die Tatsache, dass sie die Noten je nach stärke die Farbe verändern. Dadurch sieht man schnell wo man gut ist und wo man noch verbesserungspotenzial hat
		Auch hier habe ich mich grösstenteils bei der Implementierung an die Mockups gehalten. Die einzige Änderung habe ich dahingehend gemacht, dass ich neu zwischen Lese und Lese- und Schreibrechten Unterscheide.