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

🎓 Урок: Query Parameters (Параметри запиту)

👋 Вітаю! Радий бачити вас знову.

Давайте почнемо з простого запитання. Уявіть, що ви заходите до величезної бібліотеки, де мільйони книг. Ви підходите до бібліотекаря і кажете: "Дайте мені книгу".

Що зробить бібліотекар? Він подивиться на вас і запитає: "Яку саме? Про що? Якого автора?".

В Інтернеті — те саме. Ваш браузер (клієнт) постійно звертається до сервера (бібліотекаря). Якщо ви просто стукаєте на сайт, сервер віддає вам "головну сторінку". Але що, як ви хочете знайти конкретні кросівки, відфільтрувати готелі за ціною або відкрити YouTube-відео на конкретній хвилині?

Ви не можете створювати нову окрему сторінку для кожної можливої комбінації кросівок, правда ж? Це було б безумством.

Сьогодні ми розберемося, як уточнити своє бажання для сервера. Як сказати не просто "дай дані", а "дай мені ось ці конкретні дані".

Тема нашого уроку — Query Parameters (Параметри запиту). Поїхали! 🚀

1. 🔥 Вступ: проблема та мотивація

Уявіть, що ви розробляєте інтернет-магазин. У вас у базі даних 50,000 товарів. Користувач заходить за посиланням: https://myshop.com/products

Сервер чесно намагається віддати всі 50,000 товарів одразу. Питання: Що станеться з телефоном користувача? Відповідь: Він зависне, браузер "впаде", а користувач піде до конкурентів.

Нам потрібен механізм, щоб сказати серверу:

"Друже, не давай мені все. Дай мені тільки футболки, тільки червоні і тільки перші 10 штук".

Без Query Parameters інтернет був би статичним набором сторінок, як газети. З ними — це динамічний діалог між вами та сервером.

2. 🧠 Теоретична база (Що там "під капотом"?)

Давайте розберемо анатомію URL-адреси. У нас є "база" — адреса будинку (домен) і конкретні двері (шлях або path).

А Query Parameters — це записка, яку ви передаєте у ці двері.

Як це виглядає?

https://google.com/search?q=cats&lang=ua

Розберемо цей "хвіст" крок за кроком:

? (Знак питання) — це кордон. Все, що зліва — це "куди ми йдемо". Все, що справа — це "деталі нашого запиту". Як тільки сервер бачить ?, він розуміє: "Ага, далі йдуть параметри".
key=value (Ключ=Значення) — це сама інформація.
- q (query) — це ключ (ім'я змінної).
- cats — це значення (що ми шукаємо).
& (Амперсанд) — це клей. Якщо параметрів декілька, ми з'єднуємо їх цим значком.
- Переклад: "І ще..."

💡 Логіка роботи:

Ви не змінюєте файл, до якого звертаєтесь. Ви змінюєте результат виконання коду на сервері.

Аналогія: Ви замовляєте каву. * Ендпоінт: /coffee (це сама дія замовлення). * Query Params: ?sugar=2&milk=oat&size=large.

Кавомашина та сама. Бариста той самий. Але на виході ви отримуєте унікальний напій саме під ваш смак.

❗️ Що треба запам'ятати залізно:

Параметри йдуть після знака ?.
Вони відкриті (їх бачать усі в адресному рядку, тому ніколи не передавайте там паролі!).
Порядок параметрів зазвичай не важливий (a=1&b=2 те саме, що b=2&a=1), але це залежить від реалізації сервера.

3. 🧪 Приклади (від простого до реального)

Приклад 1: Простий пошук

Уявімо, ми пишемо пошук для сайту новин.

Запит: GET /news?topic=tech

Що ви очікуєте побачити? (Подумайте секунду...)

Результат: Сервер фільтрує базу новин і віддає список статей, де категорія — "Технології". Спорт і політику він ігнорує.

Приклад 2: Пагінація (Pagination)

Це класика. Ви не можете показати 1000 товарів на одній сторінці.

Запит: GET /products?page=2&limit=20

Розбір: * page=2: Користувач клікнув на "Сторінка 2". * limit=20: Показувати по 20 товарів на сторінці.

Як думає сервер: "Так, мені треба пропустити перші 20 товарів (бо це була 1-ша сторінка) і віддати наступні 20".

Приклад 3: Сортування та складні фільтри

Реальний кейс інтернет-магазину одягу.

Запит: GET /shoes?size=42&color=black&sort=price_desc

Що тут відбувається? 1. Відфільтруй взуття 42 розміру. 2. Залиш тільки чорне. 3. Відсортуй від найдорожчого до найдешевшого (price_desc — descending).

Якби ми помилилися і написали ?size=42color=black (забули &), сервер подумав би, що ми шукаємо розмір під назвою "42color=black", і повернув би порожній список або помилку. Синтаксис важливий!

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

Час "забруднити руки" кодом. Уявіть, що ви працюєте з API вигаданого сервісу Netflix.

Завдання 1: Повторення Сформуйте URL, щоб отримати список фільмів (endpoint /movies), які мають жанр "comedy". (Запишіть варіант або уявіть його).

Завдання 2: Додаємо деталі Тепер до попереднього запиту додайте умову: фільми мають бути випущені у 2023 році. (Підказка: використовуйте &).

Завдання 3: Debugging (Знайди помилку) Користувач скаржиться, що посилання не працює. Ось воно: https://api.netflix.com/movies&actor=Dicaprio?sort=rating Що тут не так? Чому сервер не розуміє запит?

Завдання 4: Реальний кейс (YouTube) Ви, напевно, ділилися посиланням на відео з таймкодом. Посилання виглядає так: youtube.com/watch?v=dQw4w9WgXcQ&t=45s * Що тут є key, а що value? * Змініть параметр так, щоб відео почалося з 2-ї хвилини (120 секунд).

Завдання 5: А що, якщо... Що станеться, якщо я відправлю параметр, який сервер не очікує? Наприклад: GET /movies?favorite_food=pizza Сервер зламається? Чи просто проігнорує це? (Спробуйте здогадатися логічно).

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

Як відрізнити новачка від профі, дивлячись на Query Parameters?

❌ Типова помилка новачка:

Впихувати все в один рядок вручну.

// Погано
const url = "https://api.com/users?name=" + userName + "&age=" + userAge;

Чому це погано? А що, як userName буде "Ivan & Petro"? Символ & зламає ваш URL, бо сервер подумає, що починається новий параметр.

✅ Як думає профі:

URL Encoding: Профі знає, що пробіли, &, ? та емодзі в значеннях треба кодувати. (Пробіл стає %20, наприклад). Профі використовує спеціальні функції для побудови рядка (наприклад, URLSearchParams у JavaScript).
Безпека: Профі ніколи не передає password або token у Query Parameters. Чому? Тому що ці посилання зберігаються в історії браузера, в логах сервера, в логах провайдера. Будь-хто, хто гляне в історію, вкраде доступ.
Валідація: Профі знає, що користувач може руками вписати в URL ?page=-5 або ?limit=999999. Сервер завжди має перевіряти ці дані, а не сліпо вірити їм.

6. 🧩 Підсумок

Отже, що ми сьогодні розібрали?

Query Parameters — це спосіб уточнити запит до сервера без зміни адреси сторінки.
Вони починаються з ?, розділяються & і складаються з пар ключ=значення.
Вони критично важливі для пошуку, фільтрації, сортування та пагінації.
Ми навчилися їх читати, складати та уникати дитячих помилок з безпекою.

Що ви тепер вмієте? Ви вмієте говорити з сервером точно. Ви не просто тицяєте пальцем в небо, ви формуєте конкретний запит на отримання даних.

🔜 Тизер наступного уроку: Сьогодні ми вчилися просити дані (метод GET). А як щодо того, щоб відправити дані на сервер, щоб зберегти їх у базі (наприклад, реєстрація або пост в Інстаграм)? Параметри в URL для цього не підходять (надто малі й небезпечні). Наступного разу ми заглянемо "всередину" конверта запиту — у Body та розберемо POST-запити.

Це був CS50... тобто, ваш урок інформатики. Побачимось! 🎬