Файл: Высшего образованияказанский (приволжский) федеральный университет.pdf

Министерство науки и высшего образования Российской Федерации
Федеральное государственное автономное образовательное учреждение
высшего образования
«КАЗАНСКИЙ (ПРИВОЛЖСКИЙ) ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ»
ИНСТИТУТ ВЫЧИСЛИТЕЛЬНОЙ МАТЕМАТИКИ И
ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ
КАФЕДРА ТЕХНОЛОГИЙ ПРОГРАММИРОВАНИЯ
Направление: 09.03.04 – Программная инженерия
Профиль: Технологии разработки информационных систем
ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА
Разработка веб-приложения для инвентаризации оборудования
корпоративной сети КФУ на платформе ActiveMap (web/js/html)
Работа завершена:
Студент 4 курса группы 09-551
“___”_____________ 2019 г. __________________ Анисимов Н.В.
Работа допущена к защите:
Научный руководитель к.ф.-м.н., доцент
“___”_____________ 2019 г. __________________ Медведева О.А.
Заведующий кафедрой к.э.н, доцент
“___”_____________ 2019г. __________________ Вахитов Г.З.
Казань-2019

2
Оглавление
Введение........................................................................................................................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

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

4
Целью дипломной работы является разработка Web-приложения
MapEditor на платформе ActiveMap. Программное обеспечение MapEditor представляет собой полнофункциональную геоинформационную систему,
предназначенную для работы с пространственными данными. В настоящее время данное приложение существует только в виде обычного десктопного приложение, для работы с которым необходимо его скачать и установить. Web- приложение «MapEditor» даст возможность клиенту пользоваться ресурсами приложения имея при себе только выход в интернет, при этом не важно будет,
какая операционная система установлена у пользователя и насколько мощный у него девайс.
Для разработки Web-приложения необходимо решить следующие задачи:

Провести обзор существующих инструментов и информационных технологий для создания Web-приложений;

Определить структуру и дизайн разрабатываемого Web-приложения;

Реализовать основной функционал клиентской части Web-приложения;

Выполнить адаптацию Web-приложения под все популярные устройства;

Провести функциональное тестирование Web-приложения.
Дипломная работа состоит из четырех частей.
Первая часть содержит постановку цели, задачи и описание предметной области. Вторая часть состоит из анализа и выбора программ для решения поставленной задачи по разработке Web-приложения. Третья часть состоит из проектирования и разработки клиентской части Web-приложения. Четвертая часть содержит описание разработанной клиентской части Web-приложения.

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

6
можно назвать Web-приложением.
Основное существенное отличие Web-сайтов от Web-приложений является то, что первые являются информационными, а вторые интерактивными. Так же все Web-сайты делят на статические и динамические.
Статический Web-сайт – это совокупность статический HTML-страниц,
которые связаны ссылками между собой. Такие HTML-страницы создаются вручную, загружаются и хранятся на виртуальном сервере, после чего при каждом обращении пользователя к сайту показываются к нему в неизменном виде. При необходимости изменения информации на статическом сайте, нужно будет вручную редактировать исходный HTML-код страницы.
Выделяют несколько основных преимуществ и недостатков статических сайтов. К преимуществам относят следующие:

создается минимальная нагрузка на сервер;

быстрая загрузка;

дешевая и быстрая разработка;

простота переноса с одного виртуального сервера на другой.
Основыми недостатками таких сайтов являютются сложность обновления сайта и внесения каких-либо правок. Рядовой пользователь не в состоянии управлять таким сайтом без знаний в области Web-программирования.
Динамические web-сайты обладают большим функционалом, например, на них можно редактировать информацию не имею при этом знаний в области
Web-программирования, постить ежеднемные новости или вести свой блог, но если основной деятельностью пользователя на этом Web-ресурсе будет чтение информации, то этот ресурс все равно будет считаться именно Web-сайтом, а не
Web-приложением.
Динамические web-сайты, в отличие от статических, гораздо более гибкие в использовании. Такие сайты легко можно разрабатывать «с нуля», вручную прописывая все необходимые программные коды, скрипты и т.д. Хотя гораздо

7
чаще для разработки динамических сайтов используют специальные системы управления контентом – CMS. Такие системы дают возможность использовать уже готовые модули и скрипты. На основе одной такой CMS можно создать любое количество динамических Web-сайтов. На данный момент наиболее распространенными CMS является Wordpress, Joomla, Bitrix.
Основная черта Web-приложения заключается в том, что оно интерактивно. Это значит, что пользователь является активным участником, а не пассивным потребителем. Пользователь ищет информацию, нажимет на кнопки,
постоянно работает с клавиатурой и мышью. Ярким примером Web-приложения является сайт instagram.com. В нем пользователь не только просматривает инфомрацию, но и постоянно совершает различные действия, такие как:
поставить лайк, сделать репост записи, выложить новую фотографию.
1.2. Платформа ActiveMap
ActiveMap – комплекс программ, дающий возможность разработки и редактирования тематических слоев на интерактивной карте мире и управления ими (рисунок 1.1). Все объекты слоев могут быть отображены на карте в трех различных геометрических типах:

в виде точек;

в виде линий;

в виде полигонов.
Отображение всех слоев можно детально настраивать по диапазону,
справочнику или интервалу в зависимости от значений атрибутивных полей объектов. Также, данная программа дает возможность добавления названия к каждому объекту слоя, которое может включать в себя значения атрибутивных полей объектов. В программе реализованы обширные возможности по детальному редактированию геометрии объектов слоев на карте: вращение и перемещение объектов, группировка и разгруппировка геометрии, пересечение,

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

9
устройства;
7. Провести анализ ошибок и работоспособности Web-приложения.
Результатом выполнения поставленных задач является клиентская часть
Web-приложения «MapEditor». Данное приложение можно будет синхронизировать с базой данных платформы ActiveMap.

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

11
обзора.
Обозначим требования к дизайну Web-приложения.

цветовая гамма сайта должна состоять из трех основных цветов;

навигационное меню и остальные элементы навигации должны быть доступны с главной страницы Web-приложения;

основная карта должна быть максимально открытой, для большего обзора и более удобной работы с ней;

весь функционал Web-приложения должен находиться на всплывающих окнах, вызвать которые можно кликнув на определенные пункты навигационного меню;

дизайн сайта должен быть максимально приближен к дизайну платформы «ActiveMap», но иметь индивидуальные черты;

все работа с Web-приложением должна осуществляться в одном главном рабочем окне.

При разработке дизайна сайте не должны присутствовать:

всплывающие окна, которые невозможно закрыть;

сложно структурированная информацию, тяжелая для восприятия пользователем;

разделы, не относящиеся к функционалу Web-приложения.
2.2. Скриптовый язык программирования общего назначения
PHP – скриптовый язык общего назначения, активно применяемый в сфере разработки интерактивных Web-приложений. В данный момент является неотъемлемой частью большого количества хостинг – провайдеров и считается одним из лидеров среди языков программирования, использующихся в разработке Web-ресурсов. Язык PHP создан специально для Web-разработки и может внедряться в программный код Web-страниц.