nmk

Лабораторне заняття №21 (2 години). Створення власного міні-API (Node.js).

Мета

Зрозуміти базові принципи побудови бекенду. Написати перший у житті веб-сервер на базі середовища Node.js та фреймворку Express.js. Створити власний REST API маршрут, який віддаватиме JSON-масив товарів (замінивши чужий сервер FakeStoreAPI).

План

1. Ініціалізація бекенд-проекту (npm init -y) поруч із фронтендом.
2. Встановлення express та налаштування CORS.
3. Створення сервера у файлі server.js.
4. Написання GET маршруту /api/products (створення свого FakeStoreAPI).
5. Зв’язування власного фронтенду React із власним бекендом Node.js.

Хід роботи

Увага: До цього моменту ваш браузер робив запити (fetch) на публічний чужий API в Інтернеті. Тепер ми станемо “творцями” власного API, тим самим отримавши повний Full-Stack додаток!

1. Ініціалізація Backend (Серверна частина):
   • У кореневій теці вашого сховища (поруч з папкою вашого React-додатка, НЕ ВСЕРЕДИНІ неї!) створіть нову папку techshop-backend.
   • Відкрийте цю теку в терміналі. Виконайте: npm init -y (це створить package.json сервера).
   • Встановіть необхідні бібліотеки:

     npm install express cors
     npm install --save-dev nodemon
     

2. Запуск сервера (Express JS):
   • У цій же папці створіть файл server.js.

   • Вставте базовий кістяк сервера:

     const express = require("express");
     const cors = require("cors"); // Дозволяє браузерам робити запити з інших портів (React на 5173 -> Node на 3000)
     
     const app = express();
     const PORT = 3000;
     
     // Вмикаємо парсинг JSON та CORS
     app.use(express.json());
     app.use(cors());
     
     // Наша "База Даних" в оперативній пам'яті (заглушка)
     const myProducts = [
       {
         id: 1,
         title: "Супер Смартфон X",
         price: 999,
         image: "https://via.placeholder.com/150",
       },
       {
         id: 2,
         title: "Ігровий Ноутбук Y",
         price: 1599,
         image: "https://via.placeholder.com/150",
       },
       {
         id: 3,
         title: "Бездротові Навушники Z",
         price: 199,
         image: "https://via.placeholder.com/150",
       },
     ];
     
     // СТВОРЮЄМО GET Маршрут (Endpoint)! Ось де магія:
     app.get("/api/products", (req, res) => {
       // Коли хтось стукає за адресою /api/products, ми повертаємо масив myProducts
       res.status(200).json(myProducts);
     });
     
     // Запускаємо прослуховування порту
     app.listen(PORT, () => {
       console.log(`Бекенд сервер працює на http://localhost:${PORT}`);
     });
     

   • Запустіть сервер командою npx nodemon server.js. (Nodemon буде автоматично перезапускати сервер при зміні коду).
3. Перевірка API браузером:
   • Відкрийте в браузері http://localhost:3000/api/products.
   • Ви побачите чистий JSON. Вітаємо, ви створили власний FakeStoreAPI =).
4. Зміна Фронтенду (React):
   • НЕ закриваючи термінал із бекендом, відкрийте НОВУ вкладку терміналу і запустіть ваш фронтенд (npm run dev).
   • Відкрийте src/pages/Home.jsx. Знайдіть ваш хук useEffect.

   • Замініть рядок:

     // БУЛО: const response = await fetch('https://fakestoreapi.com/products?limit=8');
     
     // СТАЛО: (робимо запит до НАШОГО власного локального сервера)
     const response = await fetch("http://localhost:3000/api/products");
     

   • Оновіть сторінку в браузері. React завантажить ваші три тестових товари “Супер Смартфон X” та ін. з вашого власного сервера (Node.js).
5. Збереження (Commit & Push):
   • Виконайте git add . (з кореневої папки, щоб охопити і бекенд, і фронтенд).
   • Закомітьте: git commit -m "Create local Node.js Express backend and link React to it".
   • Запушіть зміни.

Результат

Перехід від Frontend до Full-Stack. Ви навчились створювати RESTful кінцеві точки (endpoints) на “чистому” JavaScript (серверна версія Node.js) та об’єднувати їх із клієнтським додатком на React.

Контрольні питання

1. Яка різниця між виконанням JavaScript-коду в браузері (Chrome) і на сервері (середовище Node.js)? Чому в Node.js немає об’єкта window або document?
2. Для чого в бекенд-додатках (Express.js) потрібен пакет cors (Cross-Origin Resource Sharing)? Яку помилку в консолі браузера (Chrome DevTools) він вирішує?
3. Чим метод app.get() відрізняється від app.post() у термінах REST API? За що відповідають об’єкти req та res у колбек-функції?
4. Якщо ми зупинимо сервер в терміналі (Ctrl+C), що побачить користувач на React-клієнті, завдяки нашому блоку try...catch?
5. Напишіть, у якому вигляді повертається відповідь за допомогою метода res.status(200).json(myProducts). Як розшифровується число статусу 200?