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
GitHub: github.com/appsmithorg/appsmith

Appsmith — платформа с богатым набором компонентов и возможностью писать JavaScript практически в любом месте: свойства компонентов, обработчики событий, запросы к данным .

Реализация калькулятора

1. Создайте новое приложение и добавьте на холст:

   • Два поля ввода (Input) — назовём их Input1 и Input2
   • Выпадающий список (Select) с опциями: +, -, *, / — назовём Select1
   • Текстовое поле (Text) для результата — назовём Result

2. Настройте JavaScript-выражение для результата. В свойстве Text компонента Result напишите:

{{ (() => {
  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
GitHub: github.com/Budibase/budibase

Budibase позволяет использовать JavaScript в bindings — специальных полях, доступных через значок молнии (fx). Код выполняется синхронно на серверной стороне, поддерживается автодополнение через $ .

Реализация калькулятора

1. Создайте новое приложение и добавьте компоненты:

   • Два поля ввода (Number Input) — они автоматически создадутся, если добавить форму
   • Выпадающий список (Options Picker) с операциями
   • Текстовое поле (Text) для результата

2. Настройте bindings для результата. Кликните на значок молнии рядом со свойством Text компонента результата, перейдите на вкладку 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
GitHub: github.com/ToolJet/ToolJet

ToolJet использует FX-функциональность — при нажатии на значок fx открывается редактор JavaScript-кода. Вы можете обращаться к любым компонентам, переменным и запросам через объект components .

Реализация калькулятора

1. Создайте новое приложение и перетащите на холст:

   • Два компонента Number Input
   • Компонент Dropdown с опциями +, -, *, /
   • Компонент Text для вывода результата

2. В компоненте результата кликните на fx рядом с полем Text. Введите код:

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