Designet

Designet — это сервис со сложной структурой. В неё входят длинные списки и деревья, большие таблицы и другие сущности с данными для редактирования. Хотя сделать на Flex мобильную и планшетную версии Designet было невозможно, он обеспечивал работу сервиса на разных браузерах и операционных системах и был хорошим решением до перехода на HTML5.

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

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

Вместе с переносом приложения хотелось обновить интерфейс. В качестве шаблона использовалась Bootstrap-тема для административных панелей Angulr. Шаблон предлагает готовую стилистику, и дизайнерская работа сводится к продумыванию расположения и взаимосвязи готовых компонентов. Это экономит деньги и время разработки. UI/UX-решения испытывались на реальных данных и прототипах. Для работы с Bootstrap-компонентами интерфейса (выпадающими меню, модальными окнами, дэйтпикерами и т.п.) используется библиотека Angular-strap.

Работа шла по SCRUM — фреймворку для управления проектами. Частью процесса было планирование и ежедневные встречи большой интернациональной команды без участия менеджера. Разработчики самостоятельно планировали свои задачи и следили за прогрессом других членов команды. Двухнедельные спринты позволяли чаще публиковать новую версию приложения и оперативно реагировать на отзывы пользователей.

Шаблоны разбиты по темам и тегам. Их перечень зависит от выбранной системы — Cisco, Polycom или Designet. Перейти к желаемому шаблону помогает фильтр.

Чтобы настроить отчёт, пользователь выбирает отслеживаемое устройство (MCU), задаёт временной промежуток сбора статистики, пороговые значения загруженности оборудования и единицу измерения шкалы (абсолютные значения или проценты) для построения графика.

Форма любого отчёта определяется на сервере и передаётся через API. Отчёты складываются из множества информации в бесконечное число комбинаций, которые невозможно просчитать заранее. Поэтому на клиентской стороне предусмотрена обработка случаев специального поведения заданных форм отчётов (edge cases).

Собранная информация фильтруется, отчёты сохраняются и в указанном формате рассылаются по почте аналитикам и менеджерам. Расписание рассылки настраивается.

Клиент понимал: актуальный и передовой сервис аналитики должен иметь дэшборды — одностраничные отчёты с понятной визуализацией данных в виде графиков и гистограмм.

Изначально разработка дэшбордов шла на программном обеспечении для бизнес-анализа от компании Pentaho. Клиент купил его за обещанную гибкость и удобную интеграцию с базой данных. В процессе работы выяснилось, что Pentaho не справляется с объёмами баз данных Designet и создаёт неактуальные отчёты. Это заставило нас сосредоточиться на собственном решении.

Архитектурные решения, которые мы использовали

Чтобы конвертировать данные в универсальный формат и подключать нужную библиотеку, мы написали слой абстракции. Для конвертации данных используется Web Workers — технология, которая переносит трансформацию данных в независимый поток, что даёт пользователю работать с веб-приложением.

Детально показывает нагрузку на отдельный узел за год или больше. График масштабируется и перемещается вдоль временной оси

База Designet хранит десятки тысяч устройств и отчётов. Гибкий фильтр помогает среди множества записей найти одну. Операторы, учитывающие комбинации букв, цифр и условий, прицельно отфильтровывают нужное.

Логические операторы: AND, OR.
Операторы сравнения: equals, contains, starts_with, ends_with, length, content, regex.

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

Designet — это SaaS-решение (Software-as-a-Service), которое не нужно скачивать и устанавливать на компьютер или мобильное устройство. До 2016 года Designet работал по системе Single-Tenancy, что требовало обновлять приложение каждой компании отдельно и увеличивать число серверов с ростом числа компаний.
Для оптимизации расходов и уменьшения количества серверов, обслуживающих систему, внедрена multitenancy-архитектура. Когда пользователь входит в приложение, браузер определяет его по JWT-токену, который содержит информацию о правах доступа и компании. После успешной идентификации сервер отдаёт клиенту данные и  фирменный стиль для брендирования приложения.

На самом раннем этапе работы над приложением был введён движок брендирования.
Каждая компания-партнёр Designet имеет свой логотип, цветовую схему, оформление и шрифты.

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

Открытая библиотека angular-ui-layout позволяет контролировать и адаптировать размеры блоков на странице. В планшетной версии нельзя редактировать иерархии — эта функция снижает производительность устройства, а перетаскивать элементы драг-н-дропом сложно.

Операторы Designet работают в браузерах Chrome и Internet Explorer. Ручные smoke-тесты для выявления явных ошибок проходят долго и не дают надёжного результата, поэтому мы остановились на  End-to-end тестировании (E2E). Метод подразумевает проверку работоспособности приложения от момента запуска до завершения работы с ним. Тестовые сценарии максимально приближены к реальному поведению пользователя. Для E2E-тестов мы использовали сервис BrowserStack. Тестирование занимает около получаса, проходит в нескольких браузерах без участия разработчиков, даёт более полный результат и позволяет выявить незамеченные проблемы.

Тестирование и развёртывание сборок новых версий сервиса через FTP-протокол занимало около двух часов. Настройка Continuous Integration на платформе Jenkins дала автоматическое развёртывание на QA и staging-серверы после каждого обновления кода в Git. 2 часа сократились до 15 минут, 10 из которых занимают автоматические тесты.
Подробную техническую инструкцию о настройке сервера сборок на Jenkins читайте в нашем блоге.