Vytvoření bankovní aplikace část 3: Způsoby načítání a použití dat

Přemýšlejte o počítači Enterprise ve Star Treku – když kapitán Picard žádá o stav lodi, informace se objeví okamžitě, aniž by se celé rozhraní vypnulo a znovu sestavovalo. Tento plynulý tok informací je přesně to, co zde s dynamickým načítáním dat budujeme. Vaše bankovní aplikace je nyní jako tištěné noviny – informativní, ale statická. Proměníme ji ve něco spíše jako velitelský sál NASA, kde data proudí neustále a aktualizují se v reálném čase, aniž by přerušovala práci uživatele. Naučíte se, jak komunikovat se servery asynchronně, jak pracovat s daty, která přicházejí v různých časech, a jak převést surové informace na něco smysluplného pro vaše uživatele. To je rozdíl mezi ukázkovým projektem a softwarem připraveným do ostrého provozu.

⚡ Co zvládnete za příštích 5 minut

Rychlá cesta pro zaneprázdněné vývojáře - Minuty 1-2: Spusťte svůj API server (cd api && npm start) a otestujte připojení - Minuta 3: Vytvořte základní funkci getAccount() pomocí fetch - Minuta 4: Propojte přihlašovací formulář s action=“javascript:login()” - Minuta 5: Otestujte přihlášení a sledujte, jak se data účtu objeví v konzoli Rychlé testovací příkazy: Proč je to důležité: Za 5 minut uvidíte kouzlo asynchronního načítání dat, které pohání každou moderní webovou aplikaci. Je to základ, díky kterému aplikace působí rychle a živě.

🗺️ Vaše cesta učením se webovým aplikacím řízeným daty

Cíl vaší cesty: Na konci této lekce pochopíte, jak moderní webové aplikace dynamicky načítají, zpracovávají a zobrazují data, čímž vytvářejí bezproblémové uživatelské zážitky, které očekáváme od profesionálních aplikací.

Přednáškový kvíz

Pre-lecture quiz

Požadavky

Než se pustíte do načítání dat, ujistěte se, že máte připravené tyto komponenty: - Předchozí lekce: Dokončete Formulář přihlášení a registrace – na tomto základu budeme stavět - Lokální server: Nainstalujte Node.js a spusťte API server pro poskytování dat o účtech - Připojení k API: Otestujte spojení se serverem tímto příkazem: Tento rychlý test zajistí správnou komunikaci všech komponent: - Ověřuje, že Node.js běží správně na vašem systému - Potvrzuje, že API server je aktivní a reaguje - Validuje, že vaše aplikace může dosáhnout server (jako kontrola rádiového kontaktu před misí)

🧠 Přehled ekosystému správy dat

Základní princip: Moderní webové aplikace jsou orchestrace dat – koordinují mezi uživatelským rozhraním, serverovými API a bezpečnostními modely prohlížeče, aby vytvořily plynulé a responzivní zážitky.

Pochopení načítání dat v moderních webových aplikacích

Způsob, jakým webové aplikace zacházejí s daty, se za poslední dvě desetiletí dramaticky vyvinul. Pochopení této evoluce vám pomůže ocenit, proč jsou moderní techniky jako AJAX a Fetch API tak silné a proč se staly nezbytnými nástroji webových vývojářů. Pojďme se podívat, jak fungovaly tradiční webové stránky ve srovnání s dynamickými, responzivními aplikacemi, které dnes vytváříme.

Tradiční vícestránkové aplikace (MPA)

V počátcích webu byl každý klik jako přepínání kanálů na staré televizi – obrazovka zhasla a pak se pomalu zobrazil nový obsah. Takto fungovaly dřívější webové aplikace, kde každá interakce znamenala znovu vytvoření celé stránky od začátku. Proč tento přístup působil neohrabaně: - Každé kliknutí znamenalo znovu vytvořit celou stránku od základů - Uživatelé byli přerušováni uprostřed myšlenky nepříjemným blikáním stránky - Internetové připojení přetěžovalo stahování stejné hlavičky a patičky znovu a znovu - Aplikace působily spíše jako proklikávání složkami spíše než používání softwaru

Moderní jednosrtnové aplikace (SPA)

AJAX (Asynchronous JavaScript and XML) tento paradigmat změnil zcela. Jako modulární design Mezinárodní vesmírné stanice, kde astronauti mohou měnit jednotlivé části bez budování celé struktury znovu, AJAX nám umožňuje aktualizovat konkrétní části webové stránky bez nutnosti načítat vše znovu. Přestože název zmiňuje XML, dnes převážně používáme JSON, ale základní princip zůstává: aktualizovat jen to, co se změnilo. Proč se SPA cítí mnohem lépe: - Aktualizují se jen skutečně změněné části (chytře, že?) - Žádné náhlé přerušení – uživatelé zůstávají ve svém toku práce - Méně dat přes síť znamená rychlejší načítání - Všechno je svižné a responzivní, jako aplikace na vašem telefonu

Vývoj k modernímu Fetch API

Moderní prohlížeče nabízejí Fetch API, které nahrazuje starší XMLHttpRequest. Jako rozdíl mezi obsluhou telegrafu a používáním e-mailu, Fetch API využívá sliby pro čistší asynchronní kód a přirozeně pracuje s JSON. Shrnutí: - Funguje skvěle v Chrome, Firefox, Safari a Edge (prakticky všude, kde jsou vaši uživatelé) - Pouze Internet Explorer potřebuje dodatečnou podporu (a upřímně, je čas IE opustit) - Připravuje vás perfektně na elegantní vzory async/await, které budeme později používat

Implementace přihlášení uživatele a načítání dat

Pojďme nyní implementovat přihlašovací systém, který přemění vaši bankovní aplikaci ze statického zobrazení na funkční aplikaci. Jako autentizační protokoly používané v zabezpečených vojenských zařízeních, ověříme uživatelské údaje a poskytneme přístup k jejich specifickým datům. Budeme to tvořit postupně, začneme základní autentizací a poté přidáme schopnosti načítání dat.

Krok 1: Vytvoření základu funkce přihlášení

Otevřete soubor app.js a přidejte novou funkci login. Ta bude řešit proces autentizace uživatele: Podrobnosti: - Klíčové slovo async říká JavaScriptu „hele, tahle funkce možná bude muset počkat“ - Načítáme formulář ze stránky (nic složitého, prostě ho najdeme podle ID) - Pak vytáhneme, co uživatel zadal jako své uživatelské jméno - Tip: k hodnotám formuláře se dá přistupovat podle atributu name – není třeba dalších getElementById!

Krok 2: Vytvoření funkce pro načítání dat účtu

Dále vytvoříme samostatnou funkci pro získání dat o účtu ze serveru. Následuje stejný vzor jako u registrační funkce, ale s důrazem na načítání dat: Co tento kód dělá: - Používá moderní API fetch pro asynchronní požadavky - Sestavuje GET požadavek s parametrem uživatelského jména v URL - Používá encodeURIComponent() k bezpečnému zpracování speciálních znaků v URL - Převede odpověď do JSON formátu pro snadnou práci s daty - Řeší chyby elegantně vrácením chybového objektu místo pádu aplikace Proč je to důležité: - Zabraňuje poškození URL speciálními znaky - Chrání před útoky na manipulaci s URL - Zajišťuje, že server přebírá přesně požadovaná data - Dodržuje bezpečné programovací postupy

Pochopení HTTP GET požadavků

Možná vás překvapí, že když použijete fetch bez dalších nastavení, automaticky se provede GET požadavek. To je ideální pro situace, kdy žádáme server třeba o zobrazení uživatelských dat. GET požadavky jsou jako zdvořilé půjčení si knihy z knihovny – chcete vidět něco, co už existuje. POST požadavky (které jsme používali při registraci) jsou spíše jako přidání nové knihy do sbírky.

Krok 3: Sjednocení všeho dohromady

Nyní přichází ten uspokojivý okamžik – propojíme funkci pro načtení bankovního účtu s procesem přihlášení. Tady všechno zapadá na své místo: Tato funkce postupuje jasně: - Vytáhne uživatelské jméno z formuláře - Požádá server o data účtu tohoto uživatele - Zpracuje případné chyby v průběhu - Uloží data účtu a přejde na dashboard při úspěchu

Krok 4: Vytvoření místa pro data

Aplikace potřebuje místo, kde bude uchovávat informace o účtu po načtení. Jako krátkodobou paměť – místo, kde bude mít aktuální uživatel svá data okamžitě po ruce. Přidejte tuto řádku na začátek souboru app.js: Proč to potřebujeme: - Data o účtu jsou přístupná odkudkoliv v aplikaci - Začínáme s null, což znamená „zatím nikdo není přihlášen“ - Aktualizuje se po úspěšném přihlášení nebo registraci - Funguje jako jediný zdroj pravdy – žádné nejasnosti, kdo je přihlášen

Krok 5: Propojte formulář

Pojďme nyní připojit vaši novou funkci přihlášení k HTML formuláři. Aktualizujte tag formuláře takto: Co tahle změna dělá: - Zabraňuje formuláři, aby provedl výchozí „přenačtení celé stránky“ - Volá vaši vlastní JavaScript funkci místo toho - Udržuje vše plynulé a ve stylu single-page aplikace - Dává vám plnou kontrolu nad tím, co se stane po kliknutí na „Login“

Krok 6: Vylepšení registrační funkce

Pro konzistenci upravte i funkci register, aby také ukládala data účtu a přecházela na dashboard: Toto vylepšení přináší: - Plynulý přechod z registrace na dashboard - Konzistentní uživatelský zážitek mezi přihlášením a registrací - Okamžitý přístup k datům účtu po úspěšné registraci

Testování implementace

Čas to otestovat: 1. Vytvořte nový účet a ověřte, že vše funguje 2. Přihlašte se pomocí těchto údajů 3. Pohlédněte do konzole prohlížeče (F12), pokud něco nefunguje podle očekávání 4. Ověřte, že po úspěšném přihlášení jste přesměrováni na dashboard Pokud něco nefunguje, nezoufejte! Většina problémů je jednoduchý překlep nebo zapomenuté spuštění API serveru.

Krátce o magii Cross-Origin

Možná si říkáte: „Jak to moje webová aplikace komunikuje s API serverem, když běží na různých portech?“ Skvělá otázka! To je téma, na které každý webový vývojář dříve či později narazí. V našem prostředí: - Webová aplikace běží na localhost:3000 (vývojový server) - API server běží na localhost:5000 (backend server) - API server obsahuje CORS hlavičky, které explicitně povolují komunikaci z vaší webové aplikace Toto nastavení odráží reálný vývoj, kdy frontend a backend aplikace obvykle běží na samostatných serverech.

Oživení dat v HTML

Nyní zpřístupníme načtená data uživatelům pomocí manipulace s DOM. Jako proces vyvolávání fotografií v temné komoře, bereme neviditelná data a zobrazujeme je tak, aby je uživatelé mohli vidět a s nimi interagovat. Manipulace s DOM je technika, která proměňuje statické webové stránky na dynamické aplikace aktualizující svůj obsah na základě interakcí uživatelů a odpovědí serveru.

Výběr správného nástroje pro práci

Při aktualizaci HTML pomocí JavaScriptu máte několik možností. Představte si je jako různé nástroje v krabici s nářadím – každý je ideální pro určitý úkol:

Bezpečný způsob zobrazení textu: textContent

Vlastnost textContent je váš nejlepší přítel při zobrazování uživatelských dat. Je jako chlapík u vchodu na stránku – nic škodlivého nepustí dovnitř: Výhody textContent: - Považuje vše za prostý text (zabraňuje spuštění skriptů) - Automaticky vyčistí existující obsah - Efektivní pro jednoduché aktualizace textu - Poskytuje vestavěnou ochranu proti škodlivému obsahu

Vytváření dynamických HTML prvků

Pro složitější obsah kombinujte document.createElement() s metodou append(): Pochopení tohoto přístupu: - Programově vytváří nové DOM prvky - Udržuje plnou kontrolu nad atributy a obsahem prvků - Umožňuje složité, vnořené struktury prvků - Zachovává bezpečnost oddělením struktury od obsahu Rizika innerHTML: - Spouští jakékoliv