node red contrib uibuilder

nœud-rouge-contribuilder

Uibuilder pour Node-Red permet la création facile d'applications Web frontales basées sur les données.

Il comprend de nombreuses fonctionnalités d'assistance qui peuvent réduire ou éliminer la nécessité d'écrire du code pour créer des applications Web basées sur les données et des interfaces utilisateur intégrées à Node-Red.

Note

Uibuilder déclenche un avertissement de qualité dans l'entrée du tableau de bord des flux.

"Nombre de dépendances" est> 6 - cela est dû au grand nombre de fonctionnalités dans Uibuilder et est attendu. Même ainsi, V7 n'a que 7 dépendances. 1 De plus devrait être supprimé dans une version future.

Installation

Uibuilder est mieux installé à l'aide du gestionnaire de palettes de Node-Red.

Installations manuelles et autres versions

Pour installer manuellement, à partir d'une ligne de commande sur votre serveur de rouge nœud:

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

Pour installer d'anciennes versions, fournissez le principal numéro de version:

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

Pour installer des branches de développement, veuillez installer à partir de GitHub. Les noms de branches sont les futurs numéros de version, vérifiez GitHub pour les branches disponibles:

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

Vous devrez redémarrer Node-Red si vous installez manuellement.

Mises à jour

Le Changelog actuel contient toutes les modifications et les détails des exigences pour chaque version.

Des changements plus anciens peuvent être trouvés dans les documents de modification précédents: Changelog-V5, ChangeLog-V5, Changelog-V3 / V4, Changelog-V2 et Changelog-V2.

Commencer

Une fois installé, ce qui suit est un flux simple typique pour commencer.

1. Ajoutez un nœud uibuilder . Ouvrez ses paramètres et donnez-lui une "URL" qui est utilisée comme nom d'identification. Fermez les paramètres et cliquez sur le bouton Déploier.
2. Rouvrez les paramètres du nœud uibuilder et cliquez sur le bouton "Ouvrir" pour voir la page Web résultante.

Vous êtes maintenant prêt à modifier le HTML / JavaScript / CSS frontal si vous le souhaitez et à ajouter une logique dans Node-Red pour fournir des entrées et gérer les sorties. Vous pouvez également utiliser les fonctionnalités sans code d'Uibuilder pour créer votre interface utilisateur également ou à la place.

Veuillez consulter la procédure pas à pas dans la documentation et la vidéo d'introduction pour plus d'aide pour commencer. Essayez également les flux d'exemples intégrés.

Exemples

Dans Node-Red, utilisez le menu Hamburger. Cliquez sur Importer. Cliquez sur des exemples. Sélectionnez le dossier Node-Red-Contrib-Uibuilder et choisissez un exemple.

La fonction de modèles dans Uibuilder fournit un code frontal fonctionnel de diverses configurations.

D'autres exemples peuvent être trouvés sur le site de flux rouge de nœud et le wiki uibuilder. Voir également la FAQ et les questions répondues sur le forum RED-RED.

Documentation et autres liens

Veuillez vous référer au site Web de la documentation. Cela peut également être accessible à partir des nœuds Uibuilder même sans connexion Internet.

Il y a une bibliothèque de didacticiels vidéo "officiels" sur YouTube. D'autres gens ont également produit du contenu lié à l'Uibuilder.

Questions, problèmes et suggestions

Le meilleur endroit pour poser des questions ou discuter d'éventuels améliorations est le forum RED-RED.

Alternativement, utilisez le journal des problèmes GitHub pour soulever des problèmes ou contribuer aux suggestions et améliorations et à la page Discussions GitHub pour les questions générales, les suggestions, etc.

Autres liens

• Uibuilder pour nœud-rouge

  • ❓ Idées, questions et aide générale - Posez votre question sur le forum RED-RED à l'aide de la balise Node-Red-Contrib-Uibuilder
  • ? Documentation - Accédez à la dernière documentation
  • ? ‍ flux - Exemples de flux, nœuds et collections liés à Uibuilder
  • Wiki - Plus de documentation et d'exemples
  • Exemple de modèle externe svelte - au cas où vous souhaitez créer votre propre application Svelte
  • Exemple modèle externe simple - au cas où vous souhaitez créer votre propre modèle externe
  • Uplot Uibuilder Extension - Tableaux utiles mais montre également comment construire votre propre extension
  • ? Module de gestionnaire d'événements utilisés par Uibuilder - afin que vous puissiez voir certains des travaux internes

• ? Le module de bibliothèque d'interface utilisateur utilisé par Uibuilder - peut être utilisé autonome pour transformer l'interface utilisateur JSON standard en html

• ? Node-Red-Contrib-montant - Nœuds pour utiliser la bibliothèque de traitement Date / Temps de MomentJS dans Node-Red

• ? Nœuds de test pour Node-Red - Quelques nœuds de test pour Node-Red qui vous aident à comprendre comment tout fonctionne

• ? Composant Web Hotnipi Gauge - un composant de jauge très agréable. Fonctionne avec Node-Red, Uibuilder ou autonome

• ? Composants Web expérimentaux - Ayez des améliorations spécifiques à RED-RED et UIBUILDER mais fonctionnent également bien autonomes

• ? Array Grouper - Fonction autonome pour remodeler un tableau d'objets

But

Le but d'Uibuilder est de:

• Prise en charge des méthodes faciles pour créer et fournir des applications Web et des pages Web basées sur les données (également connues sous le nom d'interfaces utilisateur Web).
• Soyez un conduit entre les applications Web Node-Red et Front-end (navigateur).
• Être agnostic framework ui. Aucun cadre n'est nécessaire pour utiliser Uibuilder, mais cela fonctionnera avec eux là où vous le souhaitez. Uibuilder vise à réduire les besoins d'un cadre en facilitant le travail avec la vanille HTML / CSS.
• Fournissez des normes d'interface / données pour l'échange de données et de contrôles entre le rouge-rouge et les pages Web.
• Activez la création et la gestion de plusieurs applications Web à partir d'une seule instance de Node-Red.
• Réduisez la quantité de code frontal (HTML / JavaScript) nécessaire pour créer et gérer une application Web.
• Réduisez les connaissances requises pour créer des applications Web fiables et accessibles en fournissant des fonctionnalités à faible code et sans code.
• Rendez-le facile à installer et à servir des bibliothèques frontales pour prendre en charge le développement d'applications Web plus complexes.

Caractéristiques

Les caractéristiques principales d'Uibuilder:

• Dans la mesure du possible, utilise uniquement la vanille, HTML native, CSS et JavaScript. Outre le client Socket.io pour les communications (qui est cuit dans la bibliothèque frontale), aucune autre bibliothèque frontale n'est nécessaire. Uibuilder reste le plus près possible du HTML natif pour éviter de futurs problèmes de compatibilité. Cependant, il vise à faciliter l'interaction avec le HTML natif.
• Les nœuds pour activer la traduction du code zéro des données d'entrée en éléments Web utilisables et accessibles.
• Capacité pour les internes intermédiaires à faible code et à configuration (dirigés par les données). Création d'un framework pour décrire une interface utilisateur et traduire par code réel sans avoir à écrire de code.
• Canal de communication à 2 voies entre le serveur Node-Red (back-end) et l'interface utilisateur frontal.
• Un nœud rouge de nœud pour servir de foyer pour les communications avec d'autres nœuds pour une facilité d'utilisation supplémentaire.
• Bibliothèque frontale pour: faire les parties complexes des communications dans le navigateur client; rendre la manipulation de l'interface utilisateur plus facile et plus cohérente; Rendez-le facile de récupérer les données à Node-Red selon les besoins (à la fois automatiquement et manuellement).
• Des modèles et des exemples faciles à utiliser pour le code frontal pour permettre aux gens de démarrer rapidement sur la création d'applications Web.
• Gestion et portion de packages NPM qui fournissent des bibliothèques frontales consommables facilement par code frontal.
• Édition du code frontal de l'éditeur de Node-Red (conçu pour de petites modifications, utilisez généralement des outils de développement Web).
• Divers middleware et options API serveur pour des capacités personnalisées supplémentaires.
• Une capacité de mise en cache permettant aux nouveaux clients de joindre les clients à recevoir les dernières données et configurations. Les clients d'adhésion / qui laissent les clients créent des notifications dans Node-Red.
• Un routeur léger frontal pour créer des applications à une seule page.
• Ayez autant d'instances de nœuds uibuilder que vous le souhaitez. Chaque instance permet la création de nombreuses pages Web et sous-repliants pour une gestion facile.
• Chaque instance de nœud uibuilder fournit un canal de communication à deux voies privé entre le code d'interface utilisateur de Node-Red (back-end) et le navigateur (front-end).
• Prend en charge l'utilisation de workflows de développement Web standard.
• Permet la création d'un service Web dédié pour faciliter la sécurité indépendante.

Ui sans code

Uibuilder continue d'étendre ses capacités sans code. Les nœuds uib-element , uib-tag et uib-update offrent des méthodes sans code pour créer et mettre à jour l'interface utilisateur Web basée sur les données.

uib-element adopte des données et des données de configuration simples. Cela peut ensuite être envoyé à l'avant via le nœud uibuilder . Alternativement, il peut être enregistré et le résultat utilisé dans une charge initiale. Plusieurs options simples telles que des tables et des listes sont disponibles dans Uibuilder V6.1, des éléments et des structures supplémentaires seront disponibles dans les futures versions. Le client frontal UiBuilder prend les informations de configuration et construit dynamiquement des éléments HTML et les insère sur la page Web (ou supprime / met à jour au besoin).

Bien que ce ne soit pas l'approche de traitement la plus efficace (car les mises à jour remplacent principalement l'élément entier qui pourrait être assez grand pour des choses comme les grandes tables), il est très efficace dans une perspective de création. Ainsi, le nœud uib-update fournit une approche plus ciblée pour mettre à jour et modifier des attributs spécifiques et un contenu "slot" pour les éléments.

Le nœud uib-tag vous permet ensuite de créer un seul élément HTML et couvre donc toutes les nombreuses choses que uib-element pourrait ne pas (encore) couvrir. Cela fonctionne même avec des composants Web qui sont des améliorations natives Vanilla HTML / JavaScript vers HTML.

Il est important de noter qu'aucun framework frontal, tiers tel que VueJS ou React n'est nécessaire pour cette approche! Tout utilise Vanilla HTML, JavaScript et CSS sous la peau et est donc compatible avec les normes Web actuelles et futures .

Ui à faible code

Les données que les résultats uib-element sont un format que vous pouvez utiliser dans vos propres flux dans Node-Red et même dans le code frontal si vous le souhaitez. Il décrit un ensemble d'éléments d'interface utilisateur HTML mais n'a pas besoin que vous écriviez réellement du code HTML. Le schéma de configuration est très flexible et vous permet même de charger des données de configuration, HTML, scripts et nouveaux modules / composants ECMA à partir de fichiers externes.

Le schéma et les fonctions de créateur d'interface utilisateur intégrés au client frontal sont spécifiquement conçus pour fonctionner avec les normes HTML actuelles et futures afin d'éviter les types de problèmes couramment rencontrés lors de l'utilisation de frameworks frontaux tiers (par exemple, les modifications de version majeure forçaient des réécritures de tous vos outils). Ainsi, les modules ES, les composants ECMA et les futures versions ECMA devraient tous être pris en charge.

La bibliothèque ui.js est désormais également disponible pour quiconque peut utiliser dans ses propres projets et travaille entièrement autonome sans Uibuilder. Il est également cuit dans le nœud uib-html qui transforme les configurations à faible code en HTML à partir de Node-Red.

Orientation future

Uibuilder continuera d'être indépendant des cadres frontaux, mais il continuera également d'être aussi compatible que possible afin que tout cadre souhaité puisse être utilisé avec lui.

• Il continuera à gagner plus d'éléments pré-construits à code zéro.
• Il gagnera un contrôle amélioré sur la structure du dossier racine d'instance et la possibilité d'exécuter des scripts npm run définis dans le package.json .
• Plus de vidéos!

Focus à plus long terme

Il reste un désir de créer une fonctionnalité de construction de pages afin que les personnes sans compétences de codage puissent créer d'excellentes applications Web basées sur les données.

• La qualité de la documentation continuera de s'améliorer.
• Le nombre de dépendances du module de 3e partie sera réduit. En commençant par l'élimination éventuelle de fs-extra en faveur de la bibliothèque FS promissifiée native. Suivi très probablement par arun .
• Une fois que Node.js v18 ou 20 est la base, le code est susceptible d'être refactorisé en plusieurs sous-packages dans un mono-repo.

Détails de fonctionnalités et avantages

• Conçu comme une alternative au tableau de bord officiel du nœud-rouge. Sans les frais généraux et les restrictions.
• Contrôlez tout de l'interface utilisateur d'administration du Node-Red. Modifiez vos fichiers de ressources frontaux, gérez les packages frontaux. Pas besoin d'accéder à la ligne de commande des serveurs.
• Gérer les modèles de démarrage. Des modèles internes pour Vanilla HTML, Svelte, Vuejs (V2 & V3) et Vuejs / bootstrap-vue sont fournis. Modèles de chargement d'autres référentiels via Degit . Rend la partage de modèles qui fournissent une application entière ou qui traitent simplement avec le passe-partout.
• Ayez autant d'interfaces utilisateur personnalisées que vous le souhaitez. Un nœud seulement est nécessaire pour chaque point d'entrée. Utilisez des nœuds de liaison pour envoyer des données à partir d'autres parties de vos flux. Un point d'entrée peut contenir plusieurs pages Web.
• A une interface de contrôle séparée de l'interface de message. Sachez quand un onglet de navigateur se connecte ou se déconnecte, envoyez des données mises en cache, et plus encore.
• Fournissez un ID client stable qui identifie un profil de navigateur spécifique jusqu'à ce qu'il soit redémarré. Un Tabid est fourni qui identifie un onglet de navigateur spécifique sur un appareil client.
• Fournissez des informations à Node-Red sur le client qui envoie un MSG afin que la sécurité et tout autre traitement puissent identifier le client, l'utilisateur, etc.
• Peut être beaucoup plus léger en poids et plus convivial que le tableau de bord officiel du nœud-rouge.
• Utilisez n'importe quel cadre frontal que vous aimez. Installez simplement via le gestionnaire de bibliothèque intégré.
• Utilisez sans aucun cadre frontal si vous préférez. Gardez-le léger et simple. Essayez ceci avec le modèle "vide" et le nœud uib-element .
• Les bibliothèques frontales incluses ( uibuilder.iife.js , uibuilder.esm.js ) fournissent une connectivité à la gestion des événements de Node-Red et MSG ainsi que certaines fonctions utilitaires d'assistance.
• Écrivez votre propre HTML, CSS et JavaScript pour définir l'interface utilisateur frontale parfaite pour vos besoins. Ou définissez-le à l'aide d'une description de configuration JSON.
• Modifiez votre code frontal personnalisé à partir de l'éditeur Node-Red. Reloquez automatiquement vos clients sur les modifications du code. Idéal pour le développement rapide. Notez que cela est conçu pour des modifications rapides, il est recommandé d'utiliser votre chaîne d'outils de développement Web normal pour des modifications plus importantes.
• Ne nécessite presque pas de passe-partout dans votre code frontal pour travailler.
• Liste des pages Web d'index facultative des fichiers disponibles.
• Deux pages Web d'administration d'administration détaillées sont incluses pour aider les auteurs à comprendre où tout est et ce qui est disponible.
• Utilise par défaut les propres serveurs expressjs de Node-Red. Passez à un serveur ExpressJS personnalisé si vous le souhaitez. Lorsque vous utilisez un serveur personnalisé, les pages peuvent également inclure des modèles côté serveur EJB.
• A Middleware pour ExpressJS (pour les services Web) et Socket.io (pour les communications, à la fois à la connexion initiale et par message) afin que vous puissiez ajouter vos propres fonctionnalités personnalisées, y compris la sécurité.
• Peut créer des API personnalisées pour chaque instance Uibuilder.
• Utilisez la bibliothèque ui.js dans vos propres projets!

Contributif

Si vous souhaitez contribuer à ce nœud, vous pouvez contacter totalement des informations via GitHub ou soulever une demande dans le journal des problèmes GitHub.

Les demandes de traction pour le code et la documentation sont les bienvenues et le wiki est ouvert aux nouvelles entrées et corrections (mais veuillez me faire savoir si vous apportez un changement).

Veuillez vous référer aux directives contributives pour plus d'informations.

Vous pouvez également soutenir le développement d'Uibuilder en parrainant le développement.

Parrainage GitHub, parrainage PayPal

Sponsors

• @Magicjf

Développeurs / contributeurs

• Julian Knight - Le designer et auteur principal.
• Colin Law - Merci beaucoup pour les tests, les corrections et les demandes de traction.
• Steve Rickus - Merci beaucoup pour les tests, les corrections, le code contribué et les idées de conception.
• Ellie Lee - Merci beaucoup pour les MSG en double réparation des relations publiques.
• Thomas Wagner - Merci pour le Steer et PR sur l'utilisation du dossier des projets si actif.
• Arlena Derksen - Merci pour les suggestions, les vérifications des bogues et le problème # 59 / PR # 60.
• CFlurin - Merci pour l'exemple de cache.
• Scott Page - Indysoft - Merci pour le numéro 73 / PR # 74.
• Stephen McLaughlin - Steve-MCL - Merci pour le correctif pour le numéro 71 et pour l'idée d'amélioration du numéro 102.
• Sergio Rius - Merci d'avoir signalé le numéro 121 et de la fourniture de PR # 122 comme correctif.
• Thorsten von Eicken - Merci d'avoir fourni Pr # 131 pour améliorer la manipulation des COR pour socket.io.
• Meeki007 - Merci d'avoir fourni diverses améliorations de documentation et correctifs de code.
• Scott - Talltechdude - Merci d'avoir fourni le PR # 170.
• Calum Knott - Merci pour le logo nœud-bleu rangé.
• Harold Peters Inskipp - Merci pour les exemples de journalisation.
• DCZYSZ - Merci d'avoir signalé le numéro 186 et d'aider à travailler sur le bug asynchrone complexe.
• Colin J (Mudwalkercj) - Merci d'avoir aidé à la documentation.
• Marcus Davies - Merci beaucoup pour les encouragements et pour le logo 3D.
• Fabio Marzocca (FMarzocca)) - Merci beaucoup pour l'aide à la conception et aux tests de la bibliothèque du routeur frontal UIBROUNTER.

Beaucoup d'autres personnes ont contribué des idées et des suggestions, grâce à tous ceux qui le font, ils sont les bienvenus.

Veuillez également consulter mon blog, beaucoup ADO à ce sujet, il contient des informations sur toutes sortes de sujets, principalement liés, y compris Node-Red.