Километры добра

О проекте «Километры Добра»

«Километры Добра» — это пример того, как можно сделать, казалось бы, невозможное. Мы создали функциональный сайт с интеграцией данных хронометрического комплекса за 2 месяца. Этого не получилось бы без правильной организации работы и должной вовлечённости заказчика в процесс.

Необычная идея

Чиновники Магнитогорска придумали благотворительное движение «Километры Добра». Цель — пропаганда здорового образа жизни и сбор средств для нуждающихся. Любой человек может пробежать/пройти дистанцию в парке с условием, что за каждый преодолённый километр он заплатит в благотворительный фонд. Больше бегаешь — больше помогаешь. Идею такого симбиоза спорта и благотворительности позаимствовали в Монако.

Команда проекта

Заказчик — Администрация Магнитогорска. Поставщик оборудования для хронометража — волгоградская компания «Эластомер». Разработчик сайта и интеграция сайта с оборудованием для хронометража — наша веб-студия ReConcept.

Сроки

Предварительно мы обсудили проект с представителем «Эластомера» Георгием и пришли к выводу, что в срок уложиться крайне сложно. Техническое задание от администрации Магнитогорска на поставку оборудования для хронометража и сайт проекта появилось 19 марта 2019 г. А первая акцию анонсировали на День защиты детей 1 июня. На реализацию всего проекта оставалось 2 месяца. Включая неделю на тестирование. Это очень короткий срок. Нужно было закупить и растаможить оборудование, сделать сайт, написать ПО, купить и привезти сервер в Магнитогорск, установить и настроить оборудование, протестировать и сдать лично мэру.

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

Где найти подрядчика на разработку такого сложного сайта в такие сжатые сроки? Мы взялись запустить сайт к 15-му мая и хронометрировать забег 1 июня.

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

О сайте

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

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

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

Самые сложные задачи были решены в части back-end. На сайте есть разные роли, каждая со своими задачами и разным уровнем доступа к различной информации. Организаторы имеют почти полный доступ, заводят акции и работают с бегунами. Благотворительные фонды имеют доступ только к тем акциям, которые организуют и могут делиться отчетами. Менеджеры компаний следят за бегунами из своей компании и имеют полный отчет по их достижениям/пропускам. Бегуны могут узнать свою статистику.

Дизайн

Главная страница сервиса. На главной: общая статистика, анонс акций, актуальные рейтинги.


Страница событий: анонс актуальных акций и перечень завершенных.

Страница акции: до начала акции — описание цели акции. После завершения — добавляется отчет о прошедшем мероприятии, прикрепляются отчеты фонда о расходах средств.

Остальные страницы сайта: общий рейтинг, фонды, страница фонда, «пожертвовать», «мой рейтинг», контакты. Сайт адаптирован под планшет и телефон.

Все фотографии бегунов в макетах — с волгоградского марафона 2018, автор Сергей Веснин.

Версия для слабовидящих

Сайт отвечает Федеральному закону от 09.02.2009 N 8-ФЗ (ред. от 28.12.2013, с изм. от 01.12.2014) «Об обеспечении доступа к информации о деятельности государственных органов и органов местного самоуправления», статья 10 «Организация доступа к информации о деятельности государственных органов и органов местного самоуправления, размещаемой в сети Интернет».

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

Логотип

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

Новый логотип сам просится в печать :-)


Как мы выполнили задачу

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

Сайт разработали на фреймворке Yii2. Он обеспечивает нужную скорость и высокую пропускную способность сайта.

Административная панель сайта — кастомное решение под задачи администраторов. Через админ.панель создают благотворительные акции, регистрируют участников, импортируют статистику забегов. У организаторов акций, благотворительных фондов и корпоративных клиентов есть личные кабинеты.

Основное внимание уделили надёжности при передаче данных от хронометрического комплекса в базу сайта. Организатор отчитывается о каждом пожертвованном рубле и ошибки статистики недопустимы.

Рабочий прототип был у нас в начале мая. 15 мая уже вовсю фиксили баги. До конца мая сайт был готов. 31 мая в Магнитогорске прошёл тестовый забег.

Вот что о нём пишут Магнитогорские СМИ:

https://www.magnitogorsk.ru/ru/item/16472-zanimajs...

https://www.mr-info.ru/23811-shagaesh-i-pomogaesh-...

https://www.mgntv.ru/vesti/news/society/16806-kilo...

https://www.magcity74.ru/news/51646-kilometry-dobr...

https://www.verstov.info/news/society/78418-v-magn...

Как мы уложились в срок

Мы написали подробное техническое задание, собрав пожелания чиновников Магнитогорска и техническую информацию от «Эластомера». Мы одновременно занимались фронтендом и бэкендом. С каждой стороны с нами работал представитель: Георгий от «Эластомера», Михаил Андреев от Магнитогорска. Мы с самого начала объяснили правила ведения проекта нашим партнерам, исключив тем самым любые неожиданности. Вовлечённость клиента в проект по степени погружения в задачи и времязатраты была такая же, как и у нашей студии — все вопросы решались мгновенно в общем чате. Спасибо вам, Георгий и Михаил!

Что теперь

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

Отзыв клиента

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


Честно говоря, возможно это было похоже на авантюру, что наше решение о сотрудничестве основывалось на впечатлении от блога, но на первой же встрече Азалия и Сергей показались мне настоящими профессионалами. Формат работы студии (доступное для онлайн редактирования ТЗ — как ядро разработки + чат для оперативной связи и быстрого решения вопросов) позволил качественно и в сверхсжатый срок (всего 8 недель для разработки и запуска сервиса, в том числе «отпускные» майские праздники) выполнить разработку технически сложного продукта с превосходным современным дизайном, выявить и устранить практически все баги, связанные с интеграцией с оборудованием хронометража, и самое главное — строго в установленный срок представить готовый комплекс Заказчику.


Я лично благодарен Сергею, Азалии и Александру за их профессиональный подход и личную вовлечённость в разработке продукта высокого качества!


Уверен, что это только лишь начало и мы сможем совместно поработать в ряде проектов для развития IT составляющей спортивной индустрии России!

Д е й с т в у й !
Оставьте ваши контакты и мы ответим в течение 10 минут.
Ваша заявка принята!