HTTP

70. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

Opakování

Jak můžeme definovat barvy v CSS?
Jak v SASS definujeme proměnnou?
Co je to kurzorová heatmap?
Jak se liší zápis v-on:click="fn" a @click="fn"?
Jakými způsoby můžeme selektovat hodnoty v DOM?

Opakování

  • OOP
  • Vue
    • direktivy
    • životní cyklus
    • komponenty
    • události
  • Vuex

Jak funguje protokol HTTP? Jak vypadá komunikace?

DOM ve Vue nepoužíváme. Proč?

Rychlý zápis tříd

Rychlý zápis stylů

HTTP

  • client-server protokol
  • ze začátku: přenos hypertextových dokumentů
  • nyní: přenos dat

  • požadavek (klient) odpověď (server)
  • textový formát, konce řádku \r\n

Požadavek (request)

  • uživatel (klient) se na něco ptá serveru
  • definujeme:
    • method — co na daném cíli (target) chceme dělat
    • target — na jakou URL se ptáme
    • version — v jaké verzi HTTP požadavek odesíláme
    • headers — hlavičky určující nějaké metadata
    • body — nějaké informace, data, které má server zpracovat

Jaké metody existují?

Metody

  • GET — na uvedený objekt, případné získání dat, nejpoužívanější, tělo je prázdné
  • POST — odesílá data na server podobně jako GET, hodí se na velká data, data jsou uvnitř těla
  • PUT — nahraje data na server
  • PATCH — částečné modifikace objektu na serveru
  • DELETE — smazání objektu na serveru
  • OPTIONS — získání informací jak s objektem lze komunikovat
  • HEAD, TRACE, CONNECT

Co je ale tím objektem?

Objekt (object, endpoint, zdroj) je daná URL adresa, na které se data upravují. Na serveru definujeme co je za daným objektem definováno.

Jak se liší PUT, PATCH a POST?

  • POST — odeslání dat, může mít různé následky na serveru
  • PUT — přenastaví již uložený objekt
  • PATCH — upraví již uložený objekt

Co ukládáme uvnitř hlaviček?

Je počet hlaviček omezen?

Hlavičky jsou vždy na novém řádku, na něm je jméno a hodnota rozdělené dvojtečkou a mezerou (: ).

Co pro požadavky platí?

  • bezestavové — nejsou na sebe vázané, opakované volání požadavků
  • některé jsou bezpečné — pouze akce čtení (jaké?)
  • uložitelné — požadavky lze uložit a volat je opakovaně
  • idempotentní — volání požadavku opakovaně nemění stav serveru (jaké?)

Proč je metoda první částí dat?

Odpověď (Response)

  • server obdrží požadavek
  • požadavek zpracuje (případně odmítne)
  • a odešle odpověď
  • definujeme:
    • statusCode — číslo označující výsledek požadavku
    • statusText — lépe čitelnější odpověď (OK, Upgrade Required, Not found)
    • version — v jaké verzi HTTP požadavek odesíláme
    • headers — hlavičky určující nějaké metadata
    • body — nějaké informace, data, které vrací uživateli

Statusové kódy

  • 1xx — informační (požadavek přijat, pokračuje, ...)
  • 2xx — úspěch
  • 3xx — přesměrování
  • 4xx — chyba požadavku (klienta) nebo nelze zpracovat
  • 5xx — chyba serveru (požadavek může být v pořádku)

https://http.cat

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

Může HTTP předávat HTML?

Backend

  • server (nebo část serveru)
  • zpracovává logickou část aplikací
  • připojení k databázi (dlouhodobé ukládání dat)
  • letos a příští rok si ukážeme základy

Kde je nutný backend?

Co se na backendu děje?

API

  • = Application Programming Interface
  • Web API
  • komunikační vrstva mezi backendem a frontendem
  • v podstatě se s ní setkáte všude
  • komunikujeme pomocí HTTP
  • webová služba
  • balíček URL zdrojů a operací

Znáte nějaké API?

Pokuste se API k nějaké službě najít.

REST

  • architektonický vzor k vytváření moderního API
  • když API dodržuje REST, říkáme, že je RESTful
  • požadavky:
    • volání akcí, nýbrž práce se zdroji
    • každý zdroj je jednoznačně určen URL
    • práci určují HTTP metody
    • jeden zdroj může mít více reprezentací
    • zdroje jsou navzájem propojené a API je linkuje

REST API URI

https://api-ssps.cajthaml.eu
/subject/61253075a238ce375c4ade63
/grading
/user/612539031a6bab58d056b34b

CRUD

  • = CREATE READ UPDATE DELETE
  • určuje, jaké akce by na zdrojích měly být k dispozici

Nyní víme, jak se komunikuje v HTTP.

Jakými formáty lze předávat data (tělo/body) v API?

Datové formáty

  • čistý text
  • XML
  • JSON
  • a další

XML

  • rodič HTML
  • byl vytvořen na předávání dat
  • nejsou definované žádné elementy

Jak se liší HTML a XML?

Ukázka XML

Může API předávat data ve formátu HTML?

JSON

  • = JavaScript Object Notation
  • stručný formát na předávání dat
  • čte se dobře strojově ale i lidmi
  • velmi se podobá obyčejnému JS (objekty a pole)

JSON datové typy

  • řetězec
  • číslo
  • objekt
  • pole
  • null

Ukázka JSON

Jak se liší JSON a JS zápis objektů?

Je tento zápis JSON platný?

Jaké výhody a nevýhody má plaintext, XML a JSON?

Platí tyto formáty pouze pro komunikaci Server → Klient?

Verzování API

  • číslování
  • oznámení
  • doby běhu

Kdy je potřeba změnit verzi API?

DevTools + Network

Jak funguje protokol HTTP? Jak vypadá komunikace?

Šmírování

Práce

Otevřete si nějakou stránku a podívejte se na požadavky, které probíhají. Jak vypadají data požadavků? Jaké mají metody? Nalezněte něco zajímavého.

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/