Договорись с ИИ. Часть 2 Реальные проекты, профессиональные практики и продвинутые возможности Claude Code

Короткая инвентаризация навыков

Прежде чем двигаться вперёд, полезно честно зафиксировать, что у вас уже есть в активе после первой книги. Скорее всего, это:

• умение установить и запустить Claude Code, ориентироваться в его текстовом интерфейсе;

• навык формулировать задачи достаточно подробно, чтобы получать предсказуемый результат;

• понимание базового цикла работы: задача → результат → проверка → уточнение;

• знакомство с git на уровне «сделать коммит» и «откатить изменения»;

• умение читать и передавать модели сообщения об ошибках;

• общее представление о том, что такое база данных и API, пусть пока без практического опыта.

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

Что изменится в этой книге

Три вещи будут отличать материал этой книги от предыдущей.

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

Во-вторых, ответственность. Проект, которым реально пользуются другие люди, требует внимания к вещам, которые можно было игнорировать в учебном проекте для себя: что произойдёт, если два человека одновременно нажмут кнопку заказа; что если сервер временно недоступен; как защитить личные данные пользователей.

В-третьих, инструментарий. Мы познакомимся с более продвинутыми возможностями самого Claude Code — субагентами, хуками, MCP-подключениями, — которые в первой книге были бы преждевременны, но теперь, когда основы усвоены, органично расширяют ваши возможности.

Как выбрать свой маршрут по книге

Если у вас уже есть конкретная цель — скажем, вы хотите сделать интернет-магазин для небольшого семейного бизнеса, — имеет смысл читать части 2 и 5 (реальные проекты и данные/интеграции) внимательнее, а часть 4 (продвинутые возможности) можно пролистать по диагонали и вернуться к ней позже, когда возникнет конкретная потребность.

Если вам интереснее сам инструмент и его возможности — тогда часть 4 станет для вас основной, а сквозные проекты из части 2 можно использовать просто как учебный полигон для практики.

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

Небольшое резюме главы

• К этому моменту у вас уже есть работающая база навыков: установка, промптинг, git, работа с ошибками.

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

• Книгу можно читать не строго по порядку, ориентируясь на собственные практические цели.

В следующей главе — краткая карта самой книги и рекомендации, как с ней работать эффективнее всего.

Сквозные учебные проекты

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

«ВелоМаркет» — небольшой интернет-магазин запчастей для велосипедов. На нём мы разберём каталог товаров, корзину, оформление заказа, платежи, личный кабинет покупателя и администратора.

«Напоминалка» — Telegram-бот для личных напоминаний и небольших списков дел. На нём мы разберём работу с внешними API мессенджеров, хранение состояния пользователя, простую логику диалога.

«Учёт клиента» — небольшая внутренняя система для условной мастерской по ремонту техники: список клиентов, заявок, простая отчётность. На этом проекте удобно разбирать темы личного кабинета, ролей пользователей и автоматизации отчётов.

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

Структура каждой главы

Как и в первой книге, главы построены по единому принципу: объяснение понятия простыми словами → пример подробной формулировки задачи для Claude Code → разбор того, что происходит и почему → практические рекомендации и предостережения → краткое резюме.

В этой книге добавляется новый повторяющийся элемент — врезки «Разбор кейса», где мы подробно показываем реальный диалог с ИИ от формулировки задачи до финального результата, включая типичные повороты сюжета вроде неожиданных ошибок и уточняющих вопросов.

Уровень технических подробностей

Важная оговорка: там, где в главе приводится код (например, фрагмент JavaScript или структура таблицы базы данных), цель — не в том, чтобы вы вручную вводили и отлаживали этот код, а в том, чтобы вы понимали, что примерно происходит внутри, когда Claude Code выполняет вашу задачу, и могли осмысленно читать и оценивать предлагаемые решения. Реальная работа по написанию кода, как и в первой книге, остаётся за ИИ — ваша роль — постановка задачи, проверка результата и принятие решений.

Небольшое резюме главы

• Книга построена вокруг трёх сквозных учебных проектов: интернет-магазин, Telegram-бот и внутренняя система учёта.

• Рекомендуется параллельно применять изучаемые техники к собственному реальному проекту.

• Новый элемент этой книги — врезки «Разбор кейса» с подробным диалогом от задачи до результата.

• Приводимый код нужен для понимания происходящего, а не для ручного набора и отладки.

В следующей главе — расширенный словарь терминов, которые встретятся на страницах этой книги и которых не было в первой части.

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

Сервер — компьютер (обычно удалённый, расположенный в дата-центре), который постоянно включён, подключён к интернету и обрабатывает запросы от пользователей вашего сайта или приложения. В первой книге мы работали в основном с файлами на собственном компьютере — теперь речь пойдёт о том, как код начинает жить на сервере, доступном всем в интернете.

Бэкенд и фронтенд — условное разделение частей приложения. Фронтенд — то, что видит и с чем напрямую взаимодействует пользователь (страницы, кнопки, формы). Бэкенд — невидимая пользователю часть, работающая на сервере: обработка данных, взаимодействие с базой данных, бизнес-логика (например, расчёт скидки или проверка остатков на складе).

Деплой (развёртывание) — процесс размещения готового проекта на сервере так, чтобы им могли пользоваться реальные люди через интернет, а не только вы на своём компьютере.

Окружение (environment) — набор условий, в которых работает программа: локальное окружение (ваш компьютер), тестовое окружение (копия проекта для проверок) и продакшен (боевая версия, которой пользуются реальные люди).

Переменные окружения — способ хранить настройки и секретные данные (например, ключи доступа к внешним сервисам) отдельно от основного кода, чтобы их не пришлось «зашивать» прямо в файлы проекта.

Аутентификация и авторизация — два близких, но разных понятия. Аутентификация — процесс подтверждения личности («вы действительно тот, за кого себя выдаёте»), обычно через логин и пароль. Авторизация — определение того, какие действия разрешены уже подтверждённому пользователю (например, обычный покупатель не может зайти в панель администратора магазина).

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

CI/CD (непрерывная интеграция и доставка) — практика, при которой изменения в проекте автоматически проверяются и разворачиваются на сервере без ручного повторения одних и тех же шагов каждый раз.

Рефакторинг — улучшение внутреннего устройства кода без изменения его внешнего поведения: код продолжает работать точно так же, но становится понятнее, надёжнее или быстрее.

API-эндпоинт — конкретный «адрес» внутри API, отвечающий за одно определённое действие (например, «получить список товаров» или «оформить заказ»).

Токен доступа — временный или постоянный секретный код, подтверждающий право пользователя или программы на выполнение определённых действий, часто используется вместо постоянного ввода пароля.

Хук (hook) — механизм, который автоматически запускает определённое действие в ответ на какое-либо событие (например, автоматическая проверка кода перед каждым коммитом).

Субагент — вспомогательный, специализированный процесс внутри Claude Code, которому основной диалог может делегировать отдельную часть большой задачи.

MCP (Model Context Protocol) — протокол, позволяющий Claude Code подключаться к внешним сервисам и инструментам (например, к таск-трекеру или базе данных) стандартизированным способом.

СОВЕТ: Если по ходу дальнейшего чтения какой-то термин из этого списка забудется — не нужно листать книгу назад в поисках этой главы. Проще всего в любой момент спросить у самого Claude Code: «Напомни простыми словами, что такое [термин]» — и получить объяснение, адаптированное именно под контекст вашего текущего проекта.

Вооружившись этим словарём, переходим к главному — реальным проектам от идеи до результата.

Знакомство с проектом «ВелоМаркет»

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

Шаг 1. Планируем структуру заранее

В отличие от простого сайта-визитки, для проекта с несколькими связанными разделами полезно начать не с прямого запроса «сделай магазин», а с просьбы о плане:

Хочу сделать небольшой интернет-магазин запчастей для

велосипедов "ВелоМаркет". Нужны: каталог товаров с

категориями (тормоза, цепи, колёса, аксессуары), карточка

товара, корзина, оформление заказа. Прежде чем начинать,

предложи структуру проекта — какие страницы и файлы

понадобятся и как они будут связаны между собой

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

Шаг 2. Каталог и карточка товара

Начинаем с самого фундамента — списка товаров:

Создай страницу каталога товаров. Пока используй тестовые

данные прямо в коде — 12 товаров в 4 категориях, у каждого

название, цена, короткое описание и заглушка вместо фото.

Добавь фильтр по категориям и сортировку по цене

После получения результата — переходим к карточке отдельного товара:

Сделай, чтобы при клике на товар в каталоге открывалась

отдельная карточка товара с более подробным описанием,

крупным изображением-заглушкой и кнопкой "Добавить в корзину"

РАЗБОР КЕЙСА. На этом этапе частая заминка — Claude Code может создать переход на карточку товара, который “теряет” информацию о том, какой именно товар был выбран (например, всегда показывает первый товар из списка независимо от клика). Правильная формулировка для исправления: «При клике на разные товары в каталоге всегда открывается карточка первого товара вместо выбранного. Похоже, не передаётся идентификатор товара при переходе — проверь эту логику». Такая точная формулировка, ссылающаяся на конкретное наблюдаемое поведение, обычно приводит к быстрому и точному исправлению.

Шаг 3. Корзина

Корзина — это первое место в проекте, где нужно согласованное поведение сразу нескольких страниц: добавление товара на странице каталога должно отражаться в отдельном разделе корзины.

Добавь функциональность корзины:

1. Кнопка "Добавить в корзину" сохраняет товар в корзину

2. Иконка корзины в шапке сайта показывает количество товаров

3. Отдельная страница корзины со списком добавленных товаров,

количеством каждого, возможностью изменить количество или

удалить товар, и итоговой суммой

4. Данные корзины должны сохраняться при обновлении страницы

Обратите внимание на последний пункт — мы уже сталкивались с похожим требованием в первой книге (глава 15, приложение-трекер привычек). Механизм тот же самый — сохранение данных в браузере, — но здесь он становится частью более крупной, взаимосвязанной системы.

Шаг 4. Оформление заказа

Добавь страницу оформления заказа, доступную из корзины по

кнопке "Оформить заказ". Нужна форма: имя, телефон, адрес

доставки, способ оплаты (пока просто выбор "Наличными при

получении" или "Картой онлайн" — саму оплату подключим позже).

После отправки формы — показать страницу подтверждения

с номером заказа и очистить корзину

Намеренно откладываем реальную обработку платежей — эта тема достаточно объёмна и весома, чтобы посвятить ей отдельную главу (глава 21). На данном этапе цель — собрать весь путь покупателя от каталога до подтверждения заказа как цельный, логически замкнутый сценарий.

Шаг 5. Проверяем весь путь целиком

После того как отдельные части готовы, важно проверить не каждую по отдельности, а весь путь пользователя целиком, от начала до конца, как это сделал бы реальный покупатель:

Открыть каталог, отфильтровать по категории.

Открыть карточку конкретного товара.

Добавить его в корзину, вернуться в каталог, добавить ещё один товар.

Перейти в корзину, изменить количество одного из товаров.

Оформить заказ, проверить, что показывается корректное подтверждение.

Обновить страницу и убедиться, что корзина после оформления заказа действительно пуста.

ВНИМАНИЕ: Тестирование одного пути целиком, от начала до конца, — гораздо более надёжный способ найти реальные проблемы, чем проверка каждого отдельного элемента изолированно. Мы вернёмся к этой мысли подробнее в главе 8, посвящённой тестированию.

Шаг 6. Административная часть (кратко)

Реальному интернет-магазину, помимо интерфейса покупателя, нужна и возможность для владельца управлять товарами — добавлять, редактировать, убирать из продажи. Мы подробнее разберём тему разграничения ролей (покупатель / администратор) в главе 20, посвящённой аутентификации, но уже сейчас можно поставить простую задачу:

Добавь простую административную страницу /admin со списком

товаров и возможностью добавить новый товар через форму

(название, цена, категория, описание). Пока не нужна защита

паролем — просто отдельная страница для управления каталогом,

безопасность добавим позже

Небольшое резюме главы

• Крупный проект стоит начинать с запроса общего плана структуры, а не сразу с реализации.

• Работу удобно вести последовательными, логически завершёнными этапами: каталог → карточка товара → корзина → оформление заказа.

• Корзина — первый элемент, требующий согласованного поведения нескольких частей сайта одновременно.

• Тестировать нужно не только отдельные элементы, но и весь путь пользователя целиком.

• Административная часть и полноценная защита паролем — отдельные темы, которые мы развернём в последующих главах.

В следующей главе мы возьмёмся за принципиально другой тип проекта — Telegram-бота, который живёт не на веб-странице, а внутри мессенджера.

Чем бот принципиально отличается от сайта

До сих пор все наши проекты были веб-страницами, которые пользователь открывает в браузере. Бот устроен иначе: он живёт внутри мессенджера (в нашем примере — Telegram) и общается с пользователем через отправку и получение сообщений, а не через клики по элементам страницы. Идея разговора с ИИ на естественном языке, которую мы применяли для постановки задач Claude Code, здесь оказывается вдвойне уместной: сам бот, которого мы создаём, тоже будет «разговаривать» с конечным пользователем.

Шаг 1. Регистрация бота у BotFather

Прежде чем писать какой-либо код, нужно зарегистрировать самого бота в Telegram — это делается через специального служебного бота с именем @BotFather.

Откройте Telegram, найдите в поиске @BotFather.

Отправьте команду /newbot.

Следуйте подсказкам: укажите отображаемое имя бота и его техническое имя пользователя (должно заканчиваться на bot, например napominalka_test_bot).

В ответ BotFather выдаст токен — длинную строку символов вида 123456789:AAHdqTcvCH1vGWJxfSeofSAs0K5PALDsaw.

ВНИМАНИЕ: Этот токен — секретный ключ доступа к вашему боту, по сути пароль. Никому не показывайте его и не публикуйте в открытом доступе. Если токен всё же случайно попал в публичное место — в том же диалоге с BotFather есть команда /revoke, которая аннулирует старый токен и выдаёт новый.

Шаг 2. Формулируем задачу для Claude Code

Хочу создать простого Telegram-бота "Напоминалка" для личных

напоминаний. Функциональность:

1. Команда /start — приветствие и краткое объяснение, что

умеет бот

2. Команда /remind [текст] [время] — создать напоминание,