4.3: Розробка та ітерації

• Час на виконання: 30-40 хвилин

Інтерактивний урок: Запустіть /start-4-3 в Claude Code

В цьому уроці: Claude розгортає проект, будує ваш застосунок, а ви ітеруєте зі скріншотами.

Що таке сервер розробки?

Сервер розробки запускає ваш код локально щоб ви могли бачити його як веб-сайт.

Ключові речі які треба знати:

• Він працює тільки на ВАШОМУ комп'ютері (не публічно)
• Він дозволяє вам тестувати та ітерувати перед запуском
• Він повинен продовжувати працювати поки ви переглядаєте сайт
• Зупиніть його натиснувши Ctrl+C в терміналі

Що таке Localhost?

localhost означає ваш власний комп'ютер що діє як сервер.

localhost:3000 = порт 3000 на вашій машині.

Це НЕ реальна URL-адреса. Ніхто інший не може отримати до неї доступ. Ви отримаєте реальну URL-адресу коли розгорнете в уроці 4.5.

Що таке режим плану?

Режим плану — це функція Claude Code де Claude показує вам план перед виконанням.

• Перемикайте його за допомогою Shift+Tab
• Добре для великих завдань де ви хочете спочатку переглянути
• Ви затверджуєте план, потім Claude будує

Для складних розробок це дозволяє задавати питання та вносити корективи перш ніж буде написано будь-який код.

Чому ітерація важлива

Перша версія ніколи не досконала. Це нормально та очікувано.

Професійна розробка завжди: побудуй → перегляд → уточнення → повтор.

Різниця з AI: ітерації займають секунди замість днів. Тому не зупиняйтесь — продовжуйте уточнювати поки вам не сподобається.

Трюк зі скріншотом

Ctrl+V (не Cmd+V на Mac!) вставляє зображення безпосередньо в Claude Code.

Це потужно для ітерацій:

• Зробіть скріншот того що не так
• Обведіть проблему або вкажіть на неї
• Вставте та опишіть що ви хочете інакше

Візуальний зворотний зв'язок швидший ніж опис проблем словами.

Усунення несправностей

"npm: command not found"

Node.js не встановлений. Завантажте з nodejs.org, встановіть, потім перезапустіть термінал.

"Port 3000 already in use"

Інший застосунок використовує цей порт. Або:

• Закрийте інші вікна терміналу що можуть запускати сервери
• Використайте інший порт (Claude може допомогти з цим)

Браузер не відкрився

Вручну перейдіть на http://localhost:3000

Порожня сторінка

1. Перевірте ваш термінал на помилки збірки (червоний текст)
2. Перевірте консоль браузера: натисніть F12, клікніть вкладку "Console", шукайте червоні помилки

Зміни не відображаються

• Ви оновили браузер?
• Сервер розробки ще запущений в терміналі?

Стиль виглядає неправильно

Очистіть кеш браузера за допомогою Cmd+Shift+R (Mac) або Ctrl+Shift+R (Windows), або спробуйте вікно інкогніто.

Що далі

4.4: GitHub → — Збережіть ваш код в хмарі щоб він був захищений та готовий до розгортання