node red contrib uibuilder

Node-Red-Contrib-Uibuilder

O Uibuilder for Node-Red permite a fácil criação de aplicativos da Web front-end orientados a dados.

Ele inclui muitos recursos auxiliares que podem reduzir ou eliminar a necessidade de escrever código para criar aplicativos da Web orientados a dados e interfaces de usuário integrados ao Node-Red.

Observação

O Uibuilder desencadeia um aviso de qualidade na entrada do Scorecard de fluxos.

"Número de dependências" é> 6 - isso se deve ao grande número de recursos no Uibuilder e é esperado. Mesmo assim, o V7 tem apenas 7 dependências. Mais 1 deve ser removido em uma versão futura.

Instalação

O Uibuilder é melhor instalado usando o Node-Red Palette Manager.

Instalações manuais e outras versões

Para instalar manualmente, a partir de uma linha de comando em seu servidor vermelho-vermelho:

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

Para instalar versões antigas, forneça o número principal da versão:

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

Para instalar as filiais de desenvolvimento, instale no Github. Nomes de ramificação são números futuros de versão, verifique o Github para obter as filiais disponíveis:

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

Você precisará reiniciar o Node-Red se instalar manualmente.

Atualizações

O Changelog atual contém todas as alterações e detalhes de requisitos para cada versão.

Alterações mais antigas podem ser encontradas nos documentos de mudança anteriores: Changelog-V5, Changelog-V5, Changelog-V3/V4, Changelog-V2 e Changelog-V2.

Começando

Depois de instalado, o seguinte é um fluxo simples típico para continuar.

1. Adicione um nó uibuilder . Abra suas configurações e dê um "URL" que é usado como nome de identificação. Feche as configurações e clique no botão de implantação.
2. Reabrir as configurações do nó uibuilder e clique no botão "Abrir" para ver a página da web resultante.

Agora você está pronto para editar o front-end HTML/JavaScript/CSS, se desejar e adicionar lógica no Node-Red para fornecer entradas e manipular saídas. Você também pode usar os recursos sem código do Uibuilder para criar sua interface do usuário ou, em vez disso.

Consulte o primeiro passo a passo da documentação e o vídeo de introdução para obter mais ajuda para começar. Experimente também os fluxos de exemplo embutidos.

Exemplos

No Node-Red, use o menu de hambúrguer. Clique em importar. Clique em exemplos. Selecione a pasta Node-Red-Contrib-Uibuilder e escolha um exemplo.

O recurso de modelos no Uibuilder fornece código de front-end de várias configurações.

Outros exemplos podem ser encontrados no site dos fluxos de nó e no Wiki Uibuilder. Veja também as perguntas frequentes e respondeu perguntas no fórum de nó-vermelho.

Documentação e outros links

Consulte o site de documentação. Isso também pode ser acessado nos nós do Uibuilder, mesmo sem uma conexão com a Internet.

Há uma biblioteca de tutoriais de vídeo "oficiais" no YouTube. Outras pessoas também produziram conteúdo relacionado a Uibuilder.

Perguntas, questões e sugestões

O melhor lugar para fazer perguntas ou discutir possíveis aprimoramentos é o fórum de nó-vermelho.

Como alternativa, use o log do GitHub para levantar questões ou sugestões e aprimoramentos contribuintes e a página de discussões do github para perguntas gerais, sugestões etc.

Outros links

• Uibuilder para Node-Red

  • ❓ Idéias, perguntas e ajuda geral-Faça sua pergunta no fórum de nó-vermelho usando a tag Node-Red-Contrib-Uibuilder
  • ? Documentação - Vá para a última documentação
  • ? ‍ Fluxos - Exemplo de fluxos, nós e coleções relacionadas ao Uibuilder
  • Wiki - mais documentação e exemplos
  • Exemplo de modelo externo esbelto - caso você queira construir seu próprio aplicativo esbelto
  • Exemplo de modelo externo simples - caso você queira construir seu próprio modelo externo
  • Extensão Uibuilder - gráficos úteis, mas também demonstra como construir sua própria extensão
  • ? Módulo de manipulador de eventos usado por Uibuilder - para que você possa ver alguns dos trabalhos internos

• ? Módulo da biblioteca da interface do usuário usado por uibuilder - pode ser usado independente para transformar a configuração padrão da interface do usuário em html

• ? Moment-Moment-Nó para fazer uso da biblioteca de manuseio/hora de manuseio/hora do MomentJs em Node-Red

• ? Nós de teste para nó-vermelho-alguns nós de teste para nó-vermelho que ajudam você a entender como tudo funciona

• ? Componente da Web de Hotnipi Gauge - um componente de bitola muito bonito. Trabalha com nó-vermelho, uibuilder ou independente

• ? Componentes experimentais da web-Tenha alguns aprimoramentos específicos de nó-vermelho e uibuilder, mas também funcionam bem independentes

• ? Array Gouper - Função independente para remodelar uma variedade de objetos

Propósito

O objetivo do Uibuilder é:

• Apoie métodos fáceis para criar e fornecer aplicativos da Web e páginas da Web orientados a dados (também conhecidos como interfaces de usuário da Web).
• Seja um canal entre os aplicativos da web de Node-Red e Front-end (navegador).
• Seja a estrutura da interface do usuário agnóstica. Nenhuma estrutura é necessária para usar o Uibuilder, mas funcionará com eles quando desejado. O Uibuilder pretende reduzir o requisito para uma estrutura, facilitando o trabalho com baunilha HTML/CSS.
• Forneça padrões de interface/dados para a troca de dados e controles entre as páginas do Node-RED e da Web.
• Habilite a criação e o gerenciamento de vários aplicativos da Web a partir de uma única instância de nó-RED.
• Reduza a quantidade de código front-end (HTML/JavaScript) necessário para criar e gerenciar um aplicativo da Web.
• Reduza o conhecimento necessário para a criação de aplicativos da Web confiáveis ​​e acessíveis, fornecendo recursos de código baixo e sem código.
• Facilite a instalação e sirva as bibliotecas de front-end para apoiar o desenvolvimento de aplicativos da Web mais complexos.

Características

As principais características do Uibuilder:

• Na medida do possível, usa apenas baunilha, HTML nativo, CSS e JavaScript. Além do cliente Socket.io para comunicações (que é assado na biblioteca frontal), não são necessárias outras bibliotecas de front-end. O Uibuilder permanece o mais próximo possível do HTML nativo para evitar problemas futuros de compatibilidade. No entanto, ele tem como objetivo facilitar a interação com o HTML nativo.
• Nós para ativar a tradução do código zero dos dados de entrada para elementos da web utilizáveis ​​e acessíveis.
• Capacidade para interface do usuário de baixo código, orientado a configuração (orientado a dados). Criando uma estrutura para descrever uma interface do usuário e traduzir para o código real sem precisar escrever código.
• Canal de comunicação bidirecional entre o servidor Node-Red (back-end) e a interface do front-end.
• Um nó vermelho-nó para atuar como foco para comunicações com outros nós para facilitar a facilidade de uso.
• Biblioteca de front-end para: Faça as partes complexas das comunicações no navegador do cliente; Torne a manipulação da interface do usuário mais fácil e consistente; Facilite obter os dados de volta ao Node-Red conforme necessário (ambos automaticamente e manualmente).
• Modelos e exemplos fáceis de usar para o código front-end para permitir que as pessoas comecem a criar rápidos aplicativos da Web.
• Gerenciamento e serviço de pacotes NPM que fornecem bibliotecas de front-end consumíveis facilmente pelo código front-end.
• Edição do código front-end do editor Node-Red (projetado para pequenas alterações, use ferramentas de desenvolvimento da Web em geral).
• Várias opções de middleware e API do servidor para recursos personalizados adicionais.
• Uma capacidade de armazenamento em cache, permitindo que a recém -ingressasse nos clientes para receber os dados e configurações mais recentes. Juntar/deixar clientes criam notificações no Node-RED.
• Um roteador leve do front-end para criar aplicativos de uma página.
• Tenha tantas instâncias de nó uibuilder quanto quiser. Cada instância permite a criação de muitas páginas da Web e sub-osdores para facilitar o gerenciamento.
• Cada instância do nó uibuilder fornece um canal de comunicação bidirecional privado entre o Código da UI do Node-Red Server (back-end) e o navegador (front-end).
• Suporta o uso de fluxos de trabalho de desenvolvimento da Web padrão.
• Permite a criação de um serviço da Web dedicado para facilitar a segurança independente.

UI sem código

O Uibuilder continua a expandir seus recursos sem código. Os nós do uib-element , uib-tag e uib-update oferecem métodos sem código para criar e atualizar as interfaces Web orientados a dados.

uib-element recebe dados simples de configuração de dados e saídas. Isso pode ser enviado para o front-end através do nó uibuilder . Como alternativa, ele pode ser salvo e o resultado usado em uma carga inicial. Várias opções simples, como tabelas e listas, estão disponíveis no Uibuilder v6.1, elementos e estruturas adicionais serão disponibilizados em versões futuras. O cliente de front-end do Uibuilder pega as informações de configuração e cria dinamicamente elementos HTML e os insere na página da web (ou remove/atualiza conforme necessário).

Embora essa não seja a abordagem de processamento mais eficiente (como as atualizações estão substituindo principalmente todo o elemento que pode ser bastante grande para coisas como tabelas grandes), é muito eficiente a partir de uma perspectiva de autor. Portanto, o nó uib-update fornece uma abordagem mais direcionada para atualizar e alterar atributos específicos e conteúdo de "slot" para elementos.

O nó uib-tag permite criar um único elemento HTML e, portanto, abrange todas as muitas coisas que uib-element não pode (ainda). Isso até funciona com componentes da Web que são aprimoramentos nativos de baunilha HTML/JavaScript para HTML.

É importante observar que não são necessárias estruturas de terceiros, como vuejs ou reação para essa abordagem! Tudo usa HTML de baunilha, JavaScript e CSS sob a pele e, portanto, é compatível com os padrões da Web atuais e futuros .

UI de baixo código

Os dados que as saídas uib-element são um formato que você pode usar em seus próprios fluxos em NODE-RED e até no código front-end, se desejar. Ele descreve um conjunto de elementos da interface do usuário HTML, mas não precisa que você realmente escreva o código HTML. O esquema de configuração é muito flexível e até permite carregar dados de configuração, html, scripts e novos módulos/componentes ECMA de arquivos externos.

O esquema e as funções do criador da interface do usuário incorporadas no cliente front-end são projetadas especificamente para funcionar com os padrões HTML atuais e futuros, a fim de evitar os tipos de problemas comumente encontrados ao usar as estruturas de front-end de terceiros (por exemplo, alterações da versão principal forçando reescritas de todas as suas ferramentas). Portanto, os módulos ES, componentes da ECMA e versões futuras da ECMA devem ser suportadas.

A biblioteca ui.js agora também está disponível para qualquer pessoa usar em seus próprios projetos e trabalha totalmente independente sem o Uibuilder. Também é assado no nó uib-html , que transforma configurações de baixo código em html de dentro do nó-vermelho.

Direção futura

O Uibuilder continuará sendo independente das estruturas front-end, embora também continue sendo o mais compatível possível, para que qualquer estrutura desejada possa ser usada com ela.

• Ele continuará a obter mais elementos pré-construídos de código zero.
• Ele obterá controle aprimorado sobre a estrutura da pasta raiz da instância e a capacidade de executar scripts npm run definidos no package.json .
• Mais vídeos!

Foco de longo prazo

Ainda existe o desejo de criar um recurso para construtor de páginas, para que pessoas sem habilidades de codificação possam criar ótimos aplicativos da Web orientados a dados.

• A qualidade da documentação continuará melhorando.
• O número de dependências do módulo de terceiros será reduzido. Começando com a eventual remoção do fs-extra em favor da biblioteca FS Native Promisified. Seguido provavelmente por arun .
• Uma vez que o Node.js v18 ou 20 for a base, é provável que o código seja refatorado em vários sub-pacotes em um mono-repo.

Detalhes e benefícios do recurso

• Projetado como uma alternativa ao painel oficial do Node-Vermelho. Sem as despesas gerais e restrições.
• Controle tudo a partir da interface do usuário do Node-Red Admin. Edite seus arquivos de recursos front-end, gerencie pacotes de front-end. Não há necessidade de acessar a linha de comando servidores.
• Gerencie modelos de inicialização. São fornecidos modelos internos para baunilha HTML, SVELTE, VUEJS (V2 e V3) e Vuejs/Bootstrap-Vue. Modelos de carga de outros repositórios por degito . Facilita o compartilhamento de modelos que fornecem um aplicativo inteiro ou apenas lidar com o Boilerplate.
• Tenha tantas interfaces de usuário personalizadas quanto desejar. Apenas um nó é necessário para cada ponto de entrada. Use nós de link para enviar dados de outras partes de seus fluxos. Um ponto de entrada pode ser conter várias páginas da web.
• Tem uma interface de controle separada para a interface da mensagem. Saiba quando uma guia do navegador conecta ou desconecta, envie dados em cache e muito mais.
• Forneça um ID de cliente estável que identifique um perfil específico do navegador até que seja reiniciado. É fornecido um Tabid que identifica uma guia específica do navegador em um dispositivo cliente.
• Forneça informações ao Node-RED sobre o cliente que está enviando uma MSG para que a segurança e outros processamento possam identificar o cliente, o usuário e assim por diante.
• Pode ser muito mais leve em peso e mais amigável para dispositivos móveis que o painel oficial de nó-vermelho.
• Use qualquer estrutura front-end que desejar. Basta instalar através do gerenciador de bibliotecas interno.
• Use sem qualquer estrutura front-end, se preferir. Mantenha -o leve e simples. Experimente isso com o modelo "em branco" e o nó uib-element .
• As bibliotecas de front-end incluídas ( uibuilder.iife.js , uibuilder.esm.js ) fornecem conectividade ao manuseio de eventos de nó-Red e MSG, juntamente com algumas funções utilitárias.
• Escreva seu próprio HTML, CSS e JavaScript para definir a interface de usuário de front-end perfeita para suas necessidades. Ou defini -lo usando uma descrição do JSON Config.
• Edite seu código de front-end personalizado no editor de nó-vermelho. Relexo automaticamente seus clientes sobre alterações no código. Ótimo para desenvolvimento rápido. Observe que isso foi projetado para edições rápidas, é recomendável usar sua cadeia de ferramentas normal de desenvolvimento da Web para edições maiores.
• Quase não precisa de caldeira no seu código front-end para funcionar.
• ÍNDICE OPCIONAL Listagem da página da web dos arquivos disponíveis.
• Duas páginas detalhadas da Web do Admin Info estão incluídas para ajudar os autores a entender onde está tudo e o que está disponível.
• Usa os servidores da Web do ExpressJS do Node-Red por padrão. Mude para um servidor ExpressJS personalizado, se desejado. Ao usar um servidor personalizado, as páginas também podem incluir modelos do lado do servidor EJB.
• Possui middleware para o ExpressJS (para serviços da web) e Socket.io (para comunicações, tanto na conexão inicial quanto na mensagem), para que você possa adicionar seus próprios recursos personalizados, incluindo segurança.
• Pode criar APIs personalizados para cada instância do Uibuilder.
• Use a biblioteca ui.js em seus próprios projetos!

Contribuindo

Se você deseja contribuir para este nó, entre em contato com informações totalmente via GitHub ou aumente uma solicitação no log do GitHub.

Pull Solicitações para código e documentação são bem -vindas e o wiki está aberto a novas entradas e correções (mas informe -me se você fizer uma alteração).

Consulte as diretrizes contribuintes para obter mais informações.

Você também pode apoiar o desenvolvimento do Uibuilder, patrocinando o desenvolvimento.

Patrocínio do Github, patrocínio do PayPal

Patrocinadores

• @Magicjf

Desenvolvedores/colaboradores

• Julian Knight - O designer e autor principal.
• Lei de Colin - Muito obrigado por testar, correções e solicitações de puxar.
• Steve Rickus - Muito obrigado por testar, correções, contribuiu com idéias de código e design.
• Ellie Lee - Muito obrigado pelas msgs duplicados de fixação de relações públicas.
• Thomas Wagner - Obrigado pela direção e PR ao usar a pasta Projetos, se ativo.
• Arlena Derksen - Obrigado por sugestões, verificações de bug e edição #59/Pr #60.
• Cflurin - Obrigado pelo exemplo do cache.
• Scott Page - Indysoft - Obrigado pela edição #73/PR #74.
• Stephen McLaughlin - Steve -MCL - Obrigado pela correção pela edição #71 e pela IDEA DE APRESENDENENT IDEA ISSUME #102.
• Sergio Rius - Obrigado por relatar a edição #121 e fornecer PR #122 como correção.
• Thorsten von Eicken - Obrigado por fornecer ao PR #131 para melhorar o manuseio dos CORs para o soquete.io.
• Meeki007 - Obrigado por fornecer várias melhorias de documentação e correções de código.
• Scott - Tallntechdude - Obrigado por fornecer PR #170.
• Calum Knott - Obrigado pelo logotipo do nó -azul arrumado.
• Harold Peters Inskipp - Obrigado pelos exemplos de registro.
• DCZYSZ - Obrigado por relatar a edição nº 186 e ajudar a trabalhar com o bug assíncrono complexo.
• COLIN J (MUDWALKERCJ) - Obrigado por ajudar na documentação.
• Marcus Davies - Muito obrigado pelo incentivo e pelo logotipo 3D.
• Fabio Marzocca (FMarzocca)) - Muito obrigado pela ajuda com o design e o teste da biblioteca de roteador de front -end uibrouter.

Muitas outras pessoas contribuíram com idéias e sugestões, graças a todos que o fazem, são bem -vindos.

Confira também meu blog, muito amor, ele tem informações sobre todos os tipos de tópicos, principalmente relacionados, incluindo o Node-Red.