5.2. Onboarding Screen (PaAn)

Alle Geräte müssen einmal beim ersten Hochfahren des Linux-Live-Distributions richtig konfiguriert werden. Diese Konfiguration wird später sowohl für die Kommunikation zwischen den Geräten als auch für die Geräteeinstellung (z.B. Gerätename) und des Setzen des Lehrerpassworts für die Authentifizierung in der Welcome-page benötigt.

Die einzugebenden Daten (siehe Abb. 5.8) auf der Onboarding-screen Seite werden in 3 Kategorie unterteilt:

Geräte Einstellung : Gerätename
Lehrer Einstellung : Lehrerpasswort
Erweiterte Netzwerk Einstellung : IP Adresse, Gateway, DNS

Der Name des Gerätes sollte eingegeben werden, weil die Geräte einfach identifizierbar sein sollten. Es werden für die Netzwerkeinstellung die oberen Daten benötigt, weil jedes Gerät eine feste IP Adresse bzw. eine statische IP Adresse braucht, und um eine statische IP Adresse zu setzen, werden diese Daten benötigt (IP Adresse, Gateway, DNS). Diese Netzwerkeinstellungsdaten werden aus der aktuellen lokalen aktiven Netzwerkschnittstelle des Gerätes gelesen.

Die wichtigen technischen Daten werden automatisch auf dem entsprechenden Formularfeld ausgefüllt. Der Lehrer braucht nur das Passwort zu setzen und somit wird ihm die Konfiguration erleichtert. Ein Gerätename wird vorgeschlagen, was dem aktuellen Hostnamen des Livesystems entspricht. Dieser Name kann aber geändert werden. Beim Aufruf des Onboarding-screen Seite wird ein Endpunkt im Back-End des Servers aufgerufen, d.h. eine JavaScript Datei ruft einen Back-End Link auf, welcher eine “LocalIpConfig” json Datei zurück gibt.

Das Formular auf der Onboarding-screen Seite ist für weitere Eingabefelder sehr schnell änderbar bzw. anpassbar. Eine Klasse OnboardingForm (siehe Abb. 5.9) wurde erstellt und wird beim Aufruf der Onboarding-screen Seite instanziiert. Diese Klasse leitet von der Klasse “FlaskForm” (eine Klasse in dem Modul Flask-WTF) ab. Es ist mit HTML möglich, ein Webformular zu erstellen, in dem der Benutzer Informationen eingeben kann. Die Daten des Formulars werden dann von dem Webbrowser an den Server üblicherweise als Post Anfrage geschickt.

Das Flask-WTF Modul ermöglicht es leichter mit Webformularen zu arbeiten. Man kann einfach eine Klasse instanziieren und HTML generieren lassen und die Eingabe Felder können auch zusätzlich einfach validiert werden. Außerdem ist das instanziierte Formular auf der Server Seite einfach benutzbar. Das Modul ist eine Flask Integrationshülle um das Framework WTForms Paket. Flask-WTF und sein abhängiges Paket WTForms sind in der Datei requirements.txt aufgelistet und werden über den Paket Manager von Python mit dem folgenden pip Befehl installiert:

python3 -m pip install -r requirements.txt

5.2.1. Templates

Um die Templates wiederzugeben, verwendet Flask eine mächtige “Template engine”, die Jinja2 heißt. Die Jinja2 Template engine ermöglicht es die Anwendungslogik von der Präsentationslogik zu trennen, so dass wir sauberen und strukturierten Code erhalten und somit eine einfach wartbare Anwendung zu bekommen.

Die Templates und die benötigten CSS und Javascript Dateien für die Webseite “onboarding-screen” werden in dem Ordner: templates/onboarding (siehe Abb. 5.10) abgelegt.

Abb. 5.10 onboarding-screen templates Ordner

Um die Webseite des Onboarding-screens anzuzeigen wird die Datei index.html, die von der Datei base.html ableitet, vom Jinja2 aufgerufen über die Funktion render_template("onboarding/index.html",form=form).

Für das schöne und professionelle Aussehen, wird das Framework Bootstrap, eine offene Quelle für den Webbrowser, die von Twitter entwickelt wurde, um saubere und schöne Webseiten zu erstellen, die mit allen modernen Webbrowser kompatibel sind.