Создание интерактивной карты офиса

^[1]За последние пару лет число сотрудников нашей компании увеличилось практически в три раза и сейчас приближается к трем сотням. Это влечет за собой некоторое количество организационных проблем. В частности, из-за того что компания занимает множество различных помещений в бизнес-центре, остро встает вопрос ориентирования сотрудников (особенно это касается новичков) в офисном пространстве.

Ежедневно мы сталкиваемся с проблемой «Как найти в офисе Васю?» или, наоборот, мучаемся вопросом «Как зовут парня, который сидит в том углу?». В итоге пара энтузиастов решила положить этому конец. Так началась история разработки интерактивной карты нашего офиса. Об этом мы сегодня и расскажем.

Задумка карты родилась около года назад, а разработка ведется с перерывами, поскольку делается это, в основном, в нерабочее время, «чисто для фана». Однако уже сейчас карта делает жизнь в офисе значительно проще. На данный момент она выглядит вот так.

Разработчики изначально предполагали следующие сценарии использования карты.

1. Поиск рабочего места коллеги. Есть строка для поиска, туда «вбивается» фамилия нужного коллеги (можно искать и по имени, но уж слишком много у нас тезок), и на карте показывается местоположение его рабочего места.
2. Идентификация. Если человек недавно работает в какой-то комнате и еще не успел выучить имен соседей, он может найти свою комнату на карте и, кликнув на определенный стол, узнать имя того, кто его занимает.
3. Навигация. Порой объяснить, где именно в офисе ты сидишь задача непростая. Чтобы облегчить ее, предполагалось реализовать возможность отправлять ссылку на свое местоположение — http://portal.yourdomain.ru/map#username ^[2]. При клике на нее карта прокручивается к нужному этажу и помещению, показывая искомое рабочее место.

На данный момент реализованы все три сценария.

Делать карту изначально решили с использованием API Яндекс.Карт. Все, что требовалось от карты, API Яндекс.Карт позволял: загрузить свое изображение, сделать базовую работу с картой («зум», перемещение) и реализовать работу с объектами на карте. В качестве средства совместной работы над проектом изначально было выбран Dropbox, поскольку изменения в коде происходили нечасто. Сперва казалось, что нужна система контроля версий, однако в дальнейшем необходимость в ней отпала. Сейчас разработку ведет один человек.

В итоге карта должна была быть размещена на корпоративном портале.

Трудности

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

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

Разработка

Изначально нанесение данных на карту производилось вручную. Сначала с корпоративного портала скачивался Excel-файл со списком всех сотрудников (с того этажа, для которого был план), который затем конвертировался в CSV с нужными полями: фамилия, имя, должность, электронный адрес сотрудника. После этого в CSV-файл дописывались координаты стола на карте. Этот файл играл роль базы данных, из которой по Python-скриптом формировался JavaScript-массив с данными о пользователях.

Поскольку карта была реализована в статическом варианте, просматривать ее можно было только в режиме read-only; возможность «переезда» сотрудника с места на место изначально не учитывалась.

Новая карта

После того как первая версия была выпущена, и мы начали собирать «хотелки» коллег, «Яндекс» существенно обновил свой картографический API. Делать новую версию мы решили уже с переездом на API версии 2.0.

Пришлось разбираться с ним и делать новую версию карты. В итоге удалось реализовать следующие обновления.

1. Добавились недостающие этажи: мы самостоятельно нарисовали схемы для нужных этажей, после чего добавили их на карту.
2. Изменили работу со столами и сотрудниками, разделив понятия «сотрудник» и «стол». Раньше связь «стол — сотрудник» была жесткая, и чтобы поменять двух коллег местами, нужно было физически двигать столы на карте. Сейчас достаточно указать, что за столом сидит другой человек: столы двигать не придется.
3. Кроме того, заметно упростился сам механизм работы со столами: мы отказались от статической карты и сделали простое веб-приложение. Это позволило автоматически сохранять положение столов и положение коллег за столами.
4. В новом API работа карты не привязана к домену, что позволяет организовать работу на двух (или больше) доменах (не только portal.yourdomain.ru/map ^[3], но и portal/map ^[4]).

Планы

Работа над улучшением карты не останавливается, идей много. Вот самые интересные из них.

1. Добавление новых сущностей. В офисе есть много интересных вещей: столовые, кофемашины, «переговорки», места для стендап-митингов… Было бы полезно нанести все это на карту.
2. Интеграция карты с Active Directory и Exchange позволила бы реализовать массу полезных функций. Было бы интересно подкачивать данные о сотруднике из Exchange (например, его расписание). Совместив данные расписания сотрудника с графиком занятости переговорных комнат, можно отображать на карте информацию о рабочем месте сотрудника (на месте ли он, и если нет, то в какой из «переговорок» его искать; это было бы особенно полезно в случае с руководителями).

Вот так интересный сайд-проект группы энтузиастов внутри компании вырастает в сервис, полезный каждому сотруднику. Кстати, проект отлично переносится и масштабируется, что особенно актуально для нашей компании в преддверии переезда в новый офис. Чтобы запустить карту на новом месте нужно будет всего лишь загрузить новый план этажей и заново «рассадить» сотрудников.

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

Кстати, авторы и разработчики карты присутствуют на Хабре: вот ^[5] и вот ^[6].

Автор: ptsecurity