8.6 KiB

Raw Blame History

Implementatie van de "Transactie Toevoegen" Dialoog

Overzicht

Je bankapp heeft nu een solide state management en gegevensopslag, maar mist een cruciale functie die echte bankapps nodig hebben: de mogelijkheid voor gebruikers om hun eigen transacties toe te voegen. In deze opdracht implementeer je een complete "Transactie Toevoegen" dialoog die naadloos integreert met je bestaande state management systeem.

Deze opdracht brengt alles samen wat je hebt geleerd in de vier banklessen: HTML templating, formulierverwerking, API-integratie en state management.

Leerdoelen

Door deze opdracht te voltooien, leer je:

Een gebruiksvriendelijke dialooginterface te maken voor gegevensinvoer
Een toegankelijk formulierontwerp te implementeren met ondersteuning voor toetsenbord en schermlezers
Nieuwe functies te integreren met je bestaande state management systeem
API-communicatie en foutafhandeling te oefenen
Moderne webontwikkelingspatronen toe te passen op een realistische functie

Instructies

Stap 1: Transactie Toevoegen-knop

Maak een "Transactie Toevoegen"-knop op je dashboardpagina die gebruikers gemakkelijk kunnen vinden en gebruiken.

Vereisten:

Plaats de knop op een logische locatie op het dashboard
Gebruik duidelijke, actiegerichte knoptekst
Stijl de knop zodat deze past bij je bestaande UI-ontwerp
Zorg ervoor dat de knop toegankelijk is via het toetsenbord

Stap 2: Implementatie van de Dialoog

Kies een van de twee benaderingen om je dialoog te implementeren:

Optie A: Afzonderlijke Pagina

Maak een nieuwe HTML-template voor het transactieformulier
Voeg een nieuwe route toe aan je routeringssysteem
Implementeer navigatie naar en van de formulierpagina

Optie B: Modale Dialoog (Aanbevolen)

Gebruik JavaScript om de dialoog te tonen/verbergen zonder het dashboard te verlaten
Implementeer dit met behulp van de hidden eigenschap of CSS-klassen
Creëer een soepele gebruikerservaring met correcte focusbeheer

Stap 3: Implementatie van Toegankelijkheid

Zorg ervoor dat je dialoog voldoet aan de toegankelijkheidsnormen voor modale dialogen:

Toetsenbordnavigatie:

Ondersteun de Escape-toets om de dialoog te sluiten
Beperk de focus tot de dialoog wanneer deze geopend is
Herstel de focus naar de triggerknop wanneer de dialoog gesloten is

Ondersteuning voor schermlezers:

Voeg geschikte ARIA-labels en -rollen toe
Meld het openen/sluiten van de dialoog aan schermlezers
Voorzie duidelijke labels en foutmeldingen voor formuliervelden

Stap 4: Formuliercreatie

Ontwerp een HTML-formulier dat transactiegegevens verzamelt:

Vereiste velden:

Datum: Wanneer de transactie plaatsvond
Beschrijving: Waar de transactie voor was
Bedrag: Waarde van de transactie (positief voor inkomsten, negatief voor uitgaven)

Formuliereigenschappen:

Valideer gebruikersinvoer vóór verzending
Geef duidelijke foutmeldingen voor ongeldige gegevens
Voeg nuttige voorbeeldtekst en labels toe
Stijl het formulier consistent met je bestaande ontwerp

Stap 5: API-integratie

Verbind je formulier met de backend-API:

Implementatiestappen:

Bekijk de server API-specificaties voor het juiste eindpunt en gegevensformaat
Maak JSON-gegevens van je formulierinvoer
Verzend de gegevens naar de API met passende foutafhandeling
Toon succes-/foutmeldingen aan de gebruiker
Behandel netwerkfouten op een nette manier

Stap 6: Integratie met State Management

Werk je dashboard bij met de nieuwe transactie:

Integratievereisten:

Ververs de accountgegevens na succesvolle toevoeging van een transactie
Werk de dashboardweergave bij zonder een pagina opnieuw te laden
Zorg ervoor dat de nieuwe transactie onmiddellijk verschijnt
Behoud een correcte consistentie van de state gedurende het proces

Technische Specificaties

API Eindpunt Details: Raadpleeg de server API-documentatie voor:

Vereiste JSON-formaat voor transactiegegevens
HTTP-methode en eindpunt-URL
Verwacht responsformaat
Foutafhandelingsspecificaties

Verwacht Resultaat: Na het voltooien van deze opdracht moet je bankapp een volledig functionele "Transactie Toevoegen"-functie hebben die er professioneel uitziet en zich professioneel gedraagt:

Testen van je Implementatie

Functionele Testen:

Controleer of de "Transactie Toevoegen"-knop duidelijk zichtbaar en toegankelijk is
Test of de dialoog correct opent en sluit
Bevestig dat formuliervalidatie werkt voor alle vereiste velden
Controleer of succesvolle transacties onmiddellijk op het dashboard verschijnen
Zorg ervoor dat foutafhandeling werkt voor ongeldige gegevens en netwerkproblemen

Toegankelijkheidstesten:

Navigeer door de volledige flow met alleen het toetsenbord
Test met een schermlezer om te zorgen voor correcte meldingen
Controleer of focusbeheer correct werkt
Controleer of alle formelementen geschikte labels hebben

Evaluatierubric

Criteria	Uitmuntend	Voldoende	Verbetering Nodig
Functionaliteit	De functie "Transactie Toevoegen" werkt perfect met een uitstekende gebruikerservaring en volgt alle best practices uit de lessen	De functie "Transactie Toevoegen" werkt correct, maar volgt mogelijk niet alle best practices of heeft kleine gebruiksproblemen	De functie "Transactie Toevoegen" werkt gedeeltelijk of heeft aanzienlijke gebruiksproblemen
Codekwaliteit	Code is goed georganiseerd, volgt gevestigde patronen, bevat correcte foutafhandeling en integreert naadloos met het bestaande state management	Code werkt, maar kan enkele organisatieproblemen of inconsistente patronen met de bestaande codebasis hebben	Code heeft aanzienlijke structurele problemen of integreert niet goed met bestaande patronen
Toegankelijkheid	Volledige ondersteuning voor toetsenbordnavigatie, compatibiliteit met schermlezers en volgt WCAG-richtlijnen met uitstekend focusbeheer	Basis toegankelijkheidsfuncties geïmplementeerd, maar mist mogelijk enkele toetsenbordnavigatie- of schermlezerfuncties	Beperkte of geen aandacht voor toegankelijkheid
Gebruikerservaring	Intuïtieve, gepolijste interface met duidelijke feedback, soepele interacties en een professionele uitstraling	Goede gebruikerservaring met kleine verbeterpunten in feedback of visueel ontwerp	Slechte gebruikerservaring met een verwarrende interface of gebrek aan gebruikersfeedback

Aanvullende Uitdagingen (Optioneel)

Als je de basisvereisten hebt voltooid, overweeg dan deze verbeteringen:

Uitgebreide Functies:

Voeg transactiecategorieën toe (eten, vervoer, entertainment, etc.)
Implementeer invoervalidatie met realtime feedback
Maak sneltoetsen voor gevorderde gebruikers
Voeg mogelijkheden toe voor het bewerken en verwijderen van transacties

Geavanceerde Integratie:

Implementeer een undo-functie voor recent toegevoegde transacties
Voeg bulkimport van transacties toe via CSV-bestanden
Maak zoek- en filtermogelijkheden voor transacties
Implementeer een functie voor het exporteren van gegevens

Deze optionele functies helpen je om meer geavanceerde webontwikkelingsconcepten te oefenen en een completere bankapplicatie te creëren!

Disclaimer:
Dit document is vertaald met behulp van de AI-vertalingsservice Co-op Translator. Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.

8.6 KiB Raw Blame History