Бизнес-логика веб-приложений

В AppMaster Web Designer вы можете настраивать бизнес-логику веб-приложений на стороне Frontend в дополнение к Backend логике. Эта мощная функция позволяет создавать сложные, динамичные веб-приложения, отвечающие конкретным потребностям бизнеса.

В контексте веб-приложений бизнес-процессы могут включать аутентификацию пользователей, обработку данных, онлайн-транзакции, управление контентом, работу с клиентами и настройку элементов пользовательского интерфейса в зависимости от условий.

Три уровня бизнес-логики в AppMaster Web Designer:

• Триггеры приложения: это триггеры, которые реагируют на события или состояния в масштабах всего приложения, запуская определенные бизнес-процессы.
• Общие бизнес-процессы: это предопределенные наборы операций, которые можно применять в различных частях приложения, автоматизируя задачи и оптимизируя рабочие процессы.
• Триггеры UI-элементов: триггеры, которые запускают бизнес-процессы на основе взаимодействия с этими элементами.

Используя эти уровни бизнес-логики, AppMaster Web Designer позволяет создавать веб-приложения, которые не только визуально привлекательны, но и реагируют на взаимодействие пользователей.

🔔 Важно: если вы запустили предварительный просмотр, после добавления новой бизнес-логики, страницу с превью необходимо обновить для перезапуска бизнес-процессов.

Триггеры приложения

Триггеры приложения в AppMaster Web Designer - это триггеры, которые реагируют на события или состояния в приложении и запускают выполнение определенных бизнес-процессов для удобства работы пользователей.

AppMaster предлагает множество триггеров приложения, каждый из которых предназначен для определенных сценариев:

• On App Launch: срабатывает при запуске приложения, идеально подходит для начальной настройки веб-приложения и проверок прав доступа.
• On App Navigate: срабатывает во время навигации между различными частями приложения.
• On App Blur: срабатывает, когда приложение теряет фокус, полезно для действий паузы или сохранения.
• On App Focus: срабатывает, когда приложение восстанавливает фокус, что очень удобно для возобновления каких-либо действий или обновления содержимого.
• On App Hidden: срабатывает, когда приложение свернуто или скрыто.
• On App Visible: срабатывает, когда приложение снова становится видимым, что полезно для обновления содержимого.
• On App Destroy: срабатывает во время процесса закрытия приложения.
• On App Online: срабатывает, когда приложение переходит в режим "онлайн". Идеально подходит для синхронизации данных.
• On App Offline: срабатывает, когда приложение переходит в автономный режим, позволяя задействовать автономные функции.
• On App Auth Required: срабатывает при получении ответа "401 (Unauthorized)", предлагая пользователю пройти повторную аутентификацию.
• On App Forbidden срабатывает при получении ответа от сервера "403 (Forbidden)", обычно используемые для контроля доступа и разрешений.

Точный список триггеров приложения может быть расширен путем создания WebSocket-эндпоинтов на стороне сервера вашего приложения.

Триггеры приложения могут использоваться для управления авторизацией пользователей при запуске, проверки прав доступа, настройки перенаправления при изменении авторизации, обработки ошибок и многого другого, что делает их незаменимыми при создании отзывчивых и безопасных веб-приложений.

Общие бизнес-процессы

Общие бизнес-процессы в AppMaster Web Designer разработаны специально для инкапсуляции повторяющихся операций и избыточной логики в отдельные потоки. После создания эти бизнес-процессы могут быть легко интегрированы в качестве отдельных блоков в бизнес-процессы вашего веб-приложения любого уровня.

Ключевые особенности:

• Эффективное управление процессами: перенося общие задачи в общие бизнес-процессы, вы значительно сокращаете дублирование и оптимизируете рабочий процесс вашего приложения.
• Функциональность фронтенда: несмотря на похожую функциональность бизнес-процессов бэкенда, общие бизнес-процессы выполняются только на стороне клиента. Это позволяет ускорить взаимодействие и получить немедленную обратную связь в пользовательском интерфейсе.

Простота повторного использования:

Чтобы переиспользовать Generic Business Process при построении логики, просто перетащите нужный блок из группы User-Created BPs на свой холст.

🔔 Влияние на производительность: Важно отметить, что для сложных и ресурсоемких задач мы рекомендуем выполнять эти процессы на стороне сервера (Backend). Такой подход обеспечивает более высокую производительность и эффективность, особенно для операций, требующих больших вычислений или безопасной работы с конфиденциальными данными.

Триггеры UI-элементов

Триггеры UI-элементов в AppMaster Web Designer необходимы для добавления интерактивности в веб-приложения. Эти триггеры привязаны к определенным элементам пользовательского интерфейса и активируют предопределенные бизнес-процессы в ответ на взаимодействие с пользователем. Каждый компонент в вашем приложении имеет набор триггеров, которые можно настроить:

• Общие триггеры: элементы имеют общий набор стандартных триггеров, таких как onCreate, onDestroy, onShow и onHide, которые реагируют на жизненный цикл компонента и изменение его видимости.
• Триггеры элемента: помимо общих триггеров, элементы имеют уникальные триггеры, адаптированные к их функциональности. Например, кнопка может иметь триггер onClick, таблица может реагировать на onUpdateData, а Табы могут иметь триггер onTabSelect.

Несмотря на разнообразие, основной принцип остается неизменным: возникновение события запускает соответствующий бизнес-процесс. Эффективное использование триггеров компонентов позволяет создавать интерактивные и отзывчивые веб-приложения, которые реагируют на действия пользователя в режиме реального времени, улучшая общий пользовательский опыт и делая ваше приложение более интуитивным и удобным.

Список тригеров

Чтобы просмотреть и настроить триггеры элемента, выберите его на холсте и перейдите на вкладку Workflow в правой боковой панели. Здесь вы найдете список доступных триггеров. Щелкнув на один из них, вы можете прикрепить к нему нужный бизнес-процесс. Триггеры с подключенной логикой выделены синим цветом.

Создание бизнес-процессов

Создание бизнес-процесса для триггера компонента аналогично созданию бизнес-процесса бэкэнда, как это было показано в Модуле 4. Вы будете использовать общий холст, на который добавляются блоки, представляющие различные действия. Связи между этими блоками определяют последовательность действий, позволяя интуитивно строить сложные рабочие процессы.

Построение бизнес-логики приложения

Давайте создадим бизнес-процесс для кнопки Calculate. Сначала определимся, какие действия необходимо выполнить при нажатии на кнопку:

• Определите значения X и Y. Получите их из соответствующих полей ввода.
• Запустите эндпоинт для вычислений и передайте ему параметры X и Y.
• Сделайте контейнер результатов видимым, а контейнер с подсказкой скрытым.
• Вывести результат расчета в сооствествующие текстовые блоки. 

Выберите на холсте элемент Calc Button и нажмите на триггер onClick.

Откроется редактор бизнес-процессов. Здесь мы создадим бизнес-процесс для нашей кнопки.

Получение значений из полей ввода

На первом этапе необходимо получить значения, введенные пользователем. Для этого AppMaster предоставляет блок Input Float Get Data, который имеет в качестве входного параметра Element Key, а в качестве выходного Value, по сути, считывая текущие значения из указанного компонента.

Поскольку у нас есть два отдельных поля (для значений X и Y), вам нужно использовать два блока Input Float Get Data - по одному для каждого поля ввода.

Чтобы настроить их:

• Перетащите на холст два блока Input Float Get Data.
• Установите Element Key для каждого блока, чтобы он соответствовал элементам Input Float. Это свяжет блок с нужным UI-элементом и обеспечит считывание нужных данных.

Если вы предварительно переименовали элементы в UI Designer при создании интерфейса, то найти и выбрать необходимый компонент для каждого блока будет проще простого.

☝️ Переименование элементов на этапе проектирования помогает легко идентифицировать их впоследствии при настройке бизнес-логики.

Запуск эндпоинта

После получения пользовательских данных следующим этапом рабочего процесса вашего веб-приложения является вызов нашего эндпоинта. Этот важный шаг, который устанавливает связь между Frontend (пользовательским интерфейсом) и Backend (процессами на стороне сервера) вашего веб-приложения, и команда на вычисления передается от браузера к серверу.

Эндпоинты в AppMaster представлены в виде отдельных блоков бизнес-процессов. Чтобы использовать наш эндпоинт, просто выберите подходящий из списка блоков бизнес-процессов и перетащите его на свой холст.

В модуле 5 мы настроили эндпоинт с методом GET и присвоили ему базовый URL "module4-basic". В списке он будет именоваться как Server Request GET /module4-basic/. Перетащите его на холст.

В отличие от элементов, эндпоинты AppMaster не требуют настройки своего идентификатора, так как он предопределен. Эта упрощает процесс интеграции эндпоинтов в вашу бизнес-логику.

Последний шаг - передать значения X и Y, полученные на предыдущем этапе, в эндпоинт. Это позволит бэкенду получить и обработать эти данные, выполнив необходимые вычисления.

Состояние UI-элементов

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

Вот как этого добиться:

1. Начните с перетаскивания двух блоков Flex Update Properties на холст.
2. Для каждого блока Flex Update Properties назначьте Element Key параметр, соответствующий контейнерам - один для контейнера результатов, другой для контейнера подсказок.
3. Настройте параметр видимости в этих блоках. Установите параметр Visible в значение True для контейнера результатов, чтобы он стал видимым после вычисления. И наоборот, установите значение False для контейнера подсказок, чтобы скрыть его по завершении расчета.

Выполнив эти шаги, вы создаете интерактивный ответ на действия пользователя в интерфейсе приложения. После действия пользователя, в нашем случае после нажатия кнопки для выполнения вычислений, контейнер с подсказкой будет автоматически скрыт, а вместо него будет отображен контейнер с результатами.

Это не только улучшит UX вашего приложения, но и позволит сохранить консистентность интерфейса приложения и сосредоточить внимание на необходимой информации на каждом этапе взаимодействия.

Предварительный просмотр

Чтобы оценить ход выполнения бизнес-процесса, вы можете легко просмотреть промежуточные результаты:

1. Сначала нажмите на кнопку Save & Exit в редакторе бизнес-процессов. Это действие сохранит текущий рабочий процесс и закроет редактор бизнес-процессов.
2. Запустите превью вашего веб-приложения, пока не важно какого типа, чтобы проверить взаимодействие с приложением, как если бы оно было опубликованным.
3. Протестируйте функциональность, нажав кнопку Расчитать.

Если ваш бизнес-процесс настроен правильно, вы увидите результат работы бизнес-процесса: контейнер с подсказкой будет скрыт, и одновременно с этим откроется контейнер, отображающий результаты.

Такой способ тестирования позволяет уже на этапе разбаботки убедиться в том, что ваши бизнес-процессы функционируют так, как задумано, позволяя вам внести все необходимые коррективы до завершения работы над приложением.

Рендеринг данных

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

Последний шаг - отображение результатов расчетов в интерфейсе вашего веб-приложения. Мы отобразим полученные данные нашего внутреннего бизнес-процесса в соотвествующих UI-элементах пользовательского интерфейса вашего веб-приложения.

Учитывая, что результаты нам возвращаются в заранее определенном порядке, ваша задача - просто согласовать каждый элемент массива с правильным элементом Text Block в вашем пользовательском интерфейсе.

Для обработки данных мы будем использовать следующие блоки:

• Array Element: используйте их для доступа к отдельным элементам в массиве результатов. Вам понадобится 5 блоков, по одному для каждого индекса, от 0 до 4.
• To Text: поскольку ваши данные представлены в формате Float, используйте этот блок для преобразования значений типа Float в текстовый формат, пригодный для отображения.
• Text Block Update Data: этот блок необходим для отображения данных в вашем интерфейсе.

Эти блоки будут извлекать данные из массива результатов, преобразовывать их в текстовый формат, а затем обновлять соответствующие текстовые блоки в вашем пользовательском интерфейсе.

Как построить бизнес-процесс:

1. Разместите эти блоки на холсте.
2. В блоке Array Element подайте на вход массив, полученный из эндпоинта.
3. Установите Index для соответствующего элемента в массиве (начните с 0).
4. Подключите Value из Array Element к блоку To Text .
5. Укажите Element Key в Text Block Update Data для UI-элемента, в котором вы хотите отобразить данные.
6. Последовательно соедините блоки.

Продублируйте эту последовательность блоков для каждого элемента массива, который вы хотите отобразить. Настройте Index в каждом блоке Array Element, чтобы он соответствовал элементам массива.

Убедитесь, что эти блоки также соединены в правильной последовательности.

Финальный результат

На этом создание нашего бизнес-процесса завершено.

Сохраните бизнес-процесс и проверьте конечный результат в предварительном просмотре. Запустите Предварительный просмотр на том деплой-плане, на который вы публиковали свой эндпоинт в Модуле 5.

🎉 Поздравляем с фантастическим достижением!

Вы успешно разработали полнофункциональное веб-приложение с бизнес-логикой и интерактивным пользовательским интерфейсом. Если все работает так, как задумано, вы готовы сделать следующий заключительный шаг - опубликовать приложение и представить его пользователям.

Но путешествие на этом не заканчивается. Существует множество возможностей для дальнейшего совершенствования вашего приложения! Вы можете улучшить UI и UX вашего веб-приложения, настроив внешний вид элементов или расширив логику. Например, вы можете сделать поля обязательными для заполнения или добавить кнопку для сброса полей без необходимости стирать данные вручную.