Как разработать спортивное приложение для поиска марафонов и соревнований

С чего всё начиналось

Американский сверхмарафонец Дин Карназес однажды сказал: «Кто-то прибегает к помощи психотерапевта, кто-то идёт в бар и находит утешение в кружке пива, а моя терапия – это бег». Для тех, кто солидарен с Дином, и для кого бег и спорт в целом — это способ улучшить здоровье, укрепить силу воли, зарядиться энергией, компания Race Chasers из Лос-Анджелеса решила разработать спортивное приложение.

Идея заключается в том, чтобы создать мобильное приложение с социальной составляющей на iOS и Android, в котором можно найти информацию о ближайших спортивных мероприятиях в Штатах, зарегистрироваться и поделиться впечатлениями.

Перед нами стояла задача – переписать приложение с устаревающей технологии PhoneGap / Cordova на более перспективную React Native. Этот фреймворк позволяет создавать приложения, похожие на нативные по внешнему виду, функциональным возможностям и близкие по производительности. При этом сохраняются все плюсы кроссплатформенных приложений.

Функционал приложения

Клиент планировал, что приложение будет поддерживать две базовые функции, которые мы реализовали. А именно, что пользователи приложения могут:

• искать подробную информацию о предстоящих спортивных мероприятиях, используя быстрый или детальный поиск с помощью фильтров «дистанция», «город»;
• посмотреть место проведения мероприятия и его удалённость от текущего местоположения пользователя.

Также мы добавили анимацию: для клиента было важно, чтобы у приложения был уникальный узнаваемый дизайн. Например, в профайле помимо аватара ещё есть фоновое изображение. Оно динамически меняется по правилам, которые задаются на сервере и передаются по API.

Добавили ещё одну UX/UI фишку – нотификации с меняющимся текстом и кастомным дизайном. Традиционное сообщение “Пропало соединение с Интернетом” выводится в форме разных шутливых текстов. Текст сообщений меняются по очереди, чтобы не возникало повторов.

Традиционно для работы с приложением необходимо зарегистрироваться. При регистрации помимо стандартных данных (имя, фамилия, электронная почта, пароль) можно также указать любимую дистанцию, предпочитаемый вид спортивного соревнования – например, обычный забег, триатлон или плавание. Эта информация нужна, чтобы пользователю присваивались личные интересы и предпочтения, поскольку в дальнейшем Race Chasers хотят развивать приложение как социальную сеть. Почтовый индекс нужен, чтобы определить местоположение участника. Тогда пользователь увидит в результатах поиска мероприятия, которые проходят рядом.

В разделе “Предпочтения” можно изменить любимую длину и тип дистанции, задать наиболее комфортную погоду. Тогда при поиске приложение будет выдавать результаты на основе этих предпочтений. Если пользователя интересуют только заплывы на 10 км при температуре 65-70°F, то, например, ему не будут показываться полумарафоны или заплывы при температуре воздуха 50°F.

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

С какими трудностями мы столкнулись

• Противоречивая проектная документация

Чтобы разработать спортивное приложение, клиент передал нам много данных: прототип приложения на HTML5, 16 документов об API, приложение для Android на Cordova, множество методов для тестирования в Postman, дизайны экранов в PSD. Когда мы всё изучили, поняли, что одни артефакты противоречат друг другу, а другие содержат лишнюю или, наоборот, неполную информацию. Чтобы конечный результат нашей работы соответствовал ожиданиям клиента, наш менеджер проектов вместе с аналитиками сводили документацию. А разработчики и тестировщики проводили реверс-инжиниринг и копались в старом Cordova приложении, чтобы понять, как всё устроено. Чтобы не возникало расхождений между нашим видением результата и ожиданиями клиента, мы использовали методологию SCRUM с еженедельными спринтами.

• Распределённая команда

Команда клиента была разбросана по разным континентам: Северная Америка, Европа, Азия. Несмотря на удалённость участников проекта и огромную разницу в часовых поясах, наша команда и представители клиента справились с этими трудностями и выстроили эффективную коммуникацию. Каждую неделю с помощью видеозвонков в Zoom обсуждали, что сделали за неделю, что планируется на следующую, а также проясняли сложные вопросы. На каждом звонке наш менеджер проекта показывала новый функционал приложения на экране своего смартфона. Технические вопросы, в том числе, по взаимодействию с бэкэндом клиента, ежедневно решали по электронной почте.

Результат

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

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

Стек технологий

React Native, Redux, JavaScript/CSS