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

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

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

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

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

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

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

Как готовились перед хакатоном

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

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

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

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

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

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

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

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

Что сделали на хакатоне

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

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

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

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

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

  • Нужно меньше времени на разработку.
  • Структура универсальна. В дальнейшем ее можно использовать для разработки полноценных мобильных приложений (React Native).
  • Низкий уровень вхождения. Достаточно зайти на сайт, а если сохранить приложение на домашний экран, оно перестанет отличаться от нативного.

Результат

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

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

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

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

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

Что нам помогло

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

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

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

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

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

0
20 комментариев
Написать комментарий...
Влад Цыплухин

Молодцы

Ответить
Развернуть ветку
Andrey S

могли бы поделиться кодом с читателем! Например ходят слухи, что потоки людей вы распределяете с помощью алгоритма под названием rand.
Интересно, что обозначили проблему "В Петербурге все стояли в очередях в Зимний дворец", но при этом ее не решаете.

Ответить
Развернуть ветку
Артём Шкуренко

Можем.

Алгоритм поиска маршрута: https://github.com/iseroukhov/hakaton/blob/master/classes/route.php

Построение маршрута: https://github.com/artshkurenko/hakaton/blob/master/source/Components/Map/Map.jsx

У нас есть использование rand для имитации данных о количестве вошедших посетителей. К сожалению, на самом мероприятии от Эрмитажа не было никаких входящих данных (хотя одна из команд взлома партнёров Эрмитажа и получила нужную информацию), но они фиксируются, как мы выяснили в процессе и в дальнейшем могут быть предоставлены.

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

Про проблему с очередью в Зимний дворец. Очередь возникает из-за переполнения самого здания. Мы сокращаем время прибывания, тем самым ускоряем очередь. Это было сказано в абзаце: «… А еще сократить время их пребывания в здании.» Плюс мы подсказываем нужный вход и информируем про пустой вход для посетителей с эл. билетом. Так-же была мысль, что когда люди узнают о существовании других корпусов (у нас это первый экран), они, возможно, примут решение в пользу них. Но эти мысли ни чем не подкреплены и нужно бы собрать статистику, получилось у нас это сделать или нет (скорее всего нет).

Ответить
Развернуть ветку
Aleksei Shabelskii

Нимаксы - молодцы!

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Alexey Sinelnikov

Нет, пока только сказали что круто

Ответить
Развернуть ветку
Shadlance Darking

«Пару слов про выбор технологического стека» - веб (React вероятно из контекста), так где «пара слов»?

«Достаточно зайти на сайт, а если сохранить приложение на домашний экран, оно перестанет отличаться от нативного» - не станет.

Ответить
Развернуть ветку
Артём Шкуренко

Да, косяк про «пару слов».

Не станет почему? Визуально отличий — нет. Есть в поведении элементов, но про это речь не шла.

Ответить
Развернуть ветку
Владимир

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

Ответить
Развернуть ветку
Dmitry Filippov

а как навигация внутри здания происходит?

Ответить
Развернуть ветку
Артём Шкуренко

Не совсем понял вопрос. На что опирается человек для ориентиров, когда идёт по маршруту?

Ответить
Развернуть ветку
Dmitry Filippov

Возможно не очень внимательно прочёл, вы в приложении отображаете карту с местоположением на ней человеком (как навигатор)? если да, то как происходит определение местоположения человека в здании? GPS?

Ответить
Развернуть ветку
Артём Шкуренко

Да, мы отображаем маршрут на карте.
http://share.artshkurenko.ru/Ermitazh__2017-11-01_18-43-47.png

Определяем человека по ближайшей картине или номеру зала, если он уже внутри. Если он только собирается войти, то по типу билета узнаём с какого входа он попадёт в здание.
http://share.artshkurenko.ru/Ermitazh__2017-11-01_18-46-02.png

По GPS нет смысла пытаться определить — в Эрмитаже плохо проходит сигнал. Как вариант установить датчики ibeacon, но на это нужен доп. бюджет, а мы против этого.

Ответить
Развернуть ветку
Saucedo Puetz

Зачем чувак покрасил волосы в зеленый цвет?!

Ответить
Развернуть ветку
Артём Шкуренко

Потому что могу.

Ответить
Развернуть ветку
Saucedo Puetz

это лечится?

Ответить
Развернуть ветку
Александр Айвазовский

Круто. Жду приложения

Ответить
Развернуть ветку
Александр Аббасов

Сомневаюсь, что после хакатона кто-то всерьез будет доделывать. Это бич хакатонов. Он закончился и все разбежались по своим делам :(

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Максим Федоров

крутяк :)

Ответить
Развернуть ветку
Alexandr Zhitkevich

Да просто просрали все дедлайны))) Я также иногда за два дня выдаю месячную норму, но это мой минус)

Ответить
Развернуть ветку
Артём Лисовский

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

Ответить
Развернуть ветку
17 комментариев
Раскрывать всегда