В пункте меню «Статусы» списком представлены статусы присваиваемые заказам во время выполнения бизнес процессов.

Пункт меню «Клиенты» содержит список клиентов сервисного центра, присутствует возможность просмотреть список заказов каждого клиента.

Справочник популярных неисправностей техники находится в пункте меню «Неисправности».

Для удобства разработки меню сайта было принято решение использовать сразу два шаблона взаимодействия клиента и сервера MVVM и MVC. Шаблон MVVM используется для заполнения компонента данными, а шаблон MVC для управления поведением компонентов меню.

При нажатии на нижнюю кнопку меню сайта сворачивается в левую сторону. Механизм сворачивания осуществляется путем смены CSS стиля в Java коде.

Для создания данного компонента сайта необходимо создать файл с расширением.zul, в нем при помощи специального языка описать, как должен выглядеть компонент. Также для форматирования отображения компонента на странице необходимо прописать CSS стили компонента.

В листинге 4.1 представлен исходный код файла sidebar.zul.

<div id="sidebar" sclass="sidebar" apply="uiController.SidebarComposer"> //Устанавливаем контроллер для всех элементов находящихся внутри тега div <navbar id="navbar" sclass="nav-list" orient="vertical"> // Объявляем компонент navbar <navitem label="Заказы" iconSclass="z-icon-home" selected="true" //Пункт меню onClick="@command('showRequests')"// Команда которую выполнит ZK на событие клик мышью <nav label="Справочники" iconSclass="z-icon-list"> // Раздел <navitem label="Места" iconSclass="z-icon-angle-double-right" //Подпункты onClick="@command('showPlaces')"/> <navitem label="Статусы" iconSclass="z-icon-angle-double-right" onClick="@command('showStatus')" /> <navitem label="Клиенты" iconSclass="z-icon-angle-double-right" onClick="@command('showClients')" /> <navitem label="Неисправности" iconSclass="z-icon-angle-double-right" onClick="@command('showDefects')" /> </nav> </navbar> <div sclass="sidebar-collapse"> // <a id="toggler" iconSclass="z-icon-angle-double-left"/> </div> </div>

Листинг 4.1 - Исходный код файла sidebar.zul

Для создания меню у фреймворка ZK имеется специальный тег «navbar», при помощи данного тега можно легко и быстро создать меню для сайта. У данного компонента можно настроить способ отображения указав в атрибуте «orien» значение «vertical» или «horizontal». У каждого компонента предоставляемого фреймворком ZK можно указать CSS стиль отображения. Тег «navitem» объявляет пункт меню, внутри него необходимо указать название пункта которое будет отображаться пользователю в атрибуте «label». Есть два основных способа задания значения для строковых констант на сайте. Первый способ заключаются в вынесении всех значенией в специальный файл с расширением.properties, в данном файле объявляются константы и их значение. Значение атрибута «label» устанавливают следующим образом: «${labels.*}», где вместо звездочки указывается константа, значение которой необходимо для отображения пользователь. Данный подход используется для создания сайтов с возможностью смен языка интерфейса, также данный подход позволяет использовать одну константу в разных частях интерфейса. Второй способ заключается в указании значения атрибута «label» напрямую, прописывая в кавычках, что вывести пользователю. Так как сайт не предусматривает смену языка интерфейса пользователя, то при разработке используется второй способ. Для пункта меню заказы указано значение атрибута selected="true", так как это главная страница сайта, и при открытии страницы сайта пользователю должна отображаться именно эта страница. Для обработки событий на форме необходим механизм, связывающий команды пользователей и обработки этих событий на сервере.

Команда - это действие для манипулирования свойством ViewModel. Каждая команда обозначает метод, который View может выполнять в ViewModel. Эти действия также позволяют пользователям взаимодействовать с View. Например, ViewModel предоставляет 2 команды: «сохранить» и «удалить». Это означает, что пользователи могут выполнять только эти 2 действия в представлении с помощью ViewModel.

Поскольку ViewModel действует как контроллер, существует возможность связать событие компонента пользовательского интерфейса с командой, указав имя команды, которое аналогично зарегистрировать в слушателе событий. Несколько событий могут связываться с одной и той же командой. Когда пользователь взаимодействует с компонентом (например, нажатием кнопки), компонент запускает событие, механизм привязки данных запускает выполнение команды. Команда реализовывается как метод ViewModel. Поскольку ViewModel является обычным Java объектом, чтобы механизм привязки данных идентифицировал, какой метод представляет собой команду, необходимо аннотировать метод с помощью ZK при помощи аннотации @Command. Данные методы управляют свойством ViewModel, например удалением элемента.

Команда - это действие для манипулирования свойством ViewModel. Каждая команда обеспечивает действие, которое вид может выполнять в ViewModel. Необязательный элемент аннотации - это имя строки для имени команды, и это имя ссылается на ZUL с привязкой к событиям. Если он не указан, имя метода устанавливается как имя команды по умолчанию.

Команда ViewModel - это как обработчик событий, к каждому событию привязана команда на сервере. Связывание между событиями и командой - называется «привязкой Event-Command». Прежде чем установить это обязательство, мы должны объявить команду с ее именем в ViewModel. Имена команд в ViewModel не должны дублироваться или это приведет к исключению во время выполнения.

Пункт меню заказы содержит информацию обо всех заказах на ремонт в системе. Пользователь на данной странице может просматривать заказы, добавлять и изменять их. Для отображения данных списочным способом фреймворк ZK предоставляет готовый компонент «listbox», поддерживающий постраничное представление данных пользователю, разделение данных на столбцы и строки. Перемещение по списку можно осуществлять при помощи управляющих клавиш.

Рисунок 4.3 - Интерфейс пункта меню заказы

Для создания данного компонента нужно по аналогии с компонентом меню требуется создать файл с расширением.zul и прописать необходимые теги и их атрибуты.

Связывание данных на сервере и браузере клиента подобно буферу. Он автоматически создает объект посредник. Перед сохранением в ViewModel все входные данные сохраняются на объект посредник. Таким образом, мы можем хранить данные от сохранения в ViewModel до подтверждения пользователем. Предполагая, что пользователь заполняет форму в веб-приложении, пользовательские данные ввода непосредственно сохраняются в свойствах ViewModel, целевого объекта. Затем пользователь может отменить действие заполнения перед отправкой формы, поэтому данные, хранящиеся в ViewModel, устарели. Это может вызвать проблемы, если мы обработаем устаревшие данные дальше, поэтому входные данные сначала хранятся в объекте посреднике, прежде чем перейти к реальному целевому объекту после подтверждения пользователя. Связывание форм обеспечивает хранение в объекте посреднике информации, не подтвержденной пользователем. Связывание формы позволяет сохранить целевой объект в ViewModel без изменений до выполнения команды для подтверждения. Перед сохранением свойств ViewModel (целевого объекта) с помощью команды мы можем сохранить ввод в объекте посреднике. Когда команда выполняется (например, кнопка нажата), входные данные действительно сохраняются в свойствах ViewModel. Фреймворк позволяет легко достичь данного эффекта, просто написав выражение ZK bind, поскольку оно снижает нагрузку разработчика на очистку неправильных данных вручную или реализацию самого буфера.

Ниже представлен рисунок, на котором изображен поток данных между ZUL, объектом посредником и целевым объектом:

Рисунок 4.4 - Поток данных между ZUL, объектом посредником и целевым объектом

В листинге 4.2 представлен пример связывания данных в компоненте «listbox» для отображения списка заказов пользователю.

<listbox model="@bind(vm.placeListModel)" selectedItem="@bind(vm.selectedPlace)" style="margin-top:10px" mold="paging" pageSize="10" onDoubleClick="@command('viewPlace')"> <listhead> <listheader width="10%" label="№"/> <listheader width="80%" label="Адрес"/> </listhead> <template name="model"> <listitem> <listcell label="@bind(each.id)"></listcell> <listcell label="@bind(each.address)"></listcell> </listitem> </template> </listbox>

Листинг 4.2 - Листинг файла place-list.zul

В первой строке листинга 4.2 объявляется компонент listbox, в атрибутах указывается из какого объекта в ViewModel необходимо брать данные для заполнения списка и в какой объект, находящийся во ViewModel необходимо устанавливать выбранный пользователем объект из списка. Далее тегами listhead и listheader устанавливается заголовки столбцов списка. В теге listcell устанавливаются, какие конкретные поля объекта должны отображаться пользователю.

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

При нажатии на кнопку добавления данных на странице заказы всплывает форма создания заказа, изображенная на рисунке 4.3.



Рисунок 4.3 - Форма создания нового заказа

Для создания заказа необходимо выбрать клиента или создать нового, добавить описание заказа, добавить неисправности. Только после этого можно создать новый заказ. При нажатии на кнопку выбрать клиента всплывает новое окно выбора клиента, на котором можно создать нового клиента. После того как нажата кнопка создать все данные заносятся в базу данных.

Подтверждение ввода пользователем является незаменимой функцией веб-приложения. Валидатор ZK помогает выполнить эту задачу. Валидатор является элементом многократного использования, который выполняет проверку и сохраняет сообщения проверки в списке сообщений проверки. Когда он применяется, он вызывается перед сохранением данных в целевой привязке (ViewModel или промежуточный объект). Если проверка не выполнена, свойства ViewModel (или промежуточного объекта) не будут изменены.

Databinding обеспечивает стандартный механизм хранения и отображения сообщений проверки. После выполнения проверки валидатор может сохранить сообщение проверки в списке сообщений подтверждения.



5. ТЕСТИРОВАНИЕ

5.1 Обоснование методики тестирования

Тестирование программного обеспечения - это расследование, проводимое с целью предоставления заинтересованным сторонам информации о качестве тестируемого продукта или услуги. Тестирование программного обеспечения также может обеспечить объективное независимое представление программного обеспечения, позволяющее бизнесу оценить и понять риски реализации программного обеспечения. Методы тестирования включают в себя процесс выполнения программы или приложения с целью поиска ошибок программного обеспечения (ошибок или других дефектов) и проверки того, что программный продукт подходит для использования.

Поскольку количество возможных тестов для даже простых программных компонентов практически бесконечно, все тестирование программного обеспечения использует некоторую стратегию для выбора тестов, которые возможны для доступного времени и ресурсов. В результате тестирование программного обеспечения обычно (но не исключительно) пытается выполнить программу или приложение с целью поиска ошибок программного обеспечения (ошибок или других дефектов). Работа по тестированию - это итеративный процесс, когда фиксируется одна ошибка, она может освещать другие, более глубокие ошибки или даже создавать новые. Тестирование программного обеспечения может обеспечить объективную, независимую информацию о качестве программного обеспечения и риск его отказа пользователям или спонсорам.

Тестирование программного обеспечения может проводиться, как только исполняемое программное обеспечение (даже если оно частично завершено) существует. Общий подход к разработке программного обеспечения часто определяет, когда и как проводится тестирование. Например, в поэтапном процессе большинство тестов происходит после того, как требования к системе были определены, а затем реализованы в тестируемых программах. Напротив, под Agile подход, требования, программирование и тестирование часто выполняются одновременно.

Под методиками подразумевается создание плана, как реализовать идею, а техника - метод или способ выполнения задачи. Таким образом, методики тестирования создают набор входов для данного программного обеспечения, которое обеспечит набор ожидаемых результатов. Идея состоит в том, чтобы система работала достаточно хорошо, и она может быть выпущена с минимальными проблемами для конечного пользователя.

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

При тестировании данного программного продукта применяются методики системного тестирования. Тестирование системы - это метод тестирования черного ящика, выполненный для оценки всей системы соответствия системы заданным требованиям. При тестировании системы функциональность системы тестируется с точки зрения сквозной перспективы. Системное тестирование обычно выполняется командой, которая не зависит от команды разработчиков, чтобы измерить качество системы непредвзято. Он включает как функциональное, так и не функциональное тестирование.



5.2 Результаты тестирования

Тестирование разрабатываемого приложения проводится путем тестирования функций сайта, таких как добавление клиента, добавление заказа, просмотр заказа, изменение заказа.

При тестировании были проверены все функциональные элементы сайта. В результате тестирования все функции сайта выполняются согласно предъявленным требованиям.

В качестве требований к функциональному тестированию взяты данные диаграммы вариантов использования (см. приложение 4). Оценка соответствия функциональности программы к заявленным требованиям представлена в таблице 5.1.

Таблица 5.1 - Параметры оценки соответствия функциональности программы

Функция программы	Реализация	Вывод сообщения при ошибке
Регистрация/ авторизация	Реализовано при входе пользователя на сайт.	В случае ввода ошибочных данных выводится сообщение «Неверный ввод логина и/или пароля»
Просмотр списков данных	Выбор в пункте меню соответствующего списка данных	В случае отсутствия записей в списке выводится сообщение «Список пуст»
Не все поля заполнены в формах создания	Создание нового пользователя, заказа, клиента или любой другой записи	В случае заполнения не всех обязательных полей выводится ошибка над каждым полем.
При не возможности подключения к БД	Отправкой запроса к базе данных	В случае невозможности подключения к БД ошибка «Невозможно подключиться к БД»



ЗАКЛЮЧЕНИЕ

На данный момент в системе разработана база данных отражающая основную логику хранения данных. Организована связь между приложением и БД. Разработаны и протестированы основные запросы на получение данных. Также осуществляется взаимодействие по протоколу HTTP между клиентом сервером. Ведется разработка бизнес логики и клиентской части приложения.

Разработана функциональность, которая позволяет использовать данную информационную систему реальным пользователям.

В дальнейшем функциональность данной системы будет увеличена, за счет появления новых требований заказчика. К данным требованиям относятся:

- Автоматический расчет стоимости заказа.

- Склад запасных частей.

- Интеграция разработанной системы с основным сайтом сервисного центра.

- Увеличение ролевой модели взаимодействия с сайтом.

- Возможность печатать штрих коды для заказов.

- Возможность подключения сканера штрих кодов.

- Прикрепление фотографий, сделанных с помощью веб камеры, к заказу.

- Панель администрирования сайта.

Все вышеперечисленные требования будут реализованы в последующих версиях программы.

На данный момент разработка первой версии программы закончена.



СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ

1. Ремонт онлайн [Электронный ресурс]: офиц. сайт. - Режим доступа: https://remonline.ru/

2. ServiceCentr [Электронный ресурс]: офиц. сайт. - Режим доступа: http://www.ybsoft.ru/ServiceCenter.aspx

3. Gincore [Электронный ресурс]: офиц. сайт. - Режим доступа: https://gincore.net/

4. 1c сервисный центр 2.0 [Электронный ресурс]: офиц. сайт. - Режим доступа: http://solutions.1c.ru/catalog/service-center/features

5. Машнин Т. С. Технология Web-сервисов платформы Java. -- БХВ-Петербург, 2012. -- С. 115. -- 560 с.

6. Официальная документация по Фреймворку ZK [Электронный ресурс]: инф.-справ. Система. - Режим доступа: http://books.zkoss.org/zk-mvvm-book/8.0/

7. Joshua B. Effective Java /B. Joshua. - Москва: КНОРУС, 2015. - 369 c.

8. Spring Framework [Электронный ресурс]: офиц. сайт. - Режим доступа: http://spring-projects.ru/projects/spring-framework/



ПРИЛОЖЕНИЕ

Приложение 1

Структурная схема базы данных



Приложение 2

Листинг Класса Status

Entity

@Table(name = "CLIENT")

public class Client implements Serializable {

@Id

@GeneratedValue(strategy = GenerationType.IDENTITY)

private Integer id;

@Column(name = "NAME", nullable = false)

private String name;

//TODO: Опечатка

@Column(name = "MIDLE_NAME", nullable = false)

private String midleName;

@Column(name = "SURNAME", nullable = false)

private String surname;

@Column(name = "ADDRESS", nullable = false)

private String address;

@Column(name = "PHONE", unique = true, nullable = false)

private String phone;

@OneToMany(fetch = FetchType.EAGER, mappedBy = "client")

private Set<Request> requests = new HashSet<Request>();

public Integer getId() {

return id;

}

public void setId(Integer id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getMidleName() {

return midleName;

}

public void setMidleName(String midleName) {

this.midleName = midleName;

}

public String getSurname() {

return surname;

}

public void setSurname(String surname) {

this.surname = surname;

}

public String getAddress() {

return address;

}

public void setAddress(String address) {

this.address = address;

}

public String getPhone() {

return phone;

}

public void setPhone(String phone) {

this.phone = phone;

}

public Set<Request> getRequests() {

return requests;

}

public void setRequests(Set<Request> requests) {

this.requests = requests;

}

}

Листинг класса StatusDao

@Repository

public class ClientDao {

@PersistenceContext

private EntityManager entityManager;

@Transactional

public List<Client> getAll() {

Query query = entityManager.createQuery("select c from Client as c");

List<Client> result = query.getResultList();

return result;

}

@Transactional( propagation = Propagation.REQUIRES_NEW)

public Client insertClient(Client client) {

entityManager.persist(client);

entityManager.merge(client);

return client;

}

@Transactional(readOnly = true)

public Client findClientByName(String clientName) throws UsernameNotFoundException {

Client client;

try {

Query query = entityManager.createQuery("select c from Client as c where c.name =:clientName")

.setParameter("clientName", clientName);

client = (Client) query.getSingleResult();

if (client != null) {

Hibernate.initialize(client);

}

} catch (Exception e) {

return null;

}

return client;

}

}

Листинг интерфейса ClientService

public interface ClientService {

List<Client> getAllClient();

Client saveClient(Client client);

Client findByClientName(String name);

}

Листинг класса ClientServiceImpl

@Service("clientService")

public class ClientServiceImpl implements ClientService {

@Autowired

ClientDao clientDao;

@Override

public List<Client> getAllClient() {

return clientDao.getAll();

}

@Override

public Client saveClient(Client client) {

return findByClientName(client.getName()) == null ? clientDao.insertClient(client): null;

}

@Override

public Client findByClientName(String name) {

return clientDao.findClientByName(name);

}

}

Листинг класса ClientListVM

@VariableResolver(DelegatingVariableResolver.class)

public class ClientListVM {

private Window window;

@WireVariable

ClientService clientService;

private ListModel<Client> clientListModel;

private Client selectedClient;

private String keyWord;

public static final String CREATE_CLIENT = "sc/create-client.zul";

public static final String CLIENT = "CLIENT";

@Init(superclass = true)

public void init(@ContextParam(ContextType.COMPONENT) Window window) {

this.window = window;

refresh();

}

@Command

public void addClient() {

Window wind = (Window) Executions.createComponents(CREATE_CLIENT, window, null);

wind.doModal();

}

@GlobalCommand

@NotifyChange("clientListModel")

public void refresh() {

clientListModel = new ListModelList<Client>(clientService.getAllClient());

((ListModelList<Client>) clientListModel).setMultiple(true);

}

@Command

public void close() {

BindUtils.postGlobalCommand(null, null, SELECTED_CLIENT,

Collections.<String, Object>singletonMap("value", selectedClient));

window.onClose();

}

public ListModel<Client> getClientListModel() {

return clientListModel;

}

public void setClientListModel(ListModel<Client> clientListModel) {

this.clientListModel = clientListModel;

}

public String getKeyWord() {

return keyWord;

}

public void setKeyWord(String keyWord) {

this.keyWord = keyWord;

}

public Client getSelectedClient() {

return selectedClient;

}

public void setSelectedClient(Client selectedClient) {

this.selectedClient = selectedClient;

}

}

Листинг файла client-list.zul

<window

onClose="@command('close')"

apply="org.zkoss.bind.BindComposer"

viewModel="@id('vm') @init('ServiceCentre.ui.ClientListVM')">

<hbox width="100%" align="center">

Адрес:

<textbox value="@bind(vm.keyWord)"/>

<button iconSclass="z-icon-search" onClick="@command('search')"/>

<button iconSclass="z-icon-plus" onClick="@command('addClient') @global-command('refresh')"/>

<button iconSclass="z-icon-refresh" onClick="@global-command('refresh')"/>

</hbox>

<listbox height="100%" width="100%" model="@bind(vm.clientListModel)" emptyMessage="Клиентов не найдено"

selectedItem="@bind(vm.selectedClient)"

mold="paging" pageSize="10">

<listhead>

<listheader width="15%" label="№"/>

<listheader width="15%" label="Имя"/>

<listheader width="15%" label="Фамилия"/>

<listheader width="15%" label="Отчество"/>

<listheader width="15%" label="Адрес"/>

<listheader width="15%" label="Телефон"/>

</listhead>

<template name="model">

<listitem>

<listcell label="@bind(each.id)"></listcell>

<listcell label="@bind(each.name)"></listcell>

<listcell label="@bind(each.midleName)"></listcell>

<listcell label="@bind(each.surname)"></listcell>

<listcell label="@bind(each.address)"></listcell>

<listcell label="@bind(each.phone)"></listcell>

</listitem>

</template>

</listbox>

<button label="Сохранить" iconSclass="z-icon-save" onClick="@command('close')" visible=" not @load('isMenuMod')"/>

</window>



Приложение 3

Диаграмма классов для функции сайта просмотр списка клиентов



Приложение 4

Диаграмма вариантов использования

Размещено на Allbest.ru