Проектирование и разработка web-сервиса для автоматического анализа результатов поисковых запросов к базе данных Madrid Monitor

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/



• Оглавление
• Введение
• 1. Обзор проблематики
• 2. Постановка задачи
• 3. Обзор технологий

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

3.2 Языки разметки

3.3 Front-end фреймворки и библиотеки

3.4 Серверные фреймворки и библиотеки

• 4. Обзор архитектуры

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

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

• 5. Описание программ

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

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

• 6. Описание алгоритма нахождения актуального перечня классов
• 7. Описание использования веб-сайта
• Заключение
• Список литературы
• Приложение


Аннотация

Объектом исследования являются технологии и методы создания веб-приложений с клиент-серверной архитектурой. Цель работы -- применить на практике данные технологии для создания веб-сервиса, состоящего из клиентской и серверной частей, и предназначены для автоматического анализа поисковых запросов к международной базе данных Madrid Monitor. В процессе работы были изучены и использованы методы для разработки браузерной и серверной частей приложения с помощью REST API и SPA. В анализе методик, используемых в современной web-разработке, было найдено множество различных технологий, позволяющих решить поставленную задачу. В итоге были выбраны Angular для front-end и node.js и express для back-end, с помощь которых были созданы компоненты web-сервиса, формирующие запрос к международной базе данных, обрабатывающие и анализирующие полученный ответ и представляющие данные в удобном для пользователя виде.

The object of the research is technologies and methods of creating web applications with client-server architecture. The aim of the work is to apply these technologies in practice to create a web service consisting of client and server parts, and are designed for automatic analysis of search queries to the international database Madrid Monitor. In the course of the work, methods were studied and used to develop browser and server parts of the application using REST API and SPA. In the analysis of techniques used in modern web-development, it was found many different technologies to solve the problem. In the end we chose Angular for the frontend and node.js and express for backend, which were used to create web-service components that form a query to an international database, process and analyze the received response and present the data in a user-friendly manner.



Введение

Каждая компания, которая производит товар и предоставляет на рынке какие-либо услуги, рано или поздно сталкивается с проблемой защиты интеллектуальной собственности, в особенности товарного знака. В настоящий момент в абсолютном большинстве стран существуют специальные органы, занимающиеся контролем соблюдения прав в этой области. Для того, чтобы подобного рода права компаний были защищены на международном рынке, во второй половине двадцатого века была подписана конвенция, учреждающая Всемирную организацию интеллектуальной собственности (Далее - ВОИС). Эта организация выполняет административные действия, предоставляя возможность зарегистрировать товарные знаки для защиты во всех странах мадридского соглашения. Данная работа описывает процесс создания веб сервиса, который упрощает работу с базой данных Madrid Monitor, предоставляемой ВОИС. Система представляет собой сервер и сайт, направленные на ускорение анализа статуса международной заявки на территории РФ.



1. Обзор проблематики

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

Если рассматривать официальный сайт ВОИС, мы обнаружим, что, введя название товарного знака или номер заявки, пользователь получит информацию о товарном знаке, его владельце и о всех статусах для всех стран, куда она была подана. Это представляет из себя длинный список малопонятных кодов и терминов, каждый из которых относится к одной или нескольким странам. Для того, чтобы понять на какие классы Ниццкой конвенции распространяется защита в нужной стране, необходимо просмотреть сотню или несколько сотен статусов состояния заявки, отобрать из них только те, которые относятся к искомой стране, и на основе полученных данных высчитать текущий статус. Стоит отметить, что сайт не русифицирован, и это может стать проблемой для многих пользователей Российской Федерации. Таким образом, для решения простейшей, на первый взгляд, задачи необходимо будет потратить большое количество времени, а также иметь знания об основных принципах работы мадридской системы.

Также одним из вариантов получения информации о статусе защиты своего товарного знака, как было сказано выше, является приобретение платного доступа к базам данных ВОИС. В таком случае для того, чтобы воспользоваться полученными преимуществами, такими как написание поисковых запросов через систему управления базами данных (Далее - СУБД), получение информации, которая не была доступна на официальном сайте, необходимо владеть языком запросов и иметь навыки в работе с базой данных. Для среднестатистического пользователя это может оказаться серьезным препятствием. язык программирование серверный сайт

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

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

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



2. Постановка задачи

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



3. Обзор технологий

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

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

- JavaScript [1] -- является одним из самых популярных языков программирования на сегодняшний день. Этот слабо типизированный язык, который изначально был создан для работы в браузере, на данный момент может, без преувеличения, решить почти любую задачу. Реализованный на нем код может работать не только в браузере пользователя в качестве реализации логики взаимодействия с пользователем, он так же применяется на серверной стороне в тандеме с платформой node.js, позволяя создавать REST API. В ходе написания кода для веб-сервиса он не использовался напрямую.

- TypeScript [2] -- язык, на котором написана большая часть кода работы, компилируется в JavaScript и по сути является его надмножеством, дополняющим его такими полезными вещами, как строгая типизация, помогающая избежать неожиданных конфликтов типов, dependency injection, который позволяет не запутаться в зависимостях модулей приложения, и возможность использования объектно-ориентированного подхода для построения четкой архитектуры. Будучи компилируемым языком, позволяет обнаруживать большее количество ошибок на этапе компиляции, таким образом ускоряя и увеличивая качество процесса разработки.

Стоит отметить, что для создания бизнес-логики веб-приложения, работающего в браузере, подходит исключительно JavaScript. Написанный на TypeScript код, компилируется и полученный в процессе компиляции JavaScript выполняется на целевой платформе. Однако для разработки серверной части помимо связки TypeScript, существуют такой аналог, как PHP.
PHP - этот скриптовый язык, который на сегодняшний день обзавелся большим количеством фреймворков и библиотек, упрощающих выполнение задачи, однако он предполагает синхронную многопоточную архитектуру, в отличие от JS/TS с однопоточной асинхронной, что подразумевает выделение больших вычислительных мощностей, а соответственно и затрат.

С# [3]- является довольно популярным языком программирования, но обязывает использовать сервера под управлением операционной системы Windows, которая в отличие от Linux платная, к тому же потребляет больше количество ресурсов компьютера и сложна в администрировании. В свою очередь использование JavaScript является кроссплатформенным решением.

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

Исходя из всего вышеперечисленного, можно сделать вывод, что для решения поставленной задачи оптимальным выбором является TypeScript, особенно то, что все части веб-сервиса такие, как front-end и back-end написаны на одном языке программирования, что позволяет уменьшить проблемы последующей доработки и обслуживания проекта.

3.2 Языки разметки

Языки разметки применяются для структурирования данных внутри документов в соответствии с правилами языка. В ходе работы понадобилось использовать следующие языки из этой категории:

- Hyper Text Markup Language (HTML) [5] -- язык гипертекстовой разметки, который является очень популярным в веб разработке, так как с помощью него созданы структуры страниц большинства сайтов во всемирной паутине. Документ HTML интерпретируется браузером и содержит в себе разметку страницы, состоящую из тегов -- именованных меток, каждая из которых описывает элемент страницы определенного типа. Например, <button> Далее </button> является тегом с именем «button» и описывает кнопку с надписью «Далее». Данный язык имеет небольшой набор структурных и семантических элементов, каждый из которых может иметь один или несколько атрибутов, расширяющих возможности тега. HTML не описывает внешний вид страницы, он определяет состав элементов присутствующих на ней, а также их взаимоотношения путем вложенности друг в друга или определения порядка следования друг за другом.

- eXtensible Markup Language [6] -- во многом схож с HTML, в том числе может использоваться для разметки страницы, однако имеет отличия не только в синтаксисе, но и в областях применения. С помощью XML можно описать структуру каких-либо однотипных данных и передавать их в виде XML документов. Международный сервис Madrid Monitor, предоставляемый ВОИС, позволяет получить информацию о статусах и описание заявки в XML документа. Однако, XML довольно громоздкий язык, поэтому после получения данных в таком виде, серверная часть приложения преобразует их в другой формат -- JSON, с которым весьма легко работать средствами JavaScript.

3.3 Front-end фреймворки и библиотеки

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

- Angular [7] -- фреймворк, созданный компанией Google для разработки SPA приложений на JavaScript. Single Page Application (SPA) [8] -- одностраничные приложения, реализуют концепцию веб приложения, при которой вся логика и разметка получается клиентом сразу после начала работы с сайтом, далее, в процессе взаимодействия, с сервера приходят лишь мета-данные, при этом зачастую страницы не перерисовываются полностью, а лишь частично, что позволяет существенно уменьшить время отклика интерфейса на действия пользователя.

Angular предлагает использовать два языка программирования при разработке, такие как Dart [9] и TypeScript. Из-за того, что Dart довольно молодой язык с малым объемом документации и небольшим сообществом, в работе используется более привычный и хорошо зарекомендовавший себя TypeScript. Стоит также отметить, что данный фреймворк использует модульный подход в архитектуре приложения, что упрощает не только разработку и тестирование, но и последующую поддержку кода. Еще одним плюсом Angular является то, что он реализует в архитектуре приложений паттерн Model View Controller (MVC) [10].

- Angular Material [11] -- библиотека, предоставляющая наборы готовых стилей, и анимаций, а также нестандартные компоненты интерфейса. Данная библиотека позволяет быстро создать интерфейс в стиле Material и избавляет от необходимости привлекать дизайнера.

- RxJs [12] -- JavaScript библиотека, реализующая концепцию реактивного программирования. Она предоставляет набор функционала, позволяющий сделать код лаконичным, а также упростить обработку пользователя за счет использования паттерна Observer. Основная его суть состоит в том, чтобы объединить несколько обработчиков событий в один поток и работать потом только с ним.

3.4 Серверные фреймворки и библиотеки

- Express [13] -- фреймворк с открытым исходным кодом для веб приложений на node.js [14]. Приобретя огромную популярность и поддержку большого сообщества программистов, стал стандартным каркасом для реализации веб приложений и API на node.js. Основными преимуществами является модульная архитектура и огромное количество готового функционала для маршрутизации, конфигурации http [15] сервера, обработки http запросов и взаимодействия с базами данных. Так же как и Angular, Express позволяет использовать TypeScript для написания кода модулей, последние, стоит заметить также реализуют MVC паттерн. В данной работе Express был использован для написания REST API.

- xml2json [16] -- как следует из названия, это библиотека, предназначенная для автоматической конвертации XML документов в JSON формат.



4. Обзор архитектуры

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

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

Серверная часть представляет собой REST API [17], работающее на платформе node.js и использующее фреймворк Express в качестве каркаса. REST [18] API [19] - это веб сервис, реализующий архитектурный подход REST, работающий в World Wide Web и предназначенный для управления и передачи информации с помощью четырех основных операций: получение данных с сервера, добавления новых данных на сервер, модификация существующих и удаление данных. Взаимодействие сервера с клиентом осуществляется по протоколу http. Основная особенность REST в том, что сервер не запоминает состояние пользователя между запросами, поэтому в каждом запросе передается информация, идентифицирующая его.

Для каждого типа операции существует свой http метод:

- GET -- получение

- POST -- модификация

- PUT -- добавление

- DELETE -- удаление

Основным модулем API является http сервер, который принимает запросы и отвечает на них. Приняв запрос, сервер обращается к модулю маршрутизации, для того, чтобы выяснить существует ли запрашиваемый обработчик и если да, то передать обработку запроса соответствующему модулю. Можно заметить, что подобная модульная система позволяет легко масштабировать и обслуживать API, ведь каждый модуль отделен от остальных и выполняет свои задачи. Сам сервер и другие модули API написаны на TypeScript. Используя вместе с ним стандартные инструменты Express, можно быстро создать основу модуля любого типа, в основном остается добавить функции обработки событий.

Так как в силу ограничений со стороны API сайта ВОИС не удается обратиться к нему напрямую с клиентского приложения, то разработанная серверная часть является прослойкой между ними. Основная функция API принимать запросы от клиента, получать из них номер искомой заявки и совершать новый запрос к Madrid Monitor. От сервиса ВОИС API получает ответ стандартного типа, состоящий из заголовков, статуса и тела. Если получен успешный статус, то серверная часть извлекает из тела XML документ с описанием заявки, конвертирует его в JSON и отправляет в теле ответа на клиент, присвоив ответу успешный статус, в данном случае двухсотый. В случае получения ошибки от Madrid Monitor, API формирует ответ со статусом ошибка и передает в теле сообщение, описывающее ее, на клиент.

Основные инструменты для запроса с сервера к сторонним ресурсам выполняются с помощью библиотеки request.js [20]. Данная библиотека предоставляет не только инструменты для создания запросов, но и помогает обработать ответы с помощью большого набора методов.

Важным процессом для разработки и эксплуатации серверного приложения является сборка проекта. Для данного процесса в работе используется менеджер задач Grunt [21]. Этот инструмент написан на JavaScript и автоматизирует однообразные процессы такие, как минификация, канкатенация файлов и тестирование. Инструкции и сценарии сборки описываются в конфигурационном файле Gruntfile, в виде JSON объекта. Одной из основных подзадач, которые выполняет грант в данном проекте, является поиск по проекту файлов с расширением .ts и запуск для них процесса компиляции с помощью подключенного компилятора TypeScript. После сборки мы получаем готовый к запуску на node.js проект, состоящий из JavaScrit файлов.

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

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

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

Все функции, описывающие бизнес логику приложения разнесены по компонентам, у каждого из которых помимо этого имеются разметка и стили. Таким образом можно заметить, как именно Angular реализует MVC паттерн: все данные, которые приходят от серверной части приложения, иначе говоря REST API, являются моделью (Model), шаблоны HTML, содержащиеся в каждом компоненте, ничто иное, как отображение (View), а сами компоненты, содержащие методы обработки пользовательских действий, являются контроллерами (Controller).

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

- Компонент (Component) -- это основная единица Angular приложения, представляющая собой TypeScript класс, обернутый в декоратор @Component. Компонент, как уже говорилось, имеет свое представление -- шаблон, и содержит в себе методы обработчики событий элементов из представления, таких как нажатие кнопки, заполнение полей формы отправка запросов к API и обработка ответов. После того, как Angular создает компонент, он вызывает у него ряд стандартных методов, определяющих жизненный цикл компонента:

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

- ngOnInit -- вызывается единственный раз и отвечает за инициализацию компонента

- ngDoCheck -- отрабатывает каждый раз при проверке изменений свойств компонента.

- ngAfterContentInit -- вызывается следом за предыдущим методом сразу после того, как в представление компонента произошла вставка html разметки.

- ngAfterContentChecked -- Angular вызывает данный метод каждый раз, когда меняется содержимое из представления компонента.

- ngAfterViewInit -- срабатывает после того, как представление полностью инициализировано.

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

- ngOnDestroy -- срабатывает непосредственно перед удалением компонента.

Компонент обладает шаблоном (Template), в котором содержится вся html разметка представления компонента. Angular разширяет возможности html, добавляя в него новые синтаксические конструкции, облегчающие связь контроллера и представления.

- Канал (Pipe) -- вспомогательная конструкция, являющаяся классом, который реализует метод изменения значения. Пайпы вызываются непосредственно из представления компонентов и служат для трансформации значений в любой требуемый вид. Например, время принято хранить и передавать в подобном виде "2017-11-20T12:43:56.000Z", однако, такой формат плохо воспринимается, но использование пайпа исправляет данную проблему. Конструкция {{time | date:'dd LLL yyyy HH:mm'}} преобразит дату в результат такого вида 20 Nov 2017 15:43.

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



5. Описание программ

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

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

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

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

- routes.ts -- файл, который отвечает за маршрутизацию во всем приложении, в нем объявляются пути, по которым клиентское приложение обращается к нужным методам API, им сопоставляются модули, которые отвечают за обработку запросов.

- index.ts -- файл отвечает за обработку запроса, обращения по пути /api/. Возвращает в ответ сгенерированную html страницу с сообщением, что API запущенно и работает.

- getAppFromMadrid.ts -- основной модуль REST API, является обработчиком для GET запроса метода /api/getappfrommadrid/:appnumber. Когда клиент делает GET запрос по данному адресу, он должен передать в uri параметрах номер интересующей заявки, в то-же время вызывается функция обработчик getXML, которая делает запрос к ресурсу www.wipo.int/ и ждет ответа с XML документом, содержащим информацию о заявке. Если получен успешный ответ, getXML меняет кодировку XML на UTF-8 и конвертирует его в JSON, после чего формирует ответ с двухсотым статусом, в теле которого отправляет полученный JSON объект.

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

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

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

Клиентская часть сервиса написана на TypeScript в соответствии с архитектурой Angular. Она представляет собой набор компонентов и сервисов Angular, вот основные из них:

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

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

- app.module.ts -- так как любое приложение на Angular имеет модульную структуру, то в нем должен быть хотя бы один модуль. В данном случае app.module.ts является корневым модулем приложения и входной точкой в него. В нем подключается ряд необходимых для работы модулей и компонентов с помощью директив import.

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

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

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

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

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

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

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

getDate -- метод используется для разбора даты регистрации события, так как в документе все даты приходят в виде восьмизначного числа, возвращает объект типа Date

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

- getxml.component.html -- файл содержит представление компонента getxml.component.ts. Описывает структуру основной страницы сайта, содержит описание формы поиска и шаблоны отображения информации, приходящей с сервера.

- getxml.component.scss -- каскадная таблица стилей, конфигурирующая внешний вид всех элементов страницы.

- country.pipe.ts -- канал, преобразующий краткое обозначение страны на английском языке в полное название на русском, осуществляет такого рода преобразование в соответствии со словарем.

- custom-date.pipe.ts -- канал, преобразующий дату в формате восьмизначного числа без разделителей в удобный для восприятия вид

- language.pipe.ts - канал, преобразующий краткое обозначение языка на английском языке в полное название на русском, осуществляет такого рода преобразование в соответствии со словарем.

- request.service.ts -- сервис, отвечающий за взаимодействие с API. Осуществляет формирование HTTP запросов, отправку их и предварительную обработку и проверку на предмет ошибки.



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

Алгоритм определения актуального статуса делится на следующие шаги:

1. За основу статуса берется изначальный список классов из заявки

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

3. В полученном массиве оставляем только те, что относятся к России, для этого проверяем наличие в параметрах статуса наличие параметров DESAG или DESPG, которые содержат список стран к которым относится статус.

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

5. К каждому статусу применяется функция partialRefusalDetails, если статус PRF, REMVD, PCN или LIMTO, которые ограничивают список охраняемых статусов полностью или частично, тогда с помощью условных и регулярных выражений определяются статусы, которые исключаются из изначального списка. Помимо этого, статусы проверяются на принадлежность к закрывающему или открывающему типу в соответствии списку. Если последним в массиве закрывающий тип статуса, то список классов обнуляется, а знак не защищается на территории РФ.

6.



7. Описание использования веб-сайта

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



Заключение

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



Список литературы

1. Маккоу А. Веб-приложения JavaScript. Спб.: Питер, 2012.

2. Файн Я., Моисеев А. Angular и TypeScript. Сайтостроение для профессионалов. Спб.: Питер, 2018.

3. Шилдт Г. C# 4.0: полное руководство. М.: И.Д. Вильямс, 2011.

4. Бауэр К., Кинг Г., Грегори Г. Java Persistence API и Hibernate. М.: ДМК Пресс, 2017

5. Хеник Б. HTML и CSS: путь к совершенству. Спб.: Питер, 2011.

6. “Что такое XML”. URL: https://msiter.ru/tutorials/uchebnik-xml-dlya-nachinayushchih/chto-takoe-xml (дата обращения 19.05.2018).

7. Дилеман П. Изучаем Angular 2. М.: ДМК Пресс, 2017.?

8. “Что такое SPA или одностраничный портал”. URL: http://www.codenet.ru/webmast/js/spa/ (дата обращения 19.05.2018).

9. Баккет К. Dart в действии. М.: ДМК Пресс, 2016.

10. “MVC для веб: проще некуда”. URL: https://habr.com/post/181772/ (дата обращения 19.05.2018).

11. “Getting started”. URL: https://material.angular.io/guide/getting-started (дата обращения 19.05.2018).

12. “The ReactiveX library for JavaScript”. URL: http://reactivex.io/rxjs/ (дата обращения 19.05.2018).

13. Холмс С. Стек MEAN. Mongo, Express, Angular, Node. Спб.: Питер, 2017.

14. Пауэрс Ш. Изучаем Node. Спб.: Питер, 2017.

15. “Простым языком об HTTP”. URL: https://habr.com/post/215117/ (дата обращения 19.05.2018).

16. “Simple XML2JSON Parser”. URL: https://www.npmjs.com/package/xml2json (дата обращения 19.05.2018).

17. Аквино К., Ганди Т. Front-end. Клиентская разработка для профессионалов. Node.js, ES6, REST. Спб.: Питер, 2017.

18. “Архитектура REST ”. URL: https://habr.com/post/38730/ (дата обращения 19.05.2018).

19. “Что такое API”. URL: https://habr.com/sandbox/52599/ (дата обращения 19.05.2018).

20. “Request - Simplified HTTP client”. URL: https://github.com/request/request (дата обращения 19.05.2018).

21. “GRUNT The JavaScript Task Runner”. URL: https://gruntjs.com/ (дата обращения 19.05.2018).

22.



Приложение

Внешний вид клиентской части веб-сервиса



Формат информации о заявке.

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

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE MARKGR SYSTEM "http://www.wipo.int/romarin/shared/dtd/MARKGR.dtd">

<MARKGR //Детали товарного знака

INTREGN="739890" //Международный регистрационный номер

BILING="Y" //

OOCD="ES" //Office of Origin Code Двухбуквенный код страны

INTREGD="20000712" //Начальная дата регистрации знака

EXPDATE="20200712" //Срок годности

ORIGLAN="3" //Язык оригинала 1=English, 3=French, 4=Spanish

>

<CURRENT> //Текущее состояние знака

<HOLGR //Детали владельца

CLID="422990" //Идентификатор клиента

NOTLANG="3" //Язык уведомлений

>

<NAME> //Имя

<NAMEL>TELEFONICA, S.A.</NAMEL> //Строка имени

</NAME>

<ADDRESS> //Адрес

<ADDRL>Gran Vнa, 28</ADDRL> //Строка адреса

<ADDRL>E-28013 MADRID</ADDRL> //Строка адреса

<COUNTRY>ES</COUNTRY> //Двухбуквенный код страны

</ADDRESS>

<ENTNATL>ES</ENTNATL> //Гражданство заявителя, получателя или держателя

<CORRIND/> //Индикатор корреспонденции указывает на то, что это вхождение адреса является адресом корреспонденции

</HOLGR>

<REPGR //Данные представителя

CLID="645198" //Идентификатор клиента

>

<NAME> //Имя

<NAMEL>MARCOS FERNБNDEZ DE BЙTHENCOURT</NAMEL> //Строка имени

</NAME>

<ADDRESS> //Адрес

<ADDRL>C/ Goya, 127</ADDRL> //Строка адреса

<ADDRL>E-28009 MADRID</ADDRL> //Строка адреса

<COUNTRY>ES</COUNTRY> //Код страны

</ADDRESS>

</REPGR>

<PHOLGR //Данные предыдущего владельца

CLID="431212" //Идентификатор клиента

>

<NAME> //Имя

<NAMEL>TERRA NETWORKS, S.A.</NAMEL> //Строка имени

</NAME>

<ADDRESS> //Адресс

<ADDRL>Avenida de las Dos Castillas, 33,</ADDRL> //Строка Адреса

<ADDRL>Edificio Atica 1</ADDRL>

<ADDRL>POZUELO DE ALARCON (Madrid)</ADDRL>

<COUNTRY>ES</COUNTRY> //Код страны

</ADDRESS>

</PHOLGR>

<IMAGE //Изображение товарного знака

COLOUR="N" //Цвет (Y / N / G / B)

TYPE="JPG" //Формат изображения

NAME="0739890" //Имя файла изображения

TEXT="terra" //Текстовые элементы товарного знака на изображении

/>

<MARDUR>10</MARDUR> //Продолжительность охраны товарного знака. 10 или 20 лет

<VIENNAGR //Венская классификация

VIENVER="4"> //Используемый вариант Венской классификации

<VIECLAI>2607</VIECLAI> //Венский класс

<VIECLAI>2705</VIECLAI> //Венский класс

<VIECLA3>260725</VIECLA3> //3 уровень венского класса

<VIECLA3>270501</VIECLA3> //3 уровень венского класса

</VIENNAGR>

<BASICGS //Основные сведения о товарах и услугах

NICEVER="7" //Версия Ниццкой классификации (6 / 7 / 8 / 9 / 10 / 10-2013 / 10-2014 / 10-2015 / 10-2016 / 11 / 11-2018)

>

<GSGR //Детали о товарах и услугах

NICCLAI="01" //Ниццкая классификация ниццкий класс ассоциируется со списком товаров и услуг. Возможные значения: от 1 до 42.

>

<GSTERMEN> //Термины товаров и услуг (английский)

Chemicals used in industry, science (excluding those used in

medical science), photography, agriculture, horticulture,

forestry; unprocessed artificial resins, unprocessed

plastics; soil fertilizers (natural and artificial);

fire-extinguishing compositions; metal tempering and

soldering preparations; chemical substances for preserving

foodstuffs; tanning substances and adhesives used in

industry.

</GSTERMEN>

</GSGR>

</BASICGS>

<BASGR> //Основные регистрационные данные

<BASREGGR> //Основные регистрационные данные

<BASREGD>20000705</BASREGD> //Дата базовой регистрации в ведомстве происхождения.

<BASREGN>2.261.448</BASREGN> //Номер базовой регистрации в ведомстве происхождения.

</BASREGGR>

</BASGR

<DESPG> //Обозначения в соответствии с Протоколом

<DCPCD>GE</DCPCD> //Обозначенный код Договаривающейся стороны Код двухбуквенных стран (WIPO ST3.), Который используется для идентификации назначенной Договаривающейся стороны

<DCPCD>IS</DCPCD>

<DCPCD>NO</DCPCD>

<DCPCD>TR</DCPCD>

</DESPG>

<DESPG2> //Обозначения в соответствии с Протоколом в силу статьи 9sexies

<DCPCD>AL</DCPCD>

<DCPCD>BA</DCPCD>

</DESPG2>

</CURRENT>

<ENN //Новая Международная Регистрация

REGRDAT="20000905" //Дата регистрации в международном реестре. Дата вступления в силу транзакции, зарегистрированной в международном реестре в отношении данной международной регистрации.

NOTDATE="20000921" //Дата уведомления

REGEDAT="20000712" //Дата вступления в силу изменения. Дата, когда сделка, зарегистрированная в международном регистре в отношении данной международной регистрации, имеет силу.

GAZNO="2000/18 Gaz" //Ссылка на публикацию в газете

PUBDATE="20001012" //Дата публикации

INTOFF="ES" //Заинтересованное ведомство

>

<DESAG> //Обозначения в соответствии с Соглашением

<DCPCD>AL</DCPCD>

<DCPCD>AM</DCPCD>

<DCPCD>VN</DCPCD>

<DCPCD>YU</DCPCD>

</DESAG>

<DESPG> //Обозначения в соответствии с Протоколом

<DCPCD>EE</DCPCD>

<DCPCD>GE</DCPCD>

<DCPCD>IS</DCPCD>

<DCPCD>LT</DCPCD>

<DCPCD>NO</DCPCD>

<DCPCD>TM</DCPCD>

<DCPCD>TR</DCPCD>

</DESPG>

</ENN>

<RFNP //Частичный Отказ

REGRDAT="20001229" //Дата регистрации в Международном реестре.

NOTDATE="20010101" //Дата уведомления

REGEDAT="20001222" //Дата вступления в силу изменения

GAZNO="2000/25 Gaz" //Ссылка на публикацию в газете

PUBDATE="20010201" //Дата публикации

INTOFF="IS" //Заинтересованное ведомство

>

<PRF //Детали частичного отказа

ORIGLAN="1" //Исходный язык

>

<GSHEADEN> //Заголовок товаров и услуг (английский)

Refused for all the goods in classes 3 and 5.

</GSHEADEN>

<GSHEADFR> //Заголовок товаров и услуг (французский)

Refusй pour les produits des classes 3 et 5.

</GSHEADFR>

</PRF>

</RFNP>

<RFNT //Полный отказ

REGRDAT="20010201"

NOTDATE="20010202"

REGEDAT="20010131"

GAZNO="2001/3 Gaz"

PUBDATE="20010315"

INTOFF="SI"

/>

<FINC //Окончательное решение, подтверждающее первоначальный отказ

REGRDAT="20030430"

NOTDATE="20030501"

REGEDAT="20030324"

GAZNO="2003/9 Gaz"

PUBDATE="20030612"

INTOFF="CN"

/>

<APNE //Истек срок рассмотрения или апелляции

REGRDAT="20010501"

NOTDATE="20010517"

REGEDAT="20010430"

GAZNO="2001/9 Gaz"

PUBDATE="20010607"

INTOFF="IS"

/>

<OPN //Уведомление о возможном возражении после 18 месяцев

REGRDAT="20020201"

NOTDATE="20020204"

REGEDAT="20011228"

GAZNO="2002/2 Gaz"

PUBDATE="20020307"

INTOFF="NO"

>

</OPN>

<LIN //Ограничение

REGRDAT="20050131"

NOTDATE="20050217"

REGEDAT="20020305"

GAZNO="2005/5 Gaz" //Справочная информация об оригинальной публикации, если транзакция была исправлена

PUBDATE="20050310"

OGAZNO="2002/8 Gaz"

OPUBDATE="20020530" //Дата об оригинальной публикации, если транзакция была исправлена

INTOFF="ES"

>

<DCPCD>VN</DCPCD>

<DCPCD>YU</DCPCD>

<LIMTO NICCLAI="01">

<GSTERMEN>

Chemicals used in industry, science (excluding those used in

medical science), photography, agriculture, horticulture,

forestry; unprocessed artificial resins, unprocessed

plastics; fire-extinguishing compositions; metal tempering

and soldering preparations; chemical substances for

preserving foodstuffs; tanning substances and adhesives used

in industry, with the express exclusion of water

conditioners, water testing equipment.

</GSTERMEN>

<GSTERMFR>

Produits chimiques destinйs а l'industrie, aux sciences (а

l'exception de ceux destinйs а la science mйdicale), la

photographie, l'agriculture, l'horticulture, la

sylviculture; rйsines artificielles а l'йtat brut, matiиres

plastiques а l'йtat brut; compositions extinctrices;

prйparations pour la trempe et la soudure des mйtaux;

produits chimiques destinйs а conserver les aliments;

matiиres tannantes et substances adhйsives destinйes а

l'industrie, а l'exception, expressйment, des conditionneurs

d'eau, йquipements pour le contrфle des eaux (water tests).

</GSTERMFR>

</LIMTO>

<FINT //Окончательное решение об отказе во всех товарах и услугах

REGRDAT="20020727"

NOTDATE="20020730"

REGEDAT="20020708"

GAZNO="2002/15 Gaz"

PUBDATE="20020905"

INTOFF="EG"

/>

<FINO //Другое окончательное решение (обычно частичная отмена)

REGRDAT="20020914"

NOTDATE="20020917"

REGEDAT="20020820"

GAZNO="2002/19 Gaz"

PUBDATE="20021031"

INTOFF="EE"

>

<PRF ORIGLAN="1">

<GSHEADEN>

Refused for all the goods in classes 12 and 31.

</GSHEADEN>

<GSHEADFR>

Refusй pour les produits des classes 12 et 31.

</GSHEADFR>

</PRF>

</FINO>

<OPPERS>20021118</OPPERS> //Дата начала периода подачи возражения

<OPPERE>20030118</OPPERE> //Дата окончания периода подачи возражения

<CEN //Продолжение эффекта

REGRDAT="20071024"

NOTDATE="20071108"

REGEDAT="20071019"

GAZNO="2007/43 Gaz"

PUBDATE="20071129"

>

<DCPCD>ME</DCPCD>

</CEN>

<INNP //частичное аннулирование

REGRDAT="20090902"

NOTDATE="20090903"

DOCID="5043935"

REGEDAT="20090713"

GAZNO="2009/36 Gaz"

PUBDATE="20090924"

INTOFF="KZ"

>

<REN //Продление

REGRDAT="20101112"

NOTDATE="20101125"

REGEDAT="20100712"

GAZNO="2010/45 Gaz"

PUBDATE="20101202"

>

<DESAG>

<DCPCD>DZ</DCPCD>

</DESAG>

</REN>

<REN3> //Отказ от продления некоторых Договаривающихся Сторон

<DCPCD>AM</DCPCD>

<DCPCD>AZ</DCPCD>

<DCPCD>BG</DCPCD>

<DCPCD>UZ</DCPCD>

</REN3>

<PCN //частичное аннулирование

REGRDAT="20101112"

NOTDATE="20101125"

REGEDAT="20100712"

GAZNO="2010/45 Gaz"

PUBDATE="20101202"

INTOFF="ES"

>

<GSHEADEN>

Classes 1, 3, 5, 12, 14, 16, 18, 25, 28, 29, 30, 31, 32, 33,

34, 39 and 40 are cancelled.

</GSHEADEN>

<GSHEADFR>

Les classes 1, 3, 5, 12, 14, 16, 18, 25, 28, 29, 30, 31, 32,

33, 34, 39 et 40 sont radiйes.

</GSHEADFR>

<GSHEADES>

Las clases 1, 3, 5, 12, 14, 16, 18, 25, 28, 29, 30, 31, 32,

33, 34, 39 y 40 estan canceladas.

</GSHEADES>

</PCN>

<R18NP //Окончательное решение в соответствии с правилом 18, предусматривающим частичную защиту

REGRDAT="20121129"

NOTDATE="20121213"

DOCID="6205383"

REGEDAT="20110817"

GAZNO="2012/48 Gaz"

PUBDATE="20121220"

INTOFF="RS"

>

<PRF ORIGLAN="3">

<LIMTO NICCLAI="16">

<GSTERMFR>

Magazines, livres et brochures dans le domaine des

ordinateurs et l'Internet.

</GSTERMFR>

</LIMTO>

<LIMTO NICCLAI="42">

<GSTERMFR>

Vйtйrinaires et d'agriculture; services juridiques;

programmation pour ordinateurs; services dans le domaine de

l'information technologique; services de dessin de pages

web; programmation, configuration et installation technique

de bases de donnйes dans le domaine des rйseaux mondiaux

d'informatique et/ou de tout autre rйseau de communication.

</GSTERMFR>

</LIMTO>

<GSFOOTFR>

Admis pour tous les produits et services des classes 1, 3,

5, 9, 12, 14, 18, 25, 28, 29, 30, 31, 32, 33, 34, 35, 38,

39, 40 et 41.

</GSFOOTFR>

</PRF>

</R18NP>

<INNT //Общее аннулирование

REGRDAT="20170807"

NOTDATE="20170808"

DOCID="10447907"

REGEDAT="20170223"

GAZNO="2017/32 Gaz"

PUBDATE="20170824"

INTOFF="VN"

/>

</MARKGR>

Фрагменты серверного приложения

Файл www

#!/usr/bin/env node

/**

* Module dependencies.

*/

var server = require('../www/server');

var debug = require('debug')('madrid-monitor:server');

var http = require('http');

/**

* Get port from environment and store in Express.

*/

var port = normalizePort(process.env.PORT || '3000');

var app = server.Server.bootstrap().app;

app.set('port', port);

/**

* Create HTTP server.

*/

var httpServer = http.createServer(app);

/**

* Listen on provided port, on all network interfaces.

*/

httpServer.listen(port);

httpServer.on('error', onError);

httpServer.on('listening', onListening);

/**

* Normalize a port into a number, string, or false.

*/

function normalizePort(val) {

var port = parseInt(val, 10);

if (isNaN(port)) {

// named pipe

return val;

}

if (port >= 0) {

// port number

return port;

}

return false;

}

/**

* Event listener for HTTP server "error" event.

*/

function onError(error) {

if (error.syscall !== 'listen') {

throw error;

}

var bind = typeof port === 'string'

? 'Pipe ' + port

: 'Port ' + port;

// handle specific listen errors with friendly messages

switch (error.code) {

case 'EACCES':

console.error(bind + ' requires elevated privileges');

process.exit(1);

break;

case 'EADDRINUSE':

console.error(bind + ' is already in use');

process.exit(1);

break;

default:

throw error;

}

}

/**

* Event listener for HTTP server "listening" event.

*/

function onListening() {

var addr = httpServer.address();

var bind = typeof addr === 'string'

? 'pipe ' + addr

: 'port ' + addr.port;

debug('Listening on ' + bind);

}

Файл server.ts

'use strict'

import * as express from 'express';

import * as path from 'path';

import * as favicon from 'serve-favicon';

import * as logger from 'morgan';

import * as cookieParser from 'cookie-parser';

import * as bodyParser from 'body-parser';

import * as sassMiddleware from 'node-sass-middleware';

import { NextFunction } from 'express-serve-static-core';

import { Request, Response } from 'express';

import * as errorHandler from "errorhandler";

import * as methodOverride from "method-override";

import mongoose = require("mongoose");

//routes

import { IndexRoute } from "./routes/index";

import { GetXMLFromMadrid } from "./routes/getAppFromMadrid";

import { FindByName } from "./routes/findByName";

//interfaces

import { IApplication } from "./interfaces/application";

//models

import { IModel } from "./models/model";

import { IApplicationModel } from "./models/application";

//schemas

import { applicationSchema } from "./schemas/application";

/**

* The server.

*

* @class Server

*/

export class Server {

public app: express.Application;

private model: IModel; //an instance of IModel

/**

* Bootstrap the application.

*

* @class Server

* @method bootstrap

* @static

* @return {ng.auto.IInjectorService} Returns the newly created injector for this app.

*/

public static bootstrap(): Server {

return new Server();

}

constructor(){

//instance defaults

this.model = Object(); //initialize this to an empty object || new Object() ???

//create expressjs application

this.app = express();

//configure application

this.config();

//add routes

this.routes();

//add api

this.api();

}

/**

* Create REST API routes

* @class Server

* @method api

*/

public api() {

//empty for now

}

/**

* Configure application

* @class Server

* @method config

*/

public config() {

// const MONGODB_CONNECTION: string = "mongodb://localhost:27017/madrid_monitor";

//add static paths

this.app.use(express.static(path.join(__dirname, "public")));

//configure jade

this.app.set("views", path.join(__dirname, "views"));

this.app.set("view engine", "jade");

//use logger middlware

this.app.use(logger("dev"));

//use json form parser middlware

this.app.use(bodyParser.json());

//use query string parser middlware

this.app.use(bodyParser.urlencoded({

extended: true //false ??

}));

//use cookie parser middleware

this.app.use(cookieParser("SECRET_GOES_HERE"));

//use override middlware

this.app.use(methodOverride());

//configure sass

this.app.use(sassMiddleware({

src: path.join(__dirname, 'public'),

...