Конспект: Bolt.new: Полный гид по созданию Fullstack-приложений с Supabase — VibCoderZ - VibeCoderz

Загрузка...

🎯 О чём этот конспект: Пошаговое руководство по использованию Bolt.new — браузерного AI-редактора для генерации полноценных веб-приложений. В видео разбирается процесс создания трекера рецептов с авторизацией, базой данных и деплоем.

👤 Кому будет полезно: Вайбкодерам, разработчикам и продакт-менеджерам, которые хотят быстро собирать рабочие прототипы (MVP) с бэкендом, не покидая браузер.

✨ Что получите: Вы научитесь генерировать код через Bolt, подключать Supabase для хранения данных, настраивать аутентификацию и деплоить готовое приложение в один клик.

1. Настройка окружения и оптимизация токенов

Контекст: Bolt.new работает в браузере и использует LLM для написания кода. Для серьезных проектов автор рекомендует платную подписку ($20/мес), так как лимиты бесплатных токенов быстро исчерпываются. Важной настройкой является режим "Diffs", который позволяет AI вносить точечные правки в файлы вместо полной перезаписи, что экономит до 90% токенов. Однако, если AI начинает "глючить" или выдавать ошибки в логике, этот режим стоит временно отключить.

Выгода: Экономия бюджета на токены и ускорение процесса генерации правок.

Как применить:

Шаг 1: Настройка Diffs — Зайдите в Settings (нижний левый угол) -> Feature Previews -> Включите Diffs. Если столкнулись с цикличными ошибками — выключите его для полной перезаписи проблемных файлов.
Шаг 2: Подключение Supabase — В правом верхнем углу нажмите Connect to Supabase. Это создаст проект в Supabase и автоматически пропишет переменные окружения (URL и ANON_KEY) в ваш проект Bolt.

2. Эффективный промптинг и "Enhance"

Контекст: Качество приложения напрямую зависит от детализации первого промпта. Bolt имеет встроенную функцию "Enhance", которая превращает короткий запрос в подробное техническое задание. Автор советует всегда использовать эту кнопку, а затем внимательно вычитывать результат, удаляя лишнее или добавляя специфические требования (например, поля для времени приготовления или уровня сложности).

Выгода: Получение продуманной архитектуры приложения и UI с первой попытки.

Как применить:

Шаг 1: Напишите базу — Введите краткую суть:

I want to generate a recipe tracking app. I want to be able to add recipes and view recipes. There should be a recipe page with all the recipes and an individual recipes pages to view the individual recipe. I want it to be modern and Sleek design.

Шаг 2: Улучшение — Нажмите иконку волшебной палочки (Enhance). AI добавит поиск, фильтры, локальное хранилище и детализацию карточек.
Шаг 3: Проверка — Удалите функции, которые вам не нужны (например, печать рецепта), прежде чем нажать "Send".

3. Отладка UI через скриншоты и таргетирование файлов

Контекст: AI часто ошибается в отображении иконок (Lucide React) или центрировании элементов. Если текстовый промпт не помогает, Bolt поддерживает визуальный контекст. Вы можете прикрепить скриншот ошибки прямо в чат. Также, когда проект разрастается, полезно указывать AI, какой именно файл нужно править, чтобы он не "сломал" остальную логику.

Выгода: Быстрое исправление визуальных багов без написания сложных объяснений.

Как применить:

Шаг 1: Скриншот-отладка — Сделайте скриншот проблемной зоны (например, пустые кнопки) и отправьте с текстом:

See how the square buttons have nothing inside. They are missing their icons. Please fix the visibility.

Шаг 2: Таргетирование — Если AI правит не тот файл, нажмите правой кнопкой мыши на нужный файл в дереве кода и выберите Target File. Теперь промпты будут применяться только к нему.
Шаг 3: Альтернативный метод — Если иконки не грузятся, дайте команду заменить библиотеку на SVG:

The icons are still not rendering. Can you try a different method? Use inline SVG icons directly instead of relying on Lucide React components.

4. Интеграция Backend (Supabase) и Auth

Контекст: По умолчанию Bolt создает приложение на LocalStorage. Чтобы данные сохранялись, нужно перевести его на реальную БД. При подключении Supabase, Bolt сам генерирует SQL-миграции, создает таблицы и настраивает Auth. Важный нюанс: Bolt автоматически отключает подтверждение email в Supabase, что упрощает тестирование (можно логиниться с любым фейковым письмом).

Выгода: Полноценная база данных и система пользователей за 2 минуты.

Как применить:

Шаг 1: Запрос на миграцию — После подключения Supabase в интерфейсе, напишите:

I'd like to add a backend database through my connected supabase project so that data can be saved and be persistent across sessions.

Шаг 2: Настройка Auth — Если при загрузке страниц возникают ошибки доступа, попросите добавить UI для входа:

I'm getting an error on page load: [вставьте текст ошибки]. Please add Authentication UI for signing in and logging in.

Шаг 3: Очистка данных — Чтобы убрать тестовые данные AI и оставить только свои из БД:

Please remove the dummy data from the recipes and only show recipes data from the database.

5. Решение проблем с сохранением данных (Deep Debug)

Контекст: Иногда AI создает таблицы, но забывает прописать логику INSERT в коде приложения или ошибается в схеме. Если кнопка "Save" не работает и ошибок нет, нужно заставить AI перепроверить всю цепочку: от UI до функций базы данных.

Выгода: Гарантированная работа CRUD-операций.

Как применить:

Шаг 1: Отключите Diffs — Если правки не помогают, выключите режим Diffs в настройках.
Шаг 2: Глубокий анализ — Отправьте промпт:

When I click save recipe, nothing happens and the recipes are not being saved to the database. I checked Supabase as well. It's both a database issue and a UI issue. Please review all relevant code and resolve this for me.

Шаг 3: Автозаполнение для тестов — Чтобы не вводить данные вручную при каждом тесте, попросите:

Please pre-fill the add recipe form with sample data so I can test the save functionality quickly.

FAQ

В: Нужно ли знать SQL для работы с Supabase в Bolt? О: Нет, Bolt сам генерирует SQL-запросы для создания таблиц (схемы) и применяет миграции. Вы можете проверить результат в панели Supabase в разделе Table Editor.

В: Что делать, если закончились токены в Bolt? О: Можно подождать обновления лимитов (если вы на бесплатном плане) или перейти на Pro-план. Также помогает удаление старых чатов и включение режима "Diffs" для экономии.

В: Можно ли использовать свои картинки? О: Да, вы можете добавить поле для URL изображения (как в видео с Unsplash) или попросить Bolt настроить Supabase Storage для загрузки файлов с компьютера.

В: Как привязать свой домен к приложению? О: После нажатия кнопки Deploy, проект улетает на Netlify. Чтобы добавить домен, вам нужно нажать ссылку в Bolt для импорта этого проекта в ваш личный аккаунт Netlify, где уже доступны настройки DNS.

В: Можно ли выгрузить код и запустить его локально? О: Да, в Bolt есть кнопка скачивания проекта (Download). Вы получите стандартный React/Vite проект, который можно запустить через npm install и npm run dev.

Конспект создан на основе видео «Bolt AI Tutorial for Beginners (Build Full Stack Apps in Minutes)» канала No Code MBA. Все права на оригинальный материал принадлежат авторам. Источник: https://www.youtube.com/watch?v=0_Ij8FEvY4U