Опыт использования платформы OutSystems в компании JazzTeam

May 11, 2020 Jazz Team Технические статьи, 0

Введение

OutSystems – это надежная и гибкая low-code платформа для разработки корпоративных мобильных и веб-приложений, которые разворачиваются в локальной или в гибридных средах.

Low-code платформа LCDP (low-code development platform) – это программное обеспечение, которое предоставляет программистам среду для создания прикладных приложений через графический интерфейс и различные конфигурации вместо традиционного программирования. LCDP сокращают объем традиционного ручного кода, обеспечивая ускоренную разработку, установку и развертывание приложений. Общим преимуществом является то, что LCDP имеют более мягкую кривую обучения, чем большинство языков программирования и, соответственно, более широкий круг людей может поучаствовать в разработке.

Преимущества OutSystems

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

• Высочайшая скорость разработки. С помощью визуального программирования можно очень быстро создавать полнофункциональные приложения, а затем одним кликом отправлять их на сервер.
• Интеграция со всем. OutSystems дает возможность эффективно сопрягать свои приложения с любой средой. Платформа генерирует все методы и структуры данных для интеграции со службами SOAP и REST и системами SAP. Изначально есть связь с основными системами баз данных: SQL Server, SQL Azure, Oracle, MySQL и DB2 iSeries. В OutSystems Forge доступны коннекторы для самых популярных облачных сервисов, хранилищ и социальных сетей.
• Отличный UI/UX по умолчанию. Наличие большого числа красивых и готовых к использованию шаблонов пользовательского интерфейса, превосходная производительность, многофункциональный drag-and-drop редактор.
• Код без ограничений. Можно расширить как front-end, так и back-end приложения с помощью собственного кода.
• Отличная вертикальная и горизонтальная масштабируемость. Легкое добавление дополнительной вычислительной мощности и интерфейсных серверов в любую производственную среду, что помогает добиться высокой доступности при увеличении пользовательской нагрузки, сложности бизнес-логики, объема пакетной обработки либо количества транзакций.

Практика работы JazzTeam с платформой OutSystems

Компания JazzTeam активно использует платформу OutSystems как для обучения, так и в коммерческой разработке.

Силами сотрудников компании в короткий срок были разработаны проекты на платформе Outsystems в различных доменных областях, в частности – социальные сети, управление организацией, финансовый аудит.

Система управления компьютерными клубами

Система включает в себя:

• десктопное приложение под Windows (устанавливается на клиентские машины; web-приложение для администратора клуба; набор web-сервисов для синхронизации и обмена данными между клиентскими машинами и серверами. Среди нетривиальных технических задач, решенных в процессе разработки этой системы, можно выделить, например, закрытие “мертвых” сессий пользователя, организация сетевых соединений через websocket протокол.
• мобильное приложение для администратора компьютерного клуба. При проектировании были использованы богатые возможности платформы OutSystems для быстрой разработки мобильных приложений. Как результат – полный цикл разработки занял существенно меньше времени, при гарантированном качестве кода. При этом UI отвечает современным тенденциям в мире мобильных приложений.

Web-приложение для аудита финансовых операций

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

Обучение

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

Интересный опыт

Создание WebSocket соединения

Для создания WebSocket соединения можно воспользоваться внешним сервисом https://pusher.com/, который предоставляет WebSocket сервер и API для работы с ним. В Forge выложен модуль https://www.outsystems.com/forge/component/1493/pusher-com-apis/ – который, предоставляет Server Actions и веб компоненты для работы с pusher.com.

PusherPublish – Server Action, который позволяет опубликовать сообщение в определенном канале WebSocket сервера, чтобы распространить его среди подписчиков.

PusherSubscribe – UI компонента, позволяющая прослушивать канал (название канала указывается в аргументах) на появление определенных событий (тип ивентов указывается в аргументах компоненты). При появлении события вызовется указанный параметрах Screen Action.

Прикладным примером использования WebSocket соединения может послужить runtime обновление веб-страницы или веб-блока на ней. Пользователь открывает страницу, в тело которой внедрен PusherSubscribe прослушивающий канал. В Preparation страницы создается таймер, который запускает Server Action. В этом Server Action вызывается PusherPublish, который выполняет Screen Action страницы. В Screen Action загружаются измененные данные на странице.

JS-функция setInterval() внутри поля таблицы

Смоделируем ситуацию. Задача: в качестве значения поля таблицы отобразить веб-блок, состоящий из функции setInterval() и контейнера (значение которого заполняется из этой функции). Здесь может возникать проблема: отображается только значение последней строки таблицы.

Природа проблемы: при вызове контейнера из setInterval(), мы обращаемся используя

id = document.getElementById('" + displayContainer.Id +"')

Все контейнеры будут иметь эквивалентные id и если мы обращаемся через DOM-модель документа, мы будет обращаться только к последнему веб-блоку.

Вариант решения. Изменение id контейнера внутри JS функции, и передача нового id как аргумента внутрь функции (которая является первым аргументом функции setInterval()).

Пример (один из вариантов инициализации uniqId – сделать глобальную переменную, которая будет при инициализации веб-блока инкрементировать значение uniqId):

let displayContainerId = ' displayContainer' + uniqId;      
document.getElementById('" + displayContainer.Id + "').setAttribute('id', displayContainerId);    
let interv = setInterval(   
   function() {
      render(startDuration, displayContainerId);
   },
   1000);

Time Zones

Для корректной связи компоненты инфраструктуры OutSystems должны быть синхронизированы по времени, а часовые пояса установлены в UTC. Однако, для вывода времени на экран в часовом поясе пользователя придется прибегнуть к хитрости.

В зависимости приложения добавляем модуль Time Zone. Далее с помощью JS, скрытого Input и двух кнопок определим TimeZone юзера:

"<script>
$(document).ready(function() {
  if(Intl.DateTimeFormat().resolvedOptions().timeZone != undefined)
  {
    $('#" + TzInput.Id +
      "').val(Intl.DateTimeFormat().resolvedOptions().timeZone);
    $('#" + IanaBtn.Id + "').click();
  } else {
    $('#" + TzInput.Id + "').val(new Date().getTimezoneOffset());
    $('#" + OffsetBtn.Id + "').click();
  }
});
</script>"

К кнопке IANA привязано действие GetIANATimeZone (из модуля Time Zone) с входным параметром Tz. К кнопке Offset – GetSystemTimeZones. Проходя циклом по GetSystemTimeZones.TimeZones, проверяем условие GetSystemTimeZones.TimeZones.Current.TimeZone.UtcOffset = Tz и, если оно истинно, то искомый TimeZone: GetSystemTimeZones.TimeZones.Current.

Текущий TimeZone.Identifier юзера можно хранить в Session Property, а лучше во вспомогательной Entity с идентификатором User Identifier.

Для вывода значения время прописываем следующую функцию: ConvertFromTimeZone(DateTimeToDisplay, GetCurrentTimeZone(), Visitor.TimeZoneId), для форматирования можно обернуть в функцию FormatDateTime.

Email validation

Несмотря на обилие встроенных функций и возможностей, порой перед их использованием стоит прочесть документацию или заглянуть на форум, так как можно столкнуться с поведением, которого не ожидаешь. К примеру, в OutSystems есть тип данных Email и, соответственно, функция для его валидации, но полагаться на нее не стоит. Экспериментальным путем было выяснено, что валидными будут адреса, где есть символы до и после @ (1@1), равно как и пустая строка. Это можно легко исправить, написав extension на С#, либо посредством внутренней логики (например, Regex_Search).

Charts API

Charts API – это встроенный инструмент для работы с графиками, базирующийся на внешнем ресурсе Highcharts. В документации родительского компонента даны описания всех элементов, классов, методов, параметров и функций, встречающихся при работе с различными видами графиков, что дает возможность более свободно кастомизировать диаграммы и графики, а, возможно, и строить зависимости непредставленные в OutSytems. К примеру, с помощью JSON форматирование по правила Highcharts, можно сразу задать все элементы и получить необходимый график, используя всего один экшен.

jQuery plugins

Платформа достаточно легко позволяет подключить jQuery plugins, библиотека которых в сети весьма велика. С их помощью можно расширить и разнообразить наполнение приложение. Для этого нужно прочесть readme и верно подключить необходимые компоненты кода. На сайте OutSystems есть инструкция.

Авторизация в REST-запросах

Некоторые REST сервисы требуют авторизацию, в которой сочетание логин + пароль (api-ключ + секретный ключ) должны быть закодированы в base64.

Пример – Twitter API. При выполнении основных запросов Twitter API требует в авторизации Bearer-токен. Для его получения необходимо отправить запрос токена, где в поле Authorization необходимо передавать закодированные в base64 api-key и secret-key. Для начала необходимо подключить в зависимостях функции TextToBinaryData и BinaryToBase64 из модуля BinaryData. Затем кодируем строку “ApiKey:ApiSecretKey” с помощью TextToBinaryData, а результат передаем в BinaryToBase64. В REST-запросе токена в заголовке Authorization прописываем “Basic ” + BinaryToBase64.Base64. В ответ приходит access_token, который можно использовать в дальнейших запросах в Authorization: “Bearer ” + access_token.

Заключение

Outsystems заслуженно находится среди лидеров в списках:

• “The Forrester Wave™: Low-Code Development Platforms For AD&D Pros, Q1 2019”
• “Gartner Magic Quadrant for MXDP (Multiexperience Development Platforms)”

Компания JazzTeam планирует продолжить серию статей, раскрывающих наш опыт практического решения задач, стоящих перед бизнесом – с помощью платформы Outsystems.

Рисунок 1. Пример действия Preparation, выполняемого перед отрисовкой Веб-блока

Рисунок 2. Пример работы с С#, расширение для валидации типа данных email

Используемые ссылки

1. https://www.outsystems.com/
2. https://itnext.io/push-outsystems-to-the-limit-797a0af2033b
3. https://en.wikipedia.org/wiki/Low-code_development_platform
4. https://www.highcharts.com/
5. https://www.outsystems.com/forge/component-overview/500/time-zone

Charts API, jQuery plugins, LCDP, low-code, OutSystems, Time Zone, WebSocket

Твой звездный час настал!