Auswahl der Technologien
Für unseren Server haben wir zunächst Node.JS, Python und Angular in betracht gezogen.
Angular haben wir aufgrund der des größeren Overheads, im Vergleich zu den anderen Lösungen ausgeschlossen. Zudem werden die Vorteile Angulars erst bei größeren Projekten deutlich, wodurch sich der Overhead lohnen würde.
Die Vorteile der Python Lösung wären:
- Durch das restliche Projekt wären wir gut in Python eingearbeitet
- Durch Python ist eine etwas klarere Codestruktur durchgesetzt im Vergleich zu JavaScript
- Gute Dokumentation and Community, um Support zu erhalten
Die Vorteile der Node.JS Lösung wären:
- Die performance von Node.JS ist besser als die der Python Lösung (Durch die Interpretation der V8 Engine)
- Einfach parallelisierbar
- Das meist genutzte Framework (Stackoverflow Developer Survey 2019: https://insights.stackoverflow.com/survey/2019)
- Viele mögliche Erweiterungen
Aus diesen Gründen haben wir und für eine Lösung mit Node.JS entschieden.
Für die Server-Funktionalität haben wir Express gewählt.
Für ein schlichtes, aber gut aussehendes Design haben wir uns für das CSS und JS Framework Bootstrap entschieden.
Zur einfacheren und übersichtlicheren Beschreibung von HTML haben wir uns für die Template Engine Pug entschieden.
Weblinks:
Ordnerstruktur
- Die app.js ist die Ausgangsdatei. Hier wird der Node.Js server erstellt und die verfügbaren Routen definiert.
- Die Package.json gibt Metadaten über den Server an, wie zum Beispiel die Dependencies.
- In der views/index.pug ist die gerenderte "HTML" zu finden. Diese is im Pug Format beschrieben und wird bevor sie dem Client angezeigt wird zu HTML konvertiert.
- Im public Ordner werden alle static files gespeichert, welche von der HTML (bzw. Pug) Datei importiert werden. Darunter fallen alle CSS, JS Dateien sowie Bilder.
- Außerhalb des Webclient Ordners befindet sich zusätzlich noch eine config.json. Diese wird in der von Webclient genutzt um Parameter zu bestimmen, welche mit dem Backend synchronisiert sein müssen. So zum Beispiel die Port Nummer des Servers oder die Endpoints des Backends auf welche das Frontend zugreift.
App.js
Diese Datei definiert den Webserver.
- [Zeilen 1-7] Zuerst werden alle nötigen Dependencies importiert. Hierzu zählt auch die config.json!
- [Zeilen 9-17] Hier werden alle nötigen Variablen deklariert.
- [Zeilen 19-27] Nun wird dynamisch herausgefunden wie die IP Adresse des Host-Systems lautet. Daraus werden dann die URLs erstellt, welche für die Ajax Request, aus der index.js heraus, genutzt werden. Hier wird nicht die Localhost IP Adresse verwendet, da diese IP Adresse auch für den Client JS Code genutzt wird. Der Client muss jedoch wissen auf welche IP Adresse er die Ajax Requests durchführen soll.
- [Zeilen 29-30] Hier wird der Ordner definiert, in welchem sich alle static files befinden müssen.
- [Zeilen 33-34] Hier wird der Server auf die Pug template Engine konfiguriert.
- [Zeilen 37-46] Hier wird der Home Endpoint definiert, für welchen die index.pug gerendert werden soll. Zusätzlich werden die benötigten Daten an den Client JS Code gesendet.
- [Zeilen 49-51] Zuletzt wird der server dann auf dem konfigurierten Port gestartet.