Преподаватель который помогает студентам и школьникам в учёбе.

Критерии выбора средств разработки WEB-приложений

Содержание:

ВВЕДЕНИЕ

Актуальность исследования.

Комиссия экспертов Ассоциации Коммуникационных Агентств России подвела итоги развития рекламного рынка России за 2018 год и выявила, что объем сегмента наружной рекламы стал на 8% больше, чем годом раньше [1]. Это значит, что наружная реклама не сдает свои позиции, хотя и является старейшим способом доведения обращений рекламодателя до потенциальных клиентов. А также по-прежнему является актуальным способом отображения рекламных сообщений.

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

Объект исследования – рекламные конструкции.

Предмет исследования – web-приложение для оценки рекламных конструкций.

Цель работы – разработка web-приложения для оценки рекламных конструкций.

Для достижения поставленной цели в работе решаются следующие задачи:

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

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

Практическая значимость заключается в разработке web-приложения для оценки рекламных конструкций. Суть разрабатываемого приложения состоит в использовании эффективной оценки рекламных конструкций с помощью показателей медиапланирования, таких как GRP, OTS, CPP и CPT.

ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ РАЗРАБОТКИ WEB-ПРИЛОЖЕНИЙ

1.1 Понятия и классификация web-приложения

Развитие современной компьютерной техники и внедрение новейших технологий положили начало нового направления жизни на Земле. За довольно короткий промежуток времени развития микроэлектроники и кибернетики произошло много изменений.

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

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

Интернет — это не только "прохладный бассейн", в котором так комфортно чувствуют себя весьма "перегревшиеся" люди, но и место, где можно "потрогать" практически любую горячую тему, не опасаясь при этом обжечься

Web-технология полностью перевернула представления о работе с информацией, да и с компьютером вообще. Оказалось, что традиционные параметры развития вычислительной техники - производительность, пропускная способность, емкость запоминающих устройств - не учитывали главного "узкого места" системы - интерфейса с человеком. Устаревший механизм взаимодействия человека с информационной системой сдерживал внедрение новых технологий и уменьшал выгоду от их применения. И только когда интерфейс между человеком и компьютером был упрощен до естественности восприятия обычным человеком, последовал беспрецедентный взрыв интереса к возможностям вычислительной техники.

Информация, доступная пользователям Internet, располагается на компьютерах (Web-серверах), на которых установлено специальное программное обеспечение. Значительная часть этой информации организована в виде Web-сайтов. Каждый из них имеет свое имя (адрес) в Internet. Web-сайт – это информация, представленная в определенном виде, которая располагается на Web-сервере и имеет свое имя. Для просмотра Web-сайтов на компьютере пользователя используются специальные программы, которые называются браузерами. Наиболее распространенными браузерами в настоящее время являются Internet Explorer и Netscape Navigator. Взависимости от того, какое имя сайта мы зададим в строке "Адрес", браузер будет загружать в свое окно соответствующую информацию.

Web-сайт состоит из связанных между собой Web-страниц. Web-страница представляет собой текстовый файл с расширением *.htm, который содержит текстовую информацию и специальные команды – HTML-коды, определяющие в каком виде эта информация будет отображаться в окне браузера. Вся графическая, аудио и видео информация непосредственно в Web-страницу не входит и представляет собой отдельные файлы .

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

В настоящее время с точки зрения назначения различают три основных типа порталов:

Публичные, или горизонтальные, порталы (называемые иногда мегапорталами), такие как Yahoo, Lycos, Excite, Rambler. Такие порталы нередко являются результатом развития поисковых систем. Предназначены они для самой широкой аудитории, что отражается на содержании предоставляемой ими информации и услуг. Как правило, эта информация носит общий характер, равно как и предоставляемые услуги (электронная почта, новостные рассылки и так далее).
Вертикальные порталы. Этот вид порталов предназначен для специфических видов рынка и обслуживает аудиторию, пользующуюся услугами этого рынка или работающую на нем. Примерами таких порталов могут служить, например, туристические агентства, предоставляющие услуги по бронированию мест в гостиницах, заказу и доставке билетов, доступу к картам и сведениям об автомобильных маршрутах, либо порталы типа B2B (business-to-business), позволяющие своим клиентам реализовывать совместные бизнес-операции (например, выбирать поставщиков и осуществлять закупку товаров, проводить аукционы).
Корпоративные порталы предназначены для сотрудников, клиентов и партнеров одного предприятия. Пользователи такого портала получают доступ к предназначенным им сервисам и приложениям в зависимости от их роли и персонального профиля.

Другие наиболее распространённые web-приложения:

Региональные Интернет-порталы, универсальные по своему направлению, но ограниченные географией заинтересованных посетителей (e1.ru);
Поисковые системы — это Интернет-порталы, которые предназначены для того, чтобы предоставить их посетителю возможность найти сайты, на которых встречаются заданные слова или целые фразы (metabot.ru);
Каталог — это коллекция ссылок на сайты. Зачем же нужны каталоги, если есть поиск? Очень часто мы не знаем точно, что нам нужно, не можем это сформулировать парой слов (mail.ru);
Электронные доски объявлений - являются местом в Интернет, где практически любой желающий может оставить информацию ознакомительного, пригласительного или рекламного характера;
Форумы — это специальные сайты или разделы на сайтах, предназначенные для того, чтобы посетители, оставляя свои сообщения, обменивались мнениями;
Чаты - являются еще одним местом для общения в Интернет, только его назначение не обмен мнениями на какую-то тему, а просто времяпрепровождение;
Файлы для скачивания;
Фотогалереи;
Элементы статистики;
Хранение в интернете различной информации;
Серверы почтовых рассылок, они предлагают услуги по доставке информации широкому кругу читателей (subscribe.ru);

1.2 Средства разработки Web-приложений

HTML

Язык разметки гипертекста (Hypertext Markup Language), или, как его чаще называют, HTML, — это компьютерный язык, лежащий в основе World Wide Web (Всемирной Паутины). Благодаря языку HTML любой текст можно разметить, преобразовав его в гипертекст с последующей публикацией в Web.

Язык HTML имеет собственный набор символов, с помощью которых Web-браузеры отображают страницу. Эти символы, называемые дескрипторами, включают в себя элементы, необходимые для создания гиперссылок [3, с. 20].

Одной из отличительных особенностей HTML-документов является то, что сам документ содержит только текст, а все остальные объекты встраиваются в документ в момент его отображения Браузером с помощью специальных тэгов и хранятся отдельно. При сохранении HTML-файла в месте размещения документа создается папка, в которую помещаются сопутствующие ему графические элементы оформления .

PHP

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

Вторая область – это создание скриптов, выполняющихся в командной строке. То есть с помощью PHP можно создавать такие скрипты, которые будут исполняться, вне зависимости от web-сервера и браузера, на конкретной машине.

И последняя область – это создание GUI-приложений (графических интерфейсов), выполняющихся на стороне клиента

Ajax

Ajax расшифровывается как Asynchronous Javascript And XML (Асинхронные Javascript и XML) и технологией в строгом смысле слова не является. Если в стандартном web-приложении обработкой всей информации занимается сервер, тогда как браузер отвечает только за взаимодействие с пользователем, передачу запросов и вывод поступившего HTML, то в Ajax-приложении между пользователем и сервером появляется еще один посредник - движок Ajax. Он определяет, какие запросы можно обработать "на месте", а за какими необходимо обращаться на сервер.

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

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

Где стоит использовать Ajax:

Формы. Они очень медленны. Если асинхронно передавать данные, страница не перезагружается.

Навигация в виде "дерева". Вообще, такая навигация - ужас. Простая топология намного удобнее, но если уж до этого дошло, лучше использовать Ajax.

Голосования. Пользователю будет приятней оставить свой голос за несколько секунд, чем за 30-40.

Фильтры. Часто на сайтах делают сортировку по дате, по имени. Ajax это будет значительно удобнее.

JavaScript

Язык программирования JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Это объектно-ориентированный язык разработки встраиваемых приложений, выполняющихся как на стороне клиента, так и на стороне сервера. Синтаксис языка очень похож на синтаксис Java – поэтому его называют – Java-подобным.

Основные области применения JavaScript делятся на следующие категории:

- динамическое создание документа с помощью сценария;

- оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер;

- создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа;

- взаимодействие с пользователем при решении "локальных" задач, решаемых приложением JavaScript, встроенном в HTML-страницу

VBScript

Язык создания сценариев VBScript разработан фирмой Microsoft, является подмножеством достаточно распространенного в среде программистов языка Visual Basic разработки прикладных программ Windows-приложений. Как и его родитель, язык VBScript достаточно прост и лёгок в изучении.

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

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

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

Для создания сценариев клиента используется набор объектов, аналогичный набору JavaScript. Объекты клиента и сервера отличаются друг от друга, но существует общая часть (ядро) объектов, используемых при разработке как сценариев клиент, так и сценариев сервера .

Perl

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

Вот некоторые примеры задач, которые можно решать с помощью Perl:

- проверка пользователей Windows NT на несоответствие их статуса и возможностей;

- управление NT-сервисами из командной строки и дистанционно с локальной машины получение статистических данных на отдельной машине;

- может работать и с протоколом FTP;

- системная поддержка UNIX и Windows.

ГЛАВА 2. РАЗРАБОТКА WEB-ПРИЛОЖЕНИЯ ДЛЯ ОЦЕНКИ РЕКЛАМНЫХ КОНСТРУКЦИЙ

2.1. Понятие одностраничного приложения

Single page application (SPA) – это приложение, которое работает в браузере и не перезагружает страницу во время работы. Как и любое другое приложение, оно предназначено для того, чтобы помочь пользователю в решении стоящей перед ним задачи, например: «подготовить документ» или «администрировать веб-сервер».

SPA могут использоваться любые серверные технологии. Поскольку значительная часть веб-приложения перемещается в браузер, требования к серверу можно существенно ослабить.

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

Рисунок 2.1 - Схема сравнения работы одностраничного приложения и традиционного подхода к созданию web-сайтов

SPA отрисовывается как персональное приложение. Оно перерисовывает лишь те части интерфейса, которые изменились, и лишь тогда, когда это необходимо. Напротив, традиционный сайт перерисовывает всю страницу в ответ на различные действия пользователя, что приводит к задержкам и «миганию», поскольку браузер должен получить страницу от сервера и нарисовать ее на экране. Если страница велика, сервер занят или соединение с Интернетом медленное, то задержка может составить несколько секунд, а пользователю остается лишь гадать, когда с ней снова можно будет работать. Это большой недостаток, по сравнению с быстрой отрисовкой и мгновенной обратной связью SPA.

SPA может реагировать как персональное приложение. Оно минимизирует время реакции за счет того, что переносит рабочие (временные) данные и часть обработки с сервера в браузер.

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

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

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

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

SPA, как и сайт, работает на разных платформах. В отличие от большинства персональных приложений, хорошо написанное SPA может работать в любой операционной системе, где есть современный браузер с поддержкой HTML5. Обычно эта особенность считается преимуществом для разработчика, но она не менее важна многочисленным пользователям, работающим с несколькими устройствами, скажем, с Windows на работе, с Mac’ом дома, с сервером под управлением Linux и с телефоном Android.

SPA может предложить лучшее из обоих миров – мгновенную реакцию персонального приложения наряду с переносимостью и доступностью веб-сайта. JavaScript SPA доступно более чем миллиарду устройств, которые поддерживают современные браузеры и не нуждаются в сторонних подключаемых модулях. Приложив немного усилий, можно сделать так, что оно будет работать на настольных ПК, планшетах и смартфонах с разными операционными системами. SPA легко обновлять и распространять, обычно это не требует никаких действий со стороны пользователя [12].

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

2.2. Технологии, используемые для реализации одностраничного web-приложения

На данный момент есть много фреймворков с помощью которых можно реализовать одностраничное приложение. У каждого есть свои плюсы и недостатки.

AngularJS – это клиентский MVC-фреймворк, написанный на JavaScript. Он выполняется в веб-браузере и оказывает огромную помощь в создании современных, одностраничных веб-приложений, использующих технологию AJAX. Это – многоцелевой фреймворк, но особенно ярко его особенности проявляются при реализации веб-приложений типа CRUD (Create Read Update Delete).

AngularJS совсем недавно пополнил семейство клиентских MVC-фреймворков, тем не менее ему удалось привлечь к себе внимание, в основном благодаря своей инновационной системе шаблонов, простоте разработки с его использованием и применению надежных инженерных решений. Его система шаблонов действительно во многом уникальна:

В качестве языка шаблонов в ней используется язык разметки HTML. Она не требует явно обновлять дерево DOM, так как AngularJS способен следить за действиями пользователя, событиями браузера и изменениями в модели, и вовремя обнаруживать, когда и какой шаблон требуется обновить.

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

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

AngularJS имеет несколько скрытых возможностей, механизм внедрения зависимостей (Dependency Injection, DI) и сильный упор на тестируемость. Встроенная поддержка DI существенно упрощает сборку веб-приложений из небольших, надежно протестированных служб. Архитектура фреймворка и окружающих его инструментов способствует применению тестирования на всех этапах разработки.

AngularJS относительно новый игрок на поле клиентских MVC-фреймворков; версия 1.0 была выпущена только в июне 2012. В действительности работа над этим фреймворком началась в 2009, как персональный проект Мишко Хеври (Miško Hevery), сотрудника Google. Однако идея фреймворка оказалась настолько хороша, что позднее проект был официально поддержан компанией Google Inc., и с того момента над фреймворком работает целая команда, а все работы оплачиваются компанией Google.

AngularJS – это проект с открытым исходным кодом, который можно найти на GitHub (https://github.com/angular/angular.js), и лицензируется компанией Google, Inc. на условиях лицензии MIT.

стандартной форме HTML значением элемента ввода является значение, которое будет отправлено на сервер в составе формы, как показано на рисунке 2.2.

Рисунок 2.2 - Передача значений на сервер в составе формы

Проблема заключается в том, что мы вынуждены работать со значениями в элементах ввода, так как они отображаются на экране. Это часто не совпадает с нашими желаниями. Например, поле ввода даты может позволять пользователю вводить строку в некотором предопределенном формате, например, «12 марта 2013». Но в программном коде было бы желательно работать с этим значением в виде объекта Date. Однако постоянное перекодирование из одного формата в другой слишком утомительное занятие и чревато ошибками. Фреймворк AngularJS отделяет модель от представления. Вы позволяете директивам ввода заботиться об отображении значений, а AngularJS позаботится об обновлении модели в случае изменения значений [13]. Это дает возможность работать с моделями, например, в контроллерах, не беспокоясь о том, как данные отображаются или вводятся (рисунок 2.3).

Рисунок 2.3 - AngularJS отделяет модель от представления

Основная концепция фреймворка AngularJS состоит в архитектурном шаблоне MVC (Model-View-Controller). Модель-Представление-Контроллер (или MVVM, обозначающий Модель-Представление-Представление-Контроллер, который очень похож) развивается как способ разделения логических блоков при разработке крупных приложений. Это дает разработчикам отправную точку в принятии решения о том, как и где можно разделить обязанности. Архитектурный шаблон MVC делит приложение на три отдельные модульные части:

Модель является движущей силой приложения. Это, как правило, данные приложения, обычно полученные с сервера. Любой пользовательский интерфейс с данными, которые видит пользователь, получен из модели или подмножества модели.

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

Контроллер – это уровень бизнес-логики и представления, который выполняет такие действия, как выборка данных, и принимает решения, например, как представить модель, какие части ее отображать и т. д. [14] Основным конкурентом AngularJS является KnockoutJS.

KnockoutJS – это библиотека JavaScript с открытым исходным кодом. Он был создан, чтобы позволить создавать динамичные и насыщенные веб-приложения. Он использует шаблон проектирования Model-View-View-Model (MVVM). Knockout упрощает реализацию сложного пользовательского интерфейса, который реагирует на пользовательские действия. Это одна из самых легких библиотек JavaScript, доступных сегодня. Он также не пытается быть универсальной структурой. Он служит единой цели: привязка данных вашей модели ViewModel к вашему пользовательскому интерфейсу [15].

Если сравнивать два этих фреймворка, то можно выделить их достоинства и недостатки друг перед другом.

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

Относительно AngularJS, он будет полезен в тех случаях, когда требуется создание большого пользовательского интерфейса или настоящего и полноценного одностраничного приложения со сложной архитектурой и разветвлёнными связями. Таким проектом как раз и является клиентская часть нашего приложения [16].

2.3. Клиентская часть web-приложения для оценки эффективности рекламных конструкций

Данное приложение имеет модульную структуру. Каждый модуль является самостоятельной и независимой единицей. Перечислим модули, на которые декомпозируется приложение:

Core; Auth; Layout; Tasks; Map.

Рисунок 2.4 - Схема одностраничного web-приложения для оценки рекламных конструкций

На рисунке 2.4 представлена схема разрабатываемого одностраничного web-приложения, где видно модульную структуру.

Core – основной модуль приложения. В него импортируются модули, предназначенные для расширения базового функционала AngularJS. Например, это модуль ngCookies, позволяющий работать с Cookie.

Cookie – это небольшая порция текстовой информации, которую сервер передает браузеру. Браузер будет хранить эту информацию и передавать ее серверу с каждым запросом как часть HTTP заголовка. Одни значения cookie могут храниться только в течение одной сессии, они удаляются после закрытия браузера [17].

В листинге 2.1 приведён код модуля Core.

Листинг 2.1

(function () {

'use strict';

Основной модуль для подключения сторонних модулей.

/* @ngInject */

angular.module('app.core', [

Angular modules

'ngSanitize',

'ngTouch',

'ngMessages',

'ngCookies',

'ngRoute',

'ngResource',

'ngToast',

'ngAnimate', 'angular-md5', 'xml', 'fancyboxplus',

3rd Party modules

'ui.bootstrap', // ui-bootstrap (ex: carousel, pagination, dialog)

'ui.mask',

'isteven-multi-select'

]);

})();

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

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

Для обеспечения маршрутизации в приложении используется модуль ngRoute. Чтобы подключить функциональность маршрутов, он был импортирован к модулю Core. С помощью метода config мы определяем маршруты приложения. Для конфигурации маршрутов используется объект $routeProvider.

Метод $routeProvider.when принимает два параметра: название маршрута и объект маршрута. Объект маршрута задает представление и обрабатывающий его контроллер с помощью параметров templateUrl и controller. Поэтому для представлений нам не надо определять контроллер с помощью директивы [18].

В листинге 2.2 представлен частичный код файла маршрутизации.

Листинг 2.2

(function() {

angular

.module('app.layout')

.config(['$routeProvider', routesConfig]);

/* @ngInject */

function routesConfig($routeProvider) { $routeProvider.

when('/', {

templateUrl: 'app/layout/main.html',

controller: '',

controllerAs: 'vm'

}).

when('/auth', {

templateUrl: 'app/layout/auth.html',

controller: 'AuthCtrl',

controllerAs: 'authCtrl'

}).

when('/tasks', {

templateUrl: 'app/layout/tasks.html',

controller: 'TasksCtrl',

controllerAs: 'tasksCtrl'

}).

otherwise({

redirectTo: '/'

});

}

})();

Для работы с API приложения, которое находится на удаленном сервере используется сервис ApiSrv. Он является частью модуля Core. В нём хранится основная логика по отправке запросов на удалённый сервер и приём ответов. Данный сервис используется во всех остальных модулях. В нём сформированы функции для следующих целей:

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

Перечислены самые основные запросы. Все они реализуются функцией serviceAction, которая является своеобразным конструктором. Ей на вход подаются следующие параметры: свойство объекта apiInterface, содержащее в себе структуру параметров для запроса, функцию, которая записывает полученные параметры в массив для дальнейшего использования, функция, отвечающая за окончательную сборку результата и callbackFunction для вызова в конце пользовательской функции (Листинг 2.3).

Листинг 2.3

function authUser(userPhone, userPass, callbackFunction) { serviceAction(

apiInterface.authUser,

function (pNames) {

//Сбор параметров

var params = {}; params

[pNames.userPhone] = userPhone; params[pNames.userPass] = userPass;

return params;

}, function (resultRequestObj) {

//Окончательная сборка результата

var resultObj = {

sessionID: resultRequestObj.sessionId,

success: resultRequestObj.success

};

return resultObj;

callbackFunction

);

}

Внутри функции actionService происходит окончательное формирование параметров и отправка их POST-запросом технологией AJAX, используя специальный сервис AngularJS – $http. Ответ запроса уже распарсенный возвращается в вызываемую функцию.

Auth – это модуль, отвечающий за авторизацию и регистрацию пользователей. В себе он содержит сервис authSrv, в котором хранятся все данные по пользователю. Также в нём реализованы функции отправки данных на сервер и запись в Cookie, чтобы пользователям не пришлось авторизовываться каждый раз, как заходят в приложение. В модуле есть два компонента: компонент авторизации и компонент регистрации. Они содержат свои представления и контроллеры, задающие начальные параметры для представлений и использующие функции из сервиса authSrv.

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

Tasks – модуль, отвечающий за всё, что относится к задачам. Он содержит 3 компонента:

список задач;
фильтр задач;
детальное представление задачи.
помощью компонента «Список задач» выводится список доступных заданий пользователю на основной странице оценки рекламных конструкций.
помощью компонента «Фильтр задач» есть возможность отсортировать список выводимых задач в компоненте «Список задач». Выбор значения на странице с фильтрами происходит с помощью библиотеки

AngularJS Multi-Select, которая позволяет создавать элементы вида select. Она имеют возможность поиска по элементам, выбора нескольких элементов списка и дополнительных кнопок вида «Выбрать все», «Очистить поле». На странице с фильтрами пользователи могут выбрать город, тип задания, тип конструкции и т.д.

компоненте «Детальное представление задачи» заложен весь функционал для прохождения тестирования. В нём формируются вопросы в зависимости от типа задачи. Список вопросов приходит с сервера, а с помощью данного компонента генерируется уже в полноценный тест для пользователей.

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

Map – модуль, отвечающий за работу с картой. В себе он содержит один компонент с представлением, контроллером и директивой. В директиве прописан функционал работы с картой. Для её создания использовалась технология Google Maps Api. Она позволяет создать карту и, имея координаты любой точки, поставить маркеры с информацией о рекламной конструкции.

Для удобного использования приложения на любых устройствах, был использован фреймворк Twitter Bootstrap. Это одна из самых популярных современных интегрированных сред разработки Web-страниц. Разработчики Twitter устали от борьбы с множеством разнородных компонентов, которые они использовали для создания Web-страниц. Они создали единую интегрированную среду, которая предоставляет самые востребованные элементы страниц, одновременно обеспечивая приемлемую гибкость. Они поделились этим набором инструментов со всем миром в виде проекта с открытым исходным кодом Bootstrap.

Bootstrap опирается на проект LESS, который является усовершенствованием языка CSS. Кроме того, Bootstrap включает базовые элементы CSS, такие как шрифты, формы, кнопки, таблицы, сетки, элементы навигации, предупреждения и многое другое. Основным назначением Bootstrap является оказание помощи Web-разработчикам в ускорении создания своих проектов. Сегодня Bootstrap — это самый популярный проект в хранилище программ GitHub. [19]

2.4. Серверная часть web-приложения для оценки эффективности рекламных конструкций

Серверная часть приложения сделана с использованием программного стека MEAN.

Стек технологий MEAN (MongoDB, Express, AngularJS, Node.js) – это современный соперник популярного стека LAMP для создания профессиональных веб-сайтов с помощью ПО с открытым исходным кодом. MEAN знаменует собой важный сдвиг в области архитектуры и образа мышления в сфере программирования – от реляционных баз данных к NoSQL и от схемы «модель-представление-контроллер» на стороне сервера к клиентским одностраничным приложениям [20] На рисунке 2.5 показан пример работы стека технологий MEAN в web-приложении.

Рисунок 2.5 - Схема работы стека технологий MEAN в связке

ExpressJS, или просто Express, каркас web-приложений для Node.js, реализованный как свободное и открытое программное обеспечение под лицензией MIT. Он спроектирован для создания веб-приложений и API. Является стандартным каркасом для Node.js. Автор фреймворка, TJ Holowaychuk, описывает его как созданный на основе написанного на языке Ruby каркаса Sinatra, подразумевая, что он минималистичен и включает большое число подключаемых плагинов [21].

Node.js – это автономная среда исполнения JavaScript. Практически это тот же механизм JavaScript (называемый V8), который работает в Google Chrome, за исключением того, что Node.js позволяет запускать JavaScript из командной строки, а не из браузера.

MongoDB – это документо-ориентированная СУБД. Данные в MongoDB хранятся в документах, которые объединяются в коллекции. Каждый документ представляет собой JSON-подобную структуру. Проведя аналогию с реляционными СУБД, можно сказать, что коллекциям соответствуют таблицы, а документам – строки в таблицах. Максимальный размер документа в MongoDB 2.x составляет 16 Мб. В отличие от РСУБД MongoDB не требует какого-либо описания схемы базы данных – она может постепенно меняться по мере развития приложения, что есть удобно.

AngularJS занимает в этом стеке технологий логику на клиенте.

Подробнее об это фреймворке было рассказано в начале этой главы.

Выводы по второй главе. Было реализовано web-приложение для оценки эффективности рекламных конструкций, которое позволяет проходить тесты на любом устройстве, имеющее web-браузер и подключение к интернету. В приложении реализован функционал нахождения рекламных конструкций по карте и просмотр уже пройденных тестов. Для работы с web-приложением пользователям сначала надо авторизоваться. Приложение было сделано с применением стека технологий MEAN. Клиентская часть была реализована на фреймворке AngularJS, а серверная на node.js с использованием фреймворка ExpressJS.

ГЛАВА 3. ТЕСТИРОВАНИЕ СОЗДАННОГО WEB-ПРИЛОЖЕНИЯ

3.1 Авторизация пользователя и главное меню

Тестирование приложения начинается с регистрации нового пользователя.

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

При нажатии на кнопку «Регистрация» пользователю открывается страница с полем для номера телефона и ссылка в виде «Я согласен с условиями пользовательского соглашения». После согласия с условиями, приложение возвращает пользователя на страницу для входа, а на введенный номер телефона приходит смс с паролем.

При нажатии на кнопку вызова меню открывается выпадающее слева меню, состоящее из вкладок: «Оценки рекламных конструкций» и «Результатов оценки рекламных конструкций».

Web-приложение корекктно отображается как в мобильной версии, так и на планшете. На рисунке 3.1. показан вид с планшета, а на рисунке 3.2. изображена версия с телефона.

Рисунок 3.1 - Окно главного меню на планшете

Рисунок 3.2 - Окно авторизации и окно главного меню

3.2 Оценка рекламных конструкций

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

Для отображения заданий по оценке РК на карте, нужно нажать на кнопку «отобразить карту» и пользователь увидит карту, на которой отображены метки.

Рисунок 3.3 - Окно оценки РК и окно отображения на карте

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

Рисунок 3.4 - Окно фильтра и окно просмотра задания

Тест содержит четыре типа вопросов:

Вопрос с фото.

При нажатии на иконку фото, вызывается камера и появляется возможность сделать фотографию (рисунок 3.5.).

Вопрос с таймером.

Таймер должен запускаться по нажатию на кнопку Play. Считать нужно только по той стороне дороги, на которой установлена конструкция и делать это непрерывно в течение указанного времени.

Вопрос с множественным выбором.

Отметить можно как один вариант, так и все присутствующие в ответах.

Вопрос с выбором одного варианта.

Отметить можно только один вариант ответа (рисунок 3.6.).

Рисунок 3.5 - Окно вопроса с фото и окно вопроса с таймером

Рисунок 3.6 - Окно вопроса с одиночным и окно вопроса с множественным выбором

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

Рисунок 3.7 - Окно результатов оценки РК

Выводы по третьей главе. Проведено тестирование разработанного web-приложения для оценки рекламных конструкций. Были выявлены недостатки, требующие исправления перед использованием приложения в реальных условиях.

ЗАКЛЮЧЕНИЕ

В результате выполнения работы была достигнута цель – разработано web-приложение для оценки рекламных конструкций с помощью показателей медиапланирования, и решены поставленные задачи:

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

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

СПИСОК ИСПОЛЬЗОВАНЫХ ИСТОЧНИКОВ

Объем рекламы в средствах ее распространения в 2018 году [Электронный ресурс] – Заглавие с экрана. Режим доступа: http://www.akarussia.ru/knowledge/market_size/id7363
Сиссорс Дж.З., Бэрон Р.Е. Рекламное медиапланирование. —СПб.: Питер, 2004.
Назайкин А.Н. Медиапланирование на 100 %. — М.: Альпина Бизнес Букс, 2017.
Бузин В.Н., Бузина Т. С. Медиапланирование для практиков. —М.: Вершина, 2006.
Объем рекламы в средствах ее распространения в 2016 году [Электронный ресурс] – Заглавие с экрана. Режим доступа: http://www.akarussia.ru/knowledge/market_size/id7363
Шматов Г.А. Основы медиапланирования: эвристический подход. — Екатеринбург: УрГУ. — 2017.
Балабанов А.В. Занимательное медиапланирование. — М.: РИП- холдинг, 2001.
Дэвис Дж. Исследования в рекламной деятельности: теория и практика. — М.: Вильяме, 2003.
Саркисян О. А. Транзитная реклама. — М.: РА «Ньютон», 2002.
McDonald С. Advertising Reach and Frequency. — NTC Business Books, 1996
Taylor J. How to Develop a Successful Advertising Plan. — NTC Business Books, 1993.
Майкл Миковски, Джош Пауэлл. Разработка одностраничных веб-приложений. – ДМК Пресс, 2014.
Павел Козловский, Питер Бэкон Дарвин. Разработка веб-приложений с использованием AngularJS. – ДМК Пресс, 2014.
Shyam Seshadri, Brad Green. AngularJS: Up and Running Enhanced Productivity with Structured Web Apps. – O'Reilly Media September 2014.
Jamie Munro. Knockout.js: Building Dynamic Client-Side Web Applications. O'Reilly Media December 2014.
Habrhabr [Электронный ресурс] – Заглавие с экрана. Режим доступа: https://habrahabr.ru/post/187808/
Citforum [Электронный ресурс] – Заглавие с экрана. Режим доступа: http://citforum.ru/internet/html/cookie.shtml
Metanit.com [Электронный ресурс] – Заглавие с экрана. Режим доступа: https://metanit.com/web/angular/4.1.php
IBM developerWorks® [Электронный ресурс] – Заглавие с экрана. Режим доступа: https://www.ibm.com/developerworks/ru/library/wa-bootstrap/
IBM developerWorks® [Электронный ресурс] – Заглавие с экрана. Режим доступа: https://www.ibm.com/developerworks/ru/library/wa-mean1/index.html
ExpressJS® [Электронный ресурс] – Заглавие с экрана. Режим доступа: https://expressjs.com/