Web-Dev-For-Beginners/translations/cs/7-bank-project/3-data

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

flowchart LR
    A[⚡ 5 minut] --> B[Nastavit API server]
    B --> C[Otestovat získávání pomocí curl]
    C --> D[Vytvořit přihlašovací funkci]
    D --> E[Vidět data v akci]

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

# Ověřit, že API běží
curl http://localhost:5000/api

# Test načítání dat účtu
curl http://localhost:5000/api/accounts/test

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

journey
    title Od statických stránek k dynamickým aplikacím
    section Porozumění evoluci
      Tradiční obnovování stránek: 3: You
      Objevte výhody AJAX/SPA: 5: You
      Osvojte si vzory Fetch API: 7: You
    section Budování autentizace
      Vytvořte funkce přihlášení: 4: You
      Zpracovávejte asynchronní operace: 6: You
      Spravujte uživatelské relace: 8: You
    section Dynamické aktualizace UI
      Naučte se manipulaci s DOM: 5: You
      Vytvářejte zobrazení transakcí: 7: You
      Vytvořte responzivní dashboardy: 9: You
    section Profesionální vzory
      Šablonové vykreslování: 6: You
      Strategie zpracování chyb: 7: You
      Optimalizace výkonu: 8: You

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:

curl http://localhost:5000/api
# Očekávaná odpověď: "Bank API v1.0.0"

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

mindmap
  root((Správa dat))
    Authentication Flow
      Login Process
        Ověření formuláře
        Ověření přihlašovacích údajů
        Správa relace
      User State
        Globální objekt účtu
        Ochrana navigace
        Zpracování chyb
    API Communication
      Fetch Patterns
        Požadavky GET
        Požadavky POST
        Chybové odpovědi
      Data Formats
        Zpracování JSON
        Kódování URL
        Parsování odpovědi
    Dynamic UI Updates
      DOM Manipulation
        Bezpečné aktualizace textu
        Vytváření elementů
        Klonování šablon
      User Experience
        Aktualizace v reálném čase
        Chybová hlášení
        Stav načítání
    Security Considerations
      XSS Prevention
        Použití textContent
        Sanitizace vstupu
        Bezpečné vytváření HTML
      CORS Handling
        Požadavky mezi doménami
        Nastavení hlaviček
        Vývojové nastavení

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.

sequenceDiagram
    participant User
    participant Browser
    participant Server
    
    User->>Browser: Klikne na odkaz nebo odešle formulář
    Browser->>Server: Žádá o novou HTML stránku
    Note over Browser: Stránka zůstane prázdná
    Server->>Browser: Vrací kompletní HTML stránku
    Browser->>User: Zobrazuje novou stránku (bliknutí/obnovení)

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.

sequenceDiagram
    participant User
    participant Browser
    participant JavaScript
    participant Server
    
    User->>Browser: Interaguje s stránkou
    Browser->>JavaScript: Spouští obsluhu události
    JavaScript->>Server: Načte pouze potřebná data
    Server->>JavaScript: Vrací data v JSONu
    JavaScript->>Browser: Aktualizuje specifické prvky stránky
    Browser->>User: Zobrazuje aktualizovaný obsah (bez načítání)

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.

Vlastnost	XMLHttpRequest	Fetch API
Syntaxe	Složitá na základě callbacků	Čistá založená na Promise
Zpracování JSON	Vyžaduje manuální parsování	Vestavěná metoda .json()
Zpracování chyb	Omezené informace o chybách	Detailní informace o chybách
Podpora moderních funkcí	Zpětná kompatibilita	ES6+ Promise a async/await

💡 Kompatibilita prohlížečů: Dobrá zpráva – Fetch API funguje ve všech moderních prohlížečích! Pokud vás zajímají konkrétní verze, caniuse.com nabízí kompletní přehled kompatibility.

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:

async function login() {
  const loginForm = document.getElementById('loginForm');
  const user = loginForm.user.value;
}

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!

💡 Přístup k formuláři: Každý ovládací prvek formuláře lze získat podle jeho jména (nastaveno v HTML pomocí atributu name) jako vlastnost formulářového elementu. Je to čistý a přehledný způsob, jak získat data z formuláře.

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:

async function getAccount(user) {
  try {
    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
    return await response.json();
  } catch (error) {
    return { error: error.message || 'Unknown error' };
  }
}

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

⚠️ Bezpečnostní poznámka: Funkce encodeURIComponent() zajišťuje, že speciální znaky v URL (např. "#", "&") nebudou nesprávně zpracovány. Podobně jako kódovací systémy v námořní komunikaci, které zaručují, že zpráva dorazí přesně tak, jak má.

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.

GET požadavek	POST požadavek
Účel	Získat existující data
Parametry	V URL cestě/parametrech
Cacheování	Lze cachovat prohlížečem
Bezpečnost	Viditelné v URL/logu

sequenceDiagram
    participant B as Prohlížeč
    participant S as Server
    
    Note over B,S: GET požadavek (Získávání dat)
    B->>S: GET /api/accounts/test
    S-->>B: 200 OK + Data účtu
    
    Note over B,S: POST požadavek (Odeslání dat)
    B->>S: POST /api/accounts + Nová data účtu
    S-->>B: 201 Vytvořeno + Potvrzení
    
    Note over B,S: Zpracování chyb
    B->>S: GET /api/accounts/nonexistent
    S-->>B: 404 Nenalezeno + Chybová zpráva

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:

async function login() {
  const loginForm = document.getElementById('loginForm');
  const user = loginForm.user.value;
  const data = await getAccount(user);

  if (data.error) {
    return console.log('loginError', data.error);
  }

  account = data;
  navigate('/dashboard');
}

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

🎯 Vzorec Async/Await: Protože getAccount je asynchronní funkce, používáme klíčové slovo await, které zastaví provádění, dokud server neodpoví. Tím zabráníme pokračování s nedefinovanými daty.

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:

// Toto obsahuje data účtu aktuálního uživatele
let account = null;

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:

<form id="loginForm" action="javascript:login()">
  <!-- Your existing form inputs -->
</form>

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:

// Přidejte tyto řádky na konec vaší funkce register
account = result;
navigate('/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

flowchart TD
    A[Uživatel zadá přihlašovací údaje] --> B[Funkce přihlášení volána]
    B --> C[Načíst data účtu ze serveru]
    C --> D{Data byla úspěšně přijata?}
    D -->|Ano| E[Uložit data účtu globálně]
    D -->|Ne| F[Zobrazit chybovou zprávu]
    E --> G[Přejít na přehled]
    F --> H[Uživatel zůstává na přihlašovací stránce]

Č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í.

🔒 Cross-Origin bezpečnost: Prohlížeče uplatňují politiku „stejného původu“ (same-origin policy), aby zabránily neautorizované komunikaci mezi různými doménami. Podobně jako kontrolní systém v Pentagónu, ověřují, že komunikace je povolená, než umožní přenos dat.

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.

📚 Více informací: Ponořte se hlouběji do API a načítání dat s tímto komplexním Microsoft Learn modulem o API.

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:

Metoda	Na co je skvělá	Kdy ji použít	Úroveň bezpečnosti
textContent	Bezpečné zobrazování uživatelských dat	Kdykoliv zobrazujete text	✅ Pevná jistota
createElement() + append()	Vytváření komplexních rozvržení	Vytváření nových sekcí/seznamů	✅ Neprolomitelná
innerHTML	Nastavení HTML obsahu	⚠️ Raději se této vyhněte	❌ Riskantní záležitost

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

// Bezpečný a spolehlivý způsob aktualizace textu
const balanceElement = document.getElementById('balance');
balanceElement.textContent = account.balance;

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():

// Bezpečný způsob, jak vytvářet nové prvky
const transactionItem = document.createElement('div');
transactionItem.className = 'transaction-item';
transactionItem.textContent = `${transaction.date}: ${transaction.description}`;
container.append(transactionItem);

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

⚠️ Bezpečnostní upozornění: I když se innerHTML objevuje v mnoha návodech, může spouštět vložené skripty. Podobně jako bezpečnostní protokoly na CERNu zabraňují neautorizovanému spuštění kódu, použití textContent a createElement nabízí bezpečnější alternativy.

Rizika innerHTML:

• Spouští jakékoliv <script> tagy v uživatelských datech
• Je náchylné na útoky zaváděním škodlivého kódu
• Vytváří potenciální bezpečnostní zranitelnosti
• Používané bezpečnější alternativy poskytují stejnou funkčnost

Jak chybové stavy zpřístupnit uživatelům

Aktuálně se chyby přihlášení zobrazují pouze v konzoli prohlížeče, která je pro uživatele neviditelná. Stejně jako je rozdíl mezi vnitřní diagnostikou pilota a informačním systémem pro cestující, musíme důležité informace komunikovat správným kanálem.

Zobrazení viditelných chybových zpráv poskytuje uživatelům okamžitou zpětnou vazbu o tom, co se pokazilo a jak dále postupovat.

Krok 1: Přidejte místo pro chybové zprávy

Nejprve dejte chybovým zprávám místo ve vašem HTML. Přidejte tento prvek těsně před tlačítko pro přihlášení, aby jej uživatelé přirozeně viděli:

<!-- This is where error messages will appear -->
<div id="loginError" role="alert"></div>
<button>Login</button>

Co se zde děje:

• Vytváříme prázdný kontejner, který zůstává neviditelný, dokud není potřeba
• Je umístěn tam, kde se uživatelé přirozeně podívají po kliknutí na "Přihlásit se"
• Atribut role="alert" je skvělý pro čtečky obrazovky – říká asistivní technologii „hele, tohle je důležité!“
• Jedinečné id usnadňuje JavaScriptu cíl

Krok 2: Vytvořte pomocnou funkci

Vytvořme malou užitečnou funkci, která může aktualizovat text libovolného prvku. To je jedna z těch „napiš jednou, použi všude“ funkcí, která vám ušetří čas:

function updateElement(id, text) {
  const element = document.getElementById(id);
  element.textContent = text;
}

Výhody funkce:

• Jednoduché rozhraní vyžadující pouze ID prvku a textový obsah
• Bezpečně vyhledává a aktualizuje DOM prvky
• Znovupoužitelný vzor snižující duplicitu kódu
• Udržuje konzistentní chování aktualizací v celé aplikaci

Krok 3: Zobrazujte chyby tam, kde je uživatelé uvidí

Teď nahraďte tu skrytou zprávu v konzoli něčím, co uživatelé opravdu vidí. Aktualizujte svou přihlašovací funkci:

// Místo pouhého zapisování do konzole ukažte uživateli, co je špatně
if (data.error) {
  return updateElement('loginError', data.error);
}

Tato malá změna dělá velký rozdíl:

• Chybové zprávy se zobrazují přesně tam, kde se uživatelé dívají
• Už žádné záhadné tiché selhání
• Uživatelé dostávají okamžitou a konkrétní zpětnou vazbu
• Vaše aplikace působí profesionálně a promyšleně

Po vyzkoušení s neplatným účtem se na stránce zobrazí užitečná chybová zpráva!

Krok 4: Zahrnutí přístupnosti

To role="alert", které jsme přidali, není jen dekorace! Tento malý atribut vytváří tzv. Live Region, která okamžitě oznamuje změny čtečkám obrazovky:

<div id="loginError" role="alert"></div>

Proč je to důležité:

• Uživatelé s čtečkami slyší chybovou zprávu hned, jak se objeví
• Všichni získávají stejnou důležitou informaci, bez ohledu na způsob navigace
• Jednoduchý způsob, jak zajistit přístupnost vaší aplikace více lidem
• Ukazuje, že vám záleží na vytváření inkluzivních zážitků

Takové malé detaily dělí dobré vývojáře od skvělých!

🎯 Pedagogická kontrola: Vzory autentizace

Zastavte se a zamyslete se: Právě jste implementovali kompletní autentizační tok. To je základní vzor ve webovém vývoji.

Krátké sebehodnocení:

• Dokážete vysvětlit, proč používáme async/await pro API volání?
• Co by se stalo, kdybychom zapomněli funkci encodeURIComponent()?
• Jak naše zpracování chyb zlepšuje uživatelský zážitek?

Spojení s reálným světem: Vzory, které jste se zde naučili (asynchronní načítání dat, zpracování chyb, uživatelská zpětná vazba), se používají v každé velké webové aplikaci od sociálních sítí po e-shopy. Budujete produkční dovednosti!

Výzva: Jak byste mohli upravit tento autentizační systém, aby zvládal více uživatelských rolí (zákazník, admin, pokladní)? Přemýšlejte o datové struktuře a změnách uživatelského rozhraní.

Krok 5: Použijte stejný vzor pro registraci

Pro konzistenci implementujte totožné zpracování chyb i ve formuláři registrace:

1. Přidejte prvek pro zobrazování chyb do HTML registrace:

<div id="registerError" role="alert"></div>

2. Aktualizujte funkci pro registraci, aby používala stejný vzor zobrazení chyb:

if (data.error) {
  return updateElement('registerError', data.error);
}

Výhody jednotného zpracování chyb:

• Zajišťuje jednotný uživatelský zážitek na všech formulářích
• Snižuje kognitivní zátěž díky známým vzorům
• Zjednodušuje údržbu díky znovupoužitelnosti kódu
• Zaručuje splnění přístupnostních standardů napříč aplikací

Vytváření dynamické přehledové obrazovky (dashboard)

Nyní proměníme váš statický dashboard na dynamické rozhraní zobrazující skutečná data účtu. Stejně jako rozdíl mezi vytištěným letovým řádem a aktuálními odletovými tabulemi na letišti přecházíme od statických informací k zobrazení v reálném čase.

Pomocí technik manipulace s DOM, které jste se naučili, vytvoříme dashboard, který se automaticky aktualizuje s aktuálními informacemi o účtu.

Poznejte svá data

Než začneme stavět, mrkněme, jaký druh dat vám server vrací. Když se někdo úspěšně přihlásí, dostanete k dispozici tento poklad informací:

{
  "user": "test",
  "currency": "$",
  "description": "Test account",
  "balance": 75,
  "transactions": [
    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
  ]
}

Tato datová struktura poskytuje:

• user: Perfektní pro personalizaci zážitku („Vítejte zpět, Sarah!“)
• currency: Zajišťuje správné zobrazování měnových částek
• description: Přátelský název účtu
• balance: Důležitý aktuální zůstatek
• transactions: Kompletní historie transakcí se všemi podrobnostmi

Všechno, co potřebujete pro vytvoření profesionálně vypadajícího bankovního dashboardu!

flowchart TD
    A[Přihlášení uživatele] --> B[Načíst data účtu]
    B --> C{Jsou data platná?}
    C -->|Ano| D[Uložit do globální proměnné]
    C -->|Ne| E[Zobrazit chybovou zprávu]
    D --> F[Přejít na hlavní panel]
    F --> G[Aktualizovat prvky rozhraní]
    G --> H[Zobrazit zůstatek]
    G --> I[Zobrazit popis]
    G --> J[Zobrazit transakce]
    J --> K[Vytvořit řádky tabulky]
    K --> L[Formátovat měnu]
    L --> M[Uživatel vidí aktuální data]

💡 Profesionální tip: Chcete vidět svůj dashboard hned v akci? Použijte při přihlášení uživatelské jméno test – je předem naplněné ukázkovými daty, takže můžete vidět vše fungovat, aniž byste museli nejprve vytvářet transakce.

Proč je testovací účet užitečný:

• Už obsahuje realistická ukázková data
• Ideální pro zobrazení transakcí
• Skvělé pro testování funkcí dashboardu
• Šetří čas, nemusíte manuálně vytvářet testovací data

Vytváření prvků pro zobrazení dashboardu

Postupně si postavíme rozhraní vašeho dashboardu, začneme informacemi o účtu a pak přejdeme k složitějším prvkům, jako jsou seznamy transakcí.

Krok 1: Aktualizujte strukturu HTML

Nejprve nahraďte statickou sekci „Zůstatek“ dynamickými zástupnými elementy, které může JavaScript doplnit:

<section>
  Balance: <span id="balance"></span><span id="currency"></span>
</section>

Následně přidejte sekci s popisem účtu. Jelikož funguje jako nadpis obsahu dashboardu, použijte sémantické HTML:

<h2 id="description"></h2>

Pochopení HTML struktury:

• Používá samostatné <span> prvky pro zůstatek a měnu pro individuální ovládání
• Aplikuje unikátní ID na každý prvek pro cílení JavaScriptem
• Dodržuje sémantiku HTML použitím <h2> pro popis účtu
• Vytváří logickou hierarchii pro čtečky obrazovky a SEO

✅ Přístupnostní poznatek: Popis účtu funguje jako nadpis obsahu dashboardu, proto je označen jako záhlaví. Více o tom, jak struktura nadpisů ovlivňuje přístupnost. Dokážete identifikovat další prvky na své stránce, které by mohly mít prospěch z použití nadpisů?

Krok 2: Vytvořte funkci aktualizace dashboardu

Nyní vytvořte funkci, která naplní váš dashboard skutečnými daty o účtu:

function updateDashboard() {
  if (!account) {
    return navigate('/login');
  }

  updateElement('description', account.description);
  updateElement('balance', account.balance.toFixed(2));
  updateElement('currency', account.currency);
}

Krok za krokem, co tato funkce dělá:

• Ověří, že data o účtu existují, než pokračuje
• Přesměruje nepřihlášené uživatele zpět na přihlašovací stránku
• Aktualizuje popis účtu pomocí znovupoužitelné funkce updateElement
• Naformátuje zůstatek tak, aby zobrazoval vždy dvě desetinná místa
• Zobrazí odpovídající symbol měny

💰 Formátování peněz: Metoda toFixed(2) je záchranou! Zajišťuje, že zůstatek vždy vypadá jako skutečné peníze – „75.00“ místo prostého „75“. Vaši uživatelé ocení známé formátování měny.

Krok 3: Zajistěte, že se dashboard aktualizuje

Aby se váš dashboard obnovoval s aktuálními daty při každé návštěvě, musíme se napojit na váš navigační systém. Pokud jste dokončili úkol z lekce 1, bude vám to povědomé. Pokud ne, tady je, co potřebujete:

Přidejte toto na konec své funkce updateRoute():

if (typeof route.init === 'function') {
  route.init();
}

Poté aktualizujte své routy, aby zahrnovaly inicializaci dashboardu:

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
};

Co tato chytrá konfigurace dělá:

• Kontroluje, jestli má routa speciální inicializační kód
• Automaticky tento kód spustí při načtení routy
• Zajistí, že váš dashboard vždy zobrazuje čerstvá a aktuální data
• Udržuje logiku směrování čistou a organizovanou

Testování vašeho dashboardu

Po implementaci těchto změn otestujte svůj dashboard:

1. Přihlaste se testovacím účtem
2. Ověřte, že jste přesměrováni na dashboard
3. Zkontrolujte, zda se správně zobrazují popis účtu, zůstatek a měna
4. Vyzkoušejte odhlášení a opětovné přihlášení, aby se ujistili, že se data správně aktualizují

Váš dashboard nyní bude zobrazovat dynamické informace o účtu, které se aktualizují podle dat přihlášeného uživatele!

Vytváření chytrých seznamů transakcí pomocí šablon

Místo ručního vytváření HTML pro každou transakci použijeme šablony pro automatické generování konzistentního formátování. Jako standardizované komponenty ve výrobě kosmických lodí, šablony zajišťují, že každý řádek transakce má stejnou strukturu a vzhled.

Tato technika efektivně škáluje od několika transakcí až po tisíce, zachovávajíc konzistentní výkon a prezentaci.

graph LR
    A[HTML šablona] --> B[JavaScript klon]
    B --> C[Vyplnit daty]
    C --> D[Přidat do fragmentu]
    D --> E[Hromadný vložení do DOM]
    
    subgraph "Výhody výkonu"
        F[Jediná aktualizace DOM]
        G[Konzistentní formátování]
        H[Znovu použitelný vzor]
    end
    
    E --> F
    E --> G
    E --> H

flowchart LR
    A[Data transakce] --> B[Šablona HTML]
    B --> C[Klonovat šablonu]
    C --> D[Vyplnit daty]
    D --> E[Přidat do DOM]
    E --> F[Opakovat pro každou transakci]

Krok 1: Vytvořte šablonu transakce

Nejprve přidejte opakovatelnou šablonu pro řádky tabulky transakcí do <body> vašeho HTML:

<template id="transaction">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</template>

Pochopení HTML šablon:

• Definuje strukturu pro jeden řádek tabulky
• Zůstává neviditelná, dokud není zkopírována a doplněna JavaScriptem
• Obsahuje tři buňky pro datum, popis a částku
• Poskytuje znovupoužitelný vzor pro konzistentní formátování

Krok 2: Připravte tabulku na dynamický obsah

Nyní přidejte id do těla tabulky, aby ji JavaScript mohl snadno cílit:

<tbody id="transactions"></tbody>

Co to umožňuje:

• Vytváří jasný cíl pro vkládání řádků transakcí
• Odděluje strukturu tabulky od dynamického obsahu
• Umožňuje snadné vymazání a znovu naplnění dat transakcí

Krok 3: Vytvořte tovární funkci pro řádek transakce

Vytvořte nyní funkci, která přemění data o transakci na HTML prvky:

function createTransactionRow(transaction) {
  const template = document.getElementById('transaction');
  const transactionRow = template.content.cloneNode(true);
  const tr = transactionRow.querySelector('tr');
  tr.children[0].textContent = transaction.date;
  tr.children[1].textContent = transaction.object;
  tr.children[2].textContent = transaction.amount.toFixed(2);
  return transactionRow;
}

Rozbor této tovární funkce:

• Získává šablonu podle jejího ID
• Kopíruje obsah šablony pro bezpečné zpracování
• Vybere řádek tabulky uvnitř zkopírovaného obsahu
• Naplní každou buňku daty o transakci
• Naformátuje částku tak, aby zobrazovala správné desetinné místo
• Vrací hotový řádek připravený k vložení

Krok 4: Efektivně generujte více řádků transakcí

Přidejte tento kód do své funkce updateDashboard(), aby se zobrazily všechny transakce:

const transactionsRows = document.createDocumentFragment();
for (const transaction of account.transactions) {
  const transactionRow = createTransactionRow(transaction);
  transactionsRows.appendChild(transactionRow);
}
updateElement('transactions', transactionsRows);

Jak tento efektivní přístup funguje:

• Vytváří dokumentový fragment pro hromadné operace s DOM
• Prochází všechny transakce v datech účtu
• Generuje řádek pro každou transakci pomocí tovární funkce
• Sbírá všechny řádky do fragmentu před vložením do DOM
• Provede jedinou aktualizaci DOM místo více jednotlivých vkládání

⚡ Optimalizace výkonu: document.createDocumentFragment() funguje jako montážní proces ve společnosti Boeing – komponenty jsou připraveny mimo hlavní linku a poté instalovány jako kompletní celek. Tento přístup k dávkování minimalizuje přepočty rozložení DOM tím, že provádí jediný vklad místo několika jednotlivých operací.

Krok 5: Vylepšení funkce aktualizace pro smíšený obsah

Vaše funkce updateElement() zatím zpracovává pouze textový obsah. Aktualizujte ji, aby fungovala jak s textem, tak s DOM uzly:

function updateElement(id, textOrNode) {
  const element = document.getElementById(id);
  element.textContent = ''; // Odstraní všechny potomky
  element.append(textOrNode);
}

Hlavní vylepšení v této aktualizaci:

• Vymaže existující obsah před přidáním nového
• Přijímá jako parametry buď textové řetězce, nebo DOM uzly
• Používá metodu append() pro vyšší flexibilitu
• Zachovává zpětnou kompatibilitu se stávajícím použitím založeným na textu

Vyzkoušejte si svůj dashboard v praxi

Přišel čas na okamžik pravdy! Podívejme se, jak funguje váš dynamický dashboard:

1. Přihlaste se pomocí účtu test (má připravená ukázková data)
2. Přejděte na svůj dashboard
3. Zkontrolujte, že se řádky transakcí zobrazují s odpovídajícím formátováním
4. Ujistěte se, že data, popisy a částky vypadají správně

Pokud vše funguje, měli byste na svém dashboardu vidět plně funkční seznam transakcí! 🎉

Co jste dokázali:

• Vytvořili jste dashboard škálující s libovolným množstvím dat
• Navrhli jste znovupoužitelné šablony pro konzistentní formátování
• Implementovali jste efektivní techniky manipulace s DOM
• Vyvinuli jste funkcionalitu srovnatelnou s produkčními bankovními aplikacemi

Úspěšně jste přeměnili statickou webovou stránku na dynamickou webovou aplikaci.

🎯 Pedagogická kontrola: Generování dynamického obsahu

Porozumění architektuře: Implementovali jste sofistikovaný pipeline pro převod dat do uživatelského rozhraní, který odráží vzory používané ve frameworcích jako React, Vue a Angular.

Ovládnuté klíčové koncepty:

• Renderování na základě šablon: Vytváření znovupoužitelných UI komponent
• Dokumentové fragmenty: Optimalizace výkonu DOM
• Bezpečná manipulace s DOM: Prevence bezpečnostních rizik
• Transformace dat: Převod dat ze serveru na uživatelské rozhraní

Průmyslové propojení: Tyto techniky tvoří základ moderních frontend frameworků. Reactův virtuální DOM, Vueův systém šablon a Angularova komponentová architektura staví na těchto jádrových konceptech.

Reflexní otázka: Jak byste rozšířili tento systém tak, aby zvládal aktualizace v reálném čase (například automatický příchod nových transakcí)? Zvažte použití WebSockets nebo Server-Sent Events.

---

📈 Váš časový plán zvládnutí správy dat

timeline
    title Cesta vývoje řízeného daty
    
    section Budování základu
        Nastavení a testování API
            : Pochopit komunikaci klient-server
            : Ovládnout cyklus HTTP požadavků/odpovědí
            : Naučit se techniky ladění
    
    section Mistrovství autentizace
        Vzory asynchronních funkcí
            : Psát čistý async/await kód
            : Efektivně pracovat s promises
            : Implementovat hranice chyb
        Správa uživatelských relací
            : Vytvářet vzory globálního stavu
            : Budovat stráže navigace
            : Navrhovat systémy zpětné vazby uživatele
    
    section Vývoj dynamického uživatelského rozhraní
        Bezpečná manipulace s DOM
            : Zamezit XSS zranitelnostem
            : Používat textContent místo innerHTML
            : Vytvářet rozhraní přátelská k přístupnosti
        Šablonové systémy
            : Vytvářet znovupoužitelné UI komponenty
            : Optimalizovat výkon pomocí fragmentů
            : Škálovat pro zvládání velkých datových sad
    
    section Profesionální vzory
        Kód připravený pro produkci
            : Implementovat komplexní zpracování chyb
            : Dodržovat bezpečnostní osvědčené postupy
            : Vytvářet udržitelné architektury
        Moderní webové standardy
            : Ovládnout vzory Fetch API
            : Pochopit konfigurace CORS
            : Budovat responzivní, přístupná UI

🎓 Milník ukončení studia: Úspěšně jste vytvořili plnohodnotnou webovou aplikaci založenou na datech pomocí moderních vzorů JavaScriptu. Tyto dovednosti lze přímo využít při práci s frameworky jako React, Vue nebo Angular.

🔄 Další úroveň schopností:

• Připravenost objevovat frontendové frameworky postavené na těchto konceptech
• Schopnost implementovat funkce v reálném čase pomocí WebSockets
• Vybavenost pro tvorbu progresivních webových aplikací s offline funkcionalitou
• Základ pro učení pokročilých vzorů správy stavu

Výzva GitHub Copilot Agenta 🚀

Použijte režim Agenta k dokončení následující výzvy:

Popis: Vylepšete bankovní aplikaci implementací funkce vyhledávání a filtrování transakcí, která umožní uživatelům najít konkrétní transakce podle rozsahu data, částky nebo klíčových slov v popisu.

Podnět: Vytvořte funkci vyhledávání pro bankovní aplikaci, která obsahuje: 1) Vyhledávací formulář s poli pro zadání rozsahu dat (od/do), minimální/maximální částku a klíčová slova v popisu transakce, 2) funkci filterTransactions(), která filtruje pole account.transactions podle kritérií vyhledávání, 3) aktualizaci funkce updateDashboard(), která zobrazuje filtrované výsledky, a 4) přidání tlačítka „Vymazat filtry“ pro nastavení výchozího zobrazení. Použijte moderní metody polí JavaScriptu jako filter() a ošetřete okrajové případy prázdných vyhledávacích kritérií.

Více o režimu agenta se dozvíte zde.

🚀 Výzva

Jste připraveni posunout svou bankovní aplikaci na vyšší úroveň? Udělejme ji takovou, že ji skutečně budete chtít používat. Zde je několik nápadů, které rozproudí vaši kreativitu:

Udělejte ji krásnou: Přidejte CSS stylování, které promění váš funkční dashboard ve vizuálně atraktivní. Myslete na čisté linie, dobré rozestupy a třeba i jemné animace.

Udělejte ji responzivní: Vyzkoušejte mediální dotazy pro vytvoření responzivního designu, který skvěle funguje na telefonech, tabletech i desktopu. Vaši uživatelé vám poděkují!

Přidejte šmrnc: Zvažte barevné označení transakcí (zelená pro příjmy, červená pro výdaje), přidání ikon nebo vytvoření efektních hover efektů, které zvýrazní interaktivitu rozhraní.

Takto by mohl vypadat vyleštěný dashboard:

Nemusíte to přesně kopírovat – použijte to jako inspiraci a udělejte si to po svém!

Kvíz po přednášce

Kvíz po přednášce

Zadání

Refaktorujte a okomentujte svůj kód

---

Upozornění: Tento dokument byl přeložen pomocí AI překladatelské služby Co-op Translator. Přestože usilujeme o přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Originální dokument v jeho mateřském jazyce by měl být považován za závazný zdroj. Pro důležité informace se doporučuje profesionální lidský překlad. Nejsme odpovědní za jakákoliv nedorozumění nebo chybné výklady vyplývající z použití tohoto překladu.