Разработка веб-приложения для инвентаризации оборудования корпоративной сети КФУ на платформе ActiveMap (web/js/html)

Введение 3
1. Постановка задачи 3
1.1. Характеристика предметной области 5
1.2. Платформа ActiveMap 7
1.3. Формулировка задачи 8
2. Программное обеспечение и используемые языки программирования 10
2.1. Требования к разрабатываемому Web-приложению 10
2.2. Скриптовый язык программирования общего назначения 11
2.3. Язык JavaScript 13
2.4. Каскадные таблицы стилей 15
2.5. Обзор и сравнение сред разработки Web-приложения 16
2.6. Обзор и сравнение локальных серверов 19
2.7. Применяемые Web-технологии 21
3. Проектирование Web-приложения «MapEditor» 23
3.1. Структура Web-приложения 23
3.2. Клиентская часть Web-приложения 23
3.3. Разработка дизайна Web-приложения 25
3.4. Настройка API карты от платформы ActiveMap 29
4. Описание разработанного Web-приложения 31
4.1. Описание интерфейса пользователя 31
4.2. Описание основного функционала Web-приложения 33
Заключение 36
Список используемых источников 38
Приложение 40

Введение
Разработка web-приложений в настоящее время является одним из перспективных направлений деятельности для многих компаний, занятых в сфере высокотехнологичных цифровых и компьютерных технологий. Web- приложение является прикладным программным обеспечением, логика которого распределена между сервером и клиентом, а обмен информацией происходит по сети. Клиентская часть реализует пользовательский интерфейс, а серверная – получает и обрабатывает запросы от клиента, выполняет вычисления, формирует веб-страницу и отправляет её клиенту согласно протоколу HTTP.
Данный вид приложений имеет ряд особенностей, которые влияют на процессы их функционирования, при разработке и поддержке:
• открыты для тестирования с удаленных компьютеров, что оптимально
для применения гибкой методологии разработки;
• выполняются независимо от операционной системы клиента.
...

1.1. Характеристика предметной области
Вся информация, которая находится в сети Интернет, храниться на компьютерах, которые называются Web-серверами. На этих Web-серверах установлено специальное программное обеспечение, дающее пользователям возможность находить определенную информацию. Большая часть такой информации появляется перед пользователем в виде Web-сайтов, каждый из которых имеет свое доменное имя или адрес в сети Интернет. Для того, чтобы просматривать Web-приложения с какого-либо девайса, у пользователя должно быть установлена специальная программа – Web-браузер. В зависимости от того, какое доменное имя Web-сайта вводиться в поисковой строке, браузер отображает соответствующую информацию в своем рабочем окне.
Любое Web-приложение состоит из страницы или нескольких связанных между собой Web-страниц. Каждая такая страница Web-приложения состоит из текстового файла с расширением *.
...

1.2. Платформа ActiveMap
ActiveMap – комплекс программ, дающий возможность разработки и редактирования тематических слоев на интерактивной карте мире и управления ими (рисунок 1.1). Все объекты слоев могут быть отображены на карте в трех различных геометрических типах:
◦ в виде точек;
◦ в виде линий;
◦ в виде полигонов.
Отображение всех слоев можно детально настраивать по диапазону, справочнику или интервалу в зависимости от значений атрибутивных полей объектов. Также, данная программа дает возможность добавления названия к каждому объекту слоя, которое может включать в себя значения атрибутивных полей объектов. В программе реализованы обширные возможности по детальному редактированию геометрии объектов слоев на карте: вращение и перемещение объектов, группировка и разгруппировка геометрии, пересечение,
7
объединение, симметрическая разность, копирование и вставка объектов, обрезание геометрии и другие функции редактирования.

Рисунок 1.1.
...

1.3. Формулировка задачи
Целью дипломной работы является разработка клиентской части Web- приложения MapEditor на платформе ActiveMap, предназначенного для работы с пространственными данными.
Объектом исследования является процесс создания интерфейса, дизайна и клиентской части Web-приложения.
Предметом исследования является технология создания клиентской части Web-приложения.
Для реализации цели дипломной работы необходимо решить следующие задачи:
1. Изучить теоретические материалы по созданию Web-приложений;
2. Провести анализ актуального программного обеспечения для создания Web-приложений;
3. Выбрать языки программирования, которые максимально эффективно будут подходить для создания Web-приложения cо стороны Frontend-разработки;
4. Определить структуру и дизайн Web-приложения;
5. Реализовать основной функционал клиентской части Web- приложения;
6. Выполнить адаптацию Web-приложения под все популярные

8
устройства;
7.
...

2.1. Требования к разрабатываемому Web-приложению
Общие требования к разрабатываемому Web-приложению:
• авторизация пользователей;
• отображение карты мира в основном рабочем пространстве приложения;
• наличие вертикального и горизонтального меню с основным функционалом приложения;
• наличие таблицы со всеми стилями пользователя;
• отображение стилей пользователя на интерактивной карте приложения;
• возможность вносить изменения в уже существующие слои пользователя.
Требования к структуре Web-приложения.
Необходимо, чтобы структура разрабатываемого Web-приложения предусматривала дальнейшее развитие путем добавление нового функционала, блоков, модулей, новых разделов, а так же возможность их изменения.
Обозначим требования к навигации Web-приложения. Графический интерфейс пользователя обязан обеспечить возможность наглядного, интуитивного представления структуры сайта и информации, размещенной на нем.
...

2.2. Скриптовый язык программирования общего назначения
PHP – скриптовый язык общего назначения, активно применяемый в сфере разработки интерактивных Web-приложений. В данный момент является неотъемлемой частью большого количества хостинг – провайдеров и считается одним из лидеров среди языков программирования, использующихся в разработке Web-ресурсов. Язык PHP создан специально для Web-разработки и может внедряться в программный код Web-страниц.
11
Основное отличие скриптов, написанных на этом языке, от скриптов, написанных, например, на C++ или Python – это то, что вместо программы, которая создает HTML-код, формируется программный код с несколькими внедренными командами PHP. Для использования кода PHP на Web-страницах его выделяют специальными тегами, которые располагаются в начале и в конце кода, чтобы процессор PHP мог определить границы участка HTML-кода, который содержит PHP [2, c. 304].
...

2.3. Язык JavaScript
JavaScript – язык программирования, который нужен для управления сценариями просмотра Web-страниц. Одна из особенностей данного языка
13
заключается в том, что он дает возможность изменять свойства среды отображения на Web-сайте без перезагрузки самой Web-страницы сайта. Например, благодаря языку JavaScript можно поменять фон Web-страницы или форму кнопки, сделать онлайн слайдер или вывести окно уведомлений.
JavaScript является объектно-ориентированным языком программирования, но учитывая, что в нем используется прототипирование (быстрая реализация базовой функциональности для анализа работы системы), возникает ряд особенностей, связанных с непосредственным выполнением кода языка в отличие от традиционных языков объектно-ориентированного программирования. Также, в языке JavaScript есть перечень свойств, которые присущи другим функциональным языкам, а именно: объекты как списки, анонимные функции, функции как объекты первого класса [3, c. 848].
...

2.4. Каскадные таблицы стилей
Каскадные таблицы стилей или CSS – это формальный язык описания внешнего вида Web-страницы, написанной при помощи языка разметки. Без CSS невозможно написание любого Web-Сайта, ведь он задает стили всем видимым элементам страницы. С помощью CSS устанавливают шрифт, размер и цвет текста, расположение блоков и их форму, фоновое изображение сайта и адаптацию сайта ко всем возможным расширениям девайсов [5, c. 272]. Основной задачей, решаемой в ходе использования CSS, является снижение сложности структуры содержимого путем разделения и обозначения элементов. Помимо этого, с помощью CSS можно представить одну и ту же Web-страницу в различных стилях отображения, например, экранное представление, чтение голосом и т.д. Сам CSS состоит из ряда правил, каждое из которых включает в себя один или несколько переключателей, которые соединены запятыми, и блок значений, взятый в фигурные скобки ({}) и состоящий из свойств и значений [4, c. 414].
...

2.5. Обзор и сравнение сред разработки Web-приложения
Рассматривая процесс разработки Web-приложения как процесс написания кода в текстовом документе, под средой разработки будем понимать наиболее удобный и функциональный текстовый редактор. В силу того, что в обычном
«блокноте» от Windows хоть и можно написать код сайта, это будет крайне неудобно и долго, поскольку в «блокноте» нет специальных плагинов, упрощающих работу с кодом. Поэтому рассмотрим более модернизированные аналоги, такие как SublimeText, PHPStorm, Atom. Каждый из них обладает минимальными необходимыми свойствами, которые значительно упрощают работу с текстом и сильно увеличивают скорость написания кода [15, c. 370].
...

2.6. Обзор и сравнение локальных серверов
Локальный сервер – специальная программа, благодаря которой Web- разработчики имеют возможность разрабатывать Web-сайты на локальном (домашнем) компьютере, без необходимости выхода в сеть Интернет. Необходимость в локальном сервере возникает при создании динамических Web-сайтов или интерактивных Web-приложений, которые используют язык программирования PHP. Это связано с тем, что Web-браузеры понимают только HTML, CSS и JS, но не PHP. В таком случае у нас есть два выхода, либо купить виртуальный Web-сервер и проводить все операции на нем, что неудобно и дорого, либо установить локальный Web-сервер, который позволит создать имитацию виртуального на персональном компьютере пользователя [6, c. 416].
В настоящее время существует большое количество программ, с помощью которых на компьютере возможно «развернуть» настоящий сервер, мы рассмотрим два самых популярных из них: «Open Server» (рисунок 2.5) и
«Denwer» (рисунок 2.6).

19

Рисунок 2.5.
...

2.7. Применяемые Web-технологии
С каждым годом требования интернет пользователей к Web-ресурсам растут, обычных статичных или динамичных сайтов становится мало, и на первый план выходят сложные Web-приложения с большим функционалом, которые удовлетворяют множество запросов потребителя. Так как целью нашей дипломной работы является создание именно Web-приложения, то простым HTML, CSS и JS кодом нам не обойтись. Нам нужен такой инструмент, который позволит производить множество операций без перезагрузки страницы и создать программный код, который будет строго структурирован и его будет легко поддерживать. К счастью, на данный момент такие инструменты уже изобрели, и самыми популярными из них вне всяких сомнений считается «Angular.js» (рисунок 2.7) и «React.js» (рисунок 2.8) [7, c. 275].

Рисунок 2.7. Фреймворк Angular.js

Рисунок 2.8. Фреймфорк React.js

Рассмотрим, какой из этих фреймворков больше всего будет удовлетворять наши потребности. Angular.
...

1. Барысов Р. И. Постройте профессиональный сайт сами / Р. И. Барысов – М.: Санкт-Петербург., 2013. – 304 с.
2. Веллинг Л., Томсон Л. Разработка веб-приложений с помощью PHP и MySQL / Л. Веллинг - М.: Вильямс - 2014. – 848 с.
3. Дронов В. А. Разработка современных Web-сайтов / В. А. Дронов - СПб.: БХВ-Петербург, 2013. – 414 с.
4. Зольников Д. С. PHP 5. Как самостоятельно создать сайт любой сложности / Д. С. Зольников - М.: НТ Пресс, 2014. – 272 с.
5. Кожемякин А. А. HTML и CSS в примерах. Создание Web-страниц / А. А. Кожемякин - М.: Альтекс-А, 2014. – 416 с.
6. Колисниченко Д. Н. Joomla! Руководство пользователя / Д. Н. Колисниченко - М.: Диалектика, 2013. – 256 с.
7. Маккоу А. Веб-приложения на JavaScript / Маккоу А., – М.: издательство “Питер”, 2012. – 18 с.
8. Мариков Ф. Ф. Самоучитель PHP 5 / Ф. Ф. Мариков - М.: Вильямс, 2013. – 420 с.
9. Морозов Б. С. MySQL в связке с PHP / Б. С. Морозов – Санкт- Петербург.: Корона-принт, 2014. – 310 c.
10. Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL и JavaScript / Р. Никсон - СПб.: Питер - 2011. – 496 с.
11. Печников В.Н. Создание Web-страниц и Web-сайтов. Самоучитель. /
- М.: Триумф, 2013. - 470 с.