Редактор меню: no-code решение Navixy для кастомизации пользовательских интерфейсов
Navixy представляет новинку для персонализации платформы — Редактор меню. No-code инструмент позволяет настраивать пользовательский интерфейс, упрощая внедрение телематических решений и адаптируя их к конкретным потребностям отрасли. Решение превращает кастомизацию интерфейса в бесшовный процесс с легкой настройкой в визуальном редакторе.
Обновление интерфейса и кастомизация
Перед релизом нового инструмента мы обновили интерфейс для всех пользователей Navixy. Учли современные рекомендации по дизайну и мировые практики UX/UI, что отражается во внешнем виде боковой панели и вкладок. Основные функциональные разделы теперь сгруппированы в верхней части слева, а выпадающие элементы бокового меню заменены вкладками внутри разделов.
Обновленный дизайн меню на платформе Navixy: лаконичная боковая панель и горизонтальные вкладки в разделах
Для кастомизации пользовательских интерфейсов и более гибкой настройки в Navixy разработали специальный инструмент — редактор меню, который позволяет администраторам платформы изменять боковую панель и вкладки без программирования.
«Редактор меню — это прорыв для системных интеграторов и поставщиков телематических услуг. Он обеспечивает непревзойденную гибкость, ускоряет внедрение решений и упрощает переход с других платформ. Этот инструмент — важнейший шаг в нашей миссии по демократизации телематики, упрощающий создание и кастомизацию платформ».
Денис Демяников, вице-президент по управлению продуктами Navixy
Основные возможности редактора меню
Мы разработали редактор меню, чтобы улучшить удобство веб-интерфейса и усовершенствовать навигацию. Инструмент добавлен в панель администратора для предоставления следующих возможностей:
- Выбор: добавляйте в боковое меню только нужные разделы и вкладки.
- Сортировка: перетаскивайте элементы, чтобы изменить их порядок для более быстрого доступа.
- Переименование: задавайте собственные названия разделам, адаптируйте их под специфику отрасли.
- Группировка: размещайте связанные пункты в одном разделе, чтобы упростить навигацию.
Редактор меню позволяет гибко управлять настройками интерфейсов:
- Создавать шаблоны интерфейсов и назначать их пользователям.
- Устанавливать шаблон по умолчанию: созданный интерфейс будет автоматически применяться ко всем новым пользователям платформы.
Новое решение — шаг Navixy к более функциональной экосистеме с акцентом на надежный набор инструментов для кастомизации и интеграции.
Как работать с редактором меню
В этом разделе собрали справочную информацию, как работать с редактором меню, чтобы вы могли получить всю нужную информацию сразу. Если хотите сначала ознакомиться с возможностями нового инструмента, к этой главе можно вернуться позже.
Доступ к редактору
Редактор меню находится в панели администратора. Чтобы начать работу, перейдите в раздел «Настройки площадки» → «Настройки сервиса» и выберите вкладку «Редактор меню».
Интерфейс редактора разделен на три основные секции:
- Шаблоны: отображает список существующих шаблонов меню. По умолчанию в него входит стандартный шаблон от Navixy.
- Назначено: показывает список пользователей, для которых установлен выбранный шаблон.
- Визуальный редактор: позволяет переставлять и переименовывать элементы, а также мгновенно просматривать, как боковая панель и вкладки будут выглядеть для конечных пользователей.
Создание нового шаблона меню
Для создания нового шаблона нажмите на плюс. Появится всплывающее окно, где можно ввести название. Шаблон будет пустым, но вы можете скопировать уже существующий, чтобы начать работу с заранее настроенным набором элементов.
Если вы хотите установить шаблон по умолчанию для всех новых пользователей платформы, выберите иконку звезды. Только один вариант меню может быть отмечен как шаблон по умолчанию, и его нельзя удалить.
Редактор меню отображает все шаблоны. Звездой отмечен шаблон по умолчанию
Работа с новым шаблоном
Чтобы персонализировать меню, перетаскивайте элементы, добавляя, удаляя и переставляя их по своему усмотрению. Вы также можете переименовать пункты меню в соответствии с принятой терминологией у клиентов. Пункты можно размещать в верхней или нижней части боковой панели по своему выбору. При создании нового пункта в боковом меню можно также добавить горизонтальные вкладки, объединив тем самым инструменты в одном разделе.
В Редакторе меню легко настроить расположение пунктов и объединять решения в группы по своему усмотрению
Назначение шаблонов для пользователей
Для различных пользователей можно задавать разные шаблоны — это позволит адаптировать решение к бизнесу клиентов. При выборе шаблона в пункте «Назначено» отображаются все пользователи и их ID, для которых действует этот шаблон.
Выбрав один из шаблонов, можно посмотреть, каким пользователям они назначены
Группу пользователей можно редактировать в любое время. Также, если вы отредактируете шаблон, все сохраненные изменения автоматически отобразятся для выбранных пользователей.
Стек технологий редактора меню
При разработке редактора меню мы использовали современный технологический стек, чтобы гарантировать надежность функционала и интуитивно-понятное взаимодействие с инструментами. Было важно создать решение, которое отвечает текущим требованиям, а также масштабируется и адаптируется для будущих улучшений.
Для фронтэнда использовали Vue 3 — последнюю итерацию популярного JavaScript-фреймворка для разработки пользовательских интерфейсов. Vue 3 обладает рядом преимуществ, включая улучшенную реактивность, более высокую производительность и современную эстетику.
Для перехода с Vue 2 на Vue 3 мы разработали собственную библиотеку компонентов для перетаскивания элементов при редактировании, чтобы обеспечить бесперебойную и интуитивно понятную работу. Несмотря на сложности, Vue 3 — стратегический выбор, позволяющий упростить поддержку кода и ускорить разработку в целом.
Для управления ранее разработанными продуктами используется микросервисная архитектура, которая позволяет создавать новинки с использованием современных технологий. Мы разработали оболочку приложения, которая интегрирует компоненты Vue 3 в среду Vue 2 и наоборот, что способствует постепенному и контролируемому обновлению фреймворка.
Настройка меню: визуальный редактор и бэкенд
Структура меню отображается в формате JSON. Мы внедрили новые API вызовы для управления шаблонами меню и назначения их пользователям.
В структуре меню используются четыре ключевые сущности:
- Шаблон меню (Menu preset): предустановленный набор пунктов меню на боковой панели и вкладках.
- Группа (Menu group): набор пунктов меню, сгруппированных вместе на боковой панели. Название группы также можно изменять.
- Элемент (Menu item): отдельный пункт меню.
- Вкладка меню (Menu tab): горизонтальные вкладки внутри каждого отдельного элемента меню.
Для примера представьте боковую панель со следующими пунктами и вкладками:
- Главное – название группы в меню
a. Мониторинг – элемент меню
b. Гео-ссылки – элемент меню - Управление автопарком – название группы в меню
a. Транспорт – элемент меню
i. Гаражи – вкладка меню
ii. Техобслуживание – вкладка меню
С точки зрения визуального редактора, меню будет организовано следующим образом:
На стороне бэкэнда меню будет структурировано следующим образом — мы приводим фрагмент JSON файла, описывающий этот шаблон:
{
"preset": {
"id": 100,
"title": "Шаблон меню",
"main": [
{
"title": "Главное",
"items": [
{
"title": "common.menu.tracking",
"icon": "",
"tabs": [
{
"title": "common.menu.tracking",
"destination": "tracking"
}
]
},
{
"title": "common.menu.location-sharing",
"icon": "",
"tabs": [
{
"title": "common.menu.location-sharing",
"destination": "location_links"
}
]
}
]
},
{
"title": "Управление транспортом",
"items": [
{
"title": "common.menu.vehicles",
"icon": "",
"tabs": [
{
"title": "common.menu.vehicles",
"destination": "fleet"
},
{
"title": "common.menu.garages",
"destination": "garages"
},
{
"title": "common.menu.service_tasks",
"destination": "service_tasks"
}
]
}
]
}
],
"footer": {
"title": "",
"items": []
}
},
"owner": "dealer",
"assignments": []
}
Возможности API для редактирования меню
API расширяет возможности Редактора меню при массовых операциях, сокращая время и усилия, необходимые для администрирования и обслуживания системы.
Настроить меню по API. Системные интеграторы и разработчики могут быстро кастомизировать интерфейс под потребности клиентов с помощью API, не используя интерфейс редактора меню, что ускоряет процесс настройки.
Внести массовые изменения. API также помогает в последующих настройках платформы, особенно при массовом добавлении пользователей. Например, при миграции с других платформ API позволяет обновить настройки меню для всей пользовательской базы, поддерживая узнаваемость и обеспечивая плавный переход.
Для настройки меню мы ввели несколько новых API вызов:
list: перечисляет все доступные шаблоны меню с указанием, каким пользователям они назначены.create: позволяет создавать новые шаблоны меню, требуя в качестве параметра новую структуру шаблона.update: обновляет готовый шаблон меню, требуя новую структуру с идентификатором существующего шаблона, который должен быть изменен.delete: удаляет существующие шаблоны меню, требуя их ID.assign: назначает шаблоны пользователям, для чего требуется ID шаблона и идентификаторы пользователей.items/list: перечисляет все доступные пункты меню, позволяя пользователям видеть, какие пункты могут быть включены в шаблон меню.
Полный список вызовов API, а также коды ошибок и их описания можно найти в [документации для разработчиков]https://www.navixy.com/docs/navixy-api/panel-api/resources/user/preset).
Редактор меню Navixy уже доступен для кастомизации интерфейса
Понятный пользовательский интерфейс и легкая настройка чрезвычайно важны для эффективных телематических IoT платформ. Несмотря на простоту использования, редактор меню открывает широкие возможности для создания и интеграции пользовательских приложений, подключения новых расширений и плагинов из Маркетплейса.
Это no-code решение не только повышает гибкость и ускоряет развертывание, но и значительно улучшает пользовательский опыт. Новинка — важный шаг на пути к полностью интегрированной экосистеме Navixy.
Свяжитесь с нашими менеджерами, чтобы уточнить детали и подключить редактор меню.