You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
8.8 KiB
162 lines
8.8 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "50a7783473b39a2e0f133e271a102231",
|
|
"translation_date": "2025-10-24T21:38:58+00:00",
|
|
"source_file": "7-bank-project/4-state-management/assignment.md",
|
|
"language_code": "sk"
|
|
}
|
|
-->
|
|
# Implementácia dialógu "Pridať transakciu"
|
|
|
|
## Prehľad
|
|
|
|
Vaša banková aplikácia má teraz solídne riadenie stavu a ukladanie dát, ale chýba jej kľúčová funkcia, ktorú skutočné bankové aplikácie potrebujú: možnosť, aby používatelia mohli pridávať vlastné transakcie. V tejto úlohe implementujete kompletný dialóg "Pridať transakciu", ktorý sa bezproblémovo integruje s vaším existujúcim systémom riadenia stavu.
|
|
|
|
Táto úloha spája všetko, čo ste sa naučili v štyroch lekciách o bankovníctve: HTML šablóny, spracovanie formulárov, integráciu API a riadenie stavu.
|
|
|
|
## Ciele učenia
|
|
|
|
Po splnení tejto úlohy budete schopní:
|
|
- **Vytvoriť** používateľsky prívetivý dialógový rozhranie na zadávanie údajov
|
|
- **Implementovať** prístupný dizajn formulára s podporou klávesnice a čítačiek obrazovky
|
|
- **Integrovať** nové funkcie do vášho existujúceho systému riadenia stavu
|
|
- **Precvičiť** komunikáciu s API a spracovanie chýb
|
|
- **Aplikovať** moderné webové vývojové vzory na funkciu z reálneho sveta
|
|
|
|
## Pokyny
|
|
|
|
### Krok 1: Tlačidlo "Pridať transakciu"
|
|
|
|
**Vytvorte** tlačidlo "Pridať transakciu" na stránke vášho dashboardu, ktoré používatelia ľahko nájdu a použijú.
|
|
|
|
**Požiadavky:**
|
|
- **Umiestnite** tlačidlo na logické miesto na dashboarde
|
|
- **Použite** jasný, akčný text na tlačidle
|
|
- **Štylizujte** tlačidlo tak, aby zodpovedalo vášmu existujúcemu dizajnu používateľského rozhrania
|
|
- **Zabezpečte**, že tlačidlo je prístupné pomocou klávesnice
|
|
|
|
### Krok 2: Implementácia dialógu
|
|
|
|
Vyberte jednu z dvoch možností na implementáciu vášho dialógu:
|
|
|
|
**Možnosť A: Samostatná stránka**
|
|
- **Vytvorte** novú HTML šablónu pre formulár transakcie
|
|
- **Pridajte** novú trasu do vášho systému smerovania
|
|
- **Implementujte** navigáciu na stránku formulára a späť
|
|
|
|
**Možnosť B: Modálny dialóg (odporúčané)**
|
|
- **Použite** JavaScript na zobrazenie/skrytie dialógu bez opustenia dashboardu
|
|
- **Implementujte** pomocou vlastnosti [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) alebo CSS tried
|
|
- **Vytvorte** plynulý používateľský zážitok s riadením zamerania
|
|
|
|
### Krok 3: Implementácia prístupnosti
|
|
|
|
**Zabezpečte**, že váš dialóg spĺňa [štandardy prístupnosti pre modálne dialógy](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/):
|
|
|
|
**Navigácia pomocou klávesnice:**
|
|
- **Podporte** kláves Escape na zatvorenie dialógu
|
|
- **Uzamknite** zameranie v dialógu, keď je otvorený
|
|
- **Vráťte** zameranie na tlačidlo spúšťača, keď je dialóg zatvorený
|
|
|
|
**Podpora čítačiek obrazovky:**
|
|
- **Pridajte** vhodné ARIA štítky a role
|
|
- **Oznámte** otvorenie/zatvorenie dialógu čítačkám obrazovky
|
|
- **Poskytnite** jasné štítky polí formulára a chybové správy
|
|
|
|
### Krok 4: Vytvorenie formulára
|
|
|
|
**Navrhnite** HTML formulár, ktorý zbiera údaje o transakcii:
|
|
|
|
**Povinné polia:**
|
|
- **Dátum**: Kedy sa transakcia uskutočnila
|
|
- **Popis**: Na čo bola transakcia určená
|
|
- **Suma**: Hodnota transakcie (pozitívna pre príjem, negatívna pre výdavky)
|
|
|
|
**Funkcie formulára:**
|
|
- **Validujte** vstupy používateľa pred odoslaním
|
|
- **Poskytnite** jasné chybové správy pre neplatné údaje
|
|
- **Zahrňte** užitočný text zástupcu a štítky
|
|
- **Štylizujte** konzistentne s vaším existujúcim dizajnom
|
|
|
|
### Krok 5: Integrácia API
|
|
|
|
**Pripojte** váš formulár k backendovému API:
|
|
|
|
**Kroky implementácie:**
|
|
- **Preskúmajte** [špecifikácie serverového API](../api/README.md) pre správny koncový bod a formát dát
|
|
- **Vytvorte** JSON dáta z vašich vstupov formulára
|
|
- **Odošlite** dáta na API s vhodným spracovaním chýb
|
|
- **Zobrazte** správy o úspechu/neúspechu používateľovi
|
|
- **Riešte** chyby siete elegantne
|
|
|
|
### Krok 6: Integrácia riadenia stavu
|
|
|
|
**Aktualizujte** váš dashboard s novou transakciou:
|
|
|
|
**Požiadavky na integráciu:**
|
|
- **Obnovte** údaje účtu po úspešnom pridaní transakcie
|
|
- **Aktualizujte** zobrazenie dashboardu bez potreby obnovy stránky
|
|
- **Zabezpečte**, že nová transakcia sa zobrazí okamžite
|
|
- **Udržujte** správnu konzistenciu stavu počas celého procesu
|
|
|
|
## Technické špecifikácie
|
|
|
|
**Podrobnosti o koncovom bode API:**
|
|
Pozrite si [dokumentáciu serverového API](../api/README.md) pre:
|
|
- Požadovaný formát JSON pre údaje o transakcii
|
|
- HTTP metódu a URL koncového bodu
|
|
- Očakávaný formát odpovede
|
|
- Spracovanie chýb v odpovedi
|
|
|
|
**Očakávaný výsledok:**
|
|
Po dokončení tejto úlohy by vaša banková aplikácia mala mať plne funkčnú funkciu "Pridať transakciu", ktorá vyzerá a správa sa profesionálne:
|
|
|
|
|
|
|
|
## Testovanie vašej implementácie
|
|
|
|
**Funkčné testovanie:**
|
|
1. **Overte**, že tlačidlo "Pridať transakciu" je jasne viditeľné a prístupné
|
|
2. **Otestujte**, že dialóg sa správne otvára a zatvára
|
|
3. **Potvrďte**, že validácia formulára funguje pre všetky povinné polia
|
|
4. **Skontrolujte**, že úspešné transakcie sa okamžite zobrazia na dashboarde
|
|
5. **Zabezpečte**, že spracovanie chýb funguje pre neplatné údaje a problémy so sieťou
|
|
|
|
**Testovanie prístupnosti:**
|
|
1. **Navigujte** cez celý proces iba pomocou klávesnice
|
|
2. **Otestujte** s čítačkou obrazovky, aby ste zabezpečili správne oznámenia
|
|
3. **Overte**, že riadenie zamerania funguje správne
|
|
4. **Skontrolujte**, že všetky prvky formulára majú vhodné štítky
|
|
|
|
## Hodnotiace kritériá
|
|
|
|
| Kritérium | Vynikajúce | Dostatočné | Potrebné zlepšenie |
|
|
| --------- | ---------- | ---------- | ------------------ |
|
|
| **Funkčnosť** | Funkcia pridania transakcie funguje bezchybne s vynikajúcim používateľským zážitkom a dodržiava všetky najlepšie praktiky z lekcií | Funkcia pridania transakcie funguje správne, ale nemusí dodržiavať niektoré najlepšie praktiky alebo má drobné problémy s použiteľnosťou | Funkcia pridania transakcie funguje len čiastočne alebo má významné problémy s použiteľnosťou |
|
|
| **Kvalita kódu** | Kód je dobre organizovaný, dodržiava zavedené vzory, obsahuje správne spracovanie chýb a bezproblémovo sa integruje s existujúcim riadením stavu | Kód funguje, ale môže mať niektoré problémy s organizáciou alebo nekonzistentné vzory s existujúcim kódom | Kód má významné štrukturálne problémy alebo sa dobre neintegruje s existujúcimi vzormi |
|
|
| **Prístupnosť** | Plná podpora navigácie pomocou klávesnice, kompatibilita s čítačkami obrazovky a dodržiavanie pokynov WCAG s vynikajúcim riadením zamerania | Základné funkcie prístupnosti sú implementované, ale môžu chýbať niektoré funkcie navigácie pomocou klávesnice alebo čítačiek obrazovky | Obmedzené alebo žiadne zohľadnenie prístupnosti |
|
|
| **Používateľský zážitok** | Intuitívne, prepracované rozhranie s jasnou spätnou väzbou, plynulými interakciami a profesionálnym vzhľadom | Dobrý používateľský zážitok s drobnými oblasťami na zlepšenie spätnej väzby alebo vizuálneho dizajnu | Slabý používateľský zážitok s mätúcim rozhraním alebo nedostatkom spätnej väzby |
|
|
|
|
## Doplnkové výzvy (voliteľné)
|
|
|
|
Keď splníte základné požiadavky, zvážte tieto vylepšenia:
|
|
|
|
**Rozšírené funkcie:**
|
|
- **Pridajte** kategórie transakcií (jedlo, doprava, zábava atď.)
|
|
- **Implementujte** validáciu vstupov s okamžitou spätnou väzbou
|
|
- **Vytvorte** klávesové skratky pre pokročilých používateľov
|
|
- **Pridajte** možnosť úpravy a mazania transakcií
|
|
|
|
**Pokročilá integrácia:**
|
|
- **Implementujte** funkciu spätného kroku pre nedávno pridané transakcie
|
|
- **Pridajte** hromadný import transakcií z CSV súborov
|
|
- **Vytvorte** vyhľadávanie a filtrovanie transakcií
|
|
- **Implementujte** funkciu exportu dát
|
|
|
|
Tieto voliteľné funkcie vám pomôžu precvičiť pokročilejšie koncepty webového vývoja a vytvoriť komplexnejšiu bankovú aplikáciu!
|
|
|
|
---
|
|
|
|
**Upozornenie**:
|
|
Tento dokument bol preložený pomocou služby AI prekladu [Co-op Translator](https://github.com/Azure/co-op-translator). Hoci sa snažíme o presnosť, prosím, berte na vedomie, že automatizované preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho rodnom jazyku by mal byť považovaný za autoritatívny zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nie sme zodpovední za žiadne nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu. |