Дай знать, где ты находишься: как мы разработали навигатор по Эрмитажу
Эрмитаж — это настоящий портал в мир искусства, в котором неподготовленный любитель прекрасного может потеряться и выбиться из сил в попытках найти конкретный экспонат, а возможно и просто выход на улицу. Это не шутки, в Эрмитаже больше 360 залов, в которых расположено около 3 млн экспонатов. Плутать и культурно обогащаться можно бесконечно долго. Поэтому современное приложение для ориентации в пространстве Эрмитажа — это был просто мастхэв 21 века.
Приложение под названием «Аудиогид», конечно, существовало, но было больше похоже на экспонат античного зала музея. Оно уже трудно поддерживалось гаджетами, не было версии для Android, имело хилый UX‑дизайн — в общем вся та боль, которая сопровождает приложения, разработанные в 2000-х годах.
На входе мы имели только то самое старое приложение и пожелания заказчика. Четкого ТЗ на руках не было. Поэтому для начала мы совместными усилиями сформулировали задачи, в частности, определили, какие функции должны выполнять приложение (для пользователя) и админка (для заказчика). Стало очевидно, что проще и дешевле сделать все заново, а не переписывать предыдущую версию.
Особенности проекта
Мы бодро приступили к работе, но через некоторое время грянули санкции, которые затронули сферу IT в том числе.
Некоторые варианты, которые мы планировали в начале сотрудничества, оказались невозможны, и нам пришлось быстро искать новые пути решения задач. Главным челенджем для нас стала навигация по музейному комплексу, так как готовых хороших решений на рынке не было. Второй, уже значительно более простой вызов, — это внедрение платежной системы. С остальными задачами мы расправились в рабочем режиме.
В итоге собрали абсолютно независимое от мировой конъюнктуры приложение, которое работает исключительно на отечественных сервисах, и никакие санкции ему не страшны.
Навигация
Главная фишка приложения «Аудиогид» — интерактивная карта двух крыльев Эрмитажа: «Зимний дворец» и «Здание Главного штаба». Изначально мы планировали использовать зарубежные библиотеки работы с картами, но этот вариант стал недоступен.
Из исходных материалов на руках была только бумажная карта. Мы приняли решение разметить все залы как отдельные сущности через SVG и отрисовать все возможные переходы между ними в виде графа.
Мобильное приложение запускает Javascript‑код, который на SVG‑файле подсвечивает нужные переходы. А сам кратчайший путь ищется при помощи алгоритма Дейкстры.
Данное решение также дает возможность «включать» и «отключать» залы на карте, когда в этом есть необходимость, например, подготовка к новой выставке. Маршруты перерисовываются соответственно.
Приложение обновляется в фоновом режиме. Это необходимо, в частности, в том случае, когда определенный зал или экспонат становится недоступен для посетителей по какой‑либо причине. Через заданный интервал API синхронизируется. Отправляется запрос на сервер и проверяется контрольная сумма. Если есть какое‑то разночтение, скачивается обновленный пакет данных. Пользователю это не доставляет никаких проблем, он вообще этот процесс не замечает.
Редактура (админка)
Простая в использовании админка — это было одно из главных требований заказчика. Потому что раньше для того, чтобы добавить новый экспонат, надо было задавать координаты: этаж, комнату, сколько метров от угла комнаты и так далее. Это было очень неудобно и отнимало много времени.
Мы реализовали эту задачу опять же через карту. Теперь достаточно кликнуть мышкой в нужное место, появляется возможность прикрепить аудиодорожку, фото и текст. По сути, это одна карта и на фронте, и в бэкенде. Принцип все тот же: SVG‑файл с детальной отрисовкой каждого зала.
Мы не сразу пришли к этому решению, изначально было не очень понятно, как корректно было бы редактировать карту, переносить или двигать экспонаты.
Админка мобильного приложения написана на фреймворке Vue.js и является частью бэкэнда laravel. К монолитной части, которая отвечает за сайт Эрмитажного магазина, прикреплена редактура приложения, чтобы заполнять базу данных и управлять контентом. Туда же прикручено несколько разделов, через которые можно редактировать контент аудиогида Эрмитажа. Таким образом редактура работает на два бэкэнда: редактирует записи сайта и аудиогида чрез разные разделы.
Важный момент — приложение работает в оффлайне. В Эрмитаже есть слепые зоны, куда не добивает интернет. При этом оно не ест много места в телефоне — удельный вес всего 174 МБ.
Также мы реализовали стандартный функционал аудиогида — прослушивание лекций, просмотр фото и т. д. В приложении доступны 10 экскурсий, 2 из которых бесплатные.
И конечно же, аудиогид Эрмитажа теперь доступен на всех операционках — и iOS, и Android.
Проект запущен и успешно функционирует (Android / iOS).
А что по результатам?
По последним данным, за год работы приложения уже больше 63 тыс. загрузок, и на 50% выросли продажи экскурсий.
Habrahabr.ru прочитано 2784 раза
