8.6 KiB

Raw Permalink Blame History

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

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

Sprawdź, czy przycisk "Dodaj transakcję" jest wyraźnie widoczny i dostępny
Przetestuj, czy dialog otwiera się i zamyka poprawnie
Potwierdź, że walidacja formularza działa dla wszystkich obowiązkowych pól
Sprawdź, czy udane transakcje pojawiają się natychmiast na pulpicie
Zadbaj, aby obsługa błędów działała dla niepoprawnych danych i problemów z siecią

Testy dostępności:

Nawiguj przez cały proces używając wyłącznie klawiatury
Przetestuj z czytnikiem ekranu, aby potwierdzić poprawne ogłoszenia
Sprawdź, czy zarządzanie fokusem działa poprawnie
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ą!

Zastrzeżenie:
Ten dokument został przetłumaczony za pomocą usługi tłumaczenia AI 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.

8.6 KiB Raw Permalink Blame History