Этот конспект не сохранится

Закроешь вкладку — потеряешь. Зарегистрируйся — и он будет в библиотеке навсегда.

Telegram

Ваш конспект

YouTubeВся база по ВАЙБКОДИНГУ за 45 минут — создаём приложение с нуля

🚀 Вайб-кодинг с нуля: Создание сервиса генерации обложек

Ключевые тезисы:

  • Вайб-кодинг — это разработка приложений с помощью ИИ-ассистентов.
  • Обучение построено так, чтобы дать понимание архитектуры, а не просто повторение кода.
  • Учебный проект (генератор обложек для YouTube) имеет коммерческий потенциал и охватывает ключевые технологии: фронтенд, бэкенд, базы данных и интеграцию с нейросетями.
  • Подход работает из России без VPN и зарубежных карт.

🛠️ Подготовка рабочего окружения

Редактор кода:

  • Основной инструмент — VS Code (бесплатный редактор для программирования).
  • Альтернативы (Cursor, Cline) — это те же VS Code с предустановленными нейросетями, но с менее гибкой тарификацией.

Подключение ИИ-ассистента:

  • Можно использовать любую модель (ChatGPT, Gemini и т.д.) через расширения в VS Code.
  • Для работы из России: сервис Harvey.pro (промокод Appbustters даёт скидку 20%). Он выступает посредником, позволяя покупать токены для топовых моделей за рубли и без VPN.

Терминал (Командная строка):

  • Интерфейс для взаимодействия с операционной системой через команды.
  • 🔥 Базовые команды, которые нужно знать:
    • ls — показать файлы и папки в текущей директории.
    • pwd — показать текущую директорию.
    • mkdir [название] — создать папку.
    • cd [название] — перейти в папку.
    • touch [файл] — создать файл.
    • cat [файл] — вывести содержимое файла.
    • cd .. — перейти в родительскую папку.
    • rm -rf [название] — удалить файл или папку.
    • clear — очистить историю терминала.
  • ИИ часто будет просить вас выполнять команды вручную (например, для установки зависимостей или публикации).

🏗️ Архитектура веб-приложения: Теория

Любое приложение (сайт, мобильное) состоит из трёх основных компонентов:

  1. Фронтенд (Frontend) — то, что работает на устройстве пользователя (интерфейс). В нашем случае пишется на React. Пользователь имеет к нему полный доступ.
  2. Бэкенд (Backend) — работает на сервере. Принимает запросы от фронтенда, обрабатывает логику, фильтрует данные и защищает систему.
  3. База данных (Database) — хранилище всей информации приложения (данные пользователей, контент и т.д.). Находится на сервере.

Стек проекта:

  • Frontend: React
  • Backend & База данных: Supabase (сервис, который предоставляет готовые решения для авторизации, БД и хранения файлов).
  • Нейросети: OpenRouter (агрегатор моделей для генерации текста, изображений и видео).

💾 Проектирование базы данных

База данных — это, по сути, набор связанных таблиц, похожих на Excel.

Ключевые принципы:

  1. ✅ У каждой записи должен быть уникальный ID (идентификатор).
  2. ✅ Добавляем строки, а не столбцы. Если нужна новая сущность (например, билеты клиента), создаём новую таблицу, а не новые колонки в старой.
  3. ✅ Связываем таблицы через ID. Например, в таблице "Билеты" будет колонка user_id, которая ссылается на ID в таблице "Пользователи".

Схема БД для проекта генерации обложек (после корректировок):

  • profiles — данные пользователей.
  • preview_references — примеры обложек (референсы).
  • albums — альбомы пользователей (с названием, описанием и обложкой).
  • user_photos — исходные фото пользователей (с привязкой к user_id и album_id).
  • generations — результаты генераций.
  • favorites — промежуточная таблица для связи пользователей и понравившихся референсов (только user_id и image_id).

🔧 Разработка: Рабочий процесс с ИИ

  1. Промт (Запрос): Описываете задачу простым человеческим языком, конкретно и лаконично. Можно попросить обычную нейросеть (ChatGPT) помочь составить промт.
  2. План реализации (Implementation Plan): ИИ сначала генерирует план архитектуры. Это точка контроля! Нужно проверить, особенно схему базы данных.
  3. Генерация кода: После согласования плана ИИ приступает к написанию кода.
  4. Тестирование и отладка: Запускаете приложение, тестируете функционал. Если есть ошибки — сообщаете ИИ, он их исправляет. Цикл повторяется.

🧩 Интеграция внешних сервисов (API)

API — это машинный интерфейс для взаимодействия сервисов между собой (например, в формате JSON).

Настройка Supabase:

  1. Создаём проект.
  2. Создаём базу данных, выполнив SQL-код (миграцию), сгенерированный ИИ.
  3. Создаём Storage Buckets (папки в облаке) для хранения файлов: references, user_photos, generations.
  4. Настраиваем шаблоны писем (например, для сброса пароля).
  5. Получаем ключи для подключения фронтенда: Project URL и anon key (безопасен для использования в коде фронтенда).

Настройка OpenRouter (секретный ключ):

  1. Регистрируемся, создаём API-ключ с лимитом.
  2. ⚠️ Секретный ключ НЕ должен попадать во фронтенд! Его нужно сохранить как секрет (Secret) в Supabase (Edge Functions).
  3. Фронтенд будет делать запрос к нашей функции на Supabase, а та, используя секретный ключ, — к OpenRouter.

🚀 Публикация и деплой

Локальная разработка: Приложение работает на localhost (127.0.0.1) и доступно только на вашем компьютере.

Система контроля версий (Git):

  • GitHub — хранилище кода с историей изменений.
  • Коммит (Commit) — "сохранение" текущего состояния кода с комментарием.
  • Пуш (Push) — загрузка кода в облачный репозиторий.
  • Позволяет откатываться к предыдущим стабильным версиям при ошибках.

Публикация на хостинге:

  • Используем Vercel (бесплатный хостинг).
  • Подключаем репозиторий с GitHub.
  • Вручную прописываем в настройках Vercel переменные окружения (ключи от Supabase), которые ИИ не залил в Git (файл .env).
  • После этого приложение получает публичную ссылку и доступно всем в интернете.

💡 Дальнейшее развитие проекта (коммерческий путь)

  1. Подключение оплаты: Интегрировать эквайринг (например, ЮКасса), чтобы пользователи пополняли баланс в личном кабинете, а генерации списывались с него.
  2. Улучшение генерации:
    • Добавить редактор/уточнение сгенерированной обложки.
    • Автоматически анализировать загруженные фото через ИИ для составления промта.
    • Добавить к референсам теги (стиль текста, вайб, композиция), чтобы уточнять, что именно копировать.
    • Автоматически собирать референсы через YouTube API.
  3. Рынок: Стоимость одной обложки у дизайнера — 1-2 тыс. руб. При себестоимости генерации в несколько центов сервис имеет высокий коммерческий потенциал.

Выводы:

  • Вайб-кодинг — это мощный инструмент для создания приложений, требующий не слепого копирования, а понимания базовых принципов (архитектура, БД, API).
  • Ключ к успеху — итеративный процесс: "Промт → Генерация → Тестирование → Исправление".
  • Учебный проект можно развить в полноценный коммерческий сервис, подключая платежи и улучшая качество генерации через уточняющие механизмы.