Блок 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 (він щойно запустив тести) з інструментом 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 .

Схваліть і спостерігайте за багатоетапною збіркою. Це займе хвилину-дві. Claude читає вивід збірки і може пояснити кожен етап.

Уточніть:

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

Claude зіставить Dockerfile, який він прочитав у Блоці 1, із виводом збірки, який щойно спостерігав, і дасть зрозуміле пояснення процесу багатоетапної збірки.

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

Крок 7: Вправа “Зламай і виправ”

Це головна подія Блоку 2. Ми навмисно зламаємо застосунок і подивимося, як Claude діагностує та виправить проблему.

Крок 7a: Внесіть баг

Відкрийте файл вихідного коду у вашому звичайному редакторі (VS Code, vim, будь-який) і внесіть навмисну помилку. Кілька ідей:

  • Помилка TypeScript: Видаліть обов’язковий проп із виклику компонента
  • Помилка імпорту: Перейменуйте імпорт на щось неіснуюче
  • Синтаксична помилка: Видаліть закриваючу дужку або круглу дужку

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

// Change this:
import { ModelCard } from '@/components/ModelCard'
// To this:
import { ModelCard } from '@/components/ModelCardBROKEN'

Збережіть файл.

Крок 7b: Попросіть 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 зібрав багатоетапний Docker-образ і пояснив процес
  6. Зламай і виправ — ви навмисно зламали код, Claude діагностував проблему та застосував виправлення
  7. Управління контекстом — ви використали /clear для чистого старту та /compact для стиснення довгої сесії

Тепер ви відчули всі три основні можливості Claude Code:

  • Читання коду (Блок 1)
  • Запуск команд (Блок 2)
  • Редагування файлів (вправа “зламай і виправ”)

Це повна тріада агента. Все далі будується на цих трьох можливостях.

Усунення проблем

“Docker not found” або docker build падає Переконайтеся, що 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 для повного скиду. Довгі розмови з багатьма викликами інструментів можуть заповнити контекстне вікно.

Готові перевірити засвоєне?

Пройти квіз →