Приложение UME

Проектирование

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

В разделе U пользователь может искать людей из списка самых популярных (Hot), с самым высоким рейтингом (Top) или в случайном порядке (Chance). Основные виды контакта между пользователями — лайки, аудиосообщения и приглашения на свидания. Когда два пользователя сходятся, у них открывается возможность переписки в чате.

Визуальный стиль

Первые идеи по визуальному стилю возникли на этапе проектирования. Мы не хотели сильно привязываться только к Android или iOS, потому разработали универсальный визуальный стиль. В результате интерфейс получился интересным и понятным пользователям обеих платформ. В приложении преобладают бледно-фиолетовые темные тона, таким образом мы подчеркиваем фотографии пользователей. Для акцентов используется «арбузный» красный и бирюзово-голубой цвет. Также частью визуального языка стали круглые формы — круглые кнопки, фотографии со скругленными углами и т. д.

Интерактив на экране Chance

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

Раздел U

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

Раздел Me

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

Realtime

Известный специалист по юзабилити Якоб Нильсен утверждает, что система должна всегда информировать пользователя о том, что происходит, предоставляя релевантную обратную связь в разумные сроки. Это особенно актуально для мобильных приложений, предполагающих общение между пользователями. Чтобы знакомиться в UME было комфортно, мы использовали realtime-события. Таким образом, пользователи не пропустят важные уведомления, даже если приложение закрыто.

Для различных realtime-функций в UME мы написали собственный сервис, который занимается обработкой ивентов от publisher (в нашем случае это основное приложение), которое отправляет на сервер информацию о новом событии (например сообщение или match). Сервис для роботы с realtime отправляет этот ивент на клиент:

• если пользователь онлайн — по сокетам
• если пользователь офлайн — он получит push-уведомление или email.

Преимущество данного решения состоит в его простоте и независимости от языка программирования или фреймворка — сообщения между сервисами передаются по AMQP-протоколу. От сервера на клиент сообщения передаются по WebSocket protocol (RFC 6455).

Технологии, которые использовались на бэкенде:

• PostgreSQL/PostGIS
• PHP/Symfony2
• Python 3.5
• asyncio
• RabbitMQ
• Redis

Мобильная разработка

Android-приложение основано на архитектуре MVVM, что позволяет значительно сократить количество кода, отделить логику, выделить и добавить абстракцию View — ViewModel, которая занимается отслеживанием изменений в данных модели и их отображением в представлении (Data binding). Так мы получаем легко масштабируемый продукт. Для обмена моделями между компонентами приложения использовался EventBus 3.0, что позволило ​сделать части кода менее зависимыми друг от друга​ и реализовать доставку событий в реальном времени.

iOS-приложение построено на архитектуре Model-View-Controller-Store. Для обмена сообщениями используется RealTime (SocketRocket) архитектура, реализованная на основе контроллера JSQMessagesViewController.

Работа с сервером в iOS осуществляется через AFNetworking, за счет чего достигается максимальная производительность с минимальными системными затратами. Картинки загружаются асинхронно с использованием SDWebImage, одной из самых популярных на сегодняшний день библиотек по работе с изображениями.

Для авторизации в приложениях используются данные из самых популярных социальных сетей. Это значительно упрощает регистрацию, ведь новым пользователям не нужно лишний раз заполнять формы, а главное выбирать фотографии для анкеты — приложение само подгружает фотографии из главного альбома пользователя в Facebook или VK. Все данные передаются и обрабатываться по протоколу OAuth 2.0, что гарантирует их безопасность.

Приложения используют Google Places API. С его помощью ​они получают сведения о местоположении пользователя​, ​а главное — могут с легкостью транслитерировать название локации на нужный язык.

Все события, которые происходят в приложениях в реальном времени (новые сообщения, симпатии, приглашения на свидания) поступают по WebSocket protocol (RFC 6455). Если же пользователь потушит экран или свернет приложение, таким образом переключив девайс в режим ожидания, события будут поступать через Google Cloud Messaging и отображаться в статусбаре в виде push-уведомлений. При таком подходе пропустить что-то важное не получится.

Бриллиантовая версия

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

Также действует реферальная программа. Пользователь может сгенерировать уникальную ссылку и поделиться ею с друзьями и знакомыми. После того, как по его ссылке перейдет и установит приложение определенное количество пользователей, он получит возможность бесплатно пользоваться бриллиантовой версией приложения в течении 24-х часов.