node red contrib uibuilder
Bug fix
Node-Red 용 Uibuilder는 데이터 중심의 프론트 엔드 웹 응용 프로그램을 쉽게 생성 할 수 있습니다.
여기에는 데이터 중심의 웹 응용 프로그램을 구축하기위한 코드를 작성하거나 Node-Red와 통합 된 사용자 인터페이스를 작성 해야하는 코드를 줄이거 나 제거 할 수있는 많은 헬퍼 기능이 포함되어 있습니다.
메모
Uibuilder는 Flows Screecard 항목에서 품질 경고를 트리거합니다.
"의존성 수"는> 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에서 설치하십시오. 분기 이름은 향후 버전 번호이며 사용 가능한 지점을 확인하십시오.
cd ~ /.node-red
npm install totallyinformation/node-red-contrib-uibuilder#v7.1.0수동으로 설치하면 Node-Red를 다시 시작해야합니다.
현재 ChangeLog에는 각 버전의 모든 변경 사항 및 요구 사항 세부 사항이 포함되어 있습니다.
이전 변경 사항은 이전 변경 문서 인 ChangeLog-V5, ChangeLog-V5, ChangeLog-V3/V4, Changelog-V2 및 ChangeLog-V2에서 찾을 수 있습니다.
일단 설치되면 다음은 전형적인 간단한 흐름입니다.
uibuilder 노드를 추가하십시오. 설정을 열고 식별 이름으로 사용되는 "URL"을 제공하십시오. 설정을 닫고 배포 버튼을 클릭하십시오.uibuilder 노드의 설정을 다시 열고 "열기"버튼을 클릭하여 결과 웹 페이지를 확인하십시오.원하는 경우 프론트 엔드 HTML/JavaScript/CSS를 편집하고 Node-Red에 논리를 추가하여 입력 및 처리 출력을 제공 할 준비가되었습니다. Uibuilder의 No-Code 기능을 사용하여 UI를 만들 수도 있습니다.
더 많은 도움을 받으려면 문서의 첫 타이머 연습 및 소개 비디오를 참조하십시오. 또한 내장 예제 흐름을 시도하십시오.
Node-Red 내에서 햄버거 메뉴를 사용하십시오. 가져 오기를 클릭하십시오. 예제를 클릭하십시오. Node-Red-Contrib-uibuilder 폴더를 선택하고 예제를 선택하십시오.
Uibuilder의 템플릿 기능은 다양한 구성의 프론트 엔드 코드를 제공합니다.
다른 예제는 노드 레드 흐름 사이트 및 Uibuilder Wiki에서 찾을 수 있습니다. 또한 Node-Red 포럼에서 FAQ 및 답변 질문을 참조하십시오.
문서 웹 사이트를 참조하십시오. 인터넷 연결 없이도 Uibuilder 노드 내에서 액세스 할 수도 있습니다.
YouTube에는 "공식"비디오 자습서 라이브러리가 있습니다. 다른 사람들도 Uibuilder 관련 콘텐츠를 제작했습니다.
질문을하거나 가능한 개선 사항을 논의하기에 가장 좋은 곳은 노드 레드 포럼입니다.
또는 일반적인 질문, 제안 등을 위해 문제를 제기하거나 제안 및 개선 사항을 기여하거나 Github 토론 페이지를 기고하기 위해 GitHub 문제 로그를 사용하십시오.
노드-레드에 대한 uibuilder
? UIBUILDER에서 사용하는 UI 라이브러리 모듈 - UI 표준 구성 json을 HTML로 전환하는 데 독립형으로 사용할 수 있습니다.
? Node-Red-Contrib-Moment- 노드-레드에서 Momentjs 날짜/시간 처리 라이브러리를 사용하는 노드
? Node-Red 용 테스트 노드-모든 것이 어떻게 작동하는지 이해하는 데 도움이되는 Node-Red의 일부 테스트 노드
? Hotnipi 게이지 웹 구성 요소 - 정말 멋진 게이지 구성 요소. Node-Red, Uibuilder 또는 독립형으로 작동합니다
? 실험적인 웹 구성 요소-일부 노드 레드 및 Uibuilder 특정 향상이 있지만 독립형으로 잘 작동합니다.
? Array Grouper- 객체 배열을 재구성하는 독립형 기능
Uibuilder의 목적은 다음과 같습니다.
Uibuilder의 핵심 특징 :
uibuilder 노드 인스턴스가 있습니다. 각 인스턴스를 사용하면 쉽게 관리 할 수있는 많은 웹 페이지와 서브 폴더를 생성 할 수 있습니다.uibuilder 노드 인스턴스는 노드 레드 서버 (백엔드)와 브라우저 (프론트 엔드) UI 코드간에 개인 2 방향 통신 채널을 제공합니다. Uibuilder는 코드가없는 기능을 계속 확장합니다. uib-element , uib-tag 및 uib-update 노드는 데이터 중심 웹 UI를 작성하고 업데이트하기위한 코드가없는 메소드를 제공합니다.
uib-element 간단한 데이터 및 출력 구성 데이터를 가져옵니다. 그런 다음 uibuilder 노드를 통해 프론트 엔드로 보낼 수 있습니다. 또는 저장할 수 있고 결과는 초기 부하에 사용됩니다. 테이블 및 목록과 같은 몇 가지 간단한 옵션은 Uibuilder v6.1에서 제공되며, 추가 요소 및 구조는 향후 버전으로 제공됩니다. Uibuilder 프론트 엔드 클라이언트는 구성 정보를 가져 와서 HTML 요소를 동적으로 빌드하여 웹 페이지에 삽입합니다 (또는 필요에 따라 제거/업데이트).
이것은 가장 효율적인 처리 접근법이 아니지만 (업데이트는 대부분 큰 테이블과 같은 것들에 대해 상당히 큰 전체 요소를 대체하기 때문에) 작성자 관점에서 매우 효율적입니다. 따라서 uib-update 노드는 특정 속성을 업데이트하고 변경하는 데 대한보다 타겟팅 된 접근 방식을 제공합니다.
그런 다음 uib-tag 노드를 사용하면 단일 HTML 요소를 만들 수 있으므로 uib-element 아직 덮지 않을 수없는 모든 것들을 다룹니다. 이것은 HTML에 대한 바닐라 HTML/JavaScript 원시 향상 인 웹 구성 요소와도 작동합니다.
이 접근법에는 vuejs 또는 React와 같은 프론트 엔드 3 파티 프레임 워크가 필요하지 않다는 점에 유의해야합니다! 모든 것은 피부 아래 바닐라 HTML, JavaScript 및 CSS를 사용하므로 현재 및 미래의 웹 표준과 호환 됩니다.
uib-element 출력하는 데이터는 Node-Red 및 원하는 경우 프론트 엔드 코드에서 자신의 흐름에서 사용할 수있는 형식입니다. HTML UI 요소 세트를 설명하지만 실제로 HTML 코드를 작성할 필요는 없습니다. 구성 스키마는 매우 유연하며 외부 파일에서 구성 데이터, HTML, 스크립트 및 새로운 ECMA 모듈/구성 요소를로드 할 수도 있습니다.
프론트 엔드 클라이언트에 내장 된 스키마 및 UI 제작자 기능은 제 3 자 프론트 엔드 프레임 워크를 사용할 때 일반적으로 발생하는 종류의 문제를 피하기 위해 현재 및 미래의 HTML 표준과 함께 작동하도록 특별히 설계되었습니다 (예 : 주요 버전 변경으로 모든 툴링의 재 작성). 따라서 ES 모듈, ECMA 구성 요소 및 향후 ECMA 버전이 모두 지원되어야합니다.
ui.js 라이브러리는 이제 누구나 자신의 프로젝트에서 사용할 수 있으며 Uibuilder없이 완전히 독립형으로 작동합니다. 또한 uib-html 노드로 구워지면 노드 레드 내에서 저 코드 구성을 HTML로 바꿉니다.
Uibuilder는 프론트 엔드 프레임 워크와 계속 독립적이지만 원하는 프레임 워크와 함께 사용할 수 있도록 가능한 한 계속 호환 될 것입니다.
package.json 에 정의 된 npm run 스크립트를 실행하는 기능을 얻게됩니다.코딩 기술이없는 사람들이 훌륭한 데이터 중심 웹 앱을 구축 할 수 있도록 페이지 빌더 기능을 구축하려는 욕구가 남아 있습니다.
fs-extra 의 최종 제거로 시작합니다. arun 뒤 따랐을 가능성이 높습니다.uib-element 노드로 이것을 시도하십시오.uibuilder.iife.js , uibuilder.esm.js )는 일부 도우미 유틸리티 기능과 함께 Node-Red 및 MSG 이벤트 처리에 대한 연결을 제공합니다.ui.js 라이브러리를 사용하십시오! 이 노드에 기여하려면 GitHub를 통해 완전히 정보에 연락하거나 GitHub 문제 로그에서 요청을 제기 할 수 있습니다.
코드와 문서에 대한 풀 요청은 환영하며 위키는 새로운 항목 및 수정에 열려 있습니다 (그러나 변경하면 알려주십시오).
자세한 내용은 기고 가이드 라인을 참조하십시오.
또한 개발을 후원하여 Uibuilder의 개발을 지원할 수 있습니다.
Github 후원, PayPal 후원
다른 많은 사람들이 아이디어와 제안에 기여했습니다. 모든 사람 덕분에 가장 환영합니다.
또한 내 블로그를 확인하십시오.
