Разработка клиентской части универсальной веб-платформы для игровых и прикладных приложений

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

Реферат ……………………………………………………………………………………………………. 11

Список терминов и сокращений ……………………………………………………………….. 12

Введение ………………………………………………………………………………………………….. 21

Глава 1 Обзор архитектур и типов веб-приложений ………………………………….. 24

1.1 Онлайн архитектура ……………………………………………………………………………. 24

1.1.1 Модель клиент-сервер ……………………………………………………………………… 25

1.2 Облачная архитектура ………………………………………………………………………… 28

1.2.1 IaaS ………………………………………………………………………………………………….. 30

1.2.2 PaaS …………………………………………………………………………………………………. 31

1.2.3 SaaS …………………………………………………………………………………………………. 33

1.3 Сравнение архитектур ………………………………………………………………………… 34

1.4 Заключение по разделу «Обзор архитектур веб-приложений» ……………… 35

Глава 2 Исследование предметной области ………………………………………………. 37

2.1 Описание предметной области ……………………………………………………………. 37

2.1.1 Описание объекта автоматизации …………………………………………………….. 37

2.1.2 Описание рассматриваемого бизнес-процесса ………………………………….. 38

2.2 Обзор существующих аналогов …………………………………………………………… 42

2.2.1 Клиент-серверный аналог – «Steam» …………………………………………………. 42

2.2.2 Клиент-серверный аналог – «World of tanks» …………………………………….. 42

2.2.3 Облачный аналог – «Vortex» …………………………………………………………….. 43

2.2.4 Аналог с использованием iFrame – «Mail.ru» …………………………………….. 43

2.2.4 Результат обзора и анализа аналогов ………………………………………………… 44

2.3 Описание выбранного средства разработки …………………………………………. 45

2.4 Заключение по разделу «Исследование предметной области» ……………… 47
Глава 3 Проектирование веб-платформы ………………………………………………….. 48

3.1 Роли пользователей в системе. UML-моделирование …………………………… 48

3.2 Инфраструктура информационной системы ………………………………………… 50

3.3 Реализация веб-платформы …………………………………………………………………. 52

3.3.1 Коммуникация с логическим сервером …………………………………………….. 52

3.3.2 Анимация приложения …………………………………………………………………….. 55

3.3.3 Реклама на веб-платформе ……………………………………………………………….. 57

3.3.4 Описание разработанного веб-приложения ………………………………………. 58

3.4 Реализованный функционал веб-платформы ……………………………………….. 60

3.4.1 Главная страница……………………………………………………………………………… 60

3.4.2 Страница регистрации ……………………………………………………………………… 64

3.4.3 Страница личного кабинета ……………………………………………………………… 66

3.4.4 Страница мессенджера …………………………………………………………………….. 69

3.4.5 Страница одобрения и отклонения пользовательских заявок …………….. 71

3.4.6 Страница каталога приложений ……………………………………………………….. 71

3.4.7 Страница поиска ………………………………………………………………………………. 74

3.4.8 Страница использования приложений ………………………………………………. 77

3.4.9 Страница пользовательской корзины ……………………………………………….. 77

3.4.10 Страница контактов ……………………………………………………………………….. 79

3.5 Заключение по разделу «Проектирование веб-платформы» …………………. 80

4 Тестирование и продвижение веб-платформы………………………………………… 81

4.1 Проверка веб-платформы на кроссбраузерность ………………………………….. 81

4.2 Проверка поведения веб-платформы при изменении разрешения экрана 83

4.3 Usability тестирование веб-платформы………………………………………………… 85

4.4 Проверка совместимости используемых на веб-платформе цветов ………. 88
4.5 Тестирование безопасности веб-платформы………………………………………… 90

4.6 Нагрузочное тестирование веб-платформы …………………………………………. 90

4.7 Тестирование быстродействия веб-платформы ……………………………………. 91

4.8 Реализация продвижения веб-платформы ……………………………………………. 92

4.9 Заключение по разделу ……………………………………………………………………….. 94

5 Финансовый менеджмент, ресурсоэффективность и ресурсосбережение … 96

5.1 Технология QuaD ……………………………………………………………………………….. 96

5.2 SWOT-анализ ……………………………………………………………………………………… 98

5.3 Структура работ в рамках научного исследования …………………………….. 101

5.4 Определение трудоемкости выполнения работ ………………………………….. 103

5.5 Разработка графика проведения научного исследования ……………………. 104

5.6 Расчет материальных затрат НТИ ……………………………………………………… 105

5.6.1 Расчет амортизации оборудования для экспериментальных работ …… 106

5.6.3 Основная заработная плата исполнителей темы………………………………. 108

5.6.4 Дополнительная заработная плата исполнителей темы……………………. 109

5.6.5 Отчисления во внебюджетные фонды (страховые отчисления) ……….. 110

5.6.6 Накладные расходы………………………………………………………………………… 111

5.4 Оценка научного уровня……………………………………………………………………. 112

5.5 Заключение по разделу ……………………………………………………………………… 115

6 Социальная ответственность ……………………………………………………………….. 116

6.1 Правовые и организационные вопросы обеспечения безопасности ……. 116

6.2 Производственная безопасность ……………………………………………………….. 118

6.2.1 Недостаточная освещенность рабочей зоны ……………………………………. 120

6.2.2 Недостаточная освещенность рабочей зоны ……………………………………. 121

6.2.3 Превышение уровня шума ……………………………………………………………… 124
6.2.4 Опасные и вредные производственные факторы, связанные с
электромагнитными полями. ………………………………………………………………….. 125

6.2.5 Повышенное значение напряжения в электрической цепи, замыкание
которой может произойти через тело человека ……………………………………….. 127

6.3 Экологическая безопасность……………………………………………………………… 128

6.4 Безопасность в чрезвычайных ситуациях…………………………………………… 130

6.5 Заключение по разделу ……………………………………………………………………… 131

Заключение ……………………………………………………………………………………………. 132

Список достижений………………………………………………………………………………… 134

Список источников ………………………………………………………………………………… 135

Приложение А – Диаграмма вариантов использования пользователей веб-
платформы …………………………………………………………………………………………….. 139

Приложение Б – Диаграмма вариантов использования пользователей веб-
платформы …………………………………………………………………………………………….. 140

Приложение В – Диаграмма вариантов использования пользователей веб-
платформы …………………………………………………………………………………………….. 141

Приложение Г – Диаграмма последовательностей описания коммуникаций с
логическим сервером ……………………………………………………………………………… 142

Приложение Д – Диаграмма последовательностей процесса создания
анимации рекламы приложений на веб-платформе …………………………………. 143

Приложение Е – Таблица трудоемкости выполнения работ …………………….. 144

Продолжение приложения Е – Таблица трудоемкости выполнения работ .. 145

Продолжение приложения Е – Таблица трудоемкости выполнения работ .. 146

Приложение Ж – Диаграмма Ганта для определения графика работ поэтапной
реализации проекта ………………………………………………………………………………… 147
Приложение З – Диаграмма Ганта для определения графика работ подэтапов
за период дипломирования……………………………………………………………………… 148

Приложение И ……………………………………………………………………………………….. 149

В ходе выполнения магистерской диссертации, была спроектирована и
реализована клиентская часть универсальной веб-платформы для продажи и
использования игровых и прикладных приложений.
Задачи, выполненные в данной работе:
 Реализована клиентская часть пользователя веб-платформы.
 Реализована клиентская часть администратора веб-платформы.
 Интегрирован сторонний мессенджер в веб-платформу.
 Реализована система рейтинга.
 Реализована страница использования приложений.
 Реализована отправка сообщений логическому серверу, перехват
клавиатуры пользователя.
 Рендеринг карты приложения с логического сервера.
Был произведен литературный обзор архитектур и типов веб-
приложений, проведена сравнительная характеристика архитектур веб-
приложений.
В ходе выполнения работы, было проведено исследование предметной
области, которое включает в себя описание предметной области,
моделирование бизнес-процессов в нотации IDEF0, обзор и анализ
существующих аналогов. Проведен сравнительный анализ инструментов
разработки.
Описаны роли пользователей веб-платформы, приведена
инфраструктура системы. Были приведены описания этапов реализации веб-
платформы и описан функционал приложения.
Было выполнено тестирование веб-платформы, проведена поисковая
оптимизация, выполнено подключение инструмента сбора пользовательской
статистики.
Был произведен анализ рабочего помещения, анализ вредных и
опасных факторов и методы минимизации их воздействия на человеческое
здоровье.
В общей сложности, было написано около 33000 строк кода.
Разработанная веб-платформа будет использоваться для дальнейшей
реализации коммерческих программных продуктов.
Подразумевается, что в дальнейшем данный проект будет
модифицироваться и расширять свой функционал, из-за чего дальнейшая
себестоимость и длительность разработки будет расти. Но дальнейшая
модификация станет возможна, после запуска веб-платформы и наращивания
аудитории пользователей веб-платформы, а также после ее окупаемости.
Научная новизна заключается в оригинальной алгоритмической
обработке данных с логических серверов для последующего рендеринга сцены
приложения на стороне браузера пользователя.
В дальнейшем планируется поддержка и модификация модулей веб-
платформы для увеличения скорости и бесперебойности работы.
Список достижений
 Клюшов П. Д. , Телепнев А. Е. Веб-платформа для игровых и
прикладных приложений // Молодежь и современные
информационные технологии: сборник трудов XVII Международной
научно- практической конференции студентов, аспирантов и молодых
ученых, Томск, 17-20 Февраля 2020. – Томск: ТПУ, 2020 – C. 307-308
(диплом I степени).
 Клюшов П. Д. , Телепнев А. Е. ВЕБ-платформа для игровых и
прикладных приложений // Научная сессия ТУСУР – 2020: материалы
XXV Международной научно-технической конференции студентов,
аспирантов и молодых учёных: в 3 частях. Часть 2, Томск, 13-30 Мая
2020. – Томск: В-Спектр, 2020 – C. 288-291 (диплом III степени).
 Стипендия Правительства РФ студентам ТПУ, обучающимся по
специальностям или направлениям подготовки, соответствующим
приоритетным направлениям модернизации и технологического
развития российской экономики» на весенний семестр 2020/2021 уч.
года. Приказ ректора ТПУ от 25.02.2021 № 56-56/с.
 Стипендия Правительства РФ студентам ТПУ, обучающимся по
специальностям или направлениям подготовки, соответствующим
приоритетным направлениям модернизации и технологического
развития российской экономики» на осенний семестр 2020/2021 уч.
года. Приказ ректора ТПУ от 21.05.2020г. № 142-69/с.
 Повышенная стипендия по НАУКЕ ОСЕНЬ 2020/2021 уч. Год

1.О Steam. [Электронный ресурс]. Режим доступа: свободный. Ссылка на
ресурс: https://store.steampowered.com/about/ (Дата обращения: 15.05.2021).
2.World of tanks. [Электронный ресурс]. Режим доступа: свободный.
Ссылка на ресурс: https://worldoftanks.ru/ (Дата обращения: 16.06.2021).
3.Vortex. [Электронный ресурс]. Режим доступа: свободный. Ссылка на
ресурс: https://vortex.gg/ (Дата обращения: 11.05.2021).
4.Игры Mail.ru. [Электронный ресурс]. Режим доступа: свободный.
Ссылка на ресурс: https://games.mail.ru/ (Дата обращения: 11.05.2021).
5.Oswaldo Sebastian Penaherrera-Pulla. Measuring Key Quality Indicators in
Cloud Gaming: Framework and Assessment Over Wireless Networks / Carlos
Baena, Sergio Fortes, Eduardo Baena, Raquel Barco // Sensors. – 2021. – Vol. 4,
№11. – P.1387-1411.
6.Santosh Kumar. A review on client-server based applications and research
opportunity // International Journal of Scientific Research. – 2019. – Vol. 10, № 7.
– P.33857-33862.
7.Aaqib Rashid. Cloud Computing Characteristics and Services: A Brief
Review / Amit Chaturvedi // International Journal of Computer Sciences and
Engineering. – 2019. – Vol. 7, № 2. – P.421-426.
8.Sulabha Patil. Digital Forensic in Cloud: Critical Analysis of Threats and
Security in IaaS, SaaS and PaaS and Role of Cloud Service Providers / Raiiv
Dharaskar;VilasThakare//InternationalConferenceonComputing
Communication Control and Automation. – 2017. – P.1-7.
9.F Wulf. IaaS, PaaS, or SaaS? The Why of Cloud Computing Delivery Model
Selection – Vignettes on the Post-Adoption of Cloud Computing / T Lindner, M
Westner, S Strahringer // Proceedings of the 54th Hawaii International Conference
on System Sciences. – 2021. – P.6285-6294.
10.Что представляет собой игровая платформа Steam?. [Электронный
ресурс].Режимдоступа:свободный.Ссылканаресурс:
https://compconfig.ru/internet/steam.html (Дата обращения: 11.05.2021).
11.World of Tanks. [Электронный ресурс]. Режим доступа: свободный.
Ссылка на ресурс: https://ru.wargaming.net/ru/games/wot (Дата обращения:
11.05.2021).
12.Игры. [Электронный ресурс]. Режим доступа: свободный. Ссылка на
ресурс: https://corp.mail.ru/ru/company/games/ (Дата обращения: 11.05.2021).
13.What is jQuery?. [Электронный ресурс]. Режим доступа: свободный.
Ссылка на ресурс: https://jquery.com/ (Дата обращения: 11.01.2021).
14.Что такое PostgreSQL?. [Электронный ресурс]. Режим доступа:
свободный. Ссылка на ресурс: https://postgrespro.ru/docs/postgresql/9.6/intro-
whatis (Дата обращения: 11.05.2021).
15.Pixi.JS. [Электронный ресурс]. Режим доступа: свободный. Ссылка на
ресурс: https://www.pixijs.com/ (Дата обращения: 11.05.2021).
16.Описание сервиса. [Электронный ресурс]. Режим доступа: свободный.
Ссылка на ресурс: https://talkdriver.ru/code/ (Дата обращения: 11.05.2021).
17.Плагин на jQuery для вывода рейтинга в виде звезд. [Электронный
ресурс].Режимдоступа:свободный.Ссылканаресурс:
https://habr.com/ru/post/132807/ (Дата обращения: 11.05.2021).
18.Resolution Test. [Электронный ресурс]. Режим доступа: свободный.
Ссылканаресурс:https://chrome.google.com/webstore/detail/resolution-
test/idhfcdbheobinplaamokffboaccidbal (Дата обращения: 11.05.2021).
19.Codeless Prototype Analytics. [Электронный ресурс]. Режим доступа:
свободный. Ссылка на ресурс: https://www.useberry.com/ (Дата обращения:
11.05.2021).
20.Checkmycolours. [Электронный ресурс]. Режим доступа: свободный.
Ссылка на ресурс: https://www.checkmycolours.com/ (Дата обращения:
23.05.2021).
21.Онлайн нагрузочное тестирование сайта и сервера. [Электронный
ресурс]. Режим доступа: свободный. Ссылка на ресурс: https://loaddy.com/
(Дата обращения: 23.05.2021).
22.Проверка скорости вашего сайта. [Электронный ресурс]. Режим
доступа: свободный. Ссылка на ресурс: https://sitespeed.ru/ (Дата обращения:
23.05.2021).
23.Wordstat. [Электронный ресурс]. Режим доступа: свободный. Ссылка на
ресурс: https://wordstat.yandex.ru/ (Дата обращения: 23.05.2021).
24.Яндекс метрика. [Электронный ресурс]. Режим доступа: свободный.
Ссылка на ресурс: https://metrika.yandex.ru/ (Дата обращения: 23.05.2021).
25.ГОСТ 12.2.032-78 ССБТ. Рабочее место при выполнении работ сидя.
Общие эргономические требования.
26.ГОСТ Р 50923-96. Дисплеи. Рабочее место оператора. Общие
эргономические требования и требования к производственной среде. Методы
измерения.
27.СП 2.2.3670-20 Санитарно-эпидемиологические требования к условиям
труда.
28.Трудовой кодекс Российской Федерации от 30.12.2001 N 197-ФЗ (ред.
от 05.04.2021).
29.ГОСТ 12.0.003-2015 ССБТ. Опасные и вредные производственные
факторы. Классификация.
30.СанПиН 2.2.4.548-96. Гигиенические требования к микроклимату
производственных помещений.
31.СНиП 23-05-95. Естественное и искусственное освещение.
32.Пособие к МГСН 2.06-99. Расчет и проектирование искусственного
освещения помещений общественных зданий.
33.ГОСТ 12.1.003-2014. Шум. Общие требования безопасности.
34.СанПиН 1.2.3685-21. Гигиенические нормативы и требования к
обеспечению безопасности и (или) безвредности для человека факторов среды
обитания.
35.СНиП 23-03-2003. Строительные нормы и правила Российской
Федерации. Защита от шума.
36.ГОСТ 12.0.003-74. Опасные и вредные производственные факторы.
Классификация.
37.ГОСТ 12.4.011-89. Средства защиты работающих. Общие требования и
классификация.
38.КодексРоссийскойФедерацииобадминистративных
правонарушениях от 30.12.2001 N 195-ФЗ (ред. от 30.04.2021, с изм. от
17.05.2021).
39.ГОСТ 12.3.031-83. Система стандартов безопасности труда. Работы со
ртутью.
40.Директива RoHS от 2011 года об ограничении использования опасных
веществ.
41.ГОСТ Р 57740-2017. Обращение с отходами. Требования к приему,
сортировке и упаковыванию опасных твердых коммунальных отходов.
42.ГОСТ Р 51768-2001. Обращение с отходами. Методика определения
ртути в ртутьсодержащих отходах.
43.ГОСТ Р 22.3.03-94. Безопасность в чрезвычайных ситуациях. Защита
населения.
44.СНиП 21-01-97. Строительные нормы и правила Российской
Федерации. Пожарная безопасность зданий и сооружений.