API для початківців

🤔 Що таке API?

API (Application Programming Interface) — це "офіціант" між твоїм додатком і сервером. Ти замовляєш дані — API приносить!

🌐 REST API та HTTP методи

REST — це архітектурний стиль для API. Він використовує стандартні HTTP методи:

📊 Коди відповідей

Сервер відповідає числовим кодом — він говорить чи все ок:

📦 JSON — мова API

JSON (JavaScript Object Notation) — формат даних, яким API обмінюється інформацією. Наведи мишку на рядки:

⚡ fetch() — отримуємо дані

fetch() — вбудована функція JavaScript для роботи з API. Натисни "Play", щоб побачити як це працює крок за кроком:

🔄 Два способи: .then() vs async/await

fetch('https://api.com/data')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error(err);
  });

async function getData() {
  try {
    const res = await fetch('url');
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

🧪 Спробуй API прямо зараз!

Натисни кнопку — і отримай реальні дані з API прямо тут:

📚 Каталог безкоштовних API

Ось найкращі безкоштовні API для твоїх проєктів:

🏗️ Створюємо свій API

А тепер створимо простий API на Node.js + Express!

const express = require('express');
const app = express();

// Масив з даними
const todos = [
  { id: 1, task: "Вивчити API", done: false },
  { id: 2, task: "Зробити проєкт", done: false },
  { id: 3, task: "Захостити сайт", done: true },
];

// GET — отримати всі задачі
app.get('/api/todos', (req, res) => {
  res.json(todos);
});

// GET — отримати одну задачу
app.get('/api/todos/:id', (req, res) => {
  const todo = todos.find(t => t.id === +req.params.id);
  todo ? res.json(todo) : res.status(404).json({ error: "Не знайдено" });
});

// Запускаємо сервер
app.listen(3000, () => {
  console.log('🚀 API працює на http://localhost:3000');
});

🚀 Ідеї проєктів з API

Ось проєкти, які ти можеш зробити прямо зараз:

📋 Підсумок