В далеком 2013 году я опубликовал здесь статью "С камерой в облака". Она собрала 250 тыс. просмотров и, надеюсь, принесла реальную пользу.

К сожалению, так и не дописал тогда 3-ю часть, но сегодня решил вернуться с новой темой.

Уверен, что многие задавались вопросом: "Что реально можно создать с помощью ИИ без программирования?".

Кто-то из нас только думает об этом, кто-то пробовал делать демо или пет-проекты. За 6 месяцев я прошел этот путь до конца, построив 2 полноценных сервиса с базами данных, пользователями, оплатой и ИИ под капотом в одном из них.

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

Если кто-то из вас мечтает создать свой продукт, но не может решиться, копит бюджет или ищет инвесторов, этот цикл может изменить вашу жизнь.

Материал будет также полезен фаундерам с техническим складом ума, кто привык опираться на команду разработки, но старадает из-за сроков и стоимости реализации проектов.

История началась летом 2025 года, когда я обсуждал с DeepSeek идею, не покидающую меня 10 лет: социальную сеть предпочтений, где пользователи получают рекомендации на основе совпадения личных рейтингов (рестораны, отели, страны, хобби, и всё на свете). И, вдруг, он сказал:

Давай сделаем это. Лучше использовать next.js.

Через 3 месяца я презентовал продукт топ-менеджменту одной корпорации. А недавно довел до запуска еще один проект, лежавший в папке годами.

В этой серии я соберу весь полученный опыт, реальные промпты, настройки и подводные камни. Но прежде чем двигаться дальше, нужно ответить на самый важный вопрос:

А стоит ли вам вообще это пробовать?

Кратко - да, если вы ориентируетесь в этих понятиях:

• frontend

• backend

• базы данных

• HTML

• CSS

• JavaScript

• базовые концепции React

Базовое понимание есть? Переходите к следующей части.

Если эти термины звучат незнакомо, лучше разобраться сейчас. То, что увидите ниже, не покажется вам чем-то типа листания рилсов, но взвесьте - мне этот путь сэкономил около 30 млн. рублей и пару лет разработки, работы с подрядчиками, набора команды.

Frontend и Backend

Frontend — это часть вашего сервиса, которую видит пользователь:

• сайт в браузере

• мобильное приложение

• браузерное расширение

• любой интерфейс, где пользователь нажимает кнопки или читает информацию

Backend — это часть вашего сервиса, которая остается работать на серверах где-то в интернете.

Он отвечает за:

• обработку данных

• авторизацию пользователей

• работу с базой данных

Когда пользователь нажимает кнопку, frontend отправляет запрос backend-у. Backend обрабатывает запрос и возвращает ответ.

Это взаимодействие выглядит примерно так:

Пользователь → Frontend → Backend → База данных → Backend → Frontend → Пользователь

Что такое база данных

База данных хранит информацию, с которой работает приложение. Если вы пользовались Excel или Google Sheets, принцип очень похож. База данных — это набор таблиц. Каждая таблица похожа на обычную таблицу в Excel.

Например:

Таблица Пользователи

Таблица Статьи

В примере один пользователь может создавать много статей.

Такая простая структура связанных таблиц лежит в основе большинства систем. В вашем сервисе может быть 30-50 таблиц, даже если сейчас вам кажется, что их будет три.

Хорошая новость заключается в том, что ИИ-инструменты типа Cursor прекрасно проектируют базы данных и структурируют самые разные запросы к ним, поэтому всё, что вам нужно, это управлять количеством таблиц и столбцами в них.

Не очень хорошая новость - с фронтэндом (речь о нем ниже) ИИ работает хуже.

HTML — структура страницы

HTML определяет, что именно находится на странице:

• заголовки

• текст

• кнопки

• изображения

• контейнеры

Пример:

<div>
  <h1>Привет</h1>
  <p>Это параграф</p>
</div>

HTML-элементы образуют вложенную структуру, которая называется DOM.

div
 ├── h1
 └── p

Любая веб-страница в браузере — это по сути большое дерево элементов.

CSS — как всё выглядит

Если HTML отвечает за структуру, то CSS отвечает за внешний вид.

Он определяет:

• цвета

• шрифты

• отступы

• расположение элементов

Пример:

/* CSS класс для стиля заголовка */

.title {
  color: blue;
  font-size: 32px;
}

Применяется так:

<!-- HTML заголовок, использующий CSS класс выше -->

<h1 class="title">Привет</h1>

Несколько классов CSS

В CSS один элемент может иметь несколько классов:

<!-- кнопка с несколькими классами -->

<button class="button button-primary button-large">
  Отправить
</button>

Каждый класс отвечает за свою часть оформления.

/* радиус скругления углов кнопки */
.button {
  border-radius: 6px;
}

/* цвет надписи и фона */
.button-primary {
  background: blue;
  color: white;
}

/* размер кнопки (отсутпы от текста до границ) */
.button-large {
  padding: 16px 24px;
}

Это гибко, но в больших проектах стили могут начать запутываться.

Tailwind

Поэтому многие современные проекты используют Tailwind CSS.

Вместо больших CSS-файлов используются готовые utility-классы:

<button class="bg-blue-500 text-white px-6 py-3 rounded-lg">
  Submit
</button>

<!-- bg-blue-500 = синий фон -->
<!-- text-white = белый текст -->
<!-- px-6 = горизонтальный отступ -->
<!-- py-3 = вертикальный отступ -->
<!-- rounded-lg = сильно скругленные углы -->

Каждый класс — это маленькое правило.

Интересно, что AI-инструменты вроде Cursor обычно гораздо лучше генерируют интерфейсы именно с Tailwind, чем с обычным CSS.

Если явно не указать Cursor использовать Tailwind, он может начать вставлять стили прямо внутрь элементов:

<!-- намертво встроенный в кнопку стиль -->

<button style="background: blue; padding: 12px;">

Сначала это будет у вас работать. Но позже становится неудобно — любое изменение дизайна требует правки сотен мест в коде. А с CSS-классами можно изменить дизайн всего приложения, поменяв всего несколько общих стилей.

JavaScript и TypeScript

HTML определяет структуру страницы. CSS определяет как она выглядит. А JavaScript определяет поведение.

JavaScript позволяет интерфейсу реагировать на действия пользователя.

// когда пользователь нажимает кнопку, показываем сообщение

button.addEventListener("click", () => {
  alert("Hello!");
});

TypeScript — это, по сути, JavaScript с дополнительной системой типов.

JavaScript:

// простая функция, которая складывает два числа

function add(a, b) {
  return a + b;
}

TypeScript:

// та же функция, но с явными типами
// a и b должны быть числами
// функция возвращает число

function add(a: number, b: number): number {
  return a + b;
}

Большинство современных приложений используют TypeScript, потому что он предотвращает множество ошибок в крупных системах.

Почему мы будем использовать Next.js

В остальной части этой серии мы будем создавать примерное приложение с помощью Next.js. Next.js — это фреймворк, построенный поверх React. React сосредоточен на создании пользовательских интерфейсов. Next.js добавляет такие вещи, как:

• маршрутизация (routing)

• серверный рендеринг

• API-эндпоинты

• структуру проекта

• инструменты сборки

Вам не обязательно глубоко понимать внутреннее устройство Next.js. Но полезно понимать, как устроены React-приложения. К счастью, основные идеи очень просты. Нужно понять всего три вещи:

• components

• props

• hooks

React-компоненты

React-приложения строятся из компонентов. Компонент — это переиспользуемая часть интерфейса.

Например:

• кнопки

• навигационные панели

• блоки комментариев

• модальные окна

Пример компонента:

// простой React-компонент
// он отображает кнопку

function Button() {
  return <button>Click me</button>
}

Теперь его можно использовать где угодно:

<Button />
<Button />
<Button />

Крупные приложения превращаются в деревья компонентов, вложенных друг в друга.

Props

Props — это входные параметры, которые передаются в компонент:

// простой компонент кнопки
// он показывает текст, переданный в props.label

function Button(props) {
  return <button>{props.label}</button>
}

Использование:

// один и тот же компонент можно использовать с разными текстами

<Button label="Save" />
<Button label="Delete" />
<Button label="Cancel" />

Hooks

Hooks позволяют компонентам хранить состояние и реагировать на действия пользователя.

Пример:

// useState создаёт состояние внутри компонента
// "count" хранит текущее значение
// "setCount" — функция для его изменения

const [count, setCount] = useState(0)

Теперь компонент может изменять своё внутреннее состояние.

// при нажатии кнопки счётчик увеличивается на 1
// текст автоматически обновляется

<button onClick={() => setCount(count + 1)}>
  Clicked {count} times
</button>

Хуки делают компоненты интерактивными.

Резюме

Если вы никогда раньше не сталкивались с этим, я понимаю ваше чувство.

Но вам не нужно осваивать всё это на уровне профи. Нужно лишь понять сам принцип. Если у вас техническое мышление, и вы способны уловить эти идеи, путь становится гораздо проще.

Вместо того чтобы случайно просить AI что-то сгенерировать, вы сможете направлять его правильно. А это огромная разница.

Перед тем, как перейти ко второй части

Убедитесь, что вы примерно понимаете:

• разницу между frontend и backend

• базы данных как набор таблиц

• структуру HTML

• CSS-классы и стили

• поведение JavaScript

• React-компоненты, props и hooks

Что дальше?

Во второй части этой серии мы перейдём от теории к практике. Но прежде чем писать код, нужно принять ряд важных решений.

Как именно мы будем строить систему?

• какие инструменты использовать

• какая архитектура лучше работает с AI-разработкой

• какие решения могут создать проблемы в будущем

Вперед, на следующий уровень погружения