Це чудова ідея! Формат CS50 ідеально підходить для того, щоб перетворити, здавалося б, нудну тему налаштування середовища на захопливу історію.

Ось урок, згенерований за твоїм майстер-промптом.

🎓 Урок: Фундамент для хмарочоса — Node.js, npm та Angular CLI

Привіт, світе! 👋 Радий бачити вас тут.

Сьогодні ми не просто "ставимо програми". Сьогодні ми готуємо наш верстак.

1. 🔥 Вступ: Чому браузера недостатньо?

Уявіть, що ви хочете побудувати будинок. У вас є чудові креслення, ви знаєте, як класти цеглу. Але є одна проблема: весь ваш інструмент — це дитячий пластиковий молоток, і ви можете будувати лише в пісочниці.

У світі JavaScript вашою "пісочницею" довгий час був браузер (Chrome, Firefox, Safari). Там JavaScript живе, там він малює сайти. Але що, як ви хочете вийти за межі пісочниці? Що, як ви хочете використовувати професійні електроінструменти, щоб збирати складні додатки, керувати серверами або автоматизувати рутину?

Риторичне питання: Ви ж не будете збирати автомобіль Tesla, використовуючи лише швейцарський ніж, правда? Вам потрібен заводський конвеєр.

Ось тут на сцену виходить наша "Свята Трійця" на сьогодні: 1. Node.js — це ваш завод (двигун). 2. npm — це склад запчастин (бібліотека). 3. Angular CLI — це головний інженер, який керує роботами на конвеєрі.

Без цього ви просто пишете текст у блокноті. З цим — ви створюєте сучасний веб. Поїхали розбиратися!

2. 🧠 Теоретична база: Що відбувається "під капотом"?

Давайте розкладемо це на прості механізми. Без зайвого академізму.

⚙️ Node.js (Нода)

Раніше JavaScript жив тільки всередині браузера. У Chrome є двигун V8 — це серце, яке змушує JS працювати. Хтось дуже розумний (Раян Дал) подумав: "А що, якщо витягнути це серце з Chrome і запустити його просто на комп'ютері?"

Так з'явився Node.js. * Що це: Середовище виконання JavaScript поза браузером. * Інтуїтивно: Це як двигун від Ferrari, який поставили на газонокосарку. Тепер JS може працювати з файлами на вашому диску, з базою даних і сервером. * Важливо запам’ятати: Angular потребує Node.js не для того, щоб запускати сайт (сайт працює в браузері), а щоб збілдити (зібрати) ваш проєкт.

📦 npm (Node Package Manager)

Уявіть, що вам треба написати функцію для перевірки email. Ви можете писати її 3 години самі, а можете взяти готову, яку написав геній з Google і перевірили 5 мільйонів людей.

• Що це: Гігантський онлайн-каталог безкоштовного коду (пакетів/бібліотек).
• Як працює: Він встановлюється автоматично разом із Node.js.
• Аналогія: Це App Store або Google Play, але для програмістів.

🚀 Angular CLI (Command Line Interface)

Angular — це складний фреймворк. Створювати проєкт вручну (створювати 50 папок, налаштовувати конфіги) — це пекло.

• Що це: Інструмент командного рядка. Ви пишете команду, а він робить магію.
• Аналогія: Це ваш персональний асистент-архітектор. Ви кажете: "Збудуй кухню", і він сам креслить плани, замовляє матеріали та ставить стіни.

3. 🧪 Приклади та Інсталяція

Ми будемо працювати з Терміналом (Command Prompt / PowerShell / Terminal). Не бійтеся чорного екрана, це ваш найкращий друг.

Крок 1: Перевірка (А раптом вже є?)

Відкрийте термінал. Що ви очікуєте побачити, якщо я введу команду node -v?

• Очікування: Версію програми.
• Реальність: Якщо ви новачок, ви побачите помилку: 'node' is not recognized.... І це нормально! Це означає, що місце вакантне.

Крок 2: Встановлення Node.js

Заходимо на офіційний сайт nodejs.org. Увага! Там завжди дві версії: 1. LTS (Long Term Support) — стабільна, надійна, як Toyota Camry. 2. Current — новітня, експериментальна, може "глючити".

👉 Вибір професіонала: Завжди качаємо LTS. Встановлюємо як звичайну програму (Next -> Next -> Finish).

Крок 3: Магія npm

Після встановлення закрийте і відкрийте термінал знову. Введіть:

node -v
npm -v

Якщо ви бачите цифри (наприклад, v18.16.0 і 9.5.1) — вітаю! Двигун встановлено.

Крок 4: Встановлення Angular CLI

Тепер найцікавіше. Нам треба взяти інструмент зі складу (npm) і встановити його на ваш комп'ютер глобально (щоб він був доступний у будь-якій папці).

Команда виглядає так:

npm install -g @angular/cli

• npm — звертаємось до менеджера.
• install — кажемо "встанови".
• -g — означає global. Без цього прапорця інструмент встановиться тільки в поточну папку і загубиться.
• @angular/cli — назва пакунка.

Натискаємо Enter. Бачимо бігучі рядки... Готово!

Тепер перевіримо, чи наш "Архітектор" на місці:

ng version

Ви маєте побачити красивий логотип Angular у червоному щиті. Це означає успіх. 🎉

4. 🛠 Практична частина

Теорія — це добре, але руки мають пам’ятати. Виконайте ці завдання прямо зараз:

1. 🔹 Детектив версій: Перевірте в терміналі версії Node, npm та Angular CLI. Запишіть їх. Чи є ваша версія Node.js парним числом (18, 20, 22)? Якщо ні — ви, ймовірно, скачали не LTS!

2. 🔹 "А що, якщо..." (Експеримент з помилкою): Спробуйте ввести в терміналі команду ng g c test. Ви отримаєте помилку. Завдання: Прочитайте текст помилки. Чому вона виникла? (Підказка: ми намагаємося створити компонент без проєкту). Це вчить вас не боятися червоного тексту.

3. 🔹 Дослідження npm: Зайдіть на сайт npmjs.com. Введіть у пошук @angular/cli. Подивіться на графік "Weekly Downloads" (тижневі завантаження). Питання: Скільки мільйонів розробників завантажили цей інструмент за останній тиждень? Ви тепер частина цієї спільноти.

4. 🔹 Міні-кейс: Очищення кешу (Симуляція): Іноді npm "забивається". Знайдіть в Google команду, як очистити кеш npm (npm cache clean). Це корисна навичка для майбутнього траблшутингу. Спробуйте запустити її з прапорцем --force.

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі ще на етапі інсталяції?

⛔️ Типова помилка новачка: Завантажити найновішу версію Node.js (Current), бо "нове — значить краще". Чому це погано: Багато бібліотек Angular можуть бути ще не адаптовані під найсвіжішу "бету" Ноди. Ви отримаєте дивні помилки, яких немає в інших. ✅ Як думає профі: "Мені потрібна стабільність. Я беру LTS, бо на ній працює весь бізнес".

⛔️ Типова помилка новачка: Бачити помилку "Permission denied" (Відмовлено в доступі) і впадати в паніку. ✅ Як думає профі: "Ага, системі не вистачає прав записати файл". * Windows: Запустити термінал від імені Адміністратора. * Mac/Linux: Додати магічне слово sudo перед командою (наприклад, sudo npm install...).

Порада з практики: Ніколи не запам’ятовуйте всі команди напам'ять. Головне — знати, що ви хочете зробити, а як це пишеться — підкаже ng help або Google.

6. 🧩 Підсумок

Отже, друзі, що ми маємо? Ми ще не написали жодного рядка коду, АЛЕ: 1. У нас є Node.js — фундамент і двигун. 2. У нас є npm — доступ до найбільшого у світі складу коду. 3. У нас є Angular CLI — наш потужний інструмент для генерації додатків.

Ви налаштували своє робоче місце. Ви готові творити.

У наступному епізоді: Ми використаємо CLI, щоб однією командою створити цілий всесвіт — ваш перший проєкт на Angular, і запустимо його в браузері. Готуйтеся, буде магічно! ✨

Це CS50... тобто, це був урок з основ Angular. 😉