Мне надоело делать скриншоты и я написал бота Chatlogs, чтобы пересылать переписку ссылкой

Привет, Радар! Меня зовут Виталий Чебоксаров, я разработчик проекта Chatlogs. Это Телеграм-бот, который превращает пересланные сообщения из чатов в аккуратные веб-страницы.

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

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

И решил попробовать сделать это по-другому.

Проект на Product Radar:

Идея оказалась проще реализации

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

Скриншот интерфейса Telegram-бота Chatlogs: приветственное сообщение с инструкцией, как переслать переписку для создания веб-страницы, и кнопка «Открыть сайт»
Весь интерфейс бота, одно приветственное сообщение и две кнопки. Дальше от пользователя нужно только одно действие: переслать сообщения.

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

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

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

В итоге получается не скриншот, а отдельная страница, которой можно нормально поделиться.

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


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

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

Скриншот: пример переписки, опубликованной в сервисе chatlogs
Чат об архитектуре в chatlogs

По сути это работает везде, где переписка сама по себе ценна: как аргумент, как история, как то, что просто жалко потерять в ленте чата.

Сначала мне казалось, что на этом всё. Но быстро стало понятно: самое интересное начинается после того, как сообщения уже научились превращаться в страницу.

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

Оказалось, что превратить сообщения в страницу  это только начало, а вся настоящая работа именно в этих мелочах. Грамотно принять и обработать нужные форматы данных, которые передает Телеграм в виде json.

Потом появилась публичная лента

В какой-то момент возникла ещё одна мысль.

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

Так появилась лента Chatlogs.

Скриншот сервиса chatlogs
Лента в chatlogs, есть сортировка по новизне или по оценкам и разделы: разработка, смешное, рабочее, семейное. Заголовков у публикаций нет, вместо превью сразу видна сама переписка.

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

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

Главная единица здесь — именно переписка.

Скриншот переписки в Chatlogs, где разработчик скидывает лог ошибки «TypeError: cannot read 'id' of undefined», и собеседник отмечает, что это не скриншот, а текст — преимущество сервиса перед скриншотами
Пример сюжета из ленты.
Скриншот переписки в Chatlogs, где один участник ссылается на старое обсуждение
Примеры: типичные сюжеты из ленты.

А у ленты появился канал

Следом за лентой завёл и Телеграм-канал — t.me/chatlogsme.

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

Скриншот Telegram-канала Chatlogs, где опубликована переписка «Спросил в чате роадмап по кибербезу — получил роадмап в плиточники» с реакциями и ссылкой на публикацию
Получился приятный формат: не хочешь ходить в ленту сам, лучшие переписки приходят в Телеграм. А под постами читатели голосуют реакциями в спорах, из которых эти переписки родились.

Что оказалось самым сложным

Сам бот собрать было не так сложно, как я представлял. 

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

Сложно было сделать страницу удобной для реального человека.

Вот несколько вопросов, на которые пришлось искать ответ, и что в итоге вышло.

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

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

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

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

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

Если всё сделано правильно — человек просто читает переписку и не думает о том, почему ему удобно.

Скриншот: пример опубликованной в chatlogs переписки о kubernetes
Публикация уже со скрытыми именами: остаётся только время. Мобильный экран здесь главный сценарий, дата показывается один раз на группу сообщений, а размер шрифта пользователь переключает сам.
Скриншот переписки в Chatlogs на тему Java и ИИ, показывает, как выглядят аватарки и имена собеседников в публикации, и как читается цепочка сообщений
Лента с телефона.
Скриншот переписки в Chatlogs, где участник спрашивает, кто пытался переписать React, и получает ссылку на Preact — иллюстрация того, что ссылки в переписке остаются кликабельными
Главное отличие от скриншота: ссылки остаются ссылками, а текст, текстом, который можно выделить и скопировать.

Что я понял за время работы над Chatlogs

Первое — хорошая идея не обязательно должна быть сложной. Chatlogs начался с очень простой мысли: «Почему бы не делиться переписками ссылкой вместо скриншотов?» Но даже вокруг такой простой идеи быстро появляется огромное количество задач.

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

Именно поэтому и пришел на Радар.

Зачем мне обратная связь

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

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

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

Попробовать Chatlogs

Бот и публичная лента уже работают. Ссылка на бот: https://t.me/chatlogsmebot

Пришлите боту любую переписку и посмотрите, что получится. А если найдёте что-то неудобное или придумаете, чего не хватает, напишите.

Сейчас для нас это, пожалуй, самая полезная часть работы над Chatlogs.

Будем рады поддержке лайком и комментом на Product Radar:

⭐️ Эту статью написал «Друг Радара». Вы можете добавить свою статью или обсудить ее идею с нами в боте. Мы поможем на всех этапах подготовки и публикации статьи, а также разметим ее в сторисах нашего Telegram-канала @productradar_official. Редакция Блогов Product Radar бережно сохранила авторский стиль, орфографию и пунктуацию.

👨‍🚀 Истории основателей
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии