8.5 KiB
Įgyvendinkite „Pridėti sandorį“ dialogą
Apžvalga
Jūsų banko programa dabar turi patikimą būsenos valdymą ir duomenų išlaikymą, tačiau trūksta svarbios funkcijos, kurios reikalauja tikros bankinės programos: galimybės vartotojams pridėti savo sandorius. Šiame užduotyje įgyvendinsite visapusišką „Pridėti sandorį“ dialogą, kuris sklandžiai integruosis su jūsų esama būsenos valdymo sistema.
Ši užduotis sujungia viską, ko išmokote keturiuose bankininkystės pamokose: HTML šablonavimą, formų tvarkymą, API integraciją ir būsenos valdymą.
Mokymosi tikslai
Atlikdami šią užduotį jūs:
- Sukursite naudotojui draugišką dialogo sąsają duomenų įvedimui
- Įgyvendinsite prieinamą formos dizainą su klaviatūros ir ekrano skaitytuvo palaikymu
- Integruosite naujas funkcijas su esama būsenos valdymo sistema
- Gausite praktikos API komunikacijoje ir klaidų tvarkyme
- Pridėsite šiuolaikinius interneto kūrimo šablonus realių funkcijų kontekste
Instrukcijos
1 žingsnis: Pridėti sandorį mygtukas
Sukurkite „Pridėti sandorį“ mygtuką savo kontrolės skydelio puslapyje, kurį vartotojai lengvai rastų ir pasiektų.
Reikalavimai:
- Padėkite mygtuką logiškoje vietoje kontrolės skydelyje
- Naudokite aiškų, veiksmą nurodantį mygtuko tekstą
- Pasirūpinkite mygtuko dizainu, atitinkančiu esamą UI stilistiką
- Įsitikinkite, kad mygtukas yra prieinamas klaviatūra
2 žingsnis: Dialogo įgyvendinimas
Pasirinkite vieną iš šių dviejų būdų dialogui įgyvendinti:
A variantas: Atskiras puslapis
- Sukurkite naują HTML šabloną sandorio formai
- Pridėkite naują maršrutą savo maršruto sistemoje
- Įgyvendinkite navigaciją į formos puslapį ir iš jo
B variantas: Modalinis dialogas (rekomenduojama)
- Naudokite JavaScript dialogo rodymui/slėpimui, neišeinant iš kontrolės skydelio
- Įgyvendinkite naudodami
hiddensavybę arba CSS klases - Sukurkite sklandžią naudotojo patirtį su tinkama fokusų valdymu
3 žingsnis: Prieinamumo įgyvendinimas
Užtikrinkite, kad jūsų dialogas atitinka modalinių dialogų prieinamumo standartus:
Klaviatūros navigacija:
- Palaikykite Escape klavišą dialogo uždarymui
- Apribokite fokusą dialogo viduje, kai jis atidarytas
- Grąžinkite fokusą į aktyvacijos mygtuką, kai dialogas uždaromas
Ekrano skaitytuvo palaikymas:
- Pridėkite tinkamus ARIA etiketes ir vaidmenis
- Praneškite apie dialogo atidarymą/uždarymą ekrano skaitytuvui
- Suteikite aiškius formos laukų etiketes ir klaidų pranešimus
4 žingsnis: Formos kūrimas
Sukurkite HTML formą, kuri renka sandorio duomenis:
Privalomi laukai:
- Data: Kada įvyko sandoris
- Aprašymas: Kam buvo sandoris
- Suma: Sandorio vertė (teigiama – pajamos, neigiama – išlaidos)
Formos savybės:
- Patikrinkite vartotojo įvestį prieš pateikimą
- Suteikite aiškius klaidų pranešimus neteisingiems duomenims
- Įtraukite pagalbinius vietos užrašus ir etiketes
- Stilizacija turi atitikti jūsų esamą dizainą
5 žingsnis: API integracija
Prijunkite formą prie backend API:
Įgyvendinimo žingsniai:
- Peržvelkite serverio API specifikacijas dėl teisingo endpoint ir duomenų formato
- Sukurkite JSON duomenis iš formos įvesties
- Siųskite duomenis API su tinkamu klaidų tvarkymu
- Rodykite vartotojui sėkmės arba nesėkmės pranešimus
- Tvarkykite tinklo klaidas maloniai
6 žingsnis: Būsenos valdymo integracija
Atnaujinkite savo kontrolės skydelį su nauju sandoriu:
Integracijos reikalavimai:
- Atnaujinkite sąskaitos duomenis po sėkmingo sandorio pridėjimo
- Atnaujinkite kontrolės skydelio vaizdą be puslapio perkrovimo
- Užtikrinkite, kad naujas sandoris būtų matomas iš karto
- Išlaikykite būsenos nuoseklumą viso proceso metu
Techninės specifikacijos
API endpoint detalės: Pasižiūrėkite į serverio API dokumentaciją, kur rasite:
- Reikalaujamą JSON formatą sandorio duomenims
- HTTP metodą ir endpoint URL
- Laukiamą atsakymo formatą
- Klaidos atsakymų tvarkymą
Laukiamas rezultatas: Baigus šią užduotį, jūsų banko programa turės visiškai veikiantį „Pridėti sandorį“ funkcionalumą, kuris atrodo ir veikia profesionaliai:
Testavimas
Funkcinis testavimas:
- Patikrinkite, ar „Pridėti sandorį“ mygtukas aiškiai matomas ir prieinamas
- Išbandykite, kad dialogas atsidaro ir užsidaro tinkamai
- Patvirtinkite, kad formos validacija veikia visiems privalomiems laukams
- Patikrinkite, ar sėkmingi sandoriai iš karto atsiranda kontrolės skydelyje
- Įsitikinkite, kad klaidų tvarkymas veikia neteisingiems duomenims ir tinklo problemoms
Prieinamumo testavimas:
- Naršykite visą procesą tik naudodami klaviatūrą
- Testuokite su ekrano skaitytuvu, kad įsitikintumėte tinkamais pranešimais
- Patikrinkite, ar fokusų valdymas veikia teisingai
- Įsitikinkite, kad visi formos elementai turi tinkamas etiketes
Vertinimo kriterijai
| Kriterijai | Puikiai | Patenkinamai | Reikia tobulinti |
|---|---|---|---|
| Funkcionalumas | „Pridėti sandorį“ funkcija veikia nepriekaištingai su puikia naudotojo patirtimi ir atitinka visas pamokų gerąsias praktikas | „Pridėti sandorį“ funkcija veikia teisingai, bet gali netaisyti kai kurių gerųjų praktikų arba turi smulkių naudojimo problemų | „Pridėti sandorį“ funkcija veikia dalinai arba turi reikšmingų naudojimo problemų |
| Kodo kokybė | Kodas gerai organizuotas, laikosi nustatytų šablonų, turi tinkamą klaidų tvarkymą ir sklandžiai integruojasi su esama būsenos valdymo sistema | Kodas veikia, tačiau gali būti organizavimo trūkumų arba prieštaraujančių šablonų su esamu kodu | Kode yra reikšmingų struktūrinių problemų arba jis blogai integruojasi su esamais šablonais |
| Prieinamumas | Pilnas klaviatūros navigacijos palaikymas, suderinamumas su ekrano skaitytuvais ir WCAG gairių laikymasis su puikiu fokusų valdymu | Pagrindinės prieinamumo funkcijos įgyvendintos, bet gali trūkti kai kurių klaviatūros navigacijos ar ekrano skaitytuvo funkcijų | Ribotas arba jokio prieinamumo įgyvendinimo |
| Naudotojo patirtis | Intuityvi, tvarkinga sąsaja su aiškiu grįžtamuoju ryšiu, sklandžiais veiksmais ir profesionaliu vaizdu | Gera naudotojo patirtis su mažais patobulinimų laukais grįžtamojo ryšio ar vizualinio dizaino srityse | Prasta naudotojo patirtis su painia sąsaja arba grįžtamojo ryšio stoka |
Papildomi iššūkiai (pasirenkama)
Baigę pagrindinius reikalavimus, apsvarstykite šiuos papildomus patobulinimus:
Išplėstinės funkcijos:
- Pridėkite sandorio kategorijas (maistas, transportas, pramogos ir kt.)
- Įgyvendinkite įvesties patikrinimą su realaus laiko grįžtamuoju ryšiu
- Sukurkite klaviatūros spartieji klavišai pažengusiems vartotojams
- Pridėkite sandorių redagavimo ir trynimo galimybes
Pažangi integracija:
- Įgyvendinkite veiksmų atšaukimo funkciją neseniai pridėtiems sandoriams
- Pridėkite masinį sandorių importą iš CSV failų
- Sukurkite sandorių paieškos ir filtravimo galimybes
- Įgyvendinkite duomenų eksportavimo funkciją
Šios pasirenkamos funkcijos padės jums praktikuotis pažangesnėse interneto kūrimo koncepcijose ir sukurti dar pilnesnę banko programėlę!
Atsakomybės apribojimas: Šis dokumentas buvo išverstas naudojant dirbtinio intelekto vertimo paslaugą Co-op Translator. Nors siekiame tikslumo, atkreipkite dėmesį, kad automatiniai vertimai gali turėti klaidų ar netikslumų. Originalus dokumentas gimtąja kalba turėtų būti laikomas autoritetingu šaltiniu. Svarbiai informacijai rekomenduojama naudoti profesionalaus žmogaus vertimą. Mes neatsakome už bet kokius nesusipratimus ar klaidingus vertimus, kilusius naudojantis šiuo vertimu.