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

Вивчення кодової бази — Практика

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

Тривалість: ~20 хвилин Результат: Згенерований файл CLAUDE.md та глибоке розуміння архітектури ai-coderrank, отримане через розмовне дослідження Передумови: Блок 0 завершений, Claude Code встановлений та автентифікований

Крок 1: Запуск Claude Code у проєкті

Переконайтеся, що ви в директорії ai-coderrank, і запустіть сесію:

cd ai-coderrank
claude

Ви маєте побачити промпт Claude Code. Якщо ви завершили Блок 0, це має бути знайомо.

Крок 2: Генерація CLAUDE.md за допомогою /init

Це перший “вау”-момент. Введіть:

/init

Спостерігайте, що відбувається. Claude:

  1. Сканує всю структуру проєкту
  2. Читає ключові файли: package.json, tsconfig.json, Dockerfile тощо
  3. Аналізує розкладку директорій
  4. Генерує файл CLAUDE.md у корені проєкту

Це займає 15-30 секунд залежно від розміру проєкту. Для ai-coderrank має бути швидко.

Пряма мова: “Стежте за викликами інструментів, що прокручуються. Це момент, коли люди зазвичай розуміють, що Claude Code — це не просто гарніший чат-бокс. Він читає package.json, tsconfig, Dockerfile і маніфести, щоб зібрати робочу модель репозиторію. Результат, який ви маєте очікувати — швидший архітектурний огляд, ніж ви б отримали за десять хвилин ручного клікання.”

Крок 3: Перегляд згенерованого CLAUDE.md

Коли /init завершиться, попросіть Claude показати створене:

Show me the CLAUDE.md file you just created

Або прочитайте самі в іншому терміналі:

cat CLAUDE.md

На що звернути увагу в згенерованому CLAUDE.md:

  • Чи правильно він визначив стек технологій (Next.js 14, React 18, TypeScript, Tailwind)?
  • Чи згадує бібліотеку для графіків (Recharts)?
  • Чи документує структуру проєкту?
  • Чи перераховує корисні команди (dev, build, test, lint)?
  • Чи згадує конфіги Docker та Kubernetes?

Пряма мова: “Цей автоматично згенерований CLAUDE.md — це сильна чернетка, а не священний артефакт. Ставтеся до нього як до живої пам’яті проєкту, що стає точнішою з часом. Результат сьогодні — солідний базовий документ; пізніше ми збагатимо його конвенціями команди, типовими підводними каменями та контекстом деплою.”

Крок 4: Просимо Claude пояснити архітектуру

Тепер використаємо Claude як персонального гіда по архітектурі. Почніть широко:

Explain the overall architecture of this project. What are the main layers and how do they connect?

Claude прочитає файли вихідного коду та дасть структурований розбір. Стежте за викликами інструментів — ви побачите, як він читає файли з src/app/, src/components/ та API-маршрутів.

Уточніть більш конкретними запитаннями:

What API routes does this project have and what does each one do?

Спостерігайте, як Claude використовує Glob для пошуку файлів маршрутів, а потім Read для вивчення кожного. Він має ідентифікувати ендпоінти API та пояснити дані, які вони обслуговують.

Пряма мова: “Зупиніться тут і подивіться на ланцюжок інструментів, тому що це прихований двигун агента. Claude ланцюгує Glob і Read, щоб відповісти на реальне запитання про вашу кодову базу. Результат, якого я хочу — щоб ви перестали думати в термінах магії і почали бачити воркфлоу: знайти, оглянути, проміркувати, відповісти.”

Крок 5: Дослідження структури компонентів

Зануримося у фронтенд:

Walk me through the main React components. What does each one render and how do they compose together?

Потім конкретизуйте щодо візуального компонента:

How do the charts work? What data do they receive and how is it visualized?

Claude має визначити використання Recharts і пояснити потік даних від API-маршрутів до компонентів графіків.

Крок 6: Дослідження перемикання тем

Це чудовий приклад відстеження фічі через кілька файлів:

How does the theme switching mechanism work? Trace the flow from the UI toggle to the CSS changes.

Зазвичай Claude:

  1. Шукає код, пов’язаний із темами, по кодовій базі (Grep)
  2. Знаходить компонент перемикання теми (Read)
  3. Відстежує управління станом або контекст-провайдер
  4. Показує, як CSS-змінні або класи Tailwind змінюються залежно від теми

Пряма мова: “Ось тут Claude Code починає відпрацьовувати своє утримання. Одне запитання, кілька файлів і зв’язне пояснення через компонент перемикання, провайдер і CSS-змінні. Очікуваний результат — ви можете відстежити фічу від початку до кінця, не стрибаючи по імпортах п’ять хвилин вручну.”

Крок 7: Спробуйте пряму команду

Тепер переключімося з розмовного на прямий режим. Замість відкритих запитань дайте Claude конкретне завдання:

Find all files that contain "TODO" or "FIXME" comments

Потім спробуйте:

List every external npm dependency and its version from package.json

І:

Show me the Dockerfile and explain each stage of the multi-stage build

Зверніть увагу на різницю в стилі відповідей. Прямі запитання отримують фокусовані, точні відповіді. Відкриті запитання — ширші, дослідницькі відповіді. Обидва підходи корисні.

Крок 8: Тестуємо розуміння Claude

Ось цікава вправа — проквізуйте Claude на тему того, що він вивчив:

If I wanted to add a new AI model to the comparison dashboard, which files would I need to modify? Walk me through the steps.

Це змушує Claude синтезувати все, що він знає про модель даних, API-маршрути та фронтенд-компоненти, у практичну відповідь. Він має дати чіткий, упорядкований список файлів для зміни та описати необхідні правки.

Пряма мова: “Такого роду запитання на міркування — це те, де інструмент відокремлює себе від простого пошуку. Claude не просто знаходить файли; він будує шлях реалізації з того, що прочитав. Результат, на який я хочу звернути вашу увагу — практичне керівництво, а не просто тривія по кодовій базі.”

Крок 9: Перевірка використання контексту та вихід

Подивімося, скільки контексту витратило це дослідження:

/cost

Зверніть увагу на кількість токенів. Дослідження кодової бази — одна з найбільш токеноємних операцій, тому що Claude читає багато файлів. Це нормально й очікувано.

Тепер вийдіть:

/exit

Що щойно сталося?

Приблизно за 20 хвилин ви перейшли від “я ніколи не бачив цю кодову базу” до розуміння:

  1. Структури проєкту — де що знаходиться і чому
  2. Архітектури — як фронтенд-компоненти з’єднуються з API-маршрутами
  3. Потоку даних — як дані моделей рухаються від бекенду до графіків
  4. Системи тем — повна фіча, відстежена через кілька файлів
  5. Інфраструктури — Docker-збірки, K8s-маніфести, конфіг CI

Ви також згенерували CLAUDE.md, який зробить кожну наступну сесію Claude Code розумнішою щодо цього конкретного проєкту.

Ось у чому суперсила. Не писання коду (це буде далі) — а розуміння коду. Кожен досвідчений інженер скаже: найважча частина — не написати фікс, а знати, де шукати. Claude Code щойно скоротив цей процес із днів до хвилин.

Додаткові вправи

Якщо хочете додатково попрактикуватися перед Блоком 2, спробуйте ці вправи з дослідження:

  • Попросіть Claude порівняти конфігурації Docker для розробки та продакшену
  • Попросіть пояснити воркфлоу GitHub Actions покроково
  • Попросіть знайти потенційні проблеми безпеки в кодовій базі
  • Попросіть описати налаштування тестування та які типи тестів існують

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

Пройти квіз →