ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 17.03.2024
Просмотров: 46
Скачиваний: 0
ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
2.3. Проектирование графического интерфейса пользователя
Для моделирования графического интерфейса использовалась программа Figma т.к. она бесплатная, а её функционала достаточно для проектирования GUI. Figma - это графический онлайн-редактор для совместной работы. В нём можно создать прототип сайта, интерфейс приложения и обсудить правки с коллегами в реальном времени.
Был разработан прототип окна авторизации. (Рис. 2.1)
Рисунок 2.1 - Окно авторизации.
Был разработан прототип рабочего окна. (Рис. 2.2)
Рисунок 2.2 – Рабочее окно.
Был разработан прототип рабочего окна заявки. (Рис. 2.3)
Рисунок 2.3 – Рабочее окно заявки.
Был разработан прототип окна создания заявки. (Рис 2.4)
Рисунок 2.4 – Окно создания заявки.
Пользователям устанавливается отдельный модуль программы для того, чтобы они могли создать заявку со своего рабочего места. Это удобно в случаях большой нагрузки и занятого телефона ИТ отдела. Такой способ создания заявки гарантирует оповещение о проблеме сотрудников технической поддержки.
Для создания заявок пользователями со своего рабочего места был разработан прототип формы создания заявки (Рис. 2.5.)
Рисунок 2.5 – Форма создания заявки.
2.4. Проектирование и разработка модели данных
Информация, отображаемая и обрабатываемая приложением, хранится в базе данных SQL. Всего в системе предусмотрена одна база данных «Тикет_система» (рис. 2.20):
Рисунок 2.20 – Названия базы данных
База данных содержит всего две таблицы: «Заявка» и «Пользователь». Столбцы и тип хранимых данных представлены ниже (рис. 2.21) и (рис. 2.22):
Рисунок 2.21 Таблица «Заявка».
Рисунок 2.22 Таблица «Пользователь».
Назначение полей, тип данных и количество символов указаны в таблицах (табл. 2.9) и (табл. 2.10):
Таблица 2.9
Описание полей таблицы «Заявка»
| Название столбца | Назначение | Тип данных | Максимальное количество символов |
| Уникальный ключ | уникальный идентификационный номер заявки, генерируется автоматически | int | 10 |
| Ваше_ФИО | ФИО пользователя | nvarchar | 50 |
| Рабочая_почта | Почта для связи с пользователем | nvarchar | 50 |
| Контактный_телефон | Контактный телефон пользователя | nvarchar | 50 |
| Тип_заявки | Тип возникшей проблемы | nvarchar | 50 |
| Описание_заявки | Подробное описание сути заявки | nvarchar | MAX |
| Статус | Текущий статус заявки | nvarchar | 50 |
| Исполнитель | Специалист выполняющий работы по заявке. | nvarchar | 50 |
| Протокол | Заметки для внутреннего использования группами технической поддержки | nvarchar | MAX |
| Решение | Описание решения для пользователя по его запросу | nvarchar | MAX |
| Рабочая_группа | Группа занимающаяся | nvarchar | MAX |
Таблица 2.10
Описание полей таблицы «Пользователь»
| Название столбца | Назначение | Тип данных | Максимальное количество символов |
| Уникальный ключ | уникальный идентификационный номер учетной записи, генерируется автоматически | int | 10 |
| Фамилия | ФИО пользователя | nvarchar | 50 |
| Имя | Почта для связи с пользователем | nvarchar | 50 |
| Отдел | Контактный телефон пользователя | nvarchar | MAX |
| Должность | Тип возникшей проблемы | nvarchar | MAX |
| Логин | Подробное описание сути заявки | nvarchar | 20 |
| Пароль | Текущий статус заявки | nvarchar | 20 |
Типы данных и наименования столбцов в таблицах «Заявка», «Пользователь» выбраны в соответствии с требованиями к данным из пункта 1.1.7 настоящей курсовой работы.
ER-диаграммы базы данных «Тикет_система» состоит из двух таблиц (рис. 2.23):
Рисунок 2.23 – ER-диаграмма
-
РАЗРАБОТКА ПРОГРАММНОГО ПРОДУКТА
Программный продукт разрабатывался в Visual Studio, язык программирования – C# на платформе WPF. Первый шаг – разработка графического интерфейса пользователя.
3.1 Разработка графического интерфейса пользователя
Как было отмечено выше, в пункте 2.3, графический пользовательский интерфейс должен быть простым, дружественным, функциональным и интуитивно-понятным, не требовать существенного времени на освоение. Это достигается применением привычных для пользователя элементов управления и технологий, выглядящих и работающих одинаковым образом, как во многих приложениях:
-
кнопки с указанными на них командами; -
текстбоксы для ввода информации; -
выбор информации из выпадающего списка.
Начальное окно состоит из текстбоксов: «Логин», «Пароль» и «Номер заявки», а также из кнопок: «Вход в систему», «Оставить заявку», «Проверить заявку».
(рис. 3.1):
Рисунок 3.1 – Начальное окно
Заголовок описан с помощью тега TextBlock, кнопки – теги Button и выпадающий список – Combobox, логотип расположен в окне с помощью тега Image:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Окно входа" Height="450" Width="800">
При успешной регистрации заявки появится окно с номером заявки (рис. 3.2):
Рисунок 3.2 – окно с номером заявки.
При вводе не верных учетных данных появится окно с оповещением об этом (рис. 3.3.):
Рисунок 3.3 – окно с сообщением «Не верный логин или пароль».
При вводе только логина без пароля или наоборот только пароля без логина появятся соответствующие предупреждения (рис.3.4) и (рис. 3.5):
Рисунок 3.4 – окно «введите пароль», Рисунок 3.5 – окно «Введите логин»
При вводе не верного номера заявки для проверки статуса появится окно с оповещением об этом (рис. 3.6.)
Рисунок 3.6 – окно с сообщением о не верном номере заявки.
После авторизации посредством ввода логина и пароля откроется интерфейс рабочего окна, по умолчанию открывается вкладка «Все заявки» с перечнем всех активных заявок всех групп технической поддержки. Интерфейс позволяет увидеть информацию об авторизовавшемся пользователе: ФИО, Отдел, Должность. Так же выполнить поиск по номеру заявки, увидеть количество заявок вместе с их списком. Окно состоит из кнопок: «Создать заявку», «Заявки моей группы», «Все заявки», «Закрытые заявки» и «Поиск», также присутствует текстбокс для ввода номера заявки для её дальнейшего поиска (рис. 3.2):
Рисунок 3.2 – рабочее окно
Для расположения кнопок был использован тег button, а для отображения списка заявок был использован data:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="Рабочее окно" Height="450" Width="899.277" Cursor="Arrow"
Loaded = "Window_Loaded">