Добавляем новые возможности через API.
Мы уже рассказывали, что такое API. Теперь используем эту технологию в наших проектах: возьмём ранее сделанный текстовый редактор с нейроорфокорректором и научим его проверять текст в сервисе «Главред» — у него открытый API, который несложно прикрутить.
Логика работы
Как и большинство программистов, мы будем использовать предыдущие наработки и готовые решения — так проще и быстрее. Для проекта нам понадобится:
исходный код текстового редактора с нейронкой Яндекса;
описание API Главреда с официального сайта.
Сейчас редактор работает так: нажимаете пробел или энтер — текст сразу отправляется на проверку. Это не самый рациональный путь, когда у нас будет работать несколько сервисов проверки одновременно, поэтому сделаем для этого отдельную кнопку. Нажимаешь — текст улетает на сервер Яндекса и прилетает уже в исправленном виде.
То же самое сделаем и для Главреда — отдельную кнопку, которая отправит наш текст на проверку в сервис.
Чтобы не усложнять проект, разобъём его на две части: сегодня сделаем только подсветку в Главреде, а во второй части добавим оформление, чтобы выглядело красиво и наглядно.
Переделываем страницу
Для работы нам понадобится исходный код текстового редактора с нейронкой. Для начала изменим код на HTML-странице:
Так как нам нужно будет выделять слова, как в Главреде, то заменим <textarea>, который не умеет форматировать текст, на <div contenteditable="true">, который форматировать умеет. Из-за этого у нас поменяется внешний вид поля ввода — он растянется на всю ширину экрана — но это мы исправим в другой раз.
Чтобы выделять слова, которые нам пришлёт Главред, мы будем использовать тег <span> — в него удобно заворачивать отдельные элементы текста и помечать их любым образом. Сегодня выделим их простой светло-голубой подсветкой, а позднее части заменим на красивое подчёркивание. Для этого добавим описание нового стиля в соответствующий раздел на странице:
/* слова, которые нашёл Главред */ span{
⠀⠀⠀⠀background-color: lightblue; }
Для того чтобы использовать API Главреда, его нужно подключить. В нашем случае это скрипт на JavaScript, поэтому подключаем его на странице, как и любой другой внешний скрипт:
<!-- подключаем API Главреда -->
⠀⠀<script type="text/javascript" src="https://api.glvrd.ru/v1/glvrd.js"></script>
Последнее, что нам осталось сделать, — добавить кнопки управления. Их будет три: исправление орфографии, отправка в Главред и отмена обработки Главредом. Последняя кнопка нужна для того, чтобы отменить текущую проверку, если обработка идёт слишком долго или вам проверка уже оказалась не нужна:
<!-- добавляем отступ --> <br>
<!-- добавляем кнопки на страницу -->
<button id="spell_b" onclick="spell()">Исправить</button>
<button id="glvrd_b" onclick="glvrdz()">Главред</button>
<button id="abort_b" onclick="abort_glvrdz()" disabled>Отменить проверку Главреда</button>
Готовый код страницы
По нажатию на кнопки будут вызываться соответствующие функции, которых у нас пока нет. Чтобы это исправить, все изменения будем вносить в .js-файл из оригинального проекта:
Проверка орфографии по кнопке
Нам больше не нужно обрабатывать каждое нажатие пробела или энтера, поэтому нам больше не нужен обработчик событий по нажатию. Вместо этого нам нужно завести новую функцию spell() — именно она она вызывается по нажатию на кнопку «Исправить».
Чтобы не было такого, что пока текст на проверке, мы отправляем его в Главред, давайте отключать обе эти кнопки на время проверки орфографии. Как только проверка закончится — кнопки снова будут работать. Это поможет нам избежать ситуации, когда на проверку отправятся разные версии текста.
Раньше мы обращались к тексту, написанному пользователем, через вот такое заклинание:
$(' # text_field').val()
Это работало, потому что человек писал в поле вида Textarea, у которого есть значение value, в котором и хранился текст.
Теперь у нас вместо текстовой области (textarea) просто блок на странице — тег <div>. Пользователь будет писать в него, а мы будем доставать из него написанное. Для этого нужно такое заклинание:
document.getElementById('text_field').innerHTML
Теперь заходим в уже написанную нами функцию fix_spell() и меняем обращение к тексту.
Вот что у нас получится после всех исправлений:
API Главреда — подготовка
На официальной странице API проекта можно найти готовый пример — возьмём его за основу и немного переделаем под наши задачи.
Сначала добавим блок проверки доступности сервиса — если Главред недоступен, мы сразу получим сообщение об этом. Просто скопируем из примера и вставим в начало нашего .js-файла:
Там же находим команду отмены проверки и вставляем его в функцию abort_glvrdz(), которая вызывается при нажатии на кнопку «Отменить проверку Главреда»:
API Главреда — отправка и расшифровка результатов
Теперь поработаем с самим API и результатом, который мы получим в ответ. Если внимательно почитать код и описание функций, то можно заметить, что:
• мы должны сначала отправить наш текст на сервер с помощью метода glvrd.proofread();
• в ответ мы получим объект result, в котором будет всё, что сервис думает по поводу нашего текста;
• среди содержимого result есть свойство fragments — это массив, в котором содержатся найденные слова, которые нам нужно выделить;
• у каждого элемента такого массива есть свои свойства: начало стоп-слова (с какого символа по порядку оно начинается), конец и подсказка. Подсказка нам пока не нужна, а вот начало и конец пригодятся.
Получается, что нам известны координаты начала и конца найденных слов, на которые сервис обратил внимание, а значит, мы можем в этих местах поставить тег <span>..</span>. Мы в этот тег завернём все найденные стоп-слова, а так как мы всё делаем на странице в элементе <div>, то браузер сам выделит эти слова так, как написано у нас в стилях.
Так как мы можем узнать размер массива fragments, то сделаем это в цикле — будем находить каждое слово и отправлять его в функцию, которая добавит нужные теги до и после слова. В качестве параметров функции мы будем передавать координаты начала и конца слов.
Здесь есть один тонкий момент: когда мы добавим в строку наши теги <span>..</span>, то у нас изменится длина строки и собьются все координаты остальных стоп-слов. Чтобы этого не произошло, мы добавим переменную смещения — в ней будем хранить то количество символов, на сколько мы увеличили длину строки. Например, когда мы добавим тег <span>, то этим мы увеличим длину строки на 6 символов, а когда закрывающий тег — на 7 символов.
Чтобы при каждой отправке мы получали новый результат, на который не влияет подсветка старых слов, мы будем очищать наш текст от тега <span>..</span> при каждой отправке. Это позволит нам каждый раз получать новую и правильную разметку текста.
С кнопками на странице поступаем так же, как и при проверке на ошибки — на время проверки делаем их неактивными, а кнопку отмены проверки в Главреде, наоборот, активной.
Готовый код скрипта
Попробуйте теперь собрать этот проект самому или протестируйте его на нашем сервере. Сравним результат с оригиналом:
Что дальше
Наш пример хоть и показывает, как можно использовать API для своих проектов, но выглядит при этом очень неказисто:
• плохие отступы от краёв экрана
• подсветка текста вместо подчёркивания
• нет подсказок
• нет ссылок на правила хорошего текста
• нет оценки
Всё это мы исправим в следующей итерации, а пока попробуйте сделать это сами.
Больше статей о программирование, IT и технологиях на нашем сайте