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.
155 lines
8.6 KiB
155 lines
8.6 KiB
# Implementacja dialogu "Dodaj transakcję"
|
|
|
|
## Przegląd
|
|
|
|
Twoja aplikacja bankowa posiada teraz solidne zarządzanie stanem i trwałość danych, ale brakuje jej kluczowej funkcji, której potrzebują prawdziwe aplikacje bankowe: możliwości dodawania własnych transakcji przez użytkowników. W tym zadaniu zaimplementujesz kompletny dialog "Dodaj transakcję", który będzie się płynnie integrować z istniejącym systemem zarządzania stanem.
|
|
|
|
To zadanie łączy wszystkie umiejętności, których nauczyłeś się podczas czterech lekcji bankowości: szablonowanie HTML, obsługę formularzy, integrację z API oraz zarządzanie stanem.
|
|
|
|
## Cele nauki
|
|
|
|
Po ukończeniu tego zadania:
|
|
- **Stworzysz** przyjazny dla użytkownika interfejs dialogu do wprowadzania danych
|
|
- **Zaimplementujesz** dostępny design formularza z obsługą klawiatury i czytników ekranu
|
|
- **Zintegrujesz** nowe funkcje z istniejącym systemem zarządzania stanem
|
|
- **Poćwiczysz** komunikację z API i obsługę błędów
|
|
- **Zastosujesz** nowoczesne wzorce tworzenia stron internetowych w praktycznej funkcji
|
|
|
|
## Instrukcje
|
|
|
|
### Krok 1: Przycisk Dodaj transakcję
|
|
|
|
**Utwórz** przycisk "Dodaj transakcję" na stronie pulpitu, który użytkownicy łatwo znajdą i będą mogli z niego skorzystać.
|
|
|
|
**Wymagania:**
|
|
- **Umieść** przycisk w logicznym miejscu na pulpicie
|
|
- **Użyj** jasnego, zachęcającego tekstu na przycisku
|
|
- **Ostyluj** przycisk zgodnie z istniejącym designem UI
|
|
- **Zadbaj** o dostępność przycisku z poziomu klawiatury
|
|
|
|
### Krok 2: Implementacja dialogu
|
|
|
|
Wybierz jeden z tych dwóch sposobów implementacji dialogu:
|
|
|
|
**Opcja A: Osobna strona**
|
|
- **Stwórz** nowy szablon HTML dla formularza transakcji
|
|
- **Dodaj** nową ścieżkę do swojego systemu routingu
|
|
- **Zaimplementuj** nawigację do i z strony formularza
|
|
|
|
**Opcja B: Modalny dialog (zalecane)**
|
|
- **Użyj** JavaScript do pokazania/ukrycia dialogu bez opuszczania pulpitu
|
|
- **Zaimplementuj** przy użyciu [właściwości `hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) lub klas CSS
|
|
- **Stwórz** płynne doświadczenie użytkownika z właściwym zarządzaniem fokusem
|
|
|
|
### Krok 3: Implementacja dostępności
|
|
|
|
**Zadbaj**, aby Twój dialog spełniał [standardy dostępności dla dialogów modalnych](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/):
|
|
|
|
**Nawigacja klawiaturą:**
|
|
- **Obsłuż** klawisz Escape do zamknięcia dialogu
|
|
- **Zatrzymaj** fokus w dialogu podczas jego otwarcia
|
|
- **Przywróć** fokus do przycisku wywołującego po zamknięciu
|
|
|
|
**Obsługa czytników ekranu:**
|
|
- **Dodaj** odpowiednie etykiety i role ARIA
|
|
- **Ogłoś** otwieranie/zamykanie dialogu czytnikom ekranu
|
|
- **Zapewnij** jasne etykiety pól formularza i komunikaty o błędach
|
|
|
|
### Krok 4: Tworzenie formularza
|
|
|
|
**Zaprojektuj** formularz HTML zbierający dane transakcji:
|
|
|
|
**Pola obowiązkowe:**
|
|
- **Data**: kiedy miała miejsce transakcja
|
|
- **Opis**: na co była transakcja
|
|
- **Kwota**: wartość transakcji (dodatnia dla dochodów, ujemna dla wydatków)
|
|
|
|
**Funkcje formularza:**
|
|
- **Zweryfikuj** dane użytkownika przed wysłaniem formularza
|
|
- **Zapewnij** jasne komunikaty błędów dla niepoprawnych danych
|
|
- **Dodaj** pomocniczy tekst zastępczy i etykiety
|
|
- **Ostyluj** w zgodzie z istniejącym wyglądem
|
|
|
|
### Krok 5: Integracja z API
|
|
|
|
**Połącz** formularz z backendowym API:
|
|
|
|
**Kroki implementacji:**
|
|
- **Przejrzyj** [specyfikacje API serwera](../api/README.md) dotyczące odpowiedniego endpointu i formatu danych
|
|
- **Utwórz** dane JSON z danych formularza
|
|
- **Wyślij** dane do API z odpowiednią obsługą błędów
|
|
- **Wyświetl** użytkownikowi komunikaty o sukcesie lub porażce
|
|
- **Obsłuż** błędy sieciowe w sposób przyjazny
|
|
|
|
### Krok 6: Integracja z zarządzaniem stanu
|
|
|
|
**Zaktualizuj** pulpit po dodaniu nowej transakcji:
|
|
|
|
**Wymagania dotyczące integracji:**
|
|
- **Odśwież** dane konta po poprawnym dodaniu transakcji
|
|
- **Zaktualizuj** wyświetlanie pulpitu bez konieczności przeładowania strony
|
|
- **Upewnij się**, że nowa transakcja pojawia się natychmiast
|
|
- **Zachowaj** spójność stanu podczas całego procesu
|
|
|
|
## Specyfikacje techniczne
|
|
|
|
**Szczegóły endpointu API:**
|
|
Odniesienie do [dokumentacji API serwera](../api/README.md) zawierającej:
|
|
- Wymagany format JSON danych transakcji
|
|
- Metodę HTTP i adres endpointu
|
|
- Oczekiwany format odpowiedzi
|
|
- Obsługę odpowiedzi błędów
|
|
|
|
**Oczekiwany rezultat:**
|
|
Po ukończeniu tego zadania Twoja aplikacja bankowa powinna mieć w pełni funkcjonalną funkcję "Dodaj transakcję", która wygląda i działa profesjonalnie:
|
|
|
|
|
|
|
|
## Testowanie implementacji
|
|
|
|
**Testy funkcjonalne:**
|
|
1. **Sprawdź**, czy przycisk "Dodaj transakcję" jest wyraźnie widoczny i dostępny
|
|
2. **Przetestuj**, czy dialog otwiera się i zamyka poprawnie
|
|
3. **Potwierdź**, że walidacja formularza działa dla wszystkich obowiązkowych pól
|
|
4. **Sprawdź**, czy udane transakcje pojawiają się natychmiast na pulpicie
|
|
5. **Zadbaj**, aby obsługa błędów działała dla niepoprawnych danych i problemów z siecią
|
|
|
|
**Testy dostępności:**
|
|
1. **Nawiguj** przez cały proces używając wyłącznie klawiatury
|
|
2. **Przetestuj** z czytnikiem ekranu, aby potwierdzić poprawne ogłoszenia
|
|
3. **Sprawdź**, czy zarządzanie fokusem działa poprawnie
|
|
4. **Zweryfikuj**, że wszystkie elementy formularza mają odpowiednie etykiety
|
|
|
|
## Kryteria oceny
|
|
|
|
| Kryterium | Wzorowe | Wystarczające | Wymaga poprawy |
|
|
| -------- | --------- | -------- | ----------------- |
|
|
| **Funkcjonalność** | Funkcja dodawania transakcji działa bezbłędnie, zapewnia doskonałe doświadczenie użytkownika i stosuje wszystkie dobre praktyki z lekcji | Funkcja dodawania transakcji działa poprawnie, ale może nieco odbiegać od najlepszych praktyk lub ma drobne problemy z użytecznością | Funkcja dodawania transakcji działa częściowo lub ma poważne problemy z użytecznością |
|
|
| **Jakość kodu** | Kod jest dobrze zorganizowany, stosuje ustalone wzorce, zawiera odpowiednią obsługę błędów i płynnie integruje się z istniejącym systemem zarządzania stanem | Kod działa, ale może mieć problemy z organizacją lub niespójne wzorce względem istniejącej bazy kodu | Kod ma poważne problemy strukturalne lub słabo integruje się z istniejącymi wzorcami |
|
|
| **Dostępność** | Pełna obsługa nawigacji klawiaturą, kompatybilność z czytnikami ekranu oraz zgodność z wytycznymi WCAG z doskonałym zarządzaniem fokusowaniem | Podstawowe funkcje dostępności zaimplementowane, lecz mogą brakować niektórych usprawnień nawigacji klawiaturą lub czytników | Ograniczone lub brak implementacji dostępności |
|
|
| **Doświadczenie użytkownika** | Intuicyjny, dopracowany interfejs z jasną informacją zwrotną, płynne interakcje i profesjonalny wygląd | Dobre doświadczenie użytkownika z drobnymi obszarami do poprawy w zakresie informacji zwrotnej lub designu wizualnego | Słabe doświadczenie użytkownika z niewyraźnym interfejsem lub brakiem informacji zwrotnej |
|
|
|
|
## Dodatkowe wyzwania (opcjonalne)
|
|
|
|
Po ukończeniu podstawowych wymagań rozważ następujące ulepszenia:
|
|
|
|
**Rozszerzone funkcje:**
|
|
- **Dodaj** kategorie transakcji (jedzenie, transport, rozrywka itd.)
|
|
- **Zaimplementuj** walidację danych z natychmiastowym feedbackiem
|
|
- **Stwórz** skróty klawiaturowe dla zaawansowanych użytkowników
|
|
- **Dodaj** możliwość edycji i usuwania transakcji
|
|
|
|
**Zaawansowana integracja:**
|
|
- **Zaimplementuj** funkcję cofania ostatnio dodanych transakcji
|
|
- **Dodaj** masowy import transakcji z plików CSV
|
|
- **Stwórz** wyszukiwanie i filtrowanie transakcji
|
|
- **Zaimplementuj** eksport danych
|
|
|
|
Te opcjonalne funkcje pozwolą Ci przećwiczyć bardziej zaawansowane koncepcje web developmentu i stworzyć bardziej kompletną aplikację bankową!
|
|
|
|
---
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
**Zastrzeżenie**:
|
|
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI [Co-op Translator](https://github.com/Azure/co-op-translator). Mimo że dokładamy starań, aby tłumaczenie było jak najdokładniejsze, prosimy mieć na uwadze, że automatyczne tłumaczenia mogą zawierać błędy lub nieścisłości. Oryginalny dokument w języku źródłowym powinien być traktowany jako źródło wiążące. W przypadku informacji krytycznych zalecamy skorzystanie z profesjonalnego tłumaczenia wykonanego przez człowieka. Nie ponosimy odpowiedzialności za jakiekolwiek nieporozumienia lub błędne interpretacje wynikające z korzystania z tego tłumaczenia.
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |