Урок 3: Workflow — Explore, Plan, Code, Review

Описание

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

flowchart LR
    A["Explore\nСканирование проекта\nПоиск файлов и стека"] --> B["Plan\nСоставление плана\nСписок файлов и шагов"]
    B --> C["Code\nАвтоматическое написание\nСоздание и редактирование файлов"]
    C --> D["Review\nПроверка через /diff\nЗапуск тестов · Коммит"]

Чему вы научитесь

• Правильно исследовать структуру проекта (Explore)
• Просить Claude составить детальный план (Plan)
• Реализовывать решение пошагово (Code)
• Проверять результаты и делать итерации (Review)
• Работать эффективно на примере реального проекта

Полный workflow: 4 этапа

Этап 1: Explore — Исследование

Перед любым кодированием нужно понять структуру проекта. Claude Code может быстро отсканировать всё.

Запуск исследования:

claude
# Введите:
tell me about the structure of this project. what files are important? what frameworks/libraries are used?

Или более детально:

tell me about the structure of this project.
what files are important?
what frameworks/libraries are used?

Что смотрит Claude Code:

• Структура папок и файлов
• package.json (зависимости)
• .git историю (недавние изменения)
• README и документацию
• Основные файлы конфигурации

Пример вывода:

Project Overview
═══════════════

Structure:
├── src/
│   ├── server.js (Express server)
│   ├── routes/
│   ├── models/
│   └── utils/
├── tests/
├── package.json
└── .env.example

 Stack: Node.js, Express, MongoDB, Jest

Key dependencies:
- express: 4.18.2
- mongoose: 6.0.0
- dotenv: 10.0.0

Recent commits:
- fix: update auth middleware
- feat: add user endpoints

Когда использовать:

• При первом запуске на новом проекте
• Перед большими изменениями
• Если долго не работали с проектом

Этап 2: Plan — Планирование

После исследования приступаем к планированию. Это ключевой шаг!

Включить режим плана:

/plan
# или Shift+Tab

Попросить составить план:

I need to add JWT authentication to this Express app.
Here's what I need:
1. A login endpoint that returns a JWT token
2. A middleware to verify tokens
3. Protect existing routes with the middleware

Please create a detailed plan for implementation.

Что должен содержать хороший план:

1. Шаги по порядку — какие файлы менять
2. Зависимости — какие npm пакеты нужны
3. Структура — как организовать код
4. Проверка — как тестировать результат

Пример плана:

Authentication Plan
═══════════════════

Steps:
1. Install jsonwebtoken dependency
2. Create src/auth/jwt.js for token generation
3. Create src/auth/middleware.js for token verification
4. Update src/server.js to use middleware
5. Create src/routes/auth.js with login endpoint
6. Test with curl or Postman

Dependencies to add:
- jsonwebtoken: ^9.0.0

Files to create:
- src/auth/jwt.js (100 lines)
- src/auth/middleware.js (40 lines)
- src/routes/auth.js (50 lines)

Files to modify:
- src/server.js (+5 lines)
- package.json (add dependency)

[+] Verification:
- POST /auth/login returns token
- Protected routes require Authorization header
- Invalid tokens are rejected

ВАЖНО: В режиме плана НИЧЕГО не меняется до вашего согласия!

Проверка плана:

Прочитайте план и спросите себя:

• Логичен ли порядок?
• Не забыл ли Claude про важные шаги?
• Нужны ли дополнительные зависимости?

Если хорошо — нажмите Enter для применения. Если нет — нажмите Ctrl+C и уточните.

Этап 3: Code — Кодирование

После утверждения плана Claude Code автоматически начнёт реализацию.

Процесс кодирования:

[+] Installing dependencies...
[+] Creating src/auth/jwt.js...
[+] Creating src/auth/middleware.js...
[+] Updating src/server.js...
[+] Creating src/routes/auth.js...
[+] Updating package.json...

Completed: Added JWT authentication

Во время кодирования Claude может:

• Создавать новые файлы
• Менять существующие файлы
• Запускать npm install
• Запускать тесты для проверки

Отслеживать ход работы:

/diff

Можно посмотреть все изменения в интерактивном viewer’е.

Если что-то идёт не так:

Ctrl+C  # остановить текущее действие
# Уточните задачу:
that's not quite right, please adjust the JWT payload structure

Claude Code может вернуться и исправить код.

Этап 4: Review — Проверка и Тестирование

После реализации обязательно проверьте результат!

Просмотреть изменения:

/diff

Посмотрите каждый файл и убедитесь, что:

• Синтаксис правильный
• Логика имеет смысл
• Нет опечаток

  function getUser(id) {
    const user = db.find(id);
-   return user.name;  // ← баг
  }

  function getUser(id) {
    const user = db.find(id);
+   return user?.name ?? 'Unknown';  // ← исправлено
  }

Протестировать функциональность:

now let's test the authentication.
can you create a test script that:
1. registers a user
2. logs in and gets a token
3. uses token to access protected route
4. tests invalid token rejection

Claude Code может:

• Создать файл test-auth.js
• Запустить его
• Показать результаты

Проверить lint и форматирование:

please run npm test and fix any errors
can you also check for code quality issues?

Убедиться, что проект работает:

npm start
# Тестируем вручную или через автотесты

Полный пример: Добавление API endpoint’а в Express

Давайте пройдём весь workflow на реальном примере.

Шаг 1: Explore

cd my-express-app
claude

# Введите:
tell me about the structure of this project

Ответ Claude Code:

This is an Express.js API with:
- src/server.js - main entry point
- src/routes/users.js - user endpoints
- src/routes/posts.js - post endpoints
- .env.example - environment variables

Шаг 2: Plan

/plan
# или Shift+Tab

# Введите:
I need to add a new endpoint GET /api/stats that returns:
- total users count
- total posts count
- average posts per user

Please create a plan that includes:
1. Creating a stats router
2. Connecting it to the server
3. Adding database queries
4. Testing the endpoint

Plan от Claude:

Stats Endpoint Plan
═══════════════════

Implementation:
1. Create src/routes/stats.js
2. Add User.countDocuments() query
3. Add Post.countDocuments() query
4. Calculate average
5. Add route to src/server.js
6. Add test in tests/stats.test.js

New endpoint:
GET /api/stats
Response: {
  users: 42,
  posts: 156,
  averagePostsPerUser: 3.7
}

Нажимаем Enter — план нравится!

Шаг 3: Code

Claude автоматически начнёт кодирование:

[+] Creating src/routes/stats.js...
[+] Adding route to src/server.js...
[+] Creating tests/stats.test.js...

All changes applied successfully!

Шаг 4: Review

/diff

Смотрим все изменения. Затем:

# Запускаем тесты:
npm test

# Тестируем endpoint:
curl http://localhost:3000/api/stats

Ответ:

{
  "users": 42,
  "posts": 156,
  "averagePostsPerUser": 3.7
}

Отлично! Endpoint работает.

Финальный коммит:

claude

commit the changes with a descriptive message about adding stats endpoint

Claude создаст коммит и (если нужно) pull request.

Лучшие практики workflow’а

1. Всегда начинайте с Explore

# Хорошо:
tell me about the structure of this project
# then plan
# then code

# Плохо:
write a new feature (без изучения проекта)

2. Планируйте ДО кодирования

# Хорошо:
/plan
detailed plan for adding authentication
# утверждаю план
# выполнение кода

# Плохо:
just add authentication (без плана)

3. Используйте итерации

# Если план не идеален:
that's not quite right, here's what I meant...
# Claude может пересмотреть

# Если код не работает:
the tests are failing, please fix...
# Claude может отладить

4. Проверяйте diff перед коммитом

/diff
# Просмотрите ВСЕ изменения
# Убедитесь в логике
# Только потом коммитьте

5. Давайте контекст

# Хорошо:
add user authentication using JWT.
we use MongoDB for users.
tokens should expire in 24 hours.

# Плохо:
add auth

Попробуйте сами

Практическое задание: Реальный workflow

1. Выберите реальный проект (или создайте простой)
2. Explore: claude → опишите запрос на естественном языке → посмотрите структуру
3. Plan: Shift+Tab → опишите новую фичу → посмотрите план
4. Code: Нажмите Enter → дайте Claude кодировать
5. Review: /diff → проверьте все изменения
6. Test: попросите Claude запустить тесты
7. Commit: commit my changes

Задачи для практики:

• Добавить новый API endpoint
• Добавить validation в форму
• Создать новый utility function
• Добавить тесты к существующему коду

Ключевые выводы

1. Explore → Plan → Code → Review — это проверенный порядок
2. Режим плана спасает код — всегда смотрите план перед применением
3. Итерации нормальны — если что-то не идеально, уточняйте
4. Контекст важен — давайте Claude полную информацию о требованиях
5. Diff — ваш друг — всегда проверяйте изменения перед коммитом
6. Тесты не лишние — просите Claude писать и запускать тесты

Следующий урок

В следующем уроке мы разберём hooks — как автоматизировать повторяющиеся операции (lint перед коммитом, форматирование после редактирования, тесты при сохранении файла). Hooks делают вашу разработку ещё быстрее.

Источники

• Claude Code Common Workflows
• Claude Code Best Practices
• wesammustafa/Claude-Code-Everything-You-Need-to-Know - Workflows