Ein Node-RED Web User Interface Builder

Blog

Ein Node-RED Web User Interface Builder

node-red-contrib-uibuilder

Ein Node-RED Web User Interface Builder. uibuilder zielt darauf ab, eine einfach zu verwendende Möglichkeit zu bieten, dynamische Webschnittstellen mit beliebigen (oder keinen) Frontend-Bibliotheken zu erstellen.



Die wichtigsten Funktionen und Vorteile sind:

  • Entwickelt als Alternative zum offiziellen Node-RED-Dashboard. Ohne Overhead und Einschränkungen.
  • Steuern Sie alles über die Node-RED-Admin-Benutzeroberfläche. Bearbeiten Sie Ihre Front-End-Ressourcendateien, verwalten Sie Front-End-Pakete. Kein Zugriff auf die Befehlszeile des Servers erforderlich.
  • Installiert standardmäßig VueJS und Bootstrap-vue, was Ihnen einen sehr einfachen Start mit minimalem Boiler-Plate ermöglicht.
  • Verwenden Sie so viele benutzerdefinierte Benutzeroberflächen, wie Sie möchten. Für jeden Einstiegspunkt wird nur 1 Knoten benötigt. Verwenden Sie Linkknoten, um Daten aus anderen Teilen Ihrer Flows zu senden.
  • Verfügt über eine von der Nachrichtenschnittstelle getrennte Steuerschnittstelle. Wissen Sie, wann ein Browser eine Verbindung herstellt oder trennt, senden Sie zwischengespeicherte Daten.
  • Viel leichter und mobilfreundlicher als das offizielle Node-RED-Dashboard (vorausgesetzt, Sie verwenden nicht Angular als Framework).
  • Findet diese Front-End-Framework-Pakete automatisch und stellt sie zur Verfügung: vue, bootstrap, bootstrap-vue, jquery, moonjs, relayjs, riot, angle, picknick,regenschirmjs (bitte beachten Sie, dass diese Liste erweitert werden kann).
  • Verwenden irgendein Front-End-Framework, das Sie mögen. Getestet mit mindestens JQuery , VueJS , MondJS , REAGIEREN , RegenschirmJS und Aufstand .
  • Verwenden Sie es ohne Front-End-Framework, wenn Sie möchten. Halten Sie es leicht und einfach.
  • Die mitgelieferte Front-End-Bibliothek bietet Konnektivität zu Node-RED und msg-Ereignisbehandlung.
  • Schreiben Sie Ihr eigenes HTML, CSS und JavaScript, um die perfekte Front-End-Benutzeroberfläche für Ihre Bedürfnisse zu definieren.
  • Bearbeiten Sie Ihren benutzerdefinierten Front-End-Code im Node-RED-Editor, ohne dass Sie auf das Dateisystem des Servers zugreifen müssen.
  • Benötigt fast keine Boilerplate in Ihrem Front-End-Code, um zu funktionieren.
  • Einfaches mitgeliefertes Beispiel funktioniert sofort, es muss nichts anderes als der Knoten installiert werden.
  • VueJS, MoonJS erweitert und Caching-Beispielabläufe enthalten.
  • Optionale Index-Webseiten-Auflistung der verfügbaren Dateien.

Aktuelle Einschränkungen sind:



  • Sie müssen Ihr eigenes HTML schreiben, uibuilder erledigt das (noch) nicht für Sie. Dies ist beabsichtigt. Ich hoffe, irgendwann ein Komponentendesign zur Verfügung zu haben, das zusätzliche Optionen bietet und das Erstellen der Benutzeroberfläche erleichtert.
  • Sie müssen die Speicherorte der Front-End-Bibliotheken für installierte Bibliotheken kennen und Ihren HTML-Code entsprechend bearbeiten. Die |_+_| admin API (zugänglich über die Admin-UI jedes Knotens) zeigt Ihnen alle Stammordner und was die Paketautoren als Haupteinstiegspunkt für alle aktiven Pakete melden. Es gibt jetzt auch eine vereinfachte Informationsseite für die aktuell angezeigte uibuilder-Knoteninstanz, auf die Sie über eine Schaltfläche im Konfigurationsfenster zugreifen können.
  • Aus Effizienzgründen können Sie Ihren benutzerdefinierten Front-End-Code (HMTL, JS, SCSS usw.) noch nicht kompilieren/komprimieren. Dies wird in Kürze hinzugefügt.

uibuilder ist eher das Gegenteil von Node-REDs Dashboard. Während dies das Erstellen einer Benutzeroberfläche sehr einfach machen soll, dies jedoch mit einigen Einschränkungen ausgleicht, können Sie mit jedem Framework (oder keinem) alles tun, was Sie sich vorstellen können, ohne dass Sie Ihr eigenes schreiben müssen eigenen Frontend-Code. Dieser Knoten sollte auch a . sein Menge schneller und ressourceneffizienter als Dashboard, obwohl dies natürlich davon abhängt, welche Front-End-Bibliotheken und Frameworks Sie verwenden.

1. Zusätzliche Dokumentation

Es gibt viele weitere Informationen in der WIKI . Darüber hinaus gibt es mehr technische und Entwicklerdokumentation in der Dokumente Ordner, der ebenfalls verfügbar ist, sobald Sie uibuilder zu Ihrer Node-RED-Palette hinzugefügt haben, als Dokumentations-Website unter |_+_|. Dafür gibt es im Konfigurationspanel eine Schaltfläche.



2. Erste Schritte

2.1. Installieren

Um die aktuelle Live-Version zu installieren, verwenden Sie bitte den Paletten-Manager von Node-RED.

Um einen bestimmten Entwicklungs- oder Testzweig von GitHub zu installieren, verwenden Sie |_+_| von der Befehlszeile auf dem Server, nachdem Sie zuerst in die |_+_| Ordner (normalerweise |_+_|).

Um eine bestimmte Version von npm zu installieren, verwenden Sie |_+_|. Neben Release-Versionen (z. B. 1.2.2) können Sie auch |_+_| und |_+_|. Manchmal |_+_| kann auch vorhanden sein. Besuche die Registerkarte 'Versionen' auf der npm-Site für verfügbare Versionen.

HINWEIS : Bei der Installation von v2.x erhalten Sie möglicherweise eine Warnung von der Installation:

uibindex

Es ist sicher, diese Warnung zu ignorieren, es sei denn, Sie möchten selbst die Kontrolle über Bootstrap übernehmen, da vue-bootstrap sie nicht wirklich benötigt.

2.2. Einfacher Ablauf

Fügen Sie nach der Installation einen einfachen Ablauf hinzu, der aus einem Trigger, einem uibuilder und einem Debug-Knoten besteht, die alle der Reihe nach verbunden sind. Stellen Sie die Änderungen bereit, doppelklicken Sie dann auf den uibuilder-Knoten und klicken Sie auf die Webseiten-URL.

Das zeigt Ihnen eine einfache Seite, die Gebrauch macht von VueJS und Bootstrap-Ansicht . Es zeigt die gesendeten und empfangenen Nachrichten an und verfügt über eine Schaltfläche, die einen Zähler erhöht, während der aktualisierte Zähler an Node-RED zurückgesendet wird.

2.3. Bearbeiten Sie die Quelldateien

Klicken Sie im Konfigurationsbereich des Knotens im Editor auf Quelldateien bearbeiten, um den Front-End-Code anzuzeigen. Nehmen Sie einige Änderungen vor, um zu sehen, was passiert.

Wenn Sie mehr Platz für den Editor benötigen, klicken Sie auf die Schaltfläche ⤡ unterhalb des Texteditors. Um zurückzukehren, drücken Sie dieselbe Taste (die jetzt hervorgehoben ist) oder die Esc-Taste.

Klicken Sie auf die Schaltfläche Speichern, um die Änderungen zu speichern, Zurücksetzen, um zur gespeicherten Datei zurückzukehren, Schließen, um den Editor zu verlassen. Beachten Sie, dass die Schließen-Schaltfläche nicht verfügbar ist, während ausstehende Änderungen vorliegen. Drücken Sie zuerst auf Speichern oder Zurücksetzen. Der rote Fertig-Button des Editors ist ebenfalls deaktiviert, solange noch Änderungen ausstehen.

Mit den entsprechenden Schaltflächen können Sie eine neue Datei erstellen und auch Dateien und Ordner löschen. Wenn Sie eines der Standard-|_+_| . löschen Dateien und haben die Index kopieren Flag gesetzt (in erweiterten Einstellungen), wird die Datei automatisch durch die Standardvorlagendatei ersetzt. Nützlich, wenn Sie in ein komplettes Durcheinander geraten.

Die Standardeinstellung ist enthalten VueJS , Bootstrap und Bootstrap-Ansicht Pakete sorgen für eine wirklich einfach zu verwendende Ersteinrichtung, die sehr einfach zu verwenden ist, aber leistungsstark ist, um jede Art von Web-Benutzeroberfläche zu erstellen. Die Standardvorlagendateien sollten Ihnen einige Ideen geben, wie Sie alles verwenden können.

2.4. Installieren Sie zusätzliche Front-End-Bibliotheken

Wenn die Standardeinstellung VueJS , Bootstrap und Bootstrap-Ansicht Wenn Ihnen Bibliotheken entweder nicht ausreichen oder Sie ein anderes Framework verwenden möchten, klicken Sie auf die Schaltfläche Front-End-Bibliotheken verwalten. Klicken Sie dann auf die Schaltfläche + hinzufügen und geben Sie den Namen des Pakets ein, wie er in npm definiert ist.

Von hier aus können Sie auch installierte Bibliotheken entfernen.

Der uibuilder Genaue Information Die API-Seite (Link im Konfigurationsbereich) zeigt Details zu allen installierten Paketen, deren URL für Ihre HTML-Seiten und ihren physischen Standort auf dem Server (damit Sie die richtige Datei für Ihre HTML-Datei finden können).

2.5. Zusätzliche Dokumentation im WIKI

Besuche die WIKI für weitere Informationen, Hilfe und Beispiele.

Neben verschiedenen Beispielen enthält das WIKI:

Freiwilligenarbeit im Bereich Data Science

3. Funktionen

  • Ein einzelner Knoten wird verwendet, um einen Endpunkt (durch seinen URL-Pfad) zu definieren. Der Knoten kann beliebig oft in Flows eingebunden werden - aber jede Instanz muss einen eindeutigen URL-Pfadnamen haben.

  • Jede Knoteninstanz bekommt ihre eigene Socket.IO Namensraum mit der URL-Pfadeinstellung übereinstimmen. Beachten Sie, dass Socket.IO wird Sockets effizient gemeinsam nutzen, während der Verkehr nach Namespace getrennt bleibt.

    Der Namespace ist die uibuilder-URL (im Editor definiert) mit einem vorangestellten /.

  • Es gibt eine Front-End-Bibliothek |_+_| oder |_+_| das verbirgt alle Komplexitäten der Verwendung Socket.IO damit Ihr eigener FE-Code einfach zu schreiben ist. Es bietet ein einfaches Ereignisbehandlungssystem, mit dem Sie Änderungen abonnieren und sofort verarbeiten können. Die Standardeinstellung |_+_| Datei enthält Details und Anwendungsbeispiele. Die Bibliothek ist so geschrieben, dass sie über HTML bezogen oder über einen Build-Schritt (z. B. Webpack) eingebunden werden kann.

    Der Umgang mit eingehenden Nachrichten von Node-RED ist so einfach wie:

    /uibdocs

    Das Senden einer Nachricht an Node-RED ist so einfach wie:

    npm install TotallyInformation/node-red-contrib-uibuilder# --save
  • npm-Pakete können über die Admin-Benutzeroberfläche des Knotens in Node-RED installiert (oder entfernt oder aktualisiert) werden. Auf diese Weise können Sie die Verfügbarkeit von Frontend-Bibliotheken sehr einfach verwalten. Kein Zugriff auf die Befehlszeile des Servers erforderlich. Jede als npm-Paket verfügbare Frontend-Bibliothek kann auf diese Weise verwaltet werden. Installierte Pakete werden Ihrer Web-App zur Verfügung gestellt.

  • Das Modul des Knotens enthält standardmäßige HTML-, JavaScript- und CSS-Master-Vorlagendateien, die in Ihren lokalen src-Ordner kopiert werden, damit Sie sie bei Bedarf bearbeiten können. Dies kann über ein Flag ausgeschaltet werden. Es bietet Ihnen eine einfach zu befolgende Vorlage, die Ihre Web-App-Entwicklung ankurbelt.

  • Nachrichten, die von Node-RED an Ihre Web-App gesendet werden, können ein |_+_| . aufweisen und |_+_| -Eigenschaft, die diesen Code dynamisch zur Webseite hinzufügt - sofern dies in den Einstellungen zulässig ist (Standard ist aus).

  • Einschließlich eines |_+_| Attribut auf Nachrichten, die von Node-RED gesendet werden, wird nur an diese ID gesendet.

    Beachten Sie, dass eine ID mit einem bestimmten Browser-Tab verknüpft ist und zurückgesetzt wird, wenn die Seite neu geladen wird.

    Die |_+_| -Attribut wird jeder Nachricht hinzugefügt, die vom Client an Node-RED gesendet wird. Sehen das WIKI für mehr Informationen.

  • Ein zweiter Ausgabeport ermöglicht den Zugriff auf einige Steuernachrichten.

    Dies ermöglicht eine zusätzliche Verarbeitung, wenn ein Client eine Verbindung herstellt oder trennt, eine Instanz (erneut) bereitgestellt wird oder ein Socketfehler auftritt.

    Dies wird häufig verwendet, um zwischengespeicherte Informationen an einen neu verbundenen Client (oder einen Client, bei dem die Seite neu geladen wurde) zurückzusenden.

    Andere Verwendungen könnten die Ausgabe einiger Standardinformationen umfassen, wenn sich ein neuer Client verbindet. Oder Sie können die Informationen verwenden, um Nutzungsmetriken zu speichern. Siehe die Struktur der Kontrollnachrichten Seite im WIKI für Details.

  • Beim Einsatz der Erste Instanz von uibuilder wird ein neuer Ordner in Ihrem Node-RED-Benutzerverzeichnis (normalerweise |_+_|) mit einem festen Namen von |_+_| erstellt.

    Wenn Sie die Projektfunktion von Node-RED verwenden, wird der Ordner stattdessen in Ihrem Projektordner erstellt.

  • Bei der Bereitstellung einer neuen Instanz wird ein neuer Unterordner innerhalb von |_+_| geschaffen.

    Der Name ist identisch mit dem URL-Pfad, der in den Einstellungen der Knoteninstanz angegeben ist. (standardmäßig |_+_|). |_+_| und |_+_| Unterordner werden ebenfalls erstellt. Die |_+_| Name ist auf maximal 20 Zeichen beschränkt und darf nicht |_+_| . sein da dies reserviert ist.

    Die Dateien in diesen Ordnern können im Konfigurationsfenster des Knotens im Editor von Node-RED bearbeitet werden. Keine Befehlszeile oder andere Dateizugriffe auf dem Server erforderlich.

  • Wenn das lokale |_+_| Ordner enthält ein |_+_| Datei, die |_+_| Ordner wird bedient, andernfalls wird der |_+_| Ordner bedient werden. Auf diese Weise können Sie einen Build-Schritt ausführen (z. B. webpack/babel). Das WIKI enthält Anweisungen zum Ausführen eines Build-Schritts.

  • Jede Ressource (html, css, js, Bild usw.), die innerhalb des |_+_|/|_+_| . platziert wird Unterordner steht dem Browser-Client zur Verfügung. Die Standard-URL wäre |_+_| (wo der Pfad wie im obigen Punkt festgelegt ist). Diese URL lädt |_+_|. Ressourcen-URLs nehmen die |_+_| Node-RED-Einstellung berücksichtigt.

  • Ein zusätzlicher gemeinsamer Ordner wird im uibuilder-Stammordner erstellt (z. B. |_+_|)

    Diese wird jeder Knoteninstanz zur Verfügung gestellt und wird verwendet, um mehreren Web-Apps gemeinsame Ressourcen zur Verfügung zu stellen.

    Siehe die Seite URI-Pfade im WIKI für Details zu allen URIs, die für Ihre Web-Apps verfügbar sind.

    Besser noch, sehen Sie sich die Schaltflächen für uibuilder-Details und Instanzdetails im uibuilder-Konfigurationsfenster im Node-RED-Editor an. Diese zeigen Seiten mit detaillierteren Informationen an.

  • Einige VueJS-Hilfsfunktionen sind jetzt in der Frontend-Bibliothek enthalten. Die Idee war, die Komplexitätslücke zwischen dem Node-RED-Dashboard und dem uibuilder für unerfahrene Front-End-Programmierer zu schließen. Weitere Informationen finden Sie in den technischen Dokumenten.

4. Bekannte Probleme

Das sind Dinge, die man beachten sollte und die ich irgendwann aufräumen möchte.

  • v3.0.0 hat kein vollständig funktionierendes Sicherheitsmodell. Es ist nicht vollständig getestet und funktioniert möglicherweise nicht. Verwenden Sie dieses Teil nicht in der Produktion. Alles andere ist in Ordnung.

  • Einige der VueJS-Helfer in der Front-End-Bibliothek haben Grenzfälle, in denen sie nicht funktionieren.

  • Socket.IO ist standardmäßig nicht gesichert Verwenden Sie die ExpressJS- und Socket-Middleware-Funktion von uibuilder, um die Dinge richtig zu sichern, bevor Sie die Verwendung über das Internet in Betracht ziehen.

    Beachten Sie jedoch, dass die Socket-Middleware nur bei der anfänglichen Socket-Verbindung aufgerufen wird. Sobald die Verbindung auf Websocket aktualisiert wird, wird dies nicht mehr aufgerufen.

    Ich hoffe, dies in einer zukünftigen Version zu verbessern.

    Sie können dies auch umgehen, indem Sie einen Proxy wie NGINX oder HAproxy als TLS-Endpunkt verwenden. Stellen Sie nur sicher, dass Sie sowohl den Websocket-Datenverkehr als auch den Standard-Webdatenverkehr als Proxy verwenden.

5. Diskussionen und Vorschläge

Verwenden Sie die |_+_| Kategorie in der Node-RED Diskursforum

Oder verwenden Sie die GitHub-Problemprotokoll um Probleme anzusprechen oder Vorschläge und Verbesserungen einzubringen.

Bitte beachten Sie, dass ich selten Zeit habe, die #uibuilder-Kanal in Slack ist es am besten, Discourse zu verwenden oder ein Problem anzusprechen.

6. Mitwirken

Wenn Sie zu diesem Knoten beitragen möchten, wenden Sie sich an Vollständige Informationen über GitHub oder stellen Sie eine Anfrage im GitHub-Problemprotokoll .

Bitte wende dich an die Beitragsrichtlinien für mehr Informationen.

7. Entwickler/Mitwirkende

Bitte schaut auch auf meinem Blog vorbei, Viel Lärm um IT , es enthält Informationen zu allen möglichen Themen, hauptsächlich IT-bezogen, einschließlich Node-RED.

Visual Studio Code dunkles Thema

Download-Details:

Autor: TotallyInformationen

Demo: https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki

Quellcode: https://github.com/TotallyInformation/node-red-contrib-uibuilder

#node #nodejs #javascript