Как собрать свой SaaS на WeWeb за выходные: От идеи до первого платежа.
Добро пожаловать, дорогой читатель! Признавайся, у тебя же наверняка есть та самая папка side-projects/, где лежат гениальные идеи для SaaS, которые «как-нибудь потом»? Та самая, что пылится рядом с мыслями о настройке серверов, писании бэкенда и вечной борьбе с деплоем. А что, если я скажу тебе, что «потом» может наступить в эти же выходные?
Сегодня мы пройдем весь путь от идеи до рабочего, публичного SaaS-продукта. И сделаем это на WeWeb — визуальной no-code платформе, которая выстрелила не потому, что «позволяет делать сайты», а потому, что даёт полный контроль над логикой, данными и интерфейсом без необходимости писать тонны бойлерплейт-кода.
Поехали!
🚀 Часть 0: Зачем WeWeb? Философия «Императивного No-Code»
Основанная в 2019 году Рафаэлем Минько (Raphaël Mignot), WeWeb с самого начала позиционировала себя не как конструктор лендингов, а как IDE для создания веб-приложений. Их миссия — дать инженерам и продуктовикам скорость no-code и гибкость pro-code.
В чём фишка? Большинство no-код инструментов (вроде Bubble) используют декларативный подход: «перетащи кнопку → настрой действие в диалоговом окне». WeWeb выбрала императивный подход. Ты почти как в коде:
- Создаёшь переменную userList.
- Пишишь выражение (expression) на JavaScript для её фильтрации: $page.data.userList.filter(user => user.isActive).
- Привязываешь это выражение к компоненту таблицы.
Это даёт невероятную гибкость. Платформа построена на Vue.js 3 под капотом, а на выходе ты получаешь чистый, оптимизированный код, который можно экспортировать и дорабатывать самостоятельно. Это ключевой момент для SaaS, где логика часто сложнее «кнопка-форма».
Официальные ресурсы, с которых стоит начать:
Документация (очень подробная):
А теперь — к практике. Наш проект: HabitForge — минималистичный трекер привычек с монетизацией. Пользователь ставит цели, отмечает прогресс, а после 7 бесплатных дней подписка платная. Классический SaaS-MVP.
📐 Часть 1: Пятница вечером. Проектируем данные и ядро
Шаг 1: Где живут данные? Выбираем бэкенд (Backend as a Service) WeWeb не привязывает тебя к своему бэкенду. Ты можешь подключить любой источник через REST или GraphQL API. Для скорости выберем Xano или Supabase — они идеальны для старта.
- Почему? Они дают мгновенную базу данных, авторизацию, логику на сервере (функции) и файловое хранилище через API. Не нужно писать ни строчки серверного кода.
- Действие: Создаём проект в Supabase (это open-source Firebase). В SQL-редакторе создаём две таблицы:
- Всё, бэкенд готов за 15 минут. Ссылка: Документация Supabase
Шаг 2: Создаём проект в WeWeb и подключаем данные
- Действие: Регистрируешься на WeWeb, создаёшь новый проект. В левой панели идёшь в Data → Data Sources → Add. Выбираешь REST API.
- Настройка: Вводишь URL твоего Supabase: https://your-project-ref.supabase.co/rest/v1/. Добавляешь в заголовки (Headers) API-ключ: apikey: твой_anon_key. Теперь WeWeb видит твои таблицы как локальные коллекции данных. Это магия!
🎨 Часть 2: Суббота, утро. Строим интерфейс и логику
Шаг 3: Авторизация — первый и главный экран Без пользователей нет SaaS. В WeWeb есть готовая интеграция с Auth0, Supabase Auth, Firebase.
- Действие: Идёшь в Plugins → Добавляешь «Supabase». Настраиваешь конфиг (URL, anon key). На странице логина перетаскиваешь компонент Supabase Login Form из палитры. Готово. За 10 минут у тебя есть регистрация, вход, восстановление пароля. Разве это не чудо?
- Важно: В настройках проекта включаешь Router (маршрутизатор). Создаёшь страницы: / (лендинг), /app (личный кабинет, только для авторизованных), /app/settings (настройки).
Шаг 4: Личный кабинет — работа с данными в реальном времени Теперь самое интересное — отобразить и изменить данные пользователя.
- Действие: На странице /app добавляешь Repeater (повторитель) компонент. В его настройках в Data Source пишешь выражение:
- Да, это почти настоящий запрос на JavaScript! WeWeb поймёт его и выполнит.
- Внутри Repeater'а добавляешь текст {{current_item.title}} и кнопку +. Для кнопки в событии on click создаёшь Workflow (воркфлоу — цепочка действий). В нём: Действие «Run JavaScript»: let newVal = current_item.current_value + 1; Действие «Update Data in Supabase»: Выбираешь таблицу habits, где id = current_item.id, и указываешь, что поле current_value = newVal.Действие «Re-fetch Data Source»: Чтобы интерфейс мгновенно обновился.
За два часа у тебя уже есть работающее приложение с авторизацией, личным кабинетом и обновлением данных. Звучит странно, но на самом деле — это просто результат грамотной абстракции.
💳 Часть 3: Суббота, день. «Включаем» деньги (монетизация)
Шаг 5: Интеграция Stripe и логика подписки Без оплаты это не SaaS, а pet-project. Подключаем Stripe.
- Действие: Идёшь в Plugins → Stripe. Настраиваешь публичный ключ (публикуемый ключ).
- Логика: Нужно проверить статус подписки при входе. Создаёшь глобальную переменную userSubscription.
- При загрузке страницы /app запускаешь воркфлоу: Fetch Data: Запрос к Supabase: from('subscriptions').select('*').eq('user_id', $user.id).single(). Condition (Условие): Если запрос вернул status: 'active' или trial_ends_at > сейчас, то пускаем в приложение.Иначе — показываем модальное окно с призывом оплатить.
- Кнопка оплаты: В модалке — компонент Stripe Checkout. В его настройках указываешь price_id твоего ценового плана из Stripe. При успешной оплате Stripe отправит webhook на твой бэкенд (Supabase), где функция обновит статус в таблице subscriptions. Это уже чуть сложнее, но в документации Supabase есть готовые примеры.
Ссылки для углубления:
🚀 Часть 4: Воскресенье. Полировка и публикация
Шаг 6: Адаптив, состояния и финальные штрихи
- Адаптив: WeWeb — изначально responsive. Но стоит проверить на мобильных брейкпоинтах. Вверху экрана есть переключатель Desktop / Tablet / Mobile.
- Состояния загрузки: Для любого Repeater или компонента с данными можно задать States. Добавляешь состояние loading и привязываешь его к условию $w.dataLoading. Показываешь скелетон или спиннер.
- Переменные и выражения: Мощь WeWeb — в выражениях. Хочешь показать статистику? Создаёшь текстовый элемент и в его content пишешь: Выполнено {{ Math.round(($page.data.habits.filter(h => h.current_value >= h.goal).length / $page.data.habits.length) * 100) || 0 }}% целей Это живой, реактивный JavaScript.
Шаг 7: Публикация и первый пользователь
- Действие: В верхнем правом углу — кнопка Publish. Ты можешь опубликовать проект на домене WeWeb (your-project.weweb.io) или подключить свой кастомный домен (на платных тарифах).
- Среда: Можно иметь отдельные Draft (черновик) и Live (продакшен) среды. Это как Git-ветки для no-code.
- Аналитика: Подключаешь Google Analytics или Plausible через настройки проекта. Теперь можно смотреть на живых пользователей.
⚖ Итог: Что у нас получилось и куда дальше?
За выходные мы создали полнофункциональный SaaS-MVP с:
- Многостраничным приложением с роутингом.
- Авторизацией (Supabase Auth).
- Базой данных и API (Supabase).
- Сложной клиентской логикой (трекинг привычек, вычисления).
- Монетизацией (Stripe подписка).
- Публикацией на своём домене.
Это впечатляет, но нужно понимать границы:
Сильные стороны WeWeb для SaaS:
- Бешеная скорость прототипирования и выхода на рынок.
- Невероятная гибкость логики благодаря выражениям на JS.
- Экспорт кода: На Enterprise-тарифе можно экспортировать весь проект в код на Vue.js и дальше развивать его самостоятельно. Это «аварийный люк», снимающий страх vendor lock-in.
- Идеально для SaaS с чёткой, но не гиперсложной логикой: внутренние инструменты, маркетплейсы, кастомер-порталы, B2B-приложения.
Когда стоит рассмотреть другие варианты:
- Очень сложная реальная логика: Если нужны сложные алгоритмы или работа с большими данными на клиенте, возможно, традиционная разработка будет эффективнее.
- Масштабирование: Хоть WeWeb и хостит приложения, для миллионов пользователей нужно тщательно проектировать архитектуру бэкенда (того же Supabase).
Конкуренты? Да, есть Bubble (мощнее, но сложнее и с сильным lock-in), FlutterFlow (для мобильных приложений), Retool (для внутренних инструментов). Но WeWeb заняла свою нишу — «как писать код, но визуально» для веб-приложений.
Так что, дорогой читатель, в следующий раз, когда в голову придёт идея, не отправляй её в папку «потом». Запусти WeWeb, подключи Supabase, набросай интерфейс — и к воскресному ужину у тебя уже может быть живой продукт с первыми пользователями.
А это, согласись, лучший мотиватор для того, чтобы провести выходные с пользой.
🙌 Если этот пошаговый гайд был полезен, подписывайся — впереди разборы конкретных кейсов и архитектурных решений для no-code SaaS.
А ты уже пробовал собирать что-то на WeWeb или подобных платформах? Поделись опытом в комментариях — какие задачи решал, с какими трудностями столкнулся? Буду рад обсудить!