14 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. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.

14 KiB Raw Blame History Unescape Escape