К таким сервисам можно отнести Mozenda, Octoparse, Import.io, dexio, Portia и Crawlera. Они просты в использовании, однако не предназначены для работы с исходным кодом.


Чтобы посмотреть этот PDF файл с форматированием и разметкой, скачайте его и откройте на своем компьютере.


Министерство образования и науки Российской Федерации

Санкт
-
Петербургский политехнический университет Петра Великого

Институт компьютерных наук и технологий

Кафедра «Компьютерные интеллектуальные технологии»



Работа допущена к защите

Заведующий кафедрой
КИТ ИКНТ

_____________ Щукин А.В.

«____» ____________ 2018

г.


ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА МАГИСТРА


ИНСТРУМЕНТ

ПОВТОРНОГО ИСПОЛЬЗОВАНИЯ КОМПОНЕНТОВ
ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА ВЕБ
-
СТРАНИЦ С
ПРИМЕНЕНИЕМ ТЕХНОЛОГИИ АВТОМАТИЗИРОВАННОГО
ДИНАМИЧЕСКОГО
АНАЛИЗА
КЛИЕНТСКОГО
КОДА


по направлению: 09.04.03 Прикладная информатика

программа подготовки магистров «Технологии веб
-
разработки»




Выполнил

студент гр. в33506/71






Д.Э.

Журавлева


Руководитель

доцент, к.т.н.








А.В.

Иванищев



Санкт
-
Петербург

2018




Р
ЕФЕРАТ


На

50

с.,
1
4

рис., 1 табл.


КЛИЕНТСКИЙ КОД,
HTML
,
CSS
,
JAVASCRIPT
,
ПАРСИНГ,
ИЗ
В
ЛЕЧЕНИЕ КОДА,
АВТОМАТИЗАЦИЯ,
ИНТЕРАКТИВНЫЕ
ВЕБ
-
ПРИЛОЖЕНИЯ
,
ПОВТОРНОЕ
ИСПОЛЬЗОВАНИЕ КОДА
,
ДИНАМИЧЕСКИЙ АНАЛИЗ


В
данной работе рассматривается проблема
повторного

использования
кода
.
Изучены
современные

инструмент
альные средства

работы с исходным кодом
интерактивных веб
-
страниц, их преимущества

и недостатки
.

В результате была

предложена

технология автоматизиров
анного динамического анализа клиентского кода
.
На еѐ ос
нове создан
о

Chrome
-
расширение
Code

F
inder

(прототип)
, призванное упростить
разработку клиентской части веб
-
приложений.

В дальнейшем будет проведена доработка
функционала и тестирование
всех возможностей инструмента
.


TH
E

ABSTRACT

50

pages, 14 figures, 1 t
able

CLIENT
-
SIDECODE
, HTML, CSS, JAVASCRIPT,
PARSING
,
CODE EXTRACTION,
AUTOMATIZATION
,
INTERACTIVE WEB
-
APPLICATIONS
,
CODEREUSE
, DYNAMIC
ANALYSIS


T
his paper

is dedicated to

the problem of code reuse. We studied
modern
tools with the
source code of interact
ive web pages, their advantages and disadvantages. As a result, a new
technology for automated
dynamic analysis of client
-
side code
was proposed.
Th
e technology
is realized in Code
F
inder
Chrome
-
-
version), designed to simplify the
development
of
web applicaPions’

client
-
side. In the future,
all

functio
ns of the tool

will be
implemented

and tested.

4





СОДЕРЖАНИЕ

ВВЕДЕНИЕ

................................
................................
................................
....................

6

1.1

Клиент
-
серверная архитектура

................................
................................
..........

8

1.2

Состав веб
-
документов

................................
................................
.......................

8

1.3

Структура веб
-

документов

................................
................................
................

9

1.4

Схема отрисовки страницы браузером

................................
............................
10

1.5

Классификация веб
-
документов

................................
................................
......
11

1.6

Проблема анализа динамических веб
-
страниц

................................
...............
13

ГЛАВА 2. АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ

................................
.......................
14

2.1 Составление требований к разрабатываемому инструменту

...........................
15

2.2 Получение данных веб
-
документов

................................
................................
....
16

2.3Обзор аналогов

................................
................................
................................
.......
25

2.3.1 Инструменты разработчика

................................
................................
...........
25

2.3.2
SnappySnippet

................................
................................
................................
..
26

2.3.4
CSSSteal
................................
................................
................................
............
29

2.3.5 HtmlClipper

................................
................................
................................
......
30

ГЛАВА 3.СОЗДАНИЕТЕХНОЛОГИИ ПОВТОРНОГО ИСПОЛЬЗОВАНИЯ
КОДА КЛИЕНТСКОЙ ЧАСТИ ВЕБ
-
СТРАНИЦ

................................
.......................
3
1

3.1

Описание технологии

................................
................................
........................
31

3.2

Технологии пол
учения данных

................................
................................
........
32

3.3

Анализ зависимостей

................................
................................
........................
33

3.4

Экспорт кода

................................
................................
................................
......
35

3.5

Приме
нение технологии для создания инструмента

................................
.....
39

3.5.1

Создание
Chrome
-
расширения

................................
................................
......
39

3.5.2 Применение алгоритма определения зависимостей
................................
.......
41

3.5.3 Экспорт кода

................................
................................
................................
.......
44

5





ЗАКЛЮЧЕНИЕ

................................
................................
................................
..............
46

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

................................
....................
48





6





В
ВЕДЕНИЕ


Объект исследования



веб
-
приложения
.

Предмет исследования

инструмент
ы и технологии

работы с

клиентской
част
ью

веб
-
приложений
.

Цель работы состоит
в
разработке технологии
для повторного
использования компонен
тов пользовательского интерфейса веб
-
страниц
.

Задачи
:

1.

Рассмотрение теоретических основ

построения современных веб
-
приложений
;

2.

Поиск и изучение

существующих
аналогов и
инструменто
в
;

3.

Разработка технологии
п
о
в
т
о
р
н
о
г
о

и
с
п
о
л
ь
з
о
в
а
н
и
я

к
о
м
п
о
н
е
н
т
о
в

и
н
т
е
р
ф
е
й
с
а
;

4.

Практическая разработка инструмента
на

основе предложенной
технологии
.

Актуальность

данного исследования

обусловлена:

1.

потребностью профессионального сообщества в
инструменте,
облегчающем повторное и
спользование

элементов интерфейса

современных веб
-
приложений
;

2.

отсутствием готовых
технологически
х

решений создания такого
инструмента
;

3.

стремительным развитием веб
-
технологий, требующим обновления
инструментария.

7





О
спросе

сообщества разработчиков
на

подобн
ый

инструмент свидетельствует
рейтинг (310) и число просмотров (147 297) вопроса, заданного на крупнейшем
профессиональном форуме
stackoverflow
1
.

П
рактическая значимост
ь
исследования заключается
в том, что
р
азработанная

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


Новизна исследования

заключается

в разработке уникальной технологии
,
позволяющей

автоматизировать
разработку

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

Методологическая база исследования
включает в себя
общенаучные методы,
в частности
эмпирические (сравнение, описание
)

и

общелогические (анализ).


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




1
Профессиональный форум веб
-
разработчиков
[Электронный ресурс].


(
https://stackoverflow.com/questions/4911338/tools
-
to
-
selectively
-
copy
-
htmlcssjs
-
from
-
existing
-
sites
).
Проверено

10.05.2017
.


8





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


1.1

Клиент
-
серверная

архитектура


Все веб
-
сервисы состоят из двух частей: клиентской и серверной. В терминах
сайтостроения клиенты


это программы или скрипты, которые отправляют
запросы на сервер [
1
]. Примерами клиентских приложений могут служить
браузеры или пауки (
crawlers
) поисковых систем (
Google
, ―Яндекс‖). Серверные
приложения


это программы, которые обрабатывают запросы клиента и
возвращают необходимую для отрисовки страниц информацию (
HTML
,
CSS
,
JavaScript
-
код, картинки, шрифты, аудио и видео). В качестве примера мож
но
привести сервер
Apache
.

Клиентская часть представляет собой графиче
c
кий пользовательский
интерфейс (graphical

user

interface,
GUI
)
-

совокупность элементов управления


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


1.2

Состав веб
-
документов


Перед тем, как перейти непосредственно к обзору технологий, стоит
определиться с терминологией. В данной работе
под

веб
-
страницами

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

для удобства будем называть совокупность разметки (
HTML
),
стилей (
CSS
), скриптов (
JavaScript
) и различных ресурсов сайта (изображения,
ауд
ио). Причем в данном случае имеется в виду не исходный код, исполняемый на
9





сервере (
sourcecode
), а код, генерируемый на его основе браузером
(
generatedsourcecode
).

Библиотеками кода будем называть готовые блоки кода, предназначенные
для многократно
го

испо
льзовани
я

в
разработке
веб
-
приложени
й
. В
нашем случае
это совокупность файлов
HTML
,
CSS
,
JavaScript
,
которые соответствуют
определенному элементу страницы, отображаемой браузером.


1.3

Структура

веб
-

документов



(HyperTextMarkupLanguage


HTML)
-


это гиперте
кстовый
язык разметки
,
который описывает структуру,
взаимное расположение объектов документа на
странице

и
семантику содержимого документа.
Все
HTML
-
страницы состоят из
тегов
. Простейшая структура документа
показана на рис
.1.
1
.



Рис.1.1
.

Пример структур
ы
HTML
-
страницы


10





Каскадные таблицы стилей (
CascadeStyleSheets
-

CSS
) представляют собой
совокупность описаний различных параметров, используемых для оформления как
докумен
та в целом, так и его отдельных компонентов.
Для каждого элемента,
задаваемого опреде
ленным тегом HTMI, можно определить свой стиль
отображения в окне браузера. Технология CSS позволяет задать одну таблицу
стилей и использовать ее для оформления всех документов, расположенных на
сервере.
Тем не менее, стили могут быть прописаны непосредств
енно в
самом
HTML
.

Язык программирования
JavaScript

разработан фирмой NePscape для
создания интерактивных HTMI
-
документов. Он позволяет изменять
DOM

после
того,

как браузер загрузил страницу, таким образом изменяя внешний вид сайта.

DOM


это аббревиатура
определения модели объектного представления HTMI
документа


DocumentObjectModel

(Объектная модель документа). Эта модель
является интерфейсом, позволяющим получить доступ к HTMI элементам извне
таким средствам как JavaScripP.


1.4

Схема
отрисовки

страницы бра
узером


После получения HTMI
-
кода от сервера браузер
разбирает

документ и
преобразует
его
в понятное для себя представление. Оно универсально для всех
браузеров и определяется

спецификацией

HTML5

DOM

[
2
2
]
. Затем браузер
выполняет ряд действий, по завершени
и которых на экране отображается веб
-
страница. В общих чертах последовательность действий браузера такова
[
17
]
:

1.

Браузер считывает HTMI
-
разметку сверху вниз и строит DOM
-
дерево
(DocumentObjectModel).

2.

На основании полученного CSS строит CSSOM
-
дерево (CSS Obj
ectModel).

11





3.

Применительно к построенным DOM и CSSOM выполняет внешние и
внутренние скрипты.

4.

На основе DOM и CSSOM формирует дерево рендеринга.

5.

На основании дерева рендеринга генерирует макет страницы с указанием
размеров и координат всех элементов.

6.

Отрисовы
вает (рендерит) страницу на экране.


Схематично это
т процесс отображен на рис.1.
2
:




Рис.1.2
.
Основной процесс движка рендеринга.


1.5

Классификация веб
-
документов


Все
веб
-
страницы

можно
классифицировать по

дв
ум категория
м
[
16
]
. Первая
категория


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





исходном виде передается пользователю. Вторая категория


интерактивные
документы
, которые могут меняются в результате

взаимодействи
я с
пользователем. Например,
кнопка появ
ляется

при наведении на неѐ курсора (это
результат
применения
CSS
3
-
свойства:
hover
); при заполнении формы отобра
жается

ошибка

(
JavaScript

выполнил проверку данных и добавил текст ошибки); в
таблице
появились новые зна
чения(технология
Ajax
-
AsynchronousJavaScriptand
XML

осуществила
обмен

информацией с сервером без перезагрузки страницы
)
.

В третью подкатегорию можно включить документы, совмещающие в себе
два вышеперечисленных подхода. Например, это могут быть документы,

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


рис.1.
3
:



Рис.1.3
.
Классификация Web
-
документов

13





1.6

Проблема анализа динамических веб
-
страниц


Обнаружени
е

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


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

Например, даже извлечение необходимых стилей
CSS

является
не
простой
задачей
для разработчика, поскольку стили
CSS

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

псевдо
-
классов). Необходимые ресурсы, такие
как изображения, могут быть включены либо как узлы
HTML
, либо с помощью
стилей
CSS
, либо динами
чески подгружены кодом
JavaScript
, и при их передаче
разработчик должен найти все используемые части, скопировать их и поменять
ссылки (например, если ссылки на сторонние ресурсы прописаны как
относительные).







14





ГЛАВА 2. АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ


В на
стоящее время существует большое количество разнообразных методик
и инструментов автоматизированного извлечения информации из содержимого
сайтов [
2
], [
3
].

Стоит отметить масштабную работу [1
2
], посвященную различным аспектам
поиска исходного кода программ

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

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

Концепции и технологии извлечения содержательной части
HTML
-
кода
развиты в достаточной степени (подтверждение тому



обширная база готовых
библиотек и сервисов), равно как выбор алгоритмов анализа
HTML
-
кода[
1
].
П
ринципы
динамического

анализа всех трех компонентов клиентского кода


HTML
,
CSS

и
Java
S
cript
-
кода
также
разработаны
в достаточной мере
[
15
]. Так,
например, ст
оит отметить кандидатскую диссертацию [
6
], посвященную созданию
методов автоматизации повторного использования кода клиентской части веб
-
приложений
. Технология динамического анализа интерактивных веб
-
страниц
всесторонне была рассмотрена в друго
м исследован
ии
[5]
.

С другой стороны,
нами
не найдено
публикаций
, которые бы
подбирали и
классифицировали

современные
инструменты

для других этапов
автоматизированной обработки веб
-
страниц, в частности, получения

доступа к
коду и организаци
и

его хранения и использован
ия
.


15





2.1
Составление требований к
разрабатываемому инструменту


Одной из задач

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

Такой
инструмент

позволит расширить функционал браузерных
инструментов
разработчика: в полу
-
автоматизированном режиме и
звлекать
структур
у

(HTML),

внешн
ий

вид (CSS) и поведени
е

(JavaScripP) произвольных
графических элементов
сайтов
с возможностью их редактирования на лету и
сохранения для повторного использования.

Сформулируем требования к разрабатываемому
инструменту
:

1.

Обрабатывать как статические,
так и динамические веб
-
страницы;

2.

Экспортировать весь клиентский код
-

HTML
,
CSS
,
Javacript



во всех
вариантах его присутствия на веб
-
странице;

3.

Быть автоматизированными


пользователю достаточно ввести
URL

веб
-
ресурса и указать нужный элемент, после чего п
роцесс анализа и
обработки выполнится автоматически;

4.

Быть универсальным


не зависеть от структуры и особенностей
конкретного сайта;

5.

Быть интерактивными


реагировать на перемещения курсора, выделения
элементов;

6.

Предоставлять возможность редактировать полу
ченный код и на лету
смотреть результат его выполнения;

7.

Быть эффективным


это подразумевает минимальное число сбоев и
валидный код на выходе;

16





8.

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


2.2
Получение данных веб
-
документов


2.2.1
Виды

автоматизированного
получения данных


Веб
-
скрейпинг



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

Извлеченные с помощью веб
-
скрейпинга данные могут исполь
зоваться для
выполнения следующих задач:

-

сравнения цен;

-

загрузки каталогов интернет
-
магазинов,

-

мониторинга данных о погоде;

-

извлечения экономических, статистических, демографических и других типов
данных.

Парсинг

(с лат. pars


часть, части речи)


это процесс анализа строки
входных символов в компьютерных языках, в соответствии с правилами
формальной грамматики [5]. Другими словами, парсинг документа означает
его

трансляцию

в определенную организованную структуру.

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





обработки. Например, при парсинге

HTML
-
страницы на выходе получается
«дерево с
интаксического анализа» или «синтаксическое дерево»
-

DOM
.



2.2.2
Получение данных и авторские права


Легитимность парсинга является сложным вопросом из
-
за авторских прав и
закона о защите интеллектуальной собственности.

Исходный код распространяется по
одному из двух видов лицензий:
открытое программное обеспечение и несвободное программное обеспечение (или
проприетарное)[7]. В целом, программное обеспечение является

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

проприетарным, если исходный код
держится в секрете, или находится в частной собственности и доступ к нему
ограничен.

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

сайта [
4
]. Также следует изучить пользовательское соглашение сайта, где может
быть явно обозначен запрет на любые автоматизированные манипуляции с
сайтом. В таком случае следует отменить работу с ресурсом и уведомить
пользов
ателя о невозможности анализа данного сайта.

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

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

и
18





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

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

В данном вопросе преимущество получает сервис, выполненный на основе
расширения

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


2.2.3
Технологии
автоматизированного
получения данных


Используемые сообществом инструменты для извлеч
ения данных с сайта
можно объединить в 4 группы: браузерные решения, библиотеки для популярных
языков программирования, веб
-
сервисы и программные десктопные решения.

Браузерные расширения



набор
HTML
,
CSS
, JavaScript
-
кода, который
встраивается в браузер и

его расширяет функциональные возможности.
Расширения объединяют все свои файлы в один файл, который пользователь
загружает и устанавливает. Это объединение означает, что, в отличие от обычных
веб
-
приложений, расширения не должны зависеть от содержимого ве
б
-
страниц. В
зависимости от браузера, термин может отличаться от условленных обозначений,
к примеру, plug
-
in (плагин), add
-
on (дополнение) или exPension (расширение).
Принцип работы основан на использовании
API

(програмного интерфейса)
конкретного типа бра
узера.

Headless
-
браузеры

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





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

К таким инструментам можно отнести
PhantomJS [
24
], SlimerJS [
26
],
Selenium
[
25
].

PhantomJS


это сборка движка W
ebKiP без графического интерфейса,
позволяющая в режиме консоли загружать веб
-
страницу, выполнять JavaScripP,
полноценно работать с DOM, Canvas, CSS, JSON и SVG. WebKiP лежит в
основе таких популярных браузеров как Chrome и Safari
.

SlimerJS



это скриптовы
й браузер для разработчика имеющий в своем
арсенале движок эквивалентный последнему Firefox(Gecko), который лежит в
основе ещѐ нескольких браузеров.

Selenium


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

Selenium 2

(или Webdriver)


последнее пополнение в пакете
инструментов Selenium[
29
]. По сравнению с
Selenium RC Webdriver использует
совершенно иной способ взаимодействия с браузерами. Он напрямую вызывает
команды браузера, используя родной для каждого конкретного браузера API. Как
2
0





совершаются эти вызовы и какие функции они выполняют зависит от конкретно
го
браузера. Webdriver использует способ взаимодействия с браузером более близкий
к действиям реального пользователя.

Для работы с Webdriver необходимо три основных программных
компонента:

-

Браузер
, работу которого пользователь хочет автоматизировать. Эт
о реальный
браузер определенной версии, установленный на определенной ОС.


-

Драйвер браузера (
driver
, «движок»)
-

веб
-
сервер, который запускает браузер и
отправляет ему команды, а также закрывает его. У каждого браузера свой
driver. Связано это с тем, что

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

официальном

сайте

проекта Selenium.

-

Скрипт/тест
, который содержит набор команд на определѐнном языке
прогр
аммирования для драйвера браузера. Такие скрипты используют
SeleniumWebdriverbindings (готовые библиотеки), которые доступны
пользователям на различных языках.


Сочетание
Selenium

и
PhantomJS

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

К недостаткам можно отнести необходимость наличия на сервере движка
испытуемого браузе
ра. Учитывая браузерное разнообразие и тот факт, что
страница может выглядеть по
-
разному не только в разных браузерах, но и в
разных версиях разных браузеров, необходимо будет иметь на сервере несколько
движков, а также дополнительно считывать из заголовко
в параметры браузера,
21





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

1.

Библиотеки

В эту группу входят многочисленные библиотеки для различных языков
программирования:

-

jSoup

и

CSS Parser
для

Java
;

-

cURL, S
impleHTMLDom, Sabberworm


некоторые

фреймворки

(
программные

каркасы
)
имеют

встроенные

модули

CssSe
l
ector

и

DomCrawler


Symfony2
для

PHP
и

ряд

других
;

-

библиотеки

lxml, HTML Parser
и

BeautifulSoup

для

Python
;

-

модули

(gems)
на

языке

Ruby Mechanize
и

Nok
ogiri;

-

модули

для

Node.JS Cheerio,
simplecrawler
,
ParserLib.

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

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

Использование данных технологий может потребовать дополнительных
усилий по обходу антибот
-
системы (
captcha
). В целях избежания блокировки
сервиса необходимо также предусмотреть средства эмуляции поведения
пользователя (
headers
,
cookies
, аутентификаци
ю, паузы в запросах, прокси и
подмену
IP
).

22





Сравнение производительности и точности работы данных библиотек не
производилось ввиду их многообразия и отсутствия универсального инструмента
тестирования.

2.

Веб
-
сервисы

Веб
-
сервисы представляют собой SaaS решени
я (sofPwareas a service


облачное программное обеспечение, которое оплачивается как услуга).

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


ими удобно пользоваться для сбора информации о товарах
интернет
-
магазинов
c

возможностью выгрузки в структурированном виде. К
та
ким сервисам можно отнести Mozenda, OcPoparse, ImporP.io,
dexio
,
Portia

и
Crawlera
. Они просты в использовании, однако не предназначены для работы с
исходным кодом.

3.

Десктопные приложения.

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

Примеры настоль
ных приложений: IRoboPSofP,
ParseHub
,
Visualscraper.Agent.

Основная проблема автоматических парсеров


они перестают работать
при изменении логики работы сайта.


23





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

Далее обратим выделим достоинства и недостатк
и каждого из видов
инструментов (Таблица).

Таблица

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


Браузерные
расширения

Headlesss
-
браузеры

Библиотеки

Веб
-
сервисы


Десктопные
приложения

Получение и
разбор
HTML

+

+

+

-

-

Получение и
разбор
CSS

+

+

+

-

-

Получение и
разбор
Javacript

+

+

-

-

-

Работа с
динамическими
ст
раницами

+

+

-

+

-

Интерактивность

+

-

-

+

+

Защита от
блокирования

+

+

+/
-

+

+

Доступные
платформы

Один
браузер

Все
браузеры

Все
браузеры

Все
браузеры

О
перационна
я система



Все перечисленные технологии относятся к технологиям парсинга веб
-
документов.


24





Все библиотеки относятся к выполняемым на сервере, а это значит, что они
подходят только для работы со статичными веб
-
ресурсами.
В целом можно
заключить, что использование библиотек для получения и анализа клиентского
кода сопряженным с множеством ограни
чений. А создание универсального
обработчика всех трех компонентов кода (
HTML
,
CSS
,
JavaScript
) представляется
невозможным.

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


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

И только браузерное расширение, по
нашему мнению, позволит выполнить
все требования, которые мы поставили нашему веб
-
сервису в качестве задания на
разработку.

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


25





2.
3
Обзор аналог
ов


2.
3
.1
Инструменты разработчика


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

ChromeDeveloperTool



набор функций GoogleChrome для отладки веб
-
приложений. Построен на основе сервиса We
bInspector


инструмента, созданного
для WebKiP
-

браузеров. FirefoxDevTools


его аналог в MozillaFirefox (которое
взяло на себя функционал больше не поддерживаемого расширения Firebug,
WebInspector



в браузерах
AppleSafari
,
Dragonfly



утилита браузеров

Opera
, в
браузерах I

E
xplorer

11+ данный функционал также встроен по умолчанию.
Все эти средства работают по одному принципу


на основе
API

браузера
(applicationprogramminginterface)
-

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

11+ достаточно:

1.

Открыть инструмент разработчика на нужной веб
-
странице;

2.

Вызвать контекстное меню, щелкнув правой кнопкой мыши на нужном
элементе;

3.

Выбрать пункт

«Скопировать э
лемент со стилями»;

4.

Вручн
ую вставить их в любой редактор.


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





быть несколько десятков тысяч строк кода, к тому же минифицированных


в
таком многообразии нужный фрагмент вручную не найти.


2.
3
.2
SnappySnippet


[
27
]



расшире
ние для браузера
Chrome
, котор
ое

добавляет

функционал
ьности

инструмент
ов

разработчик
а

(рис
.2.1)
.

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

выбранного узла
DOM

и одним кликом
экспортировать выделенный код в
CodePen
,
jsFiddle

и
JSBin
. По состоянию на май
2017 расширение было установлено более 54

000 раз, что подтверждает его
востребованность.



Рис.2.1
.Интерфейс
Chrome
-
расширения SnappySnippeP

27





Дополнительные функции

и возможнос
ти, указанные разработчиком
:

1.

форматирует и
очищает
HTML
;

2.

минимизирует
CSS
, объединяя правила и удаляя значения браузера по
умолчанию
;

3.

поддерживает работу с псевдоэлементами

(:
before

и :
after
).

Среди недостатков
расширения пользователи
указывают
2
:

1.

отсутс
твие возможности сохранения стилей в файл
;

2.

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

Нами было проведено
тестирования функционала



с помощью

мы попытались извлечь элемент <
header
>сайта
https://daneden.github.io/animate.css/

В результате были обнаружены следующие
проблемы:

1.

ошибка выбора исследуемого элемента


не удалось получить доступ к
выбору элемента страницы, в результате чего подгрузил
и
сь структура и
стили всего докуме
нта
;

2.

ошибка экспорта кода в
CodePen

и
JSBi
n

-
проис
х
одит перенапра
в
ление
на страницы этих прилож
ений, но данные не подгружаются.

В целом
,

расширение работает нестабильно, не реализует в полной мере
обещанный функционал. Более того, не предусмотрена возможно
сть
работы
с
JavaScript
-
кодом
.





2

Отзывы на
Chrome
-
расширение
SnappySnippet

[Электронный ресурс].

(https://chrome.google.com/
webstore/detail/snappysnippet/blfngdefapoapkcdibbdkigpeaffgcil/reviews).
Проверено
03.10.17

28






2.
3
.3
Firecrow


В другой работе [
9
] авторы знакомят нас с
Firecrow

[
14
]


инструментом для
исследования и отладки
HTML
,
CSS
,
JavaScript
-
кода из консоли браузера
MozillaFirefox

(
рис.2.2
)
.



Рис.2.2
. Интерфейс
Firefox
-
расшир
ения Firecrow


Представляет собой дополнение

к
плагин
у

Firebugdebugger
,
функциональность которого он расширяет
.

Исходный код проекта находится в
открытом доступе на
github

[
21
].

Firebugdebugger
[
20
]

расширение браузера
MozillaFirefox
, которое
с
2016года пе
рестало существовать как отдельное расширение и было включено в
состав FirefoxDevTools.

Предлагается использовать
Firecrow

следующим образом:
в консоли
браузера
MozillaFirefox

разработчик выбирает
HTML

узел, который представляет
интересующий его элемент ин
терфейса и, если он анимированный,
взаимодействует с ним
, при этом активировав в консоли запись отладки
JavaScript
.
29





После этого автоматически анализируется поведение выбранного элемента, в
результате которого обнаруживаются и извлекаются задействованные ре
сурсы
(
HTML
,
CSS
,
JavaScript
, изображения

и другие
). Таким образом можно одним
нажатием кнопки скопировать со страницы, например, слайдер, как это было
показано в демонстрационном видео[
13
].

Данный алгоритм
строится

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

выделить только часть
отработанного кода, игнорируя лишнее.

Однако, данный проект имеет определенные ограничения:

1.

во
-
первых,
Firecrow

является расширением к бол
ьше не
поддерживаемому плагину
Firebug
;

2.

во
-
вторых, проект можно считать устаревшим, потому что сама
разработка не ведется более 3 лет;

3.

в
-
третьих,
Firecrow

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

код
в онлайн
-
песочницы
(
CodePen
,
JSBin
,
JSFiddle
)
и редактировать его в браузере.

Теоретические основы

и алгоритмы, лежащие в основе
инструмента
Firecrow
,
были изложены авторами в цело
й серии работ [
12,
29
,
11
,
1
0
,
8
]. Более
подробно о них будет рассказано в следующей главе.


2.
3
.4
CSSSteal


CSSSteal
[
19
]
-

еще один плагин для
Chrome

-

менее популярное и браузерное
расширение для экспорта
CSS

стилей.

Последнее обновление датируется 2015
30





годом
. Однако воспользоватьс
я

плагином в 2018 году авторам работы не удалось

из
-
за ошибки сервера 404
.


2.
3
.5
HtmlClipper


HtmlClipper

[
2
3
]
-

3
(закладка)
-

J
ava
S
cript
-
код, который
сохраняется как закладка браузера. Запускается при нажатии на закл
адку, после
чего скрипт начинает выполнять на текущей веб
-
странице

определенные задачи.
Доступно в браузерах
Firefox

и
GoogleChrome
.
Н
е поддерживается с 2011 года.


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

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







3
Код плагина, в отличие от кода закладки, встраивается непосредственно в браузер, и использует гораздо больше
возможностей API браузера. Например, плагин может рабо
тать в фоновом режиме при каждой загрузке веб
-
страницы, в то время как для запуска закладки необходимо, чтобы пользователь запустил скрипт нажатием на неё.

31





Г
ЛАВА
3
.
С
ОЗДАНИЕТЕХНОЛОГИИ
ПОВТОРНОГО
ИСПОЛЬЗОВАНИЯ КОДА КЛИЕНТСКОЙ ЧАСТИ
ВЕБ
-
СТРАНИЦ


3.1

Описание технологии


На основании
обзора
аналогов и требований, составленных для
прило
ж
ения, выделим этапы технологии
повторного использования кода на
основе
автоматизиро
ванно
го динамического анализа

клиентс
кой части

современных приложений
(рис.3
.1
)
:



Рис.
3
.
1
.
Э
тапы технологии
повторного использования кода

клиентской части веб
-
страниц


1.

Получение данных


на этом этапе инструмент долж
е
н
:

32





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

причем
необходимо предусмотреть сбор данных по всем источникам
;
к примеру,
стилевые описания

(
CSS
)

могут находиться как в

теле документа (
HTML
),
так в одном или нескольких подключаемых файлах
,
а также быть частью
сторонних библиотек т
ипа
Bootstrap
;
аналогично следует искать и скрипты
;

б)
получить от пользователя вводную информацию о том, какой
элемент интерфейса необходимо извлечь;

2.

Динамический а
нализ зависимостей между компонентами кода


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

графического интерфейса
;

3.

Экспорт извлеченно
й библиотеки

кода в онлайн
-
редактор для просмотра

результата
,
а
также

сохранение в файл для дальнейшего использования.


Рассмотрим подробнее
, какие современные веб
-
технологии и инструменты
для реализации каждого из этапов существуют на рынке
.


3.2

Технологии получения данных


В результате сравнения описанных выше технологий предлагается
использовать технологии на стороне клиент
а
-

браузерно
го

расширени
я
. В данном
случае
плагина
для браузера
Chrome
.

На сегодняшний день существует пять основных браузеров:
InPernePExplorer, Firefox, Safari, Chrome и Opera. Согласно статистике
использования браузеров на сайте SPaPCounPer, на май 201
7 года самым
популярным браузером является
GoogleChrome



он установлен на 54,14 %
33





устройств. В пользу этого выбора можно привести еще
3

аргумента: открытый
исходный код
,

популярность среди целевой аудитории


веб разработчиков
, а
также подробная документа
ция
.

Использование
API

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


3.3

Анализ зависимостей


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

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

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

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

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

использовани
е которого не
предусматривается
.

34





Д
ля нахождения кода

элемента страницы недостаточно пройтись по
ссылкам документа и собрать воедино весь клиентский код приложения.
Необходимо установить связь между компонентами
HTML
,
CSS
и
JavaScript
.

В одной из работ [
5
] было показано, как с помощью отслеживания
выполнения
пользовательского сценария можно обнаружить код, отвечающий за
определенные действия, отследить зависимости между различными частями
приложения и как в итоге извлечь только задействованный код. Для этого
используется динамический анализ пользовательского
взаимодействия с
интерфейсом. Последовательность действий при этом подходе такова:

1.

приложение открывает анализируемую страницу в браузере;

2.

ищет в DOM
-
модели элементы, которые потенциально могут
измениться (в результате отработки Ajax
-
запроса или вып
олнения JavaScripP кода);

3.

запускает отслеживание состояния этих элементов путем добавления
event
-
listeners;

4.

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

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

Поэтому наш выбор пал на другой алгоритм.

В ранее упоминаемой статье
[
9
]

была представлена методика
комплексного
извлечения клиентского кода веб
-
приложения. В еѐ основе лежит предложенный
авторами алгоритм
обнаружения

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

Чтобы иметь
35





возм
ожность извлекать код
,
который реализует определенное поведение элемента,

авторами введено понятие
граф
а

зависимостей
,

опис
ана структура его построения
и показано, как с его помощью
найти и извлечь код, ответственный за
определенное поведение

элемента

веб
-
страницы
.

Данная методика подробно
разобрана

в
указанной работе, поэтому
считаем
лишним изложение еѐ
в данном исследовании
.


3.4

Экспорт кода


В качестве редактора и хранилища кода нами был выбран сервис
Codepen
[1
7
]
, который объединяет черты

редактора кода с ж
ивым превью и
социальной сети
, а также предоставляет
API


программный интерфейс


возможность автоматически принимать данные из других приложений.

Codepen


это онлайн
-
платформа

редактирования
кода на HTMI, CSS


препроцессорах)

и JavaScripP с просмотром
готового результата в браузере
.

Г
отовые сниппеты (фрагменты) кода можно
сохран
ять
в коллекции

(рис.
3
.
2
)
,
помечать тегами и осуществлять поиск
как по коду, так и по названию или
описанию
.

36






Рис.
3
.
2
. Коллекция фрагментов
-
кода Codepen


Полученн
ый

код можно ви
доизменять при необходимости
, при этом адрес
ссылки останется прежним
. Окно браузера делится на несколько рабочих
областей, в которых отображается результат,
а также код на HTMI и CSS
(рис.
3
.
3
).

Предусмотрена возможность поделиться кодом в социальных сетях
,
скачать полный архив и получить прямую ссылку на код HTMI, CSS или Iess.

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

37






Рис
3
.
3
. Графический интерфейс Codepen


Еще одним преимуще
c
твом

Code
pen

является широкий инструментарий
настройки отображения кода
. Дополнительные опции настройки панелей:

1.

HTML

препроцессоры:

-

Haml
;

-

Markdown
;

-
Slim
;

-
Pug
.

2.

CSS
:

-

Препроцессоры

CSS


LESS, SCSS, Sass, Stylus, PostCss
;

-

Кроссбраузерность

Normalize, Reset
;

-

Вендорные

префиксы

Autoprefixer, Prefixfree
;

-

Подгрузка

стилей

по

URL
;

-

Библиотеки

Bootstrap 4, Bootstrap 3,

Foundation, Animate css, Materialize,
Bulma

+

возможность

добавить

свои
.

3.

Java
S
cript
:

-

Препроцессоры
JavaScript


CoffeeScript, LiveScript, Typ
eScript, Babel
;

-

Загрузка
скриптов в виде
модулей

38





-

Подгрузка

скриптов

по
URL
;

-

Библиотеки
/
Фреймворки
:
Angular
,
Backbone
,
Bootstrap

3,
Bootstrap

4,
D
3,
Ember
,
Foundation
,
GreenSockTweenMax
,
Handlebars
,
jQuery
,
jQueryUI
,
Lodash
,
Modernizr
,
Polymer
,
React
,

ReactDOM
,
Snap
.
svg
,
Three
.
js
,
Underscore
,
Vue
,
Zepto
,
ZingChart
.



39





3.5

Пр
именение технологии для создания инструмента



3.5.1

Создание
Chrome
-
расширения


Расширение для браузера
Chrome

состоит из тех же файлов, что и обычный
веб
-
документ


HTML
,
CSS
,
Java
S
cript
, а

также файлов ресурсов (изображения,
шрифты) и сторонних библиотек

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

Обязательными являются три п
оля:

1.

"
name
"

-
н
азвание расширения
,

2.

"
version
"

-

в
ерсия расширения
,

3.

"manifest_version"


версия стандарта описания манифеста (начиная с
Chrome 18 указывать новую спецификацию
-

2).

В этом же файле дополнительно
декларируются
:

1.

description
-

короткое описание

приложения
;

2.

permissions
-

разрешения, то есть доступ к функциям браузера, например,
на работу с вкладками;

3.

background


фоновая

невидимая

страница
, призванная объединить все
скрипты расширения
;

4.

icons
-

путь до иконок
;

5.

целый ряд других
опций.

Выгрузить рас
ширение можно двумя вариантами
-

в распакованном или
упакованном виде. К первому
варианту

прибегают на этапе отладки приложения,
когда ведется доработка расширения и необходимо быстро
и часто обновлять код
40





расширения. Второй вариант используется для публик
ации готового расширения,
которое архивируется в архив .crx и загружается в интернет
-
магазин
Chrome
.

Для обоих случаев выгрузка осуществляется следующим образом: в
настройках браузера
перейти в раздел
«Инструменты > Расширения»
,

включить
режим разработчика

и указать путь до корневой папки, содержащей файл
manifest.json.

В случае успешной загрузки приложение отобразит
с
я
на странице
подключения/отключения расширений
браузера (
рис.3.
4
).



Рис.3.
4
.
CodeFinder

в списке расширений
Chrome


Более
подробную информа
цию можно найти в о
фициально
м

пошагово
м

руководств
е

по созданию
Chrome
-
расширений
, которое

доступно на английском

языке
[
28
]
.

CodeFinder разработан на основе следующего стека технологий,
формирующих внешний вид и пользовательский интерфейс сервиса:

1.

Bootstrap



один из самых популярных фреймворков (набора шаблонов
HTMI, CSS, and JS) для создания клиентской части веб
-
приложений.

41





2.

jQuery
-

библиотека JavaScripP, фокусирующаяся на взаимодействии
JavaScripP и HTMI.

3.

Grunt
-

инструмент для сборки JavaScripP проектов
из командной строки с
использованием задач.

Сверстанное п
риложение в консоли име
е
т следующий вид

(
рис.3.
5
).



Рис
.3.
5
.

Интерфейс расширения
CodeFinder


3.
5.
2
Применение а
лгоритм
а

определения зависимостей


Для извлечения минимального количества кода, необх
одимого для
повторного использования выбранного элемента инте
рфейса веб
-
страницы, был
разработан инструмент
CodeFinder
.

CodeFinder

реализован как расширение браузера
Chrome
. Это позволяет
использовать функциональные возможности браузера для анализа зависим
остей
CSS

и
DOM

выбранной веб
-
страницы. Кроме того,
CodeFinder

использует

к
42





движку
JavaScriptChrome
, чтобы динамически анализировать исполняемый код
JavaScript

(рис.3.
6
)
.



Рис.3.
6
. С
хема работы инструмента CodeFinder.


На первом этапе разработчик выбирае
т часть пользовательского
интерфейса веб
-
страницы, которую он хочет использовать повторно.
CodeFinder

получает доступ к дереву DOM самого браузера
Chrome
, находя HTMI
-
узел той
части страницы, которая была указана пользователем с помощью щелчка мыши.

На вто
ром этапе разработчик начинает этап записи. Это можно сделать в
двух

режимах:

1.

Без отслеживания выполнения кода JavaScripP
-

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

2.

С отслеживанием выполнения кода JavaScripP:

-

Простое отслеживание выполнения кода JavaScripP
-

в этом режиме
инструмент отслеживает выполнение JavaScripP
-
сценария, который
определяет поведение элемента на странице. К примеру, прокрутку
слайда. Когд
а процесс анализа завершается, инструмент извлекает
43





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

-

Детальное отслеживание выполнения кода JavaScripP


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

Библиотеки, и
спользуемые на этапе анализа клиентского кода

(на основе
приведенного ранее алгоритма
Firecrow
, разработанные авторами данного
инструмента
):

1.

DoppelBrowser


JavaScript
-
библиотека, которая обрабатывает и
интерпретирует код веб
-
приложения, создает граф завис
имостей;

2.

FeatureLocator


JavaScript
-
библиотека,

которая

анализирует

граф
зависимостей

и
находит

код
, определяющий отработанный сценарий
;

3.

ScenarioGenerator
-

приложение для автоматическо
й
генерация
сценариев;

4.

FeatureIntegrator


JavaScript
-
библиотека
,
кот
орая

находит и
исправляет

потенциальные ошибки
слияние кода функции и целевого
кода приложения.

В результате адаптации
данного алгоритма к работе в среде
Chrome
удалось

с помощью прототипа инструмента
CodeFinder

экспортировать структуру

статичного элемента <
header

демонстрационного сайта (рис.
3.
7
).


44






Рис
.
3.
7
. Сравнение
HTML
-
кода исходного (слева) и найденного
расширением
CodeFinder

(справа)


3.
5.
3
Экспорт

кода


После получения компонентов кода предусмотрено две возможности его
использования: загрузить резуль
тирующий набор
HTML
,
CSS
,
JavaScript

на
компьютер, либо экспортировать в онлайн
-
редактор
CodePen

(рис.3.5)
.Для
осуществления второго варианта разработчики
CodePen

разработали
API



программный интерфейс сервиса [
30
].
Данных о
тправ
ляются

на сервер

по адресу

https://codepen.io/pen/define/
методом
POST
,
в теле которого в формате
JSON
4

указано содержимое передаваемых данных и параметры их загрузки в
Codepen
.

В результате
успешной отправки запроса открывается интерфейс

редактора
Codepen
, где можно в режиме реального времени править все три компонента кода
и наблюдать за результатом на панели внизу. Также в режиме редактирования
можно
HTML
,
CSS

и
JavaScript

автоматически переписать на препроцессорах.





4
JSON

-

(
JavaScriptObjectNotation
)
-
универсальный легковесный формат обмена данными.

45






Рис.3.
8
. Резуль
тат отправки кода в онлайн
-
редактор Codepen


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



46





З
АКЛЮЧЕНИЕ



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

В
результате
проведенного
исследования

были

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

В

конечном итоге

был сделан выбор в пользу создания сервиса на основе
расширения для браузера
Chro
me
.

В проц
ессе
изучен
ия

аналог
ов выяснилось, что ни один из имеющихся
инструментов извлечения клиентского кода не удовлетворяет всей совокупности
обозначенных нами требований.
Существующие аналоги либо обрабатывают
только статические веб
-
страницы (SnappyS
nippeP), либо недоступны для
использования в связи с тем, что базируются на устаревших технологиях

(
Firecrow
)
.

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

динамического анализа
клиентской части

веб
-
приложений
.

Она включает в себя 3 этапа работы с кодом

на
стороне браузера
:

1.

автоматизацию
работы с

исходн
ым

код
ом
,

2.

динамический
анализ зависимостей между компонентами
HTML
,
CSS
,
JavaScript
,

3.

автоматизацию
экспорт
а

готовой библиотеки в онлай
н
-
редакто
р или
файл.

47





Для первого этапа используется взаимодействие с
API

(
программным
интерфейсом браузера)
Chrome
, для второго алгоритм, описанный авторами
инструмента
Firecrow
,
на третьем этапе результирующий код
автоматически
отправляется в


онлайн
-
редактор

Code
pen

или сохраняется в файл
.

В результате

получаем готовую к использованию библиотеку кода


совокупность
HTML
,
CSS
,
JavaScript
файла
выбранного пользователем
элемент
а

графического интерфейса
,
.

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



48





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


1.

CordingP
.
H
.
AlgorithmsforWebScraping
.
[
текст
]
//
KongensLyngby
.
-
2011.


2.

Ferrara E., De Meo P., Fiumara G., Baumgartner R. Web Data Extraction,
Applications and Techniques: A Survey.
[
текст
]
// Knowledge
-
based
Systems.
-
2014.
-
70
-
p.301

323.

3.

Laender A. H. F., Ribeiro
-
Neto B. A., da Silva A. S., Teixeira J. S. A
Brief Survey of We
b Data Extraction Tools.
[
текст
]
// SIGMOD Record
(SIGMOD).
-
2002.

4.

Lawson R. Web Scraping with Python: Scrape data from any website with
the power of Python.
[
текст
]
// Packt Publishing Ltd.
-
2015.

5.

Mesbah A., Deursen A.V., Lenselnik S. Crawling AJAX
-
Based Web
Ap
plications through Dynamic Analysis of User Interface State Changes.
[
текст
]
// ACM Transactions on the Web, Vol. 6, No. 1, Article 3.
-

2012.

6.

Maras J. Automating Reuse in Web Application Development.
[
текст
]
//
Mälardalen UniversiPy Press, VäsPeras.
-

2014.

7.

M
aras J., Carlson J.,
Crnković

I. Extracting Client
-
side Web Application
Code.
[
текст
]
// Proceedings of the 21st international conference on World
Wide Web.
-
2012.
-
p. 819
-
828.

8.

Maras J., Carlson J., Stula M. Generating Feature Usage Scenarios in
Client
-
side W
eb Applications.
[
текст
]
// Conference Paper 13th
International Conference on Web Engineering.
-

2013.
-

p. 186
-
200

9.

Maras J.,
Š
tula M., Carlson J. Extracting Client
-
side Web User Interface
Controls.
[
текст
]
// Proceedings of the 10th International conference
on
Web Engineering.



2010
.

49





10.

Maras

J.
, ŠPula

M.
, Carlson

J.
, Crnković

I
. Identifying Code of Individual
Features in Client
-
side Web Applications.
[
текст
]
//

Journal Paper Software
Engineering
.
-

2013
-


p. 1680
-

1697
.

11.

Maras J., Carlson D., Crnkovic I. Toward
s Automatic Client
-
side Feature
Reuse.
[
текст
]
// Conference Paper. Web Information System Engineering
-

WISE 2013. Springer Berling Heidelberg.
-

2013.
-

p. 479
-

488.

12.

Sim S.E., Gallardo
-
Valencia. R.E. Finding Source Code on the Web for
Remix and Reuse.
[
те
кст
]
//
Springer.
-
2013
.

13.

Демонстрация возможностей Firecrow. [Электронный ресурс].



(
http://marjan.fesb.hr/~jomaras/demo/InstallAndUseFirecrow/InstallAndU
seFirecrow.html
).

Проверено 04.06.2017
.

14.

Информационная страница Firecrow.[Электронный ресурс].


(
http:/
/marjan.fesb.hr/~jomaras/tools.htm
l
).

Проверено 04.06.2017.

15.

Исходный код программы. [Электронный ресурс].

(
http://life
-
prog.ru/view_zam2.php?id=225&cat=5&page=17
).
Проверено
02.05.2017.

16.

Обзор интерактивных web
-
технологий. [Электронный ресурс].


(
http://w
ww.sciteclibrary.ru/texsts/rus/stat/st1563.html
).

Проверено
18.06.2017.

17.

Оптимизация фронтенда под браузеры. [Электронный ресурс].


Проверено 2.05.2017.

18.

Официальная документация CodePen. [Электронный ресурс].

(
http://
codepen.io/pen
)
.
Проверено 12.11.2017.

19.

Официальная документация CSSPeal. [Электронный ресурс].

(https://chrome.google.com/webstore/detail/csssteal/ellabkgcnhflepncdcne
lhgclfkgmanh?hl=en).
Проверено 04.06.2017.

50





20.

Официальная документация Firebug. [Электронны
й ресурс].

(
).

Проверено 04.06.2017.

21.

Официальная документация
Firecrow
. [Электронный ресурс].

(
https://github.com/jomaras/Firecrow
).

Проверено 04.06.2017.

22.

Официальная документация HTMI5. [Электронный ресурс].

(
http://www.w3.org/TR
/html5
).

Проверено 04.06.2017.

23.

Официальная документация HPmlClipper
.

[Электронный ресурс].

(
https://github.com/florentin/htmlclipper
).

Проверено 04.06.2017.

24.

Официальная документация PhanPomJS. [Электронный ресурс].

(
http://phantomjs.org
).

Проверено 04.0
6.2017.

25.

Официальная документация Selenium. [Электронный ресурс].

(
http://www.seleniumhq.org/
).

Проверено 05.06.2017.

26.

Официальная документация SlimerJS. [Электронный ресурс].

(
https://slimerjs.org/
).

Проверено 04.06.2017.

27.

Официальная документация SnappySn
ippeP.[Электронный ресурс].

(
).

Проверено 20.05.2017.

28.

Официальное руководство по созданию Chrome
-
расширений.
[Электронный ресурс].


(
https://developer.chrome.com/extensions
).

Проверено 12.11.2017.

29.

Что такое Seleni
umWebdriver.
[Электронный ресурс
].

(
https://dev.by/lenta/main/chto
-
takoe
-
selenium
-
webdriver
).
Проверено
05.06.2017.

30.

CodepenAPI
.
[Электронный ресурс].

(
https://blog.codepen.io/documentation/api/prefill/
).

Проверено
12.11.2017.


Приложенные файлы

  • pdf 24766149
    Размер файла: 994 kB Загрузок: 0

Добавить комментарий