- О Сервисе
- CMS
- Верстка
- Данные
- Анкетирование клиентов
- Распределения средств
- Сохранение и отправка предложения
- Диаграммы
- Итоги
Декабрь. Самое время готовиться к новогодним праздникам, заканчивать большие проекты и строить планы на следующий год. В этот предпраздничный момент и случился интересный проект.
К нам обратился Абсолют Банк с задачей, прозвучавшей как вызов — разработать всего за два месяца сервис для продажи инвестиционных предложений.
О Сервисе
Сервис, который нам предстояло разработать — внутрибанковский ресурс для работы менеджера.
Задача менеджера: помочь клиенту сориентироваться в банковских услугах и стимулировать принятие решения о вложении средств.
Задача сервиса: помочь менеджеру сформировать оптимальное предложение для клиента.
Функционал сервиса:
-
проведение опроса клиента, определение его риск-профиля;
-
формирование стандартного предложения по размещению активов клиента, исходя из его риск-профиля;
-
формирование индивидуального инвестиционного предложения клиенту, исходя из его риск-профиля, пожеланий клиента и информации об объеме денежных средств, которые клиент готов разместить в текущий момент;
-
просмотр информации по актуальным банковским и партнерским инвестиционным продуктам.
CMS
Сервис реализован на 1С-Битрикс: Управление сайтом. Выбор не случаен, Битрикс достаточно гибок и при этом имеет вполне дружелюбный интерфейс для администратора сайта. В Битрикс много возможностей реализовано “из коробки”, достаточно их немного доработать и можно использовать. Например, из необходимых возможностей, уже реализовано:
-
импорт данных из CSV-файлов;
-
система авторизации и выдачи прав;
-
удобное хранение данных и доступ к ним;
-
интуитивно понятный интерфейс для администратора и контент-редактора;
-
просмотр различных типов данных (изображения, видео, таблицы, PDF).
Наличие стандартных компонентов ускоряет процесс разработки, позволяя уделить больше внимания нюансам бизнес-логики и юзабилити сайта.
Верстка
Верстку предоставил заказчик. В целом была неплохая, рассчитана под планшеты.
Лишь одно ”но” — одна из ключевых страниц не соответствовала финальному ТЗ.
В итоге внесли правки, переписали часть js под новую логику, исправили ошибки, возникшие при заполнении реальных данных.
Данные
Исходя из задачи, данные делятся на 3 категории:
1. Заполняются контент-редактором сайта в административной части по информации банка.
2. Заполняются при работе менеджера в публичной части.
3. Настройки сайта, которые меняются редко и только главным администратором.
Если с категориями 2 и 3 в целом понятно, то категория 1 представляет интерес — ведь заполнять вручную большой и постоянно обновляющийся объем данных неэффективно и чревато ошибками.
Поэтому был разработан скрипт импорта, который получает таблицу, сформированную по определенному образцу, и преобразует её в формат, подходящий нашему сервису.
Как и при любой обработке пользовательских данных, была добавлена проверка “крайних случаев” — когда в таблице оказываются некорректные данные.
Например:
-
лишние символы в числовых данных;
-
некорректный разделитель целой и дробной части числа;
-
некорректные заголовки таблицы;
-
отсутствие данных в обязательных столбцах;
-
некорректные данные из ограниченного набора вариантов (например, валюты);
-
и другие.
Для тестирования был составлен и выполнен план по воспроизведению всех этих ошибок и результатов импорта корректных и некорректных данных.
Анкетирование клиентов
Клиент отвечает на несколько вопросов анкеты. На основании ответов внутри сервиса определяется портрет клиента и автоматически формируется стандартное предложение распределения денежных средств.
Распределения средств
В ходе работы над Техническим заданием, логика страницы с индивидуальным предложением изменилась практически на 90% от первоначальной версии, чтобы соответствовать реальной работе менеджера.
В стандартном банковском предложении распределение средств идет исходя из риск-профиля по типам продуктов, в индивидуальном — по конкретным продуктам.
После распределения клиент должен видеть сколько в итоге он заработает через год - как численно, так и в виде диаграммы. Диаграмм две — для визуального отображения вложения денег против получаемой от них доходности в разрезе инвестиционных продуктов.
Сохранение и отправка предложения
Сформированное индивидуальное предложение менеджер может отправить на электронную почту клиента. Отправить письмо на почту несложно, Битрикс это умеет. Сложно сформировать файл, который должен быть к этому письму приложен.
Для этого была выбрана стандартная библиотека mPdf. В идеале всё, что нужно — передать верстку страницы в mpdf, и он сам сгенерирует готовый файл.
Конечно, всё могло бы быть так просто.
К чему нужно быть готовым при работе с pdf:
1. Кириллица. Библиотека соглашалась с ней работать только при определенных настройках php.
2. Сложная верстка и некорректное отображение стилей. В итоге приняли решение переверстать на как можно более примитивную таблицу.
3. Размер шрифта. Занятная особенность — pdf изменяет размер страницы так, чтобы он полностью помещался по ширине. Все пиксели в ширине блоков могут быть проигнорированы, если контент ячейки их превышает. Следствие —- если увеличивать размер шрифта у длинной надписи, ширина надписи увеличивается, pdf уменьшает масштаб, чтобы надпись помещалась, в результате видимый размер надписи не меняется.
4. Определенные шапка и подвал страницы. К счастью, в mdpf есть готовые функции для их заполнения, нужно только корректно прописать стили и рассчитать отступы сверху и снизу, чтобы контент страницы их не закрывал.
5. Картинки диаграмм. Об этом ниже.
Диаграммы
Для отрисовки диаграмм были использованы готовые библиотеки от Google.
Это работает следующим образом — сайт посылает данные, а получает готовую диаграмму. Казалось бы все просто, однако, проблема заключалась в 2 моментах:
1. Диаграмма на странице сайта рисовалась "на лету” с помощью js в браузере, поэтому использовать тот же метод при формировании pdf-файл на сервере было невозможно. К счастью, вопрос решился более старой библиотекой от google, которая отдавала диаграмму в виде картинки по входному массиву данных. Это как раз то, что нужно было для pdf.
2. Размер картинки с диаграммой должен быть строго определенным, при этом на ней должны помещаться произвольное количество подписей с произвольной информацией.
Если просто рисовать диаграмму не составляло труда, то выводить к ней красивую легенду оказалось сложно — она не помещалась в отведенное ей место. В итоге на странице индивидуальных предложений пришлось вынести её в отдельный блок с названиями продуктов и их цветами на диаграмме, а непосредственно на картинке оставить только суммы вложений и прибыли. При этом добавление любого символа (например точки после слова тыс.) могла привести к тому, что подписи переставали помещаться и обрезались.
Итоги
Две версии Технического задания — при детальной проработке реального бизнес-процесса, ТЗ было сильно изменено в части формирования индивидуального предложения.
Два месяца разработки.
Два менеджера в проекте.
Один разработчик, трудившийся за двоих.
Один сервис для продажи инвестиционных предложений.
Работа завершена в кратчайшие сроки, несмотря на все трудности, сервис запущен в соответствии с графиком Банка.
Статьи по теме
