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:

Vytvořte nový účet a ověřte, že vše funguje
Přihlašte se pomocí těchto údajů
Pohlédněte do konzole prohlížeče (F12), pokud něco nefunguje podle očekávání
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 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: 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: 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: 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: 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:

Přidejte prvek pro zobrazování chyb do HTML registrace:
Aktualizujte funkci pro registraci, aby používala stejný vzor zobrazení chyb: 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í: 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! 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: Následně přidejte sekci s popisem účtu. Jelikož funguje jako nadpis obsahu dashboardu, použijte sémantické HTML: Pochopení HTML struktury:

Používá samostatné 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 pro popis účtu
Vytváří logickou hierarchii pro čtečky obrazovky a SEO

Krok 2: Vytvořte funkci aktualizace dashboardu

Nyní vytvořte funkci, která naplní váš dashboard skutečnými daty o účtu: 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

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(): Poté aktualizujte své routy, aby zahrnovaly inicializaci dashboardu: 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:

Přihlaste se testovacím účtem
Ověřte, že jste přesměrováni na dashboard
Zkontrolujte, zda se správně zobrazují popis účtu, zůstatek a měna
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.

Krok 1: Vytvořte šablonu transakce

Nejprve přidejte opakovatelnou šablonu pro řádky tabulky transakcí do vašeho HTML: 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: 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: 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: 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í

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

Přihlaste se pomocí účtu test (má připravená ukázková data)
Přejděte na svůj dashboard
Zkontrolujte, že se řádky transakcí zobrazují s odpovídajícím formátováním
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

🎓 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

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.