1. РАСЧЕТНАЯ РАБОТА
По дисциплине «моделирование и анализ
программного обеспечения»
на тему: «Проектирование и разработка
программного продукта»
Выполнил:
студент гр. ПОС-10а
Логинов Давид

2. • В ходе выполнения лабораторных работ была разработана
модель Web-службы для управления манипулятором.
• Класс ПО: Web-служба.
• Тема: Платный Web-аттракцион управления физической
роботизированной рукой манипулятором для накопления
научной базы данных сценариев управления дронами.
• Назначение: Коллективный аттракцион Drone Driver,
оплачиваемый
волонтерами,
является
симулятором
профессии будущего водителя дронов и предназначен для
проведения научного компьютерного эксперимента по
разработке оптимальных сценариев управления.
2

3. ФУНКЦИИ:
• Сервер является хранилищем и генератором многостраничных плакатов электронного меню блюд. Служба с Web-интерфейсом
регистрирует владельца меню, реализует ввод полей меню для хранения в базе данных, редактирует художественный шаблон
титульного листа плаката меню, генерирует многостраничный анимированный SVG-плакат меню. Сервер выдает владельцу меню
общедоступную URL-ссылку на SVG-плакат. Для проигрывания SVG-плаката на фоторамке существует функция конвертирования плаката в
серию растровых изображений формата JPG заданного пользователем разрешения. Владелец меню собственными техническими
средствами реализует показ анимированного плаката в витрине заведения. Посетитель заведения, без подключения к сети, считывает
серию страниц меню блюд фотокамерой на мобильный телефон, КПК или планшет. Мобильное приложение клиента распознает код
меню, сохраняет меню в базу данных и реализует интерактивный интерфейс формирования заказа по базе данных блюд. Пользователь
проговаривает заказ кассиру или передает на кассу электронный заказ по безcпроводной сети WiFi или Bluetooth. Многостраничный
SVG-документ содержит художественно оформленный титульный лист меню с реквизитами кафе и технической рекомендацией по
считыванию мобильным клиентом кодов меню, содержит страницы зашифрованного маркерами меню и команды SMIL сценария
анимации слайдшоу. На страницах с кодами меню нанесен номер текущей страницы, общее количество страниц, время показа текущей
страницы в секундах. Поля электронного меню, по сравнению с печатным меню, существенно расширяют информационное поле за счёт
перекрестных ссылок, возможности группировки по весу или цене блюда. Поля меню содержат следующие поля: артикль блюда,
наименование блюда, к какой общей категории относится {закуски, гарнир, напитки, супы, ...}, в какую группу включено управляющим
кафе, единицы измерения {штуки, литры, миллилитры, граммы}, общее количество или вес, калорийность, количество ингредиентов,
список ингредиентов, вес каждого ингредиента, цена за порцию, в какой валюте указана цена, минимальное время приготовление для
фирменных блюд от шеф-повара, период времени суток доступность для заказа, рекомендованные блюда, сочетающиеся с данным
блюдом, словесное описание истории национальной или фирменной кухни, рекомендации техники поедания. Для сжатия данных меню
блюд составляется онтологический словарь ключевых слов кулинарии, здорового питания и торговли пищей. Словарь используется для
расшифровки меню блюд мобильным клиентом. Электронное меню блюд содержит только коды ключевых слов, а не текстовое
описание.
3

4. ТЕСТИРОВАНИЕ ИНТЕРФЕЙСА
4

5. ГЛАВНАЯ СТРАНИЦА
На главной странице изображено 2 группы кнопок и полей «Вход» и «Регистрация».
Если у пользователя уже есть логин и пароль, то он вводит в соответствующие поля и
нажимает кнопку «Вход».
Если пользователь еще ни разу не пользовался сайтом, то он заполняет поля
регистрации и нажимает на кнопку «Далее», для того чтобы продолжить
регистрацию.
5

6. СТРАНИЦА РЕГИСТРАЦИИ
На странице «Регистрации» пользователю предложено заполнить поля: логин, пароль и
действующий e-mail для восстановления пароля.
Пароль необходимо ввести два раза – непосредственно в поле ввода пароля и повтор, дабы
убедиться в правильности ввода пароля.
После нажатия на кнопку «Вход» в форме регистрации пользователь авторизуется на сайте.
6

7. ЛИЧНЫЙ КАБИНЕТ
На следующем слайде изображен личный кабинет.
На странице «Личный кабинет» пользователю предложено две кнопки
«Пополнить» и «В лобби».
На странице также изображены поля количества баллов и номер аккаунта.
7

8. 8

9. РЕЗУЛЬТАТЫ КЛИКОВ ПО
ПЛИТКАМ
9

10. ФОРМА ПОПОЛНЕНИЯ
Для того чтобы пополнить счет нужно:
• Выбрать один из пунктов (VISA, MasterCard или WebMoney);
• Написать номер лицевого счета;
• Написать номер абонента, который отображается вверху данной формы;
• Далее требуется ввести сумму, на которую вы хотите пополнить;
• Подтвердить кнопкой пополнить .
10

11. 11

12. ЛОББИ
• На странице «Лобби» пользователю предложена таблица
очереди состоящая из 5 колонок: №, Пользователь, Начало
аренды, Окончание аренды и Статус.
• Если подошла Очередь пользователя то появляется кнопка «Вход
в Манипулятор», которая ведет на страницу управления
манипулятором.
12

13. 13

14. УПРАВЛЕНИЕ МАНИПУЛЯТОРОМ
• На странице «управление манипулятором» пользователю предложена
таблица управления манипулятором с помощью которого происходит
управление роботом и запись группы команд.
• Когда время пользователя подходит к концу, появляется подсказка: До
окончания осталось 15 минут. Это делается для того чтобы пользователь имел
возможность поставить манипулятор в исходное положение.
14

15. УПРАВЛЕНИЕ МАНИПУЛЯТОРОМ
15

16. СТАТИСТИКА
• После нажатия кнопки «Завершить» открывается новая страница со
статистикой завершенного сеанса аренды и общего рейтинга команд всех
пользователей.
• При нажатии пользователем кнопки личный кабинет, пользователь попадает
на страницу личного кабинета где можно пополнить счет или стать в очередь.
• При нажатии пользователем кнопки выход, пользователь выходит в форму
авторизации.
16

17. КОНЦЕПТУАЛЬНАЯ МОДЕЛЬ
17

19. 19

21. 21

22. 22

23. IDF0 И DFD
ДИАГРАММЫ
23

25. • На данной диаграмме показано, что входными данными
являются: «Команды» и «Покупка аренды». Выходными
данными является «Оптимальный сценарий управления».
Накладываются ограничения: «Группы команд» и «Баллы», а
управление ведется пользователем и Web – сайтом

27. • На данной диаграмме указано, на какие именно процессы
делится контекстная диаграмма, такие как: «Оплата аренды»,
«Работа с манипулятором» и «Вывод результатов работы». Также
введены дополнительные ограничения, такие как:
«Дополнительные баллы», «Рейтинг групп команд»,
«Навигация», «Сохранение сценария» и «Рейтинг сценариев».

29. • На данной диаграмме показано, что процесс «Оплата аренды»
делится на три подпроцесса, таких как: «Покупка баллов для
аренды», «Начисление баллов» и «Выдача времени аренды».
Также добавлены новые ограничения, такие как: « Очередь»,
«Расписание», «Прогноз» и «Рассылка сообщений об
освобождении руки». Входные и выходные данные
унаследованы от узла, который был декомпозирован.

31. • На данной диаграмме показано, что процесс « Работа с
манипулятором» делится на три подпроцесса, таких как: «
Обработка команд», « Обзор манипулятора» и « Движение
манипулятора». Также добавлены новые ограничения, такие
как: « IP- камеры вокруг руки», « IP- камеры на
манипуляторе», « ARGET» и « Различие объектов». Входные
и выходные данные унаследованы от узла, который был
декомпозирован.

33. • На данной диаграмме показано, что процесс «Вывод результатов
работы» делится на два под процесса, таких как: « Обработка
сценария команд» и « Разработка оптимального сценария
управления». Также добавлено новое ограничение «
Редактирование последовательности команд». Входные и
выходные данные унаследованы от узла, который был
декомпозирован.

34. 34

35. • На данной диаграмме отображается процесс «Система:
разработка оптимального сценария команд». Также показаны
входные и выходные потоки данных, такие как: « Покупка
аренды» и « Команды», выходящие из сущности
«Пользователь», а также « Оптимальный сценарий
управления» и «Web – сайт».
35

36. 36

37. • Данная диаграмма показывает, на какие процессы делится система: «
Обработка запроса об аренде», « Обзор манипулятора», « Движение
манипулятора» и « Сохранение сценария команд». После выполнения
процесса «Обработка запроса об аренде» создается хранилище данных «
Аренда», после « Обзор манипуляторов» создается « Вывод
изображения», а после «Движение манипулятора» - « Сценарий
выполненных команд манипулятора». Все процессы под управлением
сущности « Система сайта».
37

38. UML ДИАГРАММЫ
38

39. 39

40. • На данной диаграмме показана последовательность действий, с которой
пользователь может достигнуть своей цели – найти оптимальный
сценарий команд для манипулятора. Действия: Покупка аренды, Работа с
манипулятором, Указать необходимые команды, Наблюдение за
манипулятором, Сохранение сценария, Выбор оптимального сценария
команд.
40

41. ДИАГРАММА ВАРИАНТОВ ИСПОЛЬЗОВАНИЯ

42. ДИАГРАММА ВАРИАНТОВ ИСПОЛЬЗОВАНИЯ
• На слайде отображена диаграмма вариантов использования. На диаграмме
изображена структура одного из вариантов использования системы.
Актером данной диаграммы является «Пользователь». Он взаимодействует
вариантом использования «Выбор оптимального сценария команд». «Выбор
оптимального сценария команд» включает в себя: «Оплата аренды
манипулятора», «Указать необходимые команды», «Наблюдать за
движением манипулятора» и «Поиск оптимального сценария команд в
рейтинге сценариев».

43. ДИАГРАММА КЛАССОВ UML

44. ДИАГРАММА КЛАССОВ UML
Данная диаграмма показывает, какие классы будут входить в
систему и связь между ними. Диаграмма состоит из трех
классов: « Аренда», «Манипулятор» и «Рейтинг сценариев
команд». Между классами установлена связь агрегация, так как
класс «Манипулятор» включает в себя объекты класса «Аренда»
, а класс «Рейтинг сценариев команд» включает в себя объекты
класса «Манипулятор».

45. ДИАГРАММА КОМПОНЕНТОВ

46. ДИАГРАММА КОМПОНЕНТОВ
• На данной диаграмме показано разбиение программной
системы на структурные компоненты и связи (зависимости)
между компонентами. При анализе системы были выделены
такие компоненты: «Web-клиент», «Web- интерфейс Drone
Driver»; модули сайта:
«Index.html», «Index.php», «Rent.php», «add_commands.php», «
Rating_commands.php» и «Styles.css».

47. ДИАГРАММА ПОСЛЕДОВАТЕЛЬНОСТИ

48. ДИАГРАММА ПОСЛЕДОВАТЕЛЬНОСТИ
На слайде показана диаграмма последовательности. На данной
диаграмме показаны взаимодействия объектов, упорядоченные
по времени их проявления. Также данная диаграмма является
частным случаем диаграммы взаимодействия.

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

50. СТАРТОВАЯ СТРАНИЦА САЙТА

51. ФОРМА РЕГИСТРАЦИИ

52. ФОРМА ЛИЧНЫЙ КАБИНЕТ

53. ФОРМА ОЧЕРЕДЬ

54. ОБЩАЯ MODEL GUI STUDIO DESIGN

55. ФОРМА УПРАВЛЕНИЯ МАНИПУЛЯТОРОМ

56. ФОРМА ОКОНЧАНИЯ АРЕНДЫ

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

58. СПАСИБО ЗА ВНИМАНИЕ…
58