Как мы сделали эмулятор Слэка для демонстрации возможностей Кармабота

Здесь в Окленде обозначилась проблема. Чаты пришли на замену электронной почте. Рынок чат-приложений, чатботов (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 человек проиграли тест, кто-то зарегистрировался и попробовал сам Кармабот. Очень надеемся, что созданный “интереса ради” модуль, поможет улучшить показатели.

Ionic Sketch 4 обновился и попал на Product Hunt (опять)

Здесь в Окленде мы прошерстили компоненты нового билда Ionic 4 Beta и собрали новую версию популярного (больше 500 покупок) Skretch-темплейта Ionic Sketch. В этом посте будет много девелоперского линго, он не совсем на русском языке этот пост.

Ionic Инструмент очень удобный Ionic позволяет на собирать гибридные мобильные приложения для нескольких платформ. Нужны знания Angular и общее понимание веба и мобильных сред разработки. Это не нативная скорость, конечно, есть свои плюсы и минусы, но для быстрых и относительно простых проектов вроде estimapp.com Ionic, как среда разработки вполне годится.

Больше года назад мы на базе гениальных авто-лейаутов Sketch пересобрали все 60 доступных в Ionic мобильных компонентов. Рисуешь приложение в Sketch, исправляешь глобальные стили, не добавляешь никаких кастомных элементов, подстраиваешь под дизайн, потом бац-бац буквально из хелперских сниппетов сляпываешь апп. Логику прописал, ключи добавил и вот приложения под 3 платформы, готовы к публикации, выглядят и оперируют, как задумано.

Недавно вышел большой апдейт Ionic, и мы подтюнили свой бандл. Его даже зафичурили на Product Hunt (скидка в комментах).

Скачать бесплатное демо Ionic Sketch можно тут »

Нужен дизайнер: удалённая работа в новозеландской цифровой студии дизайна и разработки

Рабочие руки в Sliday

Здесь в Окленде нам нужны рабочие руки. Уж скоро 10 лет будет, как мы затеяли тут бизнес под названием Sliday.

И вот для выполнения регулярных заказов требуется цифровой дизайнер, способный разработать хороший сайт, читабельный блог, удобный веб-интерфейс, качественное приложение на iPhone/iPad/Android — по сути, с дизайнером мы вместе придумываем, что и как должно выглядеть на рабочей поверхности экрана. Вершина айсберга наших компанейских трудов, то, что не закрытой соглашениями о неразглашении: страница-портфолио Sliday.

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

  • Основной инструмент — Sketch App. Конторская лицензия будет, но нужен, конечно, свой Mac для работы.
  • Abstract для контроля версий дизайнов.
  • InVision App для создания интерактивных прототипов, обсуждений концептов, клиентских презентаций и брэйнсторминга.
  • Adobe CC по мелочам: файлы от иллюстратора принять, подшаманить фото. Фотошоп — точно не основной инструмент у нас.
  • Все коммуникации через Slack, там весело.
  • Таски, проекты — в Asana, это рутина, но помогает справиться с хаосом.
  • Gitlab для внутренней документации.

Задачи будут самые разные. Будем обучать, помогать, направлять, содействовать. Благо, опыта достаточно; было бы желание. Программировать не придётся, но как устроены веб (JS + HTML + CSS), мобильный Auto-Layout и Material Design — понимать обязательно. Атомический дизайн – это прям вообще будет бонус, приятно обсудить.

Мы предлагаем:

  • Работа исключительно удалённая, общение через Slack.
  • Оплата ежемесячно на основе ежедневных отчётов в Freshbooks, оклада и бонуса. Банковским переводом.
  • Оклад: надо договариваться. Есть больничные, отпускные (через год работы), план карьерного роста и плюшки для долгожителей.
  • Бонус: определяется справедливой кармической системой
  • Cупер-срочные проекты и дополнительные усилия на выходных обсуждаются и оплачиваются отдельно.

Пробный период 3 месяца. Полная занятость, если сработаемся, позволит стабильно зарабатывать. Некоторые ребята трудятся у нас с 2010 года. Кто-то трудится из дома, кто-то переехал из-за Урала в Москву, кто-то из России в Голландию, и теперь двигается в сторону Малайзии.

Обязательно:

  • Английский язык: обязательно читать и писать. Grammarly и Google Translate помогут, конечно, но полная оторванность от английской среды сильно осложнит рабочие будни. Задания и комментарии приходят на английском. Все клиенты англоязычные.
  • Выполнение заявленных сроков и доступность. Остальное приложится. Все люди взрослые и должны уметь говорить правду, а не выдумывать вместо этого легенды и пропадать.

Лирическое предзаключительное отступление. Мы верим, что за удалённой работой будущее. С экономической точки зрения в современном глобальном мире выгодно сотрудничать с лучшими из лучших удалённо, нежели вынужденно соглашаться на то, что есть, так сказать, нена местах. Нанимать людей в социалистической Новой Зеландии дорого и сложно. Разброс по зарплатам для местных специалистов с 1-5 годами опыта $40000-$65000 новозеландских долларов в год. Надеюсь, эта информация поможет оценить ожидания.

Пожалуйста пишите на [email protected]. Расскажите знакомым.

Кармабот — чат бот для успешных команд

Здесь в Окленде, мы с любимым детище Кармаботом, которому уж больше двух лет исполнилось, попали в Y Combinator Startup School на программу Advisor Track. Что значит, крутые ребята, прошедшие программу YC, помогают избранным стартапам решить обычные проблемы, не наступить на обычные грабли. Свои компании они успешно провели через YC и нередко смогли презентовать инвесторам так, что те вложили миллионы. Не секрет, что Y Combinator интересуется компаниями, которые могут заработать $1000000000 (миллиард долларов), не меньше. И в целом можно сказать, что получается: список топ-100 YC-компаний, например — знакомые все лица.

  • Топ-100 оценивается в 100 миллиардов долларов.
  • Создано 28000 рабочих мест.
  • В основном те, что оценены в миллиард и больше — это биотехнологии, бизнес-решения, инструменты для разработки и, конечно, потребительские продукты тоже.

Мы заходили с Кармаботом, как бизнес-решение для бизнес-команд. Оно и понятно — чатбот платный, решение не тривиальное. Бриллиантовый дым рассеялся довольно быстро. Строить бизнес по-настоящему — это очень сложно.

Собирая плюсики в чатегах с 2016 года, мы научились строить профили работничков и накладывать их на компанейской ценности. За 10 недель в стартап-школе мы разобрались наконец, кто наш сферический покупатель в вакууме, и что ему нужно. Как оказалось, это менеджеры и владельцы бизнесов. Жаль, что управляющий YC не смог получить ответ на этот свой вопрос во время интервью. Интервью мы в итоге не прошли, но надежды не потеряли. Достаточно того факта, что управляющий многомиллионной компании пусть даже на 10 минут смог себе представить, что Кармабот — это миллиардный бизнес с потенциалом.

Логическим завершением стало создание отчётов производительности. Их можно использовать во время самого важного разговора — о повышении зарплаты работнику. Буквально принести распечатку со всеми микро-достижениями и косяками за год. Называется это дело Karmabot Performance, и было оно опубликовано на главной Product Hunt (опять!).

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

Поддерживаются Slack, MS Teams и Telegram (бесплатный!), куча фич и активный саппорт.

Попробуйте Karmabot, если хотите »

QR Print — бэклинки для бумажных распечаток

Здесь в Окленде мы раз в неделю с ребятами собираемся поиграть на музыкальных инструментах, и, поскольку безграмотные, храним композиции в длинном онлайн-документе. «Партитуру» порой распечатываем и приносим на репетицию, делаем там заметки и синхронизуем с цифровой версией после. Принёс я как-то композицию номер восемь, а там в описании ссылка на звуковой файл, мол, тут играть, как по ссылке. Ссылка длинная, ужасная, замучился перепечатывать. Расстроился. Возникла идея для продукта.

Проблема

📄+🔗 → 🖨️ → 📄 = 😿

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

Решение

📄+🔗 → 🖨️ → 📄+🔳 → 🤳 → 🔗 = 😺

Сделали в Sliday расширение для Google Chrome: печатает рядом со ссылками QR-коды. На iPhone вообще просто: открыл стандартную камеру, навёл, вот те и ссылка.

QR Print на Product Hunt сегодня »

Неистово плюсуем, я считаю!