Designet

Сервис аналитики и создания отчётов по проведению конференций в формате телеприсутствия

UX design
Charts
Branding
Web
Dashboard
Analytics
Reports
Responsive
SaaS
Enterprise
Front End
HTML5
AngularJS
Bootstrap
D3
Filters
Сайт продукта
Задача
Перенести front-end часть enterprise-приложения с Flex на HTML5 с помощью фреймворка AngularJS, сохранив всю функциональность и улучшив пользовательский опыт.
Предыстория
Первая версия клиентской части сервиса создавалась на Adobe Flex — комплекте средств разработки кроссплатформенных интернет-приложений, расширяющих возможности платформы Adobe Flash. В 2014 году Flash начал терять роль стандарта в веб-разработке. Поэтому клиент обратился к нам с просьбой сделать интерфейс приложения полностью на HTML5. От предыдущей команды front-end разработчиков клиента мы унаследовали некоторое количество кода.
При работе мы обращали внимание на основных конкурентов
Контролирует и оптимизирует видеоконференции
Визуализирует уже существующие данные
Собирает и анализирует данные для оптимизации совместной работы
Designet позволяет
Анализировать
работу сетевого
оборудования
Составлять
статистику звонков и список устройств
Следить за техническими параметрами сети
Составлять отчёты в форматах .pdf, html, .doc, .xlxs, таблицы с диаграммами
Эпоха Flex
Designet — это сервис со сложной структурой. В неё входят длинные списки и деревья, большие таблицы и другие сущности с данными для редактирования. Хотя сделать на Flex мобильную и планшетную версии Designet было невозможно, он обеспечивал работу сервиса на разных браузерах и операционных системах и был хорошим решением до перехода на HTML5.
В команде клиента не было штатного дизайнера, поэтому он консультировался с нами по вопросам пользовательского опыта. Мы понимали, что ключевым моментом в UX enterprise-проекта должны быть функциональность и скорость.
Поскольку пользователи уже привыкли к определённому интерфейсу, мы не стремились упрощать экраны для новичков. Вместо этого мы уменьшали число лишних действий, чтобы сделать каждый экран удобнымв использовании, но не перегруженным.
Перемены в дизайне
Вместе с переносом приложения хотелось обновить интерфейс. В качестве шаблона использовалась Bootstrap-тема для административных панелей Angulr. Шаблон предлагает готовую стилистику, и дизайнерская работа сводится к продумыванию расположения и взаимосвязи готовых компонентов. Это экономит деньги и время разработки. UI/UX-решения испытывались на реальных данных и прототипах. Для работы с Bootstrap-компонентами интерфейса (выпадающими меню, модальными окнами, дэйтпикерами и т.п.) используется библиотека Angular-strap.
Было — стало
Было
Стало
SCRUM
Работа шла по SCRUM — фреймворку для управления проектами. Частью процесса было планирование и ежедневные встречи большой интернациональной команды без участия менеджера. Разработчики самостоятельно планировали свои задачи и следили за прогрессом других членов команды. Двухнедельные спринты позволяли чаще публиковать новую версию приложения и оперативно реагировать на отзывы пользователей.
Отчёты
По статистике звонков создаются отчёты (Reports). Процесс начинается с выбора шаблона с предустановленными параметрами, учитывающим большое число специфических ситуаций на переговорах. Каждую из таких ситуаций нужно анализировать для оптимизации связи.
Шаблоны разбиты по темам и тегам. Их перечень зависит от выбранной системы — Cisco, Polycom или Designet. Перейти к желаемому шаблону помогает фильтр.
Чтобы настроить отчёт, пользователь выбирает отслеживаемое устройство (MCU), задаёт временной промежуток сбора статистики, пороговые значения загруженности оборудования и единицу измерения шкалы (абсолютные значения или проценты) для построения графика.
Форма любого отчёта определяется на сервере и передаётся через API. Отчёты складываются из множества информации в бесконечное число комбинаций, которые невозможно просчитать заранее. Поэтому на клиентской стороне предусмотрена обработка случаев специального поведения заданных форм отчётов (edge cases).
Собранная информация фильтруется, отчёты сохраняются и в указанном формате рассылаются по почте аналитикам и менеджерам. Расписание рассылки настраивается.
Сохраненные отчеты
Настройка рассылки
Отчеты, находящиеся в рассылке
Дэшборды
Клиент понимал: актуальный и передовой сервис аналитики должен иметь дэшборды — одностраничные отчёты с понятной визуализацией данных в виде графиков и гистограмм.
Изначально разработка дэшбордов шла на программном обеспечении для бизнес-анализа от компании Pentaho. Клиент купил его за обещанную гибкость и удобную интеграцию с базой данных. В процессе работы выяснилось, что Pentaho не справляется с объёмами баз данных Designet и создаёт неактуальные отчёты. Это заставило нас сосредоточиться на собственном решении.
Чтобы сделать дэшборд, необходимо было понять:
— как это будет работать;
— как будут строиться графики;
— как будут обрабатываться данные.
Архитектурные решения, которые мы использовали
Библиотека на базе D3 для визуализации данных, относящихся ко времени.
JavaScript-библиотека, работающая на веб-интерфейсе для создания интерактивной графики Plotly.
Коллекция компонентов для создания графиков, работающая на библиотеке D3.js.
Чтобы конвертировать данные в универсальный формат и подключать нужную библиотеку, мы написали слой абстракции. Для конвертации данных используется Web Workers — технология, которая переносит трансформацию данных в независимый поток, что даёт пользователю работать с веб-приложением.
Виды графиков
Искрографик
Временной ряд
Гистограмма
Показывает нагрузку на отдельный узел системы
за последний день или месяц
Детально показывает нагрузку на отдельный узел за год или больше. График масштабируется и перемещается вдоль временной оси
На основе годовых данных показывает загрузку отдельного узла
в конкретные часы, дни и месяцы
Гибкий фильтр
База Designet хранит десятки тысяч устройств и отчётов. Гибкий фильтр помогает среди множества записей найти одну. Операторы, учитывающие комбинации букв, цифр и условий, прицельно отфильтровывают нужное.

Логические операторы: AND, OR.
Операторы сравнения: equals, contains, starts_with, ends_with, length, content, regex.
Иерархии
Иерархии — это дерево всех устройств компании с 20 тысячами параметров для вывода, построенное на компоненте IntegralUI TreeView. Изменения можно отменять и возвращаться к отменённым действиям.
Если менеджер не работает с иерархиями, сессия автоматически закрывается без сохранения редактирования. Это позволяют сокеты — постоянные соединения для обмена сообщениями от сервера к клиенту и наоборот. Сокет рвётся через 15 минут после последнего действия клиента и доступ к иерархиям получает другой менеджер. Сокеты построены на библиотеке socksjs-client.
Nodes
Nodes — это вкладка, где хранятся данные о десятках тысяч устройств системы: статус активности, прошивка, производитель устройства, модель. Постраничная загрузка обеспечивает работу с неограниченным набором данных. Есть возможность массового редактирования.
Multitenancy
Designet — это SaaS-решение (Software-as-a-Service), которое не нужно скачивать и устанавливать на компьютер или мобильное устройство. До 2016 года Designet работал по системе Single-Tenancy, что требовало обновлять приложение каждой компании отдельно и увеличивать число серверов с ростом числа компаний.
Для оптимизации расходов и уменьшения количества серверов, обслуживающих систему, внедрена multitenancy-архитектура. Когда пользователь входит в приложение, браузер определяет его по JWT-токену, который содержит информацию о правах доступа и компании. После успешной идентификации сервер отдаёт клиенту данные и  фирменный стиль для брендирования приложения.
Брендирование
На самом раннем этапе работы над приложением был введён движок брендирования.
Каждая компания-партнёр Designet имеет свой логотип, цветовую схему, оформление и шрифты.
Масштабирование интерфейса под разные устройства
Менеджеры и аналитики хотят смотреть отчёты с любого устройства. Грамотная поддержка планшетных размеров появилась благодаря продуманной модификации готовых компонентов.
Открытая библиотека angular-ui-layout позволяет контролировать и адаптировать размеры блоков на странице. В планшетной версии нельзя редактировать иерархии — эта функция снижает производительность устройства, а перетаскивать элементы драг-н-дропом сложно.
E2E-тестирование
Операторы Designet работают в браузерах Chrome и Internet Explorer. Ручные smoke-тесты для выявления явных ошибок проходят долго и не дают надёжного результата, поэтому мы остановились на  End-to-end тестировании (E2E). Метод подразумевает проверку работоспособности приложения от момента запуска до завершения работы с ним. Тестовые сценарии максимально приближены к реальному поведению пользователя. Для E2E-тестов мы использовали сервис BrowserStack. Тестирование занимает около получаса, проходит в нескольких браузерах без участия разработчиков, даёт более полный результат и позволяет выявить незамеченные проблемы.
Continuous Integration
Тестирование и развёртывание сборок новых версий сервиса через FTP-протокол занимало около двух часов. Настройка Continuous Integration на платформе Jenkins дала автоматическое развёртывание на QA и staging-серверы после каждого обновления кода в Git. 2 часа сократились до 15 минут, 10 из которых занимают автоматические тесты.
Подробную техническую инструкцию о настройке сервера сборок на Jenkins читайте в нашем блоге.
Cборка проекта требует от разработчика кучи утомительных операций. Когда менеджеру нужно отчитаться перед заказчиком о ходе работы, разработчик тратит время на выкачивание репозитория, подтягивание библиотек, установку сертификатов, сборку, проверку, выкладывание сборки на сервер и прочие промежуточные этапы. Но на Земле становится всё меньше рутинных действий, которые не подверглись бы автоматизации.
Команда Лайв Тайпинг создала новый UI, переписала 95% фронтенда и закончила работу, передав проект новой front-end команде клиента.
КОМАНДА
Аккаунт-менеджер
Влад Коробов
Front-end разработчики
Михаил Хохлов
Максим Никитин
Дмитрий Скрипкин
Особые благодарности за доверие, интересный проект и отличную команду
CEO Designet Джим Айдлсон
CTO Даниэл Эйспанжер