Klassenklima: Umweltdaten im Web-browser

Da wir über ein internetfähiges Kit verfügen, wäre es doch toll, wenn wir die erfassten Messwerte nicht nur lokal am Neopixel oder dem SerialMonitor anzeigen, sondern per Web-Interface vom Handy aus beobachten könnten. Dazu werden wir mit wenigen Programmzeilen einen kleinen HTTP–Server implementieren und per Web-Browser auf eine eigene Seite zugreifen.

WLAN: jetzt kommt das Netzwerk ins Spiel

Spricht man vom WLAN-Netz, so meint man dabei in der Regel einen bestehenden WLAN-Accesspoint, in dessen Infrastruktur man sich einloggen kann und über den dann Zugang zum Internet besteht (Infrastruktur-Modus). Dazu ist die Kenntnis des Netzwerknamens (SSID, Service Set Identifier) und des Passwortes nötig. Der Accesspoint weist dem Teilnehmer eine eindeutige IP-Adresse zu, unter der er fortan im Netzwerk erreichbar ist (DHCP,  Dynamic Host Configuration Protocol). Diese Adresse besteht üblicherweise aus vier Zahlen (IPv4), die den Teilnehmer im Netzwerk eindeutig identifizieren.

Das WLAN-Interface unseres Octopus beherrscht noch eine zweite Betriebsweise, bei der ein eigenes neues WLAN aufgespannt wird. Hier können sich andere Teilnehmer anmelden und mit dem Octopus kommunizieren. Ein echter Internetzugang besteht bei diesem Accesspoint-Modus nicht.

DNS: Im Dienste der Lesbarkeit

Die IP-Adresse eines Teilnehmers ist als Zahlenfolge nur schwer zu merken. Einfacher sind da natürlich Hostnamen wie umwelt-campus.de oder IoT-Werkstatt.de zu handhaben. Ein spezielles Protokoll (DNS, Domain Name Service) sorgt hier automatisch für eine transparente anwenderfreundliche Umsetzung des Namens in die entsprechende IP-Adresse. Dazu stehen eigene DNS-Server im Internet bereit, die Listen zur Namensauflösung führen. Wir können die IP-Adresse also ruhig erst einmal vergessen.

HTTP: Kommunikation im WWW

Möchte man mit einem anderen Teilnehmer Informationen austauschen, so bedarf es einiger spezieller Kommunikationsregeln. Im Fall des WWW regelt dies das sogenannte HTTP-Protokoll (Hypertext Transfer Protocol). Ein Web-Browser als HTTP-Client kann damit bei einem HTTP-Server die Auslieferung einer Webseite anfordern. Diese wird mittels HTML (Hypertext Markup Language) beschrieben und im Web-Browser dargestellt.

Selbst machen: Umsetzung

Wir starten unsere Web-Forschung mit der Realisierung eines eigenen WLANs per Accesspoint-Modus. Damit sind wir unabhängig von der bestehenden Infrastruktur vor Ort. Auch wenn bereits ein WLAN verfügbar ist, könnte es nämlich sein, dass dort aus Sicherheitsgründen die direkte Kommunikation der Teilnehmer untereinander nicht möglich ist (Gastmodus).

  1. WLAN einrichten: Im Modulbaukasten „Internet-Zugang“ bietet unser Ardublock die Möglichkeit, einen entsprechenden Accesspoint aufzubauen. Nur die Angabe eines Netzwerknamens und des Passworts (mind. 8 Zeichen) sind hierfür notwendig.
  2. Server erstellen: Im Modulbaukasten „http-Protokoll“ finden wir ein entsprechendes Puzzleteil, welches einen kompletten Web-Server und die Auslieferung einer Webseite realisiert. Einzig den Titel unserer Seite und die Möglichkeit der Messwertausgabe können wir beeinflussen.
  3. PC oder Smartphone anmelden: Nach upload des Programmes stellt der Octopus ein neues WLAN bereit, an dem wir unsere Anzeigegeräte wie gewohnt registrieren können.
  4. Seite anzeigen: Öffnen wir den Web-Browser und geben wir die am SerialMonitor der Arduino-Umgebung ablesbare IP-Adresse des Octopus ein (hier 192.168.4.1/), so sehen wir unsere erste eigene Homepage mit den aktuellen Messwerten unseres Umweltsensors. Diese Seite wird fortan vom Browser zyklisch aktualisiert und eröffnet uns den verteilten Zugang zu den Umweltdaten, ohne direkt vor Ort sein zu müssen.
  5. Optional: Ein Eingabefeld auf der Seite ermöglicht zusätzlich die Eingabe eine Textnachricht, die am Octopus auf der optionalen LED-Matrix angezeigt wird. Damit haben wir nebenbei eine Anzeige für Kurznachrichten realisiert. Aber Achtung: jeder der die IP-Adresse unseres Servers kennt, kann die Anzeige manipulieren.
  6. Komfort: Ein spezielles DNS-Puzzleteil im Modulbaukasten „Internet-Zugang“ erlaubt im Browser die Eingabe eines Hostnames  (Octopus.local) statt der IP-Adresse. Die Auflösung ist lokal, d.h. die Endung .local ist zwingend erforderlich.

Bei entsprechender Infrastruktur können wir unseren Baustein für das WLAN auch durch einen entsprechenden Baustein für den Infrastruktur-Modus austauschen. Dann haben wir Internet-Zugriff nach außen, d.h. können später direkt mit dem Internet kommunizieren. Von außen ist unser Server allerdings aus Sicherheitsgründen trotzdem nicht erreichbar. Um die Daten weltweit verfügbar zu machen, müssen wir uns also noch etwas gedulden.

Accesspoint
Beim Accesspoint Modus erstellen wir ein eigenes WLAN (MeinOctiWLAN) mit dem sich Smatrtphone & Co. verbinden lassen. Der Web-Server liefert dann bei Aufruf der IP-Adresse die Webseite mit den Messdaten aus. Diese werden im Browser angezeigt.
mDNS-Dienst
Ein lokaler DNS-Dienst ermöglicht den Aufruf über Hostnamen (Octopus.local) statt IP-Adresse (http://192.168.4.1/).
Infrastruktur
Die Verwendung des WLANs im Infrastruktur-Modus ermöglicht den Internet-Zugang. Falls vorhanden, kann auf der Webseite auch eine Nachricht eingegeben werden, die dann auf der LED-Matrix erscheint.
HTML-Code
HTML-Code zur Beschreibung einer einfachen Webseite.
back-to-top nach oben