Unter einem Frontend versteht man in der Webprogrammierung all den Code, der für die Darstellung der Webseite notwendig ist. Für unsere Softwareebene hatten wir uns drei essentielle Ziele und zwei Bonusziele gesetzt:
- Frontend mit Internetseite
- Datenbank (vorraussichtlich MongoDB)
- Aufbereitung der Daten als Statistik
- BONUS: Eventuell App mit Push-Notification für Warnungen
- BONUS: Mehrere verschiedene Sensoren anschließen
Für das Frontend war ich (Mirco Waldmann) der Hauptverantwortliche und im Folgenden dokumentiere ich unsere Vorgehensweise bei der Entwicklung.
Grundlagen
Bevor wir mit dem Projekt anfingen, hatten wir uns bereits darauf geeinigt, für die Webseite die Programmiersprache Python mit der Flask-Library zu verwenden. Die Idee war hier, durch den Anschluss zu Python kein Javascript für die Webseite verwenden zu müssen.
Obwohl das in der Vorlesung vorgestellte Werkzeug NodeRed für unsere Zwecke mit Sicherheit ausreichend gewesen wäre, entschieden wir uns trotzdem dafür, eine eigene Webseite zu programmieren, da in unserer Gruppe entsprechende Vorkenntnisse vorhanden waren.
Als erstes erstellte ich eine grobe Skizze der zukünftigen Webseite:
Durch die Skizze konnten wir unter Anderem direkt feststellen, dass wir für die einzelnen Messwerte, die unsere Messstation liefert, passende Icons benötigen würden. Diese Aufgabe konnte daher parallel zur Webentwicklung von Kim Schuhknecht erledigt werden.
Repository und Entwicklungsumgebung
Für die Webseite wollten wir auf jeden Fall Git zusammen mit einem remote Repository wie Gitlab verwenden, da wir bereits wussten, dass in mindestens einem Fall zwei verschiedene Leute Code verfassen müssen und so jedes Gruppenmitglied jederzeit den Stand der Webseite einsehen kann. Außerdem ist es unserer Meinung nach grob Fahrlässig auf eine Versionsverwaltung komplett zu verzichten, da sich dadurch größere Fehler beim Programmieren nicht rückgängig machen lassen.
Aufgrund technischer Probleme konnten wir das Gitlab der Uni nicht verwenden und wichen daher auf ein “normales” Gitlab Repository aus. Das Repository ist unter diesem Link erreichbar:
https://gitlab.com/singularius.weltraum/soft-skills-universalsensor-mit-webinterface
Für meine lokale Entwicklungsumgebung wählte ich Visual Studio Code aus. Einerseits habe ich damit bereits Erfahrung, andererseits hat VSCode den großen Vorteil, mit praktisch jedem Dateityp und jeder Programmiersprache zurecht zu kommen, aufgrund der Unzahl von Addons die zur Installation bereit stehen. Auf meinem Linux-PC kann ich die Entwicklungsumgebung dann einfach mit dem Konsolenbefehl “code” starten und optional einen Dateipfad angeben, der geöffnet werden soll:
Im Screenshot ist z.B. der Ordner für die Webseite geöffnet, erkennbar am linken Rand.
Als nächsten Schritt in der Einrichtung der Entwicklungsumgebung musste ich ein “virualenv”, also eine virtuelle Umgebung für Python einrichten. Die virtuelle Umgebung dient dazu, dass die verschiedenen Librarys, die man beim Programmieren an einem Projekt verwenden, nicht Systemweit installiert werden, sondern nur lokal für das Projekt. Das ist wichtig, weil es des öfteren vorkommt, dass beispielsweise verschiedene Projekte verschiedene Versionen derselben Library verwenden. Außerdem kann man durch das virtualenv leicht die für das Projekt notwendigen Librarys mit anderen Entwicklern teilen.
Um die virtuelle Umgebung zu erstellen, gab ich in meiner Konsole (in VSCode integriert, sichtbar am unteren Fensterbereich) den Befehl “virtualenv env” ein. Dadurch wird eine virtuelle Umgebung mit frei wählbarem Namen, in diesem Fall also “env” erstellt. Diese ist dann im entsprechend benannten Ordner wiederzufinden. Im bin-Verzeichnis dieses Ordners kann man die Umgebung dann mit dem Befehl “source activate” starten. Ab jetzt werden alle Python Packages, die man installiert, nur für die virtuelle Umgebung installiert. Man erkennt, dass man sich in der virtuellen Umgebung befindet, an dem (env) am Anfang der Eingabeaufforderung in der Konsole.
Das einzige, was jetzt noch fehlte, war mit “pip install PACKAGENAME” die benötigten Abhängigkeiten zu installieren (also unter Anderem Flask) und dann konnte die Erstellung der Webseite beginnen.
Comments are closed