Enterprise-проект — личный кабинет клиентов компании ЕВРАЗ

• Старт проекта
• Интерфейсы
  • Рабочий стол
  • Универсальный табличный интерфейс
• Интеграция
  • Один проект на трех серверах
  • Регистрация и авторизация
  • Контроль доступа
  • Документы
  • Безопасность
• Итоги
• ИНТЕРВОЛГА — компетентный веб-интегратор. Наша специализация — разработка и комплексная сложных веб-систем

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

Мы хотим рассказать как раз о таком проекте — личном кабинете для клиентов компании ЕВРАЗ.

Evraz plc (Evraz, LSE: EVR) — международная вертикально-интегрированная металлургическая и горнодобывающая компания с активами в Российской Федерации, Украине, США, Канаде, Чехии, Италии, Казахстане и ЮАР… Входит в число крупнейших производителей стали в мире. Собственная база железной руды и коксующегося угля практически полностью обеспечивает внутренние потребности ЕВРАЗа. Компания входит в ведущий индекс Лондонской Фондовой Биржи FTSE-250. ЕВРАЗ объединяет около 90 000 сотрудников по всему миру.

Один из карьеров компании ЕВРАЗ

Как можно понять из этого описания, клиенты компании ЕВРАЗ — люди солидные, и заказы — им под стать. При таких масштабных покупках, отслеживание заказов, производства и доставки — нетривиальная задача.

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

Задача осложняется тем, что для каждого процесса свой источник данных — заказы берем из SAP, местоположение вагонов из специализированного софта, а оригиналы документов вообще из трех разных хранилищ.

Говоря сухим текстом Технического задания — перед нами стояла задача агрегировать большой объем табличных данных в одном месте и дать пользователю удобный инструмент для работы с ними.

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

Старт проекта

К выбору подрядчика клиент подошел скрупулезно. Также до последнего момента не было очевидно на каких технологиях делать проект. Выбор стоял между:

• ASP.NET, где все было условно недорого, но любое усложнение типовых интерфейсов очень трудоемко.
• 1С-Битрикс и «обычный WEB», где стоимость работ дороже, но все привычны к нестандартным интерфейсам.

А потребность в нестандартном интерфейсе была, ведь будущие пользователи кабинета привыкли к настраиваемым интерфейсам. Одна из задач так и звучала: «сделать интерфейс отчетов схожим по функциональности с SAP».

Для демонстрации возможности сделать такой интерфейс в WEB мы подготовили прототип.

Прототип табличного интерфейса

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

Интерфейсы

Зачем нужен личный кабинет? Чтобы зайти и быстро понять «что происходит». А еще чтобы получить тонну отчетов за квартал, проверить контрольные цифры и выдохнуть. Или вздохнуть. Значит, личный кабинет должен одновременно работать в двух режимах — как контрольная панель для быстрого считывания основных параметров и как серьезный рабочий инструмент.

Для решения задачи быстрого контроля параметров очень удобны персональные рабочие столы, Dashboard’ы. Мы пошли по этому пути и сделали специальный Рабочий стол.

Рабочий стол

А чтобы было удобно просматривать разнообразные таблицы, мы разработали специальный Универсальный табличный интерфейс.

Легко сказать, трудно сделать: хлопот доставили оба инструмента.

Проблема заключалась в том, что Рабочий стол должен быть адаптивным — контроль работы и взаиморасчетов может производиться из любого места — аэропорт, отпуск, поездка и еще миллион мест без доступа к полноценному ПК.

А вот табличный интерфейс для сложных отчетов делать адаптивным бессмысленно — условным excel’ем на мобильном пользоваться неудобно до невозможности.

Пришлось создавать разные шаблоны — Рабочий стол стал адаптивным, а табличный интерфейс «резиновым», чтобы занимать всю ширину страницы.

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

Рабочий стол

Как наглядно и интересно показать много скучных цифр? Правильно, построить красивый график или диаграмму. К примеру, ниже график ближайших платежей. Поддерживается анимация (при выборе дня платежа). График адаптивный — отлично выглядит на мобильных и планшетах.

Виджет «Исполнение заказов». Обратите внимание на сложную форму шкалы.

Готовых решений найдено не было (в частности, рассматривали мощную библиотеку http://www.highcharts.com), пришлось делать самим. Чтобы выглядело красиво и масштабировалось, использовали формат svg («в кривых», чтобы качество при любом размере было на высоте).

И не забывайте, что вся эта красота должна была хорошо работать на мобильных устройствах.

Ниже подробное описание проблем, с которыми мы столкнулись.

Масштабирование виджетов

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

Сложности с масштабируемостью также есть у графика «Ближайшие платежи». Его круглые отметки на линии тоже масштабируются до определенного размера, чтобы на них можно было нажимать.

Один из первых вариантов графика «Ближайшие платежи»

Знак рубля

В виджете «Ближайшие платежи» присутствует знак рубля, который в некоторых системах не поддерживается и отображается в виде «?».

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

Геометрия и градиент дуги (Финансовая информация)

Нет никаких проблем нарисовать векторную дугу. Градиентную векторную дугу нарисовать сложнее, но тоже можно. Еще сложнее нарисовать векторную градиентную дугу так, чтобы ее геометрическое описание позволяло точно поставить точку на дуге, соответствующую 1/n ее длины.

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

График «Финансовая информация»

Мелкие правки

Иногда возникает потребность немного поправить виджет уже «на месте». Немного поменять размеры элементов, подкрутить цвет, отступы, поменять шрифт и т.п. Или сделать несколько «почти одинаковых» виджетов.

Для того, чтобы каждый раз не делать копию виджета, многие параметры были вынесены в опции jQuery-плагина. Это позволило осуществить точную настройку виджетов «на месте».

Универсальный табличный интерфейс

Казалось бы, что может быть легче, чем табличный интерфейс? Но у нас он особый. Наши таблицы суровы и функциональны. Судите сами:

1. Большой объем данных — до 40 столбцов, десятки тысяч строк.
2. Фильтрация, настройка отображаемых фильтров.
3. Сортировка. Одновременно можно сортировать по нескольким столбцам.
4. Группировка и агрегации. Одновременно можно группировать по нескольким столбцам. По сгруппированным столбцам выводится сумма значений (там, где это необходимо).
5. Настройка выводимых столбцов:
   1. Перетаскивание столбцов.
   2. Изменение ширины столбцов с запоминанием измененных размеров для каждого набора.
6. Возможность самостоятельно создавать (и сохранять) наборы столбцов, группировок, сортировок и фильтрации. При этом пользователю доступно несколько «предустановленных» наборов, сконфигурированных оптимальным образом под наиболее частые сценарии использования.
7. «Контекстное меню» — при выборе строки, в зависимости от реестра, где мы находимся, есть возможность перехода в другие реестры с фильтрацией по значениям, связанным с выбранными строками.
8. Выгрузка в csv и отправка на почту как всего реестра, так и выбранных строк.
9. Специальный расширенный вид интерфейса (скрывается меню и область с фильтрами).
10. Специальный полноэкранный вид интерфейса — табличная область максимизируется.

Задача выглядела как «повторить excel в вебе». Монстра назвали «универсальный табличный интерфейс».

Наш универсальный интерфейс также функционален

Проектировали долго, со спорами и мозговыми штурмами. Выделили несколько концепций, предложили их на суд клиента с описанием плюсов и минусов.

Тройка лидеров в конкурсе «Лучший прототип универсального табличного интерфейса»

Как это обычно бывает, некоторые красивые интерфейсные решения сломались о жестокую правду реального использования. Переделки — это всегда больно, но выпускать неудобный продукт еще хуже. Пришлось вносить изменения «на ходу», в процессе реального тестирования. В частности, отказались от малоинформативного подвала и закрепили внешнюю часть таблицы. Теперь прокручивается только содержимое таблицы и фильтры, остальные элементы закреплены. Как говорится, жить стало лучше…

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

Интеграция

Enterprise-проект — это вам не ленты новостей по сайту расставлять или интегрировать каталоги с 1С. С технической точки зрения нам пришлось затронуть (и изменить) практически все аспекты работы сайта на Битриксе. Регистрация, авторизация, подключение к БД, работа пользователя с данными в публичном разделе и, конечно же, интеграция с учетной системой клиента.

Один проект на трех серверах

Для нас клиент собрал и распределил данные по двум серверам: на одном база данных под управлением MSSQL (назовем его промежуточной базой данных, ПБД), и второй, с документами -- CRM. Третий сервер -- Bitrix VM с “1С-Битрикс: Управление сайтом”. Каждый сервер решает собственные задачи.

Задачи BitrixVM:

• обеспечивать работу сайта.

Задачи ПБД:

• предоставлять данные сайту для пользователей с контролем прав;
• хранить заявки с сайта на регистрацию (в режиме read-write);
• хранить данные, необходимые БУСу для внешней авторизации (в режиме read-only).

Задачи CRM:

• предоставлять сайту документы для пользователей с контролем прав.

Начали с подключения к внешней БД. Благо, Битрикс это умеет и пришлось только адаптировать системный класс Битрикса для конкретно этой версии MSSQL. На самом деле, мы об этом уже писали ранее. Повторю только, что блестяще себя проявил механизм ORM, который после некоторых доработок отлично справился с возложенной на него задачей: работой не с таблицами, а с хранимыми процедурами. (читать подробнее в нашем блоге или на сайте 1С-Битрикс).

Регистрация и авторизация

Вспомните классическую схему регистрации пользователей. Логин, пароль, “добро пожаловать”, об этом вы подумали, да? А вот наша схема.

Ключевые отличия от привычной схемы:

• пользователи хранятся не на сайте, а в сторонней БД;
• пользователи проходят модерацию у нескольких разных администраторов;
• регистрация всегда временная и истекает через N дней (администраторы могут продлить активность пользователя еще на N дней);
• сайт отсылает 16 разных уведомлений всем участникам этого процесса на разных этапах.

Пользователь не регистрируется, он может только оставить заявку. Все заявки отправляются в ПБД, оттуда — дальше, в учетную систему клиента. После одобрения заявки в другой таблице создается пользователь (к этой таблице доступ у сайта есть только на чтение, в целях безопасности). Т.к. сервер ПБД не может самостоятельно оповестить сайт об одобрении или отклонении заявки, создали агент, периодически проверяющий изменения в этой таблице.

На фоне этого обычная внешняя авторизация даже как-то померкла (при вводе на сайте логина и пароля сайт вызывает хранимую процедуру в ПБД).

Контроль доступа

Главное требование клиента: полный контроль над данными. Грубо говоря, ни SELECT’а без проверки. Есть несколько групп пользователей, у них разный набор столбцов в таблицах. Каждому пользователю доступны не все строки, а только его данные.

Мы рассматривали несколько вариантов.

1. Управление правами в БД и автоматизированное создание пользователей MSSQL,  отфильтрованных VIEW (представлений) -- но с этим Битрикс не слишком хорошо бы работал, т.к. все запросы классически выполняются от 1 пользователя, а передавать пользователю логин и пароль (пусть и ограничением прав) от БД чревато.
2. Парсер запросов, проверяющий запрошенные данные и возвращаемые.
3. Отказ от работы с “сырыми” таблицами и работа с функциями и возвращаемыми табличными данными.

Остановились на последнем варианте. Чтобы претворить его в жизнь, пришлось… придумать свой механизм БД-сессий! Рассмотрим этот вопрос поподробнее.

Как видно на схеме, для запроса секретных данных нужна специальная “сессия доступа к БД”. Выдается она в момент авторизации самим сервером (всё равно проверку логина и пароля он уже выполняет). Эта сессия довольно быстро истекает, но продлевается на каждом хите пользователя на сайте. Без id сессии невозможно получить данные и пользователь видит предупреждение об истечении сессии. Это потребовало 1 точечного изменения в логике ORM Битрикса, при этом удалось сохранить гибкость.

Документы

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

Документы нужны были в двух случаях:

1. вывод ссылок на документы в таблице;
2. скачивание документов архивом.

В обоих сценариях заранее неизвестно, существуют ли документы (!), есть только их название. Пользователь может запросить архив из 100 документов и только постфактум узнать, что документов-то в его архиве всего 10.

Получение документов происходит по следующей схеме:

1. сайт передает в CRM описания документов, в ответ получает их ID;
2. сайт передает ID, в ответ получает ссылки;
3. ссылки либо отображаются на сайте, либо используются для скачивания документа и добавления в архив.

Ситуация интересна еще и запретом на хранение файлов на сайте, одновременно с требованием создавать архивы с этими документами. Пришлось создавать пустой запароленный архив и добавлять в него документы “на лету”, не расшифровывая.

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

Безопасность

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

Были рассмотрены следующие векторы атаки:

1. Уязвимости на уровне сервера сайта:
   1. Уязвимости программного обеспечения севера
   2. Получение доступа к консоли сервера на котором находится сайт
2. Уязвимости на уровне CMS и самого разрабатываемого сайта
   1. Получение доступа к панели управления сайтом
   2. Получение доступа к программному коду сайта
   3. Уязвимости в программном коде сайта
3. Уязвимости на уровне браузера пользователя
   1. Кража логина/пароля у конкретного пользователя сайта

Для каждого из них были обозначены способы защиты, реализованные при разработке.

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

Коммерческая информация хранится на сервере базы данных MS SQL, которая отделена от базы данных сайта на 1С-Битрикс.

Используется двойная авторизация доступа к коммерческим данным через механизм “сессий доступа к коммерческой информации”.

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

Итоги

Любой крупный проект внедряется постепенно и после тщательного тестирования. Сейчас мы проходим как раз этот этап. Коллеги со стороны ЕВРАЗа готовят пожелания по новым функциям, мы работаем с производительностью и проектируем новые интерфейсы. В ближайших планах боевое внедрение и участие в крупной отраслевой выставке.

В заключение хочется отметить, что в проектах такого масштаба особое значение имеет команда со стороны заказчика. Хотим выразить благодарность за оперативность и оптимизм коллегам: Максиму Васильеву, Евгению Мурлыку и Борису Маркушину. Благодаря отличному взаимодействию с ними личный кабинет компании ЕВРАЗ стал удобным и функциональным для конечного пользователя. А сложную логику, интеграции, интерфейсы и безопасность мы всегда готовы взять на себя.

ИНТЕРВОЛГА — компетентный веб-интегратор. Наша специализация — разработка и комплексная сложных веб-систем

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

ИНТЕРВОЛГА – компетентный веб-интегратор . Мы можем решить все задачи веб-интеграции собственными силами. Большинство наших проектов – комплексные, интеграционные.

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

Оставьте заявку на обсуждение комплексного проекта.