Html code will be here

© 2022 - 2026 г.
"Мои курсы"
бесплатный онлайн-курс: AI Web Creator

Vibe Coding:
от нуля до собственного AI-сервиса

  • Научитесь создавать современные AI-приложения и сервисы без программирования, используя Google AI Studio, ИИ-агентов и no-code инструменты. От идеи и концепции — до работающего прототипа и MVP.
  • Курс подходит новичкам, фрилансерам и предпринимателям, которые хотят выйти в IT без сложного программирования и начать зарабатывать на создании приложений.
  • После курса вы сможете создавать продукты, за которые специалисты берут от 80 000 до 600 000 ₽ и выше — от чат-ассистентов до полноценного AI-сервиса или MVP.
  • Бесплатный курс, без регистрации с выдачей сертификатов
содержание курса пройти курс

Описание курса:

«Vibe Coding: от нуля до собственного AI-сервиса» — это практический курс, который превращает новичков, фрилансеров и предпринимателей в создателей полноценных AI-сервисов и веб-приложений без необходимости писать код.
Вы изучите самые мощные no-code и AI-инструменты, научитесь собирать backend и frontend на современных конструкторах, автоматизировать логику, подключать нейросети, создавать MVP за недели, а не месяцы — и запускать свои проекты на рынки РФ и зарубежья.
Курс даёт быстрый, измеримый результат:
к моменту финала вы сможете создать собственный работающий AI-сервис, который можно монетизировать, продавать клиентам или масштабировать под бизнес-задачи.
Будите работать с российскими и международными платформами: Google AI Studio, Dify, Tilda, Webflow, Make, n8n, Bubble, GPT-конструкторы, RuStore, VK Mini Apps, а также сможете продвигать проекты под российские и глобальные каналы.
Курс создан для тех, кто хочет войти в IT без сложного программирования, но хочет создавать настоящие продукты:
— Новичкам даст вход в профессию и портфолио,
— Фрилансерам — новые востребованные услуги,
— Предпринимателям — быстрый запуск цифровых решений без дорогих разработчиков.
Современно. Практично. Без кода. С упором на результат.
Бесплатный курс, открытый доступ, сертификаты после прохождения.
посмотреть выданные сертификаты

Почему это выгодно?

  • Разработка полноценного веб-приложения у студии стоит от 150 000 до 600 000 ₽,
  • AI-сервиса — от 250 000 до 1 200 000 ₽,
  • Поддержка и доработки — ещё 15–40 тыс. ₽ в месяц,
  • Разработка MVP на зарубежных no-code платформах у специалистов — от $1 000 до $5 000.
Самостоятельно (с использованием вайбкодинг-подхода: Google AI Studio, Bubble, Tilda, Dify, Make, n8n и др.) вы можете создать аналогичный продукт за 0–5 000 ₽, оплачивая только тарифы сервисов — и то далеко не всегда.

Содержание курса:

1. Модуль

Современная разработка веб-приложений: тренды

Урок 0. VIBE CODING — новый способ разработки

— Что такое Vibe Coding на самом деле

—Чем Vibe Coding отличается от No-code и Low-code

—Новый тип разработчика (кем вы станете)

Урок 1. Революция в разработке: No-Code, AI-Code, Low-Code
— Как ИИ изменил правила игры
— Виды веб-приложений: SaaS, CRM, сервисы, ИИ-приложения, боты
— Почему 80% MVP создаются без разработки
Урок 2. Обзор платформ: российских и зарубежных
— No-code: Bubble, Webflow, WeWeb, FlutterFlow, Softr
— Российские: Directual, AppMaster, Nocodez, КодБезКода
— Инструменты на основе ИИ: Cursor, Replit AI, Bolt.new, v0.dev
— Google AI Studio — как новый центр разработки приложений
— Российские ИИ: GigaChat (Студио), YandexGPT
Урок 3. Где размещаются современные приложения
— Vercel, Netlify, Render
— Firebase, Supabase
— RU-хостинг: Timeweb Cloud, Selectel
— Домены, SSL, CDN

2. Модуль

Идея → Концепция → Архитектура приложения

Урок 1. Генерация идей с помощью ИИ
— Google AI Studio, ChatGPT, GigaChat
— Генерация концептов и анализ востребованности
— Примеры: ИИ-ассистенты, маркетплейсы, сервисы, SaaS
Урок 2. Создание потока и структуры приложения
— CJM и пользовательские сценарии
— Miro AI, Whimsical, FlowMapp
— Генерация архитектуры с помощью Google AI Studio
Урок 3. UX/UI без дизайнера
— Figma + плагины (Autoflow, Magician AI, Diagram AI)
— Генерация интерфейсов с помощью Galileo AI
— Генерация UI с помощью Google AI Studio (UI Screens Tool)

3. Модуль

Google AI Studio — центр разработки приложений

Урок 1. Введение в Google AI Studio
— Обзор возможностей
— Gemini 3.0 и расширенные агенты
— Рабочая область, конструктор пользовательского интерфейса, генераторы логики
Урок 2. Создание прототипа по текстовому ТЗ
— Генерация интерфейса
— Генерация структуры приложения
— Генерация серверной логики и API
— Инструменты для работы с данными (таблицы, функции, модели)
Урок 3. Создание полноценного веб-приложения (Vibe Coding-подход)
— UI-компоненты: формы, таблицы, меню
— Интерактивная логика
— Создание пользовательских сценариев
— Обработка данных и подключение внешних API
Урок 4. Экспорт приложения и интеграция
— Экспорт кода (Next. js, JS/TS, HTML)
— Взаимодействие с Firebase, Replit, Vercel
— Подключение БД и сторонних сервисов
Урок 5. Практика. Создаём MVP
— личный кабинет
— база данных
— генерация пользовательского интерфейса
— авторизация
— функции искусственного интеллекта

— публикация


4. Модуль

No-Code: создание приложений без кода

Урок 1. Bubble — логика, API и реальные приложения (CRM / SaaS)
— Создание логики, API
— Приложение: CRM или SaaS
Урок 2. WeWeb / Webflow
— Визуальные интерфейсы
— Интерактивный пользовательский интерфейс
Урок 2.1. Экран Login → Dashboard (разборы в таблицах)
Урок 3. FlutterFlow
— Веб-версия + мобильные версии
— Интеграция с Firebase
Урок 4. Российские платформы без программирования
— Directual (логика, бэкенд, сложные сценарии)
— AppMaster (бизнес-приложения)
— Nocodez / КодБезКода (простые сервисы)
Урок 5. Связка Google AI Studio + No-code
— Генерация функционала в AI Studio
— Перенос логики на платформу no-code

— Пул готовых компонентов


5. Модуль

Low-code и минимальный код (AI-Code)
Урок 1. Генерация кода с помощью ИИ
— Курсор
— Replit AI
— GigaChat Code
— Генерация компонентов, функций, бэкенд-сценариев
Урок 2. Bolt.new и Cognition Devin
— Создание полноценного приложения
— Автоматизация задач
— Практика: создание мини-сервиса
Урок 3. Работа с фреймворками с помощью ИИ
— Next.js
— Django
— FastAPI
— Генерация модулей ИИ
Урок 4. Связка Google AI Studio + курсор
— Создание проекта в AI Studio
— Экспорт в Cursor
— Генерация недостающих частей приложения
— Оптимизация и развертывание

6. Модуль

Базы данных, API, интеграция
Урок 1. Базы данных без SQL
— Baserow
— Airtable
— Supabase
— Firebase
— Российские аналоги: Directual DB, Nocodez DB
Урок 2. Работа с API
— Собственные API
— Подключение внешних сервисов
— Интеграция через Make / Zapier / Integral / Albato
Урок 3. Интеграция ИИ
— Подключение моделей через API
— Gemini API из Google AI Studio
— OpenAI, GigaChat, YandexGPT
— Создание ИИ-модулей: чат, анализ, генерация

7. Модуль
Внедрение ИИ в приложения
Урок 1. Готовые ИИ-виджеты
— Подключение без кода
— Рекомендации, поиск, анализ
Урок 2. Создание ИИ-функций с помощью Gemini
— Чат-боты
— Генераторы контента
— Анализ данных
— Обработка файлов
Урок 2.1. Кейс: «Создание собственного AI-ассистента на Gemini (под ключ)»
Урок 3. Создание собственного ИИ-помощника (мультиформат)
— Ассистенты OpenAI
— Ассистенты GigaChat (Студио)
— Агенты Google AI Studio
— Развёртывание на сайте

8. Модуль
Публикация и запуск
Урок 1. Деплой
— Vercel
— Netlify
— Рендеринг
— Хостинг Firebase
— RU-хостинг: Timeweb Cloud, Selectel
Урок 2. Настройка аналитики и оптимизации
— Google Analytics
— Яндекс Метрика
— Скорость, SEO, безопасность
Урок 3. Монетизация
— Stripe
— CloudPayments
— ЮКасса
— Фримиум, подписки, микроплатежи

9. Модуль
Продвижение веб-приложений
Урок 1. Продвижение в России
— Яндекс
— Telegram
— VK
— Дзэн
Урок 2. Продвижение на международном уровне
— Google SEO
— TikTok, YouTube Shorts
— Reddit
— ProductHunt
— Startup.builders (RU)
Урок 3. Создание портфолио разработчика
— Notion
— GitHub
— Behance
— Презентация проектов

10. Модуль
Итоговый проект: MVP за 10 дней
Урок 1. Создание технического задания с помощью Google AI Studio
Урок 2. Создание MVP
— AI Studio
— Без программирования
— С минимальным программированием (по выбору студента)
Урок 3. Добавление ИИ
— Gemini API
— GigaChat
— OpenAI
Урок 4. Публикация

ИТОГОВЫЙ ТЕСТ


ПОЛУЧИТЬ СЕРТИФИКАТ




КУРС

Web-разработка без кода:
от нуля до собственного AI-сервиса

курс создан в виде лекций и будет периодически пополняться новыми уроками.
Автор курса: Степанец Н. И. 2026 г.
Жми на название урока, чтобы он раскрылся ⬇
1 МОДУЛЬ

Современная разработка веб-приложений: Тренды

Урок 0.
VIBE CODING — новый способ разработки.
Как создают приложения, сервисы и стартапы без ручного кода,
управляя ИИ как командой разработчиков.

🎯 Цель:
Сформировать правильное мышление современного разработчика:
  • не «писать код»
  • а управлять созданием продукта
  • через смысл, контекст, архитектуру и ИИ
После урока вы:
  • поймете, что вы больше не “ученик без кода”
  • осознаете себя продакт-разработчиком
  • будите готовы к практике без страха «я не программист»

1. Что такое Vibe Coding на самом деле
❌ Мифы
  • это не «кодить по настроению»
  • не музыка, не поток, не эзотерика
  • не отказ от мышления
✅ Реальность
Vibe Coding — это подход, при котором человек:
  • формулирует намерение
  • задаёт контекст
  • описывает желаемый результат
  • а ИИ реализует техническую часть
Ты управляешь что создать —
ИИ решает как.

Формула вайбкодинга
Идея
↓
Контекст
↓
Сценарии
↓
Ограничения
↓
Результат
Без:
  • ручной верстки
  • написания API с нуля
  • настройки серверов вручную

2. Чем Vibe Coding отличается от No-code и Low-code

Подход

Что делает человек

Что делает ИИ / платформа

No-code

Кликами собирает логику

Выполняет заданные правила

Low-code

Пишет части кода

Дополняет и ускоряет

Vibe Coding

Описывает продукт и поведение

Проектирует, пишет, связывает всё

👉 Vibe Coding включает no-code и low-code, но стоит выше.

3. Новый тип разработчика (кем вы станете)
Сейчас ценятся не «кодеры», а:
✅ Product Developer / AI Developer
Он:
  • понимает бизнес-задачу
  • проектирует UX и сценарии
  • формулирует ТЗ для ИИ
  • собирает MVP за дни, а не месяцы
❌ Он не обязан:
  • знать синтаксис наизусть
  • писать backend вручную
  • быть дизайнером
Где востребован этот навык
Стартапы
Агентства
Фриланс
Корпоративные MVP
Собственные сервисы и SaaS

4. Как выглядит процесс разработки в Vibe Coding
  • Классическая разработка (устаревшая)
Идея → Дизайн → Верстка → Backend → Тесты → Деплой
⏱️ Месяцы
💰 Дорого
😩 Зависимость от команды

  • Vibe Coding (современно)
Идея
↓
Описание логики
↓
Google AI Studio / ИИ
↓
Прототип + логика
↓
Публикация
⏱️ Дни
💰 Дешево
🚀 Быстро

5. Инструменты вайбкодинга (что будет в курсе)
Ты не обязан знать всё сразу — курс научит работать поэтапно.

Задача

Инструмент

Идея и концепция

ChatGPT, GigaChat

Архитектура

Google AI Studio

UI

Galileo AI, AI Studio UI

Логика

AI Studio, Cursor

MVP

No-code + AI

Деплой

Vercel, Firebase


6. Главные принципы вайбкодинга
1️⃣ Ты отвечаешь за СМЫСЛ, не за код
2️⃣ Чем лучше запрос — тем лучше приложение
3️⃣ Ошибки — это часть генерации
4️⃣ MVP важнее идеала
5️⃣ ИИ — не магия, а инструмент

📋 Практика:
Напиши одно предложение, начиная с:
«Я хочу создать сервис, который помогает ___ сделать ___ за ___»
Пример:
«Я хочу создать сервис, который помогает SMM-менеджерам быстро генерировать контент-планы с ИИ».
👉 Это первая вайб-команда для ИИ.
👉 В следующих модулях мы превратим её в приложение.
Урок 1.
Революция в разработке: No-Code, AI-Code, Low-Code.
2026 год окончательно переписал правила создания цифровых продуктов. Если раньше разработка была доступна только программистам, то сегодня 80% всех MVP, внутренних сервисов и бизнес-инструментов создаются без классической разработки — благодаря no-code, low-code и AI-инструментам.
Этот урок — ваше погружение в современный мир разработки, где создают не те, кто пишет код, а те, кто умеет мыслить продуктово.

1. Как ИИ переписал правила игры
1.1. Что произошло в 2023–2025 годах?
  • Появились модели уровня GPT-5, Gemini Ultra, Claude 3.5, которые могут писать код лучше средних разработчиков.
  • No-code платформы внедрили ИИ-агентов: Bubble AI, FlutterFlow AI Assistant, Make AI Builder.
  • Любой пользователь получил возможность генерировать интерфейсы, базы данных, API и логику приложения в один клик.
  • Компании массово сокращают сроки и бюджеты разработки в 5–10 раз.

1.2. Главное изменение:
Разработка стала не технической, а концептуальной.
Теперь важны не языки программирования, а:
  • понимание логики продукта,
  • умение формулировать задачу,
  • структурирование процессов,
  • грамотные промпты для ИИ.

1.3. Что это значит для разработчика без кода?
Вы фактически становитесь продуктовым инженером:
не пишете код → но создаёте приложения, которые работают как полноценные сервисы.

2. Виды веб-приложений, которые создаются без кода
Сегодня no-code и AI-code позволяют создавать 90% самых востребованных цифровых решений. Разберем основные типы.

2.1. SaaS-приложения (Software as a Service)
Это онлайн-сервисы по подписке:
— платформы обучения,
— сервисы бронирования,
— маркетинговые инструменты,
— сервисы для команд.
Что делается без кода:
✔ интерфейсы
✔ базы данных
✔ логика
✔ платежи
✔ email-триггеры
✔ личные кабинеты
Пример:
сервис подсчета финансов для предпринимателей полностью на Bubble + Make.

2.2. CRM-системы для бизнеса
Каждый второй малый бизнес создаёт свою CRM на базе:
— Airtable,
— Notion,
— SmartSuite,
— NocoDB,
— AppSheet.
Без кода делают:
✔ воронки,
✔ статусы сделок,
✔ задачи,
✔ интеграции с WhatsApp/Telegram,
✔ отчётность.

2.3. Корпоративные внутренние сервисы
Интранеты, базы данных, порталы сотрудников, трекинг задач, складские системы.
Компании экономят десятки миллионов в год, создавая такие решения на no-code.

2.4. AI-приложения и AI-агенты
Самый быстрорастущий вид приложений 2025–2026 гг.
Примеры:
— чат-боты с памятью,
— ассистенты для бизнеса,
— генераторы контента,
— сервисы рекомендаций,
— автоматические консультанты.
Платформы, которые позволяют собрать AI-приложение без кода:
  • Replit AI,
  • V0,
  • Bolt.new,
  • ZAPT,
  • Flowise,
  • AgentHub,
  • Dify AI.

2.5. Боты и автоматизации
Telegram, WhatsApp, VK, Discord — всё можно собрать без программирования.
Самые популярные инструменты:
  • Make
  • n8n
  • Albato
  • BotMother
  • GPT-ассистенты в Студио
  • БотХелп

3. Почему 80% MVP сегодня создаются без классической разработки
Вот реальные причины, подтвержденные рынком.

3.1. Скорость = главное преимущество
Раньше: MVP за 3–6 месяцев.
Сейчас: за 1–3 недели, и часто быстрее.
ИИ пишет функционал, генерирует интерфейсы, подсказывает архитектуру.

3.2. Стоимость разработки упала в 10 раз
Средние цены на разработку у специалистов (2026):
  • Лендинг с личным кабинетом — от 150 000 ₽
  • Простейший SaaS — от 450 000 ₽
  • CRM под бизнес — 200 000–700 000 ₽
  • Мобильное приложение — от 600 000 ₽
  • Бот с интеграциями — от 80 000 ₽
Стоимость разработки самому на no-code: 0–5 000 ₽/мес — только подписка на платформы.

3.3. Гибкость и самостоятельные изменения
Чтобы поправить логику в коде — нужен программист.
Чтобы изменить логику в no-code — вы можете сделать это сами, без ожиданий.

3.4. No-code и AI-code стали корпоративным стандартом
Google, Amazon, Microsoft, Shopify, банки и страховые компании перешли на гибридный подход:
AI-code + low-code для 80% задач.

📋 Практика:
Задание 1. Проанализируйте 5 сервисов, которыми пользуетесь ежедневно.
Определите:
— их тип (SaaS, CRM, AI-сервис, автоматизация),
— что можно создать на no-code-инструментах,
— какие ИИ-функции можно добавить.
Задание 2. Составьте список из 3 идей MVP, которые можно собрать за 2 недели.
Задание 3. Выберите вашу первую платформу (Bubble, Make, AppSheet, ZAPT, т.д.).

✅ Дополнительно:

Таблица: Что можно создать без кода

Тип продукта

Что можно создать без кода

Какие инструменты подходят

Срок создания

Навык, который прокачивается

SaaS-сервис

Личный кабинет, подписка, база данных, платежи

Bubble, FlutterFlow, WeWeb

7–21 день

Архитектура продукта

CRM для бизнеса

Воронки, заявки, клиенты, статусы, отчёты

Airtable, SmartSuite, AppSheet, NocoDB

3–10 дней

Работа с данными

AI-приложение

Чат-бот, ассистент, генератор контента, рекомендаций

Flowise, Dify, ZAPT, AgentHub

1–7 дней

Работа с ИИ и API

Боты

Telegram-боты, автоворонки, чат-поддержка

BotMother, Make, n8n, Albato

1–5 дней

Автоматизация процессов

Маркетплейсы услуг/товаров

Каталог, корзина, фильтры, авторизация

Bubble, Softr, WeWeb

10–30 дней

UI/UX + логика

Корпоративные сервисы

Интранет, база сотрудников, задания, документы

SmartSuite, Notion, AppSheet

5–14 дней

Системное мышление


Таблица: Сравнение подходов — код vs no-code vs AI-code
Показывает, почему рынок массово перешёл на гибридные модели разработки.

Параметр

Классическая разработка

No-Code

AI-Code (ИИ-помощники)

Скорость разработки

1–6 месяцев

3–21 дней

1–10 дней

Стоимость

150 000–1 500 000 ₽

0–5000 ₽/мес

0–3000 ₽/мес + no-code

Кто может использовать

Только разработчики

Новички, предприниматели, маркетологи

Все + улучшенные возможности

Гибкость изменений

Низкая: нужна команда

Высокая: меняешь сам

Очень высокая: ИИ переписывает функционал

Сложность обучения

Высокая

Средняя

Низкая: ИИ делает часть работы

Когда подходит

Большие проекты, сложные системы

MVP, бизнес-автоматизация, быстрые решения

Быстрый запуск, прототипы, AI-сервисы

Прогноз развития в 2025+

Снижение доли на рынке

Рост ×3

Стремительный рост ×5


Таблица: “Топ инструментов для разработки без кода и с ИИ”

Категория

Инструмент

Для чего подходит

Особенности

AI-разработка

Google AI Studio

генерация UI, логики, кода, агентов

полноценные AI-приложения без разработчика


Cognition Devin

автоматизированная разработка

сам пишет код и деплоит


Cursor

работа с кодом через ИИ

лучший ИИ-IDE 2025 года

No-Code веб-приложения

Bubble

сложные SaaS и CRM

большая экосистема плагинов


Webflow / WeWeb

сайты с логикой

анимации, адаптивность


FlutterFlow

веб + мобильные приложения

экспорт кода, Firebase

Российские платформы

Directual

логика и backend

подходит для крупных проектов


Nocodez / КодБезКода

простые бизнес-сервисы

быстрое обучение


AppMaster

бизнес-автоматизация

корпоративные решения

Автоматизации и API

Make / n8n / Albato

интеграции и сценарии

сотни коннекторов

Базы данных

Airtable / Baserow / Supabase

таблицы + API

подходят для MVP и SaaS


Таблица: “Какие профессии стали возможны благодаря no-code и AI-разработке”

Профессия

Что делает специалист

Сколько зарабатывают в 2025 году

Почему востребована

No-Code разработчик

создаёт сайты, сервисы, CRM, SaaS

80 000–260 000 ₽/мес

бизнесам нужны быстрые решения

AI-разработчик (без кода)

создаёт AI-брокеров, ассистентов, чат-ботов

120 000–350 000 ₽/мес

дефицит специалистов ×4

AI-интегратор

подключает модели и автоматизацию

100 000–300 000 ₽/мес

компании переходят на ИИ

Автоматизатор Make/n8n

выстраивает процессы, боты, сценарии

90 000–270 000 ₽/мес

спрос в SMM, ecom, малом бизнесе

Разработчик в Google AI Studio

собирает приложения по ТЗ через ИИ

150 000–400 000 ₽/мес

новый тренд рынка

UX-архитектор no-code

проектирует пользовательские сценарии

100 000–240 000 ₽/мес

важный навык для SaaS и AI-сервисов


Таблица: “Готовые идеи и кейсы, которые можно создать прямо на курсе”

Идея / кейс

Что получится

Инструменты

Время создания

Где можно монетизировать

AI-ассистент для бизнеса

чат-бот, отвечающий клиентам

Google AI Studio, Dify, GigaChat

1–3 дня

Telegram, сайт

Мини-CRM для предпринимателя

заявки, клиенты, статусы, файлы

Bubble, Directual, Airtable

3–7 дней

продавать как SaaS

Микросервис по подписке

генерация текстов / изображений

AI Studio + Webflow

2–5 дней

подписка от 290–990 ₽

Маркетплейс услуг

карточки исполнителей, фильтры, чат

Bubble, WeWeb, Supabase

7–20 дней

монетизация комиссией

Сервис аналитики

дашборды, отчёты, загрузка данных

SmartSuite, Directual

5–10 дней

B2B компании

Telegram-бот с автоворонкой

сбор лидов, ответы, автоматизация

BotMother, Albato, Make

1–2 дня

агентские услуги

AI-приложение с рекомендациями

анализ данных + выдача решений

Google AI Studio, Gemini API

2–4 дня

продать как готовый MVP

Урок 2.
Обзор платформ: российских и зарубежных. Что выбрать и почему.
Сегодня разработка веб-приложений выглядит совсем иначе, чем 5–7 лет назад. Если раньше приходилось писать тысячи строк кода, то сейчас 70–90% работы выполняют визуальные платформы, ИИ-конструкторы и интеллектуальные IDE.
Чтобы вы уверенно чувствовали себя в профессии, мы разберём все ключевые инструменты, которые используют разработчики, предприниматели и продуктовые команды.
Этот урок — ваш ориентир в большой экосистеме no-code, low-code и AI-разработки.

1. Зарубежные No-Code платформы: для создания сложных сервисов, SaaS и AI-функций
Эти инструменты — мировые стандарты визуальной разработки. На них создают приложения уровня Airbnb-MVP, CRM-системы, личные кабинеты, маркетплейсы и коммерческие сервисы.

🔹 Bubble — лидер рынка по созданию сложных веб-приложений
Где используется: SaaS, CRM, маркетплейсы, личные кабинеты
Почему популярен: гибкость, мощная логика, плагины, огромный рынок специалистов
Ключевые преимущества:
  • работает как полноценный backend + frontend;
  • поддерживает базы данных, сложные правила, роли пользователей;
  • экспорт API, платёжные системы, подписки;
  • возможность ускорить работу через ИИ-плагины.
Когда использовать: для масштабных сервисов, где важна логика и большие данные.

🔹 Webflow — визуальная вёрстка уровня разработчика
Где используется: сайты, лендинги, MVP с модульной логикой
Что умеет: адаптивность, анимации, CMS, интеграции
Плюсы:
  • пиксель-перфект дизайн;
  • удобная работа с SEO;
  • можно подключать ИИ-виджеты, API, формы;
  • можно превратить сайт в приложение через Memberstack/Outseta.

🔹 WeWeb — смесь Webflow + Bubble
Где используется: SaaS, сложные интерфейсы
Преимущества:
  • визуальная сборка интерфейса;
  • логика строится проще, чем в Bubble;
  • интеграции с Supabase, Airtable, Xano.
Плюс: можно подключать ИИ-агентов как действия внутри приложений.

🔹 FlutterFlow — веб + мобильное приложение одновременно
Для кого: кто хочет веб-версию + приложение в Google Play/App Store
Почему инструмент в топе рынка:
  • экспорт Flutter-кода;
  • мощные Firebase-интеграции;
  • анимации, готовые модули;
  • ИИ-создание экранов и функций.

🔹 Softr — конструктор бизнес-приложений на базе таблиц
Отлично подходит для: CRM, админ-панелей, внутренних сервисов
Фишка: работает поверх Airtable или Google Sheets.

2. Российские no-code платформы: для проектов, где важны доступность, русская локализация и интеграции
Российские инструменты активно развиваются на фоне глобального роста ИИ. Они подходят для бизнеса, которому нужны локальные сервисы, API, оплат, интеграции.

🔹 Directual — самый мощный российский no-code с backend-логикой
Можно создать: CRM, SaaS, сложные бизнес-сценарии
Преимущества:
  • backend уровня enterprise;
  • автоматизации, события, сценарии;
  • API, Webhook, интеграции;
  • визуальный интерфейс + сложная логика.
Идеален, когда нужна мощная логика и требуется работать внутри РФ.

🔹 AppMaster — корпоративные решения без разработки
Подходит для компаний и крупных проектов, которые хотят заменить штат разработчиков no-code инструментами.
Что умеет:
  • генерация backend;
  • создание веб-приложений;
  • облачный хостинг;
  • интеграции с 1С, CRM, документооборотом.

🔹 Nocodez / КодБезКода — быстрые решения для предпринимателей
Используется для:
простых CRM, ботов, лендингов, внутренних сервисов, быстрых MVP.
Преимущество: простота, скорость освоения, русская поддержка.

3. Инструменты, созданные на базе ИИ: революция в разработке
Эти сервисы — будущее профессии. Они пишут код, исправляют ошибки, деплоят приложения и создают целые проекты по ТЗ.

🔹 Cursor — лучшая IDE
Если VS Code и ChatGPT-кодер объединились — это бы был Cursor.
Что умеет:
  • писать код на любых языках;
  • переписывать модули;
  • анализировать проекты целиком;
  • создавать архитектуру;
  • ветвить и решать задачи.
Используется и новичками, и профессионалами.

🔹 Replit AI — создание приложений в браузере
Преимущества:
  • автогенерация проектов;
  • запуск серверов без DevOps;
  • быстрый деплой;
  • ИИ-подсказки.

🔹 Bolt.new — генератор приложений за минуты
Как работает:
Вы даёте идею → платформа создаёт UI → backend → API → деплой.
Используется для быстрого прототипирования.

🔹 v0.dev — генерация интерфейсов через ИИ
Фокус: UI, React-компоненты, Tailwind.
Подходит для тех, кому важны красивые интерфейсы под код.

4. Google AI Studio — новый центр разработки приложений
Google сделал огромный шаг вперёд в 2024–2026 годах.
Сегодня Google AI Studio — это полноценная экосистема:
  • Что можно делать:генерировать UI-элементы и целые экраны;
  • создавать backend-логику;
  • писать код на JS/TS/Next.js;
  • создавать AI-агентов;
  • подключать базы данных и API;
  • экспортировать проект и деплоить.
Главное отличие — результат получается не шаблонным, а максимально адаптированным под задачу.
Google AI Studio — это по сути «разработчик-ассистент», который пишет приложение вместе с вами.

5. Российские ИИ: GigaChat (Студио), YandexGPT
Эти модели выполняют функции генерации кода, логики и текстов. Но их ключевой плюс — интеграции в российские сервисы и отсутствие блокировок.

🔹 GigaChat (Студио)
Платформа для:
  • генерации веб-страниц и сервисов;
  • создания ботов;
  • создания логики;
  • модерации данных;
  • интеграций с российскими API.
Можно создавать мини-приложения внутри GigaChat Studio.

🔹 YandexGPT
Используется для:
  • обработки данных,
  • генерации текстов,
  • анализа,
  • автозаполнений,
  • интеллектуальных функций в приложениях.
Хорошо интегрируется с Yandex Cloud.

✅ Какая платформа подойдёт именно вам?

Тип проекта / задача

Лучшая платформа

Почему это лучший выбор

Уровень сложности

Лендинг, промо-сайт, визитка

Webflow / Tilda

Быстрый запуск, идеальный визуальный контроль, готовые блоки, легко адаптировать

★☆☆

Сложное веб-приложение / SaaS

Bubble / Directual

Гибкая логика, API, сложные workflows, большие экосистемы, готово для MVP и продакшена

★★★

Мобильное приложение + веб-панель

FlutterFlow

Генерация реального кода, публикация в сторах, богатые UI-компоненты

★★☆

AI-приложение (бот, web-AI, агент)

Google AI Studio / v0.dev / GigaChat Studio

Быстрые AI-функции, готовые инструменты для агентов, chat-flows, легкая интеграция

★☆☆

Корпоративная CRM / ERP

Directual / AppMaster

Надёжная архитектура, модели данных, роли, интеграции, скорость разработки

★★★

Marketplace / сервис под ключ

Bubble / WeWeb + Xano

Гибкость фронта и мощный backend, хорошая масштабируемость

★★★

Простой продукт за 1 день

Softr / Nocodez

Шаблоны, быстрые сборки, минимальный порог входа

★☆☆

Приложение с сильным UI-дизайном

WeWeb / Webflow

Пиксель-перфект дизайн, красивые интерфейсы без кода

★★☆


Теперь вы знакомы со всей картой инструментов, которые формируют развитие веб-разработки в этом году. В следующих уроках мы начнём собирать архитектуру приложений, генерировать идеи и разбирать, где лучше создавать какой тип проекта.
Урок 3.
Где размещаются современные приложения.
Vercel, Netlify, Render — статические и серверные фронты; Firebase и Supabase — backend, авторизация, БД; Timeweb Cloud и Selectel — российский хостинг и соответствие требованиям. Домены, SSL и CDN — для скорости, безопасности и SEO.

1. Классификация: куда что деплоить и почему
  • Статический сайт / SPA (лендинг, маркетинг-страница, Webflow/WeWeb/Tilda): чаще всего — Vercel / Netlify или специализированный хостинг. Быстро, дешево, CDN по умолчанию.
  • SSR / React/Next.js или fullstack-приложение: обычно — Vercel (Next.js родной), Render (универсально), иногда Netlify (под Next + Functions).
  • Backend / API / серверные функции: можно использовать Render, Vercel Serverless Functions, Cloud Run, DigitalOcean App Platform, либо PaaS-решения.
  • Realtime / база + auth: Firebase или Supabase — оба дают DB, auth, storage, триггеры. Для SQL-ориентированных задач Supabase удобнее; для tight Google-ecosystem — Firebase.
  • RU-требования / хранение данных в РФ / интеграции с 1С: Selectel, Timeweb Cloud — предпочтительны для соответствия локальным требованиям и интеграций.

2. Основные платформы: коротко + преимущества и типовые сценарии
Vercel
Лучшее место для Next.js (SSR/ISR), статических сайтов и фронтов.
  • Автоматический CI: при пуше в Git — деплой.
  • Лёгкая настройка environment variables, Preview Deployments для PR.
  • Подходит для SaaS MVP и продакшн-сайтов с динамикой.
Практика (шаги):
  1. Подключить репозиторий (GitHub/GitLab/Bitbucket).
  2. Указать билд-команду и output (напр., npm run build / .next).
  3. Добавить секреты в Environment Variables.
  4. Настроить домен (A / CNAME / ALIAS) — Vercel выдаст инструкции.

Netlify
  • Отлично для статичных сайтов и Jamstack. Поддерживает Functions (serverless).
  • Очень простой workflow для лендингов и маркетинга.
Практика: подключаете репозиторий, указываете билд, Netlify автоматически выдаёт SSL и CDN.

Render
  • Универсальная платформа: веб-службы, cron, workers, background jobs, БД.
  • Больше контроля над инстансами и ресурсами (подходит, если нужны long-running processes).

Firebase
  • Realtime Database, Firestore, Firebase Auth, Hosting, Functions.
  • Отличный выбор для мобильных и realtime приложений.
  • Hosting: простой деплой статиков и SPA (firebase deploy).

Supabase
  • Postgres-совместимая в облаке БД + realtime + auth + storage.
  • Для проектов, которые хотят SQL + realtime + простая интеграция с фронтом.

Timeweb Cloud и Selectel (RU)
  • Локальный хостинг, соответствует требованиям хранения/обработки данных в РФ.
  • Поддержка VPS, managed Kubernetes, object storage, выделенные сервера.
  • Используются для проектов с юридической необходимостью хранить данные в РФ или требующих интеграций с локальными сервисами.

3. Домены, SSL, CDN — что нужно знать (практика)

Домены и DNS (практическая последовательность)
  1. Покупаете домен у регистратора (регистраторами в РФ: Reg.ru, RU-CENTER; международные: Namecheap, GoDaddy).
  2. На платформе хостинга смотрите инструкции: обычно нужно добавить A-запись (или ALIAS/ANAME) или CNAME для www.
  3. Если используете Vercel/Netlify/Render — они дают точные DNS-записи и часто предлагают делегировать DNS.
  4. TTL записей: для продуктивности — можно оставить стандартный, но при смене провайдера временно уменьшить TTL (например, до 300 сек).

SSL
  • Let’s Encrypt встроен во все топовые платформы — SSL обычно включён автоматически.
  • На VPS / Selectel / Timeweb — нужно настроить certbot / автообновление сертификатов.
  • Проверь: редирект http → https, HSTS (если уверены в домене), корректные настройки CORS.

CDN
  • CDN — обязательный элемент для производительности: Vercel/Netlify используют собственные CDN.
  • Если у вас сложная архитектура, добавьте Cloudflare/fastly для защиты, кэширования и WAF.
  • Cache-headers: отдавайте Cache-Control умно: статические ассеты — long cache; HTML — short/no cache + ETag.

4. CI/CD и Environment Variables (практическая настройка)
CI: большинство платформ при пуше в ветку автоматически собирают билд и деплоят Preview (PR) и Production (main).
Env vars: храните API-ключи, секреты в настройках проекта на платформе (не в коде). Используйте разные переменные для preview/prod.
Secrets management: не храните в репозитории; используйте platform secrets или Vault.

Пример структуры env:
NEXT_PUBLIC_API_URL=https://api.myservice.com
DATABASE_URL=postgres://user:pass@host:5432/dbname
GEMINI_API_KEY=xxxx

5. Резервное копирование, мониторинг и логирование (must-have)
Бэкапы БД: регулярные автоматические бэкапы (ежедневно/ежечасно в зависимости от критичности). Supabase/Firebase/managed Postgres имеют встроенные бэкапы. Для VPS настроить pg_dump и хранить в object storage.
Мониторинг: Sentry (ошибки), Prometheus/Grafana (метрики), Logflare/Datadog — для продакшна.
Логи: храните логи событий и ошибок отдельно, с ротацией и retention policy.

6. Стоимость и бюджетный подход (практическое понимание)
Фронтенд на Vercel/Netlify: небольшой проект — бесплатно; продакшн с высокой нагрузкой — от десятков до сотен долларов в месяц (платные планы для увеличенной bandwidth, concurrent builds).
Supabase / Firebase: бесплатные планы есть, но за хранение, сетевой трафик и функции платите по использованию.
RU-хостинг (Selectel / Timeweb): VPS/Kubernetes стоят от нескольких тысяч рублей в месяц; managed решения дороже, но дают локальную юрисдикцию.
Планируя бюджет, учитывайте: хостинг, домен, сертификат (если не встроен), third-party API (OpenAI/Gemini), storage и CDN.

7. Безопасность: чек-лист (практические пункты)
  • Использовать HTTPS и HSTS.
  • Ограничивать CORS по доменам.
  • Настроить rate limiting на API (Cloudflare / API gateway).
  • Настроить RBAC/roles в БД и минимизировать привилегии.
  • Включить 2FA для аккаунтов платформ (Vercel, Supabase, GitHub).
  • Регулярные обновления зависимостей и сканирование уязвимостей (Dependabot, Snyk).

8. Типовые рабочие процессы: пример деплоя Next.js → Vercel и подключение Supabase
  • Создаёте проект Next.js локально (npx create-next-app).
  • Регистрируете репозиторий на GitHub, пушите код.
  • На Vercel подключаете репозиторий, указываете ветку main.
  • В Vercel добавляете env vars: NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY.
  • На Supabase создаёте проект, таблицы, включаете Auth.
  • В коде используете Supabase client и деплоите — Vercel автоматически соберёт проект и выдаст URL.
  • Привязываете домен → включаете SSL → настраиваете редирект www → root.

9. Практические советы от разработчика (lifehacks)
  • Для быстрой разработки используйте preview deploys (Vercel/Netlify) — это продаёт клиенту и даёт тестовый URL для QA.
  • Держите минимальный production-тестовый набор переменных в CI, а остальные — в vault.
  • Используйте feature flags (LaunchDarkly / simple env switch) для безопасного релиза новых функций.
  • Для российской аудитории — всегда имей альтернативный RU-хостинг и способ переноса данных (на случай санкций/ограничений).

10. Контрольный чек-лист перед выпуском MVP
  • Автоматические деплои настроены (PR → preview, main → prod).
  • Переменные окружения убраны из кода.
  • SSL/HTTPS работает.
  • Бэкапы БД настроены.
  • Логи и мониторинг подключены (Sentry).
  • Кэш/headers настроены для статических файлов.
  • Rate-limiting и CORS ограничены.
  • Документация по деплою и rollback доступна в README.

📋 Практика:
Задание A — деплой мини-проекта на Vercel
  1. Создайте простой Next.js проект: npx create-next-app my-app.
  2. Инициализируйте git, залейте на GitHub.
  3. Подключите репозиторий к Vercel и деплойте.
  4. Проверьте: preview deploy (открывается при PR), продакшн (main).
  5. Добавьте переменную NEXT_PUBLIC_TEST=hello и выведите её в интерфейсе.
Задание B — подключение Supabase
  1. Создайте бесплатный проект Supabase.
  2. Создайте таблицу messages (id, text, created_at).
  3. Подключите Supabase client в Next.js и выведите последние 5 сообщений на страницу.
  4. Настройте простую форму для добавления сообщения (auth не обязателен для задания).
Задание C — домен и SSL
  1. Купите (или используйте тестовый) домен.
  2. Подключите домен к Vercel, выполните все шаги DNS.
  3. Убедитесь, что SSL активирован и сайт доступен по HTTPS.

✅ Дополнительно:

Пошаговый чек-лист (скринкаст-сценарий) для заданий A–C

Блок задания

Шаг

Действие (точное)

Что показать в скринкасте

A. Деплой мини-проекта на Vercel

1

Установить проект: npx create-next-app my-app

Окно терминала, создание проекта


2

Перейти в папку проекта: cd my-app

Терминал


3

Инициализировать Git: git init

Терминал


4

Сделать первый коммит

git add . → git commit -m "init"


5

Создать GitHub репозиторий

GitHub UI: “New Repository”


6

Подключить локальный проект

Команды git remote add и git push


7

Перейти в Vercel → New Project

Интерфейс Vercel


8

Выбрать репозиторий

GitHub интеграция


9

Подтвердить настройки (Next.js определяется автоматически)

Экран конфигурации


10

Нажать Deploy

Финальный экран деплоя


11

Открыть Preview URL

Vercel "Visit"


12

Проверить Production URL после пуша в main

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


13

Добавить переменную окружения: NEXT_PUBLIC_TEST=hello

Vercel → Settings → Environment Variables


14

Перестроить проект

Кнопка “Redeploy”

B. Подключение Supabase

1

Перейти на supabase.com → “New Project”

UI Supabase


2

Ввести название и пароль, создать проект

Экран создания


3

Открыть вкладку Database

Интерфейс DB


4

Создать таблицу messages (id, text, created_at)

SQL Editor или Table Editor


5

Перейти в Project Settings → API

Доступ к URL + anon key


6

Установить клиент Supabase: npm install @supabase/supabase-js

Терминал


7

Создать файл клиентской конфигурации /lib/supabase.js

Показать структуру


8

Подключить Supabase в Next.js и вывести сообщения

Страница /messages


9

Проверить запросы и realtime

Консоль + UI


10

Добавить форму добавления сообщения

Показать UI формы

C. Домен и SSL на Vercel

1

Зайти в Vercel → Domains → Add

UI домена


2

Ввести домен

Поле ввода


3

Получить DNS-записи (A/CNAME)

Экран DNS


4

Перейти в Reg.ru/Namecheap и добавить DNS

Панель доменов


5

Вернуться в Vercel → Check DNS

Кнопка проверки


6

Убедиться, что статус стал “Verified”

Плашка Verified


7

Проверить бесплатный SSL (Let’s Encrypt)

Статус SSL Enabled


8

Открыть сайт по HTTPS

В браузере


Структура готового шаблона Next.js + Supabase

Файл / Папка

Назначение

Содержимое

/pages/index.js

Главная страница

Тестовый рендер + вывод данных из Supabase

/pages/messages.js

Страница списка сообщений

Получение и отображение данных из таблицы messages

/components/MessageForm.js

Компонент формы

Поле ввода + отправка сообщения в Supabase

/lib/supabase.js

Клиент Supabase

Инициализация SDK с URL и anon key

/styles/globals.css

Базовые стили

Tailwind (опционально) или базовые стили

/utils/validators.js

Валидация формы

Проверка длины текста

.env.local

Переменные окружения

NEXT_PUBLIC_SUPABASE_URL=...NEXT_PUBLIC_SUPABASE_ANON_KEY=...

package.json

Зависимости проекта

next, react, @supabase/supabase-js

README.md

Инструкция по запуску

Команды и порядок установки

/public/

Статические ассеты

Логотипы, картинки

/hooks/useMessages.js

Пользовательский хук

Реалтайм-подписка + fetch

/pages/api/add-message.js

API-роут (опционально)

Серверная обработка сообщений

2 МОДУЛЬ

Идея → Концепция → Архитектура приложения

Урок 1.
Генерация идей с помощью ИИ.
В 2025 году главная проблема — не “как сделать приложение”, а “что именно делать”.
Инструменты стали доступны всем. Побеждают те, кто умеет:
  • находить востребованные идеи,
  • быстро превращать их в концепцию,
  • проверять спрос до начала разработки.
ИИ сегодня — это не вдохновение, а инструмент продуктовой аналитики. В этом уроке вы научитесь использовать Google AI Studio, ChatGPT и GigaChat как соавторов бизнес-идей, а не просто генераторов текста.

1. Новый подход к генерации идей
❌ Старый подход (не работает)
«Сделаю ещё один сервис X»
«Мне кажется, это будет нужно»
«Скопирую западный продукт»

✅ Современный подход (работает)
Идея = проблема + аудитория + сценарий использования
Проверка спроса до разработки
MVP как тест гипотезы, а не «большой проект»
ИИ позволяет пройти этот путь за часы, а не за месяцы.

2. Какие идеи лучше всего подходят для no-code и AI-разработки
Перед генерацией важно понимать, какие типы продуктов лучше всего масштабируются без кода.

Лучшие категории:
  • AI-ассистенты (бизнес, обучение, продажи, поддержка)
  • B2B-сервисы (CRM, учёт, аналитика, автоматизация)
  • Маркетплейсы нишевых услуг
  • Сервисы для фрилансеров и предпринимателей
  • Внутренние инструменты компаний
  • AI-инструменты “под задачу” (не универсальные, а узкие)

3. Генерация идей через Google AI Studio
Почему Google AI Studio — ключевой инструмент
Google AI Studio в 2025 году — это не просто чат. Это платформа для проектирования продуктов:
  • анализ идей,
  • генерация сценариев,
  • разбор бизнес-моделей,
  • помощь в архитектуре будущего приложения.
Пример рабочего промпта:
Ты продуктовый менеджер и разработчик SaaS.
Сгенерируй 10 идей веб-приложений, которые можно реализовать без кода или с минимальным кодом.
Целевая аудитория: малый бизнес и фрилансеры.
Для каждой идеи укажи: проблему, решение, формат монетизации.

Что важно:
  • всегда задавайте роль ИИ (product manager, founder, analyst);
  • указывайте ограничения (no-code, MVP, срок);
  • просите структурированный ответ, а не просто список.

4. Генерация и фильтрация идей через ChatGPT
ChatGPT удобно использовать как:
  • генератор альтернатив,
  • критика идеи,
  • аналитика спроса.

Пример 1.Проверка идеи
Проанализируй идею AI-сервиса для автоматизации ответов в Telegram для экспертов.
Оцени: востребованность, конкуренцию, сложность реализации, потенциал монетизации.

Пример 2. Улучшение идеи
Улучши эту идею так, чтобы она была реализуема за 14 дней и могла продаваться по подписке.
ChatGPT отлично подходит для итераций:
идея → улучшение → упрощение → MVP.

5. Использование GigaChat для локального рынка
GigaChat особенно полезен, если:
  • вы ориентируетесь на российскую аудиторию,
  • важны локальные реалии, цены, поведение пользователей,
  • продукт будет продвигаться через Яндекс, VK, Telegram.
Пример промпта:
Сгенерируй идеи веб-сервисов для российского малого бизнеса, которые решают реальные ежедневные задачи и могут быть реализованы без программирования.
GigaChat лучше чувствует:
  • язык,
  • боли предпринимателей,
  • специфику рынка РФ.

6. Анализ востребованности идеи (без сложной аналитики)
ИИ может заменить первичный ресёрч.
Что анализируем:
  1. Есть ли проблема
  2. Кто платит
  3. Как уже решают
  4. Чем вы будете лучше
Универсальный запрос:
Проанализируй спрос на идею [описание].
Укажи целевую аудиторию, аналоги, слабые места конкурентов и возможное УТП.

7. Примеры сильных идей
🔹 AI-ассистентыассистент
-для экспертов и онлайн-школ,
-помощник для продаж в Telegram,
-AI-менеджер задач для предпринимателя.
🔹 Маркетплейсы
-нишевые (психологи, дизайнеры, репетиторы),
-закрытые сообщества с сервисной частью,
-маркетплейсы услуг внутри компаний.
🔹 Сервисы (SaaS)
-учёт заявок,
-автоматизация контента,
-аналитика рекламы,
-сервисы работы с документами.

8. Переход от идеи к концепции
Хорошая идея → концепция, которая отвечает на 5 вопросов:
  1. Для кого?
  2. Какую проблему решаем?
  3. Как пользователь будет взаимодействовать?
  4. Где здесь ИИ?
  5. За что платят?
ИИ помогает оформить концепцию в одном документе.

📋Практика:
Задание 1
Сгенерируйте 10 идей через любой ИИ (Google AI Studio / ChatGPT / GigaChat).
Задание 2
Отберите 3 идеи, которые:
  • можно реализовать за 14 дней,
  • не требуют сложного кода,
  • имеют понятную аудиторию.
Задание 3
Для одной идеи оформите мини-концепцию:
  • проблема,
  • решение,
  • тип приложения,
  • возможная монетизация.

✅ Дополнительно:

Промпты для генерации идей веб-приложений через ИИ
(Google AI Studio / ChatGPT / GigaChat)

Цель

Готовый промпт

Что получится на выходе

Найти идеи под заработок

Предложи 10 идей веб-приложений, которые можно реализовать без сложной разработки и продавать по подписке. Укажи целевую аудиторию и проблему.

Список SaaS-идей + ЦА

Идеи под фриланс

Сгенерируй идеи веб-сервисов, которые фрилансер может сделать за 1–2 недели и продать клиенту.

Простые, продаваемые проекты

Идеи под бизнес

Предложи идеи веб-приложений для малого бизнеса (CRM, автоматизация, аналитика), которые можно создать через no-code и AI.

B2B-сервисы

AI-ассистенты

Сгенерируй идеи AI-ассистентов для сайта или сервиса, которые реально востребованы и могут быть монетизированы.

ИИ-функции и боты

Проверка ниши

Проанализируй востребованность идеи: [описание идеи]. Для кого, какую проблему решает, есть ли конкуренты.

Анализ рынка

MVP без кода

Какой минимальный функционал нужен, чтобы запустить MVP для идеи: [идея]? Опиши в виде списка.

Список функций MVP

Уникальность

Предложи 5 способов сделать эту идею уникальной и отличаться от конкурентов.

USP и фичи

Масштабирование

Как можно масштабировать этот сервис через 3–6 месяцев?

Стратегия роста


Шаблон концепции веб-приложения / AI-сервиса

Блок

Описание / Что заполнить

Название проекта

Рабочее название сервиса

Тип приложения

SaaS / CRM / сервис / AI-приложение / бот

Целевая аудитория

Кто будет пользоваться (ниша, профессия, бизнес)

Проблема

Какую конкретную боль решает приложение

Решение

Как сервис решает эту проблему

Ключевая ценность

Почему это удобно / выгодно / быстрее

Основной функционал

3–7 ключевых функций

AI-функции

Где используется ИИ (чат, анализ, генерация, рекомендации)

Формат MVP

Что делаем в первой версии

Инструменты

Google AI Studio / no-code / low-code / ИИ

Монетизация

Подписка / разовый платёж / freemium

Каналы продвижения

SEO, Telegram, VK, Google, Product Hunt

Потенциал роста

Новые функции, новые рынки


Проверка идеи веб-приложения на деньги
(валидируем, можно ли заработать ДО разработки)

Критерий

Вопрос для проверки

Да / Нет / Комментарий

Платёжеспособная аудитория

У этой ЦА уже есть расходы на сервисы, софт, автоматизацию?


Частота проблемы

Проблема возникает регулярно (каждый день / неделю)?


Срочность

Проблему нужно решать быстро, а не «когда-нибудь»?


Альтернативы

Сейчас проблему решают вручную / таблицами / костылями?


Экономия времени

Сервис экономит минимум 1–5 часов в неделю?


Экономия денег

Сервис снижает затраты или увеличивает доход?


Готовность платить

Можно ли назвать цену, которую ЦА не будет долго обдумывать?


Конкуренты есть

Уже есть похожие сервисы (это плюс, не минус)?


Отличие от конкурентов

Есть ли простое отличие / фича / нишевание?


Простота MVP

Можно ли сделать первую версию за 7–14 дней?

  • 7–10 “Да” — отличная идея для MVP
  • 4–6 “Да” — нужна доработка концепции
  • 0–3 “Да” — идею лучше сменить

Чек-лист: стоит ли вообще делать этот сервис
(отсекаем плохие идеи заранее)

Вопрос

Да / Нет

Я понимаю проблему глубже, чем «кажется полезным»


Я могу объяснить ценность сервиса за 10 секунд


Сервис решает одну основную задачу (не всё сразу)


Для запуска не нужны большие вложения


Я могу найти первых пользователей сам


MVP не требует сложной логики и большого backend


Есть понятный путь монетизации


Сервис можно улучшать поэтапно


Проект интересен мне лично


Его можно сделать с помощью no-code / AI

  • 8–10 “Да” → делаем
  • 5–7 “Да” → упрощаем и тестируем
  • 0–4 “Да” → идея не готова


Урок 2.
Создание потока и структуры приложения.
Цель:
Научиться переводить идею в понятную структуру приложения, чтобы:
  • не «лепить функции хаотично»,
  • не переделывать всё на этапе разработки,
  • сразу понимать, что и где создавать: UI, логику, ИИ, базу данных.
Хорошая архитектура = быстрый MVP + дешёвая разработка + лёгкое масштабирование.

1. Почему 90% сервисов ломаются на этапе структуры
Типичная ошибка новичков:
  • «Давайте сначала сделаем интерфейс»
  • «Добавим больше функций»
  • «ИИ потом прикрутим»
В реальности:
  • пользователь не понимает, что делать первым шагом,
  • логика расползается,
  • приложение сложно поддерживать.
👉 Поэтому мы всегда идём по цепочке:
Пользователь → сценарий → экраны → логика → данные → ИИ

2. CJM — карта пути пользователя (без теории)
Что такое CJM на практике
CJM (Customer Journey Map) — это пошаговый путь пользователя внутри приложения:
  • от входа
  • до получения результата
  • и повторного использования
Пример (AI-сервис):
  1. Пользователь зашёл на сайт
  2. Зарегистрировался
  3. Выбрал сценарий
  4. Ввёл данные
  5. Получил результат
  6. Сохранил / оплатил / вернулся
💡 Если шаг нельзя объяснить — он лишний.

3. Пользовательские сценарии (User Flow)
Что такое сценарий
Сценарий = что делает пользователь + что делает система
Пример:
  • Пользователь нажимает кнопку
  • Система проверяет данные
  • ИИ генерирует результат
  • Пользователь видит ответ

Типовые сценарии для веб-приложений:
  • Регистрация / вход
  • Основное действие (генерация, поиск, анализ)
  • Работа с результатами
  • Оплата / ограничения
  • Повторное использование
👉 Именно сценарии определяют архитектуру, а не наоборот.

4. Инструменты для визуализации структуры
🔹 Miro AI
Используем для:
  • CJM
  • сценариев
  • логических блоков
Фишка:
можно описать сервис текстом, и Miro AI сам предложит структуру.

🔹 Whimsical
Подходит для:
  • user flow
  • экранов
  • логики переходов
Идеален для простых и средних сервисов.

🔹 FlowMapp
Лучший выбор, если:
  • много экранов,
  • есть роли пользователей,
  • сложная навигация.
Используется в продуктовых командах и студиях.

5. Генерация архитектуры через Google AI Studio
Почему Google AI Studio — ключевой инструмент
В отличие от обычных чатов:
  • он мыслит структурно,
  • умеет разбивать продукт на модули,
  • понимает архитектуру приложений.

Что мы генерируем в AI Studio
Через один грамотный запрос можно получить:
  • список экранов,
  • пользовательские сценарии,
  • архитектуру frontend / backend,
  • логику работы ИИ,
  • структуру данных.

Пример промпта:
«Создай архитектуру веб-приложения типа [описание сервиса].
Опиши:
– пользовательские сценарии
– список экранов
– основные модули
– где используется ИИ
– что можно сделать через no-code, а что через AI-code»
📌 На выходе — скелет приложения, готовый к разработке.

6. Как выглядит правильная архитектура MVP
Минимальный, но рабочий состав:
  • Landing / вход
  • Авторизация
  • Основной экран действия
  • Экран результата
  • База данных
  • ИИ-модуль
  • Ограничения / тарифы
👉 Всё остальное — потом.

✅ Дополнительно:

Таблица 1. CJM — карта пути пользователя в веб-приложении

Этап

Действие пользователя

Цель пользователя

Что делает система

Возможные проблемы

Вход

Заходит на сайт / сервис

Понять, что это

Показывает ценность и CTA

Непонятно, зачем сервис

Регистрация

Регистрируется / логинится

Получить доступ

Проверка данных, вход

Сложная форма

Онбординг

Выбирает сценарий

Быстро начать

Подсказки, автонастройка

Слишком много шагов

Основное действие

Вводит данные

Получить результат

Обработка данных + ИИ

Долгая генерация

Результат

Смотрит результат

Использовать результат

Отображение, сохранение

Неочевидные действия

Повтор

Возвращается

Сделать ещё

История, шаблоны

Нет мотивации

Монетизация

Оплачивает

Получить доступ

Оплата, тарифы

Недоверие


Таблица 2. User Flow — пользовательские сценарии

Сценарий

Шаг пользователя

Ответ системы

Экран / модуль

Регистрация

Вводит email

Проверка, вход

Auth

Выбор действия

Выбирает сценарий

Загрузка шаблона

Dashboard

Ввод данных

Заполняет форму

Валидация

Input

Генерация

Нажимает «Создать»

ИИ-обработка

AI Module

Результат

Смотрит результат

Отображение

Result

Сохранение

Сохраняет

Запись в БД

Database

Оплата

Оплачивает

Открытие доступа

Billing


Таблица 3. Шаблон архитектуры веб-приложения / AI-сервиса

Блок

Что описать

Инструменты

Тип приложения

SaaS / сервис / AI

—

Роли пользователей

Гость / пользователь / админ

—

Экраны

Список экранов

No-code

Навигация

Переходы между экранами

No-code

Основная логика

Что происходит при действиях

Google AI Studio

AI-модули

Где используется ИИ

Gemini / OpenAI

База данных

Какие данные храним

Supabase / Firebase

Интеграции

API, сервисы

Make / API

Авторизация

Как входить

Firebase / Supabase

Монетизация

Подписки, лимиты

Stripe / ЮKassa

Хостинг

Где размещаем

Vercel / RU

Масштабирование

Что добавим позже

—

Урок 3.
UX/UI без дизайнера.
Цель:
Научиться создавать понятный, современный и рабочий интерфейс:
  • без навыков дизайна,
  • без долгих правок,
  • сразу под MVP и реальное использование.
💡 Сейчас UX/UI — это не «красиво», а понятно, быстро и без лишних шагов.

1. Что такое UX/UI на практике (без теории)
UX (User Experience)
— как пользователь проходит путь
— сколько шагов до результата
— где он путается или бросает сервис
UI (User Interface)
— как выглядят экраны
— где кнопки, формы, тексты
— визуальная иерархия

👉 UX важнее UI.
Красивый интерфейс с плохим UX = провал.

2. Базовый принцип: сначала логика, потом визуал
Перед тем как открывать Figma:
  • у вас уже есть CJM
  • есть user flow
  • есть список экранов
👉 Интерфейс — это визуализация структуры, а не творчество «из головы».


3. Figma — основной инструмент (даже без дизайна)
Почему Figma
  • работает в браузере,
  • подходит для no-code и разработчиков,
  • огромная экосистема AI-плагинов.
Мы используем Figma не как дизайнеры, а как:
  • конструктор экранов,
  • средство коммуникации,
  • основу для no-code платформ.

4. Figma + AI-плагины (ключевая связка)
🔹 Autoflow
Используем для:
  • быстрой визуализации user flow,
  • стрелок и переходов между экранами.
👉 Экономит часы ручной работы.

🔹 Magician AI
Используем для:
  • генерации UI-компонентов,
  • текстов,
  • иконок,
  • быстрых визуальных идей.
Пример:
«Сделай экран дашборда AI-сервиса для маркетолога»

🔹 Diagram AI
Используем для:
  • генерации экранов по текстовому описанию,
  • быстрого MVP-интерфейса.
👉 Особенно полезен для новичков.


5. Генерация интерфейсов через Galileo AI
Что такое Galileo AI
Это сервис, который:
  • принимает описание приложения,
  • генерирует готовые UI-экраны,
  • соблюдает современные UX-паттерны.
Когда использовать Galileo
  • нужен быстрый старт,
  • нет желания «рисовать»,
  • важно получить современный SaaS-стиль.
👉 Отлично подходит для:
  • AI-сервисов,
  • SaaS,
  • дашбордов,
  • кабинетов пользователя.

6. Google AI Studio — генерация UI как системы
Почему это важно
Google AI Studio:
  • понимает логику приложения,
  • генерирует связанные экраны, а не одиночные макеты,
  • работает от архитектуры, а не от красоты.
UI Screens Tool — как мы используем
Через текстовое описание можно получить:
  • список экранов,
  • структуру каждого экрана,
  • UI-компоненты (формы, кнопки, таблицы),
  • логику взаимодействия.
Пример запроса:
«Создай UI-экраны для AI-сервиса:
– экран входа
– дашборд
– экран ввода данных
– экран результата
– экран истории»

📌 На выходе — готовая UI-структура, которую:
  • переносим в Figma,
  • или сразу используем в no-code / коде.

7. Как выглядит правильный UX/UI для MVP
Обязательные признаки:
  • 1 основной сценарий
  • минимум кнопок
  • понятные подписи
  • быстрый путь к результату
Что НЕ нужно в MVP:
  • сложные анимации
  • «уникальный» дизайн
  • десятки экранов
  • кастомные шрифты и цвета
👉 MVP = функциональность + ясность.

✅ Дополнительно:

Таблица 1. UX/UI-чеклист «Можно ли начинать разработку?»
Используется перед no-code / AI / кодом как финальный фильтр.

Проверка

Вопрос для себя

Да / Нет

Первый шаг

Понимает ли пользователь, что делать, за 3 секунды?


Основное действие

Есть ли одна главная кнопка / действие на экране?


Ясность экрана

Можно ли объяснить этот экран одним предложением?


Лишние экраны

Есть ли экраны, которые можно убрать без потери смысла?


Результат

Видит ли пользователь результат сразу после действия?


Минимум кликов

Можно ли дойти до результата за 1–3 шага?


Повторяемость

Понятно ли, как повторить действие второй раз?


Ошибки

Понятно ли пользователю, что делать, если что-то пошло не так?

  • 7–8 “Да” → можно начинать разработку
  • 5–6 “Да” → упростить интерфейс
  • < 5 “Да” → сначала доработать UX
👉 Это финальный чек перед Google AI Studio / no-code / кодом.


Таблица 2. Типовые экраны для 80% веб-сервисов (шаблон)
Готовый список экранов, который подходит почти для любого MVP.

Экран

Назначение

Комментарий

Login / Signup

Вход и регистрация

Минимум полей

Dashboard

Точка старта

Главное действие сразу видно

Input

Ввод данных

Формы, параметры

Processing (опционально)

Ожидание / генерация

Спиннер, прогресс

Result

Результат

Основная ценность сервиса

History

История действий

Повторное использование

Billing / Limits

Оплата / ограничения

После ценности

Settings (опционально)

Настройки

Не для MVP

Важно:
MVP ≠ все экраны
Часто достаточно: Login → Dashboard → Input → Result
Остальное добавляется после первых пользователей

✅ Мини-практика
Идея сервиса (пример для разбора)
AI-сервис:
👉 «Генератор продающих описаний товаров для маркетплейсов (WB / Ozon)»
ЦА: продавцы маркетплейсов
Основная ценность: быстро получить готовое описание без копирайтера
Формат: веб-приложение / SaaS

Таблица. UX/UI-чек лист «Можно ли начинать разработку?»

Проверка

Вопрос

Ответ

Комментарий

Первый шаг

Понимает ли пользователь, что делать за 3 секунды?

✅ Да

Кнопка «Создать описание» сразу на экране

Основное действие

Есть ли одно главное действие?

✅ Да

Генерация описания

Ясность экрана

Можно ли объяснить экран одним предложением?

✅ Да

«Введите данные → получите текст»

Лишние экраны

Есть ли экраны, которые можно убрать?

✅ Да

Нет профиля, чатов, сложных настроек

Результат

Видит ли пользователь результат сразу?

✅ Да

Текст появляется после генерации

Минимум шагов

Можно ли дойти до результата за 1–3 шага?

✅ Да

Ввод → кнопка → результат

Повторяемость

Понятно ли, как сделать ещё раз?

✅ Да

Кнопка «Создать ещё»

Ошибки

Понятно ли, что делать при ошибке?

⚠️ Частично

Нужно добавить подсказку

Итог по чек-листу:
7,5 из 8 — отличная оценка
UX/UI готов для старта разработки
Можно сразу:
  • генерировать UI,
  • идти в Google AI Studio,
  • собирать MVP.

Таблица. Типовые экраны для этого сервиса (MVP)

Экран

Что на нём

Нужен для MVP

Login / Signup

Email + вход

⚠️ Можно позже

Dashboard

Кнопка «Создать описание»

✅ Да

Input

Название товара, характеристики

✅ Да

Result

Сгенерированное описание

✅ Да

History

История генераций

⚠️ Опционально

Billing

Ограничения / оплата

⚠️ После ценности

Минимальный MVP:
👉 Dashboard → Input → Result

Методический вывод:
Если ваша идея:
— проходит UX/UI-чек лист
— укладывается в 3–4 экрана
— имеет один главный сценарий
👉 вы готовы к разработке, даже без дизайнера и программиста.
3 МОДУЛЬ

Google AI Studio — центр разработки приложений

Урок 1.
Введение в Google AI Studio.
Цель:
Понять, почему Google AI Studio — это не просто ИИ, а:
  • полноценная платформа для создания приложений,
  • инструмент, который объединяет UX, логику, данные и ИИ,
  • основа для MVP, no-code, low-code и AI-code проектов.
💡 Google AI Studio — это то же, чем когда-то стали Figma для дизайна и GitHub для кода.

1. Что такое Google AI Studio на самом деле
Коротко:
Google AI Studio — это среда, где вы:
  • описываете приложение текстом,
  • получаете структуру, интерфейс и логику,
  • подключаете ИИ (Gemini),
  • экспортируете результат в код или no-code.
Это НЕ:
  • не просто чат,
  • не замена программисту «одной кнопкой»,
  • не игрушка для экспериментов.
Это:
  • конструктор приложений нового поколения,
  • рабочий инструмент для MVP, стартапов и сервисов.

2. Почему Google AI Studio — центр, а не дополнение
Большинство инструментов:
  • либо про интерфейс (Figma, Webflow),
  • либо про код (IDE, Cursor),
  • либо про ИИ (чат-ассистенты).
Google AI Studio объединяет всё:
  • продуктовую логику,
  • пользовательские сценарии,
  • UI,
  • backend-мышление,
  • ИИ-модули.
👉 Именно поэтому в курсе он стоит в центре, а не сбоку.


3. Gemini 3.0 и расширенные агенты
Что такое Gemini 3.0
Gemini 3.0 — это:
  • мультимодальная модель,
  • умеет работать с текстом, структурой, логикой, кодом,
  • понимает продуктовые задачи, а не только запросы.
Что это даёт разработчику:
  • генерацию архитектуры приложения,
  • генерацию UI-экранов,
  • генерацию логики и сценариев,
  • работу как AI-продуктовый менеджер + разработчик.

Расширенные агенты (Agents)
Агенты в Google AI Studio — это:
  • специализированные роли,
  • которые решают отдельные задачи внутри проекта.
Примеры агентов:
  • UI-агент — проектирует экраны
  • Logic-агент — продумывает сценарии
  • Data-агент — структуру данных
  • AI-агент — поведение ИИ внутри сервиса
👉 Вместо одного «болтливого ИИ» вы получаете команду виртуальных специалистов.


4. Рабочая область Google AI Studio
Основные элементы рабочей среды
Workspace (рабочее пространство)
— место, где живёт ваш проект
— здесь хранится логика, UI, сценарии
Проект / App Context
— описание приложения
— его цель, ЦА, сценарии
— это «мозг» всего проекта
UI Builder / UI Screens Tool
— генерация экранов
— структура интерфейса
— компоненты
Logic & Flow Generators
— сценарии действий
— условия
— переходы
Data & API Tools
— таблицы
— модели данных
— интеграции

5. Как мы будем использовать Google AI Studio
Важно:
мы не изучаем всё подряд, а используем Studio как инструмент для результата.
  • В курсе вы научитесь:превращать идею в структуру приложения,
  • генерировать UI-экраны,
  • создавать пользовательские сценарии,
  • добавлять ИИ-функции,
  • экспортировать проект в:
-no-code,
-low-code,
-полноценный код (Next.js и др.).

6. Типовой процесс работы в Google AI Studio
Вот как выглядит реальный workflow, который мы будем повторять:
1️⃣ Описываем идею и цель сервиса
2️⃣ Генерируем архитектуру
3️⃣ Генерируем пользовательские сценарии
4️⃣ Создаём UI-экраны
5️⃣ Добавляем ИИ-логику
6️⃣ Экспортируем или интегрируем
👉 Это замена хаотичной разработки.

7. Для кого Google AI Studio особенно полезен
Новички
  • не нужно знать код
  • появляется структура и уверенность
Фрилансеры
  • быстрые MVP для клиентов
  • экономия времени
  • рост среднего чека
Предприниматели
  • проверка идей
  • запуск сервисов
  • контроль разработки

✅ Дополнительно:

Таблица 1. Что делать в Google AI Studio, а что — вне его

Задача

Делать в Google AI Studio

Делать вне AI Studio

Комментарий

Формулировка идеи

✅


Studio хорошо структурирует мысль

Описание ЦА и цели

✅


Используется как App Context

Генерация архитектуры

✅


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

Пользовательские сценарии

✅


Logic & Flow

UI-экраны

✅


UI Screens Tool

Логика взаимодействий

✅


Условия, переходы

ИИ-функции

✅


Gemini / Agents

Код сложной логики


✅

Cursor, IDE

Продакшн-деплой


✅

Vercel, Hosting

Дизайн-полировка


✅

Figma

Масштабирование


✅

Backend, DevOps

Вывод:
Google AI Studio — это мозг и скелет приложения, но не весь продакшн.

Мини-практика.
Создание App Context (основа приложения)
App Context — это краткое, но точное описание проекта,
которое Google AI Studio использует как «память» и основу всех генераций.

Таблица 2. Шаблон App Context для Google AI Studio

Блок

Что заполнить

Пример

Название приложения

Рабочее название

AI Product Writer

Тип сервиса

SaaS / AI / сервис

AI-сервис

Целевая аудитория

Кто пользователь

Продавцы маркетплейсов

Основная проблема

Что болит

Нет времени писать описания

Ценность

Как решаем

Генерация текста за 30 секунд

Основное действие

Главное действие

Сгенерировать описание

Ключевые экраны

Список экранов

Dashboard, Input, Result

ИИ-функции

Что делает ИИ

Генерация текста

Ограничения MVP

Чего не делаем

Нет сложных настроек

Будущее развитие

Что добавим позже

История, шаблоны



📋 Задание:
1. Заполнить таблицу App Context для своей идеи
2. Скопировать текст в Google AI Studio
3. Использовать его для:
  • генерации UI,
  • сценариев,
  • логики приложения.
👉 Это первый реальный шаг к созданию своего приложения.
Урок 2.
Создание прототипа по текстовому ТЗ.
Цель:
Научиться создавать рабочий прототип веб-приложения:
  • без ручной вёрстки,
  • без написания кода «с нуля»,
  • используя только текстовое ТЗ + Google AI Studio.
💡 Сейчас прототип — это уже не макет.
Это полуготовое приложение, которое можно доработать, показать пользователям или сразу масштабировать.

1. Что такое прототип в наши дни
Старый подход:
  • Макеты в Figma
  • Отдельно логика
  • Отдельно backend
  • Месяцы согласований
Современный подход:
Прототип = UI + логика + данные + ИИ
Google AI Studio позволяет:
  • описать продукт словами,
  • получить связанный результат,
  • избежать разрыва между дизайном и разработкой.

2. Подготовка текстового ТЗ (что важно)
Хорошее ТЗ — это не «сделай сервис», а структурированное описание.
Минимальный состав ТЗ:
  • цель сервиса,
  • ЦА,
  • основной сценарий,
  • ключевые экраны,
  • действия пользователя,
  • роль ИИ.
👉 Всё это у нас уже есть из App Context.

3. Генерация структуры приложения
Что мы делаем в первую очередь
НЕ интерфейс.
Сначала — структура и логика.

Через Google AI Studio мы генерируем:
  • список экранов,
  • роли пользователей,
  • сценарии,
  • связи между модулями.
Пример запроса:
«На основе App Context создай структуру веб-приложения:
– список экранов
– пользовательские сценарии
– модули приложения
– точки взаимодействия с ИИ»
📌 Результат:
скелет приложения, который не меняется при косметических правках.

4. Генерация интерфейса (UI Screens Tool)
Как работает генерация UI
Google AI Studio:
  • не рисует «красивую картинку»,
  • а создаёт функциональные UI-экраны,
  • привязанные к сценариям.
Мы генерируем:
  • Dashboard
  • Input-экраны
  • Result-экраны
  • History / Limits (если нужно)
Важно:
  • UI сразу создаётся как система
  • экраны знают, что на них происходит
  • компоненты готовы к интеграции

5. Генерация серверной логики и API
Что значит «серверная логика» в AI Studio
Это:
  • правила обработки данных,
  • сценарии выполнения действий,
  • условия,
  • точки API-взаимодействия.
Пример логики
  • пользователь вводит данные
  • данные валидируются
  • вызывается AI-модуль
  • результат сохраняется
  • возвращается в UI
👉 Всё это генерируется текстом, без ручного кода.

Генерация API
Google AI Studio умеет:
  • описывать эндпоинты,
  • формировать запросы / ответы,
  • готовить структуру для экспорта в backend.
Это особенно важно для:
  • масштабирования,
  • интеграций,
  • дальнейшей доработки в Cursor / IDE.

6. Работа с данными: таблицы, функции, модели
Таблицы (Data Tables)
Используются для:
  • пользователей,
  • истории действий,
  • результатов,
  • лимитов.
AI Studio:
  • предлагает структуру таблиц,
  • поля,
  • связи между ними.
Функции
Функции описывают:
  • что происходит при действии пользователя,
  • в каком порядке,
  • при каких условиях.
Пример:
  • generateResult()
  • saveHistory()
  • checkLimits()
Модели данных
Это логическая схема:
  • какие данные существуют,
  • как они связаны,
  • где используются.
👉 Модель данных = фундамент backend.

Что мы получили на выходе
У вас уже есть:
  • структура приложения,
  • UI-экраны,
  • логика сценариев,
  • описание серверной части,
  • схема данных,
  • готовность к:
  • no-code,
  • low-code,
  • экспорту в код.
Это уже не идея, а прототип продукта.

✅ Дополнительно:

Таблица 1. Как текстовое ТЗ превращается в прототип
что я описываю текстом → что именно появляется в AI Studio.

Блок ТЗ

Что пишет студент

Что генерирует Google AI Studio

Где используется

Цель продукта

«Помогает маркетологам быстро генерировать рекламные тексты»

Общая логика приложения, смысл UI, роль ИИ

App Context

Целевая аудитория

«Маркетологи, фрилансеры, малый бизнес»

Упрощённый UX, минимальные экраны, язык интерфейса

UI Screens

Основной сценарий

«Ввести продукт → получить текст → сохранить результат»

User Flow, связка экранов

Structure / Flow

Тип сервиса

«SaaS, web-приложение»

Архитектура: frontend + logic + data

App Structure

Основные экраны

Login, Dashboard, Input, Result, History

Набор UI-экранов

UI Screens Tool

Вводимые данные

Название продукта, ЦА, формат текста

Input-компоненты, формы

UI + Logic

Действие ИИ

«Сгенерировать рекламный текст»

AI-функция / агент

Logic / Functions

Результат

Текст, готовый к использованию

Result Screen + сохранение

UI + Data

Хранение данных

История генераций

Таблицы данных

Data Tables

Ограничения

Лимит запросов

Проверки, условия

Server Logic


Таблица 2. Что НЕ нужно писать в ТЗ (AI Studio сделает сам)

Что НЕ нужно детализировать

Почему

Цвета и шрифты

UI можно доработать позже

Точные размеры кнопок

Генерация идёт через компоненты

Технические API-детали

AI Studio формирует их автоматически

Архитектуру серверов

Важно только логическое описание

Названия функций

Достаточно описать поведение


✅ Мини-практика: создаём прототип конкретного сервиса
Идея сервиса для практики
AI-ассистент для генерации описаний товаров для маркетплейсов
Формат:
  • Web-приложение
  • Один основной сценарий
  • Минимум экранов
  • Максимум пользы
Шаг 1. Текстовое ТЗ (что мы вводим в AI Studio)
Таблица 3. Готовое ТЗ для вставки

Блок

Текст

Название

AI Product Description Generator

Цель

Быстро генерировать продающие описания товаров

ЦА

Продавцы на маркетплейсах, малый бизнес

Основной сценарий

Пользователь вводит данные товара → получает описание

Тип сервиса

SaaS, web-приложение

Экраны

Login, Dashboard, Input, Result, History

Входные данные

Название товара, категория, преимущества, стиль

Результат

Готовое описание товара

ИИ

Генерация текста по шаблону

Хранение

История генераций пользователя


Шаг 2. Генерация структуры приложения
Таблица 4. Ожидаемая структура

Элемент

Что должно появиться

Экраны

5 базовых экранов

User Flow

Login → Dashboard → Input → Result

Логика

Ввод → генерация → сохранение

Роли

Пользователь

Связи

UI ↔ Logic ↔ Data


Шаг 3. Генерация UI
Таблица 5. Типовые UI-экраны

Экран

Назначение

Основной элемент

Login

Авторизация

Кнопка входа

Dashboard

Стартовая точка

CTA «Создать описание»

Input

Ввод данных

Форма

Result

Результат

Текст + кнопка «Сохранить»

History

Повторное использование

Список


Шаг 4. Генерация логики и данных
Таблица 6. Логика и данные

Компонент

Описание

Функция

generateDescription()

Триггер

Нажатие кнопки

Таблица

user_generations

Поля

product, input, result, date

Условия

Проверка лимитов


Вывод:
Если раньше, чтобы создать прототип,
нужны были дизайнер, разработчик и менеджер,
то сейчас это делает один человек + Google AI Studio.

Урок 3.
Создание полноценного веб-приложения (Vibe Coding-подход).
Цель:
Научиться собирать рабочее веб-приложение целиком в Google AI Studio:
от интерфейса → к логике → к пользовательским сценариям → к данным и API,
без ручной вёрстки и без классического программирования.

1. Вайбкодинг в разработке приложений: как мы работаем
В классической разработке:
  • сначала дизайн,
  • потом код,
  • потом логика,
  • потом боль.
В vibe coding:
  • сначала смысл и сценарий,
  • потом результат для пользователя,
  • и только потом — интерфейс и логика, которые ИИ собирает под задачу.
Google AI Studio идеально подходит под этот подход, потому что:
  • понимает контекст приложения,
  • генерирует UI и backend в связке,
  • умеет работать с данными и API в одном пространстве.

2. UI-компоненты: собираем интерфейс без дизайнера
В Google AI Studio интерфейс строится не «экранами», а функциональными блоками.
Базовые UI-компоненты, которые используются в 80% приложений:
  • формы ввода (Input, Textarea, Select),
  • кнопки действий,
  • таблицы и списки,
  • меню и навигация,
  • карточки результата,
  • модальные окна.
Как работает вайбкодинг-подход к UI
Мы не рисуем экраны вручную, а описываем результат:
«Пользователь вводит данные → нажимает кнопку → сразу видит результат»
ИИ:
  • сам подбирает компоненты,
  • сам связывает их логикой,
  • сам делает интерфейс «достаточно хорошим» для MVP.
👉 На этом этапе красота вторична, главное — работающая логика.

3. Интерактивная логика без кода
Интерактивность — это не анимации, а реакция приложения на действия пользователя.
В Google AI Studio логика строится через:
  • условия (if / else),
  • триггеры (нажатие кнопки, ввод данных),
  • функции обработки,
  • цепочки действий.
Примеры:
  • если поле пустое → показать подсказку,
  • если данные валидны → запустить обработку,
  • если получен ответ от AI → показать результат,
  • если ошибка → вернуть пользователя к шагу ввода.
В вайбкодинге важно:
каждое действие пользователя должно что-то менять
Если экран «ничего не делает» — он лишний.

4. Пользовательские сценарии: сердце приложения
Что такое сценарий в вайбкодинге
Это путь пользователя от проблемы к результату.
Не:
«экран 1 → экран 2 → экран 3»
А:
«что пользователь хочет → что делает → что получает»

Типовой сценарий AI-сервиса:
  1. Пользователь заходит
  2. Понимает, что от него хотят
  3. Вводит данные
  4. Получает результат
  5. Может сохранить / повторить / улучшить
В Google AI Studio сценарии:
  • описываются текстом,
  • превращаются в связку UI + логики,
  • могут дорабатываться итеративно.
👉 Вайбкодинг = быстро проверить сценарий, а не «сделать идеально».

5. Работа с данными внутри приложения
Полноценное приложение всегда работает с данными.
В Google AI Studio используются:
  • таблицы (users, inputs, results),
  • функции обработки,
  • модели данных,
  • временные и постоянные хранилища.
Типовые задачи:
  • сохранить запрос пользователя,
  • сохранить результат генерации,
  • связать пользователя с его данными,
  • показать историю действий.
Важно:
данные проектируются под сценарий, а не «как в учебнике по БД.

6. Подключение внешних API
Современное приложение почти всегда:
  • использует внешние сервисы,
  • подключает AI-модели,
  • работает с платежами или аналитикой.
Что можно подключать через Google AI Studio:
  • Gemini API,
  • OpenAI-совместимые API,
  • российские AI-сервисы (через прокси / сервер),
  • внешние SaaS-API,
  • webhook-интеграции.
ИИ помогает:
  • сформировать запрос,
  • обработать ответ,
  • встроить API в пользовательский сценарий.
👉 Это low-code уровень, но без ручного программирования.

✅ Мини-практика: сборка полноценного AI-приложения (Vibe Coding)
Цель практики:
Собрать рабочий AI-сервис в Google AI Studio без кода, опираясь на сценарий и результат.
Мини-практика (пошагово)

Шаг

Что делает студент

Что описывает в AI Studio

Результат

1

Выбирает идею сервиса

«AI-ассистент, который помогает написать текст/проанализировать данные/дать рекомендацию»

Понимание задачи

2

Формулирует сценарий

«Пользователь вводит данные → нажимает кнопку → получает результат»

Чёткий user flow

3

Генерирует UI

«Форма ввода + кнопка + блок результата»

Рабочий интерфейс

4

Добавляет интерактивность

«При нажатии кнопки запускается обработка»

Приложение реагирует

5

Подключает AI

«Использовать Gemini для генерации ответа»

AI-функция

6

Добавляет данные

«Сохранять запрос и результат в таблицу»

История действий

7

Тестирует сценарий

«Проверь, что пользователь сразу видит результат»

Готовый MVP

Важно: цель практики — не идеальный продукт, а работающий сервис.

Чек-лист: «Приложение готово или нет»
Используйте этот чек-лист перед переходом к следующему уроку.
Финальная проверка приложения

Вопрос

Да / Нет

Пользователь понимает, что делать, за 3 секунды

☐

Основное действие в приложении одно

☐

Есть понятная точка входа (форма / кнопка)

☐

После действия пользователь сразу видит результат

☐

Интерфейс не перегружен лишними элементами

☐

Логика работает без ошибок

☐

AI-функция реально решает задачу пользователя

☐

Данные обрабатываются или сохраняются

☐

Сценарий можно объяснить одной фразой

☐

Приложение не требует пояснений «что нажать»

☐

Как интерпретировать результат
8–10 «Да» → приложение готово к развитию
5–7 «Да» → MVP рабочий, но требует упрощения
меньше 5 → вернуться к сценарию, а не к UI

Если приложение работает, но его трудно объяснить — проблема не в коде, а в идее.
Урок 4.
Экспорт приложения и интеграции (от прототипа к реальному сервису).
Цель:
  • вывести приложение из Google AI Studio в реальный мир,
  • понять, когда нужен экспорт кода, а когда — нет,
  • подключить хостинг, базу данных и внешние сервисы,
  • подготовить приложение к росту и масштабированию.
Это момент, где вайбкодинг становится инженерным мышлением.

1. Экспорт приложения: когда и зачем
Вайбкодинг-принцип
Экспорт кода нужен не всегда.
Он нужен только тогда, когда продукт начинает расти.
В Google AI Studio можно:
  • тестировать идеи,
  • собирать MVP,
  • проверять сценарии.
Но если вы хотите:
  • кастомную логику,
  • масштабирование,
  • интеграции без ограничений
— приложение нужно выносить наружу.

2. Форматы экспорта: что выбирать
Основные варианты экспорта
  • Next.js (JS / TS) — основной и самый универсальный вариант
  • Чистый JS / TS — если нужен контроль над логикой
  • HTML + клиентская логика — для простых сервисов и лендингов
Практическая рекомендация
Если вы:
  • новичок → Next.js + TS
  • делаете MVP → Next.js без усложнений
  • тестируете гипотезу → можно начать с HTML
👉 Вайбкодинг — это не идеальная архитектура, а быстрый переход к пользе.

3. Работа с кодом после экспорта (без боли)
После экспорта вы не обязаны писать код руками.
Современный подход:
  • открыть проект в Cursor или Replit,
  • загрузить весь контекст приложения,
  • дорабатывать код через ИИ.
Что обычно дорабатывают:
  • авторизацию,
  • работу с БД,
  • API-интеграции,
  • ограничения и лимиты,
  • платёжные сценарии.
ИИ становится вашим AI-тимлидом, а не «автодополнением».

4. Хостинг и запуск приложения
Куда деплоить:
Vercel
  • идеален для Next.js
  • быстрый запуск
  • минимальные настройки
Replit
  • удобен для тестов и командной работы
  • можно сразу править код онлайн
👉 Рекомендация:
Vercel для продакшена, Replit для экспериментов.

5. Интеграция с Firebase
Firebase — это:
  • аутентификация,
  • база данных,
  • хранилище файлов,
  • серверная логика.
Типовой сценарий
  • авторизация пользователей,
  • хранение данных,
  • связь пользователей с результатами AI.
Google AI Studio и Firebase отлично сочетаются:
  • один экосистемный подход,
  • минимальные конфликты,
  • простая масштабируемость.

6. Подключение баз данных
Самые практичные варианты:
  • Firebase Firestore — быстро и просто
  • Supabase — если нужен SQL и контроль
  • Airtable / Baserow — для простых MVP
Вайбкодинг-правило
Если вы заранее проектируете «идеальную БД» — вы делаете лишнюю работу.

Проектируйте под сценарий, а не «на будущее».

7. Подключение сторонних сервисов
Современное AI-приложение почти всегда использует:
  • AI-API (Gemini, OpenAI-совместимые),
  • платёжные сервисы,
  • аналитику,
  • автоматизации.
Как подключать
  • через API,
  • через webhook,
  • через Make / n8n.
Google AI Studio помогает:
  • сформировать запрос,
  • обработать ответ,
  • встроить сервис в логику приложения.

⚠️ Что важно, но часто забывают (и это нормально)
На этапе прототипа эти вещи почти всегда игнорируют —
но в реальных AI-сервисах именно здесь чаще всего происходят проблемы.

Управление ключами и доступами
  • API-ключи никогда не хранятся в клиентской части приложения
  • Все ключи размещаются в переменных окружения (Environment Variables)
  • Доступ к AI, БД и сервисам ограничивается ролями и правами
  • Репозиторий и публичный код не должны содержать секретов
Один «слитый» ключ = чужие запросы за ваш счёт.

Лимиты и контроль затрат
  • Ограничивайте количество AI-запросов на пользователя
  • Вводите базовый rate-limit (запросы в минуту / день)
  • Отслеживайте стоимость каждого сценария
  • Отключайте или ограничивайте тестовые функции в продакшене
Большинство AI-сервисов «сгорают» не из-за плохой идеи,
а из-за отсутствия контроля расходов.

❗Если сервис может сломать ваш бюджет — значит он ещё не готов к запуску.

Когда экспортировать приложение, а когда нет

Ситуация

Оставаться в Google AI Studio

Экспортировать приложение

Проверка идеи / гипотезы

✅ Да

❌ Нет

Прототип для себя или команды

✅ Да

❌ Нет

Нужен быстрый MVP

⚠️ Можно

✅ Лучше

Нужна авторизация пользователей

❌ Нет

✅ Да

Нужна своя база данных

❌ Нет

✅ Да

Подключение платежей

❌ Нет

✅ Да

Контроль лимитов и затрат

❌ Ограничено

✅ Полный контроль

Масштабирование

❌ Нет

✅ Да

Коммерческий запуск

❌ Нет

✅ Обязательно

Если приложение начинают использовать чужие люди — его пора экспортировать.

Типовые ошибки при запуске AI-приложений

Ошибка

Почему возникает

Как избежать

Ключи в клиенте

Непонимание безопасности

Использовать env-переменные

Нет лимитов

Фокус только на функционал

Rate-limit с первого дня

Слишком сложная логика

Желание «сделать идеально»

Начать с 1 сценария

Нет сценария пользователя

Думали про функции, а не людей

Описать user flow

Нет логирования

«Работает и ладно»

Логи запросов и ошибок

Нет контроля затрат

Не считали стоимость AI

Лимиты и алерты

Слишком рано масштабируют

Нет подтверждённого спроса

Проверить MVP

Ошибки — это не баги.
Баг — это отсутствие контроля.

✅ Мини-практика: деплой AI-приложения за 30 минут
(с автоматическим контролем лимитов)

Шаг

Действие

Инструмент

Результат

1

Экспортировать проект из AI Studio

Google AI Studio

Исходный код

2

Загрузить проект в репозиторий

GitHub / Replit

Контроль версии

3

Подключить хостинг

Vercel

Онлайн-доступ

4

Добавить переменные окружения

Vercel Env Vars

Защита ключей

5

Подключить AI API

Gemini / OpenAI

Рабочий AI

6

Добавить лимит запросов

Middleware / Function

Контроль затрат

7

Ограничить пользователей

ID / IP / Session

Защита от абьюза

8

Протестировать сценарий

Браузер

Готовый MVP

Пример логики лимитов (без кода руками)
  • не более X запросов в минуту
  • не более Y запросов в день
  • превышение → сообщение пользователю
👉 Это обязательный минимум для любого AI-сервиса.
Урок 5.
Практика. Создаём MVP AI-приложения.
Цель:
Собрать и опубликовать рабочее MVP AI-сервиса, которым уже можно пользоваться, показывать клиентам или масштабировать.
Мы не «учимся», мы делаем продукт.

1. Что именно мы собираем в этом уроке
Формат MVP (универсальный для 80% сервисов):
  • личный кабинет пользователя
  • база данных (пользователи + данные сервиса)
  • UI, сгенерированный ИИ
  • авторизация
  • одна ключевая AI-функция
  • публикация и доступ по ссылке
👉 Это минимально достаточная версия, чтобы:
  • показать инвестору / клиенту,
  • начать монетизацию,
  • собрать обратную связь.

2. Подготовка: формируем App Context (5 минут)
Перед вайбкодингом обязательно зафиксировать контекст, иначе ИИ будет «фантазировать».
В Google AI Studio → App Context:
  • Тип сервиса: AI-ассистент / сервис / инструмент
  • Целевая аудитория: кто и зачем заходит
  • Основное действие пользователя: одно
  • Результат: что пользователь получает
Пример:
Пользователь заходит → вводит данные → получает AI-результат → сохраняет в истории.
❗ Если у сервиса больше одного основного действия — MVP ещё не готов.


3. Личный кабинет (User Dashboard)
Что делаем
Через UI-генератор в Google AI Studio:
  • экран после входа
  • приветственный блок
  • основная рабочая зона
  • история действий
Как формулировать запрос (вайбкодинг с контролем)
Создай dashboard для AI-сервиса с минималистичным интерфейсом:
слева — меню, по центру — рабочая зона, сверху — статус пользователя.
Совет:
  • не гонись за красотой, гонись за читаемостью;
  • один экран = одна задача.

4. База данных (Users + Data)
Минимальная структура БД для MVP:
  • Users (id, email, created_at)
  • Data (user_id, input, result, timestamp)
В AI Studio:
  • используем встроенные data models
  • либо готовим схему под Supabase / Firebase
👉 Важно:
не делай сложные связи — MVP должен «летать», а не быть идеальным.


5. Авторизация (без боли)
Лучший путь для MVP:
  • email + magic link
  • OAuth (Google / GitHub) — если планируешь зарубежку
Google AI Studio:
  • генерирует auth-логику,
  • ты проверяешь:
  • есть ли защита маршрутов
  • нет ли доступа без логина
❗ Частая ошибка:
делать сервис без авторизации → невозможно хранить данные → MVP ломается.


6. Генерация пользовательского интерфейса
Подход:
  1. Сначала структура, потом стиль
  2. Не больше 5 экранов:
  • Login
  • Dashboard
  • Input
  • Result
  • History
Запрос:
Сгенерируй UI для AI-приложения с фокусом на скорость использования, без лишних экранов.
Совет как разработчик:
Если UI хочется «улучшать бесконечно» — значит, ты уходишь от MVP.


7. Подключение AI-функции (ядро сервиса)
Выбираем одну функцию:
  • генерация текста
  • анализ
  • преобразование
  • ассистент
Через Google AI Studio:
  • подключаем модель (Gemini / API)
  • задаём system prompt
  • ограничиваем формат ответа
Пример:
Ты — AI-модуль сервиса. Возвращай результат строго в JSON.
❗ Это важно для:
  • стабильности,
  • масштабирования,
  • будущего экспорта.

8. Публикация MVP
Варианты:
  • прямой доступ через AI Studio (для теста)
  • экспорт → Replit / Vercel
  • подключение домена позже
Минимум на этом этапе:
  • сервис открывается по ссылке
  • работает без ошибок
  • есть базовая защита
👉 Продакшн — это когда работает, а не когда идеально.


9. Финальный критерий: MVP готов, если
Ответь «да» на всё:
  • Пользователь может войти
  • Может выполнить ключевое действие
  • Получает AI-результат
  • Результат сохраняется
  • Сервис доступен онлайн
Если хоть один пункт «нет» — это ещё не MVP.

10. Обязательный продакшн-минимум (без этого MVP «ломается»)
Этот пункт нельзя пропускать, даже в учебном проекте.
Именно здесь MVP перестаёт быть «демкой» и становится живым сервисом.

1. Лимит запросов (даже грубый)
Зачем:
  • защита от случайных циклов,
  • защита от злоупотреблений,
  • контроль бюджета на AI.
Минимальный вариант для MVP:
  • 5–20 запросов в день на пользователя
  • или 1 запрос в минуту
Как сделать просто:
  • счётчик запросов в БД (requests_today)
  • проверка перед вызовом AI
  • отказ при превышении лимита
👉 Идеально — не нужно. Работающее — нужно.

2. Базовая обработка ошибок
Что обязательно обрабатывать:
  • таймаут AI
  • пустой ответ
  • ошибка API
  • превышение лимита
Принцип:
Пользователь никогда не должен видеть «красную ошибку системы.
Минимум:
  • try / catch
  • fallback-ответ
  • лог ошибки (даже в консоль)

3. Сообщение пользователю, если AI недоступен
Это критически важно для UX.
Пример корректного поведения:
  • «Сервис временно недоступен, попробуйте позже»
  • «Превышен лимит запросов на сегодня»
  • «AI отвечает дольше обычного»
👉 Лучше честное сообщение, чем «вечная загрузка».

Если у тебя есть:
  • лимит,
  • обработка ошибок,
  • понятное сообщение пользователю,
➡️ твой MVP можно показывать людям и запускать в реальный мир.


«MVP, который не стыдно показать пользователям и инвесторам»
Эта таблица — финальный фильтр качества после практики.
Если все пункты «Да» — приложение готово к показу миру.

Таблица: Проверка MVP перед публикацией

Блок

Вопрос для проверки

Да / Нет

Комментарий

Ценность

Понятно ли, какую проблему решает сервис за 5 секунд?

⬜

Если нет — перепиши описание

Первый шаг

Пользователь понимает, что делать сразу после входа

⬜

Нет «пустого экрана»

Личный кабинет

Есть ли персональные данные пользователя

⬜

Даже минимальные

Основная функция

Работает ли ключевая AI-функция без багов

⬜

Остальное вторично

Скорость

Ответ AI ≤ 10–15 секунд

⬜

Иначе нужен loader

Ошибки

Обрабатываются ли ошибки AI

⬜

Нет «молчаливых падений»

Лимиты

Есть ли ограничение запросов

⬜

Хоть самое простое

Сообщения

Пользователь понимает, что происходит

⬜

Ошибка ≠ паника

Данные

Данные сохраняются корректно

⬜

История, результаты

Публикация

Есть рабочий URL

⬜

Продукт доступен

4 МОДУЛЬ

No-Code: создание приложений без кода

Урок 1.
Bubble — логика, API и реальные приложения (CRM / SaaS).
Bubble — это рабочая лошадка no-code.
Если Google AI Studio — мозг и генератор, то Bubble — платформа, где приложение живёт и масштабируется.
В этом уроке мы:
  • собираем реальную логику приложения,
  • подключаем API,
  • делаем CRM или SaaS, а не «учебный макет».

1. Что такое Bubble на практике (без иллюзий)
Bubble — это:
  • визуальный frontend,
  • встроенный backend,
  • база данных,
  • workflow-логика,
  • API-коннектор.
❌ Это не просто конструктор сайтов
✅ Это платформа для продакшн-приложений
На Bubble делают:
  • CRM-системы
  • SaaS-сервисы
  • внутренние системы компаний
  • MVP для стартапов
  • клиентские кабинеты

2. Как мыслить в Bubble (ключ к быстрому результату)
Новички часто ломаются не из-за интерфейса, а из-за мышления.
В Bubble всегда есть 3 слоя:
Данные
— какие сущности существуют (User, Project, Request и т.д.)
Интерфейс
— что пользователь видит и с чем взаимодействует
Workflow (логика)
— что происходит после действий пользователя
👉 Если ты понимаешь эти три слоя — ты уже разработчик.

3. Создание структуры приложения (CRM / SaaS)
Шаг 1. Определяем тип приложения
Выбираем один вариант (не оба):
CRM:
  • пользователи
  • клиенты
  • задачи / сделки
  • статусы
SaaS:
  • пользователи
  • подписки
  • основной объект сервиса
  • лимиты
👉 Совет:
Для первого проекта лучше SaaS с одной функцией, чем сложную CRM.

Шаг 2. Создаём базу данных (Data → Data types)
Минимальный набор:
User
  • email
  • role
  • plan
  • requests_today
MainObject (например, Request / Task / Prompt)
  • owner (User)
  • input
  • result
  • created date
❗️Лучше мало полей, но рабочие, чем «идеальная схема».


4. Интерфейс: собираем экран за экраном
Минимальный набор экранов:
  1. Login / Signup
  2. Dashboard
  3. Экран ввода данных
  4. Экран результата
  5. History / список
👉 В Bubble:
  • используем Group / Repeating Group
  • не перегружаем экраны
  • одна основная кнопка на экран
Вайбкодинг-правило:
если экран нельзя объяснить одним предложением — он лишний


5. Логика (Workflow): сердце приложения
Пример базового workflow:
Когда пользователь нажал кнопку →
  1. Проверить лимит
  2. Создать запись в БД
  3. Вызвать API / AI
  4. Сохранить результат
  5. Показать ответ пользователю
👉 В Bubble это:
  • Event
  • Action
  • Condition
Важно:
весь контроль логики — в workflows, не в интерфейсе.


6. Подключение API (AI, сервисы, интеграции)
API Connector в Bubble
Через него можно подключить:
  • OpenAI / Gemini / GigaChat
  • любые внешние сервисы
  • собственные API
Минимальная схема:
  • Endpoint
  • Headers
  • Body
  • Response mapping
❗ API-ключи храним ТОЛЬКО в Bubble, не в интерфейсе.


7. Мини-практика: собираем MVP за урок
Задание:
Собери рабочий MVP:
  • пользователь регистрируется
  • вводит данные
  • получает результат
  • видит историю запросов
❗
- Не дизайн.
- Не идеально.
- Рабочее.

8. Типовые ошибки новичков (и как делать лучше)
  • Делать сразу «большой продукт»
✅ Делать одну ключевую функцию

  • Перегружать интерфейс
✅ Делать минимально понятный UI

  • Не учитывать лимиты
✅ Сразу считать запросы

  • Хранить ключи в клиенте
✅ Хранить в API Connector


9. Когда Bubble — лучший выбор, а когда нет
Bubble — отлично, если:
  • нужен быстрый MVP
  • логика сложнее, чем дизайн
  • есть авторизация и данные
  • нужен SaaS или CRM
Bubble — не лучший вариант, если:
  • нужен высоконагруженный сервис
  • сложная анимация
  • мобильное first-приложение
👉 В таких случаях — FlutterFlow или low-code (это дальше по курсу).


Базовая логика продукта с первого дня (обязательный минимум)

Что закладываем сразу

Зачем это делать на старте

Как реализовать в Bubble (просто)

Подсчёт запросов пользователя

Контроль нагрузки и бюджета на AI

Поле requests_today у User + инкремент в workflow

Ограничение бесплатного доступа

Формирование ценности и будущей монетизации

Условие: если лимит превышен → стоп / сообщение

Точка входа для оплаты

Готовность к росту и деньгам

Поле plan (free / pro) + заглушка кнопки «Обновить тариф»

Если эти три строки есть — ты строишь продукт, а не просто эксперимент.

Типовой сценарий Freemium → Paid для AI-сервисов

Этап пользователя

Что он видит в продукте

Что происходит в логике

Зачем это нужно

Первый вход

Бесплатный доступ без карты

План = free, лимит минимальный

Снизить барьер входа

Использование

Быстро получает результат

Считаются запросы

Формируется ценность

Подход к лимиту

Предупреждение «Осталось 2 запроса»

Условие по requests_today

Подготовка к оплате

Превышение лимита

Экран с описанием тарифа

Блокировка AI-функции

Момент продажи

Оплата

Кнопка «Разблокировать доступ»

Смена plan на pro

Монетизация

После оплаты

Увеличенный лимит

Новый доступ без ограничений

Удержание пользователя

  • Продажа начинается не с платежки, а с лимита
  • Freemium — это механика, а не «бесплатно навсегда»
  • Даже без подключённой оплаты логика должна быть заложена сразу
Урок 2.
WeWeb / Webflow — визуальные и интерактивные интерфейсы.
Если Bubble — это логика и данные,
то WeWeb и Webflow — это лицо продукта.

В этом уроке мы учимся:
  • быстро собирать современные интерфейсы,
  • делать интерактив без кода,
  • превращать MVP в продукт, который не стыдно продавать.

1. Когда выбирать WeWeb, а когда Webflow
WebflowПодходит, если:
  • нужен лендинг или маркетинговый сайт
  • важен дизайн и анимации
  • нет сложной логики
WeWebПодходит, если:
  • интерфейс для веб-приложения
  • личные кабинеты
  • интерактив, состояние, данные
  • связка с backend (Supabase, API)
👉 Правило:
Webflow — «показать и продать»,
WeWeb — «пользоваться каждый день».


2. Визуальный интерфейс как продукт, а не декор
Ошибка новичков:
❌ сначала логика, потом интерфейс
❌ красивый, но непонятный UI

Правильный вайб:
Интерфейс — это инструкция к продукту.

Минимальный набор экранов:
  1. Вход / регистрация
  2. Dashboard
  3. Экран действия
  4. Экран результата
  5. Настройки / тариф
Если экран ничего не объясняет — он лишний.


3. Сборка интерфейса в WeWeb (практика)
🔹 Шаг 1. Создаём структуру страниц
  • /login
  • /dashboard
  • /action
  • /result
Используем:
  • Sections
  • Components
  • Layouts
👉 Делай компоненты, не копируй блоки.

Пошаговая сборка интерфейса:

Шаг

Куда заходить

Что нажимать

Что должно получиться

0

weweb.io

Create new project → Blank app

Пустой проект в редакторе

1

Pages

+ New page

Созданы страницы: /login, /dashboard, /action, /result

2

Layouts

Create layout → AppLayout

Общий каркас для всех экранов

3

Pages

Назначить Layout странице

Все страницы используют один layout

4

Elements

Section → Text / Button / Container

Смысловой экран, не «каша»

5

Components

Create component → Button

Универсальная кнопка для всего приложения

6

Element → Actions

Add action → Navigate / Show / Hide

Интерфейс реагирует на действия

7

Data

Collections / External API

Подключены данные или заглушка

8

Text / List

Dynamic value

Элементы отображают данные

9

Preview

Preview / Run

Можно пройти сценарий пользователя

✅ Контрольный результатЕсли ты дошла до шага 9 и:
  • кнопки кликаются,
  • страницы переключаются,
  • данные отображаются,
👉 ты собрала интерфейс веб-приложения, а не просто сайт.

Совет от разработчика (важно)
Если студент:
  • сначала делает Pages + Layout,
  • потом Components,
  • и только потом дизайн,
он экономит часы и нервы.

🔹 Шаг 2. Подключаем данные
В WeWeb:
  • подключаем Supabase / API
  • связываем элементы с данными
  • используем состояния (loading / success / error)
👉 Это ключевая разница между «сайтом» и «приложением».

🔹 Шаг 3. Интерактив без кода
Примеры:
  • показать / скрыть блок
  • изменить состояние кнопки
  • загрузка данных
  • обработка ошибок
Принцип:
Любое действие пользователя → понятная реакция интерфейса.

Подключение данных и интерактив (полная таблица действий)

ЧАСТЬ A. Подключение данных (Supabase / API)

Шаг

Куда заходить

Что нажимать

Что вводить / выбирать

Что должно получиться

A1

WeWeb Editor

Левая панель → Data

—

Открыт раздел работы с данными

A2

Data

Add data source

Выбрать Supabase или REST API

Создаётся источник данных

A3

Supabase

Вставить URL проекта

Project URL из Supabase

WeWeb видит базу

A4

Supabase

Вставить API Key

anon public key

Безопасное подключение

A5

Data

Create collection

Название, например requests

Коллекция данных создана

A6

Collection

Select table / endpoint

Таблица или API-метод

WeWeb знает структуру данных

A7

Collection

Map fields

Связать поля (id, text, result)

Поля доступны в интерфейсе

Контроль: в коллекции видны поля — значит подключение успешно.

ЧАСТЬ B. Связь данных с интерфейсом

Шаг

Куда заходить

Что нажимать

Что выбирать

Что должно получиться

B1

Page

Выделить Text / List

—

Элемент активен

B2

Правая панель

Content → Dynamic value

Source: Collection field

Текст берётся из БД

B3

Page

Добавить List / Repeater

—

Контейнер для списка

B4

List settings

Bind to collection

requests

Список данных отображается

B5

Preview

Run

—

Видны реальные данные

Контроль: данные меняются → интерфейс обновляется.

ЧАСТЬ C. Интерактив: загрузка, успех, ошибка (ОЧЕНЬ ВАЖНО)
1️⃣ Состояние загрузки (loading)

Шаг

Куда заходить

Что нажимать

Что делать

Результат

C1

Elements

Добавить Loader

—

Loader на экране

C2

Loader

Visibility

По умолчанию скрыт

Не мешает UI

C3

Button

Actions → Add action

On click → Show Loader

Loader появляется

C4

Action chain

После запроса

Hide Loader

Loader исчезает

2️⃣ Состояние успеха (success)

Шаг

Куда заходить

Что нажимать

Что делать

Результат

C5

API action

On success

Navigate / Show block

Пользователь видит результат

C6

Text

Dynamic value

Результат запроса

Появляется ответ

3️⃣ Состояние ошибки (error)

Шаг

Куда заходить

Что нажимать

Что делать

Результат

C7

Action

On error

Show error block

Ошибка не ломает UI

C8

Error block

Text

«Попробуйте позже»

Понятное сообщение

C9

Error block

Visibility

Только при ошибке

Нет лишних сообщений


ЧАСТЬ D. Изменение состояния кнопки (UX-момент)

Шаг

Куда заходить

Что нажимать

Что делать

Результат

D1

Button

State

Disabled = true

Блокировка

D2

Workflow

Пока loading

Disable button

Нет двойных кликов

D3

On success / error

Enable button

—

Кнопка снова активна

✅ Финальный контроль (обязательный)
Вы должны ответить «да» на всё:
  • данные реально приходят
  • интерфейс реагирует
  • есть loader
  • есть сообщение об ошибке
  • кнопка не ломает логику
👉 Если да — это уже веб-приложение, не лендинг.
❗ Если нет loading / error / success — это ещё не приложение.


4. Webflow: когда нужен «вау-эффект»
В Webflow делаем:
  • главную страницу продукта
  • onboarding
  • pricing
  • FAQ
  • кейсы
Используем:
  • interactions
  • CMS
  • symbols
  • responsive-настройки
❗️Webflow не заменяет backend, он его дополняет.


5. Связка WeWeb / Webflow с backend
Типовая схема:
  • Webflow → маркетинг
  • WeWeb → интерфейс приложения
  • Backend → Bubble / Supabase / AI Studio
👉 Это реальная продакшн-архитектура, а не учебная.


6. Мини-практика (обязательная)
Задание:
1.Собрать 2 экрана в WeWeb:
  • Dashboard
  • Экран действия
2.Подключить данные
3.Добавить состояние:
  • загрузка
  • ошибка
  • результат
👉 Цель: почувствовать поведение интерфейса, а не дизайн.


Типовые ошибки и как делать лучше
❌ Делать всё в одном экране
✅ Разделять сценарии
❌ Перегружать анимациями
✅ Анимация = смысл
❌ Не учитывать мобильную версию
✅ Mobile first хотя бы для входа

Важно:
  • интерфейс ≠ логика
  • UI — это сценарий, а не украшение
  • no-code ≠ «без мышления»
Урок 2.1.
Экран Login → Dashboard (разборы в таблицах).
✅ Экран Login → Dashboard (полный разбор в одной таблице)
Цель:
Пользователь:
  1. заходит на страницу логина
  2. вводит email + пароль
  3. нажимает кнопку
  4. попадает в Dashboard
Пошаговая таблица: Login → Dashboard в WeWeb

Шаг

Куда заходить

Что нажимать

Что вводить / выбирать

Что должно получиться

1

Pages

New page

/login

Страница логина

2

Elements

Input → Email

Placeholder: Email

Поле ввода email

3

Elements

Input → Password

Type: Password

Поле пароля

4

Elements

Button

Text: «Войти»

Кнопка входа

5

Components

Create component

LoginForm

Форма как компонент

6

Data

Add data source

Supabase Auth

Подключена авторизация

7

Button → Actions

Add action

Auth → Sign in

Запрос логина

8

Action → On success

Navigate

/dashboard

Переход после входа

9

Action → On error

Show error block

«Неверные данные»

Ошибка без краша

10

Elements

Loader

Hidden by default

Loader добавлен

11

Button → Actions

Show Loader

On click

Видна загрузка

12

Button → Actions

Hide Loader

On success/error

Loader исчезает

13

Pages

New page

/dashboard

Страница Dashboard

14

Data

Use current user

Email / ID

Данные пользователя

15

Text

Dynamic value

User.email

Имя пользователя

16

Page settings

Auth guard

Require auth

Защита страницы

17

Preview

Run

—

Полный сценарий работает

Что считать успешным результатом
Экран считается готовым, если:
  • пользователь логинится
  • при клике есть loader
  • при ошибке есть сообщение
  • без логина нельзя попасть в dashboard
👉 Это минимальный продакшн-стандарт.

Почему именно этот экран критичен
Если вы умеете:
  • подключить auth
  • связать данные
  • обработать success / error
➡️ вы уже не новичок, даже если «не пишете код».

Как сделать ещё лучше (опционально)
Если есть силы:
  • добавить remember me
  • показать имя пользователя
  • добавить logout
Но не обязательно на первом этапе.

✅ Полный сценарий
Кнопка → AI → результат → сохранение
Цель:
Пользователь нажимает кнопку → вызывается AI → получает результат → результат сохраняется в БД → отображается в интерфейсе.

Шаг

Где

Что нажать

Что настроить

Что происходит

1

WeWeb → Page

Button

Text: «Сгенерировать»

Кнопка действия

2

WeWeb → Elements

Textarea

Bind → user_input

Поле ввода

3

WeWeb → Data

Add data source

API / Supabase function

Источник AI

4

Button → Actions

Add action

Show loader

Показ загрузки

5

Button → Actions

API call

prompt = user_input

Отправка в AI

6

API

Request body

model, prompt

AI генерирует ответ

7

API → Response

Map response

ai_result

Получаем текст

8

Button → Actions

Hide loader

On success

Убираем загрузку

9

Button → Actions

Update variable

result = ai_result

Сохраняем в переменную

10

Button → Actions

Supabase → Insert

table: results

Сохраняем в БД

11

Supabase

Table results

user_id, prompt, result

Структура хранения

12

WeWeb → UI

Text block

Bind → result

Показ результата

13

Page logic

If error

Show message

Обработка ошибки

14

Optional

Rate limit

count requests

Защита бюджета

Результат:
AI работает по кнопке
данные не теряются
результат можно пересмотреть позже
это уже MVP, а не демка

✅ Шаблон WeWeb + Supabase
(универсальный, под любой AI-сервис)
Цель:
Дать студентам готовую архитектуру, чтобы они не собирали всё с нуля.

Блок

Где настраивается

Что входит

Зачем

Auth

Supabase

Email / Password

Пользователи

Users

Supabase table

id, email, role

Связь данных

Requests

Supabase table

user_id, prompt, result

История

Limits

Supabase table

user_id, count, plan

Контроль запросов

AI API

Supabase function

Gemini / GPT

Безопасный вызов

Env keys

Supabase secrets

API_KEY

Защита ключей

Frontend

WeWeb

Pages, actions

UI без кода

Logic

WeWeb actions

API → Save → Show

Поведение

Errors

WeWeb

Toast / Alert

UX

Deploy

WeWeb hosting

Custom domain

Публикация

WeWeb — интерфейс
Supabase — мозг и память
AI — функция
Button — триггер
Если есть эти 4 вещи — приложение уже существует.
Урок 3.
FlutterFlow.
Web + Mobile + Firebase = одно приложение под все платформы
Вайбкодинг-подход:
Мы не «рисуем экраны». Мы собираем продукт, который сразу живёт на web, iOS и Android.

Цель:
К концу урока вы:
  • создаёте одно приложение в FlutterFlow,
  • запускаете его в веб-версии,
  • понимаете, как из него получить мобильные версии,
  • подключаете Firebase: авторизация + база данных,
  • готовите фундамент для AI-функций (которые уже делали раньше).

Когда выбирать FlutterFlow (и зачем он в курсе)
Я сразу отвечу на вопрос, который может возникнуть:

Если тебе нужно

Лучше

Только web, быстро

WeWeb / Webflow

Web + iOS + Android

FlutterFlow

Готовиться к масштабированию

FlutterFlow

Один UI → все платформы

FlutterFlow



1. Старт проекта в FlutterFlow (Web + Mobile сразу)
Таблица действий: создание проекта

Шаг

Куда заходить

Что нажимать

Что выбрать

Что должно получиться

1

flutterflow.io

Sign up / Login

Google / Email

Аккаунт

2

Dashboard

Create New

Blank App

Новый проект

3

Project settings

App Details

App name

Название

4

Platform

Web + Mobile

Enable both

Web + iOS + Android

5

Theme

Material

Default

Базовый UI

6

Save

Save project

—

Проект создан

Важно (то, что часто забывают):
FlutterFlow сразу создаёт кроссплатформенное приложение, не нужно делать версии отдельно.


2. Интеграция с Firebase (обязательно, не “потом”)
Таблица действий: подключение Firebase

Шаг

Где

Что нажать

Что подключить

Результат

1

console.firebase.google.com

Create project

Default

Firebase-проект

2

Firebase

Add app

Web + Android + iOS

Все платформы

3

Firebase

Authentication

Email/Password

Авторизация

4

Firebase

Firestore

Start in test

БД

5

FlutterFlow

Settings → Firebase

Connect

Firebase связан

6

FlutterFlow

Auth

Enable auth

Auth готов

7

FlutterFlow

Firestore

Sync schema

Таблицы видны

  • Firebase = Auth + DB + rules
  • Без правил доступа приложение небезопасно
  • FlutterFlow автоматически работает с Firestore, не нужно писать SDK

3. Авторизация (login → app)
Таблица: экран авторизации

Шаг

Где

Что сделать

Настройки

Что получится

1

UI Builder

Add Page

Login Page

Экран

2

Widgets

Email field

Bind email

Поле

3

Widgets

Password field

Bind password

Поле

4

Widgets

Button

Login

Кнопка

5

Button

Add action

Firebase Auth → Sign in

Вход

6

On success

Navigate

Dashboard

Переход

7

On error

Snackbar

Error message

UX

👉 Это сразу production-login, а не «учебный».

4. База данных (Firestore)
Таблица: минимальная схема данных

Коллекция

Поля

Зачем

users

id, email, plan

Пользователи

requests

user_id, prompt, result, created_at

История

limits

user_id, count, limit

Контроль AI

settings

flags, config

Фичи



5. Web + Mobile: что происходит автоматически
Снимаем страх мобильной разработки.

Что делает студент

Что делает FlutterFlow

Собирает UI

Адаптирует под экраны

Делает логику

Генерирует Flutter

Настраивает Firebase

Вшивает SDK

Публикует Web

Готовит mobile build

👉 Мобильные версии не требуют отдельной сборки UI.


Мини-практика (обязательная)
Задание:
  1. Создать FlutterFlow-проект
  2. Подключить Firebase
  3. Сделать login
  4. Создать коллекцию requests
  5. После входа показывать пустой dashboard
Критерий:
  • пользователь входит,
  • видит dashboard,
  • данные сохраняются в Firestore.

Типовые ошибки в FlutterFlow (и как их быстро исправить)
Таблица «чтобы не застрять и не бросить»

Ошибка

Как выглядит

Почему происходит

Как исправить

Авторизация не работает

Login жмётся, но не входит

Firebase Auth не включён

Firebase → Authentication → Enable Email/Password

Данные не сохраняются

Firestore пустой

Нет правил доступа

Firestore Rules → разрешить доступ для auth users

Кнопка ничего не делает

Нет реакции

Не добавлено Action

Button → Actions → Add Action

Ошибка навигации

Белый экран

Не указан target page

Action → Navigate → выбрать экран

Web работает, mobile нет

Ошибка сборки

Не добавлены платформы в Firebase

Firebase → Add Android / iOS app

Приложение «тормозит»

Долгая загрузка

Запросы без фильтра

Firestore query → limit + where

Пользователь видит чужие данные

Критичная ошибка

Нет user_id фильтра

Query → where user_id == current user



Мини-архитектура FlutterFlow-приложения (как думать правильно)
Таблица «как мыслит опытный разработчик, а не новичок»

Слой

Где реализуется

Что туда класть

Пример

UI

FlutterFlow UI Builder

Экраны, кнопки

Login, Dashboard

UX-логика

Actions

Переходы, ошибки

Snackbar, Redirect

Auth

Firebase Auth

Пользователи

Email / Password

Данные

Firestore

История, лимиты

requests, users

AI-логика

Backend / API

Запросы к AI

prompt → result

Контроль

Firestore + Logic

Лимиты, счётчики

requests_count

Публикация

FlutterFlow / Hosting

Web + Mobile

Web URL

Эта таблица фиксирует мышление, которое потом переносится:
  • в Bubble
  • в Google AI Studio
  • в любой no-code / AI-code инструмент
Урок 4.
Российские платформы без программирования.
В этом уроке мы разберём российские no-code платформы, на которых можно реально запускать рабочие сервисы, не упираясь в блокировки, платежи и доступы.
Важно сразу зафиксировать:
российские платформы не замена зарубежным, а дополнение.
Их сильная сторона — бэкенд, логика, стабильность, соответствие требованиям рынка РФ.

Цель:
После этого урока вы:
  • понимаете, какую российскую платформу выбрать под задачу,
  • можете собрать бэкенд и бизнес-логику без кода,
  • знаете, как связать их с AI и фронтендом (в том числе зарубежным),
  • не делаете типичную ошибку «строю всё в одной платформе».

🔹 Общая картина: как использовать российские no-code правильно
Российские платформы лучше всего использовать как:
  • backend,
  • API,
  • бизнес-логику,
  • базы данных,
  • правила, роли, ограничения.
А интерфейс (UI):
  • либо простой,
  • либо выносится в Webflow / WeWeb / FlutterFlow.

Платформа 1. Directual — логика и бэкенд для сложных сервисов
Directual — это no-code backend-платформа для:
  • сложных сценариев,
  • API,
  • ролей,
  • бизнес-правил,
  • AI-сервисов с логикой.
Что в ней делать лучше всего:
  • CRM
  • SaaS
  • внутренние сервисы
  • AI-сервисы с правилами и лимитами

Таблица: Как начать работу в Directual (пошагово)

Шаг

Куда заходить

Что делать

Что должно получиться

1

Directual → Новый проект

Создать проект

Пустой backend

2

Data → Collections

Создать таблицы (Users, Requests, History)

Структура данных

3

Logic → Scenarios

Настроить сценарии (if / else)

Бизнес-логика

4

API

Включить REST API

Backend доступен извне

5

Integrations

Подключить AI API

AI-функции

6

Auth

Настроить роли

Контроль доступа

Важно: Directual отлично подходит как «мозг» сервиса.


Платформа 2. AppMaster — бизнес-приложения без компромиссов
AppMaster ориентирован на:
  • корпоративные сервисы,
  • внутренние инструменты,
  • стабильность и масштабируемость.
Подходит, если:
  • сервис для компании,
  • важны роли и процессы,
  • нужен веб + мобильное приложение.

Таблица: Когда выбирать AppMaster

Задача

Подходит AppMaster?

Почему

CRM / ERP

✅ Да

Бизнес-логика и роли

Внутренний сервис

✅ Да

Безопасность

AI-чат для сайта

⚠️ Частично

Лучше связка

Стартап-MVP

⚠️ Иногда

Зависит от скорости



Платформы 3. Nocodez / КодБезКода — быстрые и простые сервисы
Эти платформы подходят для:
  • простых сервисов,
  • форм,
  • личных кабинетов,
  • быстрых MVP.
Не подходят для:
  • сложной логики,
  • масштабных AI-сервисов.

Таблица: Простые сценарии использования

Сценарий

Платформа

Почему

Форма + база

Nocodez

Быстро

Личный кабинет

КодБезКода

Просто

Прототип идеи

Любая

Проверка спроса

AI-SaaS

❌

Ограничения



Как связать российские платформы с AI и UI
Идеальный паттерн:

UI (WeWeb / Webflow / FlutterFlow)
↓
Backend (Directual / AppMaster)
↓
AI (Google AI Studio / GigaChat / OpenAI)

Таблица: Типовая архитектура

Компонент

Инструмент

Интерфейс

Webflow / WeWeb

Логика

Directual

AI

Google AI Studio / GigaChat

Хостинг

РФ / зарубеж

Платежи

ЮKassa / CloudPayments



Частая ошибка (и как лучше)
❌ Ошибка:
Делать весь сервис целиком в одной российской платформе.
✅ Как лучше:
  • backend и правила — в российской платформе,
  • UI и AI — там, где удобнее и мощнее.
Это даёт:
  • гибкость,
  • скорость,
  • меньше ограничений.

Мини-чек-лист: можно ли брать российскую платформу

Вопрос

Да / Нет

Нужна стабильность в РФ?

✅

Нужен сложный backend без кода?

✅

Нужен сложный UI?

❌

Нужен быстрый MVP?

⚠️



✅ Реальный кейс: Directual + AI (AI-ассистент для анализа запросов)
Задача кейса:
Пользователь вводит текст → сервис отправляет его в AI → получает ответ → сохраняет историю → учитывает лимиты.

Этап

Где в Directual

Что делаем

Что именно настраиваем

Результат

1

Projects

Создаём новый проект

Название сервиса

Пустой backend

2

Data → Collections

Создаём таблицу Users

id, email, role, requests_today

Пользователи

3

Data → Collections

Создаём таблицу Requests

user_id, input, output, created_at

История запросов

4

Auth

Включаем авторизацию

Email / Password

Вход пользователей

5

Logic → Scenarios

Проверка лимита

if requests_today < limit

Контроль доступа

6

Integrations → API

Подключаем AI API

Gemini / GigaChat / OpenAI

AI доступен

7

Logic → Scenarios

Запрос к AI

Передаём input

Ответ от AI

8

Logic → Scenarios

Сохранение результата

Запись в Requests

История

9

Logic → Scenarios

Увеличение счётчика

requests_today +1

Учёт лимита

10

API

Публикуем endpoint

POST /generate

Backend готов

На выходе:
Полноценный backend с AI, лимитами, историей и API — без кода.


✅ Мини-практика: «Собери backend за 40 минут»

Время

Действие

Где нажимать

Что должно получиться

0–5 мин

Создать проект

Directual → New Project

Проект

5–10 мин

Таблицы данных

Data → Collections

Users, Requests

10–15 мин

Авторизация

Auth → Enable

Login работает

15–20 мин

AI интеграция

Integrations → API

AI подключён

20–25 мин

Сценарий запроса

Logic → Scenarios

AI отвечает

25–30 мин

Лимиты

Logic → if / else

Защита бюджета

30–35 мин

Сохранение истории

Logic → Create Record

История

35–40 мин

Публикация API

API → Publish

Готовый backend

Урок 5.
Связка Google AI Studio + No-Code.
Этот урок отвечает на главный вопрос:
«Как превратить сгенерированное AI-приложение в реальный, работающий сервис?»
Мы используем Google AI Studio как мозг и генератор логики,
а no-code платформы — как инфраструктуру и продуктовую оболочку.

Цель:
После урока вы:
  • понимаете когда и зачем использовать Google AI Studio,
  • умеете переносить логику в no-code,
  • собираете сервис из готовых AI-блоков, а не «с нуля»,
  • не делаете ошибку «тащу всё в одну платформу».

Базовый принцип (очень важно)
Google AI Studio — думает и проектирует.
No-code — исполняет, хранит и ограничивает.

Если держать это в голове — всё становится просто.

Общая схема связки:
Пользователь
↓
UI (WeWeb / Bubble / FlutterFlow)
↓
No-Code (логика, лимиты, БД)
↓
Google AI Studio (Gemini / Agents)
↓
Ответ → сохранение → результат

1. Генерация функционала в Google AI Studio
Что мы делаем в AI Studio:
  • описываем App Context,
  • генерируем логику функций,
  • определяем входы и выходы,
  • НЕ занимаемся платежами, лимитами и UI.

Таблица 1. Что именно генерируем в Google AI Studio

Элемент

Что описываем

Что получаем

App Context

Назначение сервиса

Понимание задачи

User Action

Что делает пользователь

Сценарий

AI Function

Что делает AI

Логика

Input Schema

Какие данные приходят

Структура

Output Schema

Что возвращаем

Формат ответа

Edge cases

Что если ошибка

Поведение

Важно: мы сразу думаем в формате API, а не «чатик».

2. Перенос логики в no-code платформу
Теперь AI-логика становится функцией, а не «магией».

Таблица 2. Перенос логики: куда, что и зачем

Что

Где делать

Почему

AI-функция

Google AI Studio

Лучшие модели

Вызов функции

No-code workflow

Контроль

Лимиты

No-code

Защита бюджета

История

No-code DB

Продукт

UI

No-code

Пользователь


Таблица 3. Пошаговые действия (без догадок)

Шаг

Куда идти

Что нажать

Что должно получиться

1

AI Studio

Create Function

AI-логика

2

AI Studio

Test Function

Проверка

3

No-code

API / HTTP Request

Вызов AI

4

No-code

Conditions

Проверка лимита

5

No-code

Database

Сохранение

6

UI

Button → Action

Пользовательский сценарий



3. Пул готовых компонентов (самое ценное)
Это типовые AI-блоки, которые можно копировать из проекта в проект.

Таблица 4. Готовые AI-компоненты для 80% сервисов

Компонент

Что делает

Где используется

AI-Chat

Диалог

Ассистенты

AI-Analyzer

Анализ текста

CRM, SaaS

AI-Generator

Генерация

Контент

AI-Search

Поиск

Базы

AI-Summarizer

Кратко

Документы

AI-Classifier

Категории

Автоматизация

Это библиотека, а не одноразовый код.

Таблица 5. Продакшн-минимум (обязателен)

Что

Где

Почему

Лимит запросов

No-code

Деньги

Обработка ошибок

No-code

UX

Сообщение пользователю

UI

Доверие

Таймаут AI

Workflow

Стабильность

Логи

DB

Отладка



✅ Мини-практика.
Задача:
Собрать сервис:
Кнопка → AI → результат → сохранение

Таблица 6. Мини-практика (20–30 минут)

Шаг

Действие

Инструмент

1

Описать функцию

AI Studio

2

Протестировать

AI Studio

3

Вызвать API

No-code

4

Ограничить лимит

No-code

5

Сохранить результат

DB

6

Показать пользователю

UI


Чек-лист: связка сделана правильно?

Вопрос

Да

AI живёт отдельно от UI

✅

Лимиты есть

✅

История сохраняется

✅

Можно заменить модель

✅

Можно масштабировать

✅

Если все галочки есть — ты делаешь продукт, а не демо.

Как лучше (совет):
❌ Не пытайся «всё делать в AI Studio»
❌ Не зашивай ключи в клиент
✅ Используй AI как сервис, а не «чёрный ящик»
✅ Строй библиотеку компонентов — это ускоряет в 5 раз


✅ Полный кейс: AI-сервис под ключ (от идеи до публикации)
Кейс: AI-ассистент для анализа и улучшения текста (SaaS-сервис)

Этап

Что делаем

Где делаем

Куда нажимать / как

Что должно получиться

1

Формулируем задачу

Google AI Studio

App Context → Describe app

Понимание сервиса

2

Описываем функцию AI

Google AI Studio

Create Function → Prompt

AI-логика

3

Тестируем ответы

Google AI Studio

Run / Test

Стабильный результат

4

Фиксируем вход/выход

Google AI Studio

Input / Output schema

API-контракт

5

Создаём backend

No-code (Bubble / Directual)

New App / New Project

Инфраструктура

6

Таблицы данных

No-code

Users, Requests, History

Хранение данных

7

Подключаем AI

No-code → API

HTTP Request

Связь с AI

8

Добавляем лимиты

No-code Logic

if / else

Контроль бюджета

9

UI-сценарий

No-code UI

Button → Workflow

Пользовательский путь

10

Авторизация

No-code Auth

Enable Auth

Доступ

11

Сообщения об ошибках

No-code UI

Alert / Toast

UX

12

Публикация

Hosting

Deploy

Рабочий сервис

Итог:
Полноценный AI-сервис с логикой, лимитами, историей и публикацией.

✅ Шаблон: “Google AI Studio + No-Code”
Эта таблица — структура шаблона, который можно использовать для любого проекта.

Блок шаблона

Где находится

Что внутри

Зачем нужен

App Context

AI Studio

Описание сервиса

Понимание

AI Functions

AI Studio

1–3 функции

Логика

Schemas

AI Studio

Input / Output

Стандартизация

API Endpoint

No-code

/generate

Связь

Users DB

No-code

Пользователи

Авторизация

Requests DB

No-code

История

Продукт

Limits Logic

No-code

Requests / day

Контроль

Error Handling

No-code

Fallback messages

UX

UI Screens

No-code

Login, Dashboard

Интерфейс

Deploy config

Hosting

Vercel / РФ

Запуск

Как использовать шаблон:
Скопировать структуру
Заменить App Context
Изменить AI-функцию
Подключить UI
Запустить сервис
Без переписывания логики с нуля.
5 МОДУЛЬ

Low-code и минимальный код (AI-Code)

Урок 1.
Генерация кода с помощью ИИ.
Зачем этот урок
К этому моменту вы уже:
  • создавали приложения без кода,
  • собирали MVP и AI-сервисы,
  • понимаете базовую архитектуру, API и деплой.
Следующий шаг — не становиться программистом, а научиться:
  • читать и дорабатывать код с помощью ИИ,
  • добавлять кастомную логику там, где no-code упирается,
  • ускорять разработку в несколько раз.
Это и есть вайбкодинг:
вы управляете логикой и смыслом, а ИИ — реализацией кода.

Цель:
К концу урока вы умеете:
  • генерировать frontend-компоненты,
  • генерировать backend-функции и API,
  • дорабатывать код под свои задачи,
  • использовать Cursor, Replit AI, GigaChat Code осознанно, а не «на авось».

1. Cursor — основной инструмент вайбкодинга
Cursor — это AI-IDE, где ты:
  • видишь код,
  • редактируешь код,
  • общаешься с ИИ прямо внутри проекта.
Что делать в Cursor

Задача

Что писать ИИ

Что должно получиться

Создать UI-компонент

“Create a React component for user dashboard with table and actions”

Готовый компонент

Добавить логику

“Add validation and loading state”

Рабочая логика

Рефакторинг

“Simplify this function and remove duplication”

Чище код

Понять код

“Explain what this file does in simple terms”

Понимание

👉 Важно:
мы не учим писать код с нуля — мы учим управлять кодом.

2. Replit AI — быстрые прототипы и серверная логика
Replit AI идеален для:
  • API,
  • серверных функций,
  • MVP-логики,
  • быстрых экспериментов.
Типовые сценарии

Сценарий

Что генерируем

Где используем

Backend для AI

API-endpoint

Web / mobile

Обработка данных

JS / Python-функции

Сервер

Интеграции

OpenAI / Gemini / API

AI-сервисы

Пример запроса:
“Create a Node.js API endpoint that takes user input, sends it to Gemini API and returns the response.”


3. GigaChat Code — российская альтернатива
GigaChat Code используем, когда:
  • нужен российский стек,
  • проект ориентирован на РФ,
  • важна локальная инфраструктура.
Где он особенно хорош
  • генерация логики,
  • объяснение кода на русском,
  • правки и упрощение функций,
  • связка с Directual / российскими платформами.

4. Генерация компонентов (Frontend)
Что именно нужно уметь

Компонент

Что просим у ИИ

Итог

Form

“Create form with validation”

UI + логика

Table

“Table with pagination and actions”

Готовый экран

Dashboard

“User dashboard layout”

Основной экран

👉 Важно:
вы не обязаны понимать весь код, но должны:
  • понимать структуру,
  • знать, где что менять,
  • уметь задать корректную задачу ИИ.

5. Генерация функций и backend-сценариев
Типовые функции, которые реально нужны

Функция

Назначение

Auth check

Проверка пользователя

AI request

Запрос к нейросети

Save result

Сохранение в БД

Rate limit

Ограничение запросов

Пример запроса:
“Write a server function that limits user requests to 10 per day and returns an error message when limit is reached.”

6. Как правильно работать с ИИ (вайбкодинг)
Правило одного экрана:
👉 одна задача — один запрос.
❌ Плохо:
“Сделай мне всё приложение”

✅ Хорошо:
“Create function X”
“Now add validation”
“Now explain how to connect this to UI”

Это сильно снижает ошибки и галлюцинации.

7. Мини-практика (обязательно)
Задача:
Сгенерировать AI-функцию и подключить её к интерфейсу.
Шаги:
  • В Cursor или Replit:
сгенерировать функцию AI-запроса,
  • Добавить:
лимит запросов,
обработку ошибки,
  • Подключить к кнопке:
ввод → AI → результат.

✅ «Что ИИ может написать вместо меня»

Что нужно сделать

Что писать ИИ

Что ИИ сгенерирует

Нужно ли знать код

Кнопка + действие

«Создай кнопку отправки формы и обработчик»

HTML + JS-код

❌ нет

Проверка данных

«Добавь валидацию email и ошибки»

Функции проверки

❌ нет

AI-запрос

«Функция запроса к Gemini / GPT»

Backend-функция

❌ нет

Работа с БД

«Сохранить результат в Supabase»

SQL / API-вызов

❌ нет

Ошибка пользователю

«Покажи сообщение, если AI недоступен»

UI + логика

❌ нет



✅ «Как работать с AI-кодом без программистских навыков»
(алгоритм: “копировать → вставить → проверить”)

Шаг

Что делает студент

Где

Что должно получиться

1

Описывает задачу текстом

Cursor / Replit / GigaChat

ИИ предлагает код

2

Спрашивает: «что делает этот код?»

там же

Понимание логики

3

Копирует код

AI → платформа

Готовый блок

4

Вставляет

No-code / проект

Код работает

5

Просит исправить

AI

Ошибки устранены

👉 Правило:
Если не понимаешь строку — спроси ИИ, не гугл.

✅ «Когда нужен AI-Code, а когда — нет»

Задача

No-code

AI-Code

Форма

✅

❌

Авторизация

✅

❌

Простая логика

✅

❌

Сложная логика

⚠️

✅

Интеграция AI

⚠️

✅

Кастомный алгоритм

❌

✅

Не хватает функций

❌

✅

👉 Вывод:
AI-код — не замена no-code, а его усиление.


✅ «Одна кнопка → один AI-запрос → результат»
Цель:
Научиться добавлять AI-функцию в приложение без ручного программирования, используя AI-генерацию кода.
Результат:
Пользователь нажимает кнопку → AI обрабатывает запрос → результат показывается на экране.

Пошаговая таблица действий

Шаг

Что делаем

Где именно

Что писать / нажимать

Что должно получиться

1

Формулируем задачу

Cursor / Replit AI / GigaChat Code

«Создай функцию: по тексту пользователя запрашивает AI и возвращает ответ»

ИИ генерирует готовую функцию

2

Уточняем логику

Там же

«Объясни, что делает каждая часть кода простыми словами»

Понимание логики без кода

3

Добавляем UI

No-code платформа / AI Studio

Кнопка + поле ввода

Экран с кнопкой

4

Связываем кнопку

Там же

Действие: onClick → вызвать функцию AI

Кнопка запускает AI

5

Подключаем API

Cursor / AI Studio

«Подставь мой AI API-ключ»

Функция готова к работе

6

Обрабатываем ответ

Там же

«Верни результат в интерфейс»

Ответ AI появляется на экране

7

Добавляем ошибку

Там же

«Если AI недоступен — показать сообщение пользователю»

Пользователь не видит баг

8

Тестируем

Приложение

Ввести текст → нажать кнопку

Рабочий AI-результат

9

Сохраняем

БД / состояние

«Сохрани запрос и ответ»

История запросов

10

Готово

—

—

Мини-AI-сервис работает

Урок 2.
Bolt.new и Cognition Devin.
Создание полноценного приложения и автоматизация разработки

Зачем этот урок:
  • Bolt.new — когда нужно быстро собрать рабочее приложение из идеи
  • Cognition Devin — когда нужно делегировать разработку как команде
Это уже не помощники, а AI-исполнители.
Здесь мы переходим от «я делаю руками» → я управляю процессом.
Это и есть вайбкодинг в продакшене.

  1. Что делают Bolt.new и Devin (простыми словами)

Инструмент

Что делает

Когда использовать

Bolt.new

Генерирует полный проект (frontend + backend)

MVP, старты, быстрые сервисы

Cognition Devin

Работает как AI-разработчик

Большие фичи, сложные задачи

Оба

Читают ТЗ, пишут код, исправляют ошибки

Когда важен результат, а не код

👉 Важно: ты не пишешь код — ты ставишь задачи и проверяешь результат.

2. Как выглядит правильный процесс (вайбкодинг)
❌ Ошибка новичков: «Сделай мне приложение»
✅ Правильно: короткое, но структурное ТЗ
Минимум, который всегда нужен:
  • что за сервис
  • один основной сценарий
  • вход → действие → результат
  • где хранить данные
  • что показывать пользователю

3. Практика: создаём мини-сервис с Bolt.new
Пример сервиса:
AI-помощник, который принимает текст → анализирует → возвращает результат и сохраняет историю.

Таблица 1. Полный сценарий работы с Bolt.new

Шаг

Что делаем

Куда заходить

Что писать / нажимать

Что должно получиться

1

Открыть Bolt

bolt.new

New Project

Пустой проект

2

Описать сервис

Prompt

«Создай веб-сервис: форма ввода → AI-анализ → результат + история»

План приложения

3

Уточнить стек

Там же

«Frontend + backend, авторизация, БД»

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

4

Генерация UI

Auto

Ничего

Готовые экраны

5

Генерация логики

Auto

Ничего

Рабочий backend

6

Проверка

Preview

Запуск

Приложение открывается

7

Правки

Prompt

«Упрости интерфейс»

UI обновлён

8

Подключение AI

Prompt

«Подключи AI API»

AI работает

9

Хранение данных

Auto

—

История запросов

10

Готово

—

—

MVP готов



4. Что важно проверить сразу (то, что часто забывают)
Таблица 2. Мини-чеклист перед «готово»

Проверка

Почему важно

Что сделать

Есть лимит запросов

Иначе «сгорит» бюджет

Ограничить бесплатные запросы

Есть ошибка AI

AI может упасть

Сообщение пользователю

Данные сохраняются

Без этого сервис «пустой»

Проверить БД

Один главный сценарий

MVP ≠ всё сразу

Убрать лишнее

👉 Это продакшн-мышление, не «учебное».

5. Cognition Devin: когда и зачем
Если Bolt — «быстро собрать»,
то Devin — «делегировать».
Ты используешь Devin, когда:
  • проект растёт,
  • нужно много задач,
  • важна стабильность.
Таблица 3. Как ставить задачу Devin

Элемент

Что писать

Цель

«Добавить платёж»

Контекст

Как сейчас работает сервис

Ограничения

Стек, платформа

Результат

Что должно работать

Проверка

Как понять, что готово

👉 Devin сам дробит задачи, пишет код, тестирует.

6. Автоматизация задач (ключевая мысль)
Ты можешь автоматизировать:
  • добавление фич
  • рефакторинг
  • багфиксы
  • масштабирование
Главное правило вайбкодинга: Ты думаешь — AI делает

7. Мини-практика (обязательная)
Таблица 4. Мини-сервис за 30–40 минут

Этап

Действие

Результат

Идея

Один сценарий

Чёткий фокус

Bolt

Генерация проекта

Готовое приложение

AI

Подключение модели

AI-функция

Проверка

Ошибки + лимиты

Безопасность

Итог

Запуск

Рабочий сервис



✅ ШАБЛОН ТЕХНИЧЕСКОГО ЗАДАНИЯ ДЛЯ BOLT.NEW / COGNITION DEVIN
(Vibe Coding-формат, без лишнего техдока)
Таблица 1. Готовое ТЗ для генерации приложения

Блок ТЗ

Что сюда писать

Пример (как надо)

1. Название проекта

Короткое рабочее имя

AI Text Analyzer

2. Цель приложения

Одно предложение: зачем сервис

Пользователь вводит текст и получает AI-анализ

3. Целевая аудитория

Для кого сервис

Фрилансеры и предприниматели

4. Основной сценарий (MVP)

Вход → действие → результат

Ввод текста → анализ → результат

5. Экраны

Минимальный набор

Login, Dashboard, Input, Result, History

6. UI-требования

Просто и понятно

Один экран — одна задача

7. AI-функция

Что делает AI

Анализ текста и краткий вывод

8. Источник AI

Какую модель использовать

Gemini / OpenAI / GigaChat

9. Хранение данных

Что сохраняем

Текст, результат, дата

10. Авторизация

Нужна или нет

Email / magic link

11. Ограничения

Лимиты

5 запросов бесплатно

12. Ошибки

Что делать при сбое

Показать сообщение пользователю

13. Платёж (если нужен)

Сейчас или позже

Позже, freemium

14. Результат

Как понять, что готово

Рабочий сервис в браузере

👉 Важно: этого ТЗ достаточно, чтобы AI сам:
  • спроектировал архитектуру,
  • сгенерировал код,
  • собрал UI,
  • подключил backend.

Таблица 2. Как использовать это ТЗ в Bolt и Devin

Инструмент

Как вставлять ТЗ

Что сказать AI

Bolt.new

Вставить целиком в prompt

«Создай приложение по этому ТЗ»

Devin

Передать как файл или текст

«Реализуй проект по ТЗ»

Оба

Можно дополнять

«Если есть варианты лучше — предложи»



Таблица 3. Частые ошибки в ТЗ (и как их исправить)

Ошибка

Почему плохо

Как исправить

«Сделай крутой сервис»

Нет конкретики

Один сценарий

10+ функций

Не MVP

Оставить 1

Нет лимитов

Сольёшь бюджет

Ограничить сразу

Нет ошибок

Пользователь теряется

Сообщения

Нет хранения

Сервис «пустой»

Добавить БД


🔑 Золотое правило (очень важно)
Хорошее ТЗ = 80% готового приложения
Если научиться писать вот такое ТЗ —
вы сможете делать реальные AI-сервисы без кода и страданий.
Урок 3.
Работа с фреймворками с помощью ИИ.
Вступление (очень важно):
До этого момента вы:
  • генерировали отдельные куски кода
  • делали мини-сервисы
  • пробовали AI-инструменты как помощников
Но реальные приложения не состоят из отдельных кнопок и запросов.
Они состоят из структуры.
👉 Эту структуру и дают фреймворки.

1. Что такое фреймворк (простым языком)
Фреймворк — это готовый «скелет» приложения, в котором уже есть:
  • куда класть код
  • как он связан
  • как работает сервер
  • как подключаются базы, API и ИИ
  • как приложение запускается и масштабируется
Пример без фреймворка:
  • код в одном файле
  • всё перемешано
  • невозможно поддерживать
  • ИИ генерирует «мусор»
Пример с фреймворком:
  • понятная структура
  • каждый файл отвечает за своё
  • ИИ пишет код точно в нужное место
  • проект можно развивать и продавать
👉 Фреймворк = фундамент для AI-приложений

2. Зачем фреймворки нужны именно тебе (а не программистам)
Ты используешь ИИ, значит фреймворки нужны тебе, чтобы:
  • ИИ понимал контекст проекта
  • можно было добавлять функции без переписывания всего
  • делать реальные продукты, а не демо
  • запускать сервисы, за которые платят
👉 Фреймворки — это язык, на котором ИИ понимает, как собирать приложения

3. Какие фреймворки мы разбираем и зачем каждый
Здесь только практичные варианты, которые реально используют в AI-сервисах.

🔹 Next.js — интерфейс и клиентская часть
Что это:
Фреймворк для создания веб-приложений и интерфейсов
Используется для:
  • личных кабинетов
  • AI-сервисов с кнопками и формами
  • лендингов с логикой
  • приложений «как стартап»
Почему важен:
  • идеально работает с AI-генерацией
  • ИИ отлично пишет компоненты
  • можно собрать продукт без фронтенд-разработчика

🔹 Django — полный backend «под ключ»
Что это:
Фреймворк для логики, данных, пользователей и админки
Используется для:
  • сервисов с авторизацией
  • подписок
  • хранения данных
  • сложных бизнес-процессов
Почему важен:
  • почти всё уже есть «из коробки»
  • ИИ отлично генерирует модели и API
  • подходит для серьёзных продуктов

🔹 FastAPI — быстрый AI-backend и API
Что это:
Фреймворк для создания API и AI-сервисов
Используется для:
  • AI-обработки запросов
  • микросервисов
  • backend для no-code и frontend
  • GPT-сервисов
Почему важен:
  • простой
  • идеально дружит с ИИ
  • лучший вариант для AI-приложений

4. Как ИИ работает с фреймворками (ключевая мысль)
ИИ НЕ пишет приложение целиком за тебя.
ИИ:
  • пишет модули
  • функции
  • API-эндпоинты
  • компоненты
  • схемы логики
А фреймворк:
  • связывает всё в систему
  • задаёт правила
  • не даёт проекту развалиться
👉 ИИ = строитель, фреймворк = архитектура

5. Базовая схема AI-приложения (чтобы всё встало в голове)
Интерфейс (Next.js)
↓
Backend / API (FastAPI или Django)
↓
ИИ (OpenAI / GigaChat / Claude)
↓
Результат пользователю

Это универсальная схема 80% AI-сервисов

6. Практика: что мы делаем - AI-модуль внутри фреймворка
Ты НЕ пишешь код руками.
Ты учишься управлять ИИ внутри фреймворка.

Задача:
Сделать один AI-модуль, который:
  • принимает запрос
  • отправляет его в ИИ
  • возвращает результат
Таблица: практические действия

Шаг

Что делаем

Где

Что нажать / ввести

Что должно получиться

1

Выбираем фреймворк

Replit / локально

Создать проект FastAPI

Пустой backend

2

Создаём AI-эндпоинт

main.py

Prompt для ИИ

/ai/process

3

Подключаем ИИ

OpenAI / GigaChat

API-ключ

Ответ от ИИ

4

Тестируем

Браузер / Swagger

Отправить запрос

Текст от ИИ

5

Подключаем интерфейс

Next.js

fetch к API

Ответ в UI



✅ Какой фреймворк выбрать

Цель

Фреймворк

AI-сервис

FastAPI

Стартап / SaaS

Django

Интерфейс

Next.js

Связка с no-code

FastAPI


✅ Универсальный prompt для ИИ (шаблон)

Поле

Что писать

Роль

Ты backend-разработчик

Фреймворк

FastAPI / Django

Задача

Создать AI-модуль

Вход

Текст пользователя

Выход

Ответ ИИ

Формат

Готовый код



✅ Кейс: AI-сервис под ключ (от идеи до работающего приложения)
Пример сервиса:
👉 AI-помощник, который принимает текст → обрабатывает через ИИ → возвращает результат пользователю
(типовой шаблон для 80% AI-продуктов)

Используемая связка:
  • Frontend: Next.js (интерфейс)
  • Backend: FastAPI (логика и API)
  • ИИ: OpenAI / GigaChat / Claude
  • Инструменты: Bolt.new / Devin / Cursor / Replit
  • Тип: Low-code + AI-code
ТАБЛИЦА: КЕЙС ОТ А ДО Я

Этап

Цель этапа

Что делаем конкретно

Где / в каком инструменте

Что вводим / нажимаем

Что должно получиться

1

Формулируем идею

Определяем одну функцию сервиса

Голова / Notion

«Сервис принимает текст и возвращает AI-ответ»

Понятная задача для ИИ

2

Выбираем архитектуру

Frontend + Backend + AI

Таблица архитектуры

Next.js + FastAPI + AI

Чёткая схема приложения

3

Готовим ТЗ для ИИ

Описываем, что должен собрать ИИ

Bolt / Devin

Шаблон ТЗ (см. ниже)

ИИ понимает, что строить

4

Создаём backend

Генерируем FastAPI-проект

Bolt / Replit

Prompt: «Создай FastAPI backend…»

Готовый backend

5

Создаём API-эндпоинт

Точка приёма запроса

FastAPI

/api/process

API принимает текст

6

Подключаем ИИ

Связываем backend с AI

FastAPI

API-ключ + SDK

Backend отвечает текстом ИИ

7

Проверяем backend

Тестируем API

Swagger / браузер

Отправить запрос

Получили ответ от ИИ

8

Создаём frontend

Генерируем интерфейс

Bolt / Cursor

Prompt: «Создай UI с кнопкой»

Форма + кнопка

9

Связываем UI и backend

Подключаем fetch

Next.js

URL API

UI получает ответ

10

Добавляем обработку ошибок

Защита от сбоев

Next.js + FastAPI

try/catch

Нет падений

11

Проверяем сценарий

Полный путь запроса

Браузер

Текст → кнопка

Ответ на экране

12

Улучшаем UX

Лоадер, состояния

Next.js

Loading / disabled

Профессиональный вид

13

Подготавливаем к запуску

Проверяем ключи

.env

Переменные окружения

Безопасность

14

Готовим к масштабированию

Разделяем модули

FastAPI

services / routes

Чистая структура

15

Итог

Рабочий AI-сервис

—

—

Готовый продукт


ШАБЛОН ТЗ ДЛЯ BOLT / DEVIN (внутри этого же кейса)

Блок

Что писать

Роль ИИ

Ты senior AI-разработчик

Цель

Собрать AI-сервис под ключ

Frontend

Next.js, форма + кнопка

Backend

FastAPI

Функция

Текст → ИИ → ответ

ИИ

OpenAI / GigaChat

Результат

Рабочее приложение

Что дает кейс
ты можешь:
  • делать любые AI-сервисы
  • менять ИИ → логика остаётся
  • менять frontend → backend остаётся
  • продавать решения клиентам
  • масштабировать продукт
Урок 4.
Связка Google AI Studio + Cursor.
Цель урока:
Научиться использовать Google AI Studio как «мозг» проекта, а Cursor — как среду сборки и доработки полноценного приложения.
После урока вы:
  • понимаете, зачем нужна эта связка
  • умеете создать проект в AI Studio
  • экспортируете логику в Cursor
  • достраиваете приложение до рабочего состояния
  • понимаете, что оптимизировать перед запуском

Ключевая идея урока (очень важно)
Google AI Studio — место, где мы:
думаем
проектируем
тестируем AI-логику
формируем промпты и сценарии
Cursor — место, где мы:
собираем код
соединяем frontend + backend
дописываем недостающее
приводим проект в production-вид
👉 Это идеальная связка для solo-разработчиков, фрилансеров и AI-продуктов.

Архитектура проекта (что в итоге собираем)
UI (Next.js / React)
↓
Backend (API / server actions)
↓
Google AI (через SDK / API)

ЧАСТЬ 1. Создание проекта в Google AI Studio
Что мы делаем на этом этапе
  • создаём AI-проект
  • тестируем промпт
  • понимаем, что именно будет делать ИИ
Таблица 1. Google AI Studio — пошаговые действия

Шаг

Цель

Куда заходить

Что нажимать / вводить

Что должно получиться

1

Зайти в сервис

ai.google.dev

Sign in

Доступ к AI Studio

2

Создать проект

AI Studio

New Project

Новый AI-проект

3

Выбрать модель

Model settings

Gemini / Pro

Активная модель

4

Описать задачу

Prompt поле

«Ты AI-ассистент, который…»

Рабочий промпт

5

Протестировать

Run / Generate

Ввод текста

Ответ от ИИ

6

Улучшить промпт

Prompt

Добавить формат, правила

Стабильный результат

7

Зафиксировать

Copy prompt

Скопировать текст

Готово к экспорту

❗Не забываем:
  • задать формат ответа (JSON / текст)
  • ограничить длину ответа
  • прописать «что делать, если данных мало»
  • предусмотреть ошибочный ввод

ЧАСТЬ 2. Экспорт логики в Cursor
Теперь мы переносим идею + логику в код.

Таблица 2. Перенос из AI Studio → Cursor

Шаг

Цель

Где

Что делать

Результат

1

Открыть Cursor

Cursor

New Project

Пустой проект

2

Выбрать тип

Cursor

Next.js / Node

База проекта

3

Вставить ТЗ

Cursor Chat

Prompt + описание

ИИ понял задачу

4

Сгенерировать код

Cursor

Generate

Начальный код

5

Добавить API

Backend

SDK Google AI

Подключение ИИ

6

Проверить структуру

Файлы

pages / api / components

Проект собран

Пример запроса в Cursor (обязательный шаблон)
Создай приложение с интерфейсом, кнопкой и полем ввода.
При нажатии кнопки отправляй текст в Google AI (Gemini)
и возвращай результат пользователю.
Используй безопасную обработку ошибок.

ЧАСТЬ 3. Генерация недостающих частей приложения
Cursor почти всегда оставляет «дыры». Это нормально.

Таблица 3. Что обычно нужно достраивать

Что не готово

Где

Что просить у Cursor

Обработка ошибок

API

try/catch + fallback

Лоадер

UI

loading state

Ограничение запросов

Backend

лимит / debounce

Проверка ввода

UI

validate input

.env

Проект

ключи API

README

Корень

инструкция запуска



ЧАСТЬ 4. Оптимизация и подготовка к развертыванию
Это граница между игрушкой и продуктом.

Таблица 4. Подготовка к запуску

Этап

Что делаем

Где

Результат

Оптимизация

Убираем лишние запросы

Backend

Быстрее

UX

Улучшаем интерфейс

UI

Удобно

Безопасность

Скрываем ключи

.env

Без утечек

Проверка

Тестируем сценарии

Браузер

Без ошибок

Деплой

Vercel / Render

Hosting

Онлайн



Когда эта связка лучше всего подходит:
  • AI-сервисы под ключ
  • MVP за 1–3 дня
  • фриланс-проекты
  • платные инструменты
  • быстрые эксперименты

✅ Полный кейс Monetization (AI-сервис под ключ)
Кейс: AI-сервис генерации текстов / идей / ответов
Модель: Freemium → Paid
Стек: Google AI Studio + Cursor + No-code / Hosting

Этап

Что делаем

Где

Конкретные действия

Что должно получиться

1

Формируем ценность

AI Studio

Определяем: что AI делает лучше человека

Чёткое УТП

2

Ограничиваем бесплатно

AI логика

В промпте / API: max N запросов

Бесплатный лимит

3

Считаем запросы

Backend

Счётчик запросов на user_id

Учёт использования

4

Создаём тариф

Логика

Free / Pro / Unlimited

Понятные планы

5

Подключаем оплату

No-code / API

Stripe / ЮKassa / CloudPayments

Оплата работает

6

Проверка доступа

Backend

Проверка статуса подписки

Защита логики

7

UI оплаты

Frontend

Кнопка «Обновить тариф»

UX для оплаты

8

Обработка отказов

Backend

Если оплата не прошла

Ошибка без падения

9

Уведомления

UI

«Лимит исчерпан»

Понятно пользователю

10

Аналитика

Логи

Кто платит, кто уходит

Контроль бизнеса

❗Не забываем:
лимит до оплаты (иначе сожгут бюджет)
сообщение, а не ошибка («доступ ограничен»)
fallback, если AI не отвечает
отложенная активация тарифа (не мгновенно)

✅ Ошибки при связке AI Studio + Cursor (и как их чинить)

Ошибка

Где возникает

Почему происходит

Как исправить

Как правильно

AI логика ≠ код

Экспорт

Не зафиксирован сценарий

Описать flow словами

Сначала логика

Нет формата ответа

AI Studio

Свободный текст

JSON / schema

Структура

Ключи в коде

Cursor

Хардкод

.env

Безопасность

Нет лимитов

Backend

Прямые вызовы AI

Rate-limit

Контроль затрат

UI не готов

Frontend

Cursor генерит «скелет»

Доработать UX

Продукт

Ошибка = краш

API

Нет try/catch

Обработка ошибок

Стабильность

Нет состояния загрузки

UI

Забыли UX

Loader

Пользователь понимает

Cursor «фантазирует»

Код

Слабое ТЗ

Чёткое ТЗ

Предсказуемость

Нет теста вручную

Финал

Доверие ИИ

Прогнать сценарии

Качество

Нет деплоя

Финал

«Потом»

Vercel / Render

Онлайн продукт

Главное правило:
AI Studio — думаем.
Cursor — собираем.
Продакшн — проверяем руками.
6 МОДУЛЬ

Базы данных, API, интеграция

Урок1.
Базы данных без SQL.
Цель:
Понимать, где хранить данные, как подключать БД без SQL,
и уметь связать UI → AI → БД → результат без бэкенд-разработчика.

  1. Зачем вообще база данных в AI-приложении
Если коротко и по-честному:
  • без БД нет пользователей
  • без БД нет истории запросов
  • без БД нет лимитов
  • без БД нет подписок
  • без БД нет бизнеса
AI не хранит данные.
Он только обрабатывает.
Всё остальное — делает база данных.

2.Какие задачи решают no-SQL базы (на практике)

Задача

Реальный пример

Пользователи

логин, email, тариф

Запросы

что пользователь спрашивал

Результаты AI

тексты, ответы, файлы

Лимиты

сколько запросов осталось

Оплаты

статус подписки

Логи

ошибки, падения, злоупотребления



3. Обзор платформ (без воды)

Платформа

Когда использовать

Почему

Baserow

MVP, прототип

Простой, open-source

Airtable

Контент, CRM

Удобный UI

Supabase

Продакшн

Auth + DB + API

Firebase

Веб + мобайл

Реалтайм

Directual DB

Сложная логика

Российский backend

Nocodez DB

Простые сервисы

Быстро и дёшево


Российские платформы
Directual DB
  • полноценный backend
  • сложные сценарии
  • встроенная логика
Nocodez DB / КодБезКода
  • быстрые MVP
  • простые CRUD
  • минимум настроек

4. Главное отличие (чтобы не путаться)

Платформа

Хранилище

Auth

API

Продакшн

Airtable

✔

❌

✔

⚠️

Baserow

✔

❌

✔

⚠️

Supabase

✔

✔

✔

✔

Firebase

✔

✔

✔

✔

Directual

✔

✔

✔

✔



5. Практика: создаём БД для AI-приложения (универсально)
Кейс: AI-сервис с личным кабинетом

Шаг

Что делаем

Где

Куда заходить / что нажимать

Что должно получиться

1

Создаём проект

Supabase

New Project

Пустая БД

2

Таблица users

DB

Create Table

user_id, email

3

Таблица requests

DB

Create Table

prompt, result

4

Таблица limits

DB

Create Table

used, max

5

Связи

DB

user_id → FK

Логика связей

6

API доступ

Settings

API Keys

URL + key

7

Проверка

Table view

Insert row

Данные пишутся



Как подключить БД к AI и UI (без кода)

Действие

Где

Что подключаем

Как

Результат

Получить API

Supabase

REST API

Copy endpoint

Доступ

Подключить UI

WeWeb / FlutterFlow

API

REST Call

Чтение

Подключить AI

Backend / AI Studio

DB

Save result

Хранение

Считать лимиты

Backend

limits table

Before AI call

Защита

Сохранять ответы

Backend

requests

After AI

История


Что хранить в БД сразу (часто забывают)

Что

Почему важно

user_id

вся логика от него

created_at

аналитика

тариф

монетизация

лимиты

защита бюджета

ошибки AI

стабильность

source

откуда пришёл


Важный момент:
❌ Не храни AI-ключи в БД
❌ Не делай прямые запросы из клиента
✅ Всегда: UI → Backend → AI → DB
Это обязательное правило продакшна, даже для MVP.


✅ Типовая структура базы данных для AI-приложений
(чтобы не переделывать через месяц)
Этот — шаблон мышления.
Бери его и адаптировать под любой AI-сервис: чат, генератор, помощник, SaaS.
Таблица. Универсальная структура БД для AI-продукта

Таблица

Поле

Тип

Зачем нужно

Частая ошибка

users

id

uuid

идентификатор

email как id

users

email

string

логин

без уникальности

users

plan

enum

тариф

хранить в коде

users

created_at

timestamp

аналитика

не хранить

requests

id

uuid

запрос

автоинкремент

requests

user_id

uuid

связь

без FK

requests

prompt

text

ввод

теряется

requests

result

text

ответ AI

не сохраняют

requests

tokens

int

контроль

не считают

limits

user_id

uuid

лимиты

глобальные

limits

used

int

учёт

не обновляют

limits

max

int

ограничение

хардкод

errors

message

text

лог

нет логов

errors

source

string

откуда ошибка

всё в одном поле

Что в итоге:
база готова к лимитам, оплате, аналитике
легко масштабируется
подходит для Supabase / Firebase / Directual

✅ Проверка: готова ли база данных к продакшну
(Production-чек до запуска)
Это фильтр перед публикацией.
Если вы прошли его — приложение не развалится в первый день.
Таблица. Чек-лист готовности БД AI-приложения

Проверка

Как проверить

Где

Что должно быть

Есть user_id

Открыть users

DB

UUID

Есть связи

Проверить FK

DB

user_id → requests

Лимиты считаются

Тестовый запрос

Backend

used +1

Ответ AI сохраняется

Сделать запрос

DB

result заполнен

Ошибки пишутся

Сломать запрос

DB

запись в errors

Нет ключей в клиенте

DevTools

Browser

пусто

API закрыт

Проверить RLS

Supabase

доступ по ролям

Можно удалить юзера

Delete

DB

cascade

Данные не теряются

Refresh

UI

всё на месте

Готово к оплате

plan есть

users

enum

Что в итоге:
база не учебная, а рабочая
можно добавлять платежи
можно масштабировать пользователей
Урок 2.
Работа с API.
После этого урока вы:
  • понимаете, что такое API и зачем оно нужно
  • умеете делать своё API
  • умеете подключать внешние сервисы
  • можете собрать рабочую интеграцию без кода через Make / Zapier / Albato
  • не путаетесь в токенах, ключах, методах и форматах

1. Что такое API — по-человечески
API — это договор между системами.
Одна система говорит:
«Если ты пришлёшь запрос вот такого вида — я отвечу вот так».
Важно:
  • API — это не код,
  • API — это интерфейс доступа к логике и данным.
Простой пример
  • UI: кнопка «Сгенерировать»
  • API: запрос → AI → ответ
  • БД: сохранение результата

2. Типы API, с которыми мы реально работаем

Тип API

Где используется

Пример

Собственное API

Свой backend

запросы к БД

Внешнее API

Чужие сервисы

AI, оплата

Webhooks

События

«платёж прошёл»

No-code API

Платформы

Supabase, Directual

В курсе мы не уходим в REST vs GraphQL глубоко,
нам важен результат и запуск.

3. Собственное API (база для любого приложения)
Что значит «сделать своё API»
Это значит:
  • создать endpoint
  • определить что он принимает
  • определить что он возвращает
Минимальный набор эндпоинтов для AI-приложения:
  • /login
  • /me
  • /generate
  • /history
  • /limits

Таблица 1. Структура собственного API (MVP)

Endpoint

Метод

Что делает

Что принимает

Что возвращает

/login

POST

авторизация

email

token

/me

GET

профиль

token

user

/generate

POST

AI-запрос

prompt

result

/history

GET

история

token

список

/limits

GET

лимиты

token

used / max

Что часто забывают:
лимиты
сохранение истории
токен, а не user_id в клиенте


4. Подключение внешних API (AI, сервисы, оплата)
Типовой сценарий
  1. Получаем API-ключ
  2. Храним его только на backend
  3. Отправляем запрос
  4. Получаем ответ
  5. Обрабатываем ошибки

Таблица 2. Подключение внешнего API (шаг за шагом)

Шаг

Куда идти

Что делать

Результат

1

Сервис

Получить API key

ключ

2

Backend

Добавить env

ключ скрыт

3

Endpoint

Описать запрос

POST

4

Логика

Передать данные

prompt

5

Ответ

Распарсить

text

6

БД

Сохранить

history

7

UI

Показать

результат

Критично:
Никогда не вызываем внешний API напрямую из браузера.


5. Интеграции без кода: когда и зачем
Когда нужен Make / Zapier / Albatoбыстро
  • MVP
  • автоматизация
  • интеграция с SaaS
Когда НЕ нужен
  • высокая нагрузка
  • сложная логика
  • кастомные ограничения

6. Make / Zapier / Albato — кто есть кто

Платформа

Лучше для

Регион

Make

гибкие сценарии

глобально

Zapier

простота

глобально

Albato

РФ + СНГ

🇷🇺

Integral

сложные бизнес-потоки

🇷🇺


Таблица 3. Типовая интеграция через Make (AI-сценарий)

Шаг

Где

Действие

Что получается

1

Make

Создать Scenario

пустая схема

2

Trigger

Webhook

вход

3

Action

AI API

генерация

4

Action

DB

сохранение

5

Action

UI / Email

ответ

6

Test

Run once

результат



7. Webhooks — важнее, чем кажется
Webhook = входящее событие.
Пример:
  • пользователь оплатил
  • сервис прислал webhook
  • мы обновили тариф

Таблица 4. Webhook-сценарий (оплата → доступ)

Событие

Источник

Что делаем

Где

payment.success

платёжка

проверить

backend

validate

backend

проверить сигнатуру

API

update

DB

plan = paid

users

notify

UI

доступ открыт

frontend



8. Ошибки, которые убивают проекты (и я их закрываю)

Ошибка

Почему плохо

Как правильно

API-ключ в UI

утечка

backend

Нет лимитов

перерасход

limits table

Нет логов

не отладить

errors

Нет таймаута

зависания

timeout

Нет fallback

плохой UX

сообщение



✍ Практика: (обязательная)
Задание:
Сделать API-цепочку
кнопка → API → AI → БД → ответ
Результат:
  • кнопка работает
  • запрос уходит
  • ответ сохраняется
  • пользователь видит результат

✅ Типовой API-контракт для AI-приложения (Production-ready)
Этот шаблон мышления:
как сразу проектировать API так, чтобы:
  • подключать AI,
  • считать лимиты,
  • масштабироваться,
  • не переписывать всё через месяц.
Таблица 1. API-контракт AI-приложения (MVP → Scale)

Эндпоинт

Метод

Назначение

Входные данные

Выход

Важно учесть

/auth/login

POST

вход

email / provider

token

JWT / срок жизни

/auth/me

GET

профиль

token

user

роли

/ai/request

POST

AI-запрос

prompt, mode

task_id

async

/ai/status

GET

статус

task_id

pending / done

polling

/ai/result

GET

результат

task_id

text

кеш

/usage/check

GET

лимиты

token

used / max

перед AI

/usage/log

POST

лог

tokens

ok

аналитика

/errors/log

POST

ошибки

context

saved

debug

/billing/status

GET

тариф

token

plan

freemium

/webhook/*

POST

события

payload

200

verify

Что даёт:
понимает, какие API вообще нужны
не путается, что делать дальше
может реализовать это:
  • в Supabase
  • в Directual
  • в Make / backend

✅ Универсальный сценарий интеграции через Make / Albato (AI + БД + лимиты)
Это шаблон автоматизации, который можно:
  • повторять,
  • адаптировать,
  • использовать в любом проекте.
Таблица 2. Production-сценарий интеграции (без кода)

Шаг

Инструмент

Действие

Что подключаем

Результат

1

Webhook

Приём запроса

UI / App

старт

2

DB

Проверка пользователя

Supabase

ok / deny

3

DB

Проверка лимита

usage table

осталось

4

Router

Условие

if limit > 0

ветка

5

AI API

Генерация

Google AI / GPT

ответ

6

DB

Сохранение

history

log

7

DB

Списание лимита

usage

-1

8

UI

Ответ пользователю

JSON

результат

9

Error

Fallback

message

retry

10

Log

Ошибки

table

анализ

Урок 3.
Интеграция ИИ в приложение.
Цель:
Научиться:
  • подключать AI-модели через API,
  • работать с Gemini, OpenAI, GigaChat, YandexGPT,
  • собирать собственные AI-модули:
-чат,
-анализ,
-генерацию,
  • управлять ошибками и лимитами.
После этого урока вы можете собрать AI-движок любого сервиса.

1. Как вообще работает AI-интеграция
Перед практикой — главное понимание.

Любой AI-сервис работает по схеме:
Пользователь → Приложение → API → Модель → Ответ → Пользователь

Ты никогда не работаешь с моделью напрямую.
Ты работаешь через API-запрос.

Таблица: Как выглядит AI-интеграция в реальности

Элемент

Что это

Где находится

Зачем нужно

API-ключ

Твой доступ

В аккаунте сервиса

Авторизация

Endpoint

Адрес модели

Документация

Куда слать запрос

Prompt

Текст запроса

В коде / no-code

Что спрашиваем

Response

Ответ AI

JSON

Что показываем

Backend

Сервер

Server / Cloud

Безопасность

Важно:
AI-запросы всегда идут через сервер.
Никогда — напрямую из браузера.

2. Подключение Gemini API (Google AI Studio)
Gemini — основной AI-движок экосистемы Google.

Таблица: Подключение Gemini API

Шаг

Куда идти

Что нажать

Что сделать

Результат

1

ai.google.dev

Sign in

Войти

Аккаунт

2

Google AI Studio

API Keys

Создать ключ

API Key

3

Project

Settings

Включить API

Доступ

4

Backend

Env

Сохранить ключ

Безопасность

5

Код / No-code

HTTP Request

Настроить

Запрос работает


Пример логики запроса
POST https://generativelanguage.googleapis.com/v1/models/gemini:generateContent
Headers: Authorization
Body: prompt

AI Studio сам даёт готовые примеры — их можно копировать.

3. Подключение OpenAI / GigaChat / YandexGPT
Все эти сервисы работают по одной логике.
Меняется только:
  • адрес,
  • формат запроса,
  • способ оплаты.
Таблица: Сравнение AI-платформ

Платформа

Где брать ключ

Плюсы

Минусы

Когда использовать

OpenAI

platform.openai.com

Лучшее качество

Цена

Международные проекты

Gemini

AI Studio

Интеграция с Google

Экосистема

Web/No-code

GigaChat

Sber Cloud

Русский рынок

Закрытость

РФ

YandexGPT

Yandex Cloud

Интеграция

Ограничения

РФ SaaS


Таблица: Универсальная схема подключения

Шаг

Действие

Где

Итог

1

Регистрация

Платформа

Аккаунт

2

Получить ключ

Dashboard

API Key

3

Включить биллинг

Billing

Оплата

4

Сохранить ключ

Env / Secrets

Безопасность

5

Подключить API

Backend / No-code

Работа



4. Создание AI-модуля «Чат»
Чат — самый популярный модуль.

Таблица: Чат-модуль — пошагово

Шаг

Где

Что сделать

Что получится

1

UI

Поле ввода

Пользователь пишет

2

UI

Кнопка Send

Отправка

3

Backend

API-запрос

Запрос в AI

4

Backend

Обработка

JSON

5

UI

Вывод

Ответ


Архитектура
Frontend → Backend → AI → Backend → Frontend

Что часто забывают
  • хранить историю диалога,
  • ограничивать длину,
  • фильтровать ввод.
Добавляй это сразу.

5. Создание AI-модуля «Анализ»
Примеры:
  • анализ текста,
  • разбор отзывов,
  • классификация,
  • поиск проблем.

Таблица: Модуль анализа

Этап

Действие

Пример

Ввод

Текст

Отзыв

Prompt

Инструкция

«Проанализируй»

AI

Запрос

API

Ответ

JSON

Структура

UI

Отчёт

Таблица


Пример prompt
Проанализируй текст.
Выведи:
- тональность
- ключевые темы
- проблемы

6. Создание AI-модуля «Генерация»
Используется для:
  • текстов,
  • постов,
  • описаний,
  • сценариев,
  • писем.

Таблица: Генератор контента

Шаг

Что делает

Где

1

Пользователь задаёт тему

UI

2

Формируется prompt

Backend

3

AI генерирует

API

4

Ответ сохраняется

DB

5

Показывается

UI

Важно
Всегда добавляй:
  • лимит длины,
  • фильтр токсичности,
  • повторную генерацию.

7. Мини-практика: один AI-модуль от А до Я
Собираем: AI-консультанта

Таблица: Практика «AI-консультант»

Шаг

Действие

Где

Результат

1

Создать форму

UI

Ввод вопроса

2

Подключить API

Backend

Доступ

3

Настроить prompt

Backend

Контекст

4

Обработать ответ

Backend

JSON

5

Сохранить

DB

История

6

Показать

UI

Ответ

Ты получаешь:
Рабочий AI-модуль
Историю запросов
Контроль ошибок
Масштабируемость

8. Управление ошибками и лимитами (то, что часто забывают)
Это критично для продакшена.

Таблица: Контроль AI-запросов

Проблема

Решение

Где

Перерасход

Rate-limit

Backend

Timeout

Retry

Server

Ошибка API

Fallback

Logic

Нет денег

Limit

Billing

Сбой

Сообщение

UI

Обязательно добавь
  • максимум запросов в день,
  • максимум токенов,
  • автоотключение.
Без этого сервис «сгорает».

9. Универсальный шаблон AI-модуля
Используй в любом проекте:

Таблица: Шаблон интеграции

Компонент

Что внутри

UI

Форма + кнопка

Backend

API wrapper

Prompt

Шаблон

DB

История

Guard

Лимиты

Monitor

Логи

Скопировал → адаптировал → готово.

Как сделать лучше (экспертный совет)
Если хочешь уровень выше 90% сервисов:
Добавь:
✅ мульти-модели (fallback)
✅ кэш ответов
✅ персонализацию
✅ память пользователя
✅ обучение на данных
Это делает продукт «умным», а не просто чатиком.

Безопасная интеграция AI-моделей (Production Ready)
Чтобы ты не слил ключи, не ушёл в минус и не положил сервис.

Шаг

Что делаем

Где

Что нажимать / настраивать

Что должно получиться

1

Создать backend

Vercel / Replit / Server

New Project

Сервер

2

Добавить переменные

Settings → Environment

Add Secret

API Key скрыт

3

Создать proxy API

Backend

/api/ai

Свой endpoint

4

Прописать лимиты

Middleware

rate-limit

Ограничения

5

Включить логи

Monitoring

Enable logs

История

6

Настроить fallback

Logic

try/catch

Резерв

7

Ограничить фронт

Frontend

Only backend

Безопасность

8

Проверить утечки

DevTools

Network

Нет ключей

9

Включить алерты

Billing

Alerts

Контроль денег

10

Тест нагрузки

Load Test

Run

Устойчивость

Итог:
✔ не храним ключи в браузере
✔ не теряем деньги
✔ защищены от ботов
✔ готовы к масштабированию
Это уровень SaaS-продукта, а не хобби-проекта.

Итог урока:
Теперь ты умеешь:
✔ Подключать любые AI-модели
✔ Делать чат / анализ / генерацию
✔ Управлять расходами
✔ Защищать ключи
✔ Масштабировать систему
Урок 3.1.
Дополнительно.
AI-модуль с памятью + оплатой

Шаг

Что делаем

Где

Что подключаем

Результат

1

Авторизация

Supabase / Firebase

Auth

Пользователи

2

Счётчик запросов

DB

requests_count

Учёт

3

Тарифы

Stripe / ЮKassa

Plans

Оплата

4

Проверка доступа

Backend

Middleware

Контроль

5

Память диалога

DB

history table

Контекст

6

Персонализация

Prompt

user profile

Качество

7

Кэш ответов

Redis / DB

cache

Экономия

8

Ограничения

Logic

max queries

Защита

9

Сообщения

UI

Modals

UX

10

Аналитика

GA / Mixpanel

Events

Рост

Как работает эта схема
Пользователь → Авторизация
↓
Проверка тарифа
↓
Память + AI
↓
Кэш
↓
Ответ

Универсальный шаблон AI-модуля для любого приложения (Production-ready)
готовый каркас, который можно копировать из проекта в проект
(чат, анализ, генерация — не важно).

Блок

Что именно делаем

Где реализуем

Что должно получиться

UI

Поле ввода + кнопка

Frontend / No-code

Пользователь вводит запрос

Pre-check

Проверка лимитов

Backend / Logic

Запрос не уходит, если лимит исчерпан

Prompt Builder

Сбор промпта по шаблону

Backend

Стандартизированный запрос

AI Request

Вызов API модели

Backend

Ответ от модели

Error Handler

Обработка ошибок

Backend

Нет «падений»

Response Parser

Разбор JSON

Backend

Чистый результат

Save Result

Сохранение в БД

DB

История запросов

UI Output

Вывод результата

Frontend

Пользователь видит ответ

Analytics

Логирование

DB / Logs

Контроль затрат


Мини-шаблон промпта (рекомендуемый)

Часть

Содержание

Роль

«Ты — эксперт по …»

Контекст

«Пользователь делает …»

Задача

Чёткое действие

Формат

Что вернуть (список, JSON, текст)

Ограничения

Длина, стиль, язык

Почему это важно:
без шаблона промптов сервис становится нестабильным и «плывёт» по качеству.

Контроль затрат, лимиты и защита AI-сервиса (то, что спасает бюджет)
Это критически важно, без этого сервисы:
  • «сгорают» по деньгам,
  • ловят злоупотребления,
  • падают под нагрузкой.

Что контролируем

Как реализовать

Где

Итог

Кол-во запросов

Счётчик

Backend / DB

Нет abuse

Токены

Ограничение

Backend

Контроль бюджета

Частота

Rate-limit

Backend

Защита

Ошибки API

Try/Catch

Backend

Стабильность

Таймауты

Timeout

Backend

Нет зависаний

Недоступность AI

Fallback

Backend

UX сохранён

Уведомление

Сообщение пользователю

UI

Понятный интерфейс


Что показывать пользователю (UX)

Ситуация

Сообщение

Лимит исчерпан

«Лимит запросов достигнут»

AI недоступен

«Сервис временно недоступен»

Ошибка

«Попробуйте позже»

Успех

Результат + сохранение

Важно:
пользователь никогда не должен видеть «500 error».

Мини-чеклист продакшена

Проверка

Да / Нет

API-ключ не в клиенте

☐

Есть лимит запросов

☐

Есть обработка ошибок

☐

Есть логирование

☐

Есть fallback

☐

7 МОДУЛЬ

Внедрение ИИ в приложения

Урок 1.
Готовые AI-виджеты: подключение без кода.
Цель.
Научиться:
  • подключать готовые AI-виджеты без разработки,
  • внедрять рекомендации, поиск, анализ,
  • усиливать продукт за часы, а не недели,
  • не ломать архитектуру проекта.
После урока вы умеете быстро «прокачивать» сервис ИИ-функциями.

1. Что такое AI-виджеты и зачем они нужны
AI-виджет — это:
Готовый AI-модуль, который:
  • уже обучен
  • уже оптимизирован
  • уже имеет UI
  • подключается по ссылке / API
Примеры:
  • AI-чат поддержки,
  • умный поиск,
  • рекомендации товаров,
  • анализ текстов,
  • автоответы.
👉 Это самый быстрый путь к AI-продукту.

Таблица: Когда использовать виджеты, а когда своё AI

Ситуация

Виджет

Свой AI

MVP

✅

❌

Тест идеи

✅

❌

Стартап

✅

⚠️

Крупный SaaS

⚠️

✅

Уникальная логика

❌

✅



2. Где брать готовые AI-виджеты
Основные источники

Таблица: Источники AI-виджетов

Источник

Тип

Для чего

Google AI Studio

AI widgets

Анализ, чат

Dify

AI Apps

Ассистенты

Tilda AI

Web widgets

Контент

Bubble plugins

No-code

SaaS

Make AI blocks

Automation

Интеграции

Bot platforms

Chatbots

Поддержка

Совет: сначала ищи виджет, потом думай о кастоме.

3. Подключение AI-виджета без кода (универсальная схема)
Почти везде схема одинаковая.

Таблица: Универсальное подключение

Шаг

Где

Что нажать

Что сделать

Результат

1

Платформа

Create widget

Создать

Виджет

2

Settings

API / Token

Получить ключ

Доступ

3

Embed

Copy code

Скопировать

Код

4

Сайт / App

HTML block

Вставить

Визуал

5

Test

Preview

Проверить

Работает

Работает для Webflow, Tilda, WeWeb, Bubble, Notion.

4. Внедрение AI-рекомендаций
Рекомендации = деньги.
Используются в:
  • маркетплейсах,
  • обучении,
  • сервисах,
  • SaaS.
Таблица: AI-рекомендации — внедрение

Шаг

Действие

Где

Результат

1

Подключить виджет

Platform

Модуль

2

Передать данные

API / DB

История

3

Настроить правила

Settings

Логика

4

Вставить UI

Frontend

Блок

5

Тестировать

Preview

Персонализация

Важно:
Без данных рекомендации — мусор.
Минимум: 50–100 действий пользователя.

5. AI-поиск по сайту и базе
AI-поиск = конкурентное преимущество.
Он понимает смысл, а не ключевые слова.

Таблица: Подключение AI-поиска

Шаг

Что делаем

Где

Итог

1

Индексация

AI Platform

Данные

2

Настройка источников

Settings

База

3

Подключение API

Backend/No-code

Доступ

4

UI поле поиска

Frontend

Ввод

5

Результаты

UI

Ответ

Что можно искать:
документы,
БД,
курсы,
CRM,
файлы.

6. AI-анализ: отзывы, тексты, данные
Самый востребованный B2B-функционал.

Таблица: Модуль анализа

Этап

Действие

Пример

Ввод

Данные

Отзывы

Prompt

Инструкция

Анализ

AI

Обработка

API

Output

Структура

JSON

UI

Отчёт

Таблица

Примеры задач:
анализ негатива,
выявление проблем,
оценка качества,
классификация.

7. Мини-практика: внедряем AI-ассистента за 40 минут
Создаём: виджет поддержки

Таблица: Практика «AI Support Widget»

Шаг

Где

Действие

Что получится

1

AI Platform

Создать чат

Модуль

2

Settings

Настроить prompt

Контекст

3

API

Получить ключ

Доступ

4

Embed

Скопировать код

Вставка

5

Сайт

HTML Block

Виджет

6

Test

Задать вопрос

Ответ

Результат
У тебя есть:
AI-поддержка
История диалогов
Контроль качества
Готовность к монетизации

8. Частые ошибки при работе с виджетами
Таблица: Ошибки и решения

Ошибка

Почему

Как исправить

Нет контекста

Плохой prompt

Описать роль

Дорогие ответы

Нет лимитов

Ограничить

Глупые ответы

Нет данных

Подключить БД

Сбои

Нет fallback

Резерв

Медленно

Нет кэша

Кэшировать



9. Шаблон внедрения AI-виджета (копируй в проект)
Таблица: Шаблон

Компонент

Что внутри

Widget

AI-модуль

Prompt

Контекст

Limits

Ограничения

DB

Логи

UI

Виджет

Monitor

Аналитика

Используй этот шаблон во всех проектах.

Как сделать лучше, чем у большинства
Экспертный уровень:
Добавь:
✅ персонализацию
✅ память пользователя
✅ связку с CRM
✅ обучение на данных
✅ омниканальность
Тогда виджет станет продуктом.

Ты теперь можешь:
усиливать любой проект ИИ
продавать AI-функции
масштабировать сервис
Урок 2.
Создание AI-функций с помощью Gemini.
Цель.
Научиться:
  • создавать собственные AI-модули на Gemini,
  • собирать чат-ботов, генераторы, анализаторы,
  • работать с файлами,
  • внедрять AI в реальные бизнес-процессы,
  • масштабировать AI-функции.
После урока студент умеет строить ядро AI-продукта.

1. Как Gemini используется в продакшене
Gemini — это не «чат», а платформа моделей и агентов.
В продакшене Gemini используют для:
  • диалоговых систем
  • автоматизации процессов
  • анализа данных
  • обработки документов
  • интеллектуального поиска

Таблица: Gemini в реальных сервисах

Сфера

Применение

Пример

SaaS

AI-ассистент

Поддержка

EdTech

Проверка работ

Курсы

FinTech

Анализ отчётов

Банки

HR

Скрининг CV

Рекрутинг

E-commerce

Описания

Магазины



2. Подготовка среды для работы с Gemini
Перед созданием функций всё должно быть готово.

Таблица: Подготовка Gemini

Шаг

Где

Действие

Результат

1

Google AI Studio

Войти

Аккаунт

2

API Keys

Создать ключ

Доступ

3

Project Settings

Включить API

Активация

4

Billing

Привязать карту

Лимиты

5

Env

Сохранить ключ

Безопасность

Ключ всегда храним в переменных окружения.

3. Создание AI-чат-бота на Gemini
Чат-бот — основа 80% AI-сервисов.

Таблица: Чат-бот — пошагово

Шаг

Где

Что делаем

Итог

1

UI

Поле ввода

Вопрос

2

Backend

Формируем prompt

Контекст

3

Backend

Запрос Gemini

Ответ

4

Backend

Сохраняем

История

5

UI

Вывод

Диалог

Шаблон системного промпта:
Ты — AI-консультант сервиса X.
Отвечай кратко.
Используй данные пользователя.
Не выдумывай.

4. Генераторы контента на Gemini
Используются для:
  • постов,
  • описаний,
  • писем,
  • сценариев,
  • презентаций.

Таблица: Генератор контента

Этап

Действие

Где

Ввод

Тема

UI

Prompt

Шаблон

Backend

Генерация

API

Gemini

Проверка

Фильтр

Backend

Сохранение

DB

История

Обязательно добавляй:
  • ограничение длины,
  • стиль,
  • запрет воды.

5. Анализ данных через Gemini
Gemini умеет работать со структурой.
Примеры:
  • CSV,
  • JSON,
  • таблицы,
  • отчёты.
Таблица: AI-анализ данных

Шаг

Что делаем

Где

Результат

1

Загружаем файл

UI

Input

2

Парсим

Backend

Структура

3

Формируем prompt

Backend

Задача

4

Отправляем

API

Анализ

5

Визуализируем

UI

Отчёт

Пример запроса:
Проанализируй таблицу.
Найди аномалии.
Сделай выводы.

6. Обработка файлов с помощью Gemini
Gemini поддерживает:
PDF
DOCX
изображения
презентации

Таблица: Обработка файлов

Шаг

Действие

Где

Итог

1

Upload

UI

Файл

2

Хранение

Cloud

Ссылка

3

Отправка

Backend

AI

4

Обработка

Gemini

Результат

5

Вывод

UI

Ответ

Примеры задач:
извлечение текста,
резюме документа,
поиск ошибок,
классификация.

7. Универсальный AI-модуль на Gemini (ядро сервиса)
Таблица: Архитектура AI-функции

Компонент

Назначение

UI

Ввод

API Layer

Запрос

Prompt Engine

Контекст

Gemini

Модель

Parser

Ответ

Storage

История

Guard

Лимиты

Используется для всех типов функций.

8. Мини-практика: AI-сервис «Аналитик документов»
Собираем полноценную функцию.

Таблица: Практика

Шаг

Где

Что делаем

Результат

1

UI

Загрузка PDF

Input

2

Backend

Парсинг

Текст

3

Backend

Prompt

Анализ

4

Gemini

Обработка

Отчёт

5

DB

Сохранение

История

6

UI

Отображение

Ответ

Итог: готовый B2B-инструмент.

9. Контроль качества и затрат
Таблица: Продакшн-настройки

Параметр

Настройка

Max tokens

Ограничить

RPM

Rate-limit

Cache

Включить

Fallback

Добавить

Logs

Хранить

Без этого — не запускай.

Как выйти на уровень AI-продукта
Экспертный уровень:
Добавь:
✅ агентность
✅ контекст из БД
✅ RAG
✅ пользовательские профили
✅ автообучение
Тогда у тебя не «чат», а платформа.

Итог.
Теперь ты умеешь:
✔ Делать чат-ботов
✔ Генераторы
✔ Анализаторы
✔ Работа с файлами
✔ Масштабируемые AI-модули

Ты готов создавать:
SaaS
AI-помощников
B2B-сервисы
Корпоративные решения
Урок 2.1.
Кейс: «Создание собственного AI-ассистента на Gemini (под ключ)».
Кейс: «Создание собственного AI-ассистента на Gemini (под ключ)»
Цель кейса:
Собрать персонального AI-ассистента для бизнеса / проекта / экспертизы, который:
  • знает твой контекст
  • работает 24/7
  • подключён к данным
  • масштабируется
  • можно монетизировать

Полная карта запуска AI-ассистента

№

Этап

Платформа / Где

Куда заходить

Что нажимать

Что писать / настраивать

Контрольные вопросы

1

Определение задачи

Notion / Docs

Новый документ

Create / New

«Мой ассистент помогает с…»

Какую проблему решает? Для кого?

2

Архитектура

Miro / Draw.io

Board

Create board

Схема: UI → API → Gemini → DB

Где хранится память?

3

Регистрация Gemini

Google AI Studio

aistudio.google.com

Sign in

Вход через Google

Аккаунт готов?

4

API-ключ

AI Studio

API Keys

Create key

Название проекта

Где храню ключ?

5

Backend

Replit / VPS / Railway

New project

Create app

Сервер с API

Где будет жить логика?

6

Хранение данных

Supabase / Firebase

New Project

Create DB

Таблицы: users, chats

Где память?

7

Интерфейс

Tilda / Webflow / BotFather

New page / Bot

Create

Форма чата

Как пользователь пишет?

8

Prompt Engine

Backend

Config

New file

Системный промпт

Какой стиль?

9

Системный промпт

Backend

prompt.txt

Edit

«Ты — эксперт в…»

Не врёт? Не болтает?

10

Контекст

Backend + DB

Context loader

Connect

История диалогов

Помнит ли прошлое?

11

Ограничения

Backend

Middleware

Add rules

Лимиты, фильтры

Защита есть?

12

Логика запросов

Backend

API route

POST /ask

Формат запроса

Структура понятна?

13

Интеграция Gemini

Backend

SDK / REST

Connect

API call

Ответ стабильный?

14

Обработка ответа

Backend

Parser

Parse JSON

Очистка текста

Нет мусора?

15

Логирование

DB / Logs

Logs panel

Enable

Сохранять диалоги

Видно ошибки?

16

Тестирование

Browser / Postman

/test

Send

Тестовые вопросы

Ломается?

17

Обучение стилю

Prompt + Data

Training

Add examples

Примеры ответов

Похож на тебя?

18

Файлы (опц.)

Cloudinary / S3

Storage

Upload

Подключение PDF

Работает?

19

Интеграции

Make / Zapier

New scenario

Connect apps

CRM / Telegram

Автоматизация?

20

Авторизация

Auth0 / Supabase Auth

Auth panel

Enable

Email / OAuth

Защита есть?

21

Монетизация

Stripe / ЮKassa

New product

Create plan

Подписка / лимиты

Деньги идут?

22

Лимиты

Backend

Billing

Set limits

Tokens / сутки

Убытков нет?

23

Аналитика

GA / Amplitude

Dashboard

Add tracking

События

Кто пользуется?

24

UI-улучшения

Webflow / React

Editor

Edit

История, кнопки

Удобно?

25

Безопасность

Server

Security

Enable

CORS, HTTPS

Уязвимости?

26

Документация

Notion / GitHub

New doc

Create

Инструкция

Поймёт ли другой?

27

Публичный запуск

Domain / Hosting

DNS

Connect

Домен

Работает?

28

Поддержка

Helpdesk

Ticket system

Setup

FAQ

Кто отвечает?

29

Масштабирование

Cloud

Scaling

Auto-scale

Реплики

Выдержит нагрузку?

30

Развитие

Roadmap

Planning

Create

Новые функции

Что дальше?


Пример системного промпта для ассистента
Ты — персональный AI-ассистент проекта X.
Ты:
— помогаешь пользователям
— отвечаешь кратко
— опираешься на базу знаний
— не выдумываешь
— признаёшь незнание

Твоя цель — решать задачи клиента.

Примеры стартовых вопросов для настройки ассистента
❗обязательно:
О продукте
Для кого ассистент?
Какая главная боль?
В чём ценность?
О знаниях
Какие документы подключаем?
Какие данные важны?
Что запрещено?
О стиле
Формально / дружелюбно?
Коротко / подробно?
С юмором / строго?
О бизнесе
Бесплатно или платно?
Лимиты?
Апселлы?

Урок 3.
Создание собственного ИИ-помощника (мультиформат).
Цель:
В этом уроке ты научишься создавать полноценного AI-помощника как продукт, а не просто чат с ИИ.
Мы разберём:
  • как выбрать платформу под задачу,
  • как спроектировать логику ассистента,
  • как подключить память и инструменты,
  • как внедрить его в сайт или сервис,
  • как подготовить к масштабированию и монетизации.
После урока ты сможешь создавать ассистентов для:
  • бизнеса,
  • клиентов,
  • собственных проектов,
  • SaaS-сервисов.

Почему AI-помощник — это основа современных сервисов
Сейчас почти каждое успешное приложение содержит:
  • персонального помощника,
  • встроенный AI-интерфейс,
  • автоматизированную поддержку,
  • интеллектуальный поиск,
  • аналитику.
AI-помощник — это:
❌ не просто чат
✅ это интерфейс между пользователем и системой
Он:
  • понимает задачу,
  • управляет данными,
  • вызывает функции,
  • ведёт пользователя,
  • удерживает клиента.
По сути — это «умный менеджер» внутри продукта.

Архитектура современного AI-помощника
Прежде чем нажимать кнопки, нужно понимать структуру.

Любой профессиональный ассистент состоит из 5 уровней:
  • Интерфейс (где общается пользователь)
  • Модель ИИ (кто думает)
  • Память (что помнит)
  • Инструменты (что умеет делать)
  • Логика (как принимает решения)

Схема:
Пользователь → UI → AI → Инструменты → Данные → Ответ

Если нет хотя бы одного элемента — продукт слабый.

1. Ассистенты OpenAI — универсальная база
OpenAI — лучший вариант, когда нужен:
  • сложный функционал,
  • интеграция с кодом,
  • масштабирование.
Таблица 1. Создание ассистента в OpenAI (Assistants API / GPT Agents)

Шаг

Где

Куда заходить

Что нажимать

Что писать / настраивать

Контроль

1

OpenAI Platform

platform.openai.com

Sign in

Вход

Аккаунт активен

2

Dashboard

Assistants

Create Assistant

New

Создать

3

Модель

Settings

Model

GPT-4.1 / o4

Выбрать модель

4

Роль

Instructions

Edit

«Ты — эксперт…»

Логика понятна

5

Инструменты

Tools

Enable

Retrieval / Code

Включить

6

Память

Files

Upload

Docs, PDF

Данные загружены

7

Функции

Functions

Add

JSON API

Логика есть

8

API

Keys

Create

Key name

Скопировать

9

Backend

Replit / VPS

New project

Node/Python

Сервер

10

Подключение

Code

API call

client.beta.assistants

Работает

11

Тест

Playground

Run

Вопросы

Отвечает

12

Лимиты

Billing

Set

Budget

Контроль


2. Ассистенты GigaChat — работа с русским рынком
GigaChat нужен, если ты работаешь:
  • с российскими клиентами,
  • с гос/корпоративным сектором,
  • с локальными проектами.
Таблица 2. Создание ассистента в GigaChat Studio (Россия / СНГ)

Шаг

Где

Куда заходить

Что нажимать

Что вводить

Проверка

1

GigaChat Studio

studio.gigachat.ai

Войти

Авторизация

Вход

2

Проект

My Projects

New

Название

Создан

3

Ассистент

Assistants

Create

New bot

Есть

4

Контекст

Prompt

Edit

Роль

Адекватен

5

Источники

Data

Upload

Файлы

Подключены

6

Инструменты

Tools

Enable

Web/API

Активны

7

Логика

Scenarios

Add

Flow

Связи

8

API

Access

Generate

Token

Скопирован

9

Интеграция

Webhook

Setup

URL

Работает

10

Тест

Preview

Chat

Вопросы

Ответы

11

Экспорт

Deploy

Publish

Link

Доступен

12

Ограничения

Limits

Set

Tokens

Защита


3. Агенты Google AI Studio — агентный подход
Google AI Studio лучше всего подходит для:
  • многошаговых сценариев,
  • автоматизации,
  • аналитики.
Здесь ассистент — это агент с миссией.

Таблица 3. Создание AI-агента в Google AI Studio (Gemini Agents)

Шаг

Где

Куда

Кнопка

Действие

Результат

1

AI Studio

aistudio.google.com

Login

Войти

Аккаунт

2

Agents

Agents tab

Create

New agent

Создан

3

Model

Settings

Select

Gemini 2.x

Выбрана

4

Role

System

Edit

Инструкция

Роль

5

Memory

Context

Enable

History

Память

6

Files

Data

Upload

Docs

Подключены

7

API

Keys

Generate

Key

Есть

8

Tools

Plugins

Enable

Search, Code

Включены

9

Testing

Sandbox

Run

Prompts

Работает

10

Export

API

Copy

Snippet

Готов

11

Backend

Replit

Paste

Code

Подключён

12

Billing

Console

Limits

Budget

Контроль



4. Проектирование логики ассистента (самое важное)
Ошибка новичков:
«Сделал чат — готово».

Правильно:
Ассистент = сценарий + правила + границы.

Таблица: Проектирование логики

Элемент

Что это

Что задать

Цель

Зачем ассистент

Что он решает

Ограничения

Что нельзя

Запреты

Роли

Кто он

Позиционирование

Эскалация

Когда человек

Передача оператору

Лимиты

Ограничения

Токены/день

Урок 3.1.
Создание собственного ИИ-помощника (мультиформат).
Таблица. Развёртывание AI-помощника на сайте

Шаг

Платформа

Где

Кнопка

Что делать

Проверка

1

Хостинг

Vercel / Netlify

New project

Подключить репо

Онлайн

2

Backend

Railway

Deploy

Upload

Сервер

3

Frontend

Webflow / Tilda

Embed

HTML

Виджет

4

Widget

Chat UI

Add

Script

Встроен

5

API

Env

Add key

Paste

Работает

6

HTTPS

Domain

Connect

SSL

Безопасно

7

Auth

Supabase

Enable

Login

Вход

8

Limits

Backend

Middleware

Rate limit

Защита

9

Analytics

GA4

Add

ID

Статистика

10

Payment

Stripe

Connect

Plan

Оплата

11

Monitoring

Sentry

Enable

Token

Ошибки

12

Launch

DNS

Publish

Domain

Готово


5. Подготовка к продакшену
Почти все новички забывают эту часть.

Таблица: Продакшен-чеклист

Пункт

Проверка

Да/Нет

Rate-limit

Есть

⬜

Логи

Включены

⬜

Ошибки

Обрабатываются

⬜

Backup

Настроен

⬜

Мониторинг

Есть

⬜



✍ Практика: Создай собственного ассистента
Задание:
1️⃣ Выбери платформу
2️⃣ Определи роль
3️⃣ Настрой память
4️⃣ Подключи инструмент
5️⃣ Встрой на сайт

Таблица-план практики

Этап

Что сделать

Результат

Идея

Придумать кейс

Цель

Архитектура

Нарисовать схему

План

Сборка

Создать ассистента

MVP

Тест

Проверить

Ошибки

Публикация

Выложить

Продукт


✅ Полный практический кейс: AI-помощник для онлайн-курса

Этап

Действие

Где

Что нажимать

Что писать

Вопрос

Идея

Помощник студентам

Docs

New

Описание

Для кого?

Модель

Выбор Gemini

AI Studio

Select

Gemini 2

Хватит?

База

Материалы

Drive

Upload

PDF

Полные?

Агент

Создание

Agents

Create

Role

Понятно?

Backend

Сервер

Replit

New

Node.js

Работает?

UI

Чат

Tilda

Block

Widget

Удобно?

Оплата

Подписка

Stripe

Create

Plan

Цена?

Тест

Проверка

Browser

Chat

Вопросы

Ошибки?

Запуск

Публикация

Hosting

Deploy

Domain

Онлайн?

Рост

Аналитика

GA4

Connect

Events

Что улучшать?

8 МОДУЛЬ

Публикация и запуск

ОБНОВЛЕНИЯ в разработке...

Курс в процессе обновления, новые уроки будут появляться постепенно.
Отзывы Сертификаты Еще курсы

Получить сертификат об окончании курса
AI Web Creator

Отправьте заявку на получение сертификата
Ваш email
Ваше имя
Если ответ не пришел, обратитесь к администратору в Телеграм: администратор

Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности
Курсы Гайды Чек-листы /телеграм-канал для фрилансеров
Больше курсов и полезных советов в нашем телеграм-канале.

Автор курса AI Web Creator 2026г.

Степанец Н. И.
Made on
Tilda