Как быстро создавать уникальные интерфейсы на основе схем

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

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

1. Банк не может использовать внешние сервисы, так как это небезопасно. Во время работы дашборд подключается к различным внутренним базам данных. Если открыть доступ к ним внешнему сервису, получится дыра в системе безопасности. Через нее злоумышленники могут похитить личные данные клиентов. Кроме того, обычно такие сервисы ориентированы на маркетинговые или бизнес-данные. Для решения задач Газпромбанка они не подходят.
2. Программирование интерфейса требует много времени и ресурсов: код нужно отладить, скомпилировать и протестировать, а для каждого элемента создать дизайн. Для того, чтобы обновить интерфейс, весь процесс придется повторить.

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

Для чего используют дашборд в Газпромбанке

Дашборд помогает менеджерам Газпромбанка обслуживать людей в офисе или контакт-центре. Сотрудник банка через единый интерфейс получает доступ к данным о клиенте, его счетах, кредитной истории и транзакциях. Эта информация отображается в виде графиков и диаграмм, поэтому с ней удобно работать.

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

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

Сгенерированный дашборд используют в контакт-центре, фронт-офисе и на планшете мобильного рабочего места (МРМ). Их интерфейсы похожи, но не одинаковые: разным специалистам банка нужны разные функции и данные о клиенте.

Например, в дашборде МРМ есть функции, которые не нужны во фронт-офисе или контакт-центре: геолокация или возможность фотографировать и загружать документы. Менеджер фронт-офиса в карточке клиента среди прочих функций видит блок «ГПБ Мобайл» — это мобильный оператор Газпромбанка. У специалиста контакт-центра такой функции нет.

Как дашборд генерируется с помощью схем

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

Каждый компонент описывается набором параметров:

• тип;
• имя;
• функциональность;
• визуальные особенности.

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

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

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

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

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

• На разработку уходит меньше времени. Вместо отдельных дашбордов для каждого отдела можно запрограммировать один дашборд с генератором и несколько разных схем для него.
• Интерфейс можно быстро обновить. Для этого не нужно переписывать программный код. Достаточно изменить несколько строк в файле схемы.
• Разные интерфейсы генерируются на основе одних и тех же компонентов. Можно сколько угодно раз использовать уже готовые элементы интерфейса в разных частях проекта или даже в разных проектах. Не нужно заново прописывать каждую форму или кнопку.
• В будущем снижается нагрузка на разработчиков. Использование схем — это часть подхода Low Code («меньше кода»). Он позволяет привлечь к созданию интерфейсов аналитиков, тестировщиков и других специалистов, которые напрямую не работают с кодом. Они смогут создавать и настраивать элементы интерфейса, если разберутся, по каким правилам строятся схемы.

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