15 KiB

Raw Blame History Unescape Escape

Реализация диалога "Добавить транзакцию"

Обзор

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

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

Цели обучения

Выполнив это задание, вы:

Создадите удобный интерфейс диалога для ввода данных
Реализуете доступный дизайн формы с поддержкой клавиатуры и экранных читалок
Интегрируете новые функции в вашу существующую систему управления состоянием
Практикуете взаимодействие с API и обработку ошибок
Примените современные веб-разработки к реальной функции

Инструкции

Шаг 1: Кнопка "Добавить транзакцию"

Создайте кнопку "Добавить транзакцию" на странице вашей панели управления, чтобы пользователи могли легко ее найти и использовать.

Требования:

Разместите кнопку в логичном месте на панели управления
Используйте понятный текст кнопки, ориентированный на действие
Стилизуйте кнопку в соответствии с вашим текущим дизайном интерфейса
Убедитесь, что кнопка доступна для использования с клавиатуры

Шаг 2: Реализация диалога

Выберите один из двух подходов для реализации диалога:

Вариант A: Отдельная страница

Создайте новый HTML-шаблон для формы транзакции
Добавьте новый маршрут в вашу систему маршрутизации
Реализуйте навигацию к странице формы и обратно

Вариант B: Модальный диалог (рекомендуется)

Используйте JavaScript для отображения/скрытия диалога без перехода с панели управления
Реализуйте с использованием свойства hidden или CSS-классов
Создайте плавный пользовательский опыт с правильным управлением фокусом

Шаг 3: Реализация доступности

Убедитесь, что ваш диалог соответствует стандартам доступности для модальных диалогов:

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

Поддерживайте закрытие диалога с помощью клавиши Escape
Удерживайте фокус внутри диалога, пока он открыт
Возвращайте фокус на кнопку вызова при закрытии

Поддержка экранных читалок:

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

Шаг 4: Создание формы

Разработайте HTML-форму для сбора данных о транзакции:

Обязательные поля:

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

Особенности формы:

Проверяйте ввод пользователя перед отправкой
Предоставляйте четкие сообщения об ошибках для недопустимых данных
Добавьте полезный текст-заполнитель и метки
Стилизуйте форму в соответствии с вашим текущим дизайном

Шаг 5: Интеграция с API

Подключите вашу форму к серверному API:

Шаги реализации:

Изучите спецификации API сервера для получения информации о правильном формате данных и конечной точке
Создайте JSON-данные из ввода формы
Отправьте данные в API с использованием соответствующей обработки ошибок
Отобразите сообщения об успехе/неудаче пользователю
Обработайте сетевые ошибки корректно

Шаг 6: Интеграция управления состоянием

Обновите вашу панель управления с новой транзакцией:

Требования к интеграции:

Обновите данные аккаунта после успешного добавления транзакции
Обновите отображение панели управления без необходимости перезагрузки страницы
Убедитесь, что новая транзакция появляется немедленно
Сохраните правильную консистентность состояния в процессе

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

Детали конечной точки API: Обратитесь к документации API сервера для получения информации о:

Требуемом формате JSON для данных транзакции
HTTP-методе и URL конечной точки
Ожидаемом формате ответа
Обработке ошибок ответа

Ожидаемый результат: После выполнения этого задания ваше банковское приложение должно иметь полностью функциональную функцию "Добавить транзакцию", которая выглядит и работает профессионально:

Тестирование реализации

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

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

Тестирование доступности:

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

Оценочная шкала

Критерий	Превосходно	Удовлетворительно	Требует улучшения
Функциональность	Функция добавления транзакции работает безупречно, с отличным пользовательским опытом и соблюдением всех лучших практик из уроков	Функция добавления транзакции работает корректно, но может не соблюдать некоторые лучшие практики или имеет незначительные проблемы с удобством использования	Функция добавления транзакции работает частично или имеет значительные проблемы с удобством использования
Качество кода	Код хорошо организован, следует установленным шаблонам, включает правильную обработку ошибок и безупречно интегрируется с существующим управлением состоянием	Код работает, но может иметь некоторые проблемы с организацией или несоответствие шаблонам существующего кода	Код имеет значительные структурные проблемы или плохо интегрируется с существующими шаблонами
Доступность	Полная поддержка навигации с клавиатуры, совместимость с экранными читалками, соблюдение рекомендаций WCAG и отличное управление фокусом	Реализованы базовые функции доступности, но могут отсутствовать некоторые функции навигации с клавиатуры или экранных читалок	Ограниченные или отсутствующие меры по обеспечению доступности
Пользовательский опыт	Интуитивно понятный, продуманный интерфейс с четкой обратной связью, плавными взаимодействиями и профессиональным внешним видом	Хороший пользовательский опыт с незначительными областями для улучшения обратной связи или визуального дизайна	Плохой пользовательский опыт с запутанным интерфейсом или отсутствием обратной связи

Дополнительные задачи (опционально)

После выполнения основных требований, рассмотрите возможность реализации следующих улучшений:

Расширенные функции:

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

Продвинутая интеграция:

Реализуйте функцию отмены для недавно добавленных транзакций
Добавьте массовый импорт транзакций из файлов CSV
Создайте возможность поиска и фильтрации транзакций
Реализуйте функцию экспорта данных

Эти дополнительные функции помогут вам освоить более сложные концепции веб-разработки и создать более полное банковское приложение!

Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Хотя мы стремимся к точности, пожалуйста, учитывайте, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.

15 KiB Raw Blame History Unescape Escape