node red contrib uibuilder

Node-Red-Contrib-Uibuilder

Uibuilder für Knoten-Red ermöglicht die einfache Erstellung von datengesteuerten Front-End-Webanwendungen.

Es enthält viele Helferfunktionen, mit denen Sie den Code zum Erstellen datengesteuerter Webanwendungen und Benutzeroberflächen, die in Knoten-Red integriert sind, reduzieren oder beseitigen können.

Notiz

Uibuilder löst eine Qualitätswarnung im Spros Scorecard -Eintrag aus.

"Anzahl der Abhängigkeiten" ist> 6 - Dies ist auf die große Anzahl von Funktionen in Uibuilder zurückzuführen und wird erwartet. Trotzdem hat V7 nur 7 Abhängigkeiten. 1 Weitere sollen in einer zukünftigen Veröffentlichung entfernt werden.

Installation

Uibuilder wird am besten mit dem Palettenmanager von Node-Red installiert.

Handbuch Installationen und andere Versionen

Um manuell aus einer Befehlszeile auf Ihrem Knoten-Red-Server zu installieren:

 cd ~ /.node-red
npm install node-red-contrib-uibuilder

Um alte Versionen zu installieren, geben Sie die Hauptversionsnummer an:

 cd ~ /.node-red
npm install node-red-contrib-uibuilder@v5

Um Entwicklungszweige zu installieren, installieren Sie bitte bei GitHub. BranchNames sind zukünftige Versionsnummern, prüfen Sie GitHub auf verfügbare Filialen:

 cd ~ /.node-red
npm install totallyinformation/node-red-contrib-uibuilder#v7.1.0

Sie müssen den Knoten-Rot neu starten, wenn Sie manuell installieren.

Aktualisierungen

Der aktuelle ChangeLog enthält alle Änderungen und Anforderungen für jede Version.

Ältere Änderungen finden Sie in den vorherigen Änderungsdokumenten: Changelog-V5, Changelog-V5, Changelog-V3/V4, Changelog-V2 und Changelog-V2.

Erste Schritte

Nach der Installation ist Folgendes ein typischer einfacher Fluss, um loszulegen.

1. Fügen Sie einen uibuilder -Knoten hinzu. Öffnen Sie seine Einstellungen und geben Sie ihm eine "URL", die als identifizierende Name verwendet wird. Schließen Sie die Einstellungen und klicken Sie auf die Schaltfläche Bereitstellung.
2. Öffnen Sie die Einstellungen des uibuilder erneut und klicken Sie auf die Schaltfläche "Öffnen", um die resultierende Webseite anzuzeigen.

Sie sind jetzt bereit, das Front-End-HTML/JavaScript/CSS zu bearbeiten, wenn Sie dies wünschen, und Logik in Knoten-rot hinzuzufügen, um Eingänge bereitzustellen und Ausgänge zu verarbeiten. Sie können auch die No-Code-Funktionen von Uibuilder verwenden, um auch Ihre Benutzeroberfläche oder stattdessen zu erstellen.

In der Dokumentation und im Einführungsvideo finden Sie die Erstspiele-Walkthrough für weitere Hilfe. Probieren Sie auch die integrierten Beispielströme aus.

Beispiele

Verwenden Sie innerhalb von Knoten-Red das Hamburger-Menü. Klicken Sie auf Import. Klicken Sie auf Beispiele. Wählen Sie den Ordner node-rot-contrib-uibuilder und wählen Sie ein Beispiel.

Die Feature der Vorlagen in Uibuilder bietet einen Arbeitscode verschiedener Konfigurationen.

Weitere Beispiele finden Sie auf der Node-Red Flow-Site und dem Uibuilder-Wiki. Siehe auch die FAQs und beantwortete Fragen im Knoten-Red-Forum.

Dokumentation und andere Links

Weitere Informationen finden Sie auf der Website der Dokumentation. Dies kann auch ohne Internetverbindung aus den Uibuilder -Knoten zugegriffen werden.

Auf YouTube gibt es eine Bibliothek mit "offiziellen" Video -Tutorials. Andere Leute haben ebenfalls Inhalte im Zusammenhang mit Uibuilder produziert.

Fragen, Probleme und Vorschläge

Der beste Ort, um Fragen zu stellen oder mögliche Verbesserungen zu diskutieren, ist das Knoten-Red-Forum.

Verwenden Sie alternativ das GitHub -Problemprotokoll, um Probleme zu lösen oder Vorschläge und Verbesserungen zu beitragen, und die Seite GitHub -Diskussionen für allgemeine Fragen, Vorschläge usw.

Andere Links

• Uibuilder für Node-Red

  • ❓ Ideen, Fragen und allgemeine Hilfe-Stellen Sie Ihre Frage im Knoten-Red-Forum mit dem Node-Red-Contrib-Uibuilder-Tag mit
  • ? Dokumentation - Gehen Sie zur neuesten Dokumentation
  • ? ‍ Flüsse - Beispielflüsse, Knoten und Sammlungen im Zusammenhang mit Uibuilder
  • Wiki - Mehr Dokumentation und Beispiele
  • Beispiel Svelte External Template - falls Sie Ihre eigene schlanke App erstellen möchten
  • Beispiel Einfache externe Vorlage - falls Sie Ihre eigene externe Vorlage erstellen möchten
  • Erweiterung der Uibuilder -Erweiterung - nützliche Diagramme, zeigt aber auch, wie Sie Ihre eigene Erweiterung erstellen
  • ? Event -Handler -Modul von Uibuilder verwendet - so können Sie einige der inneren Arbeiten sehen

• ? UI -Bibliotheksmodul von Uibuilder - kann eigenständig verwendet werden, um die UI -Standardkonfiguration in HTML zu verwandeln

• ? Node-Red-Contribrib-Moment-Knoten, um das Momentjs Datum/Zeitbearbeitungsbibliothek in Node-rot zu nutzen

• ? Testknoten für Knotenredukte-Einige Testknoten für Knotenrot, die Ihnen helfen, zu verstehen, wie alles funktioniert

• ? Hotnipi -Gauge -Webkomponente - eine wirklich gut aussehende Messgerätekomponente. Arbeitet mit Node-Red, Uibuilder oder eigenständig

• ? Experimentelle Webkomponenten-haben einige nodenrot- und uibuilder-spezifische Verbesserungen, aber auch gut funktionsfähig.

• ? Array Grouper - eigenständige Funktion, um ein Array von Objekten zu formen

Zweck

Der Zweck von Uibuilder ist:

• Unterstützen Sie einfache Methoden zum Erstellen und Bereitstellen von datengesteuerten Web-Apps und Webseiten (auch als Web-Benutzer-Interfaces bezeichnet).
• Seien Sie ein Kanal zwischen Node-Red und Front-End (Browser) UI-Web-Apps.
• Agnostisch sein. Um Uibuilder zu verwenden, wird kein Framework benötigt, aber es funktioniert mit ihnen, wo gewünscht. Uibuilder zielt darauf ab, die Anforderung für ein Rahmen zu verringern, indem es die Arbeit mit Vanille -HTML/CSS erleichtert.
• Geben Sie Schnittstellen-/Datenstandards für den Austausch von Daten und Steuerelementen zwischen Knoten-Red und Webseiten an.
• Aktivieren Sie die Erstellung und Verwaltung mehrerer Web-Apps aus einer einzelnen Knoten-Red-Instanz.
• Reduzieren Sie die Menge an Front-End-Code (HTML/JavaScript), die zum Erstellen und Verwalten einer Web-App erforderlich sind.
• Reduzieren Sie das Wissen, das zum Erstellen zuverlässiger, zugänglicher Web-Apps erforderlich ist, indem Sie Funktionen mit niedrigem Code und No-Code-Funktionen bereitstellen.
• Machen Sie es einfach, Front-End-Bibliotheken zu installieren und zu bedienen, um die Entwicklung komplexerer Web-Apps zu unterstützen.

Merkmale

Die Kernmerkmale von Uibuilder:

• So weit wie möglich verwendet nur Vanille, native HTML, CSS und JavaScript. Abgesehen vom Socket.io-Kunden für Kommunikation (der in die Front-End-Bibliothek eingebacken wird) sind keine anderen Front-End-Bibliotheken erforderlich. Uibuilder bleibt so nah wie möglich an native HTML, um zukünftige Kompatibilitätsprobleme zu vermeiden. Es zielt jedoch darauf ab, die Interaktion mit nativem HTML zu vereinfachen.
• Knoten zur Aktivierung der Übersetzung von Eingabedaten mit Null-Code in nutzbare und zugängliche Webelemente.
• Fähigkeit für mit niedrigem Code, konfigurationsorientierte (datengesteuerte) UIs. Erstellen eines Frameworks zur Beschreibung einer Benutzeroberfläche und zur Übersetzung in den tatsächlichen Code, ohne Code schreiben zu müssen.
• 2-Wege-Kommunikationskanal zwischen dem Node-Red-Server (Back-End) und der Front-End-Benutzeroberfläche.
• Ein Knoten-Red-Knoten, der als Schwerpunkt für Kommunikation mit anderen Knoten für zusätzliche Benutzerfreundlichkeit fungiert.
• Front-End-Bibliothek: Die komplexen Teile der Kommunikation im Kundenbrowser durchführen; Manipulation der UI leichter und konsequenter machen; Machen Sie es einfach, Daten nach Bedarf an den Knoten zurückzugewinnen (sowohl automatisch als auch manuell).
• Einfach zu verwendende Vorlagen und Beispiele für Front-End-Code, mit denen Personen schnell mit dem Erstellen von Web-Apps beginnen können.
• Verwaltung und Diener von NPM-Paketen, die Front-End-Bibliotheken mit dem Front-End-Code problemlos konsumieren lassen.
• Bearbeitung von Front-End-Code aus dem Node-Red-Editor (für kleine Änderungen ausgelegt, verwenden Sie im Allgemeinen Webentwicklungs-Tools).
• Verschiedene Server -Middleware- und API -Optionen für zusätzliche benutzerdefinierte Funktionen.
• Eine Caching -Fähigkeit, die es mit neuem Zusammenhang mit den neuesten Daten und Konfigurationen ermöglicht. Wenn Sie Clients beitreten/verlassen, erstellen Sie Benachrichtigungen in Node-Red.
• Ein Front-End-Router zum Erstellen von einseitigen Apps.
• Haben Sie so viele uibuilder -Knoteninstanzen, wie Sie möchten. Jede Instanz ermöglicht die Erstellung vieler Webseiten und Unterordner für das einfache Management.
• Jede uibuilder Knoteninstanz bietet einen privaten 2-Wege-Kommunikationskanal zwischen dem UI-Code des Knoten-Red-Servers (Back-End) und Browser (Front-End).
• Unterstützt die Verwendung von Standard -Webentwicklungs -Workflows.
• Ermöglicht die Erstellung eines dedizierten Webdienstes, um die unabhängige Sicherheit zu erleichtern.

No-Code-UIs

Uibuilder erweitert seine Funktionen ohne Code weiter. Die uib-element , uib-tag und uib-update Knoten bieten No-Code-Methoden zum Erstellen und Aktualisieren datengesteuerter Web-UI.

uib-element nimmt einfache Daten und Ausgänge Konfigurationsdaten auf. Dies kann dann über den uibuilder Knoten an das Front-End gesendet werden. Alternativ kann es gespeichert und das Ergebnis einer anfänglichen Last verwendet werden. In Uibuilder V6.1 sind mehrere einfache Optionen wie Tabellen und Listen verfügbar. In zukünftigen Versionen werden zusätzliche Elemente und Strukturen zur Verfügung gestellt. Der Uibuilder-Front-End-Client nimmt die Konfigurationsinformationen auf und erstellt html-Elemente dynamisch und fügt sie in die Webseite ein (oder beseitigt/nach Bedarf).

Dies ist zwar nicht der effizienteste Verarbeitungsansatz (da Updates meist das gesamte Element ersetzt, das für Dinge wie große Tabellen ziemlich groß sein könnte), ist dies aus der Sicht der Autorierung sehr effizient. Daher bietet der uib-update -Knoten einen zielgerichteten Ansatz zum Aktualisieren und Ändern spezifischer Attribute und "Slot" -Hinhalt für Elemente.

Mit dem uib-tag -Knoten können Sie dann ein einzelnes HTML-Element erstellen und deckt so all die vielen Dinge ab, die uib-element möglicherweise nicht (noch) abdecken. Dies funktioniert sogar mit Webkomponenten, die native Verbesserungen von Vanille -HTML/JavaScript an HTML sind.

Es ist wichtig zu beachten, dass für diesen Ansatz keine Front-End-Rahmenbedingungen wie VueJs oder React erforderlich sind! Alles verwendet Vanille HTML, JavaScript und CSS unter der Haut und ist daher mit aktuellen und zukünftigen Webstandards kompatibel .

UIs mit niedriger Code

Die Daten, die uib-element ausgibt, sind ein Format, das Sie in Ihren eigenen Strömen in Knoten-Rot und bei Bedarf sogar im Front-End-Code verwenden können. Es beschreibt eine Reihe von HTML -UI -Elementen, muss jedoch nicht den HTML -Code schreiben. Das Konfigurationsschema ist sehr flexibel und ermöglicht es sogar, Konfigurationsdaten, HTML, Skripte und neue ECMA -Module/-komponenten aus externen Dateien zu laden.

Das in den Front-End-Client eingebaute Schema und die UI-Erstellungsfunktionen sind speziell so konzipiert, dass sie mit aktuellen und zukünftigen HTML-Standards arbeiten, um die Arten von Problemen zu vermeiden, die häufig bei der Verwendung von Front-End-Frameworks von 3. Party auftreten (z. B. Änderungen der Hauptversion, die Rewrites aller Ihrer Werkzeuge erzwingen). Es sollten also Module, ECMA -Komponenten und zukünftige ECMA -Versionen unterstützt werden.

Die ui.js Bibliothek ist jetzt auch für alle verfügbar, die sie in ihren eigenen Projekten verwenden können und arbeitet ohne Uibuilder vollständig eigenständig. Es wird auch in den uib-html Knoten gebacken, der Konfigurationen mit niedrigem Code in HTML von innerhalb von Knoten-Rot verwandelt.

Zukünftige Richtung

Uibuilder wird weiterhin unabhängig von Front-End-Frameworks sein, aber es wird auch weiterhin so kompatibel wie möglich sein, sodass ein gewünschtes Framework damit verwendet werden kann.

• Es wird weiterhin mehr vorgefertigte Null-Code-Elemente erhalten.
• Es erhält eine verbesserte Kontrolle über die Instanz -Root -Ordnerstruktur und die Möglichkeit, npm run auszuführen, die im package.json definiert sind.
• Weitere Videos!

Längerfristiger Fokus

Es ist weiterhin der Wunsch, eine Seitenbauerfunktion zu erstellen, damit Personen ohne Codierungsfähigkeiten großartige datengesteuerte Web-Apps erstellen können.

• Die Dokumentationsqualität wird sich weiter verbessern.
• Die Anzahl der Abhängigkeiten mit dem 3. Parteienmodul wird reduziert. Beginnend mit der eventuellen Entfernung von fs-extra zugunsten der einheimischen Versprechen der FS-Bibliothek. Am wahrscheinlichsten von arun gefolgt.
• Sobald Node.js v18 oder 20 die Basis ist, wird der Code wahrscheinlich in mehreren Unterverpackungen in einem Mono-Repo neu gestaltet.

Feature -Details und Vorteile

• Als Alternative zum offiziellen Knoten-rotes Dashboard entwickelt. Ohne die Gemeinkosten und Einschränkungen.
• Steuern Sie alles von der Node-Red Admin-Benutzeroberfläche. Bearbeiten Sie Ihre Front-End-Ressourcendateien und verwalten Sie Front-End-Pakete. Sie müssen nicht auf die Befehlszeile der Server zugreifen.
• Verwalten Sie Start -up -Vorlagen. Interne Vorlagen für Vanille-HTML, Svelte, VueJs (V2 & V3) und VueJs/Bootstrap-Vue werden bereitgestellt. Lastvorlagen aus anderen Repositories über Degit . Erleichtert es einfach, Vorlagen zu teilen, die eine ganze App bereitstellen oder einfach nur mit Boilerplate umgehen.
• Haben Sie so viele benutzerdefinierte Benutzeroberflächen, wie Sie möchten. Für jeden Einstiegspunkt wird nur ein Knoten benötigt. Verwenden Sie Linkknoten, um Daten aus anderen Teilen Ihrer Ströme zu senden. Ein Einstiegspunkt kann mehrere Webseiten enthalten.
• Hat eine Steuerschnittstelle von der Nachrichtenschnittstelle separat. Wissen Sie, wann ein Browser -Registerkarte eine Verbindung herstellt oder trennen, zwischengespeicherte Daten senden und mehr.
• Geben Sie eine stabile Client -ID an, die ein bestimmtes Browserprofil identifiziert, bis es neu gestartet wird. Es wird ein Tabid bereitgestellt, der eine bestimmte Registerkarte Browser auf einem Client -Gerät identifiziert.
• Geben Sie Informationen über den Client, der eine MSG sendet, Informationen an, damit die Sicherheit und eine andere Verarbeitung den Client, den Benutzer usw. identifizieren können.
• Kann viel leichter und mobilenfreundlicher sein als das offizielle Knoten-rotes Dashboard.
• Verwenden Sie ein beliebiges Front-End-Framework, das Ihnen gefällt. Einfach über den integrierten Bibliotheksmanager installieren.
• Verwenden Sie ohne Front-End-Framework, wenn Sie es vorziehen. Halten Sie es leicht und einfach. Probieren Sie dies mit der "leeren" Vorlage und dem uib-element -Knoten aus.
• Die mitgelieferten Front-End-Bibliotheken ( uibuilder.iife.js , uibuilder.esm.js ) bieten eine Konnektivität zur Handhabung von Node-Red und MSG sowie einige Helper-Dienstprogrammfunktionen.
• Schreiben Sie Ihr eigenes HTML, CSS und JavaScript, um die perfekte Benutzeroberfläche für Ihre Anforderungen zu definieren. Oder definieren Sie es mit einer JSON -Konfigurationsbeschreibung.
• Bearbeiten Sie Ihren benutzerdefinierten Front-End-Code aus dem Node-Red-Editor. Laden Sie Ihre Kunden automatisch auf Änderungen am Code auf. Ideal für die schnelle Entwicklung. Beachten Sie , dass dies für schnelle Änderungen ausgelegt ist. Es wird empfohlen, Ihre normale Webentwicklungs -Toolchain für größere Änderungen zu verwenden.
• Benötigt fast keine Kesselplatte in Ihrem Front-End-Code, um zu arbeiten.
• Optionale Index -Webseite Auflistung der verfügbaren Dateien.
• Zwei detaillierte Admin -Info -Webseiten sind enthalten, um Autoren zu verstehen, wo alles ist und was verfügbar ist.
• Verwendet standardmäßig die eigenen ExpressJS-Webservers von Node-Red. Wechseln Sie bei Bedarf zu einem benutzerdefinierten ExpressJS -Server. Bei der Verwendung eines benutzerdefinierten Servers können Seiten auch EJB Server-Side-Vorlagen enthalten.
• Middleware für ExpressJs (für Webdienste) und Socket.io (für die Kommunikation, sowohl bei der ersten Verbindung als auch in der Message), damit Sie Ihre eigenen benutzerdefinierten Funktionen einschließlich Sicherheit hinzufügen können.
• Kann für jede Uibuilder -Instanz benutzerdefinierte APIs erstellen.
• Verwenden Sie die ui.js -Bibliothek in Ihren eigenen Projekten!

Beitragen

Wenn Sie zu diesem Knoten beitragen möchten, können Sie über GitHub Total -Informationen kontaktieren oder eine Anfrage im GitHub -Problemprotokoll aufstellen.

Pull -Anfragen sowohl für Code als auch für Dokumentationen werden begrüßt und das Wiki ist offen für neue Einträge und Korrekturen (aber lassen Sie es mich bitte wissen, wenn Sie eine Änderung vornehmen).

Weitere Informationen finden Sie in den beitragenden Richtlinien.

Sie können auch die Entwicklung von Uibuilder unterstützen, indem Sie die Entwicklung gesponsert.

Github -Sponsoring, Paypal -Sponsoring

Sponsoren

• @Magicjf

Entwickler/Mitwirkende

• Julian Knight - Der Designer und Hauptautor.
• Colin Law - Vielen Dank für das Testen, Korrekturen und Zuganfragen.
• STEVE RICKUS - Vielen Dank für das Testen, die Korrekturen, den beigestellten Code und die Designideen.
• Ellie Lee - Vielen Dank für die PR -Fixierung doppelter MSGs.
• THOMAS WAGNER - Vielen Dank für den Lenk und die PR, wenn Sie der Projektordner verwenden, falls aktiv.
• Arlena Derksen - Danke für Vorschläge, Fehlerprüfungen und Ausgabe Nr. 59/PR #60.
• Cflurin - Danke für das Cache -Beispiel.
• Scott -Seite - IndySoft - Danke für Ausgabe Nr. 73/PR #74.
• Stephen McLaughlin - Steve -Mcl - Vielen Dank für die Fix für Ausgabe Nr. 71 und für die Verbesserungsidee -Ausgabe Nr. 102.
• Sergio RIUS - Danke für die Berichterstattung Ausgabe Nr. 121 und die Bereitstellung von PR #122 als Fix.
• Thorsten von Eicken - Vielen Dank, dass Sie PR #131 zur Verbesserung der CORS -Handhabung für Socket.io zur Verfügung gestellt haben.
• Meeki007 - Vielen Dank, dass Sie verschiedene Dokumentationsverbesserungen und Codekorrekturen vorgenommen haben.
• Scott - TalltechDude - Danke, dass Sie PR #170 geliefert haben.
• Calum Knott - Danke für das aufgeräumte Knotenblau -Logo.
• Harold Peters Inskipp - Danke für die Protokollierungsbeispiele.
• DCZYSZ - Vielen Dank für die Berichterstattung von Ausgabe Nr. 186 und zur Arbeit des komplexen asynchronen Fehlers.
• Colin J (Mudwalkercj) - Danke, dass Sie bei der Dokumentation geholfen haben.
• Marcus Davies - Vielen Dank für die Ermutigung und für das 3D -Logo.
• Fabio Marzocca (Fmarzocca)) - Vielen Dank für die Hilfe bei der Gestaltung und Prüfung der Front -End -Router -Bibliothek von UiBouter.

Viele andere Menschen haben dank aller, die dies tun, Ideen und Vorschläge beigetragen haben, sie sind sehr willkommen.

Bitte schauen Sie sich auch meinen Blog an, viel Ado darüber, es enthält Informationen zu allen möglichen Themen, hauptsächlich mit dem Zusammenhang, einschließlich Knoten-Red.