UBOS Community: Daniel

Відображення даних у діаграмі

Daniel — Tue, 07 Mar 2023 09:00:39 +0000

Наша платформа має декілька діаграм:

StackedColumnChart

В цій діаграмі є 3 основних поля:
x - цей йде ось Х вона йде по горизонталі, переважно в ній пишуть час
у - ось Y вертикаль, зазвичай вказується кількість даних які хочемо показати
seriesField - вказуємо ім'я кожного елементу

Дані які відображаються в діаграмі мають складатись з масиву об'єктів:

[
  {
    "x": "2050-03-22",
    "y": 150,
    "seriesField": "field 1"
  },
]

Для прикладу, я створив API запит, який повертає інформацію про створених користувачів. Це в який день реєструвався новий користувач(x), до якого типу належить(seriesField), та яка кількість користувачів реєструвалась за день даного типу(y). Це є масив об'єктів.

Так само таблиця має опцію Tooltip option. Тут вказується, що ми хочемо відображати при наведені на колонку в таблиці.
Якщо вибрано All elements, тоді при наведені на на будь, який елемент буде показуватись інформація по всій колонці, де знаходиться елемент на який ми навели.
Якщо вибрати Current element, тоді при наведені відображається інформація по тому елементу, на котрий навели курсор.

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

Тепер користувач може сам вибирати, як він хоче щоб відображались дані, при наведенні на колонку.

Button actions 'onClick'

Daniel — Wed, 01 Mar 2023 16:27:26 +0000

The button has 15 different events onClick.

Execute a Query - this is the event where we can call our API that we created. When you click on this event, a small menu will open with already existing APIs, or options to create a new one.

Execute a JS function - here we call the function that is written in JS Object.

Navigate To - allows the user to navigate between the internal pages of the App or to an external URL. Enter the page name or the external URL in the navigateTo function, enter the Query parameters if required, and select the destination for the new page (a new window or same window).

Show message - it shows a temporary notification style alert message to the user. The message type can have Info, Success, Error, and Warning.

Open modal - this function is used to open a modal when triggered. Modal is in widgets.

Close modal - this action is used to close a modal when triggered. Create a new modal and open it before calling this action.

Store value - function saves data in the browser as key-value pairs and can be later accessed anywhere in the application. It data you can view if you go to the developer console in the browser and select localStorage.

Download - users have the ability to download a wide range of file formats. This action serves the purpose of downloading any data as a file. The feature is made possible by using downloadjs library.

Copy to clipboard - this function is used to copy text to the clipboard.

Reset widget - use the resetWidget function to revert a widget to its default state. Any user input changes will get reverted and the values in the default properties will be applied. For example, you can use it when you want to clean the form of inputs.

Set interval - executes a callback function with a fixed time interval between the calls.

Clear interval - stops a repeating callback that was started with the setInterval method.

Get Geolocation - this object contains functions to request the current user location and the coordinates received from this.
request

Watch Geolocation - almost similar to the original browser API, apart from the fact that you don't need to pass the success callback. On success, the location would automatically be stored at main.geolocation.currentPosition.coords with the main.geolocation.currentPosition.timestamp updated whenever the position was last updated. The callbacks, if provided, gets executed automatically when the location has changed. No watchId is returned as well as the platform only allow for a single watchPosition.

Stop watching Geolocation - stop and clearing your current geolocation. For stopping you don't have to pass the watchId. If a watch is active, you must clear it before starting a new one by calling this function.

Як під'єднати UI Editor та Node-red до GIT

Daniel — Tue, 07 Feb 2023 15:44:42 +0000

Аби убезпечити свої дані, від можливого зникання та помилок, які можуть зруйнувати написане, або мати універсальний доступ до коду, ми під'єднаємо наші додатки до Git.
В даному прикладі буде використовуватись веб-сховище GitLab.

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

мати GitLab профіль
створити два репозиторія без файлу Readme для Nodered та UI

GitLab

В gitLab створюємо два проєкти, для UI та NodeRed.
Коли знаходимось в групі, натискаємо на кнопку New project =>
в модальному вікні вибираємо Create blank project =>
далі в налаштуваннях вводимо назву для проєкту, та в полі з конфігурацією прибрати галочку навпроти Initialize repository with a README, щоб створився без цього файлу =>
Create project.

Так само важливий момент як ми називаємо наш проєкт. Назва має бути зрозуміла. Не потрібно надто кротких назв, щоб коли ви прочитали, ви одразу зрозуміли, що це за проєкт, без написання додаткових пояснень в Readme файлі, що відбувається в даному проєкті. До прикладу, назвати проєкт Front чи UI погано, бо не зрозуміло, що саме відбувається.

В GitLab натискаємо на кнопку Clone, та копіюємо стрічку з Clone with SHH.

UI

В UI Editor натискаємо на кнопку CONNECT GIT вона знаходиться в лівому куті з низу.

Відкривається модальне вікно, в яке ми вставляємо наш SHH ключ. Та натискаємо на кнопку Generate key.
З'являється SHH Key, та копіюємо його.

Далі заходимо на наш GitLab, натискаємо на іконку яка праворуч в горі, та вибираємо Perferences.

В лівому меню вибираємо поле SHH Keys. У відкритій сторінці вставляємо наш згенерований SHH ключ в поле Key. Нижче в полі Expiration date натискаємо на хрестик, щоб прибирати термін придатності. І в кінці вже натискаємо на кнопку Add key.

Тепер повертаємось в наш UI Editor та натискаємо кнопку Connect. Автоматично відбувається підключення до нашого GitLab, та робиться перший коміт. В кінці показується модальне вікно Deploy your application - це означає, що все пройшло успішно.

Наш проєкт підєднано до GitLab. Тепер з низу замість CONNECT GIT показується кнопка плюс. Після того, як зробимо якісь зміни, натискаємо на нього, відкриється модальне вікно Deploy your application, де в полі пишемо назву для нашого коміту і натискаємо на кнопку COMMIT & PUSH.

NodeRed

Заходимо в наш NodeRed, натискаємо на три стрічки які праворуч в горі, відкривається меню, натискаємо на Projectsта вибираємо New, тоді відкриється модальне вікно. Або можна натиснути на клавіатурі ctr-alt-n, щоб відкрити модальне вікно.

Вибираємо Create Project

Водимо username, свій імейл, та натискаємо кнопку Next

Даємо назву нашому проєкту, та натискаємо Next.
Далі висвітлюється як нам назвати наш файл, нічого не змінюємо, просто натискаємо Next.

Далі відкривається модальне вікно з налаштуванням шифрування. Вибираємо без шифрування - Disable encryption, та натискаємо Create project. Якщо хочете створити проєкт з шифруванням, то внизу в додатковій інформації є посилання на відео, як це зробити.

Потім нам потрібно створити проєкт в GitLab(див. приклад вище). Тільки в цей раз замість того, щоб скопіювати посилання SHH, ми використаємо HTTPS(як додати SHH розповідається у відео де додаткова інформація).

Далі в NodeRed натискаємо на три стрічки які праворуч в горі, відкривається меню, натискаємо на Projectsта вибираємо Project Setting.

Потім в меню вибираємо Settings. Натискаємо на кнопку add remote, в полі URL вставляємо HTTPS посилання на наш проєкт на GitLab, який скопіювали.
Натискаємо на кнопку Add remote. Тепер наш NodeRed під'єднаний до GitLab.

Далі щоб додати зміни в GitLab, натискаємо на кнопку дерево яка знаходиться вгорі праворуч між книгою, та жуком. Це є меню управління нашим git.
Щоб зберегти у віддаленому середовищі натискаємо на кнопку +add, та commit. Якщо ви не розумієте, що означають ці стани, тобто навіщо ми робимо ці кроки, то перегляньте офіційну документацію git

Пишемо назву нашого коміту, та натискаємо Commit.

Далі натискаємо на Commit History, потім на кнопку зі стрілками, та вибираємо Remote: None

Має відкритись спливаюче вікно, де вказуємо наш юзернейм або імейл з паролем від GitLab. Та натискаємо кнопку Retry

Потім знову натискаємо на кнопку дерево яка знаходиться вгорі праворуч між книгою, та жуком. Далі вибираємо Remote: None, якщо не має ніяких гілок, то пишемо, будь яку, назву для гілки, та натискаємо трохи нижче, щоб створити її.

Відкриється меню, та натискаємо кнопку Push. Наші дані, додаються в GitLab репозиторій.

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

Interaction with GitLab API

Daniel — Mon, 30 Jan 2023 08:29:09 +0000

You will need to have a GitLab account and a personal access token to interact with the API.
Read more about GitLab API
How create personal access token in GitLab

Step 1. Node-red

1) Create flow "http in"
2) Create flow function set data

msg.issues = [];
msg.page = 1;

return msg;

3) Create flow function url. Where set url to gitlab api


msg.url = `https://gitlab.com/api/v4/projects/40120550/issues?private_token={YOUR_GITLAB_ACCESS_TOKEN}&page=${msg.page}&per_page=100`;

return msg;

4) Create flow request and set in setting a parsed JSON object

5) Create flow function load data. Where will we filter our issues. Because GitLab returns only 100 issues, we make pagination on every page. And add in setup 2 outputs.

if (msg.payload.length === 100) {
    msg.issues = msg.issues.concat(msg.payload);

    msg.page += 1;

    return [msg, null];
} else if (msg.payload.length < 100 && msg.payload.length !== 0) {
    msg.issues = msg.issues.concat(msg.payload);
    msg.payload = msg.issues;

    return [null, msg];
}
 else {
    msg.payload = msg.issues;

    return [null, msg];
}

6) Create flow "http response"

Step 2. UI

Create page, for example with table, button and select filter.

In API/JS create request to our nodered

We add a call to our api getIssues in the button.

Where filter we created 3 states - all, closed, and opened.

We can do filtering by queries API. However, it will take a lot of time to make requests. Since we already have the data that came in, it will be faster to filter JS.
In the table where the data is displayed, we add a JS function to display the data relative to our filter.

{{
Select.selectedOptionValue === 'all' ?
getIssues.data : getIssues.data.filter(i => i.state === Select.selectedOptionValue)
}}

Summary:
We interact with GitLab using requests. To do this, we need to have an access token. We can't get all the data at once, so we use server pagination. When we display data on the page, we don't filter the data with API requests, because it will take a long time. We use JS for filtering because it's much faster.

Як взаємодіяти між двома віджетами на прикладі вкладок, та картинок

Daniel — Thu, 15 Dec 2022 15:04:52 +0000

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

Що варто знати:

Крок перший - створюємо віджет вкладка(Tabs)

Додаємо віджет Tabs на сторінку та створюємо декілька вкладок. На кожній сторінці додаємо текст, щоб бачити, що вкладки переключаються.

Крок другий - додаємо глобальний об'єкт

В налаштуваннях віджета, у розділі події(Events) - onTabSelected, вибираємо storeValue, та даємо назву глобальному об'єкту selectedTab в полі Key, а поле Value залишаємо пустим. Для того, щоб на вибрання вкладки, наш глобальний об'єкт очищався.

У полі "Вибрана вкладка"(Selected tab) пишемо посилання на наш глобальний об'єкт.

Увімкнене поле Show Tabs вимикаємо. В такому випадку скриємо перемикач вкладок.

Крок третій - створюємо переключення через картинки

Перетаскуємо віджет картинки на сторінку(у моєму випадку 4 віджети, бо 4 вкладки). Вставляємо будь-які посилання. В картинці, у розділі події(Events), вибираємо storeValue, та даємо назву нашому глобальному об'єкту selectedTab в полі Key, а в полі Value пишемо назву нашої вкладки. Щоб при натисканні на картинку відкривалась вибрана вкладка. Так робимо в кожній картинці.

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

Коли стан за замовчуванням пустий, у віджеті Вкладка, він автоматично відкриває першу вкладку. Коли приходять дані(назва нашої вкладки), він відкриває вкладку з написаною назвою. Це прирівнюється до завантаження сторінки, бо стан від початку пустий. Далі стан після зміни вкладки очищається. Щоб знову змогти повторити таку дію.

Модуль Авторизації

Daniel — Wed, 07 Dec 2022 08:54:35 +0000

Це готовий модуль авторизації з якого можно починати писати проєкт, щоб не писати все з початку.
Він включає в себе панель адміна, де можно створювати нових користувачів, керувати їхнім доступом до сторінок, та можливістью змінювати самі сторінки відповідно до користувацької ролі.
Систему реєстрації користувача, за допомогою відправки листа підтвердження на імейл. Та функціонал скидання паролю.

На початку створюємо нове середовище на UI, node-red, та імпортуємо наші пакети.
Node-Red
SSH: git@gitlab.com:ubos-academy/authorization_module/authorization_nodered.git
HTTPS: https://gitlab.com/ubos-academy/authorization_module/authorization_nodered.git

UI
SSH: git@gitlab.com:ubos-academy/authorization_module/authorization_ui.git
HTTPS: https://gitlab.com/ubos-academy/authorization_module/authorization_ui.git

!!! Важливо, після того, як імпортували до себе модуль авторизації, видалити посилання на гіт, і під'єднати свій репозиторій під проєкт. А також створити нову базу даних, і видалити стару, яка використовувалась в проєкті!!!

Admin Panel
Після імпортування пакетів, в UI та Node-red з'являться готові сторінки та APIs, опис яких наведено далі.

Modules
Тут ми створюємо сторінки які будуть показуватись в бічній панелі. Важливо, щоб назва сторінки в модулі співпадала з назвою сторінки в UI Editor.

В Parent Modules записуємо назви сторінок які одразу видно.
В Child Modules вказуємо назви сторінок, які будуть показуватись при наведені на батьківський елемент.

Admin Roles
В Admin Roles ми створюємо ролі, які матимуть різний доступ до сторінок.

На кнопку Create Role - ми створюємо назву ролі.
На кнопку Add Permissions To Role - ми додаємо до вибраної ролі модулі. Це сторінки, які буде бачити користувач з вказаною роллю. Перед тим ми мусимо створити сторінки в Modules

User Management
В User Management знаходиться вся інформація про користувачів, які зареєстровані. Тут можемо створити, нового користувача. Змінити роль вже існуючому, або зовсім його видалити.

User Pages
Так само, модуль ще має такі сторінки:

Login
Registration
Registered (відкривається після реєстрації, )
queryToResetPassword (водить імейл на скидання паролю)
Info (після відправки імейлу на скидання паролю відкривається ця сторінка, що повідомлення надіслано на пошту)
ResetPassword (вводиться новий пароль. Посилання на цю сторінку відправляється користувачу на пошту, яку він вів на сторінці queryToResetPassword )
PasswordChanged (відкривається ця сторінка, коли користувач змінив пароль)

Налаштування

Додавання env
Це є аналогом звичаного env файлу. В ньому зберігаємо силки нашого нод-реду, та юайки. Бо ми силаємось не на пряму вставляючи посилання в кожен запит, а у файл env де зберігається наше посилання. За рахунок цього нам не потрібно всюди прописувати посилання, а тільки в одному місці, та всюди зсилатись на нього.

В сервіс панелі(вона знаходиться ліворуч), коли наводимо на назву нашого нодреду, праворуч від назви, з'являються кнопки з додатковими опціями. Спочатку натискаємо копіювати посилання, потім натискаємо на кнопку зі знаком питання. Там в розділі env вставляємо назву нашого нодреду в noderedUrl, а юайки в uiUrl. Те саме робимо в UI Edtitor де знаходиться наша юайка.

Виклик check_token

Коли відкритий наш модуль в UI Editor. Натискаємо на кнопку налаштування проєкту. Вона знаходиться в низу з ліва. Відкривається модальне вікно з налаштуванням проєкту. В інпуті з назвою Enter url check auth заміняємо url node-red на наш.
newURLNode-red/check_token

Як побудований захист(Access token)

Код доступу(Access token) ми зберігаємо в cookie під назвою user_name. Він скаладається з ID, та імейлу користувача.

В налаштуванях, нашого проєкту(де ми писали шлях до check_token), вказані сторінки до яких користувач має доступ без авторизації.
Якщо спробувати зайти на сторіку, на яку користувач має зайти, будучи авторизованим його автоматично перенаправить на сторінку Логін, бо він має відсутній токен.

Якщо токену не має, то завжди буде перенаправляти на сторінку Логін.
Токен створюється коли користувач заходить в систему. Далі, при кожному переході між сторінками, буде перевірятись, чи час токекну не минув. Якщо минув, то користувача розлогінить.

check_token
check_token - це флов, який декодить наш token, та повертає інформацію на його основі. Цю інформацію можно побачити, коли робимо якийсь редірект, то в панелі розробника в розділі Network, буде запит, який називаєтьтся me, там в response ми зможемо побачити всю інформацію про користувавча.

check_token будує наше меню, яке ми бачимо в бічній панелі. Він отримує роль користувача(кожна роль говорить, до яких сторінок можна мати доступ, та що саме на них робити). На основі цієї інформації він створює об'єкт з доступними сторінками, які повертає цей запит. А наш віджет Акрдеон(який відображає меню), чекає коли прийде ця відповідь щоб відобразити сторінки.

Глобальні змінні (storeValue)

Daniel — Tue, 22 Nov 2022 08:36:38 +0000

Глобальні змінні корисні тим, що вони доступна на всіх сторінках. Її дані додаються в LocalStorge браузера, внаслідок цього їх можна використовувати для обміну інформації як і між всіма сторінками, так і в межах однієї.

Для прикладу створимо 3 віджети: 2 button, 1 text(щоб бачити, що в середині глобального об'єкта).

При настиканні на кнопку Submit, будемо створювати об'єкт. Ми можемо в нього додавати будь-який тип та об'єм даних. Для прикладу я використаю булеан(true, false) тип.

Створюємо глобальну зміну, викликаючи функцію storeValue('name', {key: value}). Де першим параметром пишемо строку, яка буде назвою глобальної змінної (за якою звертатимемось до неї). Другий параметр - це значення, яке хочемо зберегти.

У віджеті button _, при події _onClick вибираємо JS та пишемо код, в якому зберігаємо змінну з назвою example та властивістю true.

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

При натисканні на кнопку, створиться глобальна зміна. Щоб перевірити чи точно вона створилась, у віджеті текст ми виведемо її значення. Всі глобальні змінні зберігаються в об'єкті store, який знаходиться в головній змінній main (або по старому appsmith).

Для цього у віджеті text напишемо:

{{main.store.example}}

Щоб перезаписати дані глобальної зміни, ми викликаємо storeValue з назвою змінної яку хочемо перезаписати.
Ми це напишемо у другій кнопці. Замінимо значення true на false. Та натиснемо на кнопку, щоб перезаписати.

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

Все, що зберігається в storeValue додається в Local Storage. Якщо відкрити DevTools в браузері, та вибрати Local Storage(він знаходиться в розділі Application), то побачимо дані які додали.

Якщо хочемо, щоб Local Storage не зберігав дані при редіректі на інші сторінки, то в StoreValue третім параметром передаємо false:

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

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

Для того, щоб видалити змінну із об'єкту потрібно присвоїти їй значення "undefined"

storeValue("test_obj", undefined, false).

Використання JS Object в UI Editor

Daniel — Wed, 09 Nov 2022 16:00:06 +0000

JS Object дає можливість використовувати дані які нам приходять на UI, не роблячи повторні запити в базу даних. В одній функції об'єднати виклик інших функцій, або створити змінні.

Як створити JS Object?

В лівому меню вибираємо Explorer, навпроти API/JS натискаємо плюс(+), та вибираємо в модальному вікні New JS Object. Тоді створюється наш об'єкт, де ми можемо писати данні. Для прикладу автоматично додається 4 елементи(об'єкт, масив, функція та асинхронна функція)

export default {
    myVar1: [],
    myVar2: {},
    myFun1: () => {
        //write code here
    },
    myFun2: async () => {
        //use async-await or promises
    }
}

Основний функціонал

Зміна назви

Щоб змінити назву нашого JS Object, натискаємо на його ім'я з верху(JSObject1). Воно автоматично виділяється, та можемо писати нову назву латинськими літерами, потім натискаємо на клавішу Enter.

Налаштування асинхронних функцій

Під назвою нашого об'єкта маємо два таби:

Code - де ми пишемо код(вибрано автоматично)
Settings - де ми можемо додавати налаштування до асинхронних функцій

Вона має три основні налаштування:

RUN ON PAGE LOAD - запускає функцію, коли сторінка починає завантажуватись(наприклад, використовуємо коли хочемо, щоб дані показало одразу, як тільки сторінка завантажилась, а не починали виконання після повної завантаження сторінки)
RUN ON PAGE CLOSE - запускає функцію при закритті сторінки (наприклад, використовуємо коли хочемо почистити якісь дані)
CONFIRM BEFORE CALLING

Виклик функції

Щоб перевірити чи коректна відпрацьовує функція, ми можемо її запустити. Щоб побачити результат(в Response) вона має щось повертати(написати return).

export default {
    myVar1: [],
    myVar2: {},
    myFun1: () => {
        return {
            text: 'All good!'
        }
    },
    myFun2: async () => {
        //use async-await or promises
    }
}

Якщо навести на назву функції, зліва від назви, з'явиться червоний трикутник. При натисканні на нього наша функція виконується, та знизу в Response видно результат виклику.
Або.
В правому верхньому куті, є інпут, якщо на нього натиснути, там з'являться всі функції які присутні в нашому об'єкті. Вибираємо потрібний елемент, та натискаємо на кнопку Run. Вибрана функція так само виконується, та відповідь видно з низу в Response.

Приклади використання

On Page Load

Створюю асинхронну функцію(initValue), та вмикаю в ній метод OnPageLoad. В ній ми викликаємо глобальні змінні. Так, після завантаження сторінки матимемо дані, в наших глобальних змінних.

export default {
    myVar1: [],
    myVar2: {},
    myFun1: () => {
        return {
            text: 'All good!'
        }
    },
    initValue: async () => {
        await storeValue("InitMapData", {name: 'User'});
        await storeValue("filterByCategroy", false);
    }
}

Загальна інформація

Якщо написати console.log в JS Object, то він буде з'являтись в консолі браузера
Якщо весь об'єкт підсвічується червоним, це означає, що допустили десь помилку при написанні.
Щоб звернутись до даних в середині нашого JS Object ми можемо зробити це через this. Наприклад: this.initValue().

Додаємо данні .csv файлу в postgresql

Daniel — Sun, 09 Oct 2022 20:13:55 +0000

Щоб не додавати дані самостійно, ми можемо взяти готовий файл з даними(.csv), та імпортувати це в нашу таблицю.

NodeRed

На початку, в середовищі NodeRed, встановлюємо пакет під назвою "node-red-contrib-re-postgres". Надалі, потрібно створити такі вузли: http-in > function > base64 > function > csv > function > postgres(з'являється в наслідок завантаженого пакету) > http-response.

В http-in вибираємо метод POST, та відмічаємо Accept file uploads.
У функції пишемо код, який записаний на малюнку. Оскільки нам приходить масив, вибираємо перший елемент([0]), бо це той файл який ми завантажуємо. Перетворюємо дані на строку, та методом slice вирізаємо інформацію яке несе тип файлу, залишаючи тільки закодовані данні.
Вибираємо вузол Base64, у властивостях дописуємо payload, та вибираємо дію ConvertBuffer<->Base64
В наступному вузлі(це function), те що приходить після Base64 перетворюємо на строку
Та передаємо до вузла csv.В результаті чого, ми отримаємо на виході json дані які можемо передати в таблицю.
Формуємо запит для нашого postgresql. Щоб передати всі данні з нашого файлу в таблицю, ми створюємо велику строку з цими даними, аби покласти їх як значення в запитиі до таблиці. Важливий момент, оскільки postgresql має строгу типізацію, порядковість написання даних має значення. Отже, назва значення стовбця має мати в запиті таку ж порядковість, як і сам стовбець.
Далі вибираємо наш вузол postgresql, в ньому потрібно вказати нашу базу дaних яку створили, та відмітити Receive query output.
І в кінці додаємо наш http-response

UI

На UI додаємо віджет FILEPICKER, та в його налаштуванні вибираємо формати(Data Format) - Base64.

Далі створюємо наш API запит. Там де з права вибирали віджети натискаємо Explorer > Біля API/JS натискаємо на полюс > Вибираємо New Blank API > відкривається вікно з заповненням наших даних для запиту. Записуємо все, згідно того, що на фото

Коли данні заповнили, згідно того, що на фото, можемо натискати на створений Filepicker, та завантажувати наш csv файл. Так данні, які були у файлі додаються в БД.

Надалі, щоб метод завантаження був універсальним, створюємо примітку в якій буде вказана інформація як має виглядати .csv файл. Там буде записано бажаний розмір файлу, та колонки які мусять бути в таблиці, щоб користуватись даним функціоналом.