Рассказываем, как Coding Team настроили работу с потоками, разработали плеер, интегрировались с аудиосистемой автомобиля и подготовили приложение к продвижению.
InVoice Media — новостной ресурс для деловых людей. Редакция выбирает важные новости из интернет-повестки, дополняет их аналитикой и переводит в формат аудио до 3-х минут — для удобства тех, кто часто занят, но хочет всегда быть в курсе. Компания решила разработать мобильное приложение после опроса аудитории: 82% пользователей хотели слушать новости прямо из своего телефона.
У деловых людей не хватает времени читать все важные новости, а правильные решения строятся на основе анализа. Мы хотели предоставить пользователям аналитическую сводку в удобном для них формате — когда можно выбрать новости, собрать в плейлист, и, не отвлекаться от спорта или управления автомобилем, все прослушать.
Мы были не первыми, к кому обратились InVoice Media: у компании уже были коммерческие предложения от других компаний, но они сомневались, что другие разработчики смогут реализовать их идею, поскольку в работе с потоковым аудио много подводных камней. Нам поспособствовал предыдущий опыт разработки звукового софта.
Технический директор Coding Team Сергей Черепанов как раз разрабатывал до этого приложение на iOS — игровой пульт для ди-джеев, на котором можно сводить треки. Там применялись подобные технологии.
Нам предстояло разработать мобильные приложения для для iOS и Android и интегрировать их с бэкендом InVoiceMedia. ru. За 3 месяца нужно было разработать MVP приложения и уложиться в фиксированный бюджет.
Вот что можно делать в приложении:
- Слушать и читать все материалы в режиме онлайн.
- Собрать свой плейлист из 10 статей.
- Слушать все рубрики и подборки от редакции.
- Слушать онлайн радио.
- Делиться понравившимся материалом.
И, чтобы все эти вышеперечисленные пять пунктов состоялись, нам нужно было основательно поработать. Как это было:
Настроили работу с потоковым аудио
Каждый день InVoice Media предлагает пользователям тысячи часов аудионовостей. Весь этот контент проходит через потоки.
Потоковое аудио — когда звук передается напрямую на устройство без предварительной загрузки. Раньше, чтобы послушать музыку на телефоне, её нужно было сначала скачать в нужном аудиоформате. Потоки позволяют доставлять звук в устройство из интернета небольшими пакетами данных и сразу же воспроизводится в реальном времени.
Особенность работы с аудиопотоками на мобильных девайсах — это постоянная синхронизация текущего состояния стрима аудио с действиями пользователя. Переключение аудио, переходы в другие приложения или обрыв интернета должны быть корректно обработаны разработчиками. В InVoice Media мы реализовали кэширование больших аудиофайлов и обеспечили бесперебойную работу в фоновом потоке с помощью кастомизации Exo Player под Android и AVAudioPlayer под IOS.
Мы разработали собственные обертки над нативными средствами сохранения файлов через uri. На обеих платформах развернули локальные базы данных (Room). Еще использовали различные состояния для аудио (start/end/pause) в domain-слое. Для работы в фоне мы запрашиваем все необходимые разрешения у систем.
Разработали плеер
Плеер — основная функция приложения, доступная на всех важных экранах. Новости можно останавливать, прокручивать назад и вперед или включать ускоренную перемотку.
Команда Coding Team не просто была нашими руками: ребята предлагали функциональности, которые мы изначально не продумывали. К примеру, они обратили внимание на дизайн плеера, который перекрывал половину экрана, и предложили сделать его сворачивающимся
Работая над UI плеера, мы столкнулись со множеством состояний самого плеера: когда пользователь сворачивает/разворачивает аудиодорожку, отображение в уведомлениях мобильного девайса и другими. Нам важно было учесть эти моменты еще на этапе проектирования, чтобы реализовывать сразу весь UI плеера без существенных переделок. В конечном итоге мы реализовали кастомный UI плеера с помощью Snapkit IOS/Compose Android.
Продумали логику воспроизведения
Все статьи организованы в ленты: бизнесы, финансы, экономика, политика, культура, спорт, автомобили и другие. После того как новость доиграет, автоматически запустится следующая, не прослушанная из выбранной ленты.
Пользователь может выбрать только те новости, которые он хочет послушать — они попадают в плейлист. Сам плейлист выглядит и ведет себя как новостная лента, но все статьи, попавшие в него, автоматически скачиваются для прослушивания в офлайне — чтобы было удобно послушать в поезде или самолете.
Все аудионовости дублируются текстом.
Интегрировали приложение с медиасистемой автомобиля
Мы интегрировали InVoice Media с медиа-системами автомобиля через предоставление данных стандартному системному проигрывателю (MPNowPlayingInfoCenter/ MPRemoteCommandCenter на iOS и аналог на Андроид). Так пользователь видит название и обложку текущей новости и может управлять воспроизведением.
Для интеграции приложения с медиасистемами автомобиля использовали гайдлайны от Apple и Google. Документация достаточно скудная, и изначально не были понятны требования сторов платформ. После нескольких итераций разработки были проведены оптимизации UI для car play и мы смогли пройти ревью.
Я слушаю InVoice Media сам и рекомендую его друзьям. Приложений с аналитическими новостями на рынке не так много, и даже там, где они есть, нет аудио — то есть читать их можно только если не занят. Сейчас я слушаю аналитику, когда занимаюсь спортом или еду в авто. Это один из тех кейсов, о которых рассказываешь с удовольствием.
Подготовили приложение к продвижению
Монетизируется приложение через продажу платной подписки и аудиорекламу. Мы добавили аналитику AppsFlyer для сбора действий пользователя и улучшили самые востребованные сценарии.
Наши UX-проектировщики сократили количество действий для прослушивания или скачивания новости: раньше выбор и скачивание новости был в двух экранах, мы же сократили пользовательский путь до одного. Так человек делает меньше действий и с большей вероятностью совершит целевое действие — прослушает новость. При оплате приложения количество экранов тоже свели к минимуму.
После улучшения основных пользовательских сценариев количество покупок приложения и трафик увеличились: на момент написания статьи 30% пользователей стали заходить 2 раза в неделю, 10% заходят каждый день.
Итоги
Приложение заняло третье место на конкурсе Agima. Partners в категории «Лучший проект». На премии Tagline InVoice Media завоевало два приза: бронзу в номинации «Медиа и СМИ» и серебро в «Сайты для слабовидящих». Также еще InVoice Media номинировано на премию «Золотой Сайт» и участвует в рубрике «Приложение под ключ» премии workspace Digital Awards.
За 3 месяца у нас получилось:
- Создать удобное мобильное приложение с интуитивным управлением.
- Разработать плейлист новостей на основании предпочтений пользователей.
- Интегрировать приложение с медиа-системами автомобиля.
- Обеспечить поддержку офлайн-режима прослушивания для тех мест, где отсутствует интернет.
- Подготовить приложение к продвижению и монетизации через платную подписку.
С запуском приложения мы получили удобный канал коммуникации со своими пользователями: мы видим, какие новости чаще добавляют в плейлист, какие сохраняют в избранное, а какими делятся с друзьями и коллегами. В мобильном приложении проще оплачивать подписку, соответственно и путь к покупке сокращается. Чем больше скачиваний и оформления подписки, тем больше наша прибыль, — на данный момент приложение InVoice Media приносит нам около 70% дохода.
Мы планируем и дальше развивать приложение. В следующих обновлениях появятся подборки от редакции и вкладка с нашими подкастами.
Хотите узнать больше Coding Team и наших проектах?
Посетите наш сайт - codingteam.ru
Если вам нужна такая же крутая разработка для вашего проекта - пишите на почту [email protected] или в TG