Это краткий отчет о недавнем хобби-проекте, который я создал. В этой статье мы рассмотрим спецификации требований, которые я придумал, и то, как мне удалось воплотить проект в жизнь, используя доступные API и Javascript.
Инструмент, который мы здесь обсудим, представляет собой плагин, который работает поверх популярного веб-редактора WYSIWYG HTML под названием TinyMCE.
История пользователя:
Первым шагом в любом процессе разработки программного обеспечения является подготовка четко определенной пользовательской истории. Обычно это документ или, как в нашем случае здесь, просто набор пунктов, описывающих, какой должна быть функциональность программного обеспечения с точки зрения конечного пользователя.
Итак, давайте посмотрим на пользовательскую историю, которую мне удалось придумать:
- Как пользователь редактора TinyMCE, я хотел бы иметь возможность искать синонимы слова или фразы, не выходя из редактора.
- Я хотел бы, чтобы список подходящих синонимов представлялся мне при вводе поискового запроса.
- Я должен иметь возможность выбрать любое слово из предложенного списка, и оно должно автоматически помещаться в редакторе в том месте, где в данный момент находится курсор.
Первоначальное исследование:
При чтении пользовательской истории и документации редактора TinyMCE становится очевидным, что лучший способ реализовать этот инструмент — это плагин для самого редактора.
Но важный вопрос заключается в том, как я буду предлагать синонимы для пользовательского поиска?
Немного погуглив, я с радостью обнаружил, что существует бесплатный API, который служит именно этой цели. API называется Words и предоставляется Datamuse. Я оставляю ссылку на документацию здесь, если вы хотите узнать больше об этом.
Решение о пользовательском интерфейсе:
Возвращаясь к пользовательской истории, пользователю нужен способ выполнять операции, не выходя из окна редактора. Таким образом, одним из жизнеспособных решений является всплывающее окно, которое будет неотъемлемой частью редактора.
Этот подход не только интуитивно понятен, но и прост в реализации. Кроме того, пользователи довольно хорошо знакомы с такими компонентами пользовательского интерфейса и возможностями, поскольку они широко представлены в Интернете.
Подключаемый модуль:
По сути, плагин представляет собой очень простую реализацию на Javascript, которая запрашивает конечную точку слов и заполняет результаты в DOM.
Если вам интересна реализация кода и детализированные детали, не стесняйтесь взглянуть на код в репозитории Github здесь.
Модульные тесты:
Лучше иметь несколько тестов, чем вообще не иметь тестов
Модульные тесты — это не просто приятная штука, это важнейшая часть любого программного проекта любого масштаба. Даже такой простой и небольшой код плагина, как этот, требует тщательного набора тестов не только для проверки качества программного обеспечения, но и для выявления и исправления ошибок на самой ранней стадии процесса разработки.
Кроме того, наличие модульных тестов с хорошим охватом позволит нам в будущем проводить рефакторинг и/или расширять наше программное обеспечение и выпускать его с большой уверенностью, поскольку тесты гарантируют, что основная функциональность не будет нарушена случайно.
Итак, для нашего инструмента я решил написать модульные тесты с использованием фреймворка Jasmine. Ознакомиться с тестовой установкой можно здесь.
Заключительные мысли:
Как видно из кода, если вы посетили ссылку на репозиторий, это быстрый прототип, который был создан менее чем за час или около того. Всегда есть возможности для улучшения.
Например, чтобы улучшить UX, мы могли бы добавить функцию, в которой пользователь мог бы просто выбрать слово или фразу и нажать кнопку плагина, чтобы запросить синонимы. Позже, когда пользователь выберет результат, он заменит выделенный текст.
Как и любой другой программный проект, этот можно улучшать, оптимизировать и расширять.
Ваше здоровье :)
