Первый маркетплейс спецтехники в Telegram: как мы интегрировали интернет-магазин в мессенджер

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

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

Команда Rukki Pro не из тех, кто любит ждать, поэтому мы поставили себе задачу: за несколько дней полностью реализовать и связать с бэкендом сервиса интернет-магазин спецтехники. Выглядеть он должен как наше приложение для iOS и Android или веб-версия на сайте — но уже заточенный под Telegram. Ребята из отдела разработки начали работу сразу же: первые мысли появились вечером в пятницу.

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

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

Раз идея с Nest и Next не увенчалась успехом, пришлось быстро все переиграть: собрать проект на React и подготовить менеджер состояния для запросов. Пять часов работы — и архитектура была готова, фронтенд начал работу над версткой и интеграцией, а бэкенд продолжил дорабатывать проект параллельно.

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

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

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

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

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

Next — это фреймворк, основанный на React, который позволяет создавать веб-приложения с улучшенной производительностью и улучшенным пользовательским опытом с помощью дополнительных функций предварительного рендеринга, таких как полноценный рендеринг на стороне сервера (SSR) и статическая генерация страниц (SSG)

SSR — (анг. аббревиатура от Server Side Rendering) это технология, которая позволяет, с помощью Node. js, запускать JavaScript код на сервере (а не в браузере как обычно) и готовый результат отправлять пользователю, избегая лишней нагрузки на его браузер и компьютер. В первую очередь, SSR нужен для оптимизации скорости работы сайта и SEO продвижения

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