Модуль 2

HTTP, REST і як працюють API

Ось готовий урок, створений спеціально для тебе у стилі David Malan. Вмикай уяву — ми починаємо! 🚀

🎓 Урок: HTTP, REST і магія API

Привіт, друзі! Ласкаво просимо. Це CS50... ну, майже 😉.

Сьогодні ми зазирнемо під капот інтернету. Ви коли-небудь замислювалися, як ваш смартфон дізнається погоду? Або як Instagram підтягує нові фото, навіть якщо ви не оновлювали весь додаток?

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

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

Звісно, ні. Це безумство. Ви хочете використати карту, яка вже є у Google. Але як ваш код (на вашому сервері) "поговорить" із сервером Google?

  • Ви не можете просто залізти в базу даних Google (вас заарештують).
  • Ви не можете просто скопіювати їхній код.

Вам потрібен посередник. Вам потрібен спосіб безпечно постукати у двері Google і сказати: "Гей, дай мені шматочок карти для цієї координати, будь ласка".

І ось тут на сцену виходять HTTP та API. Без них інтернет був би просто набором ізольованих комп'ютерів, які мовчать. API — це клей, який тримає весь сучасний світ софту разом.

Готові розібратися, як цей клей працює? Поїхали!

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

Давайте розберемо це на найвідомішій аналогії у світі IT — Ресторан.

🍽 Що таке API (Application Programming Interface)?

Уявіть, що ви — клієнт у ресторані (Клієнт / Frontend). На кухні є шеф-кухар, який готує їжу (Сервер / Backend / Database).

Ви не можете просто забігти на кухню і почати смажити собі стейк. Це буде хаос. Вам потрібен Офіціант.

Офіціант — це і є API. 1. Він дає вам Меню (документація: що можна замовити). 2. Він приймає ваше замовлення (Request). 3. Він несе його на кухню. 4. І повертає вам готову страву (Response).

📬 Що таке HTTP?

Якщо API — це офіціант, то HTTP (HyperText Transfer Protocol) — це мова, якою ви спілкуєтеся з офіціантом. Це правила етикету. Ви не можете просто кричати. Є чітка структура діалогу.

Ось 4 дієслова (методи), які треба знати залізно:

  1. GET — "Принеси мені меню/каву" (Отримати дані). Найчастіший запит.
  2. POST — "Я хочу замовити нову страву" (Створити нові дані). Ви надсилаєте інформацію серверу.
  3. PUT / PATCH — "Я передумав, заміни колу на сік" (Оновити дані).
  4. DELETE — "Забери цю тарілку" (Видалити дані).

🚦 Коди відповіді (Status Codes)

Коли сервер відповідає, він спочатку каже код. Це як вираз обличчя офіціанта:

  • 200 OK — 😊 "Все супер, ось ваше замовлення".
  • 201 Created — 🎉 "Успішно створено" (наприклад, новий акаунт).
  • 400 Bad Request — 🤨 "Я не зрозумів, що ви сказали" (помилка клієнта).
  • 401 Unauthorized — 👮‍♂️ "А ви хто? Покажіть перепустку" (треба логін).
  • 404 Not Found — 🤷‍♂️ "Такої страви немає в меню".
  • 500 Internal Server Error — 🔥 "На кухні пожежа!" (помилка сервера, ви не винні).

🏛 Що таке REST?

REST (Representational State Transfer) — це просто стиль архітектури. Це як "Фен-шуй" для ваших посилань. Можна зробити посилання як завгодно, але REST каже: "Давайте будемо логічними".

  • Погано (Не REST): google.com/addNewUser або google.com/deleteUserPlease
  • Добре (REST):
    • POST /users (Створити юзера)
    • DELETE /users/15 (Видалити юзера №15)

Інтуїтивно: В REST URL — це іменник (ресурс), а HTTP-метод — це дієслово (дія).

3. 🧪 Приклади (Дивимось на код)

Приклад 1: Простий GET (Читаємо новини)

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

Запит (Request):

GET /news/latest HTTP/1.1
Host: api.supernews.com
Accept: application/json

(Переклад: Ей, сервере supernews! Дай мені останні новини у форматі JSON)

Відповідь (Response):

HTTP/1.1 200 OK
Content-Type: application/json

{
  "title": "Штучний інтелект захопив світ!",
  "date": "2024-05-20",
  "views": 5000
}

❓ Питання до вас: Що сталося б, якби ми відправили цей запит, але новина була б видалена вчора? Який код ми б отримали? (Подумайте секунду...) . . . Правильно: 404 Not Found.

Приклад 2: REST у дії (Інтернет-магазин)

У нас є ресурс: Товари (products).

Подивіться, як красиво і логічно це виглядає в REST:

Дія Метод URL (Шлях) Пояснення
Показати всі товари GET /products "Дай список всього"
Показати товар №42 GET /products/42 "Дай конкретний товар"
Додати новий iPhone POST /products (У тілі запиту лежить опис iPhone)
Змінити ціну товару №42 PATCH /products/42 (У тілі: {price: 999})
Видалити товар №42 DELETE /products/42 "Знищити це!"

Бачите? URL майже не змінюється. Змінюється лише Метод (дієслово). Це і є краса REST.

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

Час закачати рукави. Уявіть, що ви розробляєте бекенд для соціальної мережі "MeowGram" (Instagram для котів).

Завдання 1: Правильний метод Користувач хоче поставити лайк котику. Який метод HTTP ви використаєте? а) GET б) POST в) DELETE

Завдання 2: Склади URL Нам треба отримати список усіх коментарів для фотографії з ID 100. Використовуючи логіку REST, як має виглядати цей URL? (Підказка: коментарі належать фотографії).

Завдання 3: Детектив Ви відправили запит на створення нового поста, але сервер відповів 401 Unauthorized. Що ви забули зробити?

Завдання 4: Міні-кейс Спроєктуйте API для бібліотеки. Напишіть пари "Метод + URL" для трьох дій: 1. Знайти книгу за ID. 2. Додати нову книгу. 3. Змінити статус книги на "Видано читачу".

Завдання 5: "А що, якщо..." Що станеться, якщо ви спробуєте зробити GET запит, але передасте йому в тілі (Body) гігантське відео? Чому так не роблять?

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

Як відрізнити новачка від профі?

  1. Новачок називає URL як попало: /getBooks, /createUserHere, /delete_book_final. Профі використовує іменники: /books, /users. Він поважає REST.

  2. Новачок ігнорує статус-коди. Він завжди повертає 200, навіть якщо сталася помилка, і пише текст помилки в JSON. Профі використовує правильні коди (404, 500, 403). Це дозволяє програмам автоматично розуміти, що пішло не так.

  3. Безпека. Профі знає: Ніколи не довіряй тому, що прийшло від клієнта. Якщо клієнт надсилає DELETE /users/1, сервер повинен спочатку перевірити: "А цей чувак взагалі адмін? Чи він має право це видаляти?".

Золоте правило: API — це продукт. Ним будуть користуватися інші розробники (або ви самі через місяць). Зробіть його зрозумілим!

6. 🧩 Підсумок

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

  • API — це офіціант, який з’єднує різні програми.
  • HTTP — це мова спілкування (GET, POST, PUT, DELETE).
  • REST — це правило хорошого тону, щоб ваші посилання були логічними та передбачуваними.
  • JSON — це формат даних, у якому приходять відповіді (ми це бачили у прикладах).

Тепер ви не просто "пишете код", ви вмієте будувати мости між системами. Ви можете взяти дані погоди, курси валют або список фільмів і вбудувати їх у свій додаток.

Що далі? Ви запитаєте: "Девіде, а як же безпека? Якщо я зроблю API, чи зможе будь-хто видалити мою базу даних?" Відмінне питання! У наступному уроці ми поговоримо про Автентифікацію, Токени та API Keys. Як зробити так, щоб ваш офіціант обслуговував тільки VIP-клієнтів.

А на сьогодні це все. Це був CS50! 🏛️

Відповіді до завдань (для самоперевірки):

  • З1: б) POST (бо ми створюємо новий ресурс — лайк).
  • З2: GET /photos/100/comments.
  • З3: Ви забули залогінитися або передати токен доступу.
  • З4: GET /books/1, POST /books, PATCH /books/1.
  • З5: GET призначений для отримання даних, сервери часто ігнорують тіло в GET-запитах або це призведе до помилки кешування.
← До списку уроків Наступний урок →