Блок 2 Практика

Запуск и тестирование локально — Практика

Прямая речь: “Всё на этой практической странице построено так, чтобы вы могли повторять за мной строка за строкой. Когда вы видите блок с командой или промптом, можете копировать его прямо в терминал или сессию Claude, если я явно не скажу, что это справочный материал. По ходу дела сравнивайте свой результат с моим на экране, чтобы ловить ошибки рано, а не копить их.”

Продолжительность: ~25 минут Результат: Проект полностью настроен локально — зависимости установлены, тесты проходят, Docker-образ собран, получен первый опыт работы с циклом обработки ошибок Claude Пререквизиты: Блок 1 пройден, Claude Code запущен внутри проекта ai-coderrank

Шаг 1: Начните чистую сессию

Перейдите в проект и запустите Claude Code:

cd ai-coderrank
claude

Поскольку у нас был разговор в Блоке 1, начнём с чистого листа:

/clear

Это стирает предыдущую беседу. Claude начинает с нуля (но по-прежнему автоматически читает CLAUDE.md, так что знает о проекте).

Шаг 2: Установка зависимостей

Попросите Claude настроить проект:

Install the project dependencies

Наблюдайте, что происходит. Claude предложит выполнить npm install. Вы увидите запрос разрешения:

Claude wants to run: npm install
Allow? (y/n)

Введите y для одобрения. Это модель разрешений в действии — Claude никогда не выполняет команду без вашего явного одобрения.

Наблюдайте за прокруткой вывода npm install. Claude тоже читает вывод, и если будут предупреждения или ошибки, он их отметит.

Прямая речь: “Видите этот запрос разрешения? Это одна из самых здоровых частей всего опыта работы. Claude предлагает действие, а вы сохраняете контроль над тем, что реально выполняется. Результат, который вы должны ожидать — прозрачность и одобрение на уровне команд, а не слепая автоматизация.”

Шаг 3: Запуск dev-сервера

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

Start the development server

Claude предложит выполнить npm run dev. Одобрите.

Вы должны увидеть знакомый вывод dev-сервера Next.js — что-то вроде:

  ▲ Next.js 14.x.x
  - Local:        http://localhost:3000

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

Важно: Dev-сервер теперь работает в терминале Claude. Чтобы продолжить работу с Claude, нужно остановить сервер. Попросите Claude:

Stop the dev server

Claude отправит сигнал Ctrl+C для завершения процесса.

Шаг 4: Запуск набора тестов

Теперь проверим, что всё проходит:

Run the tests

Claude предложит npm test (или другую тестовую команду проекта). Одобрите.

Наблюдайте за выводом тестов. Claude читает каждую строку — если какие-то тесты упадут, он скажет, какие именно и почему.

Продолжите:

What test framework is this project using and how are the tests organized?

Это объединяет инструмент Bash от Claude (он только что прогнал тесты) с инструментом Read (он заглянет в тестовые файлы, чтобы объяснить организацию). Это естественный диалог.

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

Шаг 5: Запуск линтера

Проверка качества кода:

Run the linter and show me if there are any issues

Claude предложит выполнить команду линтера (обычно npm run lint для проектов Next.js). Одобрите.

Если линтер найдёт проблемы, Claude перечислит их с указанием файлов и объяснениями. Если всё чисто, Claude это подтвердит.

Необязательное продолжение, если есть предупреждения линтера:

Fix the lint issues you found

Именно здесь вы увидите, как Claude переключается от чтения/выполнения к редактированию. Он предложит изменения в файлах для исправления предупреждений линтера, и вы увидите запрос разрешения для каждого редактирования файла.

Шаг 6: Сборка Docker-образа

Протестируем контейнерную сборку:

Build the Docker image for this project

Claude предложит команду docker build. Что-то вроде:

docker build -t ai-coderrank .

Одобрите и наблюдайте за выполнением multi-stage сборки. Это занимает минуту-две. Claude читает вывод сборки и может объяснить каждый этап.

Продолжите:

Explain what just happened during the Docker build. What did each stage do?

Claude сошлётся и на Dockerfile, который он прочитал в Блоке 1, и на вывод сборки, который только что наблюдал, чтобы дать вам чёткое объяснение процесса multi-stage сборки.

Прямая речь: “Это важная веха: мы только что перешли от исходного кода к Docker-образу в один шаг. Поскольку Claude прочитал Dockerfile и наблюдал за выводом сборки, он может объяснить и замысел, и результат. Ожидаемый итог — не только успешная сборка, но и гораздо более чёткая ментальная модель того, как приложение упаковывается.”

Шаг 7: Упражнение “Сломай и почини”

Это кульминация Блока 2. Мы намеренно сломаем приложение и посмотрим, как Claude диагностирует и исправит проблему.

Шаг 7а: Внесите баг

Откройте исходный файл в вашем обычном редакторе (VS Code, vim, любом) и внесите преднамеренную ошибку. Несколько идей:

  • Ошибка TypeScript: Удалите обязательный проп из вызова компонента
  • Ошибка импорта: Переименуйте импорт в несуществующее имя
  • Синтаксическая ошибка: Удалите закрывающую скобку

Например, откройте src/app/page.tsx и сломайте импорт:

// Измените это:
import { ModelCard } from '@/components/ModelCard'
// На это:
import { ModelCard } from '@/components/ModelCardBROKEN'

Сохраните файл.

Шаг 7б: Попросите Claude проверить

Вернитесь в сессию Claude Code:

Run the TypeScript compiler to check for errors

Claude предложит выполнить npx tsc --noEmit или аналогичную команду проверки типов. Одобрите.

Компилятор упадёт. Теперь наблюдайте за магией:

Fix the error

Claude:

  1. Прочитает вывод ошибки компилятора TypeScript
  2. Определит файл и номер строки
  3. Прочитает сломанный файл
  4. Поймёт, что пошло не так (путь импорта неправильный)
  5. Предложит исправление (вернуть правильный путь импорта)
  6. Запросит разрешение на редактирование файла

Одобрите правку. Затем проверьте:

Run the type check again to make sure it's fixed

Теперь должно пройти.

Прямая речь: “Это один из самых ценных циклов во всём курсе. Мы сломали что-то нарочно, Claude прочитал ошибку, нашёл файл, определил причину и быстро применил исправление. Результат, который я хочу, чтобы вы запомнили: отладка перестаёт быть тупиком и становится быстрым циклом обратной связи, который можно повторять каждый день.”

Шаг 8: Использование /compact

К этому моменту у нас был длинный разговор — установка, dev-сервер, тесты, линтинг, Docker-сборка, упражнение “сломай и почини”. Давайте сожмём его:

/compact

Claude сожмёт беседу в компактную форму. Вы увидите, как он конденсирует всё в ключевые моменты, сохраняя важный контекст (например, что мы работаем над ai-coderrank, тесты проходят, Docker-сборка успешна).

После сжатия проверьте, что Claude сохранил контекст:

What did we accomplish in this session so far?

Claude должен дать вам сводку всего, что вы сделали, хотя детальный диалог был сжат.

Прямая речь: “Я хочу, чтобы вы думали о /compact как о написании чётких заметок по итогам встречи. Вы сохраняете решения и отбрасываете болтовню. Результат — более чистое контекстное окно, более свежая сессия и меньше необходимости перезапускать только потому, что разговор затянулся.”

Шаг 9: Выход

/exit

Что произошло?

Это был большой блок. Подведём итоги:

  1. npm install — Claude настроил зависимости проекта (модель разрешений: первый контакт)
  2. Dev-сервер — Claude запустил и остановил dev-сервер Next.js
  3. Тесты — Claude прогнал набор тестов и объяснил настройку тестирования
  4. Линтер — Claude проверил качество кода и (опционально) исправил проблемы
  5. Docker-сборка — Claude собрал multi-stage Docker-образ и объяснил процесс
  6. Сломай и почини — Вы намеренно сломали код, Claude диагностировал и применил исправление
  7. Управление контекстом — Вы использовали /clear для чистого старта и /compact для сжатия длинной сессии

Теперь вы испытали все три основные возможности Claude Code:

  • Чтение кода (Блок 1)
  • Выполнение команд (Блок 2)
  • Редактирование файлов (упражнение “сломай и почини”)

Это полная агентная триада. Всё дальше строится на этих трёх возможностях.

Решение проблем

“Docker not found” или сборка Docker падает Убедитесь, что Docker Desktop установлен и запущен. На macOS: откройте Docker Desktop из Applications. На Linux: убедитесь, что демон Docker работает (sudo systemctl start docker).

npm install падает с ошибками разрешений Попробуйте очистить кэш npm: npm cache clean --force. Если вы на macOS и видите ошибки EACCES, возможно, нужно исправить разрешения npm — см. документацию npm.

Порт dev-сервера уже занят Если порт 3000 занят, вы увидите ошибку EADDRINUSE. Либо остановите то, что работает на 3000, либо попросите Claude: “Start the dev server on port 3001”.

Claude кажется медленным или запутанным после длинной сессии Используйте /compact для сжатия беседы или /clear для полного сброса. Длинные беседы с множеством вызовов инструментов могут заполнить контекстное окно.

Готовы проверить себя?

Пройти квиз →