Как мы за два дня разработали приложение для навигации по Эрмитажу

И выиграли с ним хакатон «ВКонтакте».

Рассказывает команда digital-агентства Nimax.

Хакатон «ВКонтакте» — соревнование для разработчиков по созданию новых продуктов и решению проблем в уже существующих. Отборочный тур прошли 320 человек из 100 команд. У всех 40 часов на решение своей задачи.

Каждые несколько дней в группе хакатона публиковали по одному кейсу компании-партнера: Selectel, «Тинькофф банк», Эрмитаж, КАФ, Третьяковская галерея, институт ЮНЕСКО, «Лентач». Мы выбрали Эрмитаж, потому что решать для него задачу интересно и социально значимо. А еще мы из Петербурга.

Задача звучала так: «оптимизировать посещение Эрмитажа во времени и пространстве». В Петербурге все стояли в очередях в Зимний дворец.

Мы придумали и разработали веб-приложение «Свободный Эрмитаж», которое помогает посетителям и экскурсоводам с небольшими группами ориентироваться в здании и конкретных залах, а также выбирать оптимальный маршрут путешествия по музею.

Мы сформулировали проблемы пользователей и к каждой предложили решение:

Мы не знаем, сколько людей ждет снаружи, но зато в курсе, сколько людей, когда и через какие турникеты входят в музей. Эти данные логируются на сервере — Эрмитаж готов их передавать. Так мы просчитываем время и говорим людям, сколько им ждать. Понятное дело, информация точна не на 100%, но она есть, и схема работает.

При регистрации заявки на хакатон нужно было описать концепцию будущего продукта. Ее мы продумали за две недели до хакатона, тогда же набросали прототипы. Для этого нужно было понять цель и задачи. Если этого не сделать, уже на самом хакатоне можно потратить два дня только на разговоры и ничего не реализовать. Идти нужно с готовой идеей. Наша — построить уникальные маршруты для каждого пользователя.

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

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

Мы выбрали своей целевой аудиторией посетителей, которым важно обойти не весь Эрмитаж, а взглянуть на главные экспонаты. Им нужно дать такой объем информации, который их устроит, но не утомит. А еще сократить время их пребывания в здании.

Заранее мы не программировали, не рисовали и не верстали. Только продумывали, как нам построить маршрут и зачем это нужно.

Утром перед хакатоном составили план. Разметили все четко по часам, чтобы понимать, сколько времени у нас остаётся с учетом ужинов, завтраков, обедов, лекций и сна. Не 40 часов. План помог сориентироваться и организоваться в самом начале — до восьми утра следующего дня шли даже с небольшим опережением, забыли про сон. Но потом все-таки не выдержали и уснули. Дальше на план смотрели реже, поскольку основные блоки закончились, а следующие действия были прозрачны и укладывались у каждого в голове.

Разработку начали с проектирования базы данных. Определили сущности и связи между ними, предварительно заполнили таблицы в базе небольшим количеством данных, чтобы использовать их чуть позже. Сущности — экспонаты, комнаты, маршруты. Нам нужно было понять, как связать между собой комнаты и как из одной переходить в другую.

Дизайн и подготовка архитектуры проекта на фронтенде шли параллельно. В это же время на бэкенде мы написали первый пробный алгоритм определения кратчайшего и оптимального пути для пользователя на основании входных данных. Сразу начали проверять гипотезу. Находится оптимальный путь или нет?

Чтобы проработать концепцию построения маршрутов, взяли карту первого этажа Эрмитажа — понимали, что все не успеем.

Пока дизайнер рисовал макет, фронтендер верстал, а бэкендер думал над алгоритмами, менеджер отрисовал в Adobe Illustrator контур карты со всеми комнатами. Менеджер разметил на SVG-карте номера залов и отметил их точками, чтобы фронтенд-разработчик смог определить, какая точка за какой зал отвечает. После отрисовал все пути между комнатами: от 65 до 63, 55, 64, 53. Нужно было проработать все состояния. Их получилось много, но это позволило на фронтенде визуально построить направляющую через любую комнату, путь которой определится на программировании. Сэкономили время дизайнера — он сконцентрировался на важном.

Пару слов про выбор технологического стека. Веб выиграл по нескольким причинам:

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

Мы поставили условие: длительность маршрута не должна сильно отличаться от человека к человеку. А из-за того, что первый этаж Эрмитажа похож на букву «П», иногда строились безумные маршруты — человеку пришлось бы возвращаться туда-сюда несколько раз. Эту ошибку исправляли в шесть утра второго дня хакатона.

Поиск по экспонатам сделать не успели. Сейчас многие экспонаты не соответствуют тому залу, который указан на сайте, а комнаты — своему названию. Но суть от этого не меняется: когда мы подставим реальные данные, все встанет на свои места. Первая рабочая версия готова.

Не обошлось без ошибок и проблем. Уже обнаружили несколько на тепловой карте «Яндекс.Метрики». Например, в некоторых местах пользователи принимают текст за кнопку, а еще не пользуются предпросмотром маршрута на карте. Будем править.

Работу над проектом хотим продолжить, сейчас ведем переговоры с Эрмитажем.

Планирование происходило единожды и не корректировалось во время хакатона. Изначально оно помогло понять, где можно запараллелить процесс и определить основные этапы передачи от специалиста к специалисту.

План помог вовремя сказать «стоп» и не начинать новый этап работ, чтобы не оставить проект недоработанным. Мы отправили все материалы за час до конца подачи работы и со спокойной совестью легли подремать.

Хотели сделать больше, но времени не хватило. Не успели реализовать социальную составляющую, проработанную на этапе дизайна: не добавили лайки на страницу просмотра зала с экспонатами — планировали на их основе собирать новые популярные маршруты и рекомендовать их друзьям через API «ВКонтакте». Пришлось отказаться от построения маршрутов до туалетов и кафе — связку этих залов отразили в базе данных, оставалось вывести на фронтенде.

Это был наш первый хакатон — мы не понимали, на чем нужно сделать акцент и как сработают другие команды. Некоторые успели напрограммировать в четыре раза больше, чем мы. Но у них было в четыре раза больше программистов.

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