Das Connected Campervan Projekt - Aufbau eines lokalen Datenservers mit dem ROCK 5B und Node.js

Zuvor haben wir das Connected Campervan Project zusammen mit dem neuesten und sehr leistungsfähigen ROCK-Einplatinencomputer von OKdo vorgestellt. Wir haben die Idee untersucht, ein vollständig vernetztes, netzunabhängiges Überwachungssystem als Erweiterung des bestehenden Kickstart Kamper-Projekts zu bauen.

Wir erörterten auch den Bedarf an empirischer und datengestützter Forschung in der Diskussion um nachhaltige Alternativen wie erneuerbare Energien und das Potenzial des ROCK 5B (249-3159) , diese Daten zu sammeln, zu protokollieren und zu interpretieren, die aus einer Reihe digitaler Quellen rund um den Lieferwagen gewonnen werden können.

Das technische Ziel des Projekts ist es daher, die ROCK-Hardware als dedizierten Zentralcomputer und leistungsstarken Datenserver für unsere netzunabhängige Umgebung zu konfigurieren, um wichtige Kennzahlen wie den Solarertrag und die Luftqualität zu verfolgen, die gesammelt, gemeinsam genutzt und mit der Gemeinschaft im Kontext der allgemeinen Machbarkeit diskutiert werden können.

Die Visualisierung dieser Daten ist der Schlüssel für die Weitergabe der Ergebnisse. In diesem Artikel konzentrieren wir uns daher zunächst auf den Aufbau der Grundlage unseres Datenservers mit der hochfunktionalen Node.js-Laufzeitumgebung und einer einfachen, aber dynamischen webbasierten Benutzeroberfläche in HTML und JavaScript.

Teileliste

• OKdo ROCK 5B
• ROCK 5B Wireless Module

Aufbau

Um die Software für unser zukünftiges System zu erstellen, muss der ROCK 5B als Vermittler zwischen einfachen Datenquellen wie RS485 vom Solarladeregler und übergeordneten serverseitigen Funktionen wie HTTP-Anfragen und Datenbankabfragen von unserer Benutzerschnittstelle dienen. Glücklicherweise ist der ROCK von Haus aus gut ausgestattet mit einer Reihe von GPIO-Pins und einem speziellen Debian-Betriebssystem, die beide unsere Anforderungen perfekt erfüllen.

Unser ROCK 5B setup

Der ROCK ist außerdem mit einem Gigabit-Ethernet-Anschluss für schnelle Netzwerke ausgestattet, den wir später im Projekt für die Verbindung mit unserem LTE-Router nutzen werden. Für Entwicklungszwecke werden wir jedoch das ROCK-Wireless-Modul verwenden, um uns über Wi-Fi mit dem lokalen Netzwerk zu verbinden. Dieses Modul ermöglicht uns auch den Zugriff auf den neuesten Bluetooth 5.2-Standard, der ideal für die Kommunikation mit allen drahtlosen Geräten und Sensoren in der Zukunft sein wird. Die Wi-Fi-Einstellungen in der Debian-Distribution ROCK 5B befinden sich noch im Anfangsstadium, aber eine manuelle Verbindung mit dem lokalen Netzwerk ist nicht übermäßig kompliziert, wenn man der Radxa-Anleitung hier folgt.

Angesichts des Umfangs des Projekts werden wir die sehr leistungsfähige Open-Source-Laufzeitumgebung Node.js nutzen, um unseren Datenserver zu entwickeln. Node.js wurde für serverseitige Funktionen und IoT-Anwendungen entwickelt, die JavaScript verwenden, um einen einheitlichen und nahtlosen Fluss zwischen Client- und Servercode zu schaffen, was in gewissem Sinne eine vollständige JavaScript-Entwicklungsumgebung für uns darstellt.

sudo apt install nodejs

Installiert die node.js Umgebung

Nachdem wir Debian bereits wie angewiesen von einer SD-Karte gebootet haben, können wir Node.js herunterladen und über das Terminal installieren. Dadurch können wir unser JavaScript-Code-Projekt im Kontext der Node.js-Umgebung öffnen und ausführen.

sudo apt install npm

Installiert den Node Package Manager

sudo npm install -g express

Installiert die Express library global für alle zukünftigen node.js Projekte

Wir werden auch die Express-Bibliothek verwenden, um den Datenfluss in unserem serverseitigen Code zu rationalisieren und die Netzwerkfunktionen für uns etwas einfacher zu machen. Dieser Prozess klingt kompliziert, aber wir können neue Node-Bibliotheken ganz einfach über das Terminal und die Befehle des Node Package Managers (npm) installieren.

Öffnen des JavaScript server code in Node.js

Damit sollten wir in der Lage sein, unsere Code-Projekte in der Node-Umgebung auf die gleiche Weise auszuführen wie in anderen Skriptsprachen-Shells, indem wir zum Speicherort der Projektdatei navigieren und sie mit dem Node-Befehl ausführen. Nachdem die Einrichtung abgeschlossen ist, können wir nun damit beginnen, die Software für unsere Benutzerschnittstelle bzw. unseren Datenserver zu schreiben.

Das User-Interface bauen (Client)

Die Benutzeroberfläche wurde so konzipiert, dass sie von jedem Gerät aus zugänglich ist, das mit dem lokalen Wi-Fi/LTE-Router im Transporter verbunden ist. Die Verwendung einer webbasierten Anwendung macht die Echtzeitüberwachung flexibler und bequemer und bietet gleichzeitig die Möglichkeit, später weitere IoT-Funktionen zu integrieren.

Das Grundgerüst unserer HTML-Benutzerschnittstelle

Zu Beginn werden wir eine einfache HTML-Seite erstellen, die Daten über HTTP an unseren Server, der von Node und unserem ROCK-Board gehostet wird, anfordern kann. Mit rohem HTML/CSS können wir eine Landing Page erstellen, die unsere Daten in einem intuitiven Format anzeigt und JavaScript verwendet, um regelmäßige Aktualisierungen anzufordern.

// Update HTML elements with new data
function UpdatePage(newdata)
{
document.getElementById("temperature_data").innerHTML = newdata.temperature_data_JSON;
document.getElementById("light_data").innerHTML = newdata.light_data_JSON;
}
// Setup page to request updates every 5s
var intervalId = setInterval(function() 
{
$.ajax({
type: "POST",
url: "/",
contentype: "plain/text",
data: "hello",
success: (fromServer) =>
{
 UpdatePage(JSON.parse(fromServer));
}
});
}, 5000);

Periodische Seitenaktualisierungen in JavaScript mit jQuery

Wenn wir den Hostnamen und die Portnummer des Servers in unseren Browser eingeben, sendet dieser eine HTTP-Get-Anfrage, die die HTML-Seite, die CSS-Datei und die JavaScript-Dateien zurückgibt, die zur Erstellung unserer dynamischen Webseite benötigt werden. Wir verwenden auch die jQuery-Bibliothek, um alle paar Sekunden HTTP-Post-Anfragen zu stellen, die eine Datenreihe im JSON-Format vom Server zurückliefern, die wir zur automatischen Aktualisierung der Werte in der Tabelle verwenden können. Ich habe Temperatur und Lichtstärke als Beispiele für Sensoreingänge verwendet, die gemessen werden können.

Den Server bauen

Wir werden die Express-Bibliothek in Node.js verwenden, um unseren Basisserver aufzubauen und gleichzeitig unseren Code und Datenfluss zu optimieren. Unser Hauptziel ist es, die relevanten HTML-, CSS- und JavaScript-Dateien, aus denen unsere Weboberfläche besteht, zu übernehmen und sie dem Benutzer bei der Verbindung zur Verfügung zu stellen.

app.listen(port, hostname, function() 
{
  console.log('server running');
});

Listener bei HTTP events

Dazu müssen wir einen Listener auf dem Hostnamen/der IP-Adresse und der Portnummer unserer Wahl einrichten und gleichzeitig Event-Handler erstellen, die entsprechend auf HTTP-Get-Anfragen reagieren. Für diesen Test werden wir localhost und Port 3000 verwenden. Wenn der Benutzer eine Verbindung zu diesem Socket herstellt, sendet der entsprechende Event-Handler die HTML-Seite, gefolgt von den CSS- und JavaScript-Dateien, sobald der Browser diese Abhängigkeiten entdeckt hat.

// Request HTML when required by the client
app.get(['/', '/index.html'], function(req, res)
{
res.sendFile((__dirname + '/client/index.html'));
console.log('homepage sent');
});
// Request Javascript when required by the client
app.get('/clientcode.js', function(req, res)
{
res.sendFile((__dirname + '/client/clientcode.js'));
console.log('client JS code sent');
});
// Request jQuery library when required by the client
app.get('/jquery.min.js', function(req, res)
{
res.sendFile((__dirname + '/client/jquery-3.6.3.min.js'));
console.log('jQuery sent');
});
// Request style sheet when required by the client
app.get('/clientstyle.css', function(req, res)
{
res.sendFile((__dirname + '/client/clientstyle.css'));
console.log('client CSS code sent');
});

HTTP GET event handlers für client-side Dateien

app.post(['/', '/index.html'], function(req, res)
{
console.log('page update requested');
let Rand_Temp = JSON.stringify(Math.floor((Math.random()*50)));
let Rand_Light = JSON.stringify(Math.floor((Math.random()*100)));
let helloData = {
temperature_data_JSON: Rand_Temp,
light_data_JSON: Rand_Light
};
res.send(JSON.stringify(helloData));
});

HTTP POST event handler für client-side Datenabfrage

Schließlich müssen wir einen Event-Handler für alle HTTP-Post-Anfragen konfigurieren, die in regelmäßigen Abständen vom Client empfangen werden, der wiederum eine Antwort mit neuen JSON-formatierten Daten erwartet, die dem Benutzer angezeigt werden. Ähnlich wie bei der HTTP-Get-Anforderung können wir einen HTTP-Post-Event-Handler einrichten, der einige zufällige Platzhalterdaten als JavaScript-Schlüssel-Wert-Paar in eine JSON-formatierte Zeichenfolge parst, die an den Client gesendet und dann dem Benutzer angezeigt wird.

Da wir JavaScript auf beiden Seiten unserer Anwendung verwenden, ist es einfacher, diese Art von formatierten Daten und sogar ganze JavaScript-Objekte zu senden und zu empfangen, falls erforderlich. Es ist auch erstaunlich, wie einfach es ist, unseren gesamten Client-Server-Stack mit so wenig Code einzurichten.

Zusammenfassung

Nachdem wir unseren Code fertiggestellt haben, haben wir nun erfolgreich die Grundfunktionalität unseres zentralen Datenservers mit Node.js und dem ROCK 5B sowie einige grundlegende webbasierte Visualisierungen in der Benutzeroberfläche eingerichtet. Natürlich wollen wir diese Funktionalität in zukünftigen Artikeln erweitern, um echte Sensordateneingaben, die wir in Echtzeit an den Benutzer senden können, sowie einige Datenbankfunktionen für die historische Datenprotokollierung einzubeziehen. Schließlich haben wir das Potenzial von Node.js als leistungsstarke Entwicklungsumgebung für netzwerk- und IoT-basierte Anwendungen aufgezeigt, und ich freue mich darauf, in Zukunft mehr damit zu arbeiten.

Für mehr Details klickt einfach auf das Kickstart Kamper GitHub.

Kickstart Kamper Seite auf DesignSpark

Kickstart Kamper Webseite