UBOS Community: AC

Setting Up a Template with WooCommerce Integration

AC — Mon, 15 Jan 2024 14:55:11 +0000

Setting Up a Template with WooCommerce Integration

У цій статті будуть розглянуті всі необхідні кроки для налаштування шаблону з інтеграцією WooCommerce.

Step 1: Find the Template

Open the Asset Marketplace and search for [template name], or click on the link.
Click Install and wait for the installation to complete.

Step 2: Configure Node-RED

After installation, go to the Node-RED settings.

Add the following environment variables to Node-RED:
- BASE_URL - The URL to the WooCommerce API
- WOOCOMMERCE_CONSUMER_KEY - The WooCommerce consumer key
- WOOCOMMERCE_CONSUMER_SECRET - The WooCommerce consumer secret

How to find WooCommerce keys

Configure the UI:
- secondaryColor - The secondary color for your site
- primaryColor - The primary color for your site
Configure user roles and permissions. See the instructions.

That's it! You've now configured your template for WooCommerce integration.

Description of the Template

The template includes pages for creating categories, series, attributes, and products.

Configure the authentication module.
Register in the application and add a role with access to all pages.
Add several categories for your products on the Categories page. You can create categories and subcategories by selecting an existing category from the select box. It is important to fill in the Name and Slug fields. Add a description if desired, and for a subcategory, select category.

Series are created in a similar way to categories, but be sure to select the parent category of this series.

Attributes are an important part of the application. You can create your own or use ready-made ones. Creating a custom attribute will be described below. Add basic attributes!!! Their name should be Color, Material and Size

Go to the add terms page - these are options for each attribute. For example, you can add "red", "green", "purple" for the color. Fill in all the fields and create an additional term for the color.
The Products page displays all products from the database. Let's add a product - click the "Create" button, fill in all the fields, add an image and save.

If you added your own attributes, you noticed that there were only standard ones on the product creation page. Let's add them from the editor: copy one of the selects, replace Label with the name of your attribute.

Replace the function with:

   {{GetAttributes.data.filter((elem)=>{return elem.name === "NAME_OF_YOUR_ATTRIBUTE"})[0].terms.map(elem => {
     return {
       label: elem.name,   
       value: elem._id
     }
   })}}

For the editing page, do the same and additionally replace the Default Value function:

   {{GetProduct.data[0].attributes.filter((elem)=> {
     return "NAME_OF_YOUR_ATTRIBUTE” === elem.name  
   })[0].option}}

How to Connect UI Editor and Node-RED to GIT?

AC — Thu, 22 Jun 2023 07:40:27 +0000

To ensure the safety of your data, protect against possible data loss, and have universal access to your code, you can connect your applications to Git. In this example, we will use the GitLab web repository.

Prerequisites:

Have a GitLab profile.
Create two repositories without a Readme file for Node-RED and UI.

GitLab

In GitLab, create two projects for UI and Node-RED.
When you are in a group, click on the "New project" button =>
In the modal window, select "Create blank project" =>
In the project settings, enter a name for the project and uncheck the option "Initialize repository with a README" to create it without that file =>
Click "Create project".

It is also important to name your project appropriately. The name should be clear and understandable. Avoid using overly brief names that require additional explanations in the Readme file to understand what the project is about. For example, naming a project "Front" or "UI" is not ideal because it doesn't convey what exactly is happening in the project.

In GitLab, click on the "Clone" button and copy the SSH clone URL.

UI

In the UI Editor, click on the "CONNECT GIT" button located in the bottom left corner.

A modal window will open, where we paste our SSH key. Then click on the "Generate key" button.
The SSH key will appear, and we copy it.

Next, go to our GitLab account, click on the icon located in the top right corner, and select "Preferences".

In the left menu, select the "SSH Keys" field. On the opened page, paste our generated SSH key into the "Key" field. Below, in the "Expiration date" field, click on the cross icon to remove the expiration date. Finally, click on the "Add key" button.

Now we return to our UI Editor and click on the "Connect" button. The connection to our GitLab is established automatically, and the first commit is made. At the end, a modal window titled "Deploy your application" is displayed, indicating that everything has been successful.

Our project is now connected to GitLab. Instead of "CONNECT GIT" a plus button is shown at the bottom. After making any changes, click on it. A modal window titled "Deploy your application" will open, where you can enter a name for your commit in the field and click the "COMMIT & PUSH" button.

NodeRed

Let's go to our NodeRed interface and click on the three lines icon located at the top right corner. This will open a menu. Click on "Projects" and select "New." Alternatively, you can use the keyboard shortcut Ctrl + Alt + N to open the modal window.

Choose "Create Project."

Enter your username, email, and click on the "Next" button.

Give a name to your project and click "Next."

Next, you will be prompted to name your flow file. Leave it as is and click "Next".

Next, a modal window will open with encryption settings. Choose "Disable encryption" and click on "Create project." If you want to create a project with encryption, there is a link to a video tutorial in the additional information at the bottom.

Next, we need to create a project in GitLab (refer to the example above). However, this time instead of copying the SSH link, we will use HTTPS (how to add SSH is explained in the video in the additional information).

Then, in Node-RED, click on the three lines icon located at the top right corner to open the menu. Click on "Projects" and select "Project Settings".

Then, in the menu, select "Settings." Click on the "Add remote" button, and in the URL field, paste the HTTPS link of our project on GitLab that you copied. Click on the "Add remote" button. Now, our NodeRed is connected to GitLab.

To add changes to GitLab, click on the tree button located at the top right between the book and the bug. This is the Git management menu.
To save changes in the remote environment, click on the "+add" button and then click on "Commit". If you don't understand the significance of these states and why we are performing these steps, refer to the official git documentation

Write the title of your commit and click on "Commit".

Next, click on "Commit History" and then on the button with arrows, selecting "Remote: None".

A pop-up window should appear, where you need to enter your GitLab username or email with the corresponding password. Click the "Retry" button.

Then, once again, click on the tree button located at the top right between the book and the bug. Select "Remote: None". If there are no branches, enter any name for the branch and click a bit lower to create it.

A menu will open, and you should click on the "Push" button. Your data will be added to the GitLab repository.

Additional information:

How to interact between two widgets using tabs and images as an example?

AC — Wed, 21 Jun 2023 21:03:02 +0000

Each widget on the platform has its own state, which is why they do not interact with each other. However, by using the global object, we can connect their functionality.

For example, let's say we don't want to use the built-in tab switching functionality of the Tab widget. Instead, we want to create separate images, and when we click on them, it will trigger the switching of tabs.

What you should know:

Step 1 - Creating a Tabs Widget

Add a Tabs widget to your page.
Create multiple tabs within the widget.
Add some text content on each page to see the tab switching in action.

Step 2 - Adding a Global Object

In the widget settings, go to the Events section and select "onTabSelected" for the event.
Choose "storeValue" as the action in the event.
Give a name to the global object by entering "selectedTab" in the "Key" field. Leave the "Value" field empty. This will ensure that our global object gets cleared when a tab is selected.
In the "Selected tab" field, enter the reference to our global object.

Turn off the "Show Tabs" enabled field. In this case, we hide the tab switcher.

Step 3 - Creating Tab Switching with Images

Drag and drop the Image widget onto the page. In your case, you'll need four image widgets since you have four tabs.
Insert any desired image URLs into the image widgets.
In each image widget, go to the Events section.
Select "storeValue" as the action.
Give the name selectedTab to our global object in the "Key" field.
In the "Value" field, enter the name of the corresponding tab you want to open when the image is clicked.
Repeat the above steps for each image widget, assigning the appropriate tab name to each image.

By following these steps for each image widget, clicking on an image will open the selected tab based on the value stored in the global object selectedTab.

How does it work?

In the Tab widget, we set the default value to reference our global object. By default, the global object is empty. However, when we click on an image, the state of our object changes to the name of the selected tab. As a result, the corresponding tab is switched, and its state is cleared.

When the default state is empty, the Tab widget automatically opens the first tab. But when data (the name of our tab) is received, it opens the tab with the specified name. This is similar to loading a new page because the state is initially empty. After changing the tab, the state is cleared again, allowing us to repeat the process.

Global Variables (storeValue)

AC — Wed, 21 Jun 2023 21:00:28 +0000

Global variables are useful because they are accessible on all pages. Their data is stored in the browser's LocalStorage, allowing them to be used for exchanging information both between all pages and within a single page.

For example, let's create 3 widgets: 2 buttons and 1 text (to see what's inside the global object).

When the "Submit" button is clicked, we will create an object. We can add any type and amount of data to it. For this example, I will use the boolean (true/false) type.

Let's create a global variable by calling the function storeValue('name', {key: value}). The first parameter is a string that will serve as the name of the global variable, which we will use to refer to it. The second parameter is the value we want to store.

In the button widget, on the onClick event, we select JavaScript and write the code to store a variable named example with a value of true.

{{storeValue('example', true)}}

When the button is clicked, a global variable will be created. To verify that it has been created successfully, we will display its value in the text widget. All global variables are stored in the store object, which is located within the main variable.

To achieve this, we will write the following code in the text widget:

{{main.store.example}}

To overwrite the data of the global variable, we call storeValue with the name of the variable we want to overwrite. We will write this code in the second button. Let's replace the value true with false and press the button to overwrite it.

{{storeValue('example', false)}}

Everything stored in storeValue is added to the Local Storage. If you open the DevTools in your browser and select Local Storage (usually found in the Application section), you will see the data that has been added.

If you want to prevent Local Storage from persisting data when redirecting to other pages, you can pass false as the third parameter in storeValue:

storeValue('name', value, false);

This will ensure that the data is not stored in Local Storage when redirecting to other pages.

storeValue("name", {key: value}, false)

It's worth noting that when the third parameter is set, it should be used for subsequent operations such as updating the value or deleting it. Otherwise, the variable will become inaccessible.

To delete a variable from the object, you can assign it the value of "undefined":

storeValue('name', undefined, false);

This will effectively remove the variable from the object.

Working with FileManager (part 2)

AC — Wed, 07 Dec 2022 07:34:55 +0000

Необхідні умови:

Обліковий запис на UBOS
Воркспейс UBOS
UI Editor UBOS
Flow Builder UBOS
Реалізована перша частина

Необхідні кроки:

Отримання посилання на зображення

Файли, завантаження в сховище Node-red, можна використовувати для зовнішніх ресурсі, отримавши посилання. Реалізуємо для цього endpoint.

В http-in вибираємо метод GET та вказуємо шлях /img
Сюди необіхідно буде передати параметр 'file' із назвою (шлях + назва, у випадку додаткових папок).
Функція set msg.filename

msg.filename = `/data/storage/${msg.payload.file}`
return msg;

Вузол read file (node-red : file in):

Функція set headers:

Для того, щоб побачити файл, в headers йому необхідно передати його тип. Більше про це можна дізнатись тут.

msg.headers = { 
    "content-type": "image/png", 
}
return msg;

Результат Переходимо в середовище UI та додаємо віджет image.

Копіюємо посилання на Node-red для подальшого формування посилання.

В налаштуваннях віджета image формуємо посилання за формулою:
_NodeRedLink_/img?file=_filename_
В даному випадку, вставляємо значення, яке обрали із FileManager.

Це посилання можна використовувати не лише в UBOS, до прикладу відкриємо зображення в браузері:

Редагування назви файлу

Встановимо необхідні модулі:

node-red-contrib-fs-ops

В http-in вибираємо метод PUT, вказуємо шлях /fm/rename/image.
Функція set path

msg.payload.start = "/data/storage/"+msg.req.query.path;
return msg;

У вузлі fs-ops-move встановлюємо змінні, які за замовчуванням приходитимуть із UI:
Функція set path - передаємо змінений шлях

msg.payload.start = "/data/storage/"+msg.req.query.path;
return msg;

Вузол File Lister - налаштування залишаються незмінними:
Вузол set properties:

let result = {}; 

result.payload = msg.payload.map(elem=>{
    let patch;
    if(!elem.stat.isDirectory){
        patch = msg.req.query.path +"/"+elem.name;
    }else{
        patch = elem.name;
    }
    return{
        "isDirectory":elem.stat.isDirectory,
        "name":elem.name,
        "path":patch,
        "size":(elem.stat.size/1048576).toFixed(3) + "Мb",
        "editedAt":elem.stat.created,

    }
})

msg.payload = {
    success: true,
    payload: result
};
return msg;

Переходимо в середовище UI, обираємо файл та змінюємо назву:

Видалення файлів

Встановимо необхідні модулі:

*node-red-contrib-loop-processing *

В http-in вибираємо метод PUT, вказуємо шлях /fm/remove/image.
Вузол counter-loop
Оскільки є можливіть видалити масив елементів, використовуємо цикл, для їх перебору

Тіло циклу:

Function Для кожного елементу, який приходить в поточну ітерацію встановлюємо шлях:

msg.filename = "/data/storage/"+msg.req.query.path+"/"+msg.payload.payload[msg.index];

return msg;

Вузол delete Передаємо сюди назву файлу та обираємо дію delete file

По аналогії зі зміною назви, далі потрібно отримати нову структуру папки.

Функція set path

msg.payload.start = "/data/storage/"+msg.req.query.path;
return msg;

File Lister:
Вузол set properties:

let result ={};

result = msg.payload.map(elem=>{
    return{
        "isDirectory":elem.stat.isDirectory,
        "name":elem.name,
        "path":elem.name,
        "size":(elem.stat.size/1048576).toFixed(3) + "Мb",
        "editedAt":elem.stat.created,
    }
})

msg.payload = {
    success: true,
    payload: result
};

return msg;

Додаткова інформація

Завантажувати можна не лише зображення, а й файли із різним розширенням (.pdf, .doc, .xlsx, .csv, etc.)
Для отримання файлу із стору, необхідно змінили headers:

msg.headers = {
    "content-disposition": "inline",
    'content-Type': 'application/pdf',
    "charset": 'utf-8',
    "content-transfer-encoding": "binary"
}

Змінивши значення "content-disposition": "attachment", файл буде скачуватись.
Важливо! Тимчасово назви ендпоінтів /fm/upload/image, /fm/remove/image, /fm/rename/image - налаштування самого віджета, тому їх змінювати не можна, навіть якщо завантажуємо файл, а не зображення.

Working with FileManager (part 1)

AC — Sun, 20 Nov 2022 22:15:39 +0000

Необхідні умови:

Обліковий запис на UBOS
Воркспейс UBOS
UI Editor UBOS
Flow Builder UBOS

Необхідні кроки:

Додати віджет FileManagerна робочу поверхню:

А поле API url додати посилання на створений flow builder(node-red), додавши символ "/" в кінець, Token = 1:

В node-red встановити модуль node-red-contrib-fs
Для обміну файлами будемо використовувати вузол fs-file-lister

FileManager дає можливість завантажувати не тільки зображення, а й файли та проектувати зручну структуру даних (папки, вкладені папки і тд.)

Для початку просимулюємо відображення списку зображень із кореневої папки та додавання нових.

В якості сховища використовуємо можливості node-red.

Відображення списку всіх файлів із storage

В http-in вибираємо метод GET та вказуємо шлях /fm/list/image
В наступному вузлі functionвказуємо шлях до папки, в якій зберігаються файли, та динамічну змінну msg.payload.path - шлях та назва файлу, який ми отримуємо автоматично із UI editor.

msg.payload.start = "/data/storage" + msg.payload.path;
return msg;

Вузол fs-file-lister - вказуємо початкові дані, які сформували раніше, та змінюємо значення в полях як показано тут:
У другому вузлі function після fs-file-lister формуємо відповідь із інформацією про дані, які ми отримуємо із файлового сховища node-red за вказаним шляхом:

let result, patch; 
result = msg.payload.map(elem => {
    if (!elem.stat.isDirectory) {
        patch = msg.req.query.path + "/" + elem.name;
    } else {
        patch = elem.name;
    }
    return {
        "isDirectory": elem.stat.isDirectory,
        "name": elem.name,
        "path": patch,
        "size": (elem.stat.size / 1048576).toFixed(3) + "Мb",
        "editedAt": elem.stat.created,
    }
})

msg.payload = {
    success: true,
    payload: result
};
return msg;

Додаємо вузол http response

Завантаження файлу в сховище

В http-in вибираємо метод POST, вказуємо шлях /fm/upload/image та обираємо Accept file uploads?

Далі у вузлі function із даних, які отримуємо автоматично із UI editor, формуємо назву файлу filename, записуємо буфер в змінну та передаємо цю інформацію далі.

msg.filename ="/data/storage/"+msg.req.query.path+"/"+ msg.req.files[0].originalname;

msg.payload.file = msg.req.files[0].buffer;
msg.payload = msg.payload.file;
return msg;

З переліку вузлів обираємо write file, який перетворює буфер у файл із заданою назвою та записує це в сховище.
Далі у function задаємо шлях для filelister:

msg.payload.start = "/data/storage/"+msg.req.query.path;
return msg;

Наступні кроки за аналогією:

Вузол fs-file-lister
Останній function:

let result, patch;
result = msg.payload.map(elem => {
    if (!elem.stat.isDirectory) {
        patch = msg.req.query.path + "/" + elem.name;
    } else {
        patch = elem.name;
    }
    return {
        "isDirectory": elem.stat.isDirectory,
        "name": elem.name,
        "path": patch,
        "size": (elem.stat.size / 1048576).toFixed(3) + "Мb",
        "editedAt": elem.stat.created,
    }
})

msg.payload = {
    success: true,
    payload: result
};
return msg;

Додаємо вузол http response

Переходимо в UI editor для завантаження:

Після натискання кнопки Upload відкриється модальне вікно, де можна обрати зображення:

Результат:

Creating a functional widget

AC — Tue, 26 Jul 2022 21:34:33 +0000

Необхідні умови:

UI Editor UBOS
Flow Builder UBOS

Функціональний (function) віджет може відображатись на всіх сторінках, тому його часто використовують в якості header та sidebar. Віджет можна створювати та редагувати на будь-якій сторінці (важливо виділити під нього простір на кожній, щоб не виникало конфліктів при накладанні контейнерів). За необхідності в налаштуваннях функціонального віджету (бічна панель справа) можна додати сторінки на яких його не буде:

Розглянемо принципи роботи функціонального віджету на прикладі бічної панелі з навігаційним меню та хедеру.

Створення sidebar.

На сторінці home page pозміщуємо віджет Function, в середину поміщаємо ButtonsGroup:

Відповідно для кожної сторінки, яку потрібно додати в меню, створюємо кнопку з такою ж назвою.

У випадку, якщо декілька сторінок потрібно об'єднати в один модуль та створити підменю, достатньо відкрити налаштування кнопки, змінити "Button type" на "Menu"та в полі "Menu Items" додати потрібні елементи:

Тепер залишилось зробити їх функціональними. Для цього в налаштуванні кожної кнопки додаємо перехід на сторінку при натисканні. В полі "onClick" обраємо функцію "Navigate to" та вказуємо необхідну назву або додаємо код власноруч, натиснувши "JS":

{{navigateTo('PageName', {})}}

Створення header.

Додаємо віджет Function, в середині якого буде відображатись назва поточної сторінки в полі віджету Text.

Для цього повертаємось до меню. При натисканні на кнопку буде виконуватись дві функції: перехід та запис назви в глобальну змінну, доступ до якої також є на кожній сторінці.

В налаштуваннях кнопки в полі onClick, натискаємо "JS", до існуючого коду додаємо функцію storeValue, яка записуватиме назву сторінки в значення змінної page:

{{navigateTo('Page Name', {});storeValue("page","Page Name")}}

Залишилось вивести це в хедер. Натискаємо на текстовий віджет та додаємо в поле Text динамічне значення змінної із store:

{{appsmith.store.page}}

Результат:

How to view the elements of Database collection?

AC — Thu, 14 Jul 2022 07:21:37 +0000

Необхідні умови:

UI editor UBOS
Flow Builder UBOS
Не пуста колекція MongoDB

Після того, як було створено нову колекцію, виникає необхідність переглянути всі елементи чи декілька з певним значенням поля. Для цього можна встановити та налаштувати MongoDB Compass, але є кращий та швидший варіант, використовуючи Node-Red.

Покажемо це на прикладі колекції із даними про погоду протягом 5-ти днів:

Відображення всіх елементів колекції

Для цього використаємо inject, щоб звернутись до бази даних вказану у вузлі mongodb in та debug, щоб побачити результат:

Створюємо endpoint:

У вузлі mongodb in з назвою "weatherDB"

обираємо базу даних,
вказуємо потрібну колекцію,
обираємо операцію "find".

Після цього залишилось запустити endpoint, натиснувши кнопку на вузлі inject (timestamp - це параметр вузла за замовчуванням):

В меню праворуч, відкривши поле debug, можна побачити елементи колекції:

Фільтрація елементів.

Уявимо, що потрібно знайти всі дні коли, погода була сонячною. Для цього потрібно додати вузол function і в msg.payload відповідну пару ключ-значення:

msg.payload={
    description: "Sunny"
}
return msg;

Можна фільтрувати за декількома значеннями:

msg.payload={
    description: "Sunny",
    day: "Wednesday"
}
return msg;

Сортування елементів.

Для сортування елементів використовують оператор $sort та операцію aggregate. Для прикладу відсортуємо дні в порядку зростання температури:

msg.payload={
    $sort:{
        temperature: 1
    }
}
return msg;

Результат:

Вивід даних в таблицю.

Вміст колекції БД також можна відобразити в UI частині. Спершу до endpoint в Node-Red необхідно додати вузол http in із URL "/getWeater":

Для виконання запиту до бази даних в UI Editor потрібно створити API call із методом GET та URL потрібного endpoint. URL складається із посилання на Node-Red та endpoint:

Посилання на Node-Red можна отримати в лівому меню:

Після виклику API на кнопку RUN переходимо на сторінку та створюємо таблицю (віджет Table), в полі Table Data вказуємо {{getWeather.data}}:

Synchronization with three services via Node-red:

AC — Fri, 01 Jul 2022 07:34:30 +0000

Синхронізація з трьома сервісами через Node-red:

Необхідні умови:

Воркспейс UBOS
Flow Builder UBOS
Обліковий запис в Telegram
Обліковий запис в AirTable

За допомогою середовища Node-red можна реалізувати налаштування чат-бота для Telegram, беручи команди із таблиці AirTable, та відправлення повідомлень з чату на вказану пошту.

Про те як створити телеграм бота та прив'язати його до Node-red можна дізнатись в статті.

AirTable.

Створюємо таблицю в AirTable з двома колонками:

Command: команди для Telegram-Bot,
Answer: відповіді на ці команди.

Зверніть увагу на назву таблиці TableName зліва та назви колонок.

Для зв’язку з таблицею Tasks в середовищі Node-red будемо використовувати вузол http request, який назвемо AirTable request .

URL (AirTable API) можна утворити за такою схемою:

https://api.airtable.com/v0/BaseID/TableName?api_key=APIkey

BaseID та APIkey можна знайти в документації API. TableName - назва таблиці.

У розділі "INTRODUCTION" знаходимо BaseID:

У розділі "AUTHENTICATION" переходимо за посиланням на сторінку аккаунту, там знаходимо APIkey:

Отримане посилання вставляємо в поле URL вузла http request: AirTable request:

https://api.airtable.com/v0/app5nGk...nNyZY/Tasks?api_key=keyui...nglSeh2

Щоб побачити дані, які повертаються після запиту до таблиці, підключимо до AirTable request вузли debug та inject:

Відправлення email на пошту.

Використовуємо вузол sendgrid із бібліотеки node-red-contrib-sendgrid

Api key:

SG.4zAEY3xh***********************************

Створення endpoint.

Використовуємо вузли:

receiver
sender
http request
sendgrid
4 function

Залишилось розібратись із 4 function: saveTelegram, getCommand, sendAnswer, sendEmail.

У вузлі saveTelegram треба створити змінну telegramMessage та присвоїти їй значення отриманого повідомлення із чат-боту.

msg.telegramMessage = msg.payload
return msg;

У getCommand отримані дані з AirTable необхідно спершу перетворити строку на об'єкт, відфільтрувати масив records та витягнути лише одну пару команда-відповідь, яка була написана в чат-бот.

msg.payload = JSON.parse(msg.payload);
msg.payload = msg.payload.records.map(e=> e.fields)
msg.payload = msg.payload.filter(e=> e.Command == msg.telegramMessage.content)
return msg;

В sendAnswer формуємо відповідь на команду.

msg.payload = {
    ...msg.telegramMessage,
    content: msg.payload[0].Answer
}
return msg;

У вузлі sendEmail потрібно вказати topic листа та його вміст. Якщо була викликана команда "/sendEmail" повідомлення буде надісланим.

if (msg.telegramMessage.content == "/sendEmail"){
    msg.topic = "Msg from my telegramBot"
    msg.payload = msg.payload.content
    return msg;
}

Результат.

Telegram-chat:

Email: