В современном мире сложность используемой техники и технологии растет всё быстрее и быстрее. Вместе с этим растёт и цена ошибки в различных отраслях производства



страница5/8
Дата02.05.2016
Размер0.72 Mb.
1   2   3   4   5   6   7   8

6РАЗРАБОТКА ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА ОНЛАЙН СЕРВИСА


Одной из задач, стоящих передо мной в данном дипломном проекте, была разработка web – интерфейса для онлайн сервиса. Для этого использовался HTML и CSS. Для придания интерфейсу динамичности, использовался язык JavaScript в комбинации со свободно распространяющейся библиотекой jQuery, которая позволяет удобно и быстро оживлять web-страницы.

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

Итак, был разработан интерфейс, который реализует следующий функционал:


  • регистрация на сервисе;

  • вход под своим профилем на сервис;

  • управление библиотекой математических моделей;

  • управление библиотекой критериев;

  • выбор критериев для выходных характеристик;

  • настраивать параметры поиска и изменять стратегию поиска;

Далее будут подробно рассмотрены эти пункты.

2.1 Регистрация пользователя


Для того чтобы пользователь смог воспользоваться инструментами оптимизации, ему необходимо пройти регистрацию, а затем входить под своим логином, который является e-mail адресом, и паролем. Для этого был разработан удобный и нераздражающий интерфейс для регистрации на сайте. В правом верхнем углу web-сайта есть скрывающаяся форма для аутентификации и кнопка для регистрации, она показана на рисунке 4.

c:\users\mav\desktop\скриншоты\signin.png

Рисунок 3. Форма входа на сайт.

Как можно догадаться из рисунка 3, на сервисе реализована возможность восстановления забытого пароля по email, указанного при регистрации.

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

Ещё на рисунке 4 видно, что используется CAPTCHA. CAPTCHA — (англ. Completely Automatic Public Turing Test to Tell Computers and Humans Apart) — это автоматический тест Тьюринга для того чтобы различить людей от компьютерных программ. Другими словами, это такая задача, которую не может решить компьютер, но при этом легко решаемая человеком.

Применять CAPTCHA необходимо для того, чтобы предотвратить множество автоматических регистраций и отправление сообщений программами. Т. е. CAPTCHA защищает web приложения от спама, и захвата аккаунтов. Обычно CAPTCHA представляет собой хитрым способом зашумленное случайное число или слово, которую пользователю необходимо распознать и ввести прочитанный результат. Для реализации CAPTCHA использовалось бесплатное готовое решение «KCAPTHCA», написанное на PHP, использующее библиотеку GD.



c:\users\mav\desktop\скриншоты\регистрация пользователей - cadoptimizer.png

Рисунок 4. Форма регистрации пользователя.


2.2 Общий интерфейс онлайн сервиса.


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

Итак, после входа под своим аккаунтом, пользователю будет доступен полный функционал онлайн сервиса. На рисунке 5 представлен общий интерфейс онлайн сервиса.



c:\users\mav\desktop\скриншоты\core_interface.png

Рисунок 5. Общий интерфейс пользователя.

Давайте подробнее рассмотрим пронумерованные элементы интерфейса на рисунке 5.

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

2 – левая колонка. В этом блоке хранятся дополнительные элементы интерфейса, которые должны быть доступны на всех страницах сервиса.

3 – главный контейнер. В этой части интерфейса все и происходит, это рабочая область в которой выводится содержание разных страниц сервиса с разным функционалом, будь то ввод математической модели или регистрация на сайте.

4 – выпадающее меню.

5 – информация о текущей учетной записи и ссылка на переход на профиль пользователя.

6 – кнопка для выхода из текущей учетной записи.

7 – дополнительное общее левое меню.

8 – место для дополнительного левого меню, здесь может располагаться меню, необходимое для дополнительных элементов интерфейса, в зависимости от страницы, на которой мы находимся.

9 – информация о текущей выбранной математической модели.

10 – кнопка для перехода на страницу настройки параметров поиска. Эта кнопка появляется только в том случае, если выбрана математическая модель и не менее одного критерия для выходных параметров.

2.3 Страница профиля пользователя.


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

c:\users\mav\desktop\скриншоты\мой профиль - cadoptimizer.png

Рисунок 6. Страница профиля пользователя.


2.4 Создание математической модели


На рисунке 7 представлен интерфейс ввода математической модели.

c:\users\mav\desktop\скриншоты\мои модели - cadoptimizer.png

Рисунок 7. Создание математической модели.

Как видно из рисунка 7, интерфейс позволяет добавлять и удалять динамически поля для ввода входных и выходных параметров, нажатием на соответствующие кнопки плюс/минус. Также можно сразу ввести ограничения для входных и выходных параметров, уже при создании математической модели. Справа есть информационный блоки, которые помогают пользователю правильно ввести данные. Название математической модели и её описание можно указать любое, это нужно лишь для удобства пользователя. После отправки данных, программа проверит данные, и укажет на ошибки пользователя в нужных местах, это показано на рисунке 8.

c:\users\mav\desktop\скриншоты\мои модели - cadoptimizer2.png

Рисунок 8. Обработка ошибок при создании математической модели.

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

2.5 Управление библиотекой математических моделей.


Интерфейс онлайн сервиса позволяет хранить ранее созданные математические модели, редактировать и удалять их. Для выбора математической модели, необходимо просто нажать соответствующую кнопку в личной библиотеке математических моделей. Интерфейс вывода математических моделей представлен на рисунке 9. Созданные математические модели доступны только тому одному пользователю, который их создал. Но в дальнейшем возможна реализация создания публичных математических моделей. Также в базе есть примеры математических моделей, которые доступны всем пользователям.

c:\users\mav\desktop\скриншоты\мои модели - cadoptimizer1.png

Рисунок 9. Выбор математической модели.

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

2.6 Интерфейс выбора критериев.


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

c:\users\mav\desktop\скриншоты\выбор критериев - cadoptimizer21.png

Рисунок 10. Настройка критериев для выходных параметров.

Как видно из рисунка 10, одному выходному параметру можно задавать как несколько критериев, так и ни одного. Давайте подробнее разберем рисунок 10:

1 – имя выходного параметра (берется автоматически из математической модели)

2 – кнопка, которую нужно нажать, если для этого выходного параметра не нужно задавать какие либо критерии. Это кнопка превратится в кнопку 3 после нажатия.

3 – кнопка для того чтобы задать критерии для этого выходного параметра.

4 – так выглядит блок с выходным параметром, если для него не нужно задавать критерии.

5 – кнопка для добавления дополнительных критериев для выходного параметра.

6 – кнопка для удаления дополнительных критериев для выходного параметра.

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


2.7 Настройка параметров случайного поиска.


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

Макет интерфейса для настройки параметров поиска представлен на рисунке 11.



c:\users\mav\desktop\скриншоты\random_search.png

Рисунок 11. Настройка параметров случайного поиска.


2.8 Вывод результатов случайного поиска.


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

c:\users\mav\desktop\скриншоты\random_search_result.png

Рисунок 12. Таблица результатов случайного поиска.

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

2.9 Параметры прямого поиска.


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

На этой странице пользователь должен выбрать поиск и иметь возможность настроить его параметры. А также вернуться на эту страницу, если результат поиска не будет удовлетворительным. В связи с этим есть необходимость в сохранении промежуточных данных.

Прототип интерфейса представлен на рисунке 13.

c:\users\mav\desktop\скриншоты\straight_search.png

Рисунок 13. Прототип интерфейса для выбора и настройки прямого поиска.


2.10 Результаты прямого поиска.


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


1   2   3   4   5   6   7   8


База данных защищена авторским правом ©ekollog.ru 2017
обратиться к администрации

войти | регистрация
    Главная страница


загрузить материал