node red contrib uibuilder

Узел-красный контриб-уибулдер

Uibuilder для Node-Red позволяет легко создавать управляемые данными веб-приложения.

Он включает в себя множество вспомогательных функций, которые могут уменьшить или устранить необходимость записать код для создания веб-приложений, управляемых данными, и пользовательских интерфейсов, интегрированных с Node-Red.

Примечание

Uibuilder запускает качественное предупреждение при входе в систему карты.

«Количество зависимостей» -> 6 - это связано с большим количеством функций в Uibuilder и ожидается. Несмотря на это, V7 имеет только 7 зависимости. Еще 1 должен быть удален в будущем.

Установка

Uibuilder лучше всего устанавливается с использованием палеоседов Node-Red.

Ручные установки и другие версии

Для установки вручную из командной строки на вашем узле-красном сервере:

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

Чтобы установить старые версии, предоставьте основной номер версии:

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

Чтобы установить филиалы разработки, установите из GitHub. BranchNames - это будущие номера версий, проверьте GitHub для доступных филиалов:

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

Вам нужно будет перезапустить узло-Red, если установить вручную.

Обновления

Текущий ChangeLog содержит все изменения в изменениях и требованиях для каждой версии.

Старые изменения можно найти в предыдущих документах изменения: ChangeLog-V5, ChangeLog-V5, ChangeLog-V3/V4, ChangeLog-V2 и ChangeLog-V2.

Начиная

После установки ниже приведен типичный простой поток, чтобы начать работу.

1. Добавьте узел uibuilder . Откройте свои настройки и дайте ему «URL», который используется в качестве идентифицирующего имени. Закройте настройки и нажмите кнопку развертывания.
2. Откройте настройки узла uibuilder и нажмите кнопку «Открыть», чтобы увидеть полученную веб-страницу.

Теперь вы готовы отредактировать фронтальную HTML/JavaScript/CSS, если вы хотите, и добавить логику в Node-Red для предоставления входов и обработки выходов. Вы также можете использовать функции Uibuilder без кода для создания вашего пользовательского интерфейса или вместо этого.

Пожалуйста, смотрите пошаговое руководство новичками в документации и введенное видео, чтобы начать дополнительную помощь. Также попробуйте встроенные примеры потоков.

Примеры

Внутри узла-красного используйте меню гамбургера. Нажмите на импорт. Нажмите примеры. Выберите папку Node-Red-Contrib-Uibuilder и выберите пример.

Функция шаблонов в Uibuilder обеспечивает рабочий фронтальный код различных конфигураций.

Другие примеры можно найти на сайте узло-красных потоков и Wibuilder Wiki. Также см. FAQ и ответил на вопросы на форуме Node-Red.

Документация и другие ссылки

Пожалуйста, обратитесь на веб -сайт документации. Это также можно получить из узлов Uibuilder даже без подключения к Интернету.

На YouTube есть библиотека «официальных» видеоуроков. Другие люди также создали контент, связанный с Uibuilder.

Вопросы, проблемы и предложения

Лучшее место, чтобы задать вопросы или обсудить возможные улучшения,-это форум узлов-красного цвета.

В качестве альтернативы, используйте журнал выпусков GitHub для поднятия вопросов или внесения предложений и улучшений, а также страницы обсуждения GitHub для общих вопросов, предложений и т. Д.

Другие ссылки

• Uibuilder для узла-красного

  • ❓ Идеи, вопросы и общая помощь-задайте ваш вопрос на форуме узла-красного цвета, используя тег Node-Red-Contrib-Uibuilder
  • ? Документация - перейдите к последней документации
  • ? ‍ потоки - примеры потоков, узлов и коллекций, связанных с Uibuilder
  • Вики - больше документации и примеров
  • Пример стеснительного шаблона - если вы хотите создать свое собственное приложение Svelte
  • Пример простой внешний шаблон - если вы хотите создать свой собственный внешний шаблон
  • Увеличение UBUILDER - полезные диаграммы, но также демонстрируют, как построить собственное расширение
  • ? Модуль обработчика событий, используемый Uibuilder - чтобы вы могли увидеть некоторые из внутренних работ

• ? Модуль библиотеки пользовательского интерфейса, используемый Uibuilder - может использоваться отдельным для превращения стандартного конфигурации пользовательского интерфейса в HTML

• ? Узел-красный контриб-момента-узлы, чтобы использовать библиотеку моментов даты/обработки времени в узле-красном

• ? Тестовые узлы для узла-красного-некоторые тестовые узлы для узла-красного, которые помогают вам понять, как все работает

• ? Hotnipi Lage Web Component - действительно красивый компонент. Работает с узлом-красным, Uibuilder или автономным

• ? Экспериментальные веб-компоненты-имеют некоторые усовершенствования узел-красного и UIBUILDER, но также работают хорошо отдельно.

• ? Массив Групер - автономная функция, чтобы изменить массив объектов

Цель

Цель Uibuilder -:

• Поддержите простые методы для создания и доставки веб-приложений и веб-страниц, управляемых данными, (также известными как веб-пользовательские интерфейсы).
• Быть каналом между Node-Red и Front-End (Browser) веб-приложениями пользовательского интерфейса.
• Будьте рамки пользовательского интерфейса. Для использования Uibuilder не требуется структура, но он будет работать с ними там, где это необходимо. Uibuilder стремится уменьшить требование для рамки, облегчая работу с ванильным HTML/CSS.
• Предоставьте интерфейс/стандарты данных для обмена данными и элементами управления между Node-Red и веб-страницами.
• Включить создание и управление несколькими веб-приложениями из одного узла-красного экземпляра.
• Уменьшите объем кода переднего интерфейса (HTML/JavaScript), необходимый для создания и управления веб-приложением.
• Уменьшите знания, необходимые для создания надежных, доступных веб-приложений путем предоставления функций с низким кодом и без кодов.
• Облегчить установку и обслуживать библиотеки фронта, чтобы поддержать разработку более сложных веб-приложений.

Функции

Основные особенности Uibuilder:

• Насколько это возможно, использует только ваниль, нативные HTML, CSS и JavaScript. Помимо клиента Socket.io для связи (которая выпекается в библиотеку передней части), никаких других интерфейских библиотек не требуется. Uibuilder остается как можно ближе к местному HTML, чтобы избежать будущих проблем совместимости. Тем не менее, он направлен на то, чтобы облегчить взаимодействие с нативным HTML.
• Узлы, чтобы включить перевод входных данных с нулевым кодом в полезные и доступные веб-элементы.
• Возможности для низковертного, управляемого конфигурацией (управляемого данными) пользовательского интерфейса. Создание структуры для описания пользовательского интерфейса и перевода в фактический код без необходимости записать код.
• Двухсторонний канал связи между Node-Red Server (Back-Cond) и интерфейсом пользовательского интерфейса.
• Узел-узел, который выступает в качестве фокуса для связи с другими узлами для дополнительной простоты использования.
• Библиотека фронта, чтобы: сделать сложные части связи в браузере клиента; Сделайте манипулирование пользовательским интерфейсом проще и более последовательным; Облегчить возвращение данных в Node-Red по мере необходимости (как автоматически, так и вручную).
• Простые в использовании шаблоны и примеры для фронтального кода, чтобы люди могли быстро начать создание веб-приложений.
• Управление и обслуживание пакетов NPM, которые легко предоставляют библиотеки фронт-энда, легко потребляются по коду с интерфейсом.
• Редактирование фронтального кода от редактора Node-Red (предназначенное для небольших изменений, используйте инструменты веб-разработки в целом).
• Различные варианты промежуточного программного обеспечения и API для дополнительных пользовательских возможностей.
• Возможность кэширования, позволяющая вновь присоединять клиентов получать последние данные и конфигурации. Присоединение/оставление клиентов создает уведомления в Node-Red.
• Легкий маршрутизатор переднего интерната для создания приложений для одного страницы.
• Иметь столько экземпляров узлов uibuilder , сколько вам нравится. Каждый экземпляр позволяет создавать множество веб-страниц и подразделов для легкого управления.
• Каждый экземпляр узла uibuilder обеспечивает частный двухсторонний канал связи между узлом-красным сервером (Back-end) и кодом пользовательского интерфейса браузера (Front-Cend).
• Поддерживает использование стандартных рабочих процессов веб -разработки.
• Позволяет создавать выделенную веб -сервис для облегчения независимой безопасности.

Не-код пользовательского интерфейса

Uibuilder продолжает расширять свои возможности без код. Узлы uib-element , uib-tag и uib-update предлагают методы без кодов для создания и обновления веб-интерфейса, управляемого данными.

uib-element принимает простые данные о конфигурации данных и выходов. Затем это можно отправить на фронт-энд через узлом uibuilder . В качестве альтернативы его можно сохранить и результат, используемый в начальной нагрузке. Несколько простых вариантов, таких как таблицы и списки, доступны в Uibuilder V6.1, в будущих версиях будут доступны дополнительные элементы и структуры. Клиент Front-End Uibuilder берет информацию о конфигурации и динамически создает HTML-элементы и вводит их на веб-страницу (или при необходимости удаляет/обновляется).

Хотя это не самый эффективный подход к обработке (поскольку обновления в основном заменяют весь элемент, который может быть довольно большим для таких вещей, как большие таблицы), он очень эффективен с точки зрения авторизации. Таким образом, узел uib-update предоставляет более целевой подход к обновлению и изменению конкретных атрибутов и контенту «слот» для элементов.

Затем узел uib-tag позволяет создавать любой отдельный элемент HTML и, таким образом, охватывает все вещи, которые uib-element может (пока). Это даже работает с веб -компонентами, которые представляют собой ванильные усовершенствования HTML/JavaScript для HTML.

Важно отметить, что для этого подхода не требуется никаких фронтальных, 3-й стороны рамок, таких как Vuejs или React! Все используют ванильные HTML, JavaScript и CSS под кожей, и поэтому совместимо с текущими и будущими веб -стандартами .

Низкий код пользовательского интерфейса

Данные, которые выходы uib-element -это формат, который вы можете использовать в своих собственных потоках в узле-красном и даже в коде переднего класса при желании. Он описывает набор элементов пользовательского интерфейса HTML, но не нуждается в том, чтобы вы фактически писали код HTML. Схема конфигурации очень гибкая и даже позволяет загружать данные конфигурации, HTML, сценарии и новые модули/компоненты ECMA из внешних файлов.

Функции схемы и создателя пользовательского интерфейса, встроенные в клиенту, специально разработаны для работы с текущими и будущими стандартами HTML, чтобы избежать видов проблем, обычно возникающих при использовании фронтальных фронтальных рамок (например, основной версии, вынуждая перезапись всех ваших инструментов). Таким образом, модули ES, компоненты ECMA и будущие версии ECMA должны быть поддержаны.

Библиотека ui.js теперь также доступна для всех, кто бы использовал в своих собственных проектах и ​​работает полностью отдельно без Uibuilder. Он также выпекается в узле uib-html , который превращает конфигурации с низким кодом в HTML из узла-красного.

Будущее направление

Uibuilder будет по-прежнему быть независимым от фронтальных рамок, хотя он также будет оставаться максимально совместимым, чтобы с ним можно использовать любые желаемые рамки.

• Он будет продолжать получать больше элементов с нулевым кодом.
• Он получит улучшенный контроль над структурой корневой папки экземпляра и возможности выполнять сценарии npm run определенные в package.json .
• Больше видео!

Долгосрочный фокус

Остается желание создать функцию строителя страниц, чтобы люди, не имеющие навыков кодирования, могли создавать отличные веб-приложения, управляемые данными.

• Качество документации будет продолжать улучшаться.
• Количество зависимостей модуля 3-й стороны будет уменьшено. Начиная с возможного удаления fs-extra в пользу нативной многообещаемой библиотеки FS. Следовательно, скорее всего, arun .
• После того, как Node.js V18 или 20 станет базой, код, вероятно, будет рефактован в несколько подпакнов в моно-репо.

Детали и преимущества функции

• Разработано в качестве альтернативы официальной панели панели узлов. Без накладных расходов и ограничений.
• Управляйте всем от пользовательского интерфейса администратора узла. Отредактируйте свои фронтальные файлы ресурсов, управляйте фронтальными пакетами. Не нужно получать доступ к командной строке Servers.
• Управление шаблонами стартапов. Внутренние шаблоны для ванильного HTML, Svelte, Vuejs (V2 & V3) и Vuejs/Bootstrap-Vue. Загрузочные шаблоны из других репозиториев через градус . Облегчает обмен шаблонами, которые предоставляют целое приложение или просто имеют дело с шаблоном.
• Иметь столько пользовательских интерфейсов пользователя, сколько хотите. Для каждой точки входа требуется всего 1 узел. Используйте узлы ссылок, чтобы отправить данные из других частей ваших потоков. Точка входа может быть содержать несколько веб -страниц.
• Имеет контрольный интерфейс, отдельный от интерфейса сообщения. Знайте, когда вкладка браузера подключается или отключается, отправляйте кэшированные данные и многое другое.
• Предоставьте стабильный идентификатор клиента , который идентифицирует определенный профиль браузера, пока он не будет перезагружен. Предоставлено таблица , которая идентифицирует конкретную вкладку браузера на клиентском устройстве.
• Предоставьте информацию Node-Red о клиенте, который отправляет MSG, чтобы безопасность и другая обработка могли идентифицировать клиента, пользователя и так далее.
• Может быть намного легче по весу и более дружелюбно, чем официальная панель управления узлами.
• Используйте любую переднюю структуру, которые вам нравятся. Просто установите через встроенный менеджер библиотеки.
• Используйте без каких-либо фронтальных каркасов, если вы предпочитаете. Держите это легким и простым. Попробуйте это с помощью «пустого» шаблона и узла uib-element .
• Включенные интерфейсные библиотеки ( uibuilder.iife.js , uibuilder.esm.js ) обеспечивают связь с обработкой событий Node-Red и MSG вместе с некоторыми вспомогательными функциями.
• Напишите свой собственный HTML, CSS и JavaScript, чтобы определить идеальный интерфейс интерфейса для ваших потребностей. Или определите его, используя описание конфигурации JSON.
• Измените свой собственный фронтальный код из редактора Node-Red. Автозагружайте своих клиентов в изменениях в код. Отлично подходит для быстрого развития. Обратите внимание , что это предназначено для быстрых изменений, рекомендуется использовать ваш обычный инструмент для веб -разработки для больших изменений.
• В вашем фронт-коде практически не требуется шатер для работы.
• Необязательный индекс веб -страницы Список доступных файлов.
• Две подробные веб -страницы администратора включены, чтобы помочь авторам понять, где все и что доступно.
• По умолчанию использует собственные веб-серверы Node-Red. Переключитесь на пользовательский сервер ExpressJS при желании. При использовании пользовательского сервера страницы также могут включать шаблон на стороне сервера EJB.
• Имеет промежуточное программное обеспечение для ExpressJS (для веб-сервисов) и Socket.io (для связи, как при начальном соединении, так и для перемещения), чтобы вы могли добавить свои собственные функции, включая безопасность.
• Может создать пользовательские API для каждого экземпляра Uibuilder.
• Используйте библиотеку ui.js в своих собственных проектах!

Внося

Если вы хотите внести свой вклад в этот узел, вы можете связаться с полной информацией через GitHub или поднять запрос в журнале выпусков GitHub.

Приглашенные запросы как на код, так и на документацию приветствуются, и вики открыт для новых записей и исправлений (но, пожалуйста, дайте мне знать, если вы внесете изменения).

Пожалуйста, обратитесь к рекомендациям для получения дополнительной информации.

Вы также можете поддержать разработку Uibuilder, спонсируя разработку.

Спонсорство GitHub, спонсорство PayPal

Спонсоры

• @Magicjf

Разработчики/участники

• Джулиан Найт - дизайнер и главный автор.
• Колин Лоу - Большое спасибо за тестирование, исправления и запросы на привлечение.
• Стив Рикус - Большое спасибо за тестирование, исправления, внесли код и идеи дизайна.
• Элли Ли - Большое спасибо за то, что PR исправляют дублируемые MSGS.
• Томас Вагнер - Спасибо за управление и PR при использовании папки Projects, если активно.
• Арлена Дерксен - Спасибо за предложения, проверку ошибок и выпуск № 59/PR #60.
• Cflurin - Спасибо за пример кэша.
• Скотт Пейдж - Indysoft - спасибо за выпуск № 73/PR #74.
• Стивен Маклафлин - Стив -Макл - спасибо за исправление для выпуска № 71 и за вопрос об улучшении № 102.
• Серхио Риус - Спасибо за сообщение о выпуске № 121 и предоставили PR #122 в качестве исправления.
• Торстен фон Эйкен - Спасибо за предоставление PR #131 для улучшения обработки CORS для Socket.io.
• Meeki007 - Спасибо за предоставление различных улучшений документации и исправлений кода.
• Скотт - Talltechdude - Спасибо за предоставление PR #170.
• Calum Knott - Спасибо за логотип узел.
• Гарольд Питерс Инскипп - Спасибо за примеры ведения журнала.
• Dczysz - Спасибо за выпуск № 186 и помощи в работе через сложную асинхронную ошибку.
• Колин J (Mudwalkercj) - Спасибо за помощь в документации.
• Маркус Дэвис - Большое спасибо за поддержку и за 3D -логотип.
• Fabio Marzocca (Fmarzocca)) - Большое спасибо за помощь в разработке и тестировании библиотеки маршрутизатора Ubibrouter.

Многие другие люди внесли идеи и предложения, благодаря всем, кто это делает, они наиболее приветствуются.

Пожалуйста, также ознакомьтесь с моим блогом, много шума об этом, в нем есть информация о всевозможных темах, в основном он связан, в том числе Node-Red.