ХВАТИТ платить за Lovable! Создавайте SaaS-решения абсолютно бесплатно с помощью этого конструкто...
The Metaverse Guy
0:00 / 0:00
ХВАТИТ платить за Lovable! Создавайте SaaS-решения абсолютно бесплатно с помощью этого конструкто...
39 430 просмотров · 10 месяцев назад
The Metaverse Guy
245 тыс. подписчиков
39 430 просмотров · 10 месяцев назад
Устали платить за Bolt.new или Lovable AI? В этом пошаговом руководстве я покажу, как создать полноценное приложение полного цикла — фронтенд, бэкенд, аутентификацию и развёртывание — используя только бесплатные инструменты:
Создайте прототип фронтенда в Google AI Studio (в некоторых документах он же «Google Firebase Studio») с мощными функциями работы с изображениями.
Скопируйте код локально и продолжите работу в VS Code с помощью KiloCode (помощника по программированию ИИ с открытым исходным кодом) вместо платного приложения с курсором ИИ или Bolt AI.
Исходный код проекта: https://github.com/zainulabedeen123/a...
Добавьте аутентификацию с помощью Clerk (без сложной настройки кода — идеально для начинающих ИИ и вайб-кодинга).
Создайте базу данных Postgres на Neon.tech и подключите её (с MCP или без).
Разверните в Vercel на бесплатном тарифном плане.
По ходу дела я сравню Lovable AI и Bolt.new (плюсы и минусы), когда конструктор приложений без кода эффективен, а когда платформа для разработки ИИ помогает, и как сохранить свой стек приложений свободным. Если вы не разбираетесь в технологиях или новичок в инструментах для разработки ИИ-приложений, здесь подробно показано, как создать приложение с ИИ, не покупая lovable.dev или bolt.new.
Чему вы научитесь
Быстрому прототипированию в Google AI Studio (инструменты визуального редактирования и демонстрация миниатюр)
Переходу на локальную разработку с помощью KiloCode (OpenRouter + бесплатные модели)
Добавлению авторизации Clerk (вход через Google)
Настройке базы данных и таблиц Neon
Развёртыванию в Vercel в один клик (+ собственный домен)
Почему именно этот стек?
Это практичная альтернатива lovable AI и bolt.new для создания веб-приложений и SaaS-решений без кода. Вы увидите реальный переход приложения от прототипа к локальному коду и к полному развертыванию ИИ — быстро.
Ключевые слова, используемые для поиска:
Если вы сравниваете цены на lovable AI, обзор lovable AI, руководство по lovable AI или интересуетесь, как использовать Bolt.new AI, это пошаговое руководство демонстрирует полностью бесплатный альтернативный рабочий процесс с курсором и открытым исходным кодом ИИ-агентов. Отлично подходит для веб-разработки, тестирования конструкторов ПО на базе ИИ и создания SAAS-приложений с экспериментами на основе ИИ без подписки.
00:00 Введение: Перестаньте платить за Bolt/Lovable — бесплатный полнофункциональный путь
00:23 План из двух инструментов: прототип + сборка всего остального
00:54 Краткое примечание: лайки/подписки и ажиотаж
01:11 Обзор Google AI Studio (зачем это использовать)
02:29 Ограничения прототипа (авторизация, платежи, публикация)
03:08 Запуск прототипа (генератор миниатюр ИИ)
03:28 Идея приложения и подсказка
04:26 Начало сборки (бесплатные кредиты)
05:09 Первый результат: загрузка фото и генерация
05:57 Добавление функции «выбрать область и редактировать»
06:34 Заметка об API-ключах и интеграциях
07:29 Добавление стилей и выражений
08:50 Результаты + удержание реквизитов
09:30 Дополнительные параметры: фон, стили текста, шрифты
11:08 Улучшенный предварительный просмотр результата
12:03 Ошибка в инструменте редактирования Появляется
13:05 Новый тест (лондонская сцена)
13:37 Всё ещё нет выбора — сообщите о проблеме
14:09 Исправлено: выбор области работает
14:27 Успешное редактирование (тест Микки Мауса)
14:57 Прототип готов → загрузка исходного кода
15:18 Распаковка и открытие в VS Code
15:45 Установка KiloCode (ИИ-агента с открытым исходным кодом)
16:23 Основы и настройка VS Code
17:49 Установка и панель KiloCode
18:30 Настройка OpenRouter + бесплатные модели
19:31 Выбор моделей (GLM, Gemini и т. д.)
20:39 Выбор бесплатных моделей (Gemini Flash/Pro, GLM 4.5 Air)
21:32 Новый чат: понимание и запуск проекта
21:58 Предоставление ключа API Gemini
22:21 Установка зависимостей и запуск задач
23:16 npm запуск разработки → локальный успех
23:46 Добавление авторизации Clerk (почему Clerk, а не Google Console)
24:04 Выбор поставщика(ов) Clerk
25:02 Создание приложения Clerk
25:52 Вставка запроса Clerk в KiloCode
26:21 Настройка переменных окружения
26:54 Интеграция Clerk (пакеты и код)
27:54 Настройка окружения и проверка входа
28:25 Работа входа; управление учётной записью
28:49 Интерфейс учётной записи
29:17 База данных с Neon (Postgres)
30:17 Добавление сервера Neon MCP (необязательно)
31:49 Запрос бэкэнда и подключение
32:50 Создание логики таблицы пользователей
33:51 Запрос на выполнение SQL для таблиц
34:22 Выполнение SQL вручную при необходимости
35:05 Процесс развёртывания Vercel
35:38 Отправка в репозиторий GitHub
37:19 Отправка выполнена; Импорт в Vercel
37:45 Импорт проекта Vercel
38:45 Добавление переменных окружения и развёртывание
39:15 Активный URL + быстрая проверка
39:45 Добавление собственного домена (обзор DNS)
40:43 Резюме: бесплатный конвейер полного цикла
41:13 Заключение и что разрабатывать дальше
lovable AI, руководство по lovable AI, обзор lovable AI, lovable, bolt.new, кодирование Vi...