Language switcher

Light

Dark

Що таке Rename.kr.ua

Для Onix-Systems Rename.kr.ua – внутрішній некомерційний проєкт. На момент старту над ним працювала невелика команда: 

  • Богдан Стасюк – співавтор ідеї, підготовка інформації про перейменування
  • Дмитро Дурач – співавтор ідеї, моральна підтримка проєкту
  • Максим Сінченко – підготовка інформації про вулиці
  • Сергій Холін – менеджмент
  • Костянтин Алтухов – розробка
  • Костянтин Свідзінський – дизайн.

Однією з ідей проєкту є відкритість даних. Рушій сайту є в загальному доступі, його можна скопіювати та створити такий проєкт для свого міста. Також на сайті є API, до якого можна звернутися й отримати всі ці перейменування у вигляді JSON файлу, щоб за потреби використовувати їх в інших сервісах.

Як усе було


Історія створення сайту Rename.kr.ua почалася, відколи в Україні стартували процеси декомунізації. По ходу розгортання перейменувань вулиць та об’єктів міської географії, ставало дедалі важче слідкувати за змінами. Водночас картографічні сервіси теж не встигали відстежувати й вірно показувати назви вулиць чи знаходити потрібні адреси.

Першими, хто зрозумів, що потрібно створити такий онлайн-довідник, стали дніпряни. Вони створили сайт Rename.dp.ua, після того, як 2015 році міська влада прийняла рішення перейменувати одразу понад триста топонімічних об’єктів за кілька днів.

На той час у ще Кіровограді цей процес лише розпочинався. Тому Богдан Стасюк, котрий захоплювався краєзнавством, спільно з Дмитром Дурачем, CEO Onix-Systems, вирішили створити подібний сервіс для нашого міста.

Дмитро познайомив Богдана із Сергієм Холіним, COO Onix-Systems, який взяв на себе обов’язки менеджера цього проєкту. Богдан Стасюк забезпечував контент. У цьому йому допомагав Максим Сінченко, котрий, за його словами, робив наймаруднішу роботу – шукав інформацію про тих, на честь кого були перейменовані вулиці. Розробкою займався Костянтин Алтухов, дизайном – Костянтин Свідзінський.

24 лютого 2016 року створили репозиторій та почали роботу над сайтом. Розробка зайняла один місяць, – розповів Сергій Холін, – на той момент компанія була набагато меншою, тому наших двох Костянтинів розділяло буквально кілька столів.

Оскільки сайт є довідником і становить собою один великий список, його треба було візуально “полегшити”, – пояснив Максим Каменщиков,  Арт Директор Onix, – В UI-дизайні цього вдалося досягнути за допомогою кольорів та шрифтів, а також додавши “повітря” між елементами. З боку UX вирішили додати пошук та алфавітний порядок, щоб людина, котра не пам’ятає повної назви вулиці, могла вказати лише першу літеру й швидко знайти потрібну адресу. Головним для цього сайту було два критерії: зручність споживання такого контенту й відтворення атмосфери Кропивницького.

Rename.kr.ua 2.0


Велика хвиля декомунізації вулиць тривала близько півтора року. Весь цей час сайт активно наповнювався та користувався популярністю в містян. Коли процес перейменувань сповільнився, сайт існував сам собою. Лише інколи виникала потреба в підтримці.

Та на початку 2022 року сайт отримав друге дихання. В місті почалася нова масова хвиля перейменувань.

Я це добре пам’ятаю, – сказав Володимир Гордієнко, Head of PHP Department, – у середині лютого 2022 року до мене звернувся Сергій Холін та розповів про Rename.kr.ua і про те, що він потребує нашої підтримки. Ми зрозуміли, що технічно сайт застарів і працював не так швидко, як того хотілося б, також він був незручним в адмініструванні. Тому ми вирішили повністю перебудувати його з нуля.

Ми обрали чудову технологію – PHP/Swoole, побудували новий бекенд та запровадили сучасні системи деплою. Словом, полегшили роботу розробників. А вже потім додали “адмінку”, онлайн-мапу, систему зворотного зв’язку та інші фічі, – розповів Володимир.

Зараз сайт стабільно приймає близько ста користувачів на день та перебуває під наглядом розробника Володимира Міхава, котрий відповідальний за всі некомерційні проєкти у відділі PHP.

В компанії, де більше 350 співробітників і 8 поверхів з офісами, знайти потрібного колегу буває не так просто. «На 8 поверсі, в лівому крилі, ліворуч повертаєш, а потім ще праворуч, і там десь третій, здається, стіл. Або спитаєш когось на місці» – приблизно такі інструкції можна було почути у відповідь на питання «А де сидить Діма Б.?». Якщо пощастить, то скаже перший колега, якого запитаєш. Або не скаже… А якщо з Дімою до цього особисто не зустрічався, то знайти його очима в потрібному опен-спейсі не варіант. Тож ідея створення мапи офісу народилася з реальної потреби.

Наші цілі при створенні мапи офісу

На момент створення мапи кількість співробітників була значно меншою, так само як кількість поверхів, які належали компанії. При цьому поверхи були не сусідні, куди можна швидко піднятись чи спуститись, а 1-ий, 6-ий і 8-ий. Для тих, хто не любить ліфти, пошук колеги міг перетворитись на фізичну вправу. 

Створення мапи передбачало кілька можливостей для співробітників:

  • Знайти колегу і його робоче місце
  • Візуально зрозуміло зобразити робочі місця, адже багато людей працюють в опен-спейс просторах
  • Переглянути інформацію про колегу

Рік 2013: Початок розробки і рішення

Перерви між комерційними проектами ми використовуємо, щоб вивчити і випробувати нові технології та створити цікаві демо. Зробити мапу офісу було цікаво, а крім того і корисно. Всі в індустрії у той час обговорювали проблему навігації в приміщеннях. Ми навіть розглядали кілька проектів, в одному з яких намагалися це робити за допомогою iBeacon.

Так у липні 2013 почалась робота над мапою. Тоді ми

  • Намалювали дизайн приміщень (тоді ще у Photoshop) у псевдо-масштабі, столи різних видів, а також хлопців і дівчат.
  • Для створення карти використали рушій Я.Карт, який можна було використовувати окремо на своєму сервері. Цей рушій дозволив зафіксувати зум, завантажити картки співробітників і легко тягати карту.
  •  Для бекенду обрали мову PHP
  • Дані про колег синхронізували із LDAP системи.
  • Зробили найпростішу адмінку, через яку адміністратор вносив місця працівників і розставляв столи різних видів.
  • Мапа була закрита для зовнішніх користувачів і доступна лише за офісною IP-адресою

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

Тому, коли офісний простір розширився на нові поверхи, а кількість колег зросла, з’явилась потреба оновити і вдосконалити мапу.

Рік 2019: Версія 2.0 

Восени 2019 року, назбиравши, на додачу до нових поверхів, ще й побажання колег щодо нової мапи, ми взялися до роботи.

Насправді, вимог на той момент було не багато:

  • Додати нові поверхи до вже існуючих
  • Додати фото колеги до картки
  • Можливість швидко скопіювати номер телефону (бо тоді спілкування було здебільшого в Telegram), email, перейти відразу у вікно діалогу в Skype.
  • Додати технологію або/та роль працівника (Project Manager, Tech Lead, React Developer, тощо)
  • Зробити зручний пошук за технологіями та навичками.

Але, як то кажуть, апетит приходить під час їжі. Або ж, коли опиняєшся в ролі замовника, то ідеї народжуються в процесі роботи. Тож окрім вищезгаданого, нам вдалося зробити ще дещо.

Кімнати для перемовин та робочі місця

До початку пандемії майже всі колеги відвідували офіс, і оскільки робота часто вимагає дзвінків із клієнтами, попит на кімнати для перемовин був високий. Щоб колеги розуміли, де зараз вільна кімната, а де вже зайнята, ми вирішили додати відповідний функціонал. По-перше, ми додали реальні фото кімнат, оскільки вони різного розміру і розраховані на різну кількість людей. Тепер легко можна визначити, яка саме підходить для конкретної конференції з клієнтом і командою. Для цього команда HR старанно сфотографувала всі кімнати в офісі (а їх наразі 16).

По-друге, ми додали функціонал бронювання кімнат. Для цього усі кімнати внесли в корпоративний Google акаунт. Коли резервуєш визначений час, можна вибрати вільну в цей час кімнату. Забронювати кімнату можна не лише з календаря, а і з “профілю” кімнати. Варто лиш обрати “Зарезервувати” на фото відповідної кімнати, і така можливість з’являється одразу в календарі. 

По-третє, ми оновили хедер мапи: там з’явилося швидке бронювання кімнат на обраний час. Крім цього, додали можливість бачити, в який час кімната вільна для резервації, а в який уже зайнята.

Щодо місць, в офісі є можливість зарезервувати не лише кімнату, а й окреме робоче місце. Це актуально для тих, хто працює віддалено, але час від часу приходить до офісу, а також для місць із столами змінної висоти, яких в офісі поки що меншість. Таким чином, в офісі є місця, які співробітники можуть завчасно зарезервувати за собою.

Безпека офісу та людей

Найкращий спосіб показати, де знаходяться вогнегасники, це позначити їх на мапі. Зізнаюсь, ніколи не звертала на них увагу, де вони висять і в якій кількості. Тож ми влаштували міні-квест “знайди всі вогнегасники офісу”. Те саме стосується аптечок.

 Не думаю, що під час пожежі хтось почне шукати вогнегасник на мапі, але при регулярному користуванні мапою мимоволі запам’ятовуєш, де вони є. Також зручно показувати їх на мапі новим співробітникам під час знайомства з офісом.

Локації

Офіс – це не лише робочий простір, а й місце дозвілля із колегами. Ходять легенди, що розробники на роботі грають у Playstation. То не легенди, таки грають. А ще на гітарі і навіть бас-гітарі… А ще грають в настільний футбол, їдять морозиво, або п’ють каву в кімнатах відпочинку. В наших офісах назбиралось чимало таких локацій, про які можна і не знати, якщо весь час знаходитись на своєму робочому місці. Тому мапа у нас слугує інструментом знайомства нових колег з офісом Оніксу, де можна влаштувати такий собі віртуальний тур, а потім побачити то все наживо.

Доступність

Раніше мапа була доступна за офісною IP-адресою, але під час епідемії коронавірусу всі працювали віддалено. Оскільки на той час ми вже зробили зручний пошук зі технологіями і навичками, навіть додали позначки за рівнем знань (від новачка до експерта) та сортування за досвідом та днем народження (у нас є традиція привітань), мапа стала зручним інструментом користування поза офісом. Тож ми інтегрували її в Hydra, основний сервіс нашої компанії, і зробили спільний логін. Таким чином, мапа стала доступною для будь-якого колеги з будь-якої точки світу.

Робочі місця

Коли офіс невеликий, лише з парою десятків столів, проблема нумерації не стоїть, не кажуче вже про логіку нумерації столів. Але коли офіс розрісся до 8 поверхів із сотнями робочих місць, постало питання: а як же ті столи нумерувати? Відповідь – наклейками! Ми вигадали, як зручно позначати столи на одному поверсі, а потім повторили це 7 разів. А щоб це було наочно, на столи приліпили наклейки з номерами. 

Окрім того, ми надали можливість співробітникам змінювати номер свого робочого місця в своєму профілі. Пересів за інший стіл – зміни його номер самостійно. Це розв’язало проблему адміністратора, який мав слідкувати за оновленням мапи місць. 

Колегу, який працює віддалено, так само можна знайти на мапі, тільки без прив’язки до робочого місця, а з позначкою “Віддалено”. Адже мапа увібрала в себе інформацію, яка є корисною незалежно від того, де знаходиться користувач.

P.S. А ще іноді, наприклад, 1 квітня, у нас за столами сидять-лежать-працюють котики! А в день народження в іменинника святкова аватарка з кулькою, конфеті і ковпачком.

Підводячи підсумки

Наша мапа офісу вже давно переросла свою навігаційну функцію. І найкращий спосіб це побачити, це порівняти початкові вимоги до її створення і результат, який маємо зараз:

  • Зручний сервіс, інтегрований з основним сервісом компанії, Hydra, який може бути незалежним за потреби. Як доказ – демо.
  • Інтеграція з Google календарем для резервації кімнат для перемовин та столів змінної висоти
  • Доступ до власного профілю для внесення змін (фото, e-mail, соціальні мережі, тощо), в тому числі для зміни робочого місця.
  • Доступ до мапи для всіх колег через ідентифікатор єдиного входу (SSO).
  • Кастомне рішення на основі SVGі замість Yandex.map.
  • Бекенд на новішому PHP, а інтерфейс – на фреймворці Vue.js.
  • Дизайн із псевдо-масштабом з умовним збереженням розмірів і координатами столів та інших об’єктів.
  • Клікабельні зони для позначення додаткових локацій (окрім робочих місць) і об’єктів.
  • Адаптували мапу для зручного використання на мобільному телефоні.
  • Оновлений хадбар із розширеним пошуком, локаціями, сервісами компанії, та опцією резервації робочого місця чи кімнати для перемовин.
  • Сайдбар із поверхами для ліворуких і праворуких 🙂
  • Багатомовність – тепер є версія рідною-солов’їною.
  • Кульки і ковпачки для позначення іменинників, щоб усі знали, у кого сьогодні свято.