Ласкаво просимо та налаштування — Практика

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

Тривалість: ~15 хвилин Результат: Claude Code встановлений, автентифікований та запущений усередині проєкту ai-coderrank з успішною першою розмовою Передумови: Node.js 18+, Git, обліковий запис GitHub, підписка Anthropic Pro

Крок 1: Встановлення Claude Code

Відкрийте термінал і встановіть Claude Code за допомогою офіційного нативного інсталятора:

curl -fsSL https://claude.ai/install.sh | bash

Якщо ви віддаєте перевагу пакетному менеджеру:

• macOS: brew install --cask claude-code
• Windows: winget install Anthropic.ClaudeCode

Node.js все ще потрібен для роботи з курсовим проєктом пізніше, але для встановлення самого Claude Code через нативний інсталятор він не потрібен.

Перевірте встановлення:

claude --version

Ви маєте побачити номер версії. Якщо бачите command not found, перезапустіть термінал (або виконайте source ~/.zshrc / source ~/.bashrc), щоб PATH підхопив новий бінарник.

Пряма мова: “Зверніть увагу, наскільки нудним є це встановлення — в найкращому сенсі. Одна офіційна команда, кілька секунд налаштування, і готово. На macOS також можна використати Homebrew, а на Windows — WinGet. Результат, який ми хочемо, простий: claude --version працює, і ми готові перейти до справжнього воркфлоу.”

Крок 2: Автентифікація

Тепер запустіть Claude Code вперше:

claude

При першому запуску Claude Code запропонує пройти автентифікацію. Дотримуйтесь інструкцій на екрані — відкриється вікно браузера, де ви увійдете у свій обліковий запис Anthropic та авторизуєте Claude Code.

Вимоги: Потрібна активна підписка Anthropic Pro ($20/місяць, рекомендована для цього курсу). Claude Code входить до планів Pro та Max. Pro дає доступ до Sonnet і Haiku в Claude Code — цього достатньо для курсу. Деталі дивіться у Гіді з витрат.

Після успішної автентифікації ви потрапите в інтерактивну сесію. Ви маєте побачити промпт на зразок:

claude >

Вітаємо — ви всередині. Але перш ніж почати спілкуватися, давайте вивчимо елементи керування.

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

Крок 3: Вивчаємо /help

Перебуваючи в сесії Claude Code, введіть:

/help

Це покаже всі доступні слеш-команди. Витратьте хвилину, щоб їх переглянути. Ось ті, які ми будемо використовувати найчастіше:

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

Спробуйте коротку розмову:

Введіть щось просте, щоб перевірити, що все працює:

What can you help me with?

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

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

/exit

Крок 4: Форк і клонування ai-coderrank

Перейдіть до репозиторію курсового проєкту на GitHub:

https://github.com/ExpectoMentoris/ai-coderrank

Зробіть форк репозиторію через інтерфейс GitHub (натисніть кнопку “Fork” у верхньому правому куті).

Потім клонуйте свій форк локально:

git clone https://github.com/YOUR_USERNAME/ai-coderrank.git
cd ai-coderrank

Замініть YOUR_USERNAME на ваше реальне ім’я користувача GitHub.

Швидка перевірка — переконайтеся, що файли проєкту на місці:

ls

Ви маєте побачити структуру проєкту Next.js: package.json, src/, public/, Dockerfile, k8s/, .github/ та інше.

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

Крок 5: Запуск Claude Code всередині проєкту

Ось він — момент. Перейдіть у директорію проєкту (якщо ви ще не там) і запустіть Claude Code:

cd ai-coderrank
claude

Тепер запитайте Claude щось про проєкт:

What is this project? Give me a quick summary.

Дивіться, що відбувається. Claude не просто вгадує за назвою директорії. Він активно читає файли — ви побачите, як він звертається до package.json, README.md, можливо заглядає в src/ — щоб побудувати реальне розуміння того, чим є цей проєкт.

Спробуйте ще кілька запитань:

What tech stack does this project use?

What does the file structure look like?

Are there any Docker or Kubernetes configs in this project?

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

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

Крок 6: Перевірка використання токенів

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

/cost

Це покаже кількість токенів за поточну сесію. У типовій першій розмові ви використаєте відносно невелику кількість токенів — серйозніше використання почнеться, коли Claude почне читати багато файлів і вносити правки (що ми робитимемо починаючи з Блоку 1).

Пряма мова: “Я завжди перевіряю /cost рано, щоб ви побудували цю звичку з першого дня. Результат тут — не просто число на екрані; це впевненість, що ви можете моніторити використання і зберігати контроль. Для звичайної щоденної розробки на Pro така ознайомча сесія цілком вписується в очікуване використання.”

Крок 7: Вихід

Чистий вихід:

/exit

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

Підсумуємо, що ми зробили:

1. Встановили Claude Code за допомогою офіційного інсталятора
2. Пройшли автентифікацію з підпискою Anthropic Pro
3. Дослідили систему /help, щоб побачити доступні команди
4. Зробили форк і клонували проєкт ai-coderrank — наш курсовий компаньйон
5. Провели першу розмову з Claude Code всередині реальної кодової бази
6. Побачили, як Claude читає реальні файли, щоб відповідати на запитання про наш проєкт

Тепер у вас є робоче налаштування Claude Code, спрямоване на реальний Next.js-застосунок. У наступному блоці ми підемо значно глибше — використаємо /init для генерації файлу CLAUDE.md і попросимо Claude пояснити архітектуру, API-маршрути та структуру компонентів у деталях.

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

“command not found: claude” Перезапустіть термінал або оновіть конфігурацію шелу: source ~/.zshrc або source ~/.bashrc.

Автентифікація не вдається або закінчується таймаут Переконайтеся, що у вас активна підписка Pro на claude.ai. Безкоштовний тариф не включає доступ до Claude Code.

“Permission denied” під час встановлення Якщо npm install -g видає помилки доступу, або виправте глобальний префікс npm (npm config set prefix ~/.npm-global і додайте ~/.npm-global/bin до PATH), або використовуйте менеджер версій Node, як-от nvm, який уникає цієї проблеми.