LAB12 - nvbach91/4IZ268-2022-2023-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 vyžadovat autentizaci (je potřeba registrace, přihlášení, session, token, API klíče, OAuth, atd.), 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í znaky s diakritikou nebo znaky speciální, je potřeba je zakódovat - https://www.w3schools.com/tags/ref_urlencode.asp
  • u některých REST API parametry jsou rozpoznané pod URL path, tj. podle pořadí parametrů v cestě URL
    • 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 (nebo-li příloha)
  • co použít záleží na specifikaci serveru

Procvičování AJAX GET

  • napište AJAX 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 AJAX 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 AJAX 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

  • napište AJAX příkaz pro vytvoření nového uživatele na serveru https://jsonplaceholder.typicode.com a poté zjistěte, že se změna opravdu nastala voláním AJAX GET požadavku na tentýž zdroj
  • napište AJAX příkaz pro změnu údaje jednoho uživatele na serveru https://jsonplaceholder.typicode.com a poté zjistěte, že se změna opravdu nastala voláním AJAX GET požadavku na tentýž zdroj
  • napište AJAX příkaz pro výmaz jednoho uživatele na serveru https://jsonplaceholder.typicode.com a poté zjistěte, že se změna opravdu nastala voláním AJAX GET požadavku na tentýž zdroj

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

  • pokud voláte AJAX požadavek někam na server, je potřeba uživateli zobrazit nějaký spinner/loader buď přes celou obrazovku nebo lépe na nějakém určeném místě, aby uživatel mohl dále prohlížet stránku (samozřejmě je potřeba ošetřit opětovné pokusy od uživatele)
  • po skončení volání, tj. v momentě kdy dostanete odpověď, spinner/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 musí umožnit CORS policy, abyste (jako third-party aplikace) s nimi mohli komunikovat pomocí AJAX

OAuth

  • jednotný a otevřený protokol pro bezpečnou autentizaci na 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
  • obecný postup:
    • uživatel žádá o nějaký zdroj (login, stažení dat, ...) ve vaší aplikaci
    • vaše aplikace zjistí, že není přihlášený, tak uživatele přesměruje na stránku poskytovatele OAuth (např. Facebook, Google, ...), aby se tam prřihlásil
    • uživatel se zde přihlásí, a pak je přesměrován zpět do vaše aplikace (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, např. osobní údaje uživatele jako jméno, e-mail, ...
  • některé API umožňují přístup k veřejným informacím na základě pouhé registrace a připojení přístupového tokenu v požadavcích
  • nicméně k osobním údajům a jiným citlivým informacím se dostanete pouze přes řádného OAuth protokolu

Domácí úkol za 2 body

HTML5 Browser API

Bootstrap demo

Pokyny k odevzdání SP2

Další příklady API