Всем привет! Меня зовут Артём, я разработчик в команде Operations & Support Tools. Наша команда занимается разработкой программного обеспечения для взаимодействия поддержки с пользователями, с целью решения любых проблем, которые могут возникнуть у пользователей.
В прошлый раз один из моих коллег рассказал, как в нашей Платформе реализовано взаимодействие сервисов.
Те, кто пропустил эту статью, могут найти ее по адресу связь .
Сегодня я хочу рассказать о приложении, раскрывающем возможности Contract API с новой стороны.
Встречайте интерфейс контракта.
Что такое пользовательский интерфейс контракта и для чего он используется?
Переход приложений на использование строго формализованных контрактов позволил автоматизировать процессы, связанные с созданием документации по API, и упростил интеграцию приложений друг с другом.При этом контракты включают в себя достаточно информации: имена, типы и поля проверки при запросе и ответе из контракта, ссылку на документацию контракта и т.д. Это привело к следующему логическому шагу — разработке сервиса, который позволил бы нам генерировать административный интерфейс на основе коллекций контрактов и встроить сгенерированный интерфейс в любой из инструментов платформы.
Просим любить и жаловать: Contract UI (далее CUI) — веб-приложение, созданное в виде волшебного универсального гаечного ключа, призванного привести неидеальный мир UI различных приложений к, возможно, еще не идеальному, но единому миру UI. Чтобы более четко сформулировать возможности приложения, мне хотелось получить инструмент, который мог бы делать следующее:
- работать с Contract API для получения данных
- автоматически генерировать виджеты на основе структуры контракта
- позволить разработчикам настраивать основные элементы пользовательского интерфейса с помощью JS
- работать с правами пользователей и настраивать видимость для разных групп пользователей
- группировать виджеты для подключения в одном пакете
- иметь простой механизм интеграции с другими приложениями
- регистрировать действия пользователя
CUI состоит из двух ключевых частей: области администрирования и общедоступной части.
Административная область есть СПА , где собраны все инструменты для создания, хранения, редактирования, удаления виджетов и коллекций, настройки доступа, а также список доступных разрешений.
Публичная часть интегрирована в страницы приложения и отвечает за отрисовку виджетов на страницах.
Давайте пройдемся по каждому из них более подробно.
Кресло Уголок Диктатора
Как уже говорилось выше, CUI Admin — это страница для работы с виджетами.Давайте подробнее рассмотрим процесс создания виджетов.
Основные инструменты для создания виджетов
Создание виджета всегда начинается с выбора контракта, который будет отвечать на запросы нашего виджета и предоставлять данные.Сама структура контракта хранит достаточно информации, которую можно использовать для создания виджетов.
Давайте рассмотрим это на примере одного из тестовых контрактов.
Рисунок 1. Пример диаграммы контракта На рис.
1 показана диаграмма контракта, включающая четыре поля, три из которых обязательны для заполнения при запросе контракта.
Каждое из полей должно содержать поле «тип», которое позволяет определить тип элемента пользовательского интерфейса, который будет использоваться в виджете, прикрепить базовые проверки и сохранить окончательный тип, к которому при необходимости будет преобразовано значение.
перед отправкой его в контракт. Если указаны дополнительные поля, такие как максимальная/минимальная длина строкового значения, перечислены возможные параметры строкового значения и указано максимальное/минимальное значение для числовых значений, то эти условия также используются для проверки виджета.
поля.
Рисунок 2. Основные настройки при создании нового виджета Автоматически из контракта мы можем получить список полей (Параметры запроса), которые используются в качестве входных параметров при запросе контракта, название виджета и описание со ссылкой на документацию контракта, где можно просмотреть сам контракт. и уникальное имя (слаг) виджета, которое является уникальным полем для каждого виджета.
Любой из перечисленных параметров можно изменить по своему усмотрению.
Чтобы избавить пользователя от дополнительных кликов и переходов на другие страницы, мы также парсим сам контракт, разбивая его на блоки с шаблоном запроса, ответа и ошибки.
Как вы можете видеть на рисунке 2, пользователь также может настроить область действия для каждого виджета индивидуально, используя разрешения.
Чтобы обеспечить единый процесс работы с разрешениями пользователей, CUI может обращаться к API приложения, отвечающему за доступ пользователей.
Создатель виджета может установить столько разрешений, сколько ему нужно, в том числе ни одного (доступен только основной администратор).
Стоит отметить, что CUI умеет не только вытягивать список разрешений для пользователей, но и создавать и регистрировать собственные разрешения через интерфейс администратора.
Рисунок 3. Страница с настройками разрешений для виджетов После установки основных настроек пришло время перейти к основной части самого виджета.
Виджет состоит из 2-х частей — формы запроса и ответа.
Для корректной работы с договором нам необходимо заполнить и подтвердить форму Запроса, при этом данные отобразятся прямо на форме Ответа.
Исходя из этого, существует несколько типов виджетов:
- суперпростые виджеты, отображающие данные из контракта;
- простые формы с начислением пользователям игровых элементов, где пользователь заполняет форму, отправляет ее, получает информацию о результате операции, нажимает кнопку «Повторить» и т. д.;
- сложные виджеты, такие как таблицы журналов, где нет визуального разделения между формами запроса и ответа.
Рисунок 4. Пример простого виджета с информацией о премиуме на аккаунте
Рисунок 5. Пример простого виджета с начислениями
Рисунок 6. Пример виджета с журналами действий Чтобы облегчить жизнь пользователям, CUI автоматически создает виджеты на основе проанализированных данных контракта.
Рисунок 7. Формы создания виджетов и их предпросмотр В примере вы можете увидеть, как при выборе контракта генерировался интерфейс виджета.
В текущей реализации CUI генератор форм охватывает простые случаи, т. е.
создание формы с полями для ввода текста, чисел или раскрывающимися списками с вариантами выбора.
Если вам нужно добавить более сложную логику получения данных, использовать сторонние библиотеки, настроить сгенерированный UI или сформировать запрос в контракт с большими вложениями, то нужно привлекать разработчиков.
После завершения работы над созданием пользовательского интерфейса виджета и логики его работы пользователь может установить дополнительные настройки, позволяющие отключить/скрыть виджет, показать/скрыть заголовок виджета, а также сделать его сворачиваемым.
Рисунок 8. Дополнительные настройки виджета Настройки виджета и что они делают:
- Включено – делает виджет активным/неактивным.
Если флажок не установлен, виджет не будет отображаться на странице, на которую он добавлен;
- Показать заголовок — отображает/скрывает имя виджета при его отрисовке;
- Складной – позволяет свернуть или развернуть виджет при нажатии на его название;
- Логгирование и причина ведения журнала — обеспечивает протоколирование действий пользователя «из коробки».
Те.
Когда пользователь использует виджет и пытается выполнить запрос договора после заполнения формы, поверх виджета появляется окно, в котором необходимо указать номер задания и причину, по которой выполняется данное действие.
Список и группировка виджетов
Вкладка «Виджеты», показанная на рисунке 9, — это ваш репозиторий «Аллеи славы», где отображаются все созданные виджеты.На этой странице вы можете найти нужный вам виджет, перейти к редактированию любого из виджетов, удалить или создать коллекцию для отображения.
Рисунок 9. Страница списка виджетов Немного о коллекциях и группировке виджетов.
Коллекция — это абстрактная сущность, которая группирует виджеты и отвечает за их отображение в том порядке, в котором они перечислены в коллекции.
Для некоторых приложений, интегрирующихся с CUI, коллекции служат инструментом для добавления элементов на страницу и отображения самих виджетов.
Но сама концепция коллекций и то, как они работают, скорее всего, будут переработаны в будущих версиях CUI. Это связано с появлением концепции дашбордов для удобного управления наборами виджетов.
Рисунок 10. Пример коллекции с виджетами внутри
Публичная часть
Доделав виджет в первый раз со словами «Это мой шедевр» или переделав его в пятый раз со слезами на глазах и словами «Я это сделал» на губах, самое время вывести наш виджет на общественная часть.
Сейчас мы реализовали несколько методов отображения: полную интеграцию с CUI и подключение бандла к странице, а также использование Dashboard UI. Начнем со старой версии.
Подключение CUI через пакет
Первыми, кто внедрил интеграцию CUI, были Backyard и Zendesk. Каждое из этих приложений имело пользовательские страницы или части пользовательского интерфейса, где должны были располагаться виджеты.Для интеграции публичной части CUI с приложениями было придумано собирать CUI в JS-пакет (бандл) и подключать его к странице приложения.
Несомненным преимуществом этого метода была простейшая интеграция.
Все что нам нужно было один раз добавить в шаблон страницы скрипт с JS бандлом и контейнером, куда будет отправляться список коллекций и в который будет заходить CUI и вставлять свои виджеты.
Затем вся работа была передана самому CUI. Он взял сборы и начал подавать заявки на данные в договорах, а получив ответы, нарисовал виджеты на странице.
Рисунок 11. Пример виджетов на странице профиля игрока в WoT Шло время, игры развивались, добавлялись новые игровые механики, увеличивалось количество действий, которые можно совершать с учетными записями пользователей.
Вместе с играми выросло количество виджетов на страницах пользователей; они стали более сложными и большими по размеру.
Искать нужную информацию стало менее удобно; увеличилось время поиска необходимых виджетов; некоторые из них были доступны только по ссылке, что требовало отдельных кликов для получения интересующей информации.
Все эти моменты привели к желанию создать что-то, что могло бы удовлетворить следующие «хотелки»:
- настроить пользовательский интерфейс под себя;
- изменение размера виджетов;
- хватит писать код для подключения виджетов к странице.
Пользовательский интерфейс панели управления
Dashboard UI (далее DUI) — это специально разработанный инструмент, позволяющий создавать персональные информационные панели.Приложение было разработано для того, чтобы пользователи могли создавать на странице свой собственный фен-шуй, оформлять его так, как им удобно, задавать нужные размеры и т. д. Всю информацию, которая может отображаться на странице, DUI получает путем опроса API-интерфейсов приложения.
приложения, с которыми он интегрирован.
Одним из таких приложений является CUI. Одной из проблем, с которыми мы столкнулись при интеграции CUI с приложениями, была плохая масштабируемость элементов пользовательского интерфейса.
Те.
Расположение страниц некоторых приложений не позволяло нам размещать виджеты любого размера там, где мы хотели.
DUI помог решить эту проблему.
Он действует как прослойка между приложениями, хранящими виджеты, и приложениями, где эти виджеты необходимы.
DUI интегрируется в страницу приложения и с помощью HTTP API запрашивает другие приложения, чтобы получить список виджетов, которые могут отображаться на странице.
Рисунок 12.1. Пример отрисовки виджетов разного размера 
Рисунок 12.2. Пример отрисовки виджетов разного размера на разных уровнях Как видно из примеров, DUI позволил нам решить проблемы с размером и расположением виджетов на странице.
Все виджеты подтягиваются с помощью API, поэтому больше нет необходимости писать дополнительный код для отображения виджета на странице.
Среди дополнительных преимуществ, которые вы получили при оформлении DUI:
- возможность создавать приватные дашборды, недоступные никому, кроме их создателей;
- возможность создания нескольких информационных панелей для конкретных нужд пользователя;
- возможность добавлять дашборды в закладки, чтобы быстро найти их в списке других дашбордов
Промежуточные результаты и дальнейшее развитие
После всего вышесказанного хотелось бы отметить, что эксперимент оказался вполне успешным.CUI — это MVP реального приложения, требующий дальнейшей разработки.
Сама идея оказалась жизнеспособной и востребованной.
Сейчас CUI активно используется несколькими сервисами, отзывы собираются от конечных пользователей, которые работают напрямую с UI, без доступа к коду виджета, а также от команд интеграции и команд разработчиков, самостоятельно создающих собственные виджеты.
Среди недостатков текущего MVP можно выделить следующие моменты:
- автоматическая генерация виджетов работает с простыми контрактами, из-за чего разработчикам приходится тратить время на добавление более сложных структур, элементов и т. д.;
- принцип работы приложения по правилу «один контракт — один виджет», что не позволяет нам использовать несколько разных контрактов для динамического формирования фильтров форм «Запрос» и «Ответ».
- разнообразить количество элементов, которые можно добавить из коробки;
- добавить возможность проверки полей с помощью пользовательского интерфейса;
- сделать саму админку более глобальным узлом, из которого виджеты будут автоматически доставляться во все регионы.
-
Аппаратный Кейлоггер: Краткий Обзор
19 Oct, 24 -
Как Интроверт Стал Hr-Менеджером
19 Oct, 24 -
Конкурс «Интернет-Математика 2009»
19 Oct, 24 -
Приложения Linux В Windows? Легко!
19 Oct, 24
