LAB12 - nvbach91/4IZ268-2021-2022-ZS GitHub Wiki

Vývoj webových aplikací - JavaScript

Obsah

  • REST API
  • Procvičování AJAX
  • OAuth
  • HTML5 Browser API
  • Bootstrap demo
  • Pokyny k odevzdání SP2
  • domácí úkol

Využití externích zdrojů REST API

  • jsou to servery, kam lze dotazovat na zdroje nebo posílat data z klienta
  • protokol HTTP/S
  • typy požadavků: GET, POST, PUT, DELETE, ...
  • stavové kódy HTTP https://en.wikipedia.org/wiki/List_of_HTTP_status_codes
  • mohou mít autentizaci (vyžadují registraci, přihlášení nebo API klíče), v tom případě je potřeba ji naimplementovat podle dokumentace služby

URL Parametry, URL Path a Request Payload

  • v URL lze dodat informace pro upřesnění požadavku tzv. query params
  • v případě požadavku GET se tyto parametry dávají do URL v podobě klíč=hodnota:
    • nejprve přidáme otazník ?
    • pak postupně přidáváme parametry id=1, source=official
    • parametry oddělíme ampersandem &
    • např. https://example.com/api/users?id=1&source=official
    • např. https://samples.openweathermap.org/data/2.5/weather?q=London,uk&appid=b6907d289e10d714a6e88b30761fae22
    • pokud se v parametrech vyskytují s diakritikou nebo znaky speckiální, je potřeba je zakódovat - https://www.w3schools.com/tags/ref_urlencode.asp
  • některé REST API tyto parametry schovají pod tzv. URL Path, tj. podle pořadí parametrů
    • např. https://reqres.in/api/users/2
    • např. https://pokeapi.co/api/v2/pokemon/1/
  • v případě POST požadavku se parametry dávají do datového objektu tzv. Payload
  • co použít záleží na specifikaci serveru

Procvičování AJAX GET

  • napište jQuery příkaz pro stažení údajů o libovolném pokemonu z https://pokeapi.co a vypište na stránku jejich ID, jméno, typ, hmotnost, a výšku
  • napište jQuery příkaz pro stažení údajů o uživatelích z https://jsonplaceholder.typicode.com a vypište jejich jména a email na stránku do uspořádaného seznamu
  • napište jQuery příkaz pro stažení údajů o uživatelích z https://reqres.in/ a vypište jejich jména a email na stránku do uspořádaného seznamu. Tento endpoint vrací data v určitém počtu výsledků tzv. stránkování. Vytvořte navigační tlačítka (předchozí, následující) pro toto stránkování, tj. aktualizujte seznam uživatelů po kliknutí na stránkování.

Procvičování AJAX POST, PUT, DELETE

Pravidlo pro volání AJAXu ve webových aplikacích

  • pokud voláte AJAX požadavek někam na server, je potřeba uživateli zobrazit nějaký "loader" buď přes celou obrazovku nebo lépe na nějakém určeném místě, aby mohl dále prohlížet stránku
  • po skončení volání, tj. v momentě kdy dostanete odpověď, "loader" zase schováte

Problém s CORS policy

  • Cross-Origin Resource Sharing (CORS) je způsob jak zpřístupnit vybraná data z vybraných zdrojů tzv. originu
  • cross-origin HTTP požadavek znamená, že webová aplikace pošle tento požadavek na URL, který obsahuje odlišný origin (doména, protokol, port) od jejího originu.
  • Externí servery s odlišnými originy musí umožnit CORS policy, abyste s nimi mohli komunikovat pomocí AJAXu

OAuth

  • jednotný a otevřený protokol pro bezpečnou autentizaci a autorizaci API
    • pro mobilní, webové i desktopové aplikace
  • delegované zpřístupnění zdrojů
  • OAuth dává možnost sdílet uživatelské data a identity aniž by uživatel musel provozovateli služby prozrazovat své heslo
  • workflow:
    • Uživatel žádá o nějaký zdroj (login, stažení dat, ...)
    • Aplikace vidí, že není přihlášený, tak pošle požadavek na OAuth server pro přihlášení uživatele
    • Uživatel je přesměrován na stránku poskytovatele OAuth, aby se tam prřihlásil
    • Uživatel se zde přihlásí, a pak je přesměrován zpět na aplikaci (přihlašovat se pokaždé nemusí, záleží na toleranci OAuth poskytovatele)
    • V aplikaci nyní budete mít informace v podobě tokenů, které použijete pro dotazování na informační zdroje z dotyčného serveru.

Domácí úkol za 2 body

HTML5 Browser API

Bootstrap demo do Pokedexu

Pokyny k odevzdání SP2

Další příklady API