Webové aplikace

Webové aplikace

• chytré webové stránky
• dynamické, ne-statické, interaktivní
• pouze základy JS ve WBA
• eshopy, aukce, osobní stránky, portály, ...
• rozdělujeme na frontend a backend

Frontend

Frontend

• vše co vidí uživatel
• důležitá část — jediné, s čím uživatel přímo interaguje
• design stránky
• user experience & user interface (UX & UI)

Technologie

• jazyky: HTML, CSS, JS
• framework
• frameworky: Vue, React, Angular

Backend

Backend

• vše co nevidí uživatel
• důležitá část — její rychlost a stabilita
• data, databáze, e-maily, komunikace, kalkulace, zpracování, ...
• hlavní náplň předmětu

Technologie

• jazyky: PHP, JS, Java, C#
• frameworky: JS — express, PHP — nette

Fullstack

• propojení frontendu a backendu
• většinou programátor, pozice ve firmě, ...

HTTP

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


• požadavek (klient) a 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

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 s metodou, 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

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

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í?

• bezstavové — 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é?)

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