Привет! Меня зовут Алексей Гомелевский, я frontend-разработчик в Garage Eight. Моя команда занимается улучшением взаимодействия пользователей с продуктом, и недавно мы решили реализовать комментарии. В этой статье расскажу, как выбирали между решением из коробки и собственной разработкой, с какими сложностями столкнулись и как на базе комментариев создали чаты. 

Зачем нам потребовалось создавать комментарии

Мы в Garage Eight разрабатываем международную экосистему инвестиционных продуктов, а конкретно моя команда сфокусирована на мотивации пользователей взаимодействовать с сервисами. Мы стремимся постоянно улучшать UX, тем самым удерживая их и формируя лояльность, что в конечном счете влияет на LTV пользователя. 

Возможно, вы когда-нибудь слышали про Октализ — фреймворк геймификации от Ю-Кай Чоу (Yu-kai Chou), описывающий восемь основных мотивационных драйверов. Он показывает, что важно привлекать клиентов не только напрямую, но и через психологические факторы: например, стремление к саморазвитию, самовыражению, командной работе или избеганию неприятных моментов. Для этого существуют различные инструменты. Например, колеса фортуны, ежедневные ачивки за вход или чаты.

Один из таких драйверов — социальная мотивация. Он строится на человеческой потребности в принятии, взаимодействии с комьюнити и обратной связи от других. Именно поэтому, чтобы решить задачу повышения вовлеченности пользователей, мы начали искать инструмент, который принесет клиенту ценность от взаимодействия с другими юзерами.

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

— реализовать MVP-функционал комментариев;
— запустить фичу на небольшой сегмент пользователей.

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

Выбираем между решением из коробки и собственной разработкой

Для проверки гипотезы нужно было либо выбрать решение из коробки, либо самостоятельно написать его так, чтобы оно одинаково функционировало на всех платформах (iOS, Android и Web). У каждого варианта свои плюсы и минусы: 

Решение из коробки. Подойдет, чтобы быстро и относительно недорого проверить гипотезу, для тестирования есть множество инструментов: Disqus, Commento, Getstream и другие. 

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

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

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

Мы оценили пул работы и поняли, что сможем самостоятельно написать модуль комментариев. При этом раскладе за несколько спринтов реализовали MVP, увидели первые результаты. Затем итерационно дорабатывали. За два квартала мы создали пять элементов для веб-версии и мобильных приложений на Android и iOS: 

• Список комментариев.

• Строку ввода сообщения.

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

• Возможность удалить свой комментарий.

• Блок реакций на комментарии — дали выбор из пяти эмоджи.

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

Level up: добавляем чаты 

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

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

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

Аналитика показала, что гипотеза жизнеспособна, и мы решили сделать чаты уже в продукте. Запланировали добавить фичи создания групп, где пользователи смогут общаться и ставить реакции на сообщения, а администраторы — модерировать процесс. Чтобы оценить скоуп задач, нам хватило уже полученного опыта интеграции комментариев. 

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

Одним из подходящих вариантов был Getstream. Мы не рассматривали его для интеграции комментариев, потому что у него на тот момент не было SDK на Kotlin. Но к началу разработки чатов он уже обновился и всё поддерживал — решили использовать его.

Добавляем чаты из Getstream

В Getstream есть всё необходимое для интеграции: каналы, инвайты в чаты, реакции, отличная модерация, возможность создавать новые обсуждения, а главное — хороший API. 

На интеграцию Getstream мы потратили спринт, чаты заработали из коробки, нужно было лишь обновить UI. На этот этап мы потратили чуть больше времени из-за плохой документации. Разберем по компонентам, как всё получилось.

<ErrorBoundary
 fallback={(
   <ErrorLoading
     step="init_chat"
     onReloadClick={handleReloadClick}
   />
 )}
>
 <ClientSuspense fallback={(<Preloader />)}>
   <Chat
     apiKey={apiKey}
     userId={profile.id}
     avatar={profile.avatar?.url}
     username={profile.nickname}
     userToken={token}
     isVisible={isVisible}
   />
 </ClientSuspense>
</ErrorBoundary>

Пример интеграции компонента чата. Для инициализации достаточно прокинуть token, apiKey и данные пользователя, который будет авторизован

Из коробки Getstream можно легко установить пакет в ваш проект, добавить токен авторизации и apikey с ником пользователя — интеграция готова. С точки зрения стека мы использовали React + TS, а также Jotai как стейтменеджер.

Так выглядит компонент инициализации чата с небольшими доработками и фичами:

// Компонент инициализации чата
// prop isVisible нужен для того, чтобы рендерить чат всегда, но показывать его только при открытии его в интерфейсе.
// удобно для нотификаций, например
export const ChatStream: FC<ChatStreamProps> = memo(({ isVisible }: ChatStreamProps) => {

  // обязательный параметр для инициализации
  const apiKey = STREAM_API_KEY || '';

  // получаем данные пользователя
  const [profileLoadable, refreshProfile] = useAtom(profileLoadableAtom);
  // получаем уникальный токен от бэкенда
  // можно его сгенерировать и на фронте, https://getstream.io/chat/docs/react/tokens_and_authentication/,
  // но нам важно было вынести эту логику на бэкенд
  const [chatTokenLoadable, refreshSChatToken] = useAtom(chatTokenLoadableAtom);

  const streamChatActiveChannelId = useAtomValue(streamChatActiveChannelIdAtom);

  const { state: profileState, data: profile } = profileLoadable;
  const { state: tokenState, data: token } = chatTokenLoadable;

  if (profileState === 'loading' || tokenState === 'loading') {
    return <Preloader />;
  }

  if (profileState === 'hasError' || 'status' in profile) {
    return (
      <ErrorLoading
        step="get_profile"
        onReloadClick={handleReloadClick}
      />
    );
  }

  // рисую компонент создания никнейма для пользователей, у которых его еще нет
  // для чата никнейм не обязательный, но тогда он его сам сгенерирует для пользователя
  // перед тем как будем запрашивать токен, создаю экран
  if (!profile.nickname) {
    return (
      <NicknameChat onSubmit={handleReloadClick} />
    );
  }

  if (tokenState === 'hasError' || 'status' in token) {
    return (
      <ErrorLoading
        step="get_token"
        onReloadClick={handleReloadClick}
      />
    );
  }

  return (
    <ErrorBoundary
      fallback={(
        <ErrorLoading
          step="init_chat"
          onReloadClick={handleReloadClick}
        />
      )}
    >
      <ClientSuspense fallback={(<Preloader />)}>
        <Chat
          apiKey={apiKey}
          userId={profile.id}
          avatar={profile.avatar?.url}
          username={profile.nickname}
          userToken={token.token}
          isVisible={isVisible}
        />
      </ClientSuspense>
    </ErrorBoundary>
  );
});

А это непосредственно сам чат:

import type { Event, TranslationLanguages } from 'stream-chat';

import { StreamChat } from 'stream-chat';
import { Chat as ChatComponent} from 'stream-chat-react';
import 'stream-chat-react/dist/css/v2/index.css';

type ChatProps = {
  apiKey: string;
  userId: string;
  username: string;
  userToken: string;
  avatar?: string;
  isVisible: boolean;
};

const Chat: FC<ChatProps> = ({ apiKey, userToken, userId, username, avatar, isVisible }) => {
  // у Getstream из коробки есть хук темы — светлая/темная и другие
  const [theme] = useCurrentTheme();

  // помидорка-нотификация о новых сообщениях
  const setStreamChatNewMessagesCount = useSetAtom(streamChatNewMessagesCountAtom);

  const chatClient = useMemo(() => StreamChat.getInstance(apiKey), [apiKey]);

  const handleNewMessage = useCallback(async (event: Event) => {
    if (event.user?.id !== userId) {
      const unreadMessages = await chatClient.getUnreadCount(userId);

      setStreamChatNewMessagesCount(unreadMessages.total_unread_count);
    }
  }, [setStreamChatNewMessagesCount]);

  const handleReadMessage = useCallback(async (event: Event) => {
    if (event.user?.id === userId) {
      const unreadMessages = await chatClient.getUnreadCount(userId);

      setStreamChatNewMessagesCount(unreadMessages.total_unread_count);
    }
  }, [setStreamChatNewMessagesCount, userId]);

  useEffect(() => {
    const connectUser = async () => {
      await chatClient.connectUser(
        {
          id: userId,
          name: username,
          image: avatar
        },
        userToken
      );

      const unreadMessages = await chatClient.getUnreadCount(userId);

      setStreamChatNewMessagesCount(unreadMessages.total_unread_count);
    };

    connectUser();

    chatClient.on('message.new', handleNewMessage);
    chatClient.on('message.read', handleReadMessage);

    return () => {
      chatClient.off('message.new', handleNewMessage);
      chatClient.off('message.read', handleReadMessage);
    };
  }, [[chatClient,userId,username,avatar,userToken,handleNewMessage,handleReadMessage,]]);

  if (!isVisible) {
    return null;
  }

  if (!chatClient) {
    return <Preloader />;
  }

  return (
    <main className={styles.chat}>
      <ChatComponent
        theme={theme.current === 'dark' ? 'str-chat__theme-dark' : 'str-chat__theme-light'}
        client={chatClient}
      >
        // компонент Chats (список чатов) кастомный
        <Chats userId={userId} />
      </ChatComponent>
    </main>
  );
};

export default Chat;

И компонент Chats: список чатов и сама страница активного чата со списком переписок и интерфейсом ввода сообщений.

export const Chats: FC<ChatsProps> = ({ userId }) => {
  // использую контекст для получения всех данных по чату
  const { client, channel, setActiveChannel } = useChatContext();

  const [chats, setChats] = useState<StreamChannel[] | null>(null);
  const [isChatsLoading, setIsChatsLoading] = useState(true);
  const [isChatsError, setIsChatsError] = useState(false);

  const setNotificationStatus = useSetAtom(notificationStatusAtom);
  const [streamChatActiveChannelId, setStreamChatActiveChannelId] = useAtom(streamChatActiveChannelIdAtom);

  const handleBackToChatList = useCallback(() => {
    const currentUrl = new URL(window.location.href);

    setActiveChannel();
    currentUrl.searchParams.set(CHAT_TAB, '');
    setStreamChatActiveChannelId(null);
    window.history.pushState(null, '', currentUrl.toString());
  }, [setStreamChatActiveChannelId]);

  const getChannels = useCallback(async () => {
    const filterChannel = { type: 'messaging', members: { $in: [userId]}};
    const sortChannel: ChannelSort[] = [{ last_message_at: -1 }];

    setIsChatsError(false);

    try {
      const channelList = await client?.queryChannels(filterChannel, sortChannel, { limit: 30 });

      setChats(channelList);

      if (streamChatActiveChannelId) {
        const channelFromUrl = channelList.find(
          (channelItem) => channelItem.id === streamChatActiveChannelId
        );

        if (!channelFromUrl) {
          handleBackToChatList();

          return;
        }

        setActiveChannel(channelFromUrl);
      }
    } catch {
      setIsChatsError(true);
    } finally {
      setIsChatsLoading(false);
    }
  }, [client,userId,streamChatActiveChannelId,handleBackToChatList]);

  useEffect(() => {
    getChannels();
  }, [streamChatActiveChannelId]);

  if (isChatsLoading) {
    return <Preloader />;
  }

  if (!chats?.length || isChatsError) {
    return <ErrorAccess />;
  }


  // что происходит дальше:
  // при успешном рендере показываем компонент списка чатов
  // компонент Channel, Window, ChannelHeader, MessageList, MessageInput и Thread — из коробки Getstream, их не меняли
  // они являются core чата, документация: https://getstream.io/chat/react-chat/tutorial/#initial-core-component-setup
  return (
    <>
      {!channel && (
        <List
          userId={userId}
        />
      )}
      <Channel
        channel={channel}
        EmojiPicker={EmojiPicker}
      >
        <Window>
          {!!channel && (
            <BackToChatsButton onCLick={handleBackToChatList} />
          )}
          <ChannelHeader />
          <MessageList />
          <MessageInput
            maxRows={5}
            minRows={1}
            grow={true}
          />
        </Window>
        <Thread autoFocus={true} />
      </Channel>
    </>
  );
};

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

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

В заключение

При работе над новыми проектами важно понимать, какие цели есть у бизнеса и какой MVP может их закрыть. Может быть ситуация, когда вы целый квартал внедряете готовое решение, хотя бизнесу было бы достаточно обычной формы ввода сообщения и списка комментариев. 

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

Закончить свою публикацию хочу фразой: Don’t build a game. Build a system where people want to keep playing, что переводится как «Не создавайте игру. Создавайте систему, в которую людям захочется возвращаться».