Rychlý zápis tříd

Rychlý zápis stylů

HTTP

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

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

• 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

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é?)

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

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?

Správa obsahu

Práce

Zkusme navrhnout API (endpointy), které slouží ke správě obsahu na webových stránkách. Tedy: příspěvky, uživatele, komentáře a další.

E-shop

Práce

Zkusme navrhnout API (endpointy), které slouží ke správě obchodu (bez administrace), tedy: předměty, přihlášení, košík, objednávka a další.

AJAX

• = Asynchronous JavaScript And XML
• dovoluje nám vytvářet dynamické stránky
• prakticky získáváme údaje pro stránku v kódu
• není nutné refreshovat stránku
• odesílání dat na server

Odesílání požadavků

• požadavky odesíláme pomocí XMLHttpRequest
• jsou to předpřipravené třídy určené k odesílání požadavků
• jako v HTTP definujeme metodu, cíl, hlavičky a další

Ukázka XMLHttpRequest

Líbí se Vám tento postup?

Odesílání pomocí FetchAPI

• modernější než XMLHttpRequest
• CanIUse Fetch
• zcela využívá Promises

Ukázka Fetch

Jak Fetch dokázal přečíst string JSONu do objektů?

• v JS máme k dispozici třídu JSON
• dovoluje převádět JSON ⟷ string
• JSON.stringify(obj)
• JSON.parse(str)

Ukázka JSON

CORS

• = Cross-origin resource sharing
• mechanismus zabezpečení webové stránky
• každý server si může říct, jaké domény mají k datům přístup
• prohlížeč potom tyto nastavení kontroluje

CORS hlavičky

• Access-Control-Allow-Origin: https://cajthaml.eu
• Access-Control-Allow-Origin: *
• odesílá server např. při požadavku OPTIONS

Morsmordre (ukázkové API)

Práce

V službách na portálu si zařidte přístup k ukázkovému API. Najděte dokumentaci API, vytvořte si účet a prozkoumejte API.

Odpovězte na následující otázky:

• (question_1) Je API RESTful? Zdůvodněte.
• (question_2) Kolik endpointů má API?
• (question_3) Jak API pozná, že jste přihlášen?

Sestavení Vue aplikace

• soubory .vue nejsou v prohlížeči zobrazitelné
• npm run dev nám při změně naší aplikaci sestaví znovu
• chceme-li nahrát webovou stránku, musíme jí sestavit
• npm run build

Co vlastně sestavení dělá?

• vezme soubory a ty zredukuje na balíčky
• jednotlivé komponenty se uloží do JS kódu, který umí dle našich šablon generovat HTML, které se vkládá do stránky
• reálně sestavená aplikace obshauje pouze HTML, který najedeme v public/index.html s odkazy na JS balíčky
• v případě, že používáme balíčky se zabalí společně se JS

Změna hlavní složky

V hlavní složce založíte soubor vue.config.js ve kterém nastavíte následující:

Json Web Token

• = jwt
• způsob ověření identity na internetu mezi dvěma identity
• nejčastěji vydává server a používá jen klient
• dlouhý string rozdělen do několika částí

Vzhled JWT

hhhhhhh.ppppppp.sssssss

• h: BASE64 hlavička (headers)
• p: BASE64 tělo (payload)
• s: podpis h a p

Hlavička

• ukládá informaci o samotném jwt
• že se jedná o JWT
• jaký hashovací algoritmus byl použit (HMAC, RSA, ECDSA, ...)

Tělo

• ukládá informaci o datech, které se s JWT přesouvájí
• často údaje, které potřebuje server k ověření — jaké?

Život tokenu

• server připraví jaké informace chce uložit
• server vytvoří JWT s daty, který podepíše (heslem, certifikátem)
• server odešle token klientovi
• klient si token uloží a používá ho na požadavky
• server při obdržení tokenu jej validuje, zda jej podepsat opravdu on (heslem, certifikátem)

Speciální hodnoty

• většinou kontrolují balíčky
• v tělíčku
• iat — issued at
• exp — expiration date

Balíček JWT

• na npm existuje balíček jsonwebtoken
• validace (vrácení payload): require("jsonwebtoken").verify(token, key)
• podepsání: require("jsonwebtoken").sign(data, key)


• https://jwt.io

Framework

• předpřipravené funkcionality
• design, komponenty, ...

Vue frameworky

Práce

Nalezněte nějaké frameworky pro Vue. Najděte nějaký, který se Vám designově libí. Podívejte se, jak se instaluje a jak se například používají komponenty.

Ukázka Vuetify!

Zvuk

• různé prohlížeče podporují různé formáty
• nejčastěji MP3, WAV a OGG
• co vlastně ve zvukových souborech ukládáme?

audio

• atributy: controls, muted, autoplay, loop
• události: pause, play, ended, seeked
• DOM metody: load, play, pause, canPlayType

Zvuk v JS

Opakování animací

Obrázkové animace

• na webu často potřebujeme pokročilejší pohyb
• GIF — proč se často nevyužívá?
• SVG animace pomocí CSS
• videa

SVG

• (zejména) vektrová grafika pro webové stránky
• různé matematické rovnice
• neomezené rozlišení → lze zmenšovat a zvětšovat bez ztráty kvality
• formát XML

SVG

Práce

Najděte nějaký SVG soubor a podívejte se na jeho obsah. Poté se podívejte, zda a případně jak lze SVG animovat.

Knihovny pro animace

• LottieFiles (SVG, malé)
• Greensock [GSAP] (SVG, canvas, ...)
• p5.js (canvas)
• three.js (canvas)

OAuth 2.0

• autorizační framework
• definuje standardy jak probíhá přihlašování
• především komunikace třetích stran s API
• přístup bez nutnosti uživatele
• založen na přístupových tokenech

Role v OAuth

• resource owner = přiřazení práv k prostředkům
• resource server = příjímání požadavků s tokenem
• client = aplikace dělající požadavky
• authorization server = autorita vydávající tokeny

    +--------+                               +---------------+
    |        |--(A)- Autorizační požadavek ->|    Majitel    |
    |        |                               |   prostředku  |
    |        |<-(B)- Autorizační povolenka --|               |
    |        |                               +---------------+
    |        |
    |        |                               +---------------+
    |        |--(C)- Autorizační povolenka ->|  Autorizační  |
    | Klient |                               |     server    |
    |        |<-(D)--- Přístupový token -----|               |
    |        |                               +---------------+
    |        |
    |        |                               +---------------+
    |        |--(E)--- Přístupový token ---->|     Server    |
    |        |                               |   prostředků  |
    |        |<-(F)------- Prostředek -------|               |
    +--------+                               +---------------+
                    

Autorizační povolenka

• = authorization grant
• různé způsoby
• Authorization Code
• Implicit
• Client credentials grant
• Resource Owner Password Credentials

Autorizační kód

1. klient přesměruje uživatele na autorizační stránku serveru s parametry
2. po schválení bude uživatel přesměrován zpátky do aplikace s autorizačním kódem
3. aplikace si pomocí získaného autorizačního kódu získá přístupový token na autorizační server

Jaké parametry půjdou s požadavkem 1.?

Implictní

• velmi podobný Autorizačnímu kódu
• vynechává se poslední krok (č. 3)
• přístupový token se získává hned v kroku č. 2

Refresh tokens

• nepovinný obnovovací token
• díky němu lze po expiraci přístupového tokenu nový
• autorizační server

Access tokens

• = přístupový token
• náhodný textový popis
• zašifrovaná zpráva (podepisuje aut. server)
• JWT

Registrace klienta

• pro přístup třetích stran do přihlašování je nutné zaregistrovat klienta
• informace o aplikaci
• typ klienta
• zpětné odkazy

Více o OAuth2

https://oauth.net/2/

IETF