Браузерное расширение для визуализации грамматики

Ответ от Facebook не соответствует ожидаемому.

.

GetIdentityInfo: формат входных данных указан в табл. 15, выходных данных - в табл. 16

Таблица 15

Входные данные функции GetIdentityInfo

р	Тип данных	Обязателен	По-умолчанию
AuthToken	String	Да

Таблица 16

Выходные данные функции GetDeveloperIdentityToken

Параметр	Тип данных	Обязателен	По-умолчанию
IdentityId	String	Да
Token	String	Да

Для всех разрабатываемых функций характерен общий набор возвращаемых ошибок, указанный в табл. 17.

Таблица 17

Набор ошибок, возвращаемых всеми функциями

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

Структура хранения данных

браузерный расширение слово данные

Для хранения данных на сервере используется NoSQL база данных Amazon DynamoDB. Коллекция данных в DynamoDB представлена таблицей, хранящей некоторое количество записей. Запись состоит из одного или нескольких аттрибутов. Каждая запись должна иметь уникальный первичный ключ, который представляется с помощью одного из двух вариантов: [25]

Partition Key (hash key) - является значением, от которого СУБД берет хеш-функцию, определяющую раздел памяти, в котором хранится запись. В таблице не может быть двух записей с одинаковыми partition key.

Partition Key и Sort Key (range key) - является композитным первичным ключом, состоящим из Partition Key, описанного выше, и Sort Key, используемого для сортировки записей, имеющих одинаковый Partition Key. Несколько записей в таблице при использовании такого варианта первичного ключа могут иметь одинаковые значения Partition Key, но обязательно должны иметь разные Sort Key, т.е значение композитного первичного ключа так же должно быть уникально.

Для хранения данных, требующихся для реализации требуемого функционала были выделены следующие таблицы:

ExtensionWordsAdded - хранит информацию об истории добавленных на изучение слов, структура таблицы показана в табл. 18.

Таблица 18

Структура таблицы ExtensionWordsAdded

Название аттрибута	Тип данных
IdentityId	String	Partition Key
ForeignWord	String	Sort Key
CreatedAt	Number	Timestamp (ms)
Data	JSON Object (String)

В качестве Partition Key в данной таблице выступает IdentityId, являющийся уникальным идентификатором пользователя в системе AWS Cognito, использующейся для авторизации. Имея идентификатор пользователя и выбрав все записи в таблице по Partition Key, можно получить коллекцию слов, добавленных данным конкретным пользователем. Для обеспечения уникальности первичного ключа, в качестве Sort Key выступает иностранное слово. Остальная информация о переведенном слове хранится в поле Data как JSON объект той же структуры Word, которая возвращается серверным API при переводе слова, переведенный в строку.

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

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

Таблица 19

Структура таблицы ExtensionWordsOccurences

Название аттрибута	Тип данных
IdentityId	String	Partition Key
Occurences	JSON Object (String)

В качестве Partition Key так же выступает IdentityId, что позволяет имея идентификатор пользователя выбрать из таблицы историю встреченных слов. Статистика по словам хранится как JSON объект, представленный в таблице строкой, как показано на рис. 16:

Рис. 16. Структура объекта, хранящего историю встречаемости слов.

В ключе TotalDocuments хранится общее количество документов, по которым собрана статистика. В объекте по ключу Occurences доступна собственно статистика по встречаемости слов в рассмотренных документах, где ключом выступает слово, а значением - количество документов, в которых встретилось данное слово. Таким образом, получив из базы данных данную информацию, становится возможным расчет IDF для конкретного слова, в то время как метрика TF рассчитывается без использования каких-либо исторических данных.

Для хранения данных на клиенте используется локальное хранилище браузера вида «ключ-значение», структура данных показана в табл. 20.

Таблица 20

Структура данных, хранящихся в локальном хранилище браузера

Название аттрибута	Тип данных
authDeveloperIdentityToken	String
authFacebookUserInfo	JSON Object (String)
addedWords	JSON Object (String)
viewedWords	JSON Object (String)

В ключе authDeveloperIdentityToken хранится токен, полученный от сервера после авторизации пользователя, и использующися в механизме авторизации при перезагрузке расширения. Информация об авторизованном пользователе (имя и IDFacebook) доступна в ключе auth FacebookUserInfo.Информация о добавленных и просмотренных словах хранится как объект JSON, преобразованный в строку (так как localStorage поддерживает значения только строкового типа), и доступна в ключах addedWordsи viewedWords соответственно.

Структура используемого механизма авторизации

Для авторизации пользователей в разрабатываемом браузерном расширении используется сервис AWS Cognito, предоставляющий систему организации прав доступа ко всем сервисам облачной платформы Amazon Web Services, включая используемые в рамках данной работы сервисы Lambda и DynamoDB.

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

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

AWS поддерживает два типа доступа: авторизованный и неавторизованный. [26] В обоих случаях пользователю выдается уникальный идентификатор, называемый Identity ID. При инициализации SDK Cognito каждый пользователь получает неавторизованный доступ к сервисам AWS, получить авторизованный доступ можно, пройдя механизм аутентификации. Именно в ходе процесса аутентификации Identity ID авторизованного пользователя в Cognito получает привязку к данным, с помощью которых пользователь проходит авторизацию (например, аккаунту в социальной сети или связке логин/пароль). Таким образом, в дальнейшем при авторизации в Cognito с помощью одних и тех же данных пользователь получает один и тот же Identity ID, что дает возможность использовать этот идентификатор для хранения пользовательской информации, например, истории добавленных слов.

AWS Cognito поддерживает авторизацию с помощью встроенных обработчиков популярных социальных сетей и сервисов авторизации (Google+, Facebook, Amazon, Twitter), так и предоставляет возможность реализации собственного обработчика регистрации и авторизации пользователей (developer authenticated identities), в случае, если разработчик желает реализовать механизм аутентификации на своем сервере, что полезно в случае, если требуется поддержка соцсети, не поддерживаемой Cognito, или авторизация с помощью логина и пароля.

В случае использования встроенных обработчиков, схема получения авторизованного доступа и IdentityId в Cognito выглядит как на рис. 17 [27]:

Рис. 17. Схема авторизации с помощью встроенного провайдера.

Клиент инициирует процедуру авторизации с поддерживаемой соцсетью и получает авторизационный токен, который после этого отдается SDK Cognito, и дальнейшее получение и обновление токена для доступа к сервисам AWS остается вне зоны ответственности разработчика. В данном случае Cognito занимается так же проверкой токена соцсети и отвечает за выдачу одинакового IdentityId одним и тем же пользователям соцсети.

При использовании механизма авторизации, не поддерживаемого Cognito, а реализованного разработчиком (developer authenticated identities), схема авторизации указана на рис. 18:



Рис. 18. Схема авторизации с помощью провайдера разработчика.

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

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

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

Таким образом, финальная используемая схема аутентификации пользователя для получения авторизованного доступа к сервисам AWS через AWS Cognito выглядит следующим образом (рис. 19):



Рис. 19. Используемая схема авторизации.



Разработка программного обеспечения

Серверная часть

Серверная программа была разработана на языке Node.JS с использованием сервиса AWS Lambda. В рамках данной работы было разработано 5 “функций”, каждая из которых представляет собой фактически класс с набором методов. Функции никак не связаны и не общаются между собой.

Каждая функция выполняет некоторый набор действий, общий для каждой из функций (рис. 20). Так как часть действий выполняется асинхронно, для того, чтобы гарантировать последовательность выполнения используется библиотека async [39]. Для общения с используемой базой данных DynamoDB используется модуль aws-sdk [40], предоставляющий SDK для доступа к сервисам Amazon AWS.

Рис. 20. Диаграмма активностей функции.

Происходит инициализация библиотек, использующихся функцией.

С помощью модуля input-resolver [41]происходит проверка формата и целостности данных, поступивших на вход функции (рис. 21). При несоответствии спецификации возвращается ошибка.

Рис. 21. Пример конфигурации модуля input-resolver.

Происходит получение identityId (идентификатора пользователя, вызвавшего функцию) из параметров, переданных либо на вход функции, либо автоматически через SDK AWS Lambda (рис. 22).

Рис. 22. Получение идентификатора пользователя.

Выполняются заявленные конкретной функцией задачи

Возвращается результат, либо отправляется ошибка.

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

Сохранение слов в истории добавленных на изучение слов происходит функцией AddWord. Единственной задачей функции является получение слова от клиента и добавление его в таблицу ExtensionWordsAdded. Для общения с базой данных используется класс docClient SDK Amazon DynamoDB (рис. 23).

Рис. 23. Создание записи в таблице на примере добавления слова.

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



Рис. 24. Получение записей из таблицы по идентификатору пользователя.

За обработку истории просмотренных страниц пользователя и пополнение статистики о встреченных словах отвечает функция TeachTfIdf. Алгоритм функции выглядит следующим образом:

Получение статистики о встреченных словах из таблицы ExtensionWordsOccurences;

Для каждой страницы, поступившей на вход - получение английских слов со страницы, подсчет и обновление статистики;

Запись обновленной статистики в таблицу.

Важные слова для конкретной страницы возвращает функция GetImportantWords, которая действует так:

Получает статистику о встреченных словах из базы данных;

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

Подсчитывает значение меры tf-idf для каждого из слов (рис. 25);

Сортирует полученные данные по значению tf-idf по убыванию и возвращает N наиболее важных слов (по умолчанию N=10, либо указывается параметром Limit функции).



Рис. 25. Подсчет меры tf-idf для слова.

Получение английских слов со страницы функциями TeachTfIdf и GetImportantWords происходит набором методов, вынесенных в общую библиотеку используемых методов lib.js, которые осуществляют получение html-содержимого страницы с помощью модуля request [42], получение слов cо страницы с помощью модуля cheerio [43] и их лемматизацию (рис. 26).

Рис. 26. Диаграмма активностей модуля, получающего слова со страницы.

Для осуществления лемматизации слов была создана отдельная функция LemmatizeWord(рис. 27), написанная на языке Python и используящая библиотеку Natural Language Toolkit (NLTK) [47].

Рис. 27. Лемматизация слова.

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

Клиентская часть

Исходный код браузерного расширения, как было описано выше, делится на три компонента: browser action, content script и background window. Для облегчения организации процесса разработки используются два компонента: gulp [44] как система, позволяющая автоматизировать процессы сборки и тестирования расширения, и bower [45] как модуль, отвечающий за установку и подключение зависимостей (пакетный менеджер).

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

За отображение интерфейса, показывающего историю добавленных и просмотренных слов, а так же реализующего механизм авторизации, отвечает компонент browser action, исходный код которого находится в файле popup,js, а шаблон интерфейса - в файле popup.html. Логика работы данного интерфейса реализуется с помощью Angular.JS: происходит создание модуля wordsApp и контроллера PopupController, который реализует следующие методы:

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

checkWordState - возвращает статус слова (просмотрен/добавлен) путем проверки наличия слова в localStorage хранилищах добавленных и просмотренных слов. Данный метод используется для отображения или скрытия кнопки “Учить слово” для слов, уже добавленных на изучение.

clearHistory - очищает историю просмотренных слов путем очистки соответствующего localStorage хранилища.

addWord - добавляет слово на изучение.

Интерфейс просмотренных слов использует функцию двухстороннего связывания данных AngularJS. Отображение добавленных и просмотренных слов происходит с помощью директивы ng-repeat, которая отображает html элемент, к которому применена эта директива, для каждого элемента коллекции данных, переданных директиве в качестве параметра (рис. 28).

Рис. 28. Отображение добавленых слов с помощью ng-repeat.

Доступ к добавленным и просмотренным словам, хранящимся в localStorage браузера, осуществляется с помощью инжекции сервиса $storage, предоставляемого библиотекой ngStorage [35]. Данная библиотека обеспечивает двухстороннее связывание данных так же для хранилища localStorage.

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

Рис. 29. Отображение различных данных в зависимости от статуса авторизации и пример использования директивы ng-click.

Отображение данных поля, находящегося в зоне видимости контроллера, осуществляется в html шаблоне с помощью синтаксиса {{variable}}, где variable - переменная, которую нужно отобразить.

Таким образом в шаблоне popup.html отрисовывается две вкладки, переключающиеся с помощью ng-show по значению переменной showAdded (true - показывается вкладка с добавленными словами, false - c просмотренными). В каждой вкладке для каждого слова, хранящегося в соответствующем хранилище в localStorage отрисовывается шаблон слова с помощью ng-repeat. Вызов методов clearHistory, fbLogin и addWord происходит по клику пользователя на соответствующую ссылку с помощью директивы ng-click, параметром которой является метод контроллера, который необходимо вызвать (рис. 29).

Скрипт содержимого страницы

За работу всплывающего окна, появляющегося по двойному клику по слове на просматриваемой страницей отвечает скрипт contentscript.js. Интерфейс всплывающего окна отображается по шаблону, содержащемуся в файле context.html.

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

Рис. 30. Создание нового элемента в теле документа.

Отслеживание двойного клика по слову происходит с помощью библиотеки jQuery. После получения информации о подобном событии осуществляется получение выделенного на странице слова, позиционирование всплывающего окна согласно позиции выделенного слова, передача информации о слове в контроллер AngularJS, отвечающий за отображение информации в окне, и собственно отображение окна (смена стиля элемента с display=none на display=block) (рис. 31).

Рис. 31. Отображение окна по двойному клику.

Логика работы интерфейса всплывающего окна так же реализуется с помощью AngularJS: создается модуль contentPopupApp с контроллером PopupController, реализующим следующие методы:

addWord - добавляет слово на изучение

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

changeTranslation - заменяет основной перевод слова по клику на одно из словарных значений в всплывающем окне.

Так как скрипт содержимого страниц выполняется вне контекста браузерного расширения, а в контексте просматриваемой страницы (иначе у скрипта не было бы доступа к содержимому страницы), прямой связи с остальными частями приложения у него нет. Для решения этой проблемы используется API Message Passing [24] браузера Google Chrome, позволяющего передавать сообщения и получать ответы на них от других частей расширения. Данный API используют методы контроллера addWord и loadWordInfo (рис. 32), для реализации функционала которых требуется вызов методов скрипта фоновой страницы, отвечающего за общение с серверной частью и хранилищем данных.



Рис. 32. Отправка запроса на перевод слова скрипту фоновой страницы.

Так же API Message Passing используется в скрипте содержимого страницы для того, чтобы получать сообщение о необходимости подсветить важные слова на странице от скрипта фоновой страницы. Для подсветки слов используется плагин jQuery под названием highlight [32] (рис. 33).

Рис. 33. Подсветка слов на странице

Протокол и формат сообщений, которыми обмениваются части расширения с помощью Message Passing API будет описан далее.

Для обеспечения дополнительной безопасности, например, предотвращения XSS атак, AngularJS работает в режиме, называемом Script Contextual Escaping (SCE). [31] Данный режим предполагает, что в некоторых контекстах привязка данных должна сопровождаться явным указанием на то, что используемое значение безопасно в данном контексте. В скриптах содержимого страницы и интерфейса расширения такого указания требует привязка URL аудиофайла к HTML5 элементу, осуществляющему проигрывание аудио.

Для удобства привязки URL аудиофайлов, учитывая эту особенность, был использован механизм AngularJS, называемый фильтрами. Фильтры позволяют форматировать значение привязываемого выражения в шаблонах, контроллерах и сервисах. Был разработан фильтр, который явно указывает SCE, что URL аудио безопасен для привязки в данном контексте (рис. 34).

Рис. 34. Фильтр URL аудио и его использование в HTML шаблоне.

Скрипт фоновой страницы

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

Исходный код скрипта поделен на 4 “сервиса” - класса, отвечающих за различные задачи, стоящие перед данным компонентом. Схема связей между этими классами показана на рис. 35.

lambdaSvc - отвечает за вызов серверных методов AWS Lambda;

wordSvc - отвечает за различные функции, связанные со списками слов;

authSvc - отвечает за задачи по авторизации пользователя;

importantSvc - занимается задачами, связанными с отображением важных слов на странице.

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

Скрипт фоновой страницы так же отслеживает три вида событий, происходящих в ходе работы браузера:

runtimeListener - отслеживает сообщения, присылаемыми скрипту другими компонентами расширения (интерфейсом и скриптом содержимого страницы) и при необходимости, отправляет ответ;

tabsListener - используется в авторизации для инициализации процесса: слушатель вызывает процесс авторизации при появлении у одной из вкладок ссылки вида ...facebook.com/connect/login_success.html, что свидетельствует об успешном получении кода авторизации от социальной сети Facebook;

contextMenuListener - отслеживает событие клика по пункту “подсветить важные слова” контекстного меню на просматриваемой странице и вызывает соответствующий метод сервиса importantSvc.

С помощью API Message Passing скриптом фоновой страницы отслеживаются сообщения следующей структуры JSON: в ключе intent содержится требуемое действие, в ключе word - слово, с которым требуется произвести это действие. Далее следует перечисление типов действий, отслеживаемых скриптом:

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

addWord - вызывает соответствующий метод сервиса wordSvc, добавляя слово в список добавленных на изучение слов.

Доступ к истории просмотренных пользователем страниц сервисом importantSvc для отправки этой истории для дальнейшей обработки на сервер осуществляется с помощью API History [46] браузера Google Chrome. Метод chrome.history.search, принимая на вход текстовую строку для поиска по истории (в нашем случае - пустую строку для получения всей истории), возвращает страницы, просмотренные пользователем (рис. 36).

Рис. 36.Получение истории просмотренных страниц и отправка их на сервер.

Одним из основных процессов, осуществляемых скриптом фоновой страницы, является процесс авторизации. За организацию процесса авторизации отвечает сервис authSvc. При получении кода пользователя от Facebook сервис получает токен пользователя от Facebook, получает токен разработчика от getDeveloperIdentityToken и сохраняет его в localStorage для дальнейшего использования.

Так как AWS Cognito не сохраняет данные пользователя при перезапуске расширения, необходимо каждый раз проводить инициализацию. Для этого токен, сохраненный на предыдущем шаге, отправляется функции getIdentityInfo, чтобы получить IdentityId и OpenId токен Cognito. Далее эти данные передаются SDK Cognito путем установки объекта AWS.config.credentials, после чего вызывается метод refresh этого объекта для получения соответствующих прав доступа (рис. 37). [33]

Рис. 37. Получение данных от getIdentityInfo и передача данных Cognito.



При вызове данного процесса в момент первичной авторизации пользователя, по завершению процесса происходит вызов метода teachTfIdf сервиса importantSvc для передачи истории просмотренных страниц пользователя на сервер, а так же метода getAddedWords сервиса wordSvc для получения с сервера истории просмотренных пользователем слов.

Общая схема процесса авторизации организованного на клиенте выглядит следующим образом (рис. 38):

Рис. 38. Общая схема процесса авторизации.

Тестирование разработанного программного обеспечения

Функционал разработанного браузерного расширения был протестирован вручную по следующим сценариям:

Просмотр перевода и дополнительной информации о слове по двойному клику на слово (рис. 39);

Рис. 39. Просмотр информации о слове на странице.

Добавление слова на изучение;

Проверка наличия добавленного слова в списках просмотренных и добавленных слов (рис. 40);

Рис. 40. История просмотренных слов.

Авторизация пользователя через Facebook (рис. 41);

Рис. 41. Совпадение идентификатора авторизованного пользователя в расширении с идентификатором этого же пользователя в базе данных.

Восстановление истории просмотренных пользователем слов;

Подсветка важных слов на странице (рис. 42).

Рис. 42. Подсветка важных слов на странице

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

Заключение

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

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

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

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

В качестве направлений дальнейшей работы можно выделить следующие:

Увеличение скорости работы системы;

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

Улучшение качества перевода слов и предоставляемого контента;

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

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



Список использованной литературы

Lingualeo - английский язык онлайн. URL: https://lingualeo.com (дата обращения 20.05.2016)

Лео-переводчик. URL: https://lingualeo.com/ru/browserapps (дата обращения 18.05.2016)

Azab, M., Hokamp, C., Mihalcea, R. Using Word Semantics To Assist English as a Second Language Learners. // Proceedings of NAACL-HLT. 2015. С. 116-120

Trusty, A., Truong, K. N. Augmenting the web for second language vocabulary learning. // Proceedings of the SIGCHI Conference on Human Factors in Computing Systems. 2014. С. 3179-3188

Kovacs, G. Multimedia for language learning.Massachusetts Institute of Technology, 2013

Client/Server Architecture. URL: https://docs.oracle.com/cd/A57673_01/DOC/server/doc/SCN73/ch20.htm (датаобращения14.05.2016)

Mikowski M, Powell J. Single Page Web Applications. Manning publications, 2013.

Cloud Computing. URL: https://en.wikipedia.org/wiki/Cloud_computing (дата обращения 15.05.2016)

Monolithic Architecture pattern. URL: http://microservices.io/patterns/monolithic.html (датаобращения15.05.2016)

Google Переводчик. URL: https://translate.google.com/ (дата обращения 17.05.2016)

Tf-idf weighting. URL: http://nlp.stanford.edu/IR-book/html/htmledition/tf-idf-weighting-1.html (дата обращения 16.05.2016)

Oracle Platform as a Service and Infrastructure as a Service. URL: http://www.oracle.com/us/corporate/contracts/paas-iaas-public-cloud-2140609.pdf (дата обращения 20.05.2016)

App Engine - Platform as a Service | Google Platform. URL: https://cloud.google.com/appengine/(дата обращения 20.05.2016)

Cloud Application Platform | Heroku. URL: https://www.heroku.com(датаобращения20.05.2016)

Microsoft Azure: платформа облачных вычислений и службы. URL: https://azure.microsoft.com(дата обращения 20.05.2016)

AmazonWebServices (AWS) - сервисы облачных вычислений. URL: https://aws.amazon.com/ru/(дата обращения 20.05.2016)

AWSLambda | сведения о продукте. URL: https://aws.amazon.com/ru/lambda/details/(дата обращения 20.05.2016)

A JavaScript Library for building user interfaces | React. URL: https://facebook.github.io/react/(дата обращения 21.05.2016)

AngularJS | Superheroic JavaScript MVW Framework. URL: https://angularjs.org/(дата обращения 21.05.2016)

Ember.js - a framework for creating ambitious Web-applications. URL: http://emberjs.com/(дата обращения 21.05.2016)

Backbone.js. URL: http://backbonejs.org/(дата обращения 21.05.2016)

React Native | A framework for building native apps using React. URL: https://facebook.github.io/react-native/(дата обращения 21.05.2016)

Getting Started: Building a Chrome Extension. URL: https://developer.chrome.com/extensions/getstarted(дата обращения 14.05.2016)

Message Passing - Google Chrome. URL: https://developer.chrome.com/extensions/messaging(датаобращения16.05.2016)

Getting started with Amazon DynamoDB. URL: http://docs.aws.amazon.com/amazondynamodb/latest/gettingstartedguide/Welcome.html(дата обращения 15.05.2016)

Understanding Amazon Cognito Authentication. URL: https://mobile.awsblog.com/post/Tx2UQN4KWI6GDJL/Understanding-Amazon-Cognito-Authentication(датаобращения15.05.2016)

Authentication Flow - Amazon Cognito. URL: http://docs.aws.amazon.com/cognito/latest/developerguide/authentication-flow.html(датаобращения15.05.2016)

Microservices Decoded: Best Practices and Stacks. URL: https://dzone.com/articles/scalable-cloud-computing-with-microservices(дата обращения 14.05.2016)

About WordNet - WordNet. URL: http://wordnet.princeton.edu/(датаобращения20.05.2016)

MORPHY(7WN) manual page. URL: https://wordnet.princeton.edu/man/morphy.7WN.html(датаобращения20.05.2016)

AngularJS: API: $sce. URL: https://docs.angularjs.org/api/ng/service/$sce(датаобращения15.05.2016)

Highlight: JavaScript text highlighting jQuery plugin. URL: http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html(дата обращения 16.05.2016)

Class: AWS.CognitoIdentityCredentials. URL: http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/CognitoIdentityCredentials.html(датаобращения15.05.2016)

HTML5 Web Storage. URL: http://www.w3schools.com/html/html5_webstorage.asp(дата обращения 15.05.2016)

Gsklee/ngStorage: localStorage and sessionStorage done right for AngularJS. URL: https://github.com/gsklee/ngStorage(дата обращения 15.05.2016)

Client-server model. URL: https://en.wikipedia.org/wiki/Client%E2%80%93server_model(датаобращения14.05.2016)

Flux | Application Architecture for building user interfaces. URL: https://facebook.github.io/flux/(дата обращения 20.05.2016)

Developing Google Chrome Extensions. URL: http://code.tutsplus.com/tutorials/developing-google-chrome-extensions--net-33076(датаобращения16.05.2016)

Async utilities for node and the browser. URL: https://github.com/caolan/async(дата обращения 20.05.2016)

AWS SDK для JavaScriptв Node.js. URL: https://aws.amazon.com/ru/sdk-for-node-js/(дата обращения 16.05.2016)

Input-resolver. URL: https://www.npmjs.com/package/input-resolver(дата обращения 20.05.2016)

Simplified HTTP request client. URL: https://github.com/request/request(датаобращения20.05.2016)

Fast, flexible, and lean implementation of core jQuery designed specifically for the server. URL: https://github.com/cheeriojs/cheerio(дата обращения 20.05.2016)

Gulp.js - the straming build system. URL: http://gulpjs.com/(дата обращения 20.05.2016)

Bower. URL: http://bower.io/(дата обращения 20.05.2016)

Chrome.history - Google Chrome. URL: https://developer.chrome.com/extensions/history(датаобращения20.05.2016)

Natural Language Toolkit. URL: http://www.nltk.org/(датаобращения20.05.2016)



Приложение 1. Листинг файла manifest.json

Рис. 43. Листинг файла manifest.json (часть 1)

Рис. 40. Рис. 44. Листинг файла manifest.json (часть 2).



Приложение 2. Листинги файлов с исходным кодом, реализующим браузерное расширение

Рис. 45. Листинг файла background.js (часть 1).



Рис. 46. Листинг файла background.js (часть 2).

Рис. 47. Листинг файла background.js (часть 3).

Рис. 48. Листинг файла background.js (часть 4).



Рис. 49. Листинг файла background.js (часть 5).

Рис. 50. Листинг файла background.js (часть 6).

Рис. 51. Листинг файла background.js (часть 7).

Рис. 52. Листинг файла background.js (часть 8).

Рис. 53. Листинг файла contenscript.js (часть 1).

Рис. 54. Листинг файла contenscript.js (часть 2).

Рис. 55. Листинг файла popup.js.



Рис. 56. Листинг файлаcontext.html.

Рис. 57. Листинг файлаpopup.html (часть 1).



Рис. 58. Листинг файлаpopup.html (часть 2).

Рис. 59. Листинг файлаmain.css (часть 1).



Рис. 60. Листинг файлаmain.css (часть 2).



Рис. 61. Листинг файлаmain.css (часть 3).



Приложение 3. Листинги файлов с исходным кодом, реализующим серверную часть

Рис. 62. Листинг функцииaddWord (часть 1).



Рис. 63. Листинг функции addWord (часть 2).

Рис. 64. Листинг функции get Added Words (часть 1).

Рис. 65. Листинг функции get AddedWords (часть 2).

Рис. 66. Листинг функции get ImportantWords (часть 1).



Рис. 67. Листинг функции get Important Words (часть 2).



Рис. 68. Листинг функции teach TfIdf (часть 1).



Рис. 69. Листинг функции teach TfIdf (часть 2).

Рис. 70. Листинг функции teach TfIdf (часть 3).

Размещено на Allbest.ru