LAB10 - nvbach91/4IZ268-2024-2025-ZS GitHub Wiki

Vývoj webových aplikací - JavaScript

Obsah

  • jQuery tutorial
  • REST API
  • Procvičování AJAX s axios
  • OAuth
  • Pokyny k odevzdání SP2
  • domácí úkol

jQuery tutorial

https://github.com/nvbach91/4IZ268-2024-2025-ZS/wiki/P-Tutorial-jQuery

Využití externích zdrojů REST API

  • jsou to servery, kam lze dotazovat na zdroje nebo posílat data z klienta
  • protokol HTTPS
  • 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 - pomocí knihovny axios

  • napište funkci s AJAX příkazem pro (GET) 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 funkci s AJAX příkazem pro (GET) 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 funkci s AJAX příkazem pro (GET) 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 - pomocí knihovny axios

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ý animační prvek (spinner) 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, a samozřejmě je potřeba ošetřit opětovné pokusy od uživatele, t.j. pokud probíhá požadavek, nesmí být umožněno vytvářet stejný požadavek, dokud neskončí původní požadavek.
  • po skončení volání, tj. v momentě kdy dostanete odpověď, spinner zase schováte
  • příklad spinneru v CSS najdete zde: https://github.com/nvbach91/4IZ268-2024-2025-ZS/wiki/LAB04

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
  • Předtím, než se rozhodnete pro práci s nějakým cizím API serverem, se ujistěte, že podporují CORS policy, tj. že povolují komunikace z webových prohlížečů z odlišného originu.

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

Pokyny k SP2

Další příklady API