반응형

지난 시간에는  노드레드를 라즈베리파이 또는 윈도에 설치하는 것에 대해 다루었습니다.  이와 관련하여서는 아래 게시물을 참고해 주세요.
【Node-RED #1】라즈베리파이(Raspberry pi)에 Node-RED 설치하기

 이번 시간부터는 본격적으로 노드레드에 대해 알아보고 활용해 보도록 시작해 보겠습니다. 

1. Node-RED의 개념

 노드레드는 플로우(Flow) 즉, 흐름 기반의 프로그래밍으로써 시각적 표현에 매우 적합하고, 복잡하고 어려운 프로그래밍 사용을 자제하고, 사용자가 보다 쉽게 접근할 수 있도록 설계된 모듈입니다.   노드레드에서의 각 노드는 마치 블록코딩의 대명사인 스크래치의 블록과 유사한 개념으로  노드레드는 다수의 노드를 이용하여 각 노드별 원하는 요구사항에 맞는 플로우를 만들 수 있으며 이를 아두이노, 라즈베리파이 및 각종 센서, 디스플레이 등 제어모듈과 같은 하드웨어와 연결하여 시각적으로 보여주거나 제어가능하도록 ioT 시스템을 쉽게 구축할 수 있는 특징이 있습니다. 

아래는 노드레드 Flow 구성 및 편집 예시입니다.

이미지 출처 : nodered.org

아래는 노드레드 UI 예시입니다.

이미지 출처 : hackaday.com

아래는 노드레드 UI 예시입니다.

이미지 출처 : Yaser Ali Husen

아래는 노드레드 UI 예시입니다.

이미지 출처 : Yaser Ali Husen

 

기본 화면 구성은 아래 이미지와 같습니다.

① 노드레드 편집기 화면 구성

 

노드레드는 크게 4개의 영역으로 구성되는데요,,

→ ① 상단(Header) 영역에는 배포(Deploy) 메뉴와(Deploy) 팔레트관리와 같은 설정 메뉴가 배치되어 있습니다.

→ ② 팔레트(Palette) 영역은 각종 기능 구현해 주는 노드 블록들로 배치되어 있습니다.

→ ③ 측면(Sidebar) 영역은 노드에 대한정보/도움말/디버그/노드설정에 대한 메뉴로 구성되어 있습니다.

→ ④ 작업공간(Workspace) 영역은 노드들을 배치하고 이어주며 함수 노드에 프로그래밍을 하는 영역입니다.

 

상단(Header) 영역에 있는 배포(Deploy) 메뉴는 작업공간영역에서 완성된 노드들의 플로우를 실행시키는 역할을 합니다. 만약 UI(User Interface)가 있는 플로우라면 “http://localhost:1880/ui” 주소를 통해서 UI를 확인하거나 실행할 수 있습니다. 그리고 배포하기 옆에 세줄로 표시된 부분을 클릭하면, 라이브러리 추가 등 팔레트관리와 같은 설정 메뉴가 있는데, 제세한 내용은 이후 계속 설명이 됩니다.

팔레트(Palette) 영역은 작업영역 좌측에 있으며, 기본적으로 6개 그룹(카테고리)의 메뉴로 구성되어 있습니다. 여기에서 필요한 노드 블록을 선택하여 작업영역으로 끌어다 놓는 식으로 작업합니다. 기본 그룹 외에 추가적으로 팔레트관리 메뉴에 있는 라이브러리 추가를 통해 대시보드(dashboard)나 라즈베리파이(Raspberry Pi) 노드 그룹 같은 것들을 추가해서 사용할 수 있습니다.  
대략 2,700개 이상의 모듈을 추가 설치가 가능하며, 사용자 정의로 직접 모듈을 등록하고 관리할 수 있습니다.

 

측면(Sidebar) 영역은 노드 편집기 내의 유용한 도구를 제공하는 패널로 구성되어 있는데요, Information/Help/Debug/Configuration nodes/Context Data/Dashboard, 6개의 탭으로 구성되어 있습니다.

주로 Debug탭을 많이 활용하게 되는데요, 작업공간에서 사용한 디버그 노드의 출력을 확인할 수 있습니다. 측면영역은 작업영역 확보를 위해 숨김/보이기 처리할 수 있으며, (Ctrl+Space) 단축키도 할당되어 있습니다. 가령,  "Hello world!"와 같은 

 

작업공간(Workspace) 영역은 필요한 노드 블록을 끌어다 놓고 블록들 사이의 플로우(Flow)를 연결하며, 함수 노드의 경우 Javascript로 프로그래밍을 추가해 넣을 수 있는 작업 공간입니다. 노드들을 클릭하면 세부 설정을 변경하거나 코드를 입력할 수 있는 메뉴가 표시됩니다.  노드레드에서 노드는 플로우를 작성하는 기본 구성단위 요소입니다. 

작업공간 상단 우측에 보면 + 표시와 서브메뉴가 보이는데요,  이를 클릭하면 플로우 페이지를 추가하거나 보이기 감추기 등을 할 수 있습니다. 

또한, 불필요한 플로우 삭제는 아래처럼,  플로우를 더블클릭 후 나타나는 메뉴에서 플로우를 삭제할 수 있습니다.

 

그럼, 사용법을 익히기 위해 먼저 간단한 플로우를 작성해 볼게요.

▶ Hello world ! 문자 출력해 보기

프로그래밍을 배울 때 제일 처음 출력해 보는 것이 “Hello world!”인 것은 이제 국룰? 인데요, 여기서도 그 문장을 출력해 볼게요.

먼저 위 이미지처럼, 공통노드(common node) 그룹에서 inject(타임스탬프)를 플로우 작업화면으로 끌어다 놓으세요.   
그리고, 타임스탬프노드를 더블 클릭하면 설정창이 열리는데, 아래 ②번 부분을 클릭하여 전달할 메시지 타입을 String(문자열)으로 선택합니다. 

그런 다음, 아래 ④번과 같이 "Hello world !" 메시지를 입력하고 완료 버튼을 눌러주세요.

 

 이제 공통그룹에서 debug 노드를 ⑤ 위치에 끌어다 놓으세요. 

그리고 "Hello world! " 노드 끝에 있는 포인트를 마우스로 드래그하면 연결할 수 있는 주황색 선이 나오는데요,  이를 debug노드의 연결점에 이어 붙여주세요.  (아래 이미지 참조)


각각의 노드 오른쪽에 보면, 파란색 점이 있는 것을 볼 수 있는데요, 이는 현재 새로운 노드가 삽입되었거나, 변경 사항이 발생한 표시이며, 아직 배포(적용)되기 전이라는 뜻입니다.     그럼,  이 상태에서 상단메뉴에 보이는 "베포하기" 버튼을 눌러주세요. 

 

그럼, 아래처럼 파란색 점이 사라진 것을 볼 수 있습니다.     이제 "Hello world!"라는 전달 내용(payload)을 가진 타임스탬프 노드의 왼쪽 버튼 부분(Inject)을 클릭하면 디버그 노드로 전달이 이루어집니다.   이윽고 우측 Sidebar의 디버그 창으로 "Hello world !"가 출력되는 것을 볼 수 있게 됩니다.    또한, Inject 버튼을 여러 번 클릭하는 만큼 출력이 됩니다.

 

참고로,  노드레드의 언어 설정은 기본적으로  영어, 독일어, 일본어, 러시아어를 지원하며, 한글도 지원하지만 간혹 한글 표현이 조금 어색한 경우도 있습니다.  
언어 설정 메뉴는 상단메뉴의 "배포하기" 버튼 오른쪽에 있는 삼선을 클릭 후,  창 탭을 클릭하면 나옵니다.

그리고 디버그 창에 출력된 내용이 지저분하거나 하여 삭제하고 싶을 때는 아래 휴지통 버튼을 클릭하면 됩니다. 

 

참고로 디버그(debug) 노드를 클릭 후 보이는 설정메뉴 하단에 "ㅇ사용가능" 표시가 있는데요, 이를 클릭하면 "Ø사용불가능"으로 표시가 바뀌며,  해당 디버그 노드는 실행을 시켜도 디버그 창으로 메시지 출력이 되지 않도록 사용이 중단됩니다. 

아래 이미지처럼,  해당 노드는 점선으로 처리되며,  Inject 버튼을 눌러도 아무것도 출력되지 않게 됩니다.

 노드의 삭제는 삭제하고자 하는 개별 노드를 선택한 다음 Delete 키로 쉽게 삭제 가능합니다.
노드간 연결된 선도 마우스로 선택 후 Delete 키로 삭제할 수 있습니다. 

그럼  "Node-RED의 시작!" 첫 글은 여기까지 하고,  다음 게시글에서 계속 이어가도록 하겠습니다.

반응형
반응형

※ Node-RED 소개

노드레드는 플로우(Flow) 즉, 흐름 기반의 프로그래밍으로써 시각적 표현에 매우 적합하고, 사용자가 보다 쉽게 접근할 수 있는 모듈입니다.  노드레드는 다수의 노드를 이용하여 각 노드별 원하는 요구사항에 맞는 플로우를 만들 수 있으며 이를 아두이노, 라즈베리파이 및 각종 센서, 디스플레이 등 제어모듈과 같은 하드웨어와 연결하여 시각적으로 보여주거나 제어가능하도록 ioT 시스템을 쉽게 구축할 수 있는 특징이 있습니다. 

 

[ Node-red  예시 ]

이미지 출처 : nodered.org
이미지 출처 : hackaday.com

 바로 위 이미지에서도 볼 수 있듯이 그래픽 기반의 GUI 환경으로 인터넷에 연결된 장치들을 모니터링하거나 컨트롤 할 수 있는 웹 앱 대시보드를 보다 쉽고 빠르게 구성할 수 있으며,  예를 들어,  API를 활용한 일기예보, 버스나 지하철 시간표, 뉴스 기사 및 IoT 홈 네트워크 등 활용가능한 범위도 다양합니다.  구동을 위한 서버가 필요한 경우에는 라즈베리파이로 저비용으로 간단히 해결할 수 있습니다.   

Node Red는 2013년 초 IBM의 Emerging Technology Services 그룹의 Nick O'Leary와 Dave Conway-Jonse의 부수 프로젝트로 개발 시작 되었고, 2016년 10월 JS Foundation의 창립 프로젝트 중 하나가 되면서 오픈 소스로 개발되었습니다.

Node Red는 가벼운 Node.JS를 기반으로 하기 때문에 라즈베리파이와 같은 낮은 하드웨어 및 열악한 클라우드 네트웍 환경에서도 실행이 가능합니다.   또한 Node의 패키지 저장소에 있는 22만 개 이상의 노드 패키지 모듈을 활용할 수 있는 장점이 있습니다. 

Node Red에서 생성된 플로우는 JSON 형식의 데이터를 사용하여 저장되며, 자신이 디자인한 플로우를 JSON 포멧으로 온라인상에 공개하거나 다른 사람과 쉽게 공유할 수 있도록 디자인되었습니다.(Node-red 공홈 또는 깃허브 등). 
 이는 자신이 힘들게 처음부터 모든 Node를 다 구성할 필요 없으며 다른 사용자가 공유한 노드를 쉽게 추가 함으로써, 쉽고 빠르게 시스템을 구축할 수 있는 장점이 있습니다.   

노드레드는 다양한 환경에서 설치 및 활용할 수 있는데요, 라즈베리파이, 비글본 블랙과 같은 저비용 하드웨어 뿐아니라, IBM클라우드, 아마존 웹 서비스, 마이크로소프트 애저와 같은 클라우드기반에서도 잘 작동됩니다. 

그럼,  노드레드를 사용해보기에 앞서, Node.JS의 설치가 필요합니다.  링크 : https://nodejs.org/ko/download   
링크에서 설치하려는 시스템에 맞는 Node.JS를 설치하세요.    여기서는 라즈베리파이에 설치하는 것으로 진행합니다만,  윈도 PC에서 라즈베리파이를 원격으로 접속해서 제어하기를 원한다면 윈도용 Node JS를 윈도 PC에 설치할 수도 있습니다.   혹은 라즈베리파이이와 하드웨어 모듈 같은 연결을 활용하지 않고 윈도용 NodeJS를 단순히 윈도 PC에 설치하여 Node-Red를 활용할 수도 있습니다.    

참고로,  각 노드에서 함수 코드를 만들 때에는 자바스크립트(Java Script)를 기본 코딩 언어로 활용하게 됩니다.   

그럼, 본격적으로 Node-Red의 세계로 출발해 보아요~!  

※  라즈베리파이에 Node-Red 설치하기

15년도부터 라즈베리파이 OS(라즈비안)에는 NodeJS와 Node-Red가 기본으로 설치가 돼있습니다.
즉, Node-Red와 업데이트만 진행하면 됩니다.
하지만 이것과 상관 없이 아래 명령어를 이용하여 설치하면 기존 설치된 혹은 구버전 NodeJS와 Node-RED를 자동 제거부터 하고 설치가 진행되니 그대로 진행해도 됩니다.

$ sudo apt-get update
$ sudo apt-get upgrade
$ bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered)
$ sudo apt-get update
$ sudo apt-get upgrade


그리고 위 명령어를 복붙복 하세요.  NodeRED 참고 공식 링크  : https://nodered.org/docs/getting-started/raspberrypi

아래 이미지들은 Node-Red 설치 진행 과정입니다.

Y를 두 번 입력

Y를 차례로 두 번 입력하여 설치해 주세요. 

그럼, 아래처럼 최신 버전의 Node JS (v16.19.1)와  Node-RED (v3.0.2)가 설치됩니다.  만약 구버전이 있다면 자동 삭제 됩니다. 

▶  부팅시 Node-RED가 자동으로 실행되도록 하려면 아래 명령어를 실행해 주면 됩니다.

$ sudo systemctl enable nodered.service

 - 만약 자동실행 설정을 해제하려면 아래 명령을 입력하세요. 

$ sudo systemctl disable nodered.service

 

▶ node-red의 서비스 시작은 아래 명령어로 시작하면 됩니다.   
Node-RED의 서비스 시작은 터미널에서 명령어를 입력하거나, 라즈베리파이 메뉴에서(개발 》Node-RED)   Icon을 클릭하여 실행 가능합니다.    명령어로는   $ node-red  또는  $ node-red start   하나를 입력하면 됩니다.

$ node-red start

 

▶ 이제 웹브라우저를 열어 Node-Red가 실행될 혹은 작업화면은 라즈베리파이의 IP 주소를 입력하면 되는데요,   기본 설치되어 있는 크롬미움 Chromium (크롬의 리눅스 버전)이나,  파이어 폭스(Fire Fox Web) 웹브라우저에서 아래 주소를 입력하면 됩니다. 
http://localhost:1880      또는  http://localhost:1880/ui/     

혹은 ip를 직접 입력하여   http://192.168.138.130:1880  또는 http://192.168.138.130:1880/ui로 입력하면 아래처럼 Node-Red 에디터(편집) 창이 나타나는 것을 볼 수 있습니다.   이 공간에서 플로우를 개발한다고 생각하면 됩니다.

▶ Samba 툴을 설치하여 윈도우 PC에서 "원격 데스크톱 연결"을 통해서도 가능합니다.  
  라즈베리파이 원격 데스트탑 연결 내용은 아래 게시글을 참고해 주세요. 
  ▷ 윈도PC에서 라즈베리파이 원격 제어하기 ( https://rasino.tistory.com/329 )

 

그리고 Node-RED 네트워크 사용자 추가나 Node-RED 기본 환경설정은 아래 명령어로 설정해 주면 되는데요, 

$ node-red admin init

아래와 같은 내용이 나타나며,  아래 경로의 settings.js 파일에 설정내용이 저장됩니다. 

  /home/pi/.node-red/settings.js

엔터를 하면, 다음으로 진행이 되는데요,   Yes와 No 메뉴 혹은 기타 선택 메뉴가 나타나면 키보드 화살표 위/아래 키로 선택해 주면 됩니다. 

Do you want to setup user security? Yes
 → User Security :    id (예시: pi )와 password (8자 이상, 예시: raspberry)  입력 후 엔터,  →  유저 추가 선택 (여기서는 No) 선택  (ID와 패스워드는 잘 기억해 두세요)
→  User permissions?full access를 선택  
→ Add another user?No 선택 (추후 선택 가능)

②  프로젝트 선택  :  Do you want to enable the Projects feature?No 선택

③ Flow 파일 설정:  Flow File settings?flows.json (기본값으로 저장)

④ 테마 에디터 및 텍스트 에디터 설정 :   Select a theme for the editor default?  두 가지 모두 default로 설정 

⑤ 외부 모듈 받아들일지 여부? :   Allow Function nodes to load external modules?Yes (기본값으로 저장)

 

이와 같이 설정하면 무난하며, 추후에 명령어로 다시 변경 가능합니다. 

 

이렇게 설정하고 재부팅하게 되면,  로그인 창이 뜨는데요,  조금 전에 만들어준 계정으로 로그인하면 됩니다.

(예시)  ID :  pi  ,     Password :  raspberry

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

(기타 참고)   라즈베리파이에 파이어 폭스 Firefox Browser 설치하기  명령어 (최신 버전)

$ sudo apt update
$ sudo apt install firefox-esr

 

아래는 NodeRED를 실행하고 간단한 문자(String) 출력과 함수 노드를 이용한 숫자 카운트를 해보는 모습입니다. 

 

물론 같은 WiFi망 혹은 내부 네트워크에서 접속하는 것이라면, 아래처럼, 윈도 PC에서 라즈베리파이 주소를 입력하면 Node-RED 편집화면에 접속하여 실행시킬 수 있습니다.   ( 예시,  http://192.168.138.130:1880/ )

단, 윈도에서 노드레드를 실행하기 위해서는 윈도에 윈도용 Node JS가 설치되어 있어야 합니다. 
링크 : https://nodejs.org/ko/download    (LTS 안정화 버전을 다운로드하세요)
node js 설치 확인 및 버전확인은 아래처럼 가능하며, 윈도에 설치한  NodeJS의 버전 확인은,  윈도》실행》 cmd 명령 프롬프트 실행 하여,  node  -v로 실치 및 버전을 확인할 수 있습니다.    또한,  라즈베리파이에서는 터미널에서 같은 명령어로 확인 가능합니다. 

 

참고로,  윈도에서 Node-RED 실행은 아래 이미지와 같이 "node-red"를 입력하면 됩니다.   Node-RED의 버전확인도 가능하고 Starting flows라고 표시되는 것을 확인할 수 있습니다. 


마지막으로,
▶ Node-RED의 플로우 편집화면은   http://localhost:1880  또는  http://192.168.138.128:1880 형태의 주소로 접속하면 되며,
▶ Node-RED의 Dash Board(대시보드) 결과 출력 혹은 컨트롤 화면은  주소 마지막에/ui를 붙인 주소를 입력하면 됩니다.   (예시,  http://localhost:1880/ui   또는 http://192.168.138.128:1880/ui )

 

 

그럼, 차후에 Node RED를 이용해서 라즈베리파이에 연결된 모듈이나,  MQTT 브로커와 연동된 통신 실습을 올려볼 예정입니다.   감사합니다.

 

반응형