6. Сценарии пользователя
В рамках проектирования и разработки веб-приложения «Медицинский портал» были рассмотрены и реализованы ключевые сценарии использования системы с точки зрения конечного пользователя. Эти сценарии охватывают полный цикл взаимодействия пациента с сервисом — от первоначального ознакомления с клиниками и услугами до успешной записи на прием.
Вход на форму регистрации:
Рисунок 1 - Форма регистрации на портале
Переход на вкладку корзины:
Рисунок 2 - Страница с корзиной
Переход на вкладку записей пациента:
Рисунок 3 - Страница с отсутствием записей
Переход на вкладку календаря:
Рисунок 4 - Страница с календарем
Переход на вкладку записи на прием:
Рисунок 5 - Страница записи на прием
Главная страница с клиниками:
Рисунок 6 - Главная страница с клиниками
7. Заключение
В результате выполнения курсовой работы была разработана и успешно реализована клиентская часть веб-приложения «Медицинский портал». Разработка позволила углубить теоретические знания и приобрести практические навыки в области создания современных пользовательских интерфейсов, работы с HTML5, CSS3, JavaScript (ES6+), организации взаимодействия с REST API и проектирования интерактивных одностраничных приложений.
Достигнутые результаты:
1. Реализация полнофункционального пользовательского интерфейса: была создана клиентская часть, обеспечивающая весь необходимый функционал для взаимодействия пользователей с медицинским порталом. Интерфейс включает пять основных вкладок («Клиники», «Запись на приём», «Календарь записей», «Мои записи», «Корзина услуг»), каждая из которых предоставляет специализированный инструментарий для решения конкретных задач. Система интуитивно понятна и не требует дополнительного обучения пользователей.
2. Разработка модульной архитектуры на основе классов ES6: Основной класс MedicalPortal стал центральным управляющим компонентом приложения, инкапсулирующим состояние, бизнес-логику и методы взаимодействия с интерфейсом. Чёткое разделение ответственности между методами класса (такими как loadData(), renderClinics(), updateCalendar(), bookAppointment(), checkoutCart()) обеспечило высокую сопровождаемость кода, простоту отладки и возможность независимого развития отдельных функциональных блоков.
3. Создание отзывчивого и адаптивного дизайна: Применение современных CSS-технологий (Grid Layout, Flexbox, медиа-запросы) позволило реализовать интерфейс, который корректно отображается на устройствах с различными разрешениями экрана — от мобильных телефонов до настольных компьютеров. Визуальные компоненты (карточки клиник, календарь, элементы корзины) обеспечивают комфортное восприятие информации и удобное взаимодействие независимо от используемого устройства.
Технические особенности реализации:
1. Эффективное управление состоянием приложения: была реализована централизованная система состояния, где все данные хранятся в свойствах класса MedicalPortal. Изменение состояния через методы класса автоматически приводит к обновлению пользовательского интерфейса, что обеспечивает согласованность данных и их представления. Локальное хранение состояния корзины в localStorage через метод persistCart() гарантирует сохранность данных между сессиями без нагрузки на сервер.
2. Асинхронное взаимодействие с серверной частью: Модуль взаимодействия с API, реализованный через Fetch API, обеспечивает плавную работу приложения без перезагрузок страниц. Методы loadData(), bookAppointment(), checkoutCart() и loadMyAppointments() организуют корректный обмен данными с сервером, обработку ответов и уведомление пользователя о результатах через систему уведомлений showNotification().
3. Интерактивные компоненты с обратной связью: Реализованы сложные интерактивные элементы, такие как календарь занятости с визуальной индикацией (updateCalendar(), _renderCalendarDayDetails()), система выбора времени записи с зависимыми полями (renderTimeSlots(), updateDoctorSelect()), динамическая корзина услуг с подсчётом стоимости (updateCartDisplay()). Все компоненты обеспечивают немедленную визуальную обратную связь на действия пользователя.
4. Обработка ошибок и пользовательский опыт: Особое внимание было уделено обработке ошибок при взаимодействии с сервером и валидации пользовательского ввода. Система уведомлений информирует пользователя о результатах действий, а визуальные индикаторы состояния предотвращают ошибки при использовании. Гибкая система сообщений об ошибках помогает пользователю понять причину проблемы и предпринять корректирующие действия.
Была создана работоспособная клиентская часть системы, соответствующая всем поставленным требованиям. Разработка велась с соблюдением принципов чистого кода, модульности, адаптивного дизайна и пользовательского опыта. Проект подтвердил, что современные веб-технологии (HTML5, CSS3, JavaScript ES6+) позволяют создавать полноценные, производительные и удобные веб-приложения без использования тяжёлых фреймворков, что особенно ценно в образовательных целях для глубокого понимания фундаментальных принципов frontend-разработки. Полученный опыт будет полезен для дальнейшей профессиональной деятельности в области разработки пользовательских интерфейсов и веб-приложений.