Что такое api в скрипте

Что такое API и как это работает?

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

Что такое API?

API (сокр. от «Application Programming Interface») — это программный интерфейс приложения, который предоставляет разработчику набор функций вместе с описанием того, что эти функции делают. Разработчику необязательно знать, как, например, операционная система создает и отображает диалоговое окно «Сохранить как». Достаточно того, что такой функционал существует и доступен для использования в приложении разработчика.

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

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

Как работают API?

Предположим, вы хотите создать приложение для iPhone. Чтобы облегчить вам эту задачу, операционная система iOS от Apple, как и любая другая операционная система, предоставляет большой набор API. Например, если вы хотите иметь в своем приложении средство отображения одной или нескольких веб-страниц, вам не нужно будет с нуля программировать свой собственный веб-браузер. Достаточно обратиться к API WKWebView, чтобы встроить движок WebKit (Safari) в свое приложение.

Если вы хотите делать фотографии или снимать видео с камеры iPhone, то, опять же, нет необходимости писать свой собственный интерфейс камеры, когда уже есть готовый API. С его помощью вы можете с легкостью добавить возможности встроенной камеры iPhone в свое приложение. Если бы не существовало API, то разработчикам приложений пришлось бы реализовывать собственное программное обеспечение и правильно обрабатывать поступающие с камеры данные. Но создатели операционных систем Apple уже проделали за них всю эту тяжелую работу, поэтому разработчики могут просто использовать готовые API для встраивания камеры и приступить к созданию своего приложения. И когда Apple улучшит API камеры, все приложения, которые его используют, автоматически получат данные улучшения.

Стоит отметить, что это относится и к любой другой платформе. Например, вы хотите создать диалоговое окно в Windows? Для этого есть API. Хотите поддерживать аутентификацию по отпечаткам пальцев на Android? Для этого тоже есть API.

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

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

Где используются API?

Рассмотрим наиболее популярные применения:

API применяются в настольных приложениях.

API лежат в основе большинства веб-приложений.

API делают возможным существование мобильных приложений.

API являются интеграцией для т.н. no-code решений.

API позволяют различным устройствам подключаться к Интернету.

API определяют правила передачи информации между приложениями, системами и устройствами.

API даже присутствуют в таких повседневных вещах, как: автомобили, дверные звонки, посудомоечные машины и носимые устройства.

API и контроль доступа к ресурсам

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

Например, когда вы посещаете веб-сайт и видите в своем браузере сообщение о том, что веб-сайт запрашивает разрешение на определение вашего точного местоположения, это означает, что веб-сайт пытается использовать API геолокации в вашем веб-браузере. Веб-браузеры предоставляют такие API, чтобы веб-разработчикам было легко получить доступ к вашему местоположению: они могут просто спросить о вашем местоположении, и дальше браузер сам выполнит всю тяжелую работу по доступу к GPS или близлежащим сетям Wi-Fi, чтобы определить вашу геолокацию.

В то же время, браузеры предоставляют эту информацию именно через API, потому что в этом случае можно контролировать доступ к запрашиваемым функциям. Когда веб-сайт хочет получить доступ к вашему точному местоположению, единственный способ сделать это — через специализированный API определения местоположения. И когда веб-сайт пытается его использовать, вы, как пользователь, можете разрешить или отклонить данный запрос. Единственный способ получить доступ к аппаратным ресурсам (таким, как датчик GPS) — через API. Поэтому браузер может контролировать доступ к оборудованию и ограничивать возможности приложений.

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

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

API и связь между сервисами

Применение API происходит и по многим другим причинам. Например, если вы когда-либо видели на веб-сайте встроенный сервис карт Google Maps, то это означает, что веб-сайт использует API Google Maps. Google предоставляет подобные API веб-разработчикам, которые затем могут их использовать для размещения сложных объектов прямо на своем веб-сайте. Если бы таких API не существовало, разработчикам, возможно, пришлось бы создавать свои собственные карты и предоставлять свои собственные картографические данные, просто чтобы разместить небольшую интерактивную карту на веб-сайте.

И, поскольку это API, Google может контролировать доступ к своим картам на сторонних веб-сайтах, гарантируя, что они будут использовать его согласованным образом, а не пытаться беспорядочно встроить фрейм, который показывает, например, веб-сайт Google Maps.

Это относится и ко многим различным онлайн-сервисам. Существуют API для запроса перевода текста из Google Translate или для размещения комментариев Facebook и т.д.

Стандарт OAuth также определяет ряд API, которые позволяют вам авторизоваться на веб-сайте с помощью других сервисов, например, использовать свои учетные записи Facebook, Google или Twitter без создания новой учетной записи пользователя на текущем веб-сайте. API — это «контракты», которые определяют, как разработчики взаимодействуют с сервисами, и вид выходных данных, которые эти разработчики должны получить обратно.

Заключение

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

Лучшие способы вызова API на Javascript

Современный веб-мир невозможно представить без JavaScript. За годы своего развития JavaScript прошел путь от небольшого дополнения до языка. Сегодня, в эпоху глобального погружения в веб-среду, JavaScript успешно помогает разработчикам как фронтенда, так и бэкенда.

Функциональность приложения, которое будет рассматриваться далее, в основном связана со взаимодействием с различными API через библиотеки с открытым исходным кодом. При работе с JavaScript чрезвычайно важно знать, как посылать HTTP-запросы и получать динамические данные с сервера/базы данных.

Что вам понадобится

Что такое API?

API — это аббревиатура, образованная от словосочетания Application Programming Interface (интерфейс прикладного программирования). Это посредник, осуществляющий передачу данных запроса/ответа между клиентом и сервером.

В качестве примера из реальной жизни рассмотрим процесс заказа такси через Uber из Дели в Гургаон. Сначала заходим в приложение и вводим место отправления и пункт назначения. В это время сервис Google Maps API получает данные о расстоянии между двумя городами, а API Uber связывает API-данные Google Maps со своим API. В итоге получаем актуальную информацию о расстоянии до пункта назначения и количестве доступных водителей такси.

В примере выше Google Maps использует API Uber для запроса информации, отправляя функцию HTTP-запроса, содержащего начальный и конечный пункт поездки.

Теперь посмотрим, как вызвать API в JavaScript с помощью нескольких библиотек с открытым исходным кодом. Три основных метода вызова API:

1. XMLHttpReques;
2. Fetch;
3. Axios.

XMLHttpRequest

XMLHttpRequest — это объект браузера, который позволяет делать HTTP-запросы на JavaScript. В настоящее время все современные веб-браузеры имеют встроенный объект XMLHttpRequest для запроса данных с сервера.

XMLHttpRequest производит две операции: синхронную и асинхронную.

Асинхронная операция:

Синхронная операция:

Если в методе open третий параметр async установлен в false , то запрос выполняется синхронно.

Fetch

JS-метод fetch() используется для запроса к серверу и загрузки данных на веб-страницах. Fetch API — такой же простой, интуитивно понятный интерфейс, как и XMLHttpRequest, применяемый для асинхронного использования ресурсов.

Основное отличие заключается в том, что в настоящее время Fetch работает с промисами, а не с обратными вызовами. Разработчики JavaScript стали отказываться от обратных вызовов после появления промисов.

Fetch API очень просто использовать. Нужно просто передать URL, путь к нужному ресурсу, методу fetch() :

В качестве параметра в fetch() передается маршрут к необходимому ресурсу. Он возвращает промис, который при выполнении передает ответ в then() . Метод catch() перехватывает ошибки, если запрос не удается завершить из-за сбоя в сети или по какой-либо другой причине.

Axios

Axios — это библиотека с открытым исходным кодом, которая помогает выполнять HTTP-запросы. Она предоставляет методы .get() , .post() и .delete() .

Установка Axios

Установить Axios можно с помощью:

> или через сеть доставки контента:

Теперь можно отправлять HTTP-запросы, включив следующий скрипт в HTML и .js файл.

Базовый API Axios

Рост популярности Axios среди разработчиков привел к появлению богатого выбора сторонних библиотек.

Что такое API и как с ним работать: практические примеры

Аббревиатуру API часто можно встретить в вакансиях разработчиков программного обеспечения, особенно, если сфера деятельности так или иначе связана с вебом. Это специальная инфраструктура, используемая для “общения” программ друг с другом. Сама аббревиатура API расшифровывается как “Application Programming Interface” или просто программный интерфейс. Для многих продуктов процесс разработки или налаживания существующего API является обязательной частью процесса. Даже начинающему разработчику желательно понимать принципы его работы, а еще лучше уметь с ним взаимодействовать.

Что такое API

API — это набор протоколов, мини-программ и других вспомогательных инструментов для разработки, настройки и отладки приложений. С помощью них производится настройка взаимодействия нескольких отдельных компонентов более крупной программы или ее части. Например, оплата на сайте — пользователю требуется заполнить соответствующую форму и подтвердить перевод средств. За взаимодействие обработчика формы и платежного сервиса отвечают как раз API-компоненты.

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

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

Особенности API

При работе с API нужно учитывать следующие особенности:

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

Программу, сервис или другой программный продукт, внутреннее устройство которого скрыто от пользователя, часто называют “черным ящиком”. Степень сокрытия же обозначают уровнем абстракции. С их помощью происходит ускорение разработки, так как готовые решения можно использовать и в других программах. Некоторые программы и ОС уже предоставляют свои API для реализации следующим базовых возможностей:

• взаимодействие с файловыми системами;
• хранения данных;
• отрисовка графики;
• воспроизведение медиа-контента;
• использование сетевых возможностей.

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

Что делает API таким популярным

Сторонние API обычно безопаснее и лучше самописных во всех отношениях, так как над ними работает команда разработчиков, которая дорожит своей репутацией. Для большинства проектов совсем не требуется “изобретать колесо”, однако ничего не мешает создать и использовать собственное, закрытое API. Такое решение часто применяется в крупных проектах, где есть несколько команд разработчиков.

У API есть следующие преимущества:

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

Какой функционал может входить в API

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

Некоторые API для коммерческой реализации могут открывать доступ к своим дополнительным функциям за отдельную плату.

Вызов функции API

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

В качестве примера посмотрим, как подключить библиотеку в Python и выполнить ее вызов:

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

Еще есть вариант с косвенным вызовом функций API, когда есть некий “посредник”. Самый банальный пример — обновление страницы в браузере, когда используется специальная кнопка у адресной строки. В данном случае “посредником” выступает графический интерфейс программы. Однако в качестве “посредника” может быть другая функция или даже другое API.

Практическое использование API

В большинстве проектов используются сторонние коммерческие API. Зачастую они предоставляются популярными сервисами и компаниями — Google, Twitter, Amazon, Яндекс и другие. API поисковых систем применяется для настройки взаимодействия пользователей с данными, основанными на отображении в реальном времени и сигналах трафика. Решения от социальных сетей и некоторых популярных сервисов, как правило, нацелено на более узкий сегмент, например, отображение определенных твитов, взаимодействие с ботами, рекламными кабинетами.

Тестирование API

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

Протестируем стандартную отправку и обработку запроса:

1. Перейдя на главную Postman нажмите кнопку “New”. В выпадающем списке выберите “Request”.

2. Появится окошко с параметрами настраиваемого запроса. Здесь требуется просто задать его название и описание, а также коллекцию, в которой он будет хранится.

3. Откроется форма создания GET-запросов. Укажите URL-адрес запроса. В первой части ссылки требуется указать адрес сервера, где развернута ваша TMC.

Форма создания GET-запроса

4. В блоке параметров укажите ключи запроса. Для примера попытаемся получить данные об удаленных элементах. Выставьте значение isDeleted=true.

5. Переключитесь во вкладку “Authorization”. Там требуется указать данные для вашей или пользовательской идентификации. Сервис поддерживает множество типов авторизации, поэтому используйте ту, которая вам кажется наиболее удобной.

Доступные типы авторизации

6. Нажмите кнопку “Send” в верхней части интерфейса для отправки запроса. Статус запроса с подробным разбором можно будет увидеть в нижней части.

Создание тестов в Postman

Прием и отправка запросов позволяет получить лишь самое базовое представление о работоспособности подключенного API. Для более подробного тестирования потребуется воспользоваться другими инструментами сервиса. Сами тесты требуется писать на языке JavaScript, но можно использовать и встроенные в сервисе шаблоны.

В качестве примера рассмотрим простой код, который будет будет проверять проект на работоспособность (код 200, есть ответ), находить и выводить ранее удаленные редакции.

Пример кода:

Если в проверяемой директории еще нет удаленных проектов, то данный скрипт не пройдет тестирование и вы получите ошибку. Если таковые имеются, то они будут выведены в отдельный массив. Такой тест позволяет быстро проверить общий проект на наличие недостающих элементов и корректность их работы.

Пример редактора скриптов для тестирования

Все результаты тестирования находятся во вкладке “Test Results”.

Реализация функционала через API

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

Создайте файл index.js или любой другой для записи скрипта. В рассматриваемом примере применяется следующий скрипт:

Отдельно обратим внимание на функцию request. Здесь требуется указывать метод POST для передачи данных в API Snipcart.

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

Заключение

Резюме:

1. API-интерфейсы пускай и кажутся сложными, но способны ускорить разработку и тестирование, так как позволяют исключить написание кода — можно просто подключить библиотеку и настроить ее под текущий проект.
2. API действительно часто применяются в веб-разработке, но и в других сферах их применение тоже носит повсеместный характер.
3. Внимательно изучайте документацию к выбранным API для работы с вашим проектом. Это улучшит качество кода, работы программы и позволит сэкономить время на поиск и устранение ошибок.
4. Перед реализацией проекта обозначьте для себя и заказчика функционал и найдите API, отвечающие вашим требованиям. Иногда заказчики предоставляют доступ к собственным API решениям, но при этом могут запретить использовать посторонние.

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

Введение в web APIs

Начнём с рассмотрения того что представляют собой API на высоком уровне и выясним, как они работают, как их использовать в своих программах и как они структурированы. Также рассмотрим основные виды API и их применение.

Что такое API?

Интерфейс прикладного программирования (Application Programming Interfaces, APIs) — это готовые конструкции языка программирования, позволяющие разработчику строить сложную функциональность с меньшими усилиями. Они «скрывают» более сложный код от программиста, обеспечивая простоту использования.

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

Точно также, если мы хотим, например, программировать 3D графику, гораздо легче сделать это с использованием API, написанных на языках высокого уровня, таких как JavaScript или Python.

Примечание: Смотрите также API в словаре.

API клиентской части JavaScript

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

• API браузера встроены в веб-браузер и способны использовать данные браузера и компьютерной среды для осуществления более сложных действий с этими данными. К примеру, API Геолокации (Geolocation API) предоставляет простые в использовании конструкции JavaScript для работы с данными местоположения, так что вы сможете, допустим, отметить своё расположение на карте Google Map. На самом деле, в браузере выполняется сложный низкоуровневый код (например, на C++) для подключения к устройству GPS (или любому другому устройству геолокации), получения данных и передачи их браузеру для обработки вашей программой, но, как было сказано выше, эти детали скрыты благодаря API.
• Сторонние API не встроены в браузер по умолчанию. Такие API и информацию о них обычно необходимо искать в интернете. Например, Twitter API позволяет размещать последние твиты (tweets) на вашем веб-сайте. В данном API определён набор конструкций, осуществляющих запросы к сервисам Twitter и возвращающих определённые данные.

Взаимодействие JavaScript, API и других средств JavaScript

Итак, выше мы поговорили о том, что такое JavaScript API клиентской части и как они связаны с языком JavaScript. Давайте теперь тезисно запишем основные понятия и определим назначение других инструментов JavaScript:

• JavaScript — Язык программирования сценариев высокого уровня, встроенный в браузер, позволяющий создавать функциональность веб-страниц/приложений. Отметим, что JavaScript также доступен на других программных платформах, таких как Node. Но пока не будем останавливаться на этом.
• API браузера (Browser APIs) — конструкции, встроенные в браузер, построенные на основе языка JavaScript, предназначенные для облегчения разработки функциональности.
• Сторонние API (Third party APIs) — конструкции, встроенные в сторонние платформы (такие как Twitter, Facebook) позволяющие вам использовать часть функциональности этих платформ в своих собственных веб-страницах/приложениях (например, показывать последние Твиты на вашей странице).
• Библиотеки JavaScript — Обычно один или несколько файлов, содержащих пользовательские (custom) функции. Такие файлы можно прикрепить к веб-странице, чтобы ускорить или предоставить инструменты для написания общего функциональности. Примеры: jQuery, Mootools и React.
• JavaScript фреймворки (frameworks) — Следующий шаг в развитии разработки после библиотек. Фреймворки JavaScript (такие как Angular и Ember) стремятся к тому, чтобы быть набором HTML, CSS, JavaScript и других технологий, после установки которого можно «писать» веб-приложение с нуля. Главное различие между фреймворками и библиотеками — «Обратное направление управления» ( “Inversion of Control” ). Вызов метода из библиотеки происходит по требованию разработчика. При использовании фреймворка — наоборот, фреймворк производит вызов кода разработчика.

На что способны API?

Широкое разнообразие API в современных браузерах позволяет наделить ваше приложение большими возможностями. Достаточно посмотреть список на странице MDN APIs index page.

Распространённые API браузера

В частности, к наиболее часто используемым категориям API (и которые мы рассмотрим далее в этом модуле) относятся :

• API для работы с документами, загруженными в браузер. Явный пример — DOM (Document Object Model) API, позволяющий работать с HTML и CSS — создавать, удалять и изменять HTML, динамически изменять вид страницы и т.д. Любое всплывающее окно на странице или появляющееся «на ходу» содержимое — всё это благодаря DOM. Узнайте больше об этой категории API на странице Работа с документами.
• API, принимающие данные от сервера, часто используются, чтобы обновить небольшие части веб-страницы. Эта, казалось бы, малая деталь оказывает огромное влияние на производительность и поведение сайтов, так как нет необходимости перезагружать всю страницу целиком, если вам нужно просто обновить список товаров или новых доступных историй. Это также сделает приложение или сайт более отзывчивым и «живым». Список API, благодаря которым это возможно, включает: XMLHttpRequest и Fetch API. Вы также могли встретить термин Ajax, описывающий эту технологию. Узнать больше об этой категории API на странице Получение данных от сервера.
• API для работы с графикой широко поддерживаются браузерами, самые популярные: Canvas и WebGL, позволяющие программно изменять данные о пикселях, содержащиеся в элементе HTML <canvas> для создания 2D и 3D изображений. Например, вы можете нарисовать фигуры, скажем, прямоугольники или круги, импортировать изображение в canvas и применить к нему фильтры, такие как сепия или оттенки серого с помощью Canvas API, или создать сложное 3D-изображение с освещением и текстурами, используя WebGL. Такие API часто используют в сочетании с API создания анимационных циклов (таких как window.requestAnimationFrame() ) и другими для создания постоянно меняющегося изображения на экране, как в мультфильмах или играх .
• Аудио и Видео API как HTMLMediaElement , Web Audio API, и WebRTC позволяют делать действительно интересные вещи с мультимедиа. Например, создать собственный пользовательский интерфейс (User Interface, UI) для проигрывания аудио/видео, вывод на экран субтитров, записывать видео с веб-камеры для обработки в canvas (см. выше) или для передачи на другой компьютер в видео-конференции, применять звуковые эффекты к аудио-файлам (такие как gain, distortion, panning и т.д.).
• API устройств — в основном, API для обработки и считывания данных с современных устройств удобным для работы веб-приложений образом. Мы уже говорили об API Геолокации, позволяющем считать данные о местоположении устройства. Другие примеры включают уведомление пользователя о появившемся обновлении для веб-приложения с помощью системных уведомлений (см. Notifications API) или вибрации (см. Vibration API (en-US)).
• API хранения данных на стороне пользователя приобретают всё большее распространение в веб-браузерах — возможность хранить информацию на стороне клиента очень полезна, когда необходимо создать приложение, которое будет сохранять своё состояние между перезагрузками страницы, или даже работать, когда устройство не в сети. В данный момент доступно немало таких API. Например, простое хранилище данных в формате имя/значение (name/value) Web Storage API или хранилище данных в формате таблиц IndexedDB API.

Распространённые сторонние API

Существует множество сторонних API; некоторые из наиболее популярных, которые вы рано или поздно будете использовать, включают:

для добавления такой функциональности, как показ последних твитов на сайте. для работы с картами на веб-странице (интересно, что Google Maps также использует этот API). Теперь это целый набор API, который может справляться с широким спектром задач, как свидетельствует Google Maps API Picker. позволяет использовать различные части платформы Facebook в вашем приложении, предоставляя, например, возможность входа в систему с логином Facebook, оплаты покупок в приложении, демонстрация целевой рекламы и т.д. , предоставляющий возможность встраивать видео с YouTube на вашем сайте, производить поиск, создавать плейлисты и т.д. — фреймворк для встраивания функциональности голосовой и видео связи в вашем приложении, отправки SMS/MMS из приложения и т.д.

Примечание: вы можете найти информацию о гораздо большем количестве сторонних API в Каталоге Web API.

Как работает API?

Работа разных JavaScript API немного отличается, но, в основном, у них похожие функции и принцип работы.

Они основаны на объектах

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

Примечание: Если вам ещё не известно как работают объекты, советуем вернуться назад и изучить модуль Основы объектов JavaScript прежде чем продолжать.

Вернёмся к примеру с API Геолокации — очень простой API, состоящий из нескольких простых объектов:

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

Так как же эти объекты взаимодействуют? Если вы посмотрите на наш пример web audio example (see it live also), вы увидите следующий код:

Примечание: Когда вы впервые загрузите приведённый выше пример, появится диалоговое окно, запрашивающее разрешение на передачу данных о местонахождении этому приложению (см. раздел У них есть дополнительные средства безопасности там, где это необходимо далее в этой статье). Вам нужно разрешить передачу данных, чтобы иметь возможность отметить своё местоположение на карте. Если вы всё ещё не видите карту, возможно, требуется установить разрешения вручную; это делается разными способами в зависимости от вашего браузера; например, в Firefox перейдите > Tools > Page Info > Permissions, затем измените настройки Share Location; в Chrome перейдите Settings > Privacy > Show advanced settings > Content settings и измените настройки Location.

Во-первых, мы хотим использовать метод Geolocation.getCurrentPosition() , чтобы получить текущее положение нашего устройства. Доступ к объекту браузера Geolocation производится с помощью свойства Navigator.geolocation , так что мы начнём с

Это эквивалентно следующему коду

Но мы можем использовать точки, чтобы связать доступ к свойствам/методам объекта в одно выражение, уменьшая количество строк в программе.

Метод Geolocation.getCurrentPosition() имеет один обязательный параметр — анонимную функцию, которая запустится, когда текущее положение устройства будет успешно считано. Сама эта функция принимает параметр, являющийся объектом Position (en-US), представляющим данные о текущем местоположении.

Примечание: Функция, которая передаётся другой функции в качестве параметра, называется колбэк-функцией (callback function).

Такой подход, при котором функция вызывается только тогда, когда операция была завершена, очень распространён в JavaScript API — убедиться, что операция была завершена прежде, чем пытаться использовать данные, которые она возвращает, в другой операции. Такие операции также называют асинхронными операциями (asynchronous operations). Учитывая, что получение данных геолокации производится из внешнего устройства (GPS-устройства или другого устройства геолокации), мы не можем быть уверены, что операция считывания будет завершена вовремя и мы сможем незамедлительно использовать возвращаемые ею данные. Поэтому такой код не будет работать:

Если первая строка ещё не вернула результат, вторая вызовет ошибку из-за того, что данные геолокации ещё не стали доступны. По этой причине, API, использующие асинхронные операции, разрабатываются с использованием callback function, или более современной системы промисов, которая появилась в ECMAScript 6 и широко используются в новых API.

Мы совмещаем API Геолокации со сторонним API — Google Maps API, который используем для того, чтобы отметить расположение, возвращаемое getCurrentPosition() , на Google Map. Чтобы Google Maps API стал доступен на нашей странице, мы включаем его в HTML документ:

Чтобы использовать этот API, во-первых создадим объект LatLng с помощью конструктора google.maps.LatLng() , принимающим данные геолокации Coordinates.latitude (en-US) и Coordinates.longitude (en-US) :

Этот объект сам является значением свойства center объекта настроек (options), который мы назвали myOptions . Затем мы создаём экземпляр объекта, представляющего нашу карту, вызывая конструктор google.maps.Map() и передавая ему два параметра — ссылку на элемент <div> , на котором мы хотим отрисовывать карту (с ID map_canvas ), и объект настроек (options), который мы определили выше.

Когда это сделано, наша карта отрисовывается.

Последний блок кода демонстрирует два распространённых подхода, которые вы увидите во многих API:

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

Примечание: Не отчаивайтесь, если вы что-то не поняли из этого примера сразу. Мы рассмотрим использование сторонних API более подробно в следующих статьях.

У них узнаваемые точки входа

При использовании API убедитесь, что вы знаете где точка входа для API. В API Геолокации это довольно просто — это свойство Navigator.geolocation , возвращающее объект браузера Geolocation , внутри которого доступны все полезные методы геолокации.

Найти точку входа Document Object Model (DOM) API ещё проще — при применении этого API используется объект Document , или экземпляр элемента HTML, с которым вы хотите каким-либо образом взаимодействовать, к примеру:

Точки входа других API немного сложнее, часто подразумевается создание особого контекста, в котором будет написан код API. Например, объект контекста Canvas API создаётся получением ссылки на элемент <canvas> , на котором вы хотите рисовать, а затем необходимо вызвать метод HTMLCanvasElement.getContext() :

Всё, что мы хотим сделать с canvas после этого, достигается вызовом свойств и методов объекта содержимого (content) (который является экземпляром CanvasRenderingContext2D ), например:

Примечание: вы можете увидеть этот код в действии в нашем bouncing balls demo (see it running live also).

Они используют события для управления состоянием

Мы уже обсуждали события ранее в этом курсе, в нашей статье Introduction to events — в этой статье детально описываются события на стороне клиента и их применение. Если вы ещё не знакомы с тем, как работают события клиентской части, рекомендуем прочитать эту статью прежде, чем продолжить.

В некоторых API содержится ряд различных событий, в некоторых — событий нет. Свойства обработчика, позволяющие запускать функции при совершении какого-либо события по большей части перечислены в нашем материале отдельного раздела «Обработчики событий (Event handlers)». Как простой пример, экземпляры объекта XMLHttpRequest (каждый представляет собой HTTP-запрос к серверу на получение каких-либо ресурсов (resource)) имеют несколько доступных событий, например, событие load происходит, когда ответ с запрашиваемым ресурсом был успешно возвращён и доступен в данный момент.

Следующий код содержит простой пример использования событий:

Примечание: вы можете увидеть этот код в действии в примере ajax.html (see it live also).

В первых пяти строках мы задаём расположение ресурса, который хотим получить, создаём экземпляр объекта запроса с помощью конструктора XMLHttpRequest() , открываем HTTP-запрос GET , чтобы получить запрашиваемый ресурс, определяем, что мы хотим получить этот ресурс в формате json, после чего отсылаем запрос.

Затем функция-обработчик onload определяет наши действия по обработке ответа сервера. Нам известно, что ответ успешно возвращён и доступен после наступления события load (и если не произойдёт ошибка), так что мы сохраняем ответ, содержащий возвращённый сервером объект JSON в переменной superHeroes , которую затем передаём двум различным функциям для дальнейшей обработки.

У них есть дополнительные средства безопасности там, где это необходимо

Функциональность WebAPI подвержена тем же соображениям безопасности, что и JavaScript или другие веб-технологии (например, same-origin policy), но иногда они содержат дополнительные механизмы защиты. К примеру, некоторые из наиболее современных WebAPI работают только со страницами, обслуживаемыми через HTTPS в связи с передачей конфиденциальных данных (примеры: Service Workers и Push).

К тому же, некоторые WebAPI запрашивают разрешение от пользователя, как только к ним происходит вызов в коде. В качестве примера, вы, возможно, встречали такое диалоговое окно при загрузке нашего примера Geolocation ранее:

Notifications API запрашивает разрешение подобным образом:

Запросы разрешений необходимы для обеспечения безопасности пользователей — не будь их, сайты могли бы скрытно отследить ваше местоположение, не создавая множество надоедливых уведомлений.

Итоги

На данном этапе, у вас должно сформироваться представление о том, что такое API, как они работают и как вы можете применить их в своём JavaScript-коде. Вам наверняка не терпится начать делать по-настоящему интересные вещи с конкретными API, так вперёд! В следующий раз мы рассмотрим работу с документом с помощью Document Object Model (DOM).