Praktický projekt —
REST API Klient

REST API — základní principy

REST (Representational State Transfer) je architektonický styl pro webová API. Definuje, jak klient (prohlížeč) komunikuje se serverem přes HTTP.

HTTP metody & status kódy

Nejdůležitější HTTP status kódy

Architektura projektu

Než napíšeme první řádek kódu, navrhujeme strukturu. Dobře navržená aplikace je snáze rozšiřitelná a testovatelná.

// Vrstvová architektura pro jednoduchý SPA
//
// UI vrstva (DOM, events, rendering)
//   ↕
// Business logika (validace, transformace dat)
//   ↕
// API vrstva (fetch, error handling, auth)
//   ↕
// REST API (server)

// Struktura souborů (vanilla JS projekt)
src/
  api/
    client.js        // base fetch wrapper
    contacts.js      // contacts CRUD metody
  components/
    ContactCard.js   // karta kontaktu
    ContactForm.js   // formulář pro přidání/editaci
    Toast.js         // notifikace
  utils/
    validate.js      // validační funkce
    format.js        // formátování dat
  app.js             // hlavní logika
index.htmlKopírovat

API wrapper — base client

// api/client.js — centrální místo pro všechny API volání
const BASE_URL = 'https://jsonplaceholder.typicode.com';

async function request(endpoint, options = {}) {
  const url = `${BASE_URL}${endpoint}`;
  const config = {
    headers: {
      'Content-Type': 'application/json',
      // 'Authorization': `Bearer ${getToken()}`,
      ...options.headers,
    },
    ...options,
  };

  try {
    const response = await fetch(url, config);
    if (!response.ok) {
      const error = await response.json().catch(() => ({}));
      throw new Error(error.message || `HTTP ${response.status}`);
    }
    // 204 No Content nemá tělo
    if (response.status === 204) return null;
    return response.json();
  } catch (error) {
    console.error(`API Error [${options.method || 'GET'} ${endpoint}]:`, error);
    throw error;
  }
}

// Exportované helperové funkce
export const api = {
  get:    (url)          => request(url),
  post:   (url, data)    => request(url, { method: 'POST',   body: JSON.stringify(data) }),
  put:    (url, data)    => request(url, { method: 'PUT',    body: JSON.stringify(data) }),
  patch:  (url, data)    => request(url, { method: 'PATCH',  body: JSON.stringify(data) }),
  delete: (url)          => request(url, { method: 'DELETE' }),
};Kopírovat

CRUD operace v praxi

Create, Read, Update, Delete — čtyři základní operace každé datové aplikace. Ukážeme je na příkladu správce příspěvků:

// api/posts.js — CRUD pro příspěvky
const BASE = 'https://jsonplaceholder.typicode.com';

// READ — seznam
export async function getPosts(limit = 10) {
  const res = await fetch(`${BASE}/posts?_limit=${limit}`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

// READ — detail
export async function getPost(id) {
  const res = await fetch(`${BASE}/posts/${id}`);
  if (!res.ok) throw new Error(res.status === 404 ? 'Nenalezeno' : `HTTP ${res.status}`);
  return res.json();
}

// CREATE
export async function createPost(data) {
  const res = await fetch(`${BASE}/posts`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json(); // vrátí vytvořený objekt s id
}

// UPDATE (kompletní)
export async function updatePost(id, data) {
  const res = await fetch(`${BASE}/posts/${id}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

// UPDATE (částečný)
export async function patchPost(id, fields) {
  const res = await fetch(`${BASE}/posts/${id}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(fields),
  });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

// DELETE
export async function deletePost(id) {
  const res = await fetch(`${BASE}/posts/${id}`, { method: 'DELETE' });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return true;
}Kopírovat

JavaScript komponenty bez frameworku

Frameworky (React, Vue) přinášejí komponentový model — ale základní principy lze implementovat i ve vanilla JS. Komponenta = funkce, která přijme data a vrátí HTML string nebo DOM element.

// Funkcionální komponenta — vrátí HTML string
function PostCard({ id, title, body, onDelete, onEdit }) {
  return `
    <article class="card" data-id="${id}">
      <h3 class="card-title">${escapeHtml(title)}</h3>
      <p class="card-body">${escapeHtml(body.substring(0, 100))}...</p>
      <div class="card-actions">
        <button class="btn-edit" data-id="${id}">✏️ Upravit</button>
        <button class="btn-delete" data-id="${id}">🗑️ Smazat</button>
      </div>
    </article>
  `;
}

// XSS ochrana — VŽDY escapujte user input!
function escapeHtml(str) {
  return String(str)
    .replace(/&/g, '&')
    .replace(//g, '>')
    .replace(/"/g, '"');
}

// Render seznam komponent
function renderPosts(posts, container) {
  container.innerHTML = posts.map(post => PostCard(post)).join('');
}

// Toast notifikace jako komponenta
function showToast(message, type = 'success') {
  const toast = document.createElement('div');
  toast.className = `toast toast-${type}`;
  toast.textContent = message;
  document.body.appendChild(toast);
  requestAnimationFrame(() => toast.classList.add('visible'));
  setTimeout(() => {
    toast.classList.remove('visible');
    setTimeout(() => toast.remove(), 300);
  }, 3000);
}Kopírovat

Kompletní CRUD aplikace

Spojíme vše dohromady — správce příspěvků s načítáním, přidáváním, editací a mazáním. Volá skutečné JSONPlaceholder API.