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

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

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

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

1.png

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

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

2.png

Важливо!

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

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

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

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

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

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

1.1. EndPoint в середовищі NodeRed - це вузол “http in”, що прийматиме дані, які ми будемо на нього відправляти. З бокової панелі вузлів пересуваємо вузол “http in”, вибираємо в даному випадку Метод “Post” та вказуємо URL на приклад /createCompany. Кожний EndPoint повинен щось повертати, для цього нам потрібно додати вузол “http response” і приєднати його до вузла “http in”. Для того щоб в вікні “debug messages” побачити дані, які ми передаємо на цей EndPoint нам потрібно підключити вузол “debug” до вузла “http in”.

3.png

1.2. Для здійснення безпосередньо самого запису в базу даних, ми використовуватимемо вузол “mongodb out” (детальніше про підключення тут). Підключаємо вузол “mongodb out” до вузла “function” та у вузлі "function" додаємо нове поле до даних, які приходить з UI.

4.png

mongodb out” потрібно вибрати тип операції “insert” (або "save", детальніше тут), додати назву колекції, в яку будуть записуватись дані та зробити активним поле “Only store msg.payload object”.

Важливо!

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

5.png

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

Передача динамічних даних з середовище UiEditor в середовище NodeRed:
Для передачі даних з UiEditor в середовище NodeRed, нам потрібно створити API Call (детальніше тут), використовуючи відповідний метод вузла “http in”. Створимо метод POST, якому в body потрібно передати дані з наших віджетів.

6.png

В тілі запиту дані передаються у форматі JSON, тому важливо пам'ятати про базові правила: всі поля мають бути розділеними комами(в останньому рядку кому ставити не потрібно) та обгорнутими в подвійні лапки (наприклад,"name").
Зі скріна вище, “CompanyNameInput” - це назва(об'єкт) віджету (в даному випадку це віджет “INPUT”), “.text” - це властивість віджету, “companyName” - це назва змінної, яку ми передаємо.

Далі на кнопку створення вакансії потрібно додати виклик API

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

Для відображення створеної нами компанії, потрібно зробити “EndPoint” в середовищі NodeRed, який витягне з бази даних інформацію про компанію.

7.png

Для цього ми використовуємо 4 вузла: http in, mongodb in, function, http response.
mongo in

9.png

function

8.png

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

В UiEditor ми створюємо новий API Call, в якому обираємо метод GET, і потрібний нам EndPoint (http in).

10.png

В розділі Settings цього API Call, потрібно зробити активним поле Run api on Page load, для того щоб це запит виконувався при загрузці сторінки. Далі нам потрібно відобразити отримані цим запитом дані в створені раніше віджети.

11.png

Відображення отриманих даних у таблиці:
Для відображення отриманих даних, нам потрібно в налаштуваннях віджету в поле TableData, передати об'єкт запиту.


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


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

13.png

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

14.png

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

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

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

updateQuery

16.png

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

17.png

18.png

 

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

19.png

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