doc/IT/programming/visual_programming_js/a2.md

## Calculator
Покажи примеры разработки для них простого калькулятора: два поля ввода чисел, поле - справочник выбора четырех операций (+,-,/,*) и поле результата.

Из предыдущего ответа open-source системами были: Appsmith, Budibase, ToolJet (и также упоминались NocoDB и др., но основные — эти три).  
В результатах поиска есть много информации по Budibase и ToolJet, включая документацию по JavaScript и примерам калькуляторов. Appsmith также упоминается как open-source.

Из поисковых результатов:
- Официальная документация Budibase по JavaScript  — описывает использование JS в bindings, синхронный код, доступ к переменным через $().
- Документация ToolJet по FX функциональности  — про использование JS-выражений в свойствах компонентов.
- Обзорная статья про Appsmith, Budibase, ToolJet  — подтверждает open-source статус и возможности.

GitHub репозитории  — ссылки на GitHub.
- Пример калькулятора в ToolJet (ипотечный)  и Budibase (инвентарный)  — хотя это не простые калькуляторы, но подтверждают наличие таких возможностей.
- Для 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, что позволяет развернуть их на собственном сервере, изучать исходный код и адаптировать под свои нужды. Приведённый калькулятор — лишь простейший пример; на этих платформах можно создавать сложные бизнес-приложения, панели аналитики и административные интерфейсы с минимальным объёмом написанного кода.