UBOS Community: vova

How to publish a template?

vova — Tue, 27 Jun 2023 09:23:04 +0000

UBOS offers a solution that allows you to create your own templates with ease and speed. In this article, we will consider the process of creating your own template on UBOS, which will consist of a frontend and a backend part

Step 1. Publishing the project on GIT

Our template consists of UI and Node Red. These are two different services that need to be connected to GIT.
Templates developed by our team are stored on GitHub but you can also use GitLab
namespace: ubos-template-AI-task-manager-UI / ubos-template-AI-task-manager-NR

Step 2. Publication of the template on the UBOS platform

You need to open the Template Manager tab. Where you can fill in all the information about the template

This is the main template creation screen

If you select Status private, another field will appear in which you need to write the mail of the user to whom this template will be available. The number of users is not limited.

The Photo button opens a modal window where you can upload screenshots of the template.

Various information will be displayed on the template details page. If the Demo URL field is filled in, an iframe with this link will be displayed, and if screenshots are loaded, the gallery will be displayed

The Service button opens a modal window where you need to fill in information about the service that will be in the template. Each service must be described and added separately

Here we indicate the link to the GIT service that we connected at the beginning of the article, the type and size of the service.

Each service can contain an ENV (optional). Here you can write api keys, constants and refer to another service that will be in this template.
For example, the template consists of two services UI (frontend) and NodeRED (backend). The UI service has an API that sends requests to NodeRED. In order not to manually add a link to the backend to each API, you can add a link that will be generated when the template is loaded to ENV. How to do it?
ENV consists of a key and a value. Service unique name should be specified in the value, which should start with $ $pineconeAIBotNR. Before downloading, a link to the service is created, and if a service with that name exists, a link to it is written there

The Integration button opens a modal window where you need to add icons with which services the template interacts with

After filling in the information about the template, you need to press the Create new template button

The template will appear on the My templates page. There you can view, edit, delete and publish it

Dear users,

We are not responsible for the templates you create on UBOS. Please keep in mind that we provide tools for creating templates, but we do not control their content and functionality.

You are solely responsible for the selection, development and use of templates on UBOS. We recommend that you review and test the templates you create before using them to ensure they are safe and fit your needs.

We do our best to ensure the security and reliability of the UBOS platform, but we cannot guarantee that the templates you create will be error-free or meet your needs. Use them at your own risk.

Sincerely,
The UBOS team

How to download a template?

vova — Tue, 27 Jun 2023 08:19:01 +0000

Low code platforms are becoming increasingly popular among software developers who are looking for fast and efficient ways to create applications with less coding. UBOS is one such platform that offers an easy way to download ready-made templates. In this article, we will look at the process of uploading templates to UBOS and provide examples to better understand this technology.

Step 1. Choosing a template

Choose the appropriate template for your project. UBOS provides a collection of ready-made templates that cover a variety of areas, including AI, bots, e-commerce, and more.

Step 2. Choice of workspace and download type

The Fork Template button allows you to download a template in one click without additional settings

The Advanced Mode button allows you to make additional settings for template services. This is editing the name of services and ENV

Step 3. Download process

If you used Advanced Mode, you need to press the Fork template button. After that, a page with the status of the template services will appear

When all services are loaded, the status will change. The download process is complete.

You can view information about the service, change the ENV, stop or delete the service

Dear users,

You are solely responsible for the selection, development and use of templates on UBOS. We recommend that you review and test the templates you create before using them to ensure they are safe and fit your needs.

We do our best to ensure the security and reliability of the UBOS platform, but we cannot guarantee that the templates you create will be error-free or meet your needs. Use them at your own risk.

Sincerely,
The UBOS team

Creating a MongoDB Database

vova — Wed, 21 Jun 2023 21:16:36 +0000

Most programs require data storage. On the UBOS platform, you can use an external database or configure your own. To create a new database, you need to open Services by clicking the "+" button, choose the desired database, and configure it.

Once a green indicator appears in the left sidebar next to the created database, open the modal window where you can configure the new database.

To use the MongoDB database in the Node-RED environment, you need to add nodes for working with MongoDB. Follow these steps:

Open the Node-RED interface or editor.
Click on the menu icon (usually represented by three horizontal lines) to expand the menu options.
Select "Manage Palette" from the menu.
In the Manage Palette window, click on the "Install" tab.
Search for "node-red-node-mongodb" in the search bar.
Once you find the "node-red-node-mongodb" package, click the "Install" button next to it.
Wait for the installation process to complete.
After the installation is finished, you can start using the MongoDB nodes in your Node-RED flows.

By installing the "node-red-node-mongodb" package, you will have access to the necessary nodes for working with MongoDB within the Node-RED environment.

After the installation, the downloaded nodes will appear in the list of available nodes.

Next, you need to enter the data of the created database into the node.

mongodb in - find, cound, aggregate
mongodb out - save, insert, update, remove

After filling in the data, you need to click on the "Update" button, followed by "Done" and then click on "Deploy". If the data has been entered correctly, the text "connected" will appear below the node, indicating a successful connection.

Additional Information:

Introduction and familiarization with the UI Editor environment

vova — Wed, 21 Jun 2023 20:18:31 +0000

UI Editor Layout
Widgets Pane
Adding UI Widgets
Widget Settings
Deploying UI
Working with API
API Panel

UI Editor Layout

Let's start with learning about the first tool in the UBOS ecosystem that will help us create dashboards, admin panels, CRUD applications, and other types of web applications quickly and almost without programming.

To open the visual editor, you need to click "+", open the page Services.

On the creation page of UI EDditor select the desired package and change the name of your service.

Next you have to wait when opposite the name of your service in the side panel will appear a green sign and open it.

After clicking on UI Editor, it will open in the main workspace.

The UI editor has its own layout, which consists of 3 main windows:

Sidebar - Helps create and organize pages, user interface widgets, and APIs for working with data.
Page Editor - This is the canvas where you can drag and drop user interface widgets from the widget panel and design how your page will look. Each page has its own canvas.
Widget Settings - Displays the properties of the selected user interface widget on the canvas.

Widgets Pane

The widget panel can be opened by clicking the "+" button on the current page. After opening the panel, you will see all the available widgets that can be dragged onto the page canvas to create the design of your page.

Adding UI Widgets

Each widget from the widget panel can be dragged onto the page canvas to create the user interface. After placing a widget on the page canvas, you can customize it to align with the design of your page and the data you want to display.

Widget Settings

Each widget has a list of properties that can be customized in the WIDGET SETTINGS window located on the right side of the UI editor. To open the widget settings window, simply click on the icon at the top of the widget. The widget properties can be used to modify the style, data, or behavior of the widget.

Deploying UI

Let's create a sample page consisting of 3 button widgets and 1 table widget. Try configuring the widgets on the page according to the example below:

Once the page is ready, it needs to be deployed to view it from an end-user perspective. To do this, click the DEPLOY button on the top panel. In the modal window that appears, click View Application, and a new tab will open in your browser with the URL for previewing your application.

Working with API

To make your program dynamic, you will need specific data, which you can obtain by creating an API. You can visualize any data retrieved from the API call using the available widgets.

You can create a new API by clicking the "+" button in the side menu on the current page. After clicking, you should see the API panel where you can edit the API properties.

API Panel

Here you can modify your API using the REST interface. The API supports all REST HTTP methods: GET, POST, PUT, DELETE, PATCH. You can configure header values, body fields, and parameters.

You can obtain values for the REST API from widgets by entering {{ widgetName.propertyName }} in the field.

How to use the "function" node?

vova — Wed, 21 Jun 2023 13:43:11 +0000

Writing Functions
- Example of how it should be done
- Example of how it should not be done
Multiple Outputs
Event Registration
Error Handling
Manage Palette
NPM Package

The function node allows you to execute JavaScript code for messages that are passed through it. The message is passed as an object named msg, and by default, it will have a msg.payload property that contains the body of the message.

Other nodes can add their own properties to the message. They should be documented in their respective documentation.

Writing Functions

The code entered in the function node represents the body of the function. The simplest function returns the message as it is.

return msg;

If a function returns null, the message is not passed, and the flow terminates.

The function must always return an msg object. Returning a number or a string will result in an error.

The returned message object does not necessarily have to be the same object that was passed. The function can construct a new object before returning it. For example:

Note: Creating a new message object will result in the loss of any properties from the received message. This can break certain flows, such as the HTTP In/Response flow, which requires the mandatory preservation of the msg.req and msg.res properties. In general, function nodes should return the message object they received after making any desired changes to its properties.

Example of how it should be done

Let's create a flow that returns the value of the request body. We'll use the http in and http response nodes (more details about them here).

The http in node sends a message to the function node with properties like payload, req, and res. In the body of the function, we only need to update the specific value we want in msg.payload without replacing the entire msg object. Then the http response node will understand that it needs to return the response to our request.

Let's make a request using Postman.

We received the text that was passed in the request body as the response.

Example of how it should not be done

Let's modify the body of the function in the above-described flow to:

In the console, we will receive the message "No response object". This happens because we created a new message object, and the http response node doesn't know that it needs to return the response.

Therefore, if you need to create new properties, you should assign them to msg without creating a new object.

Multiple Outputs

In the function node's editor, there is an option to change the number of outputs and the name of the function.

Let's add two outputs and change the name of the function.

Now the function node has two outputs. The question arises: how do we control them? We need to use an if statement and return an array of messages in its body. The number of messages in the array depends on the number of outputs, which are numbered from top to bottom.

if (msg.payload.length > 0) {
    msg.payload = `array length: ${msg.payload.length}`;

    return [ null, msg ]
}

msg.payload = "Empty"
return msg;

For example, let's consider that we have two outputs: return [null, msg]. In the first output, we return null, indicating that the function doesn't return anything on that output in this case. In the second output, we pass msg. Therefore, if an array with multiple elements is passed to the function, the second output will return a string representing the length of the array. Otherwise, we return return msg on the first output.

Let's add another function node called "data" that returns an array of objects.

msg.payload = [
    { name: "banana" },
    { name: "potato" }
];

return msg;

We received true, so the message was sent to the second output. If we pass an empty array to the "data" function, the condition will not be met, and the message will be sent to the first output.

msg.payload = [];
return msg;

Event Logging

To effectively debug your code, it is important to understand what data is coming in and how it changes. For this purpose, you can use the following functions to log messages to the console (similar to console.log() in JavaScript).

node.warn("Something happened");
node.error("Something bad happened");

Let's modify the example we discussed earlier. We'll add a loop that iterates over an array and prints its elements to the console.

if (msg.payload.length > 0) {
    node.warn("start if");

    for (const element of msg.payload) {
        node.warn(element);
    }

    return [ null, msg ]
}

msg.payload = "Empty"
return msg;

You can see 3 node.warn events in the console.

Error Handling

If a function encounters an error and needs to terminate the execution flow, it should not return anything. To trigger a catch at a specific node, the function should call node.error("error", msg), passing the error message as the first argument and msg as the second argument.

Let's modify the previous example by adding an error to the _data_ function.

msg.payload = [
    { name: "banana" },
    { name: "potato" }
];

node.error("Еrror", msg);

The _data_ function returned an error, so the node stopped working.

Manage Palette

To add additional Node-RED nodes to your project, you need to open the menu on the right and select the "Manage Palette" tab.
The "Nodes" tab contains the libraries that are already loaded, and in the "Install" tab, you need to enter the name of the library and install it.

Before installing a library, it is advisable to familiarize yourself with its documentation.

After installation, the newly installed nodes will appear in the list of all nodes.

NPM package

Node-RED allows you to fetch additional modules from the Node Package Manager (NPM). To do this, select the "function" node where you want to use the additional module and go to the "Setup" tab. In this tab, click the "add" button and enter the module you want to use. If such a module exists on the NPM platform, we can use it.

Let's create a flow that takes an image, optimizes it, and flips it.

[Image] -> [Optimization Module] -> [Flip Module]

In this flow, the "Image" node represents the input image, the "Optimization Module" performs image optimization, and the "Flip Module" flips the optimized image.

Let's use the new "viewer" node that we previously installed.

Note: To work with images, it is recommended to use the POST method and enable image uploads.

Let's add the sharp module for working with images.
У тіло функції додаємо логіку роботи з зображенням.

const optimized = await sharp(msg.req.files[0].buffer)
    .toFormat("jpeg", { quality: 60 })
    .flip()
    .toBuffer();

msg.payload = optimized;

return msg;

We will send the image using Postman. The request body will be of type form-data. For the image, select the file type.

The result of the execution

The request sends an image buffer stored at the following path: msg.req.files[0].buffer. The weight of the sent image is size: 414164 (404 KB).
The converted image weighs 292563 (285 KB).

Basic nodes in Node-RED

vova — Wed, 21 Jun 2023 13:14:00 +0000

To create flows in Node-RED, it is useful to understand how basic nodes work. In this article, you will learn about them.

inject
debug
function
http in and http response

The inject node is used to manually trigger a flow by clicking the button on the left. It can also be set to automatically trigger at specific time intervals.

The default inject node has properties such as 'payload' and 'topic'. They accept various data types, such as object, buffer, global, string, number, boolean, and others.
Double-clicking on the node opens its settings. Let's write the string "Hello dev" in the payload. After any interaction with the node, remember to save the changes by clicking the Done button.

https://community.ubos.tech/uploads/articles/yu2u2n98nnz0ngonf0ts.gif

The debug node is used to display messages on the sidebar panel of the editor.

In the description of the inject node, we used debug to see the message sent by the node.
The debug node has the 'output' property:

complete msg object - displays the entire object that is received
msg allows you to display specific fields, for example, msg.payload In the following examples, we will interact with other nodes and see more detailed usage of 'debug'. --- The function node allows you to run JavaScript code to process the data that is passed to the node.

The http in and http response nodes are used for handling incoming requests and sending responses in HTTP-based flows.

The http in node receives incoming requests. In this node, you need to select the method and specify the URL. In our example, the method is GET, and the URL is /total.

The http response node is used to send a response. This node should always receive a payload property in order to return information.

Any flow that starts with an http in node should end with an http response node. Otherwise, it won't return a response to the request.

Let's create a flow that takes two values and returns their sum.

Function node.

const body = msg.req.body;
const total = body.banana + body.tomato;

msg.statusCode = 200;
msg.payload = {
    "total": total
};

return msg;

Copy the link to your Node-RED where the flow is saved and append the URL /total to it.

To make a request, we will use Postman. In the body, pass the data that will be sent in our request and click the Send button.

In the http in node, an object is received which has the property req (this is the request object that contains information about the request).
Using the debug node, you can see what is being received in other nodes.

Introduction and familiarization with the Node-RED environment

vova — Wed, 21 Jun 2023 12:39:49 +0000

Creating new Flow service
Flow Builder Layout
Creating first HTTP Endpoint
Connecting API to HTTP Endpoint
Displaying data on UI

Flow Builder allows you to create powerful workflows that can integrate with a wide range of external systems and implement complex logic for your application. Within a single workspace, you can have multiple instances of Flow Builder that can be combined or created as separate microservices.

Flow Builder is based on the open-source Node-RED system. Node-RED is a visual tool developed by IBM Emerging Technology and the open-source community for API development, Internet of Things (IoT) devices, and various online services. You can create intricate flows using a wide array of nodes and modules (3100+) and expand the functionality of your flow using any of the Node.js packages available in the public repository (225,000+), or create your own custom nodes.

Creating a New Flow Service

On the UBOS platform, to create a new Flow Builder service. , you need to open Services by clicking the "+" button, choose the section "Node Red", and configure it.

Once you have selected "service plan" and filled "name" field, click the Create Service button, and the UBOS platform will start the installation process for your new service. On average, this process may take 1-2 minutess. Until the service becomes available to you, it will be in a pending state, and you can find it in the dropdown list of NodeRed in the service manager.

Once the new service becomes available, to open it, you need to click on the name of the service, and it will open in the Main Workspace.

Upon clicking the name of your environment for the first time, Node-RED will provide you with the option to create a new project or copy an existing one.

The scenario of copying an existing project is not being discussed at the moment. To create a new project, you need to click on the field labeled "Create Project". After that, you should fill in the following fields: Username, Email, Project name, description (optional), leave the project Flow file field unchanged, and select Credentials: Disable encryption.

Once you see this message, the Node-RED environment is ready for use.

Flow Builder Layout

The basic layout of Flow Builder consists of four main areas:

Header - Here you can find various deployment options for your flow and the main Flow Builder menu.
Palette - It contains all the available nodes that can be used.
Workspace - This is the area where you create your flows.
Sidebar - It contains tabs that provide a wide range of useful tools within the editor.

Creating first HTTP Endpoint

Let's create a simple HTTP endpoint that returns the static text "Hello World!". Drag and drop several nodes from the palette onto the workspace.
First, you need to find the HTTP In node, drag it onto the workspace, and double-click to open the node's settings.

The HTTP In node will listen for incoming requests. In the settings window, you need to select the method, which will be GET, and specify the endpoint name /hello in the URL field. Then, click the Done button in the settings window.

Next, let's find the function node, drag it into the workspace, and connect it to the "HTTP In" node.

function

Flow needs to respond to the request with data from the Function node. To achieve this, let's find the HTTP Response node and connect it to the Template node.
Your flow should look like this:

Now you need to deploy your flow to make it accessible. To do this, click the Deploy button in the flow editor's header.

Connecting API to HTTP Endpoint

To connect an API to the HTTP endpoint, switch the editor to the UI Editor. In the UI editor, open the list of available APIs for the current page by clicking on the "APIS" row and selecting "API1" from the list to open the API panel.

If you don't see "API1" in the list, you can create a new one by clicking the "+" button in the "APIS" row.

Next, you need to add a link to the endpoint. You should copy the link to Node-RED and add the API name.

Copy the link to Node-RED, and let's add the API name.

To test the API, you need to click the Run button, and you will see the response in the Response field.

To close the API panel, click the Back button.

Displaying data on the UI

To display data in the user interface, we need to have two widgets. One widget will be a button widget that triggers API1, and the other will be a text widget that displays the response.
You can add a new "Button" widget to the page editor or use existing ones. Next, open the "SettingsWidget" window for the "Button" widget. At the bottom of the window, you will find the "Action" section and a property called onClick. Click on this field, and you will see a list of available actions.

After selecting API1, you will see that the onClick property has changed. So, when you click this button, it will trigger our API1, which will make an HTTP request to our Example.

Now let's display the response data from API1 in a text widget. To do this, you need to drag a new text input widget from the widget panel into the page editor and open the widget's settings window.

In the Widget Settings window, locate the default Text property. In this property, you can enter static text or add dynamic data. We want to add dynamism to display the response data from API1. To do this, you need to enter a command inside the Text property.

The command should look like this: {{Api1.data}}

To test the changes, let's deploy the user interface application and check the modifications. Try clicking the button you have configured and observe the data that appears in the input fields intended to display the data.

Conditional | node-red + mongoDB

vova — Wed, 17 Aug 2022 10:35:32 +0000

$cond використовується коли необхідно виконати певний блок коду якщо виконується певна умова.
Умова виконується якщо сама умова if дорівнює true, тоді виконується блок then в іншому випадку виконується блок else бо умова дорівнює false.

Вираз $cond має один із двох синтаксисів які очікуюсь три аргументи if-then-else:

{ $cond: { if: <boolean-expression>, then: <true-case>, else: <false-case> } }

Або

{ $cond: [ <boolean-expression>, <true-case>, <false-case> ] }

Приклад

Колекція products містить в собі наступні документи:

    {
        _id: "62cbbabab8fa90001118e138",
        "deleted": false,
        "name": "keyboard",
        "price": 2500
    },
    {
        _id: "62cbbabab8fa90001118e139",
        "deleted": false,
        "name": "monitor",
        "price": 3000
    },
    {
        _id: "62cbbabab8fa90001118e13a",
        "deleted": false,
        "name": "mouse",
        "price": 700
    }

Операція агрегації використовує $cound для того щоб зробити знижку на товар. Якщо ціна товару більша за 2000, то у полі newPrice буде ціна із знижкою 10%. Якщо ціна менша за 2000 тоді вона залишається без змін.

msg.collection = "products";
msg.payload = [
    {
        $match: { deleted: false }
    },
    {
        $project: {
            "name": 1,
            "price": 1,
            newPrice: {
                $cond: {
                    if: { $gt: ["$price", 2000] },
                    then: { 
                        $subtract: [
                            "$price", 
                            { $multiply: ["$price", .10] }
                        ] 
                    },
                    else: "$price"
                }
            }
        }
    }
];

return msg;

Крок 1. Перший етап конвеєра фільтрує продукти які не видалені за допомогою операції $match
Крок 2. Другий етап конвеєра операція $project яка витягує певні поля з колекції
Крок 3. Нове поле newPrice містить в собі умову $cond.
Якщо ціна товару більша за 2000 if: { $gt: ["$price", 2000] }
то виконується умова
then: {$subtract: ["$price", { $multiply: ["$price", .10]}]}
у противному випадку else: "$price"

Результат запиту

Використані операції

$match
$project
$gt
$subtract
$multiply

Вузол 'function' в Node-RED

vova — Wed, 17 Aug 2022 10:34:49 +0000

Написання функцій
- Приклад як потрібно робити
- Приклад як не потрібно робити
Декілька виходів
Реєстрація подій
Обробка помилок
Manage palette
NPM package

Вузол function дозволяє запускати JavaScript код для повідомлень, які через нього передаються. Повідомлення передається як об'єкт під назвою msg. За замовчуванням він матиме msg.payload властивість, що містить тіло повідомлення.
Інші вузли можуть додавати власні властивості до повідомлення. Вони повинні бути описані в їхній документації.

Написання функцій

Код який введений у вузол function, представляє тіло функції. Найпростіша функція повертає повідомлення таким яким воно є.

return msg;

Якщо функція повертає null, повідомлення не передається, і потік завершує свою роботу.
Функція завжди повинна повертати об'єкт msg. Повернення числа або рядка призведе до помилки.
Повернений об'єкт повідомлення не обов'язково має бути таким же об'єктом, як передано. Функція може побудувати новий об'єкт перед тим як повернути його. Наприклад:

Примітка: створення нового об’єкта повідомлення призведе до втрати будь-яких властивостей повідомлення отриманого повідомлення. Це порушить деякі потоки, наприклад, потік HTTP In/Response вимагає обов'язкового збереження властивостей msg.req і msg.res. Загалом, функціональні вузли повинні повертати об’єкт повідомлення, який вони передали після внесення будь-яких змін до його властивостей.

Приклад як потрібно робити

Створимо потік який повертає значення body, який ми передаємо у запиті. Використаємо вузли http in та http response (детальніше про них тут).
Вузол http in відправляє у function повідомлення з властивостями payload, req, res. У тілі функції нам потрібно тільки записати у msg.payload потрібно нам значення не заміняючи весь об'єкт msg. Тоді вузол http response зрозуміє, що йому потрібно повернути відповіді від нашого запиту.
Зробимо запит за допомогою Postman.
У відповідь отримали текст який передавали у body.

Приклад як не потрібно робити

Давайте зміним тіло функції вище описаного потоку на:
У консолі отримає повідомлення "No response object". Через те, що ми створили новий об'єкт повідомлення, вузол http response не знає, що йому потрібно повертати.
Тому якщо потрібно створити нові властивості їх потрібно записувати у msg не створюючи новий.

Декілька виходів

У діалоговому вікні функції є можливість змінити кількість виходів та назву функції.
Додамо два виходи і зміним назву функції.
Тепер у вузла function є два виходи. Далі постає питання. А як їх контролювати? Потрібно використовувати оператор if та у його тілі повертати масив повідомлень. Кількість повідомлень у масиві залежить від кількості виходів які нумеруються від верху до низу.

if (msg.payload.length > 0) {
    msg.payload = `array length: ${msg.payload.length}`;

    return [ null, msg ]
}

msg.payload = "Empty"
return msg;

Для прикладу у нас є два виходи return [ null, msg ]. У перший вихід повертаємо null це означає, що функція у цьому випадку нічого не повертає на перший вихід. У другий вихід передаємо msg. Тому якщо у функцію прийде масив з декількох елементів, то у другий вихід повернеться рядок довжини масиву. В противному випадку повертаєм return msg у перший виході.
Додамо ще одну функцію data яка повертає масив об'єктів.

msg.payload = [
    { name: "banana" },
    { name: "potato" }
];

return msg;

Умова повернула true тому повідомлення відправилось на другий вихід. Якщо у функцію data записати пустий масив, то умова не виконається і повідомлення відправиться на перший вихід.

msg.payload = [];
return msg;

Реєстрація подій

Для того щоб ефективно проводити debug коду, треба розуміти які дані приходять та змінюються. Для цього потрібно використовувати наступні функції які будуть записувати в консоль повідомлення (аналог console.log() в JavaScript).

node.warn("Something happened");
node.error("Something bad happened");

Змінимо приклад який ми розглядали вище. Додамо цикл який перебирає масив і виводить його елементи у консоль.

if (msg.payload.length > 0) {
    node.warn("start if");

    for (const element of msg.payload) {
        node.warn(element);
    }

    return [ null, msg ]
}

msg.payload = "Empty"
return msg;

У консолі можна побачити 3 події node.warn.

Обробка помилок

Якщо функція знаходить помилку і потрібно завершити виконання потоку то вона не повинна нічого повертати. Щоб викликати Catch у певному вузлі функція повинна викликати node.error("error", msg) передаючи у перший аргумент текст помилки, а у другий msg.

Змінимо попередній приклад додавши у функцію data помилку

msg.payload = [
    { name: "banana" },
    { name: "potato" }
];

node.error("Еrror", msg);

Функція data повернула помилку тому вузол зупинив роботу

Manage palette

Для того, щоб додати додаткові node-red вузли у проект потрібно відкрити меню справа та вибрати вкладку Manage Pallete.
У вкладці Nodes зберігаються бібліотеки які вже завантаженні, а у вкладці Install потрібно ввести назву бібліотеки та завантажити її.

Перед завантаженням бібліотеки варто ознайомитись з її документацією

Після завантаження у списку всіх вузлів з'являться нові завантажені вузли

NPM package

NODE-Red дозволяє витягувати додаткові модулі з Node Package Manager. Для цього потрібно вибрати вузол function у який нам потрібно використати додатковий модуль та перейти у вкладку Setup. У цій вкладці натиснути кнопку add та ввести модуль який потрібно використовувати. Якщо такий модуль існує на платформі NPM, то ми зможемо його використовувати.
Створимо потік який приймає зображення яке ми оптимізовуємо та перевертаємо.
Використаєм новий вузол viewer який раніше ми завантажували.

Зверніть увагу! Для роботи з зображеннями варто використовувати метод POST та дозволити завантаження зображення

Додамо модуль sharp для роботи з зображеннями.
У тіло функції додаємо логіку роботи з зображенням.

const optimized = await sharp(msg.req.files[0].buffer)
    .toFormat("jpeg", { quality: 60 })
    .flip()
    .toBuffer();

msg.payload = optimized;

return msg;

Через Postman відправимо зображенням. Тіло запиту буде типу form-data. Для зображення потрібно вибрати тип file.
Результат виконання

Запит відправляє буфер зображення який зберігається за таким шляхом msg.req.files[0].buffer. Відправлене зображення важить size: 414164(404 КБ)
Конвертоване зображення 292563 (285 КБ)

Модуль деталі про компанію (Company Jobs)

vova — Mon, 15 Aug 2022 12:45:36 +0000

На сторінці Company у таблицю з компаніями потрібно додати кнопку яка буде перенаправляти на сторінку зі списком робіт вибраної компанії
Потрібно написати flow який візьме з колекції jobs всі вакансії, які належать до вибраної компанії.

Приклад API яка бере з query params ID вибраної компанії

Підказка! Варто використати операцію aggregate

Модуль створення вакансій (Recruit)

vova — Mon, 15 Aug 2022 12:45:23 +0000

1.UI частина (створення сторінки Recruit)

Для додавання нової сторінки в середовищі UIEditor, потрібно натиснути на символ "+" в розділі SIDEBAR на проти поля PAGES.
Отже, дана сторінка складається з наступних віджетів:

Table, в які відображаємо існуючі вакансії (в таблиці є button, при натисканні на який нас переадресовує на сторінку кандидатів до обраної вакансії)
3 Buttons (Create Job, Update, Delete) При натисканні на кнопку Create Job та Edit Job Info відкриваються модальні вікна, на кнопку видалення здійснюється видалення виділеної в таблиці вакансії. Модальні вікна створення вакансії (Create Job) та оновлення інформації про вакансію (Edit Job Info) містять в собі 5 inputs, 5 select, 2 buttons

2. Вибір компанії

Потрібно створити запит у БД який повертає _id i companyName.
Flow складається з вузлів: http in, 2 function, mongodb in, http response

шукаєм у БД компанії у який поле deleted: false; - вузол mongodb in - повертаєм тільки _id та companyName - id потрібно обгорнути у objectid

3. Відображаємо вакансії для вибору

Потрібно створити API
У віджеті вибору вакансії потрібно добавити у поле Options дані для вибору

4. Створення вакансії

В середовищі Node Red створюємо flow, який cкладатиметься з 5 вузлів: http in, debug, function, mongodb out, http response
Вузол function
Вузол mongodb out (Insert Job):
Для створення компанії, в UI Editori створюємо API call (createJob) в тілі якого передаємо значення з усіх віджетів модального вікна створення вакансії(Create job).

5. Відображення створених вакансій

Для відображення створених вакансій в таблиці, потрібно створити в середовищі Node Red flow який складається з 5 вузлів:http in, debug, function, mongodb in, http response
function
Вузол mongodb in( Get Job):
В середовищі UI Edtior створюємо в API call, з методом GET який здійснить запуск вище створеного потоку в середовищі Node Red.
Для відображення отриманих вакансій в таблиці в налаштуваннях віджету Table1 в полі Default Data ми вписуємо в фігурних дужках назву API call, та властивість data.
Для створення кнопки в таблиці потрібно в налаштування віджету Table1 натиснути на кнопку “Add a new column” та в налаштуваннях вибрати у полі Column Type вибрати Button

6. Редагування створених вакансій

Для редагування створеної вакансії, спочатку потрібно відобразити інформацію про створену вакансію у віджетах модального вікна (Edit Job info), для цього потрібно в налаштуваннях кожного віджету в поле default text або default options передати відповідну властивість виділеного в таблиці об'єкта:
Для оновлення виділеного в таблиці об'єкта (вакансії) потрібно створити потік (flow) в середовищі Node Red, який складається з наступних вузлів: http in, debug, function (схожий як і для оновлення компаній), http response, mongodb out
function Створюємо в середовищі UI Editor API call, METHOD: PUT, в тілі запиту передаємо значення з віджетів модального вікна (ModalEditJob), та поле “_id” виділеної в таблиці вакансії.
Модальні вікна: дії на кнопки Create та Update
При кліку на вказані кнопки ми повинні виконати 3 дії:
1) Здійснити API call (createJob або updateJob);
2) Здійснити API call (getJobs);
3) Закрити Модальне вікно
Отже в налаштування віджету button ми пишемо:

7. Видалення створених вакансій

Для видалення виділеної в таблиці вакансії створюємо flow(потік) в середовищі NodeRed, який складається з наступних вузлів: http in (method :deleted), function, debug, http response, mongodb out
Вузол function (query):
Вузол mongodb out:
Тобто даний потік, буде здійснювати не безпосереднє видалення об'єкта з бази даних, а оновлюватиме його властивість “deleted”.
В середовищі UI Editor створюємо API Call, method Delete, в тілі якого передаємо лише поле "_id" яке виступає унікальним ідентифікатором обєкта який видаляємо.
На кнопку Delete здійснюємо дві дії:

виклик API call (deleteJob)
виклик API call (getJobs)

Модуль створення компаній (Company)

vova — Mon, 15 Aug 2022 12:44:48 +0000

1. UI частина (створення сторінки Company)

На даній сторінці потрібно розмістити наступні віджети:

1 CONTAINER, всередині якого будуть розміщені всі інші віджети;
7 INPUT, 6 з яких з Data_type: text, 1 - Number;
3 SELECT;
2 BUTTON;

Всім віджетам потрібно давати інформативні назви, для того щоб було зручно і зрозуміло використовувати дані. За замовчуванням при додаванні віджета на сторінку автоматично генерується назва, наприклад віджету INPUT генерується назва Input1.
Для зміни назви необхідно у вікні Settings widget вписати нову назву на місці старої і натиснути кнопку Enter.
Після того, як будуть розміщені всі віджети з назвами відповідно до прикладу, створення сторінки користувача можна вважати завершеною.

Результат виконання

Важливо!

Для подальшої роботи потрібно піднести середовище Node-RED[посилання] та піднесення бази даних[посилання]

2. Створення компанії

Під створенням компанії мається на увазі реалізація однієї з операцій CRUD, а саме Create - тобто ми повинні здійснити запис в базі даних (в нашому випадку це буде база даних MongoDB) про компанію.

Дані для запису в базу даних ми повинні передати з раніше створених віджетів на сторінці Company.

Отже для цього нам потрібно:

Створити EndPoint в середовищі NodeRed, куди ми будемо передавати дані та здійснюватимемо запис в базу даних.

1.1. EndPoint в середовищі NodeRed - це вузол “http in”, що прийматиме дані, які ми будемо на нього відправляти. З бокової панелі вузлів пересуваємо вузол “http in”, вибираємо в даному випадку Метод “Post” та вказуємо URL на приклад “/createCompany”. Кожний EndPoint повинен щось повертати, для цього нам потрібно додати вузол “http response” і приєднати його до вузла “http in”. Для того щоб в вікні “debug messages” побачити дані, які ми передаємо на цей EndPoint нам потрібно підключити вузол “debug” до вузла “http in”.
1.2. Для здійснення безпосередньо самого запису в базу даних, ми використовуватимемо вузол “mongodb out” (детальніше про підключення тут). Підключаємо вузол “mongodb out” до вузла “function” та у вузлі "function" додаємо нове поле до даних, які приходить з UI.
“mongodb out” потрібно вибрати тип операції “insert” (або "save", детальніше тут), додати назву колекції, в яку будуть записуватись дані та зробити активним поле “Only store msg.payload object”.

Важливо! Користувач повинен надати колекції інформативну назву. Також не слід забувати, що оперуючи із даними однієї колекції, в інших запитах (GET, PUT, etc) назви колекції повинні бути одинаковими.

Даний потік(flow) здійснить запис в базу даних, тобто все що буде відправлено на EndPoint (“/createCompany”) буде записано в базу даних.

Передача динамічних даних з середовище UiEditor в середовище NodeRed:
Для передачі даних з UiEditor в середовище NodeRed, нам потрібно створити API Call (детальніше тут), використовуючи відповідний метод вузла “http in”. Створимо метод POST, якому в body потрібно передати дані з наших віджетів.
В тілі запиту дані передаються у форматі JSON, тому важливо пам'ятати про базові правила: всі поля мають бути розділеними комами(в останньому рядку кому ставити не потрібно) та обгорнутими в подвійні лапки (наприклад,"name"). Зі скріна вище, “CompanyNameInput” - це назва(об'єкт) віджету (в даному випадку це віджет “INPUT”), “.text” - це властивість віджету, “companyName” - це назва змінної, яку ми передаємо.
Далі на кнопку створення вакансії потрібно додати виклик API

3. Відображення компанії

Для відображення створеної нами компанії, потрібно зробити “EndPoint” в середовищі NodeRed, який витягне з бази даних інформацію про компанію.
Для цього ми використовуємо 4 вузла: http in, mongodb in, function, http response.
mongo in

function
Тобто даний потік(flow) здійснить запит в базу даних, отримає всю інформацію з колекції “companies”, за допомогою вузла function присвоїть змінній msg.payload параметри за якими шукати компанії, і вузол http response повертає відповідь у точку запиту.

В UiEditor ми створюємо новий API Call, в якому обираємо метод GET, і потрібний нам EndPoint (http in).
В розділі Settings цього API Call, потрібно зробити активним поле Run api on Page load, для того щоб це запит виконувався при загрузці сторінки. Далі нам потрібно відобразити отримані цим запитом дані в створені раніше віджети.
Відображення отриманих даних у таблиці:
Для відображення отриманих даних, нам потрібно в налаштуваннях віджету в поле TableData, передати об'єкт запиту.

Відображення дефолтного тексту в віджеті INPUT:

Відображення дефолтного тексту в віджеті SELECT:

Також потрібно додати до onClick кнопки в метод onSuccess виклик API getCompanyInfo щоб отримати оновлені дані.

4. Оновлення створеної компанії

Для оновлення даних про компанію, потрібно створити потік (flow) в середовищі NodeRed, який отримує дані, здійснить запит в базу даних “Update”, та API Call в середовищі UiEditor який передасть дані в середовище NodeRed.

Даний flow складається з 6 вузлів: http in, function, mongodb out, http response, 2 debug.

updateQuery

Оскільки "_id" - унікальний, його потрібно видалити перед оператором оновлення "$set".

В середовищі UiEditor ми створюємо новий API call з методом PUT, в тілі(body) якого передаємо динамічні значення з віджетів. В даному випадку тіло запиту буде практично аналогічним до запиту для створення компанії, окрім нового поля “_id”, по якому ми ідентифікуватимемо об'єкт, що потрібно оновити.

Для зручної навігації в Node-red, варто розділяти запити, які стосуються одного модуля на різні флови. Наприклад, для модуля компанії - існує флов "Company", в якому розміщують всі HTTP запити (також їх називають endponits, ланцюги), пов'язані з ним.