Здесь в Окленде обозначилась проблема. Чаты пришли на замену электронной почте. Рынок чат-приложений, чатботов (Telegram, Slack, MS Teams) новый и неизведанный. Крупные компании переезжают одна за другой в чудный мир хаотического общений чатиков. Два года назад мы создали Кармабот. Это бот для учёта плюсов, посланных коллеге «в карму». Из этих маленьких актов взаимной благодарности строятся профили участников команды. В долгосрочной перспективе из шума коммуникаций Кармабот распознаёт важные сигналы и определяет успеваемость каждого сотрудника.
Кто-то пользуется ботом для системы бонусов, кто-то для повышения в конце года использует информацию, кто-то для веселья и ежемесячных призов «Лучший коммуникатор». Мы старались построить гибкую систему.
Старались, старались, да перестарались. Получилось сложно, и, что называется, образовательная кривая довольно крутая и длинная получилась. Кучу времени занимает внедрение продукта в клиентскую рабочую культуру. Покажу сегодня на конкретном примере сколько усилий тратится на исправление таких, казалось бы, мелочей.
Проблема одного стартапа
Появилась идея, что интерактивный тур будет продавать лучше, чем видео: повысит конверсию. Кроме этого, мы предположили, что в тур люди инвестируют больше времени и не только научатся, как пользоваться Кармаботом, но и породнятся с ним, как с IKEA.
Планирование
Посмотрели как работают Slack и Teams, проанализировали основные действия, выделили необходимые фичи приложений, которые нам потребуется имитировать, для демонстрации нашего бота, а именно – имитация каналов / групп / команд, окно чата и разные типы сообщений (текст, картинка, экшен-баттоны, karmabot cards), ввод сообщений и обработка вводимых команд.
Делаем упрощенный прототип и дизайн, сходный с оригинальными приложениями, выбираем только то, что пригодится для демонстрации базовых возможностей бота.
Для среды разработки был выбран Nuxt.js, генератор статических сайтов, работающий на реактивной связке Vue + Vue router + Vuex.
Начало разработки
Наличие одного глобального хранилища (Vuex) очень упростило всю разработку тем, что в любой момент из любого компонента доступны ссылки на единственное истинное хранилище, любые изменения в котором логируются и вызывают реактивные изменения во множестве связанных компонентов
Также присутствует интернационализация, русский и английский язык (обусловлено тем, что лендинг мультиязычный), реализовано с помощью модуля nuxt-i18n и файлов локализации
Для создания антуража и атмосферы команды и движухи внутри нее, при инициализации приложения слачайным образом генерируются пользователи и записываются в глобальное хранилище, а также для них генерируются базовые значения, необходимые для нашего чат-бота: количество кармы (на базе этих данных строится таблица лидеров среди команды) и karmafeed, имитирующий выдачу кармы в прошлом нашими сгенерированными юзерами демо-команды. Также каждому юзеру генерируется его текущий статус (работает, брейк, оффлайн), для демонстрации фичи karmabot status.
Рендеринг
Далее в зависимости от того какой апп демонстируется (слэк или мс) идет его рендеринг, собранный из компонентов, связанных собой через единое хранилище, которые отображаются параллельно
Было полностью сымитировано поведение чата — наличие списка сообщений (на старте мы также генерируем несколько сообщений от пользователей, для антуража и большей вовлеченности), и поле ввода, которое при “отправке” сообщения анализируется на предмет команд нашего бота.
Идет упрощенный разбор команд с помощью оригинальных регулярных выражений из исходного Кармабота. В зависимости от введенных команд инициируются различные экшены, которые определяет система обработки сообщений и в теле чата появляются сообщения и реакции от бота, полностью имитирующие реальное поведение кармабота.
Для удобства пользователя мы сделали панель с шорткатами, по клику на которые в поле ввода записывается команда и отправляется, запуская процесс ее обработки.
Результат
Мы добавили события Google Analytics и изучаем связь конверсии с наличием интерактивного теста. Эмуляторы вызвали интерес у комьюнити Hacker News, больше 5000 человек проиграли тест, кто-то зарегистрировался и попробовал сам Кармабот. Очень надеемся, что созданный “интереса ради” модуль, поможет улучшить показатели.