TẠO ỨNG DỤNG ĐƠN GIẢN VỚI NODE-RED | PHẦN 1

Nền tảng low-code 

Nền tảng phát triển low-code (LCDP) cung cấp một môi trường phát triển phần mềm, nơi bạn có thể tạo cho mình một ứng dụng hoàn chỉnh thông qua giao diện sử dụng trực quan. 

Một nền tảng low-code có khả năng tạo nên một ứng dụng hoạt động hoàn chỉnh, hoặc yêu cầu thêm code cho các tình huống cụ thể. Các nền tảng này giúp tiết kiệm thời gian phát triển theo cách truyền thống, rút ngắn thời gian doanh nghiệp nhận được sản phẩm. 

Lợi ích chung của nền tảng này là cho phép cả những người không có kiến thức kỹ thuật tham gia vào quá trình xây dựng app. Nó không chỉ cần những người có kỹ năng code mà còn yêu cầu quản trị tốt để có thể tuân thủ các quy tắc và quy định chung.

Chắc hẳn mọi người đã từng nghe qua, thậm chí đã và đang làm việc với low-code. Trong thế giới lập trình, có rất nhiều ứng dụng cho phép chúng ta làm việc đó, từ các ứng dụng mobile cho tới web, thậm chí là các API. Một số ứng dụng dạng low-code nổi tiếng có thể kể đến là Labview, MIT App Inventor, App Creator,…

Trong bài viết này, chúng ta sẽ cùng tìm hiểu một công cụ low-code có tên Node-RED và cách tạo ứng dụng đơn giản từ Node-RED.

Trước khi đi vào tìm hiểu, hãy cùng xem qua 2 bức hình bên dưới:

Với bức hình đầu tiên này, ta có thể thấy 1 lập trình viên “full stack” có rất nhiều kỹ năng cần học và rất nhiều đầu việc cần làm. Từ việc phải biết các ngôn ngữ back-end, front-end cho tới ngôn ngữ truy vấn, database,…

Với Node-RED, mọi thứ đều trở nên đơn giản hơn rất nhiều. Cụ thể nó có thể làm được những gì? Hãy cùng theo dõi loại bài viết về Node-RED của CO-WELL Asia để có cái nhìn tổng quát và chi tiết hơn.

Giới thiệu về Node-RED

Node-RED ra đời vào đầu năm 2013 bởi Nick O’Leary và Dave Conway-Jones thuộc nhóm những dịch vụ công nghệ mới nổi trội của IBM.

Đây là một công cụ lập trình dùng để kết nối các phần cứng, các API và các dịch vụ trực tuyến với nhau theo những cách thú vị và mới mẻ. Nó sử dụng phương pháp lập trình low-code cho các ứng dụng hướng sự kiện (event-based program).

Công cụ này cung cấp một giao diện trực quan trên trình duyệt mà ở đó, chúng ta có thể kết nối một cách đơn giản các luồng lại với nhau. Thêm vào đó, ta có thể sử dụng bộ thư viện khổng lồ các Node trong kho lưu trữ để tạo và triển khai chỉ với vài click chuột đơn giản.

Các luồng được tạo trong Node-RED được lưu trữ bằng JSON nên dễ dàng import và export để chia sẻ với mọi người.

Các thành phần trong Node-RED

Sau khi cài đặt và thiết lập các tùy chọn cơ bản, ta sẽ có được giao diện như sau:

Khi sử dụng Node-RED, chúng ta có tới 4 cách để có thể tạo một ứng dụng đơn giản, nhanh chóng: 

• Sử dụng UI dashboard cung cấp sẵn. Đây là 1 package chưa rất nhiều các node mẫu như button, checkbox, switch, text input,… và rất nhiều UI khác chờ mọi người khám phá.
• Sử dụng HTML, CSS truyền thống để tạo nên ứng dụng thay vì sử dụng các UI có sẵn, giúp chúng ta custom nhiều thứ chúng ta muốn mà UI dashboard không thể làm được.
• Sử dụng các file JSON được export.
• Sử dụng project được export.

Sau đây, chúng ta sẽ cùng tìm hiểu cách lập trình một ứng dụng đơn giản sử dụng giao diện Dashboard sẵn có của Node-RED.

Tạo ứng dụng bằng UI Dashboard

Đầu tiên mọi người khởi động Node-RED bằng cách mở cmd và chạy lệnh node-red. Tùy và từng hệ điều hành mà có cách khởi chạy khác nhau. Bài viết này sử dụng hệ điều hành Windows nên sau khi chạy xong sẽ được kết quả như sau:

Mọi người sẽ thấy link đến node-red trên browser mặc định tại 127.0.0.1:1880.
Truy cập vào link trên sẽ đi đến giao diện lập trình của Node-RED như bên dưới:

Để có thể sử dụng package dashboard, chúng ta sẽ chọn menu ở phía trên bên phải, chọn Manage palette và cài đặt theo hướng dẫn như bên dưới:

Tiến hành update hoặc cài đặt (install) như hình trên, ta sẽ có được package làm việc với node-RED. Package này hỗ trợ nhiều UI có sẵn để chúng ta tạo ứng dụng một cách nhanh chóng nhất.

Sau khi cài đặt ta sẽ có giao diện như sau:

Phần chuẩn bị xem như là hoàn tất, tiếp theo ta sẽ xây dựng 1 kịch bản App login đơn giản như sau:

• 1 text field dùng để nhập username
• 1 text field dùng để nhập password
• 1 button login dùng để đăng nhập
• 1 function
• 1 notification
• 1 debug

Khi người dùng nhập đúng usename và password mặt định thì sẽ hiển thị thông báo “Wellcom to Node-RED” người lại thì message có nội dung “usename or password is incorrect”.

Mọi người sẽ làm như sau đây để tạo ra flow như trên:

Tiếp theo, chúng ta sẽ config các tham số cho các block để chúng có thể làm việc được với nhau:

Config cho Text input và button.

Config cho Function:

Sau khi config ta ấn vào button Deploy.

Vào địa chỉ 127.0.0.1:1880/ui/ để mở App mà chúng ta vừa deploy lên. Giao diện nhận được như sau:

Tiến hành nhập username và password là “admin” và click button Login, ta sẽ thấy notification góc trên bên phải:

Ngược lại nếu nhập sai 1 trong 2 thì:

Đó là một vài những nét cơ bản về bộ công cụ Node-RED. Ở phần tiếp theo, chúng ta sẽ cùng sử dụng HTML và CSS để tạo ra một sản phẩm có độ tùy biến cao hơn.

Hẹn gặp lại mọi người trong phần tiếp theo

CO-WELL Asia

Tham khảo các bài viết khác của CO-WELL Asia tại đây.