Единственный в России онлайн-конструктор для создания прототипов сайтов с уникальной функцией краулинга

Это наш собственный проект с постоянной поддержкой сервиса без перерыва в течение четырёх лет

Описание проекта

Structura.app — первый и единственный российский сервис, позволяющий всего за несколько минут собрать прототип будущего сайта.

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

Готовый прототип можно экспортировать в четырёх популярных форматах или поделиться ссылкой на онлайн-проект для совместного редактирования.

Идея проекта

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

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

Чтобы не отставать от тренда импортозамещения в 2020 году, мы решили разработать сервис по созданию прототипов сайтов для российской аудитории.

В этом проекте мы использовали российский фреймворк Jmix, входящий в реестр российского ПО. И сам инструмент Structura.app после запуска также вошёл в этот реестр.

«В разработке продуктов меня цепляет доступ к массовой аудитории. Здесь я могу получить 10 000 клиентов за год. Мысль масштаба, что моим сервисом пользуются миллионы, очень привлекает», основатель сервиса Евгений Боровков

Главная мысль

Мы любим и умеем делать сложные проекты. Structura.app — это большая система с разветвлённой архитектурой и с множеством микросервисов.

Благодаря современной микросервисной архитектуре обеспечивается надёжная устойчивость инфраструктуры. Проект выполнен целиком с использованием best practice на 2020-2024 годы.

Какую бизнес-задачу решает

Structura.app полностью закрывает потребность в создании прототипов сайтов для российского рынка.

Этапы разработки

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

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

«Понятность в деньгах, понятность в ценностях, понятность во всём — вот основа Structura.app», основатель сервиса Евгений Боровков

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

Первая версия логотипа. О том, почему мы переименовали сервис, писали отдельно здесь

Текущая версия логотипа

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

Составляющие сервисы мы поделили на две части. Первая — это сайт. Он, в свою очередь, делится на фронтенд и бэкенд. Фронтенд — это визуальная часть сайта, то, что видят пользователи, его писали на React. Бэкенд — то, на чём работает сайт, его видят только разработчики, он у нас на Strapi.

Вторая часть — это ядро системы. Его бэкенд на Jmix, фронтенд на React.

Краулер разрабатывали на Scrapy, интерфейсом к нему служит API.

Одна из первых версий сайта

Один из первых вариантов страницы краулера

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

Выбирали из готовых решений. Лучше всего для наших нужд подошёл фреймворк Jmix, работающий на базе Java (Spring Boot). Это наша отдельная любовь, которая экономит часы работы нашим разработчикам и вообще очень полезная в разработке вещь.

После запуска продукта перешли на обычный рабочий ритм. Он у нас выглядел так:

— Для реализации новых функций заглядываем в бэклог, который держим в Yonote (переехали из Confluence в российский сервис);

— Выбираем приоритетные функции и ставим по ним задачи в Jira (планируем сменить на российское решение);

— Репозиторий держим на своём собственном GitLab, также у нас есть собственный Docker Hub;

— Под VPN работает закрытый тестовый контур и админ-панель продового контура;

— Каждый разработчик работает в своей ветке, потом это всё пушится в мастер и автоматически раскатывается на тест;

— Отдельные паплайны выстроены на сайт и сервис, так как эти части продукта разработаны с помощью разных технологий. Сделано это в том числе из соображений безопасности;

— После выкатки на тест тестировщики тестируют новые функции, и если нет ошибок, мы выкатываем обновлённую версию на прод.

Кроме этого, у нас есть две базы данных: в первой хранится информация о пользователях, во второй — данные краулинга. У краулинга есть также отдельное файловое хранилище, а сам он написан на фреймворке Scrapy для Python.

Чтобы быстро находить ошибки в системе и также быстро их чинить, мы используем стек Elastic Search. Это значит, что хранилище и работа с логами организована через ELK-стек. А чтобы собирать аналитику и получать красивые графики, используем Metabase.

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

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

Поэтому мы решили внедрить готовое решение Listmonk и собственный почтовый клиент с интерфейсом на Mailu.io.

Первые итоги

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

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

Так для первого запуска удалось собрать ~ первых 100 пользователей.

Со временем стали появляться статьи на vc.ru, Хабр, Жажда, Интервью Эйдж и т.д. Благодаря постоянной цитируемости сервиса и по сей день на сайте регистрируются десятки новых пользователей.

Конверсия по использованию инструмента варьируется от 80 до 95%.

У проекта есть награды Продукт месяца #1 и Продукт недели #2 на Product Radar.

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

Текущая версия главной страницы сайта

Страница с проектами

Окно с выбором шаблона

Страница с выбранным шаблоном

Окно с запуском краулера

Планы

Бэклог Structura.app в Yonote

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

Для приоритизации задач мы используем метод PIE — Potential, Impact, Easy — Потенциал, Влияние, Лёгкость.

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

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

Также идеями по дальнейшему развитию делился в обзоре проекта на vc.ru и в своём Телеграм-канале основатель Structura.app. Среди таких идей — новые форматы для выгрузки прототипов, кастомизация блоков и горячие клавиши.

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

Технологии

Java
Jmix

Python
Scrapy

NuxtJS

Nginx

PostgreSQL

MongoDB

MinIO

RabbitMQ

Команда

Боровков Евгений — Основатель и CEO

Годлевский Дмитрий — Архитектор и Senior Java
Хромов Юрий — Java dev

Новиков Николай — DevOps

Подальян Дмитрий — Фронтенд

Шарунов Андрей — Фронтенд

Кочанов Андрей — Тестировщик

Огорелин Владислав — Дизайн

Кочанова Александра — Копирайтинг

Миленин Евгений — Проджект-менеджер

Гогорян Даниил — Системный аналитик

Цитаты

Ахмад Боков — пока нет, поэтому этот раздел не публикуем