Trong đó:

• Có 1 máy chủ (gọi là MQTT broker) và nhiều thiết bị kết nối vào máy chủ (gọi là MQTT client, gọi tắt là client) (Trong hình xanh lá là broker, xanh dương là client)

• Client được chia làm 2 nhóm: Nhóm gửi dữ liệu gọi là publisher, hành động gửi dữ liệu gọi là publish và nhóm nhận dữ liệu gọi là subscriber, hành động đăng ký nhận dữ liệu từ broker gọi là subscribe (Trong ảnh, publisher là cảm biến nhiệt độ, còn điện thoại và máy tính là 2 subscriber).

• Chủ đề hay topic chính là thứ giúp publisher và subscriber nhận ra nhau để có thể gửi/nhận dữ liệu với nhau. Ví dụ Arduino gắn cảm biến ánh sáng gửi dữ liệu đến broker với topic “Độ sáng phòng khách” và app iNut cần biết độ sáng trong phòng khách nên sẽ đăng ký nhận dữ liệu từ topic “Độ sáng phòng khách” của broker.

• Broker có chức năng là nhận dữ liệu từ các publisher, phân loại dữ liệu theo topic và phân phối dữ liệu đến các subscriber theo các topic đó.

2. Hướng dẫn cài đặt NodeRed:

    Vì Node Red dựa trên NodeJS nên trước tiên ta cần cài đặt NodeJS nhé, xem hướng dẫn tại đây

    Cách cài đặt được nêu trong bài viết này có thể khác với các hướng dẫn khác, mục đích của cách cài này là giúp bạn dễ đưa ứng dụng của mình lên trên các host để chạy ví dụ như heroku,......

    Hướng dẫn cài đặt git:

    Trước tiên các bạn cần cài đặt git. Git là công cụ đắc lực của các lập trình viên, giúp quản lý mã nguồn để làm việc hiệu quả hơn, ví dụ như code của bạn đang ở phiên bản 1.2 nhưng muốn quay về phiên bản 0.8 thì git có thể giúp bạn dễ dàng giải quyết điều này nhanh chóng, tất nhiên git sẽ còn nhiều chức năng khác.

    Các bạn truy cập vào link git-scm.com, nhấn nút tải về rồi cài đặt bình thường.

    Cài đặt thì rất đơn giản, nhưng để sử dụng được thành thạo thì cần tốn một xíu thời gian. Các bạn có thể tìm hiểu trên google với từ khóa "hướng dẫn git cơ bản". Hoặc các bạn có thể bỏ qua bước này và tiếp tục làm theo hướng dẫn bên dưới mà không cần quan tâm tới git dùng như thế nào.

    Tiếp theo các bạn mở thư mục chứa dự án của các bạn, chuột phải chọn "Git Bash Here" để mở cửa sổ git command line.

    Sau đó chạy lần lượt 2 lệnh sau. Lệnh đầu tiên thì để clone project node-red mẫu về, còn lệnh thứ 2 thì để di chuyển git command line vào thư mục node-red-host (thư mục mà chúng ta sẽ clone về).

git clone https://github.com/loc4atnt/node-red-host.git

cd node-red-host

    Tiếp theo chạy lệnh:

npm install

    Xong như vậy là chúng ta đã cài đặt thành công Node Red. Để khởi động, chúng ta chạy lệnh:

npm start

    Sau khi chạy lệnh khởi động, trên màn hình git command line sẽ hiển thị thông báo như bên dưới:

    Tiếp theo chúng ta dùng trình duyệt web truy cập địa chỉ: localhost/admin để mở Node Red.

    Tài khoản đăng nhập mặc định:

• Username: admin
• Password: admin

Màn hình làm việc chính của NodeRed sau khi đăng nhập

    Hướng dẫn tạo 1 webapp đơn giản với NodeRed:

    Trước tiên, để làm quen với NodeRed chúng ta sẽ thử tạo 1 webapp với chức năng đơn giản như sau: Có 1 nút nhấn khi nhấn nút thì màn hình sẽ in ra dòng chữ “Đã nhấn nút” và hiện 1 thông báo nhỏ.

    Các bạn kéo tab ở bên tay trái xuống dưới cùng sẽ thấy phần dashboard, tại đây chứa các node giúp bạn xây dựng nên một giao diện bảng điều khiển như ý. Mình cần 1 nút nhấn, 1 dòng chữ và 1 thông báo nên mình sẽ kéo các node button, text, notification ra.

    Tiếp theo, các bạn mở phần cài đặt tổng quan của Dashboard ra:

    Sau đó, các bạn cần tạo Tab mới => Group mới cho các đối tượng giao diện (nút nhấn, dòng chữ)

    Tiếp theo, nhấn đúp chuột vào node button để cài đặt:

• Chọn Tab, Group đã tạo ở mục Group
• Nhập tên hiển thị vào mục Label
• Nhập dữ liệu gửi vào luồng ở mục Payload (Vì theo mô hình “flow” nên đầu dây chuyền khi nhấn nút sẽ gửi 1 dòng dữ liệu vào luồng, ví dụ ở đây là "hello")

    Nhấn Done để lưu

    Cài đặt cho node text tương tự như Button. Ngoài ra, {msg.payload} là dữ liệu trong luồng; Layout là định dạng hiển thị dòng chữ

    Cài đặt cho node notification với Layout là vị trí hiển thị thông báo

    Sau đó chúng ta sẽ nối các node lại thành một luồng để chúng có thể hoạt động. Các bạn nhấn giữ chuột từ vị trí đuôi của node này đến vị trí đầu của node kia để tạo liên kết luồng giữa 2 node, ở đây 1 nối với 2 và 1 nối với 3 (1 là input, 2 và 3 là output)

    Hoàn tất, các bạn nhấn vào nút Deploy ở góc trên bên phải để chạy ứng dụng. Sau đó các bạn ở tab trình duyệt mới và truy cập vào địa chỉ localhost để xem kết quả.

    Dòng chữ in ra và thông báo chính là dữ liệu trong luồng từ nút nhấn, tuy nhiên như đã đề ra ở trên chúng ta cần in dòng chữ và hiện thông báo: "Đã nhấn nút". Do đó chúng ta cần thêm một node xử lý giữa node input (button) và 2 node output (text, notification) - Đó là node chuyển đổi dữ liệu trong luồng, cụ thể ở đây chúng ta sẽ chuyển chuỗi "hello" thành "Đã nhấn nút".

    Nhấn chuột vào 2 đường flow cũ và nhấn phím Delete để xóa, tiếp theo tìm đến mục function trong phần các node bên trái màn hình và kéo node change ra và liên kết luồng lại như hình

    Nhấn đúp chuột vào node change, gõ nội dung dữ liệu được chuyển thành vào, rồi chọn Done để lưu

    Cuối cùng, Deploy rồi mở lại localhost để xem kết quả

Kết quả đã đúng theo yêu cầu

    Để dừng NodeRed thì các bạn quay lại cửa sổ git command line và ấn tổ hợp phím Ctrl + C.

    Hướng dẫn đưa webapp lên internet:

    Sau các bước phía trên thì Node Red chỉ mới được cài đặt trên máy tính. Do đó chúng ta chỉ có thể truy cập webapp trong nội bộ máy tính của mình, và khi máy tính tắt thì Node Red không chạy và webapp cũng tắt. Do đó cần đưa Node Red và webapp của mình lên một máy chủ (host) nào đó để có thể dùng được Node Red & Webapp của chúng ta ở mọi lúc mọi nơi.

    Ở đây mình sẽ dùng Heroku. Heroku cung cấp dịch vụ máy chủ đám mây giúp dễ dàng trong việc deploy ứng dụng. Điều tuyệt vời ở Heroku là trang này bạn có thể sử dụng dịch vụ hoàn toàn miễn phí với các ứng dụng web không yêu cầu phải có tốc độ truy cập cao hay dung lượng lớn. Các dự án của maker chúng ta thì dùng heroku là số 1 rồi, vì chúng ta có thể tự do edit code của mình, thêm thắt tùy ý.

    Vì miễn phí nên thời lượng truy cập sẽ chỉ có giới hạn là 550 giờ (~22 ngày) mỗi tháng. Hơn nữa, Sau 2 đến 3 giờ nếu server không có người truy cập thì server sẽ chuyển sang trạng thái ngủ, nên không thích hợp cho các dự án data logging, lưu cơ sở dữ liệu tại chỗ hay kiểm tra tạo báo động,... - Để xử lý vấn đề này, mình sẽ có hướng dẫn bên dưới tuy nhiên nếu làm theo hướng dẫn ấy thì webapp của bạn chỉ có thể chạy đến ngày thứ 22 là dừng do phải chạy liên tục 24/24.

    Đầu tiên, các bạn truy cập địa chỉ: heroku.com và đăng ký một tài khoản.

    Sau khi đăng ký, một mail xác nhận sẽ được gửi tới mail của bạn đăng ký. Bạn vào mail và nhấn vào link xác nhận trong mail của heroku gửi đến.

    Tiếp theo, các bạn nhập mật khẩu vào tiếp tục.

    Ấn Accept để chấp nhận điều khoản và hoàn tất việc đăng ký!

    Tiếp theo, truy cập vào địa chỉ: https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up kéo xuống tải về phiên bản phù hợp với hệ điều hành bạn đang dùng, rồi cài đặt như bình thường.

    Tiếp theo, các bạn mở cửa sổ git command line ở vị trí bất kỳ, rồi gõ lệnh:

heroku login

   Sau đó nhấn phím bất kỳ (trừ phím q) để đăng nhập vào heroku dưới máy tính của bạn.

    Sau đó nó sẽ đưa bạn lên trình duyệt web để đăng nhập, sau khi đăng nhập thành công, bạn quay lại cửa sổ command line và nhận được thông báo đã đăng nhập.

    Tiếp theo chúng ta cần đưa NodeRed và webapp của chúng ta lên heroku. Các bạn mở cửa sổ git command line tại thư mục node-red-host đã đề cập bên trên.

    Đầu tiên cần khởi tạo ứng dụng heroku tại thư mục này. Gõ lệnh:

heroku create <tên app heroku>

    Sau đó chạy lần lượt các lệnh sau:

git add .

git commit -m "<mô tả ngắn về phiên bản webapp này>"

git push heroku main

    Ba lệnh trên giúp lưu phiên bản của webapp của bạn lại đồng thời up lên heroku. Sau khi hoàn tất, bạn sẽ nhận được thông báo ứng dụng đã được deploy lên!     Để truy cập giao diện chỉnh sửa node thì vào địa chỉ: <tên app heroku>.herokuapp.com/admin

    Còn giao diện xem webapp thì là địa chỉ: <tên app heroku>.herokuapp.com

    Như vậy là hoàn thành, bạn có thể dùng địa chỉ đó để mà sử dụng webapp mọi lúc mọi nơi!

    Lưu ý: Các bạn không nên chỉnh sửa node trực tiếp trên địa chỉ <tên app heroku>.herokuapp.com/admin vì sẽ không được lưu lại. Mà hãy chỉnh sửa node trên máy tính (Xem lại từ bước chạy lệnh npm start ở tít phía trên), sau đó chạy lại ba lệnh lưu phiên bản phía trên để up lại lên heroku.

    Hướng dẫn đổi mật khẩu/tài khoản:

    Như các bạn cũng thấy ở trên, thì tài khoản & mật khẩu mặc định đăng nhập vào giao diện admin NodeRed là admin-admin. Do đó, sau đây mình sẽ hướng dẫn các bạn đổi thông tin đăng nhập.

    Đầu tiên, mở cửa sổ git command line tại thư mục node-red-host. Gõ lệnh:

node-red admin hash-pw

    Sau đó nhập mật khẩu cần đổi rồi nhấn Enter. Tiếp theo copy đoạn mã hiện ra trên cửa sổ.

    Tiếp theo, mở file settings.js trong thư mục node-red-host ra, tìm đến mục adminAuth. Dán đoạn mã vừa copy vào mục password, sửa tên đăng nhập tại mục username.

    Cuối cùng lưu lại, rồi chạy 3 lệnh lưu phiên bản như đã hướng dẫn phía trên nếu bạn muốn up lên heroku.