API

DVOP WBB


Bc. Matěj Cajthaml — SSPŠ

©

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ě, ...

Co tedy na backendu budeme především řešit?

Kde je backend nutný a nevyhnutelný?

Jaké jsou výhody rozdělení backendu a frontendu na dvě různé části?

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

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

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?

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

Sociální síť

Práce

Zkusme navrhnout API (endpointy), které slouží k sociální síti, tedy: uživatelé, profily, příspěvky a další.

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

Datové formáty

Datové formáty

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

XML

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

Ukázka XML

Jak se liší HTML a 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?

Okolo API

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?

Koumání nad API

Práce

Najděte si nějakou stránku, která využívá API (resp. rozdělený FE a BE), a podívejte se jak vypadají jednotlivé endpointy a jak vypadají jejich data.

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

Nástroje pro HTTP

  • někdy potřebujeme dělat HTTP requesty i jinde než v kódu
  • existují různé nastroje:

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. Volejte různé endpointy a zkoušejte, co se stane.

Odpovězte na následující otázky do zadání.

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

K čemu toto API slouží? Co jednotlivé věci dělají a reprezentují?

Využití

Práce

Bodový základ: 3 body

Vymyslete využití na toto API. Svůj nápad zkuste v jakémkoliv jazyce a technologii implementovat.

Dokumentace API

  • různé nástroje a formáty
  • OpenAPI / Swagger

  • dokumentace verzování
  • dokumentace o přihlašování

Reflexe nad úkoly s API.

Děkuji za pozornost!

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