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

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

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

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

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

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

Содержание:

• дизайн;
• техническая реализация;
• сколько это стоит.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если использовать готовое решение, например 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 миллиона рублей.

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