Update a2.md

2026-04-28 19:42:06 +00:00 · 2026-03-27 12:40:01 +03:00 · 2026-03-27 12:40:01 +03:00 · 530a7843e6
commit 530a7843e6
parent 696d5b2dc1
1 changed files with 132 additions and 0 deletions
--- a/IT/programming/visual_programming_js/a2.md
+++ b/IT/programming/visual_programming_js/a2.md
@ -14,3 +14,135 @@ GitHub репозитории  — ссылки на GitHub.
 - Для Appsmith нужно описать, как сделать калькулятор — в результатах поиска прямого руководства нет, но можно описать на основе общей логики: свойства компонентов через JS, написание функций.
 - Для Budibase используем информацию о bindings и JS  — калькулятор можно реализовать через форму с полями, Options Picker для операций, и JS-выражение в поле результата.
 - Для ToolJet используем информацию о FX  — калькулятор через компоненты, установка значения результата через JS-формулу.
+
+## Open Source no-code/low-code платформы с поддержкой JavaScript
+
+Ниже представлены три ведущие open-source платформы, которые позволяют создавать приложения с минимальным кодом, но дают возможность расширять функциональность через JavaScript. Для каждой показана реализация простого калькулятора: два поля ввода чисел, выпадающий список операций (+, -, *, /) и поле результата.
+
+---
+
+### 1. Appsmith
+
+**Сайт:** [appsmith.com](https://www.appsmith.com)  
+**GitHub:** [github.com/appsmithorg/appsmith](https://github.com/appsmithorg/appsmith) 
+
+Appsmith — платформа с богатым набором компонентов и возможностью писать JavaScript практически в любом месте: свойства компонентов, обработчики событий, запросы к данным .
+
+#### Реализация калькулятора
+
+1. **Создайте новое приложение** и добавьте на холст:
+   - Два поля ввода (`Input`) — назовём их `Input1` и `Input2`
+   - Выпадающий список (`Select`) с опциями: `+`, `-`, `*`, `/` — назовём `Select1`
+   - Текстовое поле (`Text`) для результата — назовём `Result`
+
+2. **Настройте JavaScript-выражение для результата**. В свойстве `Text` компонента `Result` напишите:
+
+```javascript
+{{ (() => {
+  const num1 = Number(Input1.text);
+  const num2 = Number(Input2.text);
+  const operator = Select1.selectedOptionValue;
+  
+  if (isNaN(num1) || isNaN(num2)) return "Введите числа";
+  
+  switch(operator) {
+    case "+": return num1 + num2;
+    case "-": return num1 - num2;
+    case "*": return num1 * num2;
+    case "/": return num2 !== 0 ? num1 / num2 : "Ошибка: деление на 0";
+    default: return "Выберите операцию";
+  }
+})() }}
+```
+
+3. **Опубликуйте приложение**. При изменении любого поля или выборе операции результат будет пересчитываться автоматически.
+
+---
+
+### 2. Budibase
+
+**Сайт:** [budibase.com](https://budibase.com)  
+**GitHub:** [github.com/Budibase/budibase](https://github.com/Budibase/budibase) 
+
+Budibase позволяет использовать JavaScript в **bindings** — специальных полях, доступных через значок молнии (`fx`). Код выполняется синхронно на серверной стороне, поддерживается автодополнение через `$` .
+
+#### Реализация калькулятора
+
+1. **Создайте новое приложение** и добавьте компоненты:
+   - Два поля ввода (`Number Input`) — они автоматически создадутся, если добавить форму
+   - Выпадающий список (`Options Picker`) с операциями
+   - Текстовое поле (`Text`) для результата
+
+2. **Настройте bindings для результата**. Кликните на значок молнии рядом со свойством `Text` компонента результата, перейдите на вкладку **JavaScript** и введите:
+
+```javascript
+const num1 = $("Number Input 1.Value") || 0;
+const num2 = $("Number Input 2.Value") || 0;
+const operator = $("Options Picker.Value");
+
+let result;
+switch(operator) {
+  case "+": result = num1 + num2; break;
+  case "-": result = num1 - num2; break;
+  case "*": result = num1 * num2; break;
+  case "/": result = num2 !== 0 ? num1 / num2 : "Error"; break;
+  default: result = "Select operation";
+}
+
+return result.toString();
+```
+
+3. **Сохраните** и откройте предварительный просмотр. Значение будет обновляться при любом изменении .
+
+> 💡 В Budibase важно помнить: JS в bindings выполняется синхронно, `async/await` не поддерживаются .
+
+---
+
+### 3. ToolJet
+
+**Сайт:** [tooljet.com](https://www.tooljet.com)  
+**GitHub:** [github.com/ToolJet/ToolJet](https://github.com/ToolJet/ToolJet) 
+
+ToolJet использует **FX-функциональность** — при нажатии на значок `fx` открывается редактор JavaScript-кода. Вы можете обращаться к любым компонентам, переменным и запросам через объект `components` .
+
+#### Реализация калькулятора
+
+1. **Создайте новое приложение** и перетащите на холст:
+   - Два компонента `Number Input`
+   - Компонент `Dropdown` с опциями `+`, `-`, `*`, `/`
+   - Компонент `Text` для вывода результата
+
+2. **В компоненте результата** кликните на `fx` рядом с полем `Text`. Введите код:
+
+```javascript
+{{ (() => {
+  const num1 = components.numberinput1.value;
+  const num2 = components.numberinput2.value;
+  const operator = components.dropdown1.value;
+  
+  if (num1 === undefined || num2 === undefined) return "Enter numbers";
+  if (operator === "/" && num2 === 0) return "Cannot divide by zero";
+  
+  switch(operator) {
+    case "+": return num1 + num2;
+    case "-": return num1 - num2;
+    case "*": return num1 * num2;
+    case "/": return num1 / num2;
+    default: return "Select operator";
+  }
+})() }}
+```
+
+3. **При необходимости** можно добавить кнопку с вычислением, но ToolJet позволяет обновлять результат автоматически при изменении любых входных данных .
+
+---
+
+## Сравнение подходов
+
+| Платформа | Место написания JS | Синтаксис доступа | Особенности |
+|-----------|-------------------|-------------------|-------------|
+| **Appsmith** | В любом поле через `{{ }}` | `Input1.text`, `Select1.selectedOptionValue` | Поддержка async/await, богатые возможности |
+| **Budibase** | Bindings (иконка молнии) | `$("ComponentName.Value")` | Синхронный код, автодополнение через `$` |
+| **ToolJet** | FX (иконка `fx`) | `components.componentname.value` | Интеграция с запросами, мощный редактор |
+
+Все три платформы являются полностью open-source, что позволяет развернуть их на собственном сервере, изучать исходный код и адаптировать под свои нужды. Приведённый калькулятор — лишь простейший пример; на этих платформах можно создавать сложные бизнес-приложения, панели аналитики и административные интерфейсы с минимальным объёмом написанного кода.