소개

만나서 반갑습니다, 프로그래밍 경력 1 년에 못 미치는 신인 엔지니어입니다.

현재 작업중인 프로젝트에서 Node-RED를 사용하고 있습니다.
그 Node-RED를 사용해 ui의 작성을 하는 일이 있어, 그 때에 uibuilder를 사용해 작성하고 있습니다. 일에서 사용했을 때, 개인적으로 빠진 곳을 중심으로 이번은 정리해 보았으므로, 좋으면 참고로 해 보세요.

Node-RED uibuilder 개요

여기에서는 기본적인 것만 쓰므로 자세한 것은 Node-RED uibuilder의 github 등을 참고해 주세요.

다중 사용자를 지원하는 ui를 만들 수 있습니다

기본적으로 vue.js와 bootstrap이 설치되어 있으며 다른 라이브러리를 설치할 수도 있습니다

uibuilder 노드에서 파일을 만들고 삭제할 수 있습니다

websocket에서 통신하는 방법

요청 제출uibuilder.send({"key":value});

응답 수신 uibuilder.onChange('msg',function(newValue){ });

개인적으로 빠진 곳

vue.js를 사용하지 않는 경우 html

xml을 html 파일에 넣을 때 vue.js의 인스턴스에 넣을 수 없었기 때문에 원시 html에 넣어 처리했습니다. 그 때 빠진 것을 쓸 때.

uibuilder의 프런트 엔드는 자동 시작되지 않습니다.

이것은 uibuilder ver2.x 이후로 변경된 것 같습니다만, uibuilder.start() 를 쓰지 않으면 프런트 엔드의 라이브러리는 사용할 수 없습니다.
기본적으로 vue.js를 사용할 때는 이미 작성되었으므로 직접 작성할 필요가 없기 때문에 전혀 신경 쓰지 않았습니다. 제발.

서버 시작 또는 연결시 요청, 응답 방법

uibuilder 노드에는 단자가 2개 붙어 있어, 위의 단자가 통상의 통신시의 처리를 기입해, 하단의 단자는 서버의 접속시나 화면의 리로드시등에 실시하는 처리를 기입합니다. 다만, 그 때에 msg.uibuilderCtrl 오브젝트를 삭제할 필요가 있습니다. 삭제하지 않으면 그대로 제어 메시지로 받아 버리므로 클라이언트를 다시로드하거나 연결할 때 데이터를 전달할 수 없으므로주의하십시오.


라이브러리 설치 중 경로

uibuilder에서 라이브러리를 설치하고 html에 require 할 때 경로를 작성해야하지만 경로도 uibuilder에 의해 결정된 URL이 있습니다. 예를 들어, 기본적으로 포함되어 있는 vue.js나 bootstrap의 인스톨했을 때의 로컬의 경로라고 .node-red\node_modules\ 바로 아래에 있습니다. 그러나 html로 require 할 때의 경로는 ../uibuilder/vendor/입니다. 이것은 uibuilder 노드의 Show Detailed Information에 기록되어 있으므로 라이브러리를 설치하고 require 할 때는 그 쪽을 참고해 보세요.

＊덧붙여서, 일에서는 클라우드상에서 Node-RED를 사용하고 있습니다만, 로컬의 Node-RED라고 보통으로 보였습니다만, 왠지 작업용 쪽이라고 이 Show Detailed Information의 페이지가 열립니다 아니었다. 그래서, 확인할 때는 로컬의 Node-RED를 기동해 확인하는 것을 추천합니다.

결론

내가 개인적으로 Node-RED의 uibuilder를 사용하고 있고, 막힌 곳을 중심으로 이번에 정리해 보았습니다. 살펴보면 알고, 원래 사소한 것을 쓰고 있기 때문에 도움이 될지 모르겠지만, 조금이라도 도움이 된다면, 평소 dashboard를 사용하는 분들에게 조금이라도 uibuilder에 흥미를 가져 주면 라고 생각합니다.