15 KiB

Raw Blame History Unescape Escape

Имплементиране на диалог "Добавяне на транзакция"

Преглед

Вашето банково приложение вече има стабилно управление на състоянието и съхранение на данни, но му липсва ключова функция, която реалните банкови приложения предлагат: възможността потребителите да добавят свои собствени транзакции. В това задание ще създадете пълен диалог "Добавяне на транзакция", който се интегрира безпроблемно с вашата съществуваща система за управление на състоянието.

Това задание обединява всичко, което сте научили в четирите урока за банкиране: HTML шаблони, обработка на формуляри, интеграция с API и управление на състоянието.

Цели на обучението

С изпълнението на това задание ще:

Създадете удобен за потребителя интерфейс за въвеждане на данни
Имплементирате достъпен дизайн на формуляри с поддръжка на клавиатура и екранни четци
Интегрирате нови функции със съществуващата система за управление на състоянието
Практикувате комуникация с API и обработка на грешки
Приложите съвременни уеб разработки към реална функционалност

Инструкции

Стъпка 1: Бутон за добавяне на транзакция

Създайте бутон "Добавяне на транзакция" на страницата на таблото, който потребителите лесно да откриват и използват.

Изисквания:

Поставете бутона на логично място на таблото
Използвайте ясен, ориентиран към действие текст за бутона
Стилизирайте бутона така, че да съответства на съществуващия дизайн на потребителския интерфейс
Осигурете достъпност на бутона чрез клавиатура

Стъпка 2: Имплементация на диалога

Изберете един от двата подхода за имплементиране на вашия диалог:

Опция А: Отделна страница

Създайте нов HTML шаблон за формуляра за транзакции
Добавете нов маршрут към вашата система за маршрутизация
Имплементирайте навигация към и от страницата с формуляра

Опция Б: Модален диалог (Препоръчително)

Използвайте JavaScript за показване/скриване на диалога, без да напускате таблото
Имплементирайте с помощта на свойството hidden или CSS класове
Създайте плавно потребителско изживяване с правилно управление на фокуса

Стъпка 3: Имплементация на достъпност

Осигурете, че вашият диалог отговаря на стандартите за достъпност на модални диалози:

Навигация с клавиатура:

Поддържайте клавиша Escape за затваряне на диалога
Ограничете фокуса в диалога, когато е отворен
Върнете фокуса към бутона за активиране, когато диалогът е затворен

Поддръжка на екранни четци:

Добавете подходящи ARIA етикети и роли
Обявете отварянето/затварянето на диалога на екранните четци
Осигурете ясни етикети на полетата във формуляра и съобщения за грешки

Стъпка 4: Създаване на формуляр

Проектирайте HTML формуляр, който събира данни за транзакции:

Задължителни полета:

Дата: Кога е извършена транзакцията
Описание: За какво е била транзакцията
Сума: Стойност на транзакцията (положителна за приходи, отрицателна за разходи)

Функции на формуляра:

Валидирайте въведените данни преди изпращане
Осигурете ясни съобщения за грешки при невалидни данни
Включете полезен текст за подсказки и етикети
Стилизирайте формуляра в съответствие със съществуващия дизайн

Стъпка 5: Интеграция с API

Свържете вашия формуляр с бекенд API:

Стъпки за имплементация:

Прегледайте спецификациите на API сървъра за правилния крайна точка и формат на данните
Създайте JSON данни от въведените във формуляра стойности
Изпратете данните към API с подходяща обработка на грешки
Покажете съобщения за успех/неуспех на потребителя
Обработете мрежови грешки по подходящ начин

Стъпка 6: Интеграция с управление на състоянието

Обновете таблото с новата транзакция:

Изисквания за интеграция:

Обновете данните за акаунта след успешно добавяне на транзакция
Обновете дисплея на таблото без необходимост от презареждане на страницата
Осигурете, че новата транзакция се появява незабавно
Поддържайте правилна консистентност на състоянието през целия процес

Технически спецификации

Детайли за API крайна точка: Прегледайте документацията на API сървъра за:

Изисквания за JSON формат на данните за транзакции
HTTP метод и URL на крайна точка
Очакван формат на отговор
Обработка на грешки в отговорите

Очакван резултат: След завършване на това задание, вашето банково приложение трябва да има напълно функционална функция "Добавяне на транзакция", която изглежда и работи професионално:

Тестване на вашата имплементация

Функционално тестване:

Проверете, че бутонът "Добавяне на транзакция" е ясно видим и достъпен
Тествайте, че диалогът се отваря и затваря правилно
Потвърдете, че валидирането на формуляра работи за всички задължителни полета
Уверете се, че успешните транзакции се появяват незабавно на таблото
Проверете, че обработката на грешки работи за невалидни данни и мрежови проблеми

Тестване на достъпност:

Навигирайте през целия процес, използвайки само клавиатурата
Тествайте с екранен четец, за да се уверите, че съобщенията са правилно обявени
Проверете, че управлението на фокуса работи правилно
Уверете се, че всички елементи на формуляра имат подходящи етикети

Оценителна таблица

Критерии	Отлично	Задоволително	Нуждае се от подобрение
Функционалност	Функцията за добавяне на транзакция работи безупречно с отлично потребителско изживяване и следва всички най-добри практики от уроците	Функцията за добавяне на транзакция работи правилно, но може да не следва някои най-добри практики или има малки проблеми с използваемостта	Функцията за добавяне на транзакция работи частично или има значителни проблеми с използваемостта
Качество на кода	Кодът е добре организиран, следва установени модели, включва подходяща обработка на грешки и се интегрира безпроблемно със съществуващото управление на състоянието	Кодът работи, но може да има проблеми с организацията или несъответствия с съществуващата кодова база	Кодът има значителни структурни проблеми или не се интегрира добре със съществуващите модели
Достъпност	Пълна поддръжка на навигация с клавиатура, съвместимост с екранни четци и следване на WCAG насоки с отлично управление на фокуса	Основни функции за достъпност са имплементирани, но може да липсват някои функции за навигация с клавиатура или екранни четци	Ограничени или липсващи съображения за достъпност
Потребителско изживяване	Интуитивен, изчистен интерфейс с ясна обратна връзка, плавни взаимодействия и професионален външен вид	Добро потребителско изживяване с малки области за подобрение в обратната връзка или визуалния дизайн	Лошо потребителско изживяване с объркващ интерфейс или липса на обратна връзка

Допълнителни предизвикателства (по избор)

След като завършите основните изисквания, обмислете тези подобрения:

Подобрени функции:

Добавете категории за транзакции (храна, транспорт, развлечения и др.)
Имплементирайте валидиране на входните данни с обратна връзка в реално време
Създайте клавишни комбинации за напреднали потребители
Добавете възможности за редактиране и изтриване на транзакции

Разширена интеграция:

Имплементирайте функция за отмяна на наскоро добавени транзакции
Добавете групов импорт на транзакции от CSV файлове
Създайте възможности за търсене и филтриране на транзакции
Имплементирайте функционалност за експортиране на данни

Тези допълнителни функции ще ви помогнат да практикувате по-сложни концепции за уеб разработка и да създадете по-пълноценно банково приложение!

Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Не носим отговорност за недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

15 KiB Raw Blame History Unescape Escape