В целях экономии места на страницах вместо статических форм используются модальные окна, разворачиваемые на весь экран. В изначальном состоянии их разметка располагается в HTML-файлах с атрибутом hidden, который выключает отображение этих элементов, и они не занимают места на экране. Для отображения модального окна они должны быть указаны в JavaScript-коде при инициализации классов отображения, иначе окно останется невидимым для пользователя.
Разработанный класс Modalпозволяет показывать/скрывать модальное окно - во время показа модальное окно занимает все пользовательское пространство, а также динамически анализировать разметку, находить в ней поля формы для последующих действий по нажатию кнопки «Отправить». Пример модального окна, в данном случае, для загрузки документов, представлен ниже (см. рисунок 3.10).
Рисунок 3.10 - Пример модального окна для создания документов
В разметке модального окна есть несколько составляющих частей, которые распознаются JS-кодом динамически. Во-первых, это контейнер модального окна, который, по сути, занимает весь экран.Благодаря этому нажатия на элементы «под» модальным окном перехватываются, а также есть возможность наложить визуальный эффект затемнения на задний фон. Далее, разметка, которая находится в самом модальном окне, вставляется во внутренний контейнер, который и отображается пользователю.
В программной системе есть несколько видов сущностей, которые целесообразно подгружать динамически на клиентскую сторону: корпуса, документы, а также аннотации. Для этого был разработан класс ItemList, который строит списки сущностей на основе загружаемых с сервера данных.Для отображения сущностей класс использует предварительно созданные шаблоны, которые располагаются на исходной HTML_странице (подобно вышеописанному случаю с модальными окнами). Класс анализирует шаблонную разметку, клонирует ее и снабжает необходимыми обработчиками событий, например, на удаление элемента из списка (см. рисунок 3.11).
Рисунок 3.11 - Пример списка ItemList
Далее будут подробно рассмотрены созданные во время разработки файлы со скриптами. Первым был создан файл «main.js». В нем находятся глобально используемые функции для работы с запросами, обхода DOM-дерева, а также классы Optional для работы с потенциально отсутствующими объектами, Modal, инкапсулирующий логику работы с модальными окнами,ItemList, который определяет механизм работы с динамическим списком элементом, класс View, являющийся базовым для всех классов представления и содержащий некоторые полезные методы для работы с динамическими списками внутри представлений.
Стартовая страница использует «index.js», в котором реализована логика представления для начальной страницы. Здесь проходит регистрация или авторизация пользователя, а также переход на другие страницы портала.
Файл corpora.jsотвечает за логику представления для страницы, отображающей корпусы. В файле содержится расширение классаView, в котором определяются взаимодействия пользователя с элементами страницы, а также регистрируется модальное окно создания корпуса. Внутри класса представления прописаны методы создания нового корпуса, получения списка корпусов с сервера, а также удаления корпуса.
Следующий файл, который был создан - «document.js» - в нем реализована логика представления для страницы отображения документов. Этот файл намного больше, чем предыдущий файл, главным образом из-за того, что здесь также происходит обращение к API, работающему с текстами на сервере. Именно на этой странице происходит отображение аннотированного текста. Здесь же можно загрузить новые документы, посмотреть список документов по корпусу, а также удалить документы из корпуса. Отдельно были созданы методы для работы с аннотациями: их включения/отключения, при которой внутри текста меняется подсветка.
Отладка и тестирование
В ходе разработки были неоднократно встречены ошибки. В большинстве случаев встроенный отладчик IntelliJIDEAпомогал разрешить возникающие проблемы. Для мониторинга запросов, поступающих на сервис, был подключен модуль SpringActuator. Для отладки клиентской части был использован встроенный отладчик GoogleChrome, работа с порталом также осуществлялась с других браузеров: MozillaFirefox, Safari и MicrosoftEdge.
В проекте используется SpringBoot, который реализует архитектуру MVC и предоставляет возможность использовать юнит-тесты для MVC и создавать Mock-объекты. С использованием модуля SpringTestбыли созданы тесты для слоя контроллеров API(см. Приложение В).
Интерфейс приложения был протестирован с помощью разработанных сценариев тестирования (см. Приложение В). При тестировании также учитывалась специфика серверной части, так как и серверная часть, и клиентская была разработана мной лично. Усилия были направлены на полное тестирование интерфейса, чтобы по возможности протестировать все элементы на клиентской стороне.
Заключение
По результатам выполнения работы по анализу предметной области, проектированию, реализации и тестированию была разработана серверная часть портала для анализа академических текстов, а также клиентская часть в объеме, необходимом для тестирования функций, предоставляемых сервером.
В начале исследования был проведен анализ среди существующим решений по корпусным исследованиям, выбран способ хранения корпусов и прочих данных в рамках портала, а также проанализирована релевантная для исследования литература. Были выдвинуты требования к разработанной системе, которые впоследствии были объединены в техническое задание.
После этапа анализа было проведено проектирование системы, которые включило в себя проектирование сущностей базы данных, проектирование серверной части веб-приложения, а также проектирование клиентской части. С помощью MicrosoftVisioбыл спроектирован интерфейс, который впоследствии был реализован, хоть и в измененном и улучшенном в плане дизайна виде.
Финальной выполненной задачей стала реализация программной системы, где с помощью языка Javaи фреймворка SpringBootбыл реализована серверная часть портала, а с помощью HTML5, CSS 4 и JSбез применения фреймворков - клиентская часть. Портал является RESTfulвеб-сервисом, а это значит, что API, предоставляемое им и подробно описанное в главе, посвященной реализации программной системы, доступно для использования любому другому RESTfulвеб-сервису, например, разрабатываемому в рамках Научно-учебной лаборатории в НИУ ВШЭ_Пермь сервису для визуализации статистики по корпусам портала.
Система может регистрировать пользователей, после чего авторизованный пользователь может просматривать корпусы, доступные ему. Администратор портала имеет доступ к более широкому набору функций и может модифицировать любой из представленных на портале корпусов, а также модифицировать, удалять и отстранять пользователей от портала. Каждый корпус содержит в себе определенное количество документов, каждый из которых имеет название и размеченный с помощью библиотеки GATEтекст. Система может отображать размеченный текст в окне браузера, а также перечислять аннотации, которые встречаются в нем.
Для обеспечения динамичности страниц на клиентской стороне был реализован собственный «микро-фреймворк», с помощью которого без лишних зависимостей выполняются все стоящие перед клиентской частью задачи. Многие данные загружаются динамически - для этого были написаны функции для выполнения запросов без перезагрузки страницы.
Несмотря на то, что на данный момент система не может давать рекомендации пользователям по улучшению их академического письма, уже было заложено основание для последующего внедрения этой функции в портал. Система имеет инструменты для регистрации и авторизации пользователей. Пользователи могут создавать корпуса и добавлять в них документы, каждый из которых размечается порталом с помощью библиотеки GATE Embedded.Систему уже могут использовать в своей практике лингвисты, преподаватели, студенты, которые занимаются работой с англоязычными академическими текстами.
Так как работа Научно-учебной лаборатории не заканчивается, в будущем планируется улучить дизайн и эргономичность портала, а также объединить его с микросервисами, созданными другими участниками команды.
Литература
1. GATE General Architecture for Text Processing [Электронный ресурс]. URL: https://gate.ac.uk/ (дата обращения: 20.04.2020).
2. NLTKHomePage [Электронный ресурс]. URL: http://www.nltk.org/ (дата обращения: 20.04.2020).
3. AntConcHomePage [Электронный ресурс]. URL: https://www.laurenceanthony.net/software/antconc/ (дата обращения: 20.04.2020).
4. MongoDBDocumentation [Электронный ресурс]. URL: https://docs.mongodb.com/manual/core/document/ (дата обращения: 20.04.2020).
5. Lanin V., Strinyuk S., Shuchalova Y. Academic papers evaluation software // 2015 9th International Conference on Application of Information and Communication Technologies (AICT). - IEEE, 2015. - С. 506-510.
6. Rusinovci X. Teaching writing through process-genre based approach // US-China Education Review. - 2015. - Т. 5. - №. 10. - С. 699-705.
7. Al Badi I. A. H. Academic writing difficulties of ESL learners //The 2015 WEI International Academic Conference Proceedings. - 2015. - Т. 1. - №. 1. - С. 65_78.
8. Omizo R., Hart-Davidson W. Finding Genre Signals in Academic Writing // Journal of Writing Research. - 2016. - Т. 7. - №. 3.
9. Wu X., Mauranen A., Lei L. Syntactic complexity in English as a lingua franca academic writing // Journal of English for Academic Purposes. - 2020. - Т. 43. - С. 100798.
10. Miller J. The bottom line: Are idioms used in English academic speech and writing? // Journal of English for Academic Purposes. - 2020. - Т. 43. - С. 100810.
11. Liu Y. et al. Write-righter: an academic writing assistant system // Thirtieth AAAI Conference on Artificial Intelligence. - 2016.
12. Lee J. et al. Assisted nominalization for academic English writing //Proceedings of the Workshop on Intelligent Interactive Systems and Language Generation (2IS&NLG). - 2018. - С. 26-30.
13. Microsoft Visio Official Site [Электронный ресурс]. URL: https://www.microsoft.com/ru-ru/microsoft-365/visio/flowchart-software (дата обращения: 20.04.2020).
14. JetBrains Official Product Site [Электронный ресурс]. URL: https://www.jetbrains.com/ru-ru/idea/ (дата обращения: 20.04.2020).
15. Spring Boot Documentation [Электронный ресурс]. URL: https://spring.io/projects/spring-boot (дата обращения: 20.04.2020).
16. Thymeleaf Template Engine for Java [Электронный ресурс]. URL: https://www.thymeleaf.org/ (дата обращения: 20.04.2020).
17. ECMA International ECMAScript Standard [Электронный ресурс]. URL: https://www.ecma-international.org/publications/standards/Ecma-262.htm (дата обращения: 20.04.2020).
18. SpringDataDocumentation [Электронныйресурс]. URL: https://spring.io/projects/spring-data (дата обращения: 19.05.2020).
19. BSON Language Specification [Электронныйресурс]. URL: http://bsonspec.org/ (дата обращения: 21.04.2020).
20. Spring Initializr [Электронный ресурс]. URL: https://start.spring.io/ (дата обращения: 18.05.2020).