{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем новые возможности через API.","type":"unstyled","key":"5at8o"},{"data":{"image":{"id":"5f756dcacdcd496427df040c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"1hq8d"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":13,"offset":21}],"inlineStyleRanges":[],"text":"Мы уже рассказывали, что такое API. Теперь используем эту технологию в наших проектах: возьмём ранее сделанный текстовый редактор с нейроорфокорректором и научим его проверять текст в сервисе «Главред» — у него открытый API, который несложно прикрутить.","type":"unstyled","key":"9bskj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Логика работы","type":"header-two","key":"790fr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как и большинство программистов, мы будем использовать предыдущие наработки и готовые решения — так проще и быстрее. Для проекта нам понадобится:","type":"unstyled","key":"82p1h"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":20,"offset":13},{"key":2,"length":18,"offset":79}],"inlineStyleRanges":[],"text":"исходный код текстового редактора с нейронкой Яндекса;\nописание API Главреда с официального сайта.\n","type":"unstyled","key":"d6l79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сейчас редактор работает так: нажимаете пробел или энтер — текст сразу отправляется на проверку. Это не самый рациональный путь, когда у нас будет работать несколько сервисов проверки одновременно, поэтому сделаем для этого отдельную кнопку. Нажимаешь — текст улетает на сервер Яндекса и прилетает уже в исправленном виде.","type":"unstyled","key":"d4sah"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"То же самое сделаем и для Главреда — отдельную кнопку, которая отправит наш текст на проверку в сервис.","type":"unstyled","key":"8qntm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы не усложнять проект, разобъём его на две части: сегодня сделаем только подсветку в Главреде, а во второй части добавим оформление, чтобы выглядело красиво и наглядно.","type":"unstyled","key":"fvn2r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переделываем страницу","type":"header-two","key":"en0jp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для работы нам понадобится исходный код текстового редактора с нейронкой. Для начала изменим код на HTML-странице:","type":"unstyled","key":"b7q9r"},{"data":{"embedData":{"type":"github-gist","nickname":"thecodemedia","id":"00b6d2a7daa5cf79fef2d956c3db05f1"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"3dhgl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":67,"style":"BOLD"},{"length":28,"offset":120,"style":"BOLD"}],"text":"Так как нам нужно будет выделять слова, как в Главреде, то заменим

, который не умеет форматировать текст, на <div contenteditable=\"true\">, который форматировать умеет. Из-за этого у нас поменяется внешний вид поля ввода — он растянется на всю ширину экрана — но это мы исправим в другой раз.","type":"unstyled","key":"db1f8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":77,"style":"BOLD"}],"text":"Чтобы выделять слова, которые нам пришлёт Главред, мы будем использовать тег <span> — в него удобно заворачивать отдельные элементы текста и помечать их любым образом. Сегодня выделим их простой светло-голубой подсветкой, а позднее части заменим на красивое подчёркивание. Для этого добавим описание нового стиля в соответствующий раздел на странице:","type":"unstyled","key":"e6v2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"/* слова, которые нашёл Главред */ span{","type":"blockquote","key":"1tnhb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"⠀⠀⠀⠀background-color: lightblue; }","type":"blockquote","key":"47b6d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для того чтобы использовать API Главреда, его нужно подключить. В нашем случае это скрипт на JavaScript, поэтому подключаем его на странице, как и любой другой внешний скрипт:","type":"unstyled","key":"cdoed"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"   ","type":"blockquote","key":"5ulmt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"⠀⠀<script type=\"text/javascript\" src=\"https://api.glvrd.ru/v1/glvrd.js\"></script>","type":"blockquote","key":"ds9pa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Последнее, что нам осталось сделать, — добавить кнопки управления. Их будет три: исправление орфографии, отправка в Главред и отмена обработки Главредом. Последняя кнопка нужна для того, чтобы отменить текущую проверку, если обработка идёт слишком долго или вам проверка уже оказалась не нужна:","type":"unstyled","key":"dsjs5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"   <br>   ","type":"blockquote","key":"7khog"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"   ","type":"blockquote","key":"foir3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<button id=\"spell_b\" onclick=\"spell()\">Исправить</button>   ","type":"blockquote","key":"8mlu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<button id=\"glvrd_b\" onclick=\"glvrdz()\">Главред</button>   ","type":"blockquote","key":"3pakg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"<button id=\"abort_b\" onclick=\"abort_glvrdz()\" disabled>Отменить проверку Главреда</button>","type":"blockquote","key":"fk6en"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Готовый код страницы","type":"header-two","key":"5fni3"},{"data":{"embedData":{"type":"github-gist","nickname":"thecodemedia","id":"2e1a33cedd90649072b21be1bfc53582"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"470dk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По нажатию на кнопки будут вызываться соответствующие функции, которых у нас пока нет. Чтобы это исправить, все изменения будем вносить в .js-файл из оригинального проекта:","type":"unstyled","key":"2g1l2"},{"data":{"embedData":{"type":"github-gist","nickname":"thecodemedia","id":"d7f2c06ac84b1b4e7a8b1b8a36a37f0c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"1arku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверка орфографии по кнопке","type":"header-two","key":"5ukq6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":172,"style":"BOLD"}],"text":"Нам больше не нужно обрабатывать каждое нажатие пробела или энтера, поэтому нам больше не нужен обработчик событий по нажатию. Вместо этого нам нужно завести новую функцию spell() — именно она она вызывается по нажатию на кнопку «Исправить».","type":"unstyled","key":"22s5d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы не было такого, что пока текст на проверке, мы отправляем его в Главред, давайте отключать обе эти кнопки на время проверки орфографии. Как только проверка закончится — кнопки снова будут работать. Это поможет нам избежать ситуации, когда на проверку отправятся разные версии текста.","type":"unstyled","key":"ppck"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Раньше мы обращались к тексту, написанному пользователем, через вот такое заклинание: ","type":"unstyled","key":"bmcr3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$(' # text_field').val()","type":"blockquote","key":"7rpse"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это работало, потому что человек писал в поле вида Textarea, у которого есть значение value, в котором и хранился текст.","type":"unstyled","key":"rpih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":79,"style":"BOLD"}],"text":"Теперь у нас вместо текстовой области (textarea) просто блок на странице — тег <div>. Пользователь будет писать в него, а мы будем доставать из него написанное. Для этого нужно такое заклинание:","type":"unstyled","key":"ameq8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.getElementById('text_field').innerHTML","type":"blockquote","key":"39srh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":45,"style":"BOLD"}],"text":"Теперь заходим в уже написанную нами функцию fix_spell() и меняем обращение к тексту.","type":"unstyled","key":"dekr1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот что у нас получится после всех исправлений:","type":"unstyled","key":"82p4m"},{"data":{"embedData":{"type":"github-gist","nickname":"thecodemedia","id":"07868ed4e3af25830a6b6b73170c07d5"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"4jn41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"API Главреда — подготовка","type":"header-two","key":"1umiu"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":20,"offset":3}],"inlineStyleRanges":[],"text":"На официальной странице API проекта можно найти готовый пример — возьмём его за основу и немного переделаем под наши задачи.","type":"unstyled","key":"cq1uc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сначала добавим блок проверки доступности сервиса — если Главред недоступен, мы сразу получим сообщение об этом. Просто скопируем из примера и вставим в начало нашего .js-файла:","type":"unstyled","key":"2sjbt"},{"data":{"image":{"id":"5f759362cdcd4964271bfb7b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"fokqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":65,"style":"BOLD"}],"text":"Там же находим команду отмены проверки и вставляем его в функцию abort_glvrdz(), которая вызывается при нажатии на кнопку «Отменить проверку Главреда»:","type":"unstyled","key":"4q9tg"},{"data":{"image":{"id":"5f75938ec859e64d8091b824"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"8jrle"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"API Главреда — отправка и расшифровка результатов","type":"header-two","key":"8sd4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь поработаем с самим API и результатом, который мы получим в ответ. Если внимательно почитать код и описание функций, то можно заметить, что:","type":"unstyled","key":"fnetj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":67,"style":"BOLD"},{"length":6,"offset":114,"style":"BOLD"},{"length":9,"offset":227,"style":"BOLD"}],"text":"• мы должны сначала отправить наш текст на сервер с помощью метода glvrd.proofread();\n• в ответ мы получим объект result, в котором будет всё, что сервис думает по поводу нашего текста;\n• среди содержимого result есть свойство fragments — это массив, в котором содержатся найденные слова, которые нам нужно выделить;\n• у каждого элемента такого массива есть свои свойства: начало стоп-слова (с какого символа по порядку оно начинается), конец и подсказка. Подсказка нам пока не нужна, а вот начало и конец пригодятся.","type":"unstyled","key":"2kdqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":153,"style":"BOLD"}],"text":"Получается, что нам известны координаты начала и конца найденных слов, на которые сервис обратил внимание, а значит, мы можем в этих местах поставить тег <span>..</span>. Мы в этот тег завернём все найденные стоп-слова, а так как мы всё делаем на странице в элементе <div>, то браузер сам выделит эти слова так, как написано у нас в стилях.","type":"unstyled","key":"b7r59"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":39,"style":"BOLD"}],"text":"Так как мы можем узнать размер массива fragments, то сделаем это в цикле — будем находить каждое слово и отправлять его в функцию, которая добавит нужные теги до и после слова. В качестве параметров функции мы будем передавать координаты начала и конца слов.","type":"unstyled","key":"5j0b7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":67,"style":"BOLD"}],"text":"Здесь есть один тонкий момент: когда мы добавим в строку наши теги <span>..</span>, то у нас изменится длина строки и собьются все координаты остальных стоп-слов. Чтобы этого не произошло, мы добавим переменную смещения — в ней будем хранить то количество символов, на сколько мы увеличили длину строки. Например, когда мы добавим тег <span>, то этим мы увеличим длину строки на 6 символов, а когда закрывающий тег — на 7 символов.","type":"unstyled","key":"19iqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":134,"style":"BOLD"}],"text":"Чтобы при каждой отправке мы получали новый результат, на который не влияет подсветка старых слов, мы будем очищать наш текст от тега <span>..</span> при каждой отправке. Это позволит нам каждый раз получать новую и правильную разметку текста.","type":"unstyled","key":"7rplp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С кнопками на странице поступаем так же, как и при проверке на ошибки — на время проверки делаем их неактивными, а кнопку отмены проверки в Главреде, наоборот, активной.","type":"unstyled","key":"dlmee"},{"data":{"embedData":{"type":"github-gist","nickname":"thecodemedia","id":"4a173757637e330d2010201917848f31"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"99u6o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Готовый код скрипта","type":"header-two","key":"73dhr"},{"data":{"embedData":{"type":"github-gist","nickname":"thecodemedia","id":"1d09501e6aeeadaa5bbad83052df0bfb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:embed","key":"1g7h6"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":13,"offset":49}],"inlineStyleRanges":[],"text":"Попробуйте теперь собрать этот проект самому или протестируйте его на нашем сервере. Сравним результат с оригиналом:","type":"unstyled","key":"ffnm9"},{"data":{"image":{"id":"5f759471a4b55f1a91d8e705"},"tmpImages":[{"id":"5f759471a4b55f1a91d8e705"}],"contents":{"5f759471a4b55f1a91d8e705":"Вот так выглядит текст, который проверил настоящий Главред. Кроме стоп-слов он проверяет читаемость и удобство чтения."}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот так выглядит текст, который проверил настоящий Главред. Кроме стоп-слов он проверяет читаемость и удобство чтения.","type":"atomic:image","key":"f0dmm"},{"data":{"image":{"id":"5f75949828bb441afdbcde36"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А вот, что мы получили с API. Отличие в том, что на момент написания этой статьи доступен только старый API, где есть только проверка на стоп-слова.","type":"atomic:image","key":"utab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что дальше","type":"header-two","key":"1ee02"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наш пример хоть и показывает, как можно использовать API для своих проектов, но выглядит при этом очень неказисто:","type":"unstyled","key":"9pjtt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"• плохие отступы от краёв экрана\n• подсветка текста вместо подчёркивания\n• нет подсказок\n• нет ссылок на правила хорошего текста\n• нет оценки","type":"unstyled","key":"augsq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всё это мы исправим в следующей итерации, а пока попробуйте сделать это сами.","type":"unstyled","key":"1hns4"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":14,"offset":51}],"inlineStyleRanges":[{"length":65,"offset":0,"style":"BOLD"}],"text":"Больше статей о программирование, IT и технологиях на нашем сайте","type":"unstyled","key":"3klsi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3jq9f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dveqq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f1efr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"15ej6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"f19um"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"76d68"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"fb58j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bvgtb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3vtdu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3krea"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"EwtrVhwlBvz6ixA5PhFY"}],"entityMap":{"0":{"data":{"url":"https://zen.yandex.ru/media/code/chto-takoe-api-5f7187f26e33974a019aa1b0"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://zen.yandex.ru/media/code/podkliuchaem-k-saitu-orfokorrektor-orfoneirokorrektor-5d5274121ee34f00ac7e6ba4"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://glvrd.ru/api/","url":"https://glvrd.ru/api/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://glvrd.ru/api/","url":"https://glvrd.ru/api/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"http://mihailmaximov.ru/orfo2/orfo.html","url":"http://mihailmaximov.ru/orfo2/orfo.html"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://thecode.media/b1","url":"https://thecode.media/b1"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}</article></body></html>