Navixy представляет новинку для персонализации платформы — Редактор меню. No-code инструмент позволяет настраивать пользовательский интерфейс, упрощая внедрение телематических решений и адаптируя их к конкретным потребностям отрасли. Решение превращает кастомизацию интерфейса в бесшовный процесс с легкой настройкой в визуальном редакторе.
Обновление интерфейса и кастомизация
Перед релизом нового инструмента мы обновили интерфейс для всех пользователей Navixy. Учли современные рекомендации по дизайну и мировые практики UX/UI, что отражается во внешнем виде боковой панели и вкладок. Основные функциональные разделы теперь сгруппированы в верхней части слева, а выпадающие элементы бокового меню заменены вкладками внутри разделов.
Для кастомизации пользовательских интерфейсов и более гибкой настройки в Navixy разработали специальный инструмент — редактор меню, который позволяет администраторам платформы изменять боковую панель и вкладки без программирования.
«Редактор меню — это прорыв для системных интеграторов и поставщиков телематических услуг. Он обеспечивает непревзойденную гибкость, ускоряет внедрение решений и упрощает переход с других платформ. Этот инструмент — важнейший шаг в нашей миссии по демократизации телематики, упрощающий создание и кастомизацию платформ».
Денис Демяников, вице-президент по управлению продуктами Navixy
Основные возможности редактора меню
Мы разработали редактор меню, чтобы улучшить удобство веб-интерфейса и усовершенствовать навигацию. Инструмент добавлен в панель администратора для предоставления следующих возможностей:
- Выбор: добавляйте в боковое меню только нужные разделы и вкладки.
- Сортировка: перетаскивайте элементы, чтобы изменить их порядок для более быстрого доступа.
- Переименование: задавайте собственные названия разделам, адаптируйте их под специфику отрасли.
- Группировка: размещайте связанные пункты в одном разделе, чтобы упростить навигацию.
Редактор меню позволяет гибко управлять настройками интерфейсов:
- Создавать шаблоны интерфейсов и назначать их пользователям.
- Устанавливать шаблон по умолчанию: созданный интерфейс будет автоматически применяться ко всем новым пользователям платформы.
Новое решение — шаг Navixy к более функциональной экосистеме с акцентом на надежный набор инструментов для кастомизации и интеграции.
Стек технологий редактора меню
При разработке редактора меню мы использовали современный технологический стек, чтобы гарантировать надежность функционала и интуитивно-понятное взаимодействие с инструментами. Было важно создать решение, которое отвечает текущим требованиям, а также масштабируется и адаптируется для будущих улучшений.
Для фронтэнда использовали 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. Техобслуживание – вкладка меню
С точки зрения визуального редактора, меню будет организовано следующим образом:
Как меню будет структурировано на стороне бэкэнда, читайте в полной версии статьи.
Возможности API для редактирования меню
API расширяет возможности Редактора меню при массовых операциях, сокращая время и усилия, необходимые для администрирования и обслуживания системы.
Настроить меню по API. Системные интеграторы и разработчики могут быстро кастомизировать интерфейс под потребности клиентов с помощью API, не используя интерфейс редактора меню, что ускоряет процесс настройки.
Внести массовые изменения. API также помогает в последующих настройках платформы, особенно при массовом добавлении пользователей. Например, при миграции с других платформ API позволяет обновить настройки меню для всей пользовательской базы, поддерживая узнаваемость и обеспечивая плавный переход.
Редактор меню Navixy уже доступен для кастомизации интерфейса
Понятный пользовательский интерфейс и легкая настройка чрезвычайно важны для эффективных телематических IoT платформ. Несмотря на простоту использования, редактор меню открывает широкие возможности для создания и интеграции пользовательских приложений, подключения новых расширений и плагинов из Маркетплейса.
Это no-code решение не только повышает гибкость и ускоряет развертывание, но и значительно улучшает пользовательский опыт. Новинка — важный шаг на пути к полностью интегрированной экосистеме Navixy.
Читайте полную версию статьи на нашем сайте.