Браузерные api что это
Что такое веб API
Дата публикации: 2016-06-09
От автора: сначала интерфейсы программирования приложений могут показаться вам очень сложными, но как только вы поймете принцип их работы и зачем они нужны, вы осознаете, насколько это простой инструмент. Вам откроется целый ряд новых возможностей в веб-разработке.
API можно расшифровать как application programming interface или интерфейс программирования приложений – метод получения данных из запросов. В старых калькуляторах под API можно понимать математический API: устройство с числами и оператором для вычисления результата. На уровне физики под API можно рассматривать популярную в США игрушку Rock ‘Em Sock ‘Em Robot: вы дергаете рычажки, а роботы дерутся.
API являются одним из основополагающих компонентов вычислительных систем. Без интерфейсов программистам приходилось бы писать каждое приложения с нуля. С помощью API программисты могут намного быстрее делать приложения: чтобы не кодить кнопку «Закрыть окно», можно просто запросить ее из API операционной системы и импортировать функционал в свое приложение, не задумываясь о работе и производительности пользовательского интерфейса. API также работают и на уровне железа, позволяя общаться различным устройствам и компонентам.
Веб API
В интернете API принимают две формы: клиентские и серверные.
Клиентские API. В спецификации HTML5 есть несколько API, которыми могут пользоваться разработчики, к примеру, Fullscreen и Dialog API. Доступ к ним осуществляется через JS, данные интерфейсы расширяют функционал браузера и заменяют стандартные приложения. Данный функционал оказал огромное влияние на веб-сайты под управлением API, как на веб-приложения для компьютеров, так и для мобильных устройств.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Серверные API. Множество компаний выпускают собственные API: к примеру, у Netflix есть API, показывающее подписчикам бесплатные фильмы прямо во время поиска. В сети тысячи различных API: одни из них используются открыто, другие же только в корпоративных веб-сайтах. Все данные доступны при запросе с сервера.
В этой статье сделан упор на вторую форму.
Работа с веб API
У Google Maps есть полноценное API, увидеть его можно, просто открыв карту в браузере. К примеру, адресная строка ниже: //www.google.ca/maps/@51.0890235,-114.0293939,12z
… возьмем мое текущее положение, город Калгари. Если изменить первые две пары чисел после символа @ (т.е. широту и долготу), то мы изменим информацию, запрошенную из Google Maps API, тем самым получим совершенно другой результат.
В реальности веб-сайты делают запросы к API через JavaScript, PHP, Ruby или другой язык программирования. Большинство интерфейсов возвращают данные в формате JSON, XML или HTML; множество сайтов предоставляют все три варианта. Некоторым API нужен уникальный ключ (с помощью которого сервис может отслеживать запросы и использовать их), другим же наоборот ключ не нужен. У некоторых API хорошая документация, у других нет.
Один пример: API OpenWeatherMap может принимать URL, в котором указывается город и ключ: //api.openweathermap.org/data/2.5/weather?q=Calgary&appid=91f05e4330f6e85cab273b8b1ad8bb71
Если вбить адрес выше в строку браузера, то вам вернется следующий код:
Введение в web APIs
Начнём с рассмотрения того что представляют собой API на высоком уровне и выясним, как они работают, как их использовать в своих программах и как они структурированы. Также рассмотрим основные виды API и их применение.
| Необходимые знания: | Базовая компьютерная грамотность, понимание основ HTML и CSS, основы JavaScript (см. первые шаги, building blocks, объекты JavaScript). |
|---|---|
| Цель: | Познакомиться с API, выяснить что они могут делать и как их использовать. |
Что такое API?
Для лучшего понимания рассмотрим аналогию с домашними электросетями. Когда вы хотите использовать какой-то электроприбор, вы просто подключаете его к розетке, и всё работает. Вы не пытаетесь подключить провода напрямую к источнику тока — делать это бесполезно и, если вы не электрик, сложно и опасно.
Точно также, если мы хотим, например, программировать 3D графику, гораздо легче сделать это с использованием API, написанных на языках высокого уровня, таких как JavaScript или Python.
Note: Смотрите также API в словаре.
API клиентской части JavaScript
Для JavaScript на стороне клиента, в частности, существует множество API. Они не являются частью языка, а построены с помощью встроенных функций JavaScript для того, чтобы увеличить ваши возможности при написании кода. Их можно разделить на две категории:
Взаимодействие JavaScript, API и других средств JavaScript
Итак, выше мы поговорили о том, что такое JavaScript API клиентской части и как они связаны с языком JavaScript. Давайте теперь тезисно запишем основные понятия и определим назначение других инструментов JavaScript:
На что способны API?
Широкое разнообразие API в современных браузерах позволяет наделить ваше приложение большими возможностями. Достаточно посмотреть список на странице MDN APIs index page.
Распространённые API браузера
В частности, к наиболее часто используемым категориям API (и которые мы рассмотрим далее в этом модуле) относятся :
Распространённые сторонние API
Существует множество сторонних API; некоторые из наиболее популярных, которые вы рано или поздно будете использовать, включают:
Note: вы можете найти информацию о гораздо большем количестве сторонних API в Каталоге Web API.
Как работает API?
Работа разных JavaScript API немного отличается, но, в основном, у них похожие функции и принцип работы.
Они основаны на объектах
Взаимодействие с API в коде происходит через один или больше объектов JavaScript, которые служат контейнерами для информации, с которой работает API (содержится в свойствах объекта), и реализуют функциональность, которую предоставляет API (содержится в методах объекта).
Note: Если вам ещё не известно как работают объекты, советуем вернуться назад и изучить модуль Основы объектов JavaScript прежде чем продолжать.
Вернёмся к примеру с API Геолокации — очень простой API, состоящий из нескольких простых объектов:
Так как же эти объекты взаимодействуют? Если вы посмотрите на наш пример maps-example.html (see it live also), вы увидите следующий код:
Note: Когда вы впервые загрузите приведённый выше пример, появится диалоговое окно, запрашивающее разрешение на передачу данных о местонахождении этому приложению (см. раздел У них есть дополнительные средства безопасности там, где это необходимо далее в этой статье). Вам нужно разрешить передачу данных, чтобы иметь возможность отметить своё местоположение на карте. Если вы всё ещё не видите карту, возможно, требуется установить разрешения вручную; это делается разными способами в зависимости от вашего браузера; например, в Firefox перейдите > Tools > Page Info > Permissions, затем измените настройки Share Location; в Chrome перейдите Settings > Privacy > Show advanced settings > Content settings и измените настройки Location.
Это эквивалентно следующему коду
Но мы можем использовать точки, чтобы связать доступ к свойствам/методам объекта в одно выражение, уменьшая количество строк в программе.
Note: Функция, которая передаётся другой функции в качестве параметра, называется колбэк-функцией (callback function).
Такой подход, при котором функция вызывается только тогда, когда операция была завершена, очень распространён в JavaScript API — убедиться, что операция была завершена прежде, чем пытаться использовать данные, которые она возвращает, в другой операции. Такие операции также называют асинхронными операциями (asynchronous operations). Учитывая, что получение данных геолокации производится из внешнего устройства (GPS-устройства или другого устройства геолокации), мы не можем быть уверены, что операция считывания будет завершена вовремя и мы сможем незамедлительно использовать возвращаемые ею данные. Поэтому такой код не будет работать:
Если первая строка ещё не вернула результат, вторая вызовет ошибку из-за того, что данные геолокации ещё не стали доступны. По этой причине, API, использующие асинхронные операции, разрабатываются с использованием callback function, или более современной системы промисов, которая появилась в ECMAScript 6 и широко используются в новых API.
Когда это сделано, наша карта отрисовывается.
Последний блок кода демонстрирует два распространённых подхода, которые вы увидите во многих API:
Note: Не отчаивайтесь, если вы что-то не поняли из этого примера сразу. Мы рассмотрим использование сторонних API более подробно в следующих статьях.
У них узнаваемые точки входа
Всё, что мы хотим сделать с canvas после этого, достигается вызовом свойств и методов объекта содержимого (content) (который является экземпляром CanvasRenderingContext2D ), например:
Note: вы можете увидеть этот код в действии в нашем bouncing balls demo (see it running live also).
Они используют события для управления состоянием
Мы уже обсуждали события ранее в этом курсе, в нашей статье Introduction to events — в этой статье детально описываются события на стороне клиента и их применение. Если вы ещё не знакомы с тем, как работают события клиентской части, рекомендуем прочитать эту статью прежде, чем продолжить.
Следующий код содержит простой пример использования событий:
Note: вы можете увидеть этот код в действии в примере ajax.html (see it live also).
У них есть дополнительные средства безопасности там, где это необходимо
Функциональность WebAPI подвержена тем же соображениям безопасности, что и JavaScript или другие веб-технологии (например, same-origin policy), но иногда они содержат дополнительные механизмы защиты. К примеру, некоторые из наиболее современных WebAPI работают только со страницами, обслуживаемыми через HTTPS в связи с передачей конфиденциальных данных (примеры: Service Workers и Push).
К тому же, некоторые WebAPI запрашивают разрешение от пользователя, как только к ним происходит вызов в коде. В качестве примера, вы, возможно, встречали такое диалоговое окно при загрузке нашего примера Geolocation ранее:
Notifications API запрашивает разрешение подобным образом:
Запросы разрешений необходимы для обеспечения безопасности пользователей — не будь их, сайты могли бы скрытно отследить ваше местоположение, не создавая множество надоедливых уведомлений.
Итоги
На данном этапе, у вас должно сформироваться представление о том, что такое API, как они работают и как вы можете применить их в своём JavaScript-коде. Вам наверняка не терпится начать делать по-настоящему интересные вещи с конкретными API, так вперёд! В следующий раз мы рассмотрим работу с документом с помощью Document Object Model (DOM).