Посчитали, сколько стоит разработать аналог «Клабхауса»

В начале мая 2021 года «Клабхаус» запустил Android-приложение для жителей США, а Twitter объявил о запуске Spaces — главного конкурента «Клабхауса». Мы переосмыслили экраны приложения, которое открыло эпоху голосовых чатов, рассказали, как все реализовать технически, и посчитали, сколько это стоит.

С момента появления «Клабхауса» для iOS мы в Winfox активно использовали и тестировали приложение на своих айфонах. Изучали, что в нем удобно, а что нет, каких функций не хватает, а какие реализованы не лучшим образом. Так у нас родилась альтернативная концепция этого приложения.

Теперь, когда «Клабхаус» появился на Android, мы хотим поделиться с вами своей концепцией. Узнайте, каким бы мог быть дизайн и юзабилити «Клабхауса» и подобных приложений для Android и iOS, как это можно реализовать технически и сколько стоит подобное приложение.

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

Если сейчас читать статью некогда, смотрите блок «Коротко» в конце материала — собрали там главное.

Содержание:

Дизайн

Мы переосмыслили дизайн и возможности приложения. Смотрите, что получилось.

Главный экран

Добавили возможность записи разговоров и индикацию времени эфира, а также переместили поле поиска и добавили нижнее меню.

Добавили возможность записи разговоров и индикацию времени эфира на главный экран
Добавили возможность записи разговоров и индикацию времени эфира на главный экран

Запись разговоров. Добавили возможность записи разговоров в комнатах. Если вы не можете вовремя подключиться к дискуссии, то сможете послушать её позже, когда будет время.

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

Красная точка-индикатор в карточке комнаты подсказывает, что разговор записывается.

Хранить все записи проблематично, поэтому можно использовать ограничение по времени. Например, пользователю доступны записи за последнюю неделю или месяц. По прошествии этого времени записи удаляются — и вместо них хранятся новые.

Александр Клочко

, арт-директор Winfox

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

Поиск. Поиск перенесли влево — так удобнее нажимать на иконку.

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

Гостевая комната

Поменяли отображение аватарок спикеров и добавили возможность оставлять комментарии во время выступления спикера.

Поменяли отображение аватарок и добавили возможность оставлять комментарии на экране гостевой комнаты
Поменяли отображение аватарок и добавили возможность оставлять комментарии на экране гостевой комнаты

Спикеры в верхней части экрана. Говорящий спикер отображается на первом месте, а его аватарка отмечена синей иконкой микрофона.

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

В приложении для айфона не очень хорошо реализована индикация говорящего спикера. Из-за этого многие пользователи не сразу понимают, кто в комнате говорит. Мы постарались это исправить.

Дмитрий Солопахо, UX/UI-дизайнер Winfox

Комментарии. Рядом с кнопкой «Покинуть комнату» появилась кнопка «Комментарии». Нажав на нее, пользователь переходит в чат, где обсуждают выступление спикера в реальном времени. Листая комментарии, спикеры видят вопросы, которые задают им слушатели, и могут отвечать на них во время выступления.

Добавили кнопку «Комментарии» на экран гостевой комнаты
Добавили кнопку «Комментарии» на экран гостевой комнаты

К комментариям можно ставить лайки и дизлайки: статистика отображается под каждым комментарием и видна всем пользователям. А еще комментарии сортируются по новизне или популярности, как на Ютубе.

Чтобы закрыть окно с комментариями, можно нажать на крестик в верхнем углу или сделать свайп вниз.

Окно с комментариями — еще одна возможность находить людей со схожими интересами, увеличивать число подписок и доступных комнат. Если вам понравилась мысль комментатора и вы захотели узнать о нем больше, нажмите на аватарку и перейдите в профиль пользователя.

Дмитрий Солопахо, UX/UI-дизайнер Winfox

Своя комната

Этот экран повторяет предыдущий, только вместо руки в нижнем меню отображается микрофон.

В своей комнате вместо руки в нижнем меню отображается микрофон
В своей комнате вместо руки в нижнем меню отображается микрофон

Навигация

Сделали этот раздел, чтобы быстрее находить интересные комнаты, отслеживать обсуждения по любимым темам, следить за знакомыми спикерами.

Сделали новый раздел «Навигация» с рекомендациями, популярными темами и комнатами
Сделали новый раздел «Навигация» с рекомендациями, популярными темами и комнатами

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

Популярные темы. Здесь отображаются темы, которые сейчас активнее всего обсуждают пользователи Clubhouse. Нажав на иконку, откроется список комнат по теме.

Популярные комнаты. Аналогично, как с темами, только отображаются самые популярные комнаты.

Создание комнаты

Добавили возможность включить запись обсуждения в комнате, выбрать темы дискуссии, подключить комментарии.

Нажав «Добавить тему», пользователь увидит всплывающее окно и сможет выбрать нужные темы.

Александр Клочко, арт-директор Winfox
Добавили возможность включить запись обсуждения, выбрать темы дискуссии и подключить комментарии при создании комнаты
Добавили возможность включить запись обсуждения, выбрать темы дискуссии и подключить комментарии при создании комнаты

Поиск

Искать интересные дискуссии в действующем приложении не совсем удобно. Поэтому мы предлагаем сделать поиск не только по людям и комнатам, но и по темам, а также добавить выбор языка, на котором ведется дискуссия.

Сделали поиск не только по людям и комнатам, но и по темам
Сделали поиск не только по людям и комнатам, но и по темам

Поиск по людям, комнатам и темам. Лаконичный дизайн: на экране только строка поиска, категории кописа и результаты. Результаты отображаются в реальном времени — не надо дополнительно нажимать на кнопку «Искать».

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

Мы решили эту проблему, расположив иконку с земным шаром в строке поиска. Нажав на нее, можно выбрать страну, в которой вы находитесь, или несколько нужных стран. Тогда система будет рекомендовать вам только те комнаты, названия которых написаны на выбранных языках.

А еще добавили выбор языка
А еще добавили выбор языка

Профиль

Расположили содержимое экрана по центру.

Кнопку «Отправить приглашение» опустили вниз, чтобы разгрузить верхнее меню.

Информацию о том, кто добавил пользователя в «Клабхаус» и как давно этот человек вступил в клуб, посчитали лишней и убрали.

Посчитали, сколько стоит разработать аналог «Клабхауса»

Уведомления

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

Вместо это уведомления будут приходить, ваш подписчик приглашает вас в комнату. Рядом с уведомлением указано, сколько минут или часов назад оно пришло.

Посчитали, сколько стоит разработать аналог «Клабхауса»

Виджет

Когда пользователь слушает дискуссию в комнате, а экран смартфона заблокирован, на нем отображается виджет.

В самом верху — название дискуссии и ее описание.

Посередине — фото спикера, который сейчас говорит.

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

Добавили виджет для заблокированного экрана
Добавили виджет для заблокированного экрана

Я активно пользуюсь «Клабхаусом». Зашел в комнату, заблокировал смартфон, положил его в карман и занимаешься своими делами. Если надо выйти из комнаты, включить или отключить микрофон, узнать, кто говорит, приходится разблокировать смартфон и заходить в приложение. Когда ты за рулем или на бегу, это неудобно. Поэтому нам показалось важным добавить возможность управлять приложением с заблокированного экрана.

Pуcтам Myxамедьянов, руководитель студии Winfox

Техническая реализация

«Клабхаус» и аналогичные приложения работают на базе серверных решений, которые позволяют проводить конференции. Вот как это происходит. У каждого пользователя в комнате один входящий поток (он слушает, что говорят другие) и один исходящий (когда пользователь говорит). На сервере эти потоки смешиваются. Если это спикер, то у него есть поток, чтобы он себя не слышал эхом, поток, в котором все остальные пользователи, кроме него, и один общий поток для всех слушателей, которые не говорят.

Обмен информацией, трансляция потоков и управление приложением с сервера происходят через веб-сокеты. Веб-сокет — это протокол связи поверх TCP-соединения, предназначенный для обмена сообщениями между приложением и веб-сервером в режиме реального времени. Трансляция аудиопотока реализована при помощи WebRTC — зарекомендовавшей себя технологии обмена потоками. Зачастую эта технология не нуждается в участии сервера в обмене данными между клиентами: сервер отвечает лишь за коммутацию потоков, играя вспомогательную роль. В нашем же случае сервер критически важен, так как он отвечает за безопасность (мы же не хотим чтобы нашу комнату кто-то прослушивал?) и микширование потоков для организации идеальной связи между неограниченным количеством участников.

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

Александр Хрущев, технический директор Winfox

Для приема и передачи голосовых потоков и контроля битрейта подойдет программное обеспечение вроде Agora, Wowza или Flashphoner. Оно умеет передавать и микшировать потоки в режиме реального времени с минимальной задержкой. Сеть доставки содержимого может работать на сотне серверов, расположенных в разных странах, благодаря чему пользователи слышат трансляцию с задержкой максимум в одну секунду.

Если по какой-либо причине компания не хочет использовать готовое решение, она может написать его самостоятельно. Но выйдет ощутимо дороже.

Александр Хрущев, технический директор Winfox

Сколько это стоит

Общая стоимость подобного проекта складывается из стоимости железа, то есть серверов, лицензии на программное обеспечение и приложения.

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

Если использовать готовое решение, например Flashphoner, смета будет выглядеть так.

Лицензия на программное обеспечение — около 750 тысяч рублей. Пожизненная лицензия на один сервер — 150 тысяч рублей. Один сервер выдерживает порядка 10 тысяч пользователей. Поэтому на старте заложим 5 серверов, то есть 750 тысяч рублей.

Железо — 40 тысяч рублей в месяц.

Приложение — 1,2 миллиона рублей*, из которых:

  • техническое задание — 40 часов = 80 тысяч рублей;
  • прототипирование — 40 часов = 80 тысяч рублей;
  • дизайн — 80 часов = 160 тысяч рублей;
  • фронтенд — 200 часов = 400 тысяч рублей;
  • бэкенд — 200 часов = 400 тысяч рублей;
  • менеджмент — 40 часов = 80 тысяч рублей.

Итого: 1,99 миллиона рублей

*Стоимость при ставке 2 тысячи рублей в час.

Коротко: альтернативная концепция «Клабхауса»

  • Добавили запись комнат. Аудио сохраняется в специальном разделе, записи можно прослушать в удобное время.
  • В нижнем меню закрепили иконки основных разделов приложения: главный экран, навигация, кнопка добавления комнаты, календарь и уведомления. Так удобнее пользоваться приложением и перемещаться между разделами.
  • Добавили комментарии. Пользователи могут оставлять вопросы спикеру и обсуждать выступление в реальном времени.
  • Сделали раздел «Навигация», чтобы быстрее находить интересные комнаты, отслеживать обсуждения по любимым темам, следить за знакомыми спикерами.
  • При создании комнаты можно выбрать темы дискуссии и подключить комментарии.
  • Сделали поиск не только по людям и комнатам, но и по темам.
  • Добавили выбор языка, чтобы система рекомендаций работала более четко, и русскоязычные пользователи на главном экране не видели комнаты, в которых общаются на арабском или китайском.
  • Поменяли логику уведомлений. Пользователь больше не будет получать пуши, когда кто-то из его списка контактов появился в «Клабхаусе». Зато будет вовремя узнавать, если кто-то пригласил его в комнату.
  • На заблокированном экране отображается виджет. Можно быстро включить или отключить микрофон, если вы спикер, или заглушить звук обсуждения в комнате.
  • «Клабхаус» и аналогичные приложения работают на базе серверных решений, которые управляют голосовыми потоками.
  • Для приема и передачи голосовых потоков, контроля битрейта подойдет программное обеспечение вроде Agora или Flashphoner.
  • Приложение наподобие «Клабхауса» с голосовым чатом, комнатами и онлайн-дискуссиями и его поддержка обойдутся примерно в 2 миллиона рублей.

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

Pуcтам Myxамедьянов, руководитель студии Winfox

А чего вам не хватает в приложении «Клабхауса», что неудобно и что хотели бы изменить? Пишите в комментариях. Давайте обсуждать!

1111
14 комментариев

Приложение стоит 2 млн. руб., твит Илона Маска - бесценно.

4
Ответить

Какой ещё flashphoner ? Что за дичь. Берешь AWS, пишешь на каком нибудь аля питоне апи для рест и апи для вебсокета и пуляешь все это в лямбду. Вот и весь бекенд и его расходка в копейку

1
Ответить

Хуяк хуяк и в продакшен)

5
Ответить

Тех задание - 40 часов? Если упороться, то можно и за 12 составить, и гораздо дешевле

1
Ответить

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

1
Ответить

Николай, согласны с вами 😉⚡️

1
Ответить

Ненужно от слова совсем

Ответить