14 KiB
Имплементација дијалога "Додај трансакцију"
Преглед
Ваша апликација за банкарство сада има солидно управљање стањем и чување података, али јој недостаје кључна функција коју праве банкарске апликације морају имати: могућност да корисници додају сопствене трансакције. У овом задатку, имплементираћете комплетан дијалог "Додај трансакцију" који се беспрекорно интегрише са вашим постојећим системом за управљање стањем.
Овај задатак обједињује све што сте научили у четири лекције о банкарству: HTML шаблони, рад са формуларима, интеграција API-ја и управљање стањем.
Циљеви учења
Завршетком овог задатка, научићете:
- Креирање кориснички пријатељског интерфејса за унос података
- Имплементацију приступачног дизајна формулара са подршком за тастатуру и читаче екрана
- Интеграцију нових функција са вашим постојећим системом за управљање стањем
- Практиковање комуникације са API-јем и руковање грешкама
- Примена савремених веб развојних образаца на функцију из стварног света
Упутства
Корак 1: Дугме за додавање трансакције
Креирајте дугме "Додај трансакцију" на страници контролне табле које корисници могу лако пронаћи и приступити му.
Захтеви:
- Поставите дугме на логично место на контролној табли
- Користите јасан, акциони текст на дугмету
- Стилизујте дугме тако да одговара вашем постојећем дизајну корисничког интерфејса
- Осигурајте да је дугме приступачно преко тастатуре
Корак 2: Имплементација дијалога
Изаберите један од два приступа за имплементацију вашег дијалога:
Опција А: Посебна страница
- Креирајте нови HTML шаблон за формулар трансакције
- Додајте нову руту у ваш систем за рутирање
- Имплементирајте навигацију до и од странице формулара
Опција Б: Модални дијалог (препоручено)
- Користите JavaScript за приказивање/скривање дијалога без напуштања контролне табле
- Имплементирајте коришћењем
hiddenатрибута или CSS класа - Креирајте глатко корисничко искуство уз правилно управљање фокусом
Корак 3: Имплементација приступачности
Осигурајте да ваш дијалог испуњава стандардe приступачности за модалне дијалоге:
Навигација тастатуром:
- Подржите тастер Escape за затварање дијалога
- Ограничите фокус унутар дијалога када је отворен
- Вратите фокус на дугме које је активирало дијалог када се затвори
Подршка за читаче екрана:
- Додајте одговарајуће ARIA ознаке и улоге
- Обезбедите да се отварање/затварање дијалога најављује читачима екрана
- Пружите јасне ознаке поља формулара и поруке о грешкама
Корак 4: Креирање формулара
Дизајнирајте HTML формулар који прикупља податке о трансакцији:
Обавезна поља:
- Датум: Када се трансакција догодила
- Опис: За шта је трансакција била
- Износ: Вредност трансакције (позитивна за приходе, негативна за трошкове)
Карактеристике формулара:
- Потврдите унос корисника пре слања
- Пружите јасне поруке о грешкама за неважеће податке
- Укључите корисне текстове за помоћ и ознаке
- Стилизујте у складу са вашим постојећим дизајном
Корак 5: Интеграција са API-јем
Повежите ваш формулар са API-јем на серверу:
Кораци имплементације:
- Прегледајте спецификације API-ја сервера за исправан формат података и крајњу тачку
- Креирајте JSON податке из уноса вашег формулара
- Пошаљите податке API-ју уз одговарајуће руковање грешкама
- Прикажите поруке о успеху/неуспеху кориснику
- Руковајте грешкама у мрежи на одговарајући начин
Корак 6: Интеграција са управљањем стањем
Ажурирајте вашу контролну таблу новим трансакцијама:
Захтеви за интеграцију:
- Освежите податке о рачуну након успешног додавања трансакције
- Ажурирајте приказ контролне табле без потребе за поновним учитавањем странице
- Осигурајте да се нова трансакција одмах појави
- Одржавајте правилну конзистенцију стања током процеса
Техничке спецификације
Детаљи о API крајњој тачки: Погледајте документацију API-ја сервера за:
- Захтевани JSON формат за податке о трансакцији
- HTTP метод и URL крајње тачке
- Очекивани формат одговора
- Руковање одговорима о грешкама
Очекивани резултат: Након завршетка овог задатка, ваша апликација за банкарство треба да има потпуно функционалну функцију "Додај трансакцију" која изгледа и функционише професионално:
Тестирање имплементације
Функционално тестирање:
- Проверите да је дугме "Додај трансакцију" јасно видљиво и приступачно
- Тестирајте да се дијалог правилно отвара и затвара
- Потврдите да валидација формулара функционише за сва обавезна поља
- Проверите да се успешне трансакције одмах појављују на контролној табли
- Осигурајте да руковање грешкама функционише за неважеће податке и проблеме са мрежом
Тестирање приступачности:
- Навигирајте кроз цео процес користећи само тастатуру
- Тестирајте са читачем екрана да бисте осигурали правилне најаве
- Проверите да управљање фокусом функционише исправно
- Осигурајте да сва поља формулара имају одговарајуће ознаке
Рубрика за евалуацију
| Критеријум | Изузетно | Прихватљиво | Потребно побољшање |
|---|---|---|---|
| Функционалност | Функција додавања трансакције ради беспрекорно уз одлично корисничко искуство и прати све најбоље праксе из лекција | Функција додавања трансакције ради исправно, али можда не прати неке најбоље праксе или има мање проблеме са употребљивошћу | Функција додавања трансакције делимично ради или има значајне проблеме са употребљивошћу |
| Квалитет кода | Код је добро организован, прати утврђене обрасце, укључује правилно руковање грешкама и беспрекорно се интегрише са постојећим системом за управљање стањем | Код ради, али може имати неке проблеме са организацијом или недоследне обрасце у односу на постојећи код | Код има значајне структурне проблеме или се не интегрише добро са постојећим обрасцима |
| Приступачност | Потпуна подршка за навигацију тастатуром, компатибилност са читачима екрана и праћење WCAG смерница уз одлично управљање фокусом | Основне функције приступачности су имплементиране, али могу недостајати неке функције навигације тастатуром или читача екрана | Ограничене или никакве разматрања приступачности нису имплементиране |
| Корисничко искуство | Интуитиван, углађен интерфејс са јасним повратним информацијама, глатким интеракцијама и професионалним изгледом | Добро корисничко искуство са мањим просторима за побољшање у повратним информацијама или визуелном дизајну | Лоше корисничко искуство са конфузним интерфејсом или недостатком повратних информација |
Додатни изазови (опционо)
Када завршите основне захтеве, размислите о овим унапређењима:
Напредне функције:
- Додајте категорије трансакција (храна, превоз, забава, итд.)
- Имплементирајте валидацију уноса са повратним информацијама у реалном времену
- Креирајте пречице на тастатури за напредне кориснике
- Додајте могућност уређивања и брисања трансакција
Напредна интеграција:
- Имплементирајте функцију поништавања за недавно додате трансакције
- Додајте масовни увоз трансакција из CSV датотека
- Креирајте могућност претраге и филтрирања трансакција
- Имплементирајте функцију извоза података
Ове опционе функције ће вам помоћи да вежбате напредне концепте веб развоја и креирате потпунију апликацију за банкарство!
Одрицање од одговорности:
Овај документ је преведен помоћу услуге за превођење уз помоћ вештачке интелигенције Co-op Translator. Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.