node red contrib uibuilder

nodo-rojo-confrib-uibuilder

UIbuilder para Node-Red permite la fácil creación de aplicaciones web front-end basadas en datos.

Incluye muchas características de ayuda que pueden reducir o eliminar la necesidad de escribir código para construir aplicaciones web basadas en datos e interfaces de usuario integradas con Node-Red.

Nota

Uibuilder desencadena una advertencia de calidad en la entrada de la tarjeta de puntaje de flujos.

El "número de dependencias" es> 6: esto se debe a la gran cantidad de características en UIBUIder y se espera. Aun así, V7 solo tiene 7 dependencias. 1 más se debe eliminar en un lanzamiento futuro.

Instalación

UIBUIder se instala mejor utilizando el administrador de paletas de Node-Red.

Instalaciones manuales y otras versiones

Para instalar manualmente, desde una línea de comando en su servidor de nodo-rojo:

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

Para instalar versiones antiguas, proporcione el número de versión principal:

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

Para instalar ramas de desarrollo, instale desde GitHub. Las sucursales son números de versión futuros, verifique el GitHub en busca de ramas disponibles:

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

Deberá reiniciar el nodo-rojo si se instala manualmente.

Actualizaciones

El cambio actual contiene todos los cambios y detalles del requisito para cada versión.

Se pueden encontrar cambios anteriores en los documentos de cambio anteriores: Changelog-V5, Changelog-V5, Changelog-V3/V4, ChangeLog-V2 y ChangeLog-V2.

Empezando

Una vez instalado, el siguiente es un flujo simple típico para comenzar.

1. Agregue un nodo uibuilder . Abra su configuración y déle una "URL" que se usa como nombre de identificación. Cierre la configuración y haga clic en el botón Implementar.
2. Vuelva a abrir la configuración del nodo uibuilder y haga clic en el botón "Abrir" para ver la página web resultante.

Ahora está listo para editar el front-end html/javaScript/css si lo desea y agregar lógica en nodo-rojo para proporcionar entradas y salidas de mango. También puede usar las funciones sin código de UIBUIder para crear su interfaz de usuario también o en su lugar.

Consulte el tutorial de los primeros en la documentación y el video de introducción para obtener más ayuda para comenzar. También pruebe los flujos de ejemplo incorporados.

Ejemplos

Dentro de Node-Red, use el menú de hamburguesas. Haga clic en Importar. Haga clic en ejemplos. Seleccione la carpeta Node-Red-Contrib-UiBuilder y elija un ejemplo.

La característica de las plantillas en UIBUIder proporciona un código frontal de diversas configuraciones.

Se pueden encontrar otros ejemplos en el sitio de flujos rojos de nodo y la wiki Uibuilder. También vea las preguntas frecuentes y respondió preguntas en el foro de nodo-rojo.

Documentación y otros enlaces

Consulte el sitio web de documentación. También se puede acceder desde los nodos Uibuilder incluso sin conexión a Internet.

Hay una biblioteca de video tutoriales "oficiales" en YouTube. Otra gente también ha producido contenido relacionado con UIBUIder.

Preguntas, problemas y sugerencias

El mejor lugar para hacer preguntas o discutir posibles mejoras es el foro de nodo-rojo.

Alternativamente, use el registro de problemas de GitHub para plantear problemas o sugerencias y mejoras contribuyentes y la página de discusiones de GitHub para preguntas, sugerencias, etc.

Otros enlaces

• Uibuilder para nodo-rojo

  • ❓ Ideas, preguntas y ayuda general: haga su pregunta en el foro de nodo-rojo utilizando la etiqueta Node-Red-Contrib-UiBuilder
  • ? Documentación: vaya a la última documentación
  • ?
  • Wiki - Más documentación y ejemplos
  • Ejemplo de plantilla externa esbelta: en caso de que desee construir su propia aplicación Svelte
  • Ejemplo de plantilla externa simple: en caso de que desee construir su propia plantilla externa
  • Extensión Uplot Uibuilder: gráficos útiles, pero también demuestra cómo construir su propia extensión
  • ? Módulo de controlador de eventos utilizado por Uibuilder, para que pueda ver algunos de los trabajos internos

• ? Módulo de biblioteca de interfaz de usuario utilizado por Uibuilder: se puede usar independientemente para convertir la configuración estándar de la interfaz de usuario JSON en HTML

• ? nodo-rojo-confuntrib-moment-nodos para utilizar la biblioteca de manejo de fecha/hora de momentojs en nodo-rojo

• ? Nodes de prueba para nodo-rojo: algunos nodos de prueba para nodo-rojo que lo ayudan a comprender cómo funciona todo

• ? Componente web de Hotnipi Gauge: un componente de calibre realmente bonito. Funciona con nodo-rojo, uibuilder o independiente

• ? Componentes web experimentales: tienen algunas mejoras específicas de Node-Red & Uibuilder pero también funcionan bien independientemente

• ? Array Grouper: función independiente para remodelar una matriz de objetos

Objetivo

El propósito de UiBuilder es:

• Admite métodos fáciles para crear y entregar aplicaciones web y páginas web basadas en datos (también conocidas como interfaces de usuario web).
• Sea un conducto entre las aplicaciones web de UI de Node-Red y Front-End (navegador).
• Ser marco de ui agnóstico. No se necesita un marco para usar UIBUIder, pero funcionará con ellos donde desee. Uibuilder tiene como objetivo reducir el requisito de un marco al facilitar el trabajo con HTML/CSS de vainilla.
• Proporcione estándares de interfaz/datos para intercambiar datos y controles entre las páginas de Node-Red y Web.
• Habilite la creación y administración de múltiples aplicaciones web desde una sola instancia de Node-Red.
• Reduzca la cantidad de código frontal (HTML/JavaScript) necesario para crear y administrar una aplicación web.
• Reduzca el conocimiento requerido para crear aplicaciones web confiables y accesibles proporcionando características de bajo código y sin código.
• Haga que sea fácil instalar y servir bibliotecas front-end para admitir el desarrollo de aplicaciones web más complejas.

Características

Las características centrales de UIBUilder:

• En la medida de lo posible, usa solo vainilla, HTML nativo, CSS y JavaScript. Aparte del cliente Socket.io para comunicaciones (que se hornea en la biblioteca frontal), no se necesitan otras bibliotecas front-end. Uibuilder permanece lo más cerca posible de HTML nativo para evitar problemas de compatibilidad futuros. Sin embargo, tiene como objetivo facilitar la interacción con HTML nativo.
• Nodos para habilitar la traducción del código cero de datos de entrada a elementos web utilizables y accesibles.
• Capacidad para la UI de bajo código, basada en la configuración (basada en datos). Crear un marco para describir una interfaz de usuario y traducir al código real sin tener que escribir código.
• Canal de comunicaciones de 2 vías entre el servidor de nodo-rojo (back-end) y la interfaz de usuario front-end.
• Un nodo de nodo-rojo para actuar como el enfoque para las comunicaciones con otros nodos para una facilidad de uso adicional.
• Biblioteca frontal para: hacer las partes complejas de las comunicaciones en el navegador del cliente; hacer que la manipulación de la interfaz de usuario sea más fácil y más consistente; Facilite la recuperación de datos en Node-Red según sea necesario (tanto automáticamente como manualmente).
• Plantillas y ejemplos fáciles de usar para el código frontal para permitir que las personas comiencen rápidamente en la creación de aplicaciones web.
• Gestión y servicio de paquetes NPM que proporcionan bibliotecas frontales consumibles fácilmente por código frontal.
• Edición del código front-end desde el editor de nodo-rojo (diseñado para pequeños cambios, use herramientas de desarrollo web en general).
• Varias opciones de middleware y API del servidor para capacidades personalizadas adicionales.
• Una capacidad de almacenamiento en caché que permite que los clientes se unan recién reciban los últimos datos y configuraciones. Unirse/dejar a los clientes crean notificaciones en Node-Red.
• Un enrutador liviano frontal para crear aplicaciones de una sola página.
• Tenga tantas instancias de nodo uibuilder como desee. Cada instancia permite la creación de muchas páginas web y subcarpetas para una fácil gestión.
• Cada instancia de nodo uibuilder proporciona un canal de comunicaciones privado de 2 vías entre el código de UI de servidor de nodo-rojo (back-end) y navegador (front-end).
• Admite el uso de flujos de trabajo de desarrollo web estándar.
• Permite la creación de un servicio web dedicado para facilitar la seguridad independiente.

UI sin código

Uibuilder continúa expandiendo sus capacidades sin código. Los nodos uib-element , uib-tag y uib-update ofrecen métodos sin código para crear y actualizar UI web basadas en datos.

uib-element toma datos de configuración de datos y salidas simples. Esto se puede enviar al front-end a través del nodo uibuilder . Alternativamente, se puede guardar y el resultado se usa en una carga inicial. Varias opciones simples, como tablas y listas, están disponibles en Uibuilder V6.1, se pondrán a disposición elementos y estructuras adicionales en futuras versiones. El cliente frontal de UIBUIder toma la información de configuración y construye dinámicamente elementos HTML y los inserta en la página web (o elimina/actualizaciones según sea necesario).

Si bien este no es el enfoque de procesamiento más eficiente (ya que las actualizaciones son principalmente reemplazando todo el elemento que podría ser bastante grande para cosas como las tablas grandes), es muy eficiente desde una perspectiva de autor. Por lo tanto, el nodo uib-update proporciona un enfoque más argumentado para actualizar y cambiar los atributos específicos y el contenido de "ranura" para elementos.

El nodo uib-tag luego le permite crear cualquier elemento HTML único y, por lo tanto, cubre todas las cosas que uib-element podría no cubrir (todavía). Esto incluso funciona con componentes web que son mejoras nativas de vainilla HTML/JavaScript a HTML.

¡Es importante tener en cuenta que no se necesitan marcos frontales y de terceros como Vuejs o React para este enfoque! Todo usa Vanilla HTML, JavaScript y CSS bajo la piel y, por lo tanto, es compatible con los estándares web actuales y futuros .

Ui de código bajo

Los datos que emite uib-element es un formato que puede usar en sus propios flujos en Node-Red e incluso en código frontal si lo desea. Describe un conjunto de elementos de UI HTML, pero no necesita que escriba el código HTML. El esquema de configuración es muy flexible e incluso le permite cargar datos de configuración, HTML, scripts y nuevos módulos/componentes de ECMA de archivos externos.

El esquema y las funciones del creador de la interfaz de usuario integradas en el cliente front-end están diseñadas específicamente para funcionar con los estándares HTML actuales y futuros para evitar los tipos de problemas comúnmente encontrados cuando se usan marcos de front-end de terceros (por ejemplo, los cambios principales en la versión que obligan a las reescrituras de todas sus herramientas). Entonces, los módulos ES, los componentes ECMA y las futuras versiones de ECMA deberían ser compatibles.

La Biblioteca ui.js ahora también está disponible para que cualquiera lo use en sus propios proyectos y trabaje completamente independiente sin UIBUIder. También se hornea en el nodo uib-html que convierte las configuraciones de bajo código en HTML desde el nodo-rojo.

Dirección futura

Uibuilder continuará siendo independiente de los marcos frontales, aunque también continuará siendo lo más compatible posible para que cualquier marco deseado pueda usarse con él.

• Continuará ganando más elementos preconstruidos de código cero.
• Obtendrá un control mejorado sobre la estructura de la carpeta raíz de instancia y la capacidad de ejecutar scripts npm run definidos en el package.json .
• ¡Más videos!

Enfoque a largo plazo

Sigue habiendo un deseo de construir una función de constructor de páginas para que las personas sin habilidades de codificación puedan crear excelentes aplicaciones web basadas en datos.

• La calidad de la documentación continuará mejorando.
• Se reducirá el número de dependencias del módulo de terceros. Comenzando con la eliminación eventual de fs-extra a favor de la biblioteca FS promisificada nativa. Seguido muy probablemente por arun .
• Una vez que Node.js V18 o 20 es la base, es probable que el código se refactorice en múltiples subackages en un mono-REPO.

Detalles y beneficios de la función

• Diseñado como una alternativa al tablero oficial de Node-Red. Sin los gastos generales y restricciones.
• Controle todo desde la interfaz de usuario de administrador de nodo-rojo. Edite sus archivos de recursos front-end, administre paquetes front-end. No es necesario acceder a la línea de comando de los servidores.
• Administrar plantillas de inicio. Se proporcionan plantillas internas para Vanilla HTML, SVVEL, VueJS (V2 y V3) y VueJS/Bootstrap-Vue. Plantillas de carga de otros repositorios a través de DEGIT . Hace que sea fácil compartir plantillas que proporcionen una aplicación completa o simplemente tratar con Boilerplate.
• Tenga tantas interfaces de usuario personalizadas como desee. Solo se necesita 1 nodo para cada punto de entrada. Use nodos de enlace para enviar datos de otras partes de sus flujos. Un punto de entrada puede contener múltiples páginas web.
• Tiene una interfaz de control separada a la interfaz de mensaje. Sepa cuándo una pestaña de navegador se conecta o se desconecta, envíe datos en caché y más.
• Proporcione una ID de cliente estable que identifique un perfil de navegador específico hasta que se reinicie. Se proporciona un tabid que identifica una pestaña de navegador específica en un dispositivo cliente.
• Proporcione información a Node-Red sobre el cliente que está enviando un MSG para que la seguridad y otro procesamiento puedan identificar al cliente, el usuario, etc.
• Puede ser mucho más ligero en peso y más amigable con los dispositivos móviles que el tablero oficial de Node-Red.
• Use cualquier marco frontal que desee. Simplemente instale a través del Administrador de biblioteca incorporado.
• Use sin ningún marco front-end si lo prefiere. Mantenlo ligero y simple. Pruebe esto con la plantilla "en blanco" y el nodo uib-element .
• Las bibliotecas de front-end incluidas ( uibuilder.iife.js , uibuilder.esm.js ) proporcionan conectividad al manejo de eventos de Node-Red y MSG junto con algunas funciones de utilidad ayudante.
• Escriba su propio HTML, CSS y JavaScript para definir la interfaz de usuario front-end perfecta para sus necesidades. O definirlo usando una descripción de JSON Config.
• Edite su código front-end personalizado desde el editor de nodo-rojo. Relacione automáticamente a sus clientes en los cambios en el código. Ideal para el rápido desarrollo. Tenga en cuenta que esto está diseñado para ediciones rápidas, se recomienda utilizar su cadena de herramientas de desarrollo web normal para ediciones más grandes.
• Casi no necesita una palerplate en su código frontal para que funcione.
• Listado de página web de índice opcional de los archivos disponibles.
• Se incluyen dos páginas web detalladas de información de administración para ayudar a los autores a comprender dónde está todo y qué está disponible.
• Utiliza los propios servidores web de Node-Red ExpressJS de forma predeterminada. Cambie a un servidor ExpressJS personalizado si lo desea. Al usar un servidor personalizado, las páginas también pueden incluir la plantilla del lado del servidor EJB.
• Tiene middleware para expressjs (para servicios web) y socket.io (para comunicaciones, tanto en conexión inicial como por messaje) para que pueda agregar sus propias características personalizadas, incluida la seguridad.
• Puede crear API personalizadas para cada instancia de UIBUIder.
• ¡Use la biblioteca ui.js en sus propios proyectos!

Que contribuye

Si desea contribuir a este nodo, puede comunicarse totalmente con información a través de GitHub o recaudar una solicitud en el registro de problemas de GitHub.

Las solicitudes de extracción tanto para el código como para la documentación son bienvenidas y el wiki está abierto a nuevas entradas y correcciones (pero avíseme si realiza un cambio).

Consulte las pautas contribuyentes para obtener más información.

También puede apoyar el desarrollo de UIBuilder patrocinando el desarrollo.

Patrocinio de Github, PAYPAL

Patrocinadores

• @Magicjf

Desarrolladores/contribuyentes

• Julian Knight - El diseñador y autor principal.
• Colin Law - Muchas gracias por las solicitudes de pruebas, correcciones y extracción.
• Steve Rickus - Muchas gracias por las pruebas, correcciones, ideas de código e ideas de diseño contribuido.
• Ellie Lee - Muchas gracias por los MSG duplicados de la Firura PR.
• Thomas Wagner: gracias por el dirección y las relaciones públicas sobre el uso de la carpeta de proyectos si está activo.
• Arlena Derksen - Gracias por sugerencias, verificaciones de errores y problema #59/PR #60.
• CFLURIN - Gracias por el ejemplo de caché.
• Página de Scott - Indysoft - Gracias por el problema #73/PR #74.
• Stephen McLaughlin - Steve -MCL - Gracias por la solución para el problema #71 y por la idea de mejora. Problema #102.
• Sergio Rius - Gracias por informar el problema #121 y proporcionar el PR #122 como una solución.
• Thorsten von Eicken - Gracias por proporcionar PR #131 para mejorar el manejo de CORS para Socket.io.
• Meeki007 - Gracias por proporcionar varias mejoras de documentación y correcciones de código.
• Scott - Talltechdude - Gracias por suministrar el PR #170.
• Calum Knott - Gracias por el logotipo de Blue Node -Blue.
• Harold Peters Inskipp - Gracias por los ejemplos de registro.
• DCZYSZ - Gracias por informar el problema #186 y ayudar a trabajar a través del complejo error Async.
• Colin J (MudwalkerCj) - Gracias por ayudar con la documentación.
• Marcus Davies - Muchas gracias por el aliento y por el logotipo 3D.
• Fabio Marzocca (fmarzocca)) - Muchas gracias por la ayuda con el diseño y las pruebas de la biblioteca de enrutadores front -end de UIbrouter.

Muchas otras personas han contribuido con ideas y sugerencias, gracias a todos los que lo hacen, son bienvenidas.

También consulte mi blog, mucho ado al respecto, tiene información sobre todo tipo de temas, principalmente relacionado, incluido el nodo-rojo.