node red contrib uibuilder

節點紅色contrib-uibuilder

Node-Red的Uibuilder允許輕鬆創建數據驅動的前端Web應用程序。

它包含許多輔助功能，這些功能可以減少或消除為構建數據驅動的Web應用程序和與Node-Red集成的用戶界面編寫代碼的需求。

筆記

Uibuilder觸發了流程記分卡條目中的質量警告。

“依賴性數量”為> 6-這是由於Uibuilder中的大量功能所致，並且是預期的。即便如此，V7只有7個依賴項。將來將在以後的版本中刪除1個。

安裝

最好使用Node-Red的調色板管理器安裝Uibuilder。

手動安裝和其他版本

要從您的節點紅服務器上的命令行手動安裝：

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

要安裝舊版本，請提供主要版本編號：

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

要安裝開發分支，請從GitHub安裝。分支名稱是未來的版本號，請檢查GitHub以獲取可用分支：

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

如果手動安裝，則需要重新啟動節點紅色。

更新

當前的ChangElog包含每個版本的所有更改和需求詳細信息。

可以在先前的更改文檔中找到較舊的更改：ChangElog-V5，ChangElog-V5，ChangElog-V3/V4，ChangElog-V2和ChangElog-V2。

入門

安裝後，以下是典型的簡單流程。

1. 添加一個uibuilder節點。打開其設置，並給它一個“ URL”，用作識別名稱。關閉設置，然後單擊部署按鈕。
2. 重新打開uibuilder節點的設置，然後單擊“打開”按鈕以查看結果網頁。

現在，您準備編輯前端HTML/JavaScript/CSS（如果需要），並在Node-red中添加邏輯以提供輸入和處理輸出。您也可以使用Uibuilder的無代碼功能也可以創建UI，也可以使用UI。

請參閱文檔和介紹視頻中的初學演練，以獲取更多幫助。還要嘗試內置的示例流。

例子

在Node-Red中，使用漢堡菜單。單擊導入。點擊示例。選擇Node-red-contrib-uibuilder文件夾，然後選擇一個示例。

Uibuilder中的模板功能提供了各種配置的工作前端代碼。

其他示例可以在節點紅色流站點和Uibuilder Wiki上找到。另請參閱常見問題解答，並在節點紅色論壇上回答問題。

文檔和其他鏈接

請參閱文檔網站。即使沒有Internet連接，也可以從Uibuilder節點內部訪問這一點。

YouTube上有一個“官方”視頻教程的庫。其他人也產生了與Uibuilder相關的內容。

問題，問題和建議

提出問題或討論可能增強功能的最佳場所是節點紅色論壇。

或者，使用GitHub問題日誌來提出問題或貢獻建議和增強，以及GitHub討論頁面，以獲取一般問題，建議等。

其他鏈接

• uibuilder用於節點紅色

  • ❓想法，問題和一般幫助 - 使用Node-contrib-uibuilder標籤在節點紅色論壇上詢問您的問題
  • ？文檔 - 轉到最新文檔
  • ？ ‍流 - 示例流，節點和收集與Uibuilder有關
  • Wiki-更多文檔和示例
  • 示例Svelte外部模板 - 如果您想構建自己的Svelte應用程序
  • 示例簡單的外部模板 - 如果您想構建自己的外部模板
  • UPLOT UIBUILDER擴展名 - 有用的圖表，但也演示瞭如何構建自己的擴展
  • ？ uibuilder使用的事件處理程序模塊 - 因此您可以看到一些內部工作

• ？ UI庫模塊由UIBUILDER-可用於將UI標準配置JSON轉換為HTML的獨立使用

• ？節點 - red-contrib-moment-節點用於使用that the the the node-red中的日期/時間處理庫

• ？ node-red的測試節點 - 一些節點紅色的測試節點，可以幫助您了解所有內容的工作方式

• ？ HOTNIPI量規Web組件 - 一個非常漂亮的量規組件。與Node-Red，Uibuilder或獨立的工作

• ？實驗性網絡組件 - 具有一些節點紅色和UIBUILDER特定的增強功能，但也可以很好地工作

• ？陣列grouper-獨立函數重塑一系列對象

目的

Uibuilder的目的是：

• 支持簡單的方法來創建和交付數據驅動的Web應用程序和網頁（也稱為Web用戶界面）。
• 成為節點紅色和前端（瀏覽器）UI Web應用程序之間的導管。
• 成為UI框架不可知論。不需要使用Uibuilder，但它可以在需要的情況下與它們一起使用。 Uibuilder旨在通過更容易使用Vanilla HTML/CSS來減少框架的要求。
• 提供界面/數據標準，用於交換Node-Red和網頁之間的數據和控制。
• 從單個節點紅色實例啟用多個Web應用程序的創建和管理。
• 減少創建和管理Web應用所需的前端代碼（HTML/JavaScript）的數量（HTML/JavaScript）。
• 通過提供低代碼和無代碼功能來減少創建可靠，可訪問的Web應用所需的知識。
• 使安裝和服務前端庫變得易於支持，以支持更複雜的Web應用程序的開發。

特徵

Uibuilder的核心特徵：

• 盡可能僅使用香草，本機HTML，CSS和JavaScript。除了用於通信的socket.io客戶端（被烘烤到前端庫）之外，不需要其他前端庫。 Uibuilder盡可能靠近本地HTML，以避免將來的兼容性問題。但是，它的確使與本機HTML的互動更加容易。
• 節點可以將輸入數據的零代碼翻譯轉換為可用且可訪問的Web元素。
• 低碼，配置驅動（數據驅動）UI的功能。創建一個描述UI並轉換為實際代碼的框架，而無需編寫代碼。
• 節點紅服務器（後端）和前端UI之間的2向通信通道。
• 節點紅節點是與其他節點進行通信的重點，以額外使用。
• 前端庫至：在客戶端瀏覽器中執行通信的複雜部分；使操縱UI更輕鬆，更一致；可以輕鬆根據需要（自動和手動）將數據恢復到節點紅色。
• 易於使用的前端代碼模板和示例，使人們能夠快速開始創建Web應用程序。
• NPM軟件包的管理和服務，可通過前端代碼輕鬆地提供前端庫。
• 從節點紅色編輯器中編輯前端代碼（專為小型更改而設計，通常使用Web開發工具）。
• 各種服務器中間軟件和API選項，可提供其他自定義功能。
• 一種緩存功能，允許新加入客戶接收最新的數據和配置。加入/離開客戶端在Node-Red中創建通知。
• 用於創建單頁應用程序的前端輕型路由器。
• 擁有盡可能多的uibuilder節點實例。每個實例允許創建許多網頁和子文件夾，以便於管理。
• 每個uibuilder節點實例都提供節點紅服務器（後端）和瀏覽器（前端）UI代碼之間的私有2向通信通道。
• 支持標準Web開發工作流的使用。
• 允許創建專用的Web服務以促進獨立的安全性。

無代碼UI

Uibuilder繼續擴展其無代碼功能。 uib-element ， uib-tag和uib-update節點提供了用於創建和更新數據驅動Web UI的無代碼方法。

uib-element接收簡單的數據並輸出配置數據。然後可以通過uibuilder節點將其發送到前端。另外，它可以保存，並在初始負載中使用的結果。 Uibuilder v6.1中提供了幾種簡單的選項，例如表和列表，將來將在以後的版本中提供其他元素和結構。 Uibuilder前端客戶端獲取配置信息，並動態構建HTML元素並將其插入到網頁上（或根據需要刪除/更新）。

雖然這不是最有效的處理方法（因為更新大部分是替代整個元素，而這些元素對於大桌子（例如大表）來說可能非常大），但從創作的角度來看，它非常有效。因此， uib-update節點為元素更新和更改特定屬性和“插槽”內容提供了一種更具針對性的方法。

然後， uib-tag節點使您可以創建任何單個HTML元素，因此覆蓋了uib-element可能還沒有覆蓋的所有內容。這甚至可以與Web組件一起使用，即HTML的香草/JavaScript本機對HTML的增強功能。

重要的是要注意，這種方法不需要前端，第三方框架（例如Vuejs或React）！一切都使用了皮膚下的香草HTML，JavaScript和CSS，因此與當前和未來的網絡標準兼容。

低代碼UI

uib-element輸出的數據是一種格式，您可以在Node-red中使用，甚至在需要時在前端代碼中使用。它描述了一組HTML UI元素，但不需要您實際編寫HTML代碼。配置模式非常靈活，甚至允許您從外部文件加載配置數據，HTML，腳本和新的ECMA模塊/組件。

前端客戶端內置的架構和UI創建器功能是專門設計用於使用當前和未來HTML標準的，以避免使用第三方Party前端框架時通常遇到的各種問題（例如，主要版本更改迫使所有工具的重寫迫使重寫您的工具的重寫）。因此，應支持ES模塊，ECMA組件和未來的ECMA版本。

現在， ui.js庫也可以供任何人在自己的項目中使用，並且在沒有Uibuilder的情況下完全獨立地工作。它也被烘烤到uib-html節點中，該節點將低代碼配置從Node-Red內部轉換為HTML。

未來的方向

Uibuilder將繼續獨立於前端框架，儘管它也將繼續盡可能兼容，以便可以與它一起使用任何所需的框架。

• 它將繼續獲得更多零代碼的預構建元素。
• 它將改善對實例根文件夾結構的控制，並能夠執行package.json中定義的npm run腳本。
• 更多視頻！

長期重點

仍然希望構建一個頁面構建器功能，以便沒有編碼技能的人可以構建出色的數據驅動Web應用程序。

• 文檔質量將繼續提高。
• 第三方模塊依賴項的數量將減少。從最終刪除fs-extra開始，而偏向於本機承諾的FS庫。緊隨其後的是arun 。
• 一旦Node.js v18或20是基礎，則可能將代碼重構為單個repo中的多個子包裝。

功能細節和好處

• 設計為節點紅色官方儀表板的替代方案。沒有開銷和限制。
• 控制節點紅色admin UI的所有內容。編輯您的前端資源文件，管理前端軟件包。無需訪問服務器命令行。
• 管理啟動模板。提供了香草HTML，Svelte，Vuejs（V2和V3）和Vuejs/Bootstrap-vue的內部模板。通過DEGIT加載來自其他存儲庫的模板。可以輕鬆共享提供整個應用程序或僅處理樣板的模板。
• 隨心所欲地擁有盡可能多的自定義用戶界面。每個入口點只需要1個節點。使用鏈接節點從流量的其他部分發送數據。入口點可以包含多個網頁。
• 具有與消息接口分開的控件接口。知道什麼時候瀏覽器選項卡連接或斷開連接，發送緩存的數據等等。
• 提供穩定的客戶端ID ，以標識特定的瀏覽器配置文件，直到重新啟動為止。提供了一個標籤，可以在客戶端設備上標識特定的瀏覽器選項卡。
• 向Node-RED提供有關正在發送MSG的客戶端的信息，以便安全性和其他處理可以識別客戶端，用戶等。
• 比節點紅色的官方儀表板可以輕鬆得多，移動性更高。
• 使用您喜歡的任何前端框架。只需通過內置庫管理器安裝即可。
• 如果您願意，請勿使用任何前端框架。保持輕便而簡單。使用“空白”模板和uib-element節點嘗試一下。
• 隨附的前端庫（ uibuilder.iife.js ， uibuilder.esm.js ）提供了與節點-RED和MSG事件處理的連接性以及一些輔助功能。
• 編寫自己的HTML，CSS和JavaScript，以定義滿足您需求的完美前端用戶界面。或使用JSON配置描述定義它。
• 從節點紅色編輯器中編輯自定義前端代碼。自動加載客戶對代碼的更改。非常適合快速發展。請注意，這是為快速編輯而設計的，建議使用普通的Web開發工具鏈進行大型編輯。
• 在您的前端代碼中幾乎沒有樣板才能工作。
• 可選索引網頁列表可用文件。
• 包括兩個詳細的管理信息網頁，以幫助作者了解一切在哪里和可用的地方。
• 默認情況下，使用Node-Red自己的ExpressJS Webervers。如果需要，請切換到自定義ExpressJS服務器。使用自定義服務器時，頁面還可以包括EJB服務器端模板。
• 具有expressjs（用於Web服務）和socket.io的中間件（用於通信，在初始連接和每報處），以便您可以添加自己的自定義功能，包括安全性。
• 可以為每個Uibuilder實例創建自定義API。
• 在您自己的項目中使用ui.js庫！

貢獻

如果您想為此節點做出貢獻，則可以通過github聯繫完全信息，也可以在GitHub問題日誌中提出請求。

歡迎使用代碼和文檔的拉請請求，Wiki向新的條目和更正開放（但是，如果您進行更改，請告訴我）。

有關更多信息，請參考貢獻指南。

您還可以通過贊助開發來支持Uibuilder的開發。

GitHub贊助，貝寶贊助

贊助商

• @magicjf

開發人員/貢獻者

• 朱利安·奈特（Julian Knight） - 設計師和主要作家。
• Colin Law-非常感謝您的測試，更正和拉拉請求。
• 史蒂夫·里克斯（Steve Rickus） - 非常感謝您的測試，更正，貢獻代碼和設計思想。
• Ellie Lee-非常感謝PR修復重複的味精。
• 托馬斯·瓦格納（Thomas Wagner） - 感謝您使用項目文件夾的轉向和PR。
• Arlena derksen-感謝您的建議，錯誤檢查和問題＃59/PR＃60。
• Cflurin-感謝您的緩存示例。
• Scott Page -Indysoft-感謝第73條/PR＃74。
• Stephen McLaughlin -Steve -MCL-感謝第71期的修復程序以及Enhancement Ideas問題＃102。
• Sergio Rius-感謝您的報告＃121並提供PR＃122作為修復。
• Thorsten von Eicken-感謝您提供PR＃131，以改善Socket.io的CORS處理。
• Meeki007-感謝您提供各種文檔改進和代碼修復。
• Scott -Talltechdude-感謝您提供PR＃170。
• Calum Knott-感謝您整理的節點藍色徽標。
• Harold Peters Inskipp-感謝您的伐木示例。
• DCZYS-感謝您的報告第186期，並幫助解決複雜的異步錯誤。
• Colin J（MudwalkerCj） - 感謝您的文檔提供幫助。
• 馬庫斯·戴維斯（Marcus Davies） - 非常感謝您的鼓勵和3D徽標。
• Fabio Marzocca（Fmarzocca）） - 非常感謝Uibrouter前端路由器庫的設計和測試的幫助。

多虧了每個人，許多其他人都提出了想法和建議。

請還請查看我的博客，有關它的廣泛性，它具有有關各種主題的信息，主要是與Node-red有關的信息。