Найти тему
Navixy

Редактор меню: no-code решение Navixy для кастомизации пользовательских интерфейсов

Navixy представляет новинку для персонализации платформы — Редактор меню. No-code инструмент позволяет настраивать пользовательский интерфейс, упрощая внедрение телематических решений и адаптируя их к конкретным потребностям отрасли. Решение превращает кастомизацию интерфейса в бесшовный процесс с легкой настройкой в визуальном редакторе.

Обновление интерфейса и кастомизация

Перед релизом нового инструмента мы обновили интерфейс для всех пользователей Navixy. Учли современные рекомендации по дизайну и мировые практики UX/UI, что отражается во внешнем виде боковой панели и вкладок. Основные функциональные разделы теперь сгруппированы в верхней части слева, а выпадающие элементы бокового меню заменены вкладками внутри разделов.

Обновленный дизайн меню на платформе Navixy: лаконичная боковая панель и горизонтальные вкладки в разделах
Обновленный дизайн меню на платформе Navixy: лаконичная боковая панель и горизонтальные вкладки в разделах

Для кастомизации пользовательских интерфейсов и более гибкой настройки в 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): горизонтальные вкладки внутри каждого отдельного элемента меню.

Для примера представьте боковую панель со следующими пунктами и вкладками:

  1. Главное – название группы в меню
    a. Мониторинг – элемент меню
    b. Гео-ссылки – элемент меню
  2. Управление автопарком – название группы в меню
    a. Транспорт – элемент меню
    i. Гаражи – вкладка меню
    ii. Техобслуживание – вкладка меню

С точки зрения визуального редактора, меню будет организовано следующим образом:

-4

Как меню будет структурировано на стороне бэкэнда, читайте в полной версии статьи.

Возможности API для редактирования меню

API расширяет возможности Редактора меню при массовых операциях, сокращая время и усилия, необходимые для администрирования и обслуживания системы.

Настроить меню по API. Системные интеграторы и разработчики могут быстро кастомизировать интерфейс под потребности клиентов с помощью API, не используя интерфейс редактора меню, что ускоряет процесс настройки.

Внести массовые изменения. API также помогает в последующих настройках платформы, особенно при массовом добавлении пользователей. Например, при миграции с других платформ API позволяет обновить настройки меню для всей пользовательской базы, поддерживая узнаваемость и обеспечивая плавный переход.

Редактор меню Navixy уже доступен для кастомизации интерфейса

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

Это no-code решение не только повышает гибкость и ускоряет развертывание, но и значительно улучшает пользовательский опыт. Новинка — важный шаг на пути к полностью интегрированной экосистеме Navixy.

Читайте полную версию статьи на нашем сайте.