При первом знакомстве с API было сложно понять, что такое API и как его можно использовать. Во-первых, определение аббревиатуры сделало меня еще более запутанным, и я могу понять, почему кто-то останавливается на достигнутом и никогда не возвращается назад.
API — интерфейс прикладного программирования.
Я не думаю, что когда-либо видел, чтобы три слова вместе казались более непонятными. Проще говоря, API используется как стандартный способ обмена информацией между различными вещами. Компания-разработчик программного обеспечения публикует свой API для широкой публики, чтобы другие разработчики программного обеспечения могли разрабатывать продукты, основанные на ее сервисе. Подумайте об одной из ваших любимых песен, в которой есть известный исполнитель. Этот артист был заинтересован в сотрудничестве с этим конкретным артистом с целью улучшения их музыки. Как разработчики, мы постоянно ищем возможности улучшить наши приложения, чтобы сделать их удобными для наших пользователей. Ниже мы рассмотрим простой пример API, используя javascript вместе с библиотекой jQuery. Мы рассмотрим GIPHY API. Представьте, что у вас есть веб-приложение, и в нем вы хотели бы иметь возможность искать по ключевому слову забавную гифку. GIPHY предоставил разработчикам инструменты, необходимые для выполнения такой задачи. Давайте подумаем, что мы делаем в процессе создания этой функции. Мы обнаружили существующее программное обеспечение, в котором есть функция, от которой, по нашему мнению, наше веб-приложение может извлечь выгоду, интегрировавшись с ним.
Шаг 1.Документация по API!
Вы только что купили свой новый обеденный стол IKEA, и пришло время поднять его и встать на все четыре ножки. Вы ничего не добьетесь, не прочитав прилагаемые 25 страниц инструкций. Как и ваша новая таблица, API поставляется с очень структурированным набором инструкций, разработанных и задокументированных самими создателями этого программного обеспечения. При использовании API нет места для незатянутого винта, который может сойти с рук при построении таблицы. Документация по API не является ни руководством, ни шаблоном, который вы можете использовать. Это строгий набор инструкций, которым вы должны следовать, чтобы API взаимодействовал должным образом. Как и большинство других производителей, продающих таблицы, все API имеют уникальную документацию, которой необходимо точно следовать. Иногда эта документация может быть более неясной для одного, чем для другого. После изучения всех ресурсов, предоставляемых программным обеспечением, могут потребоваться дополнительные исследования, если что-то все еще неясно. Google имеет тенденцию решать любую дальнейшую путаницу. Вы не можете быть единственным человеком, пытающимся использовать этот API.
Давайте посмотрим на документацию GIPHY API, которую мы собираемся использовать: https://developers.giphy.com/docs/
В частности, для этого примера похоже, что нам нужен «ключ API», чтобы начать работу с GIPHY. Это можно легко получить, зарегистрировав у них бесплатную учетную запись разработчика!
Давайте посмотрим, что написано для нас в этой документации, и на основе того, что мы видим, давайте выясним, какие части нам понадобятся для создания нашей функции в нашем веб-приложении!
Я думаю, это то, что мы хотели бы использовать. Поиск GIF по ключевому слову! Это было бы замечательно. Но что все это значит? Что ж, при использовании API мы будем отправлять HTTP-запрос на сервер, например GET или POST-запрос. В нашем примере мы GET-ting gif от GIPHY, поэтому это будет GET-запрос. Мы хотим получать информацию с нашего сервера и использовать ее каким-то образом. Когда придет время и мы получим запрашиваемую информацию, она будет отправлена в формате JSON. JSON означает нотацию объектов Javascript. По сути, это большой объект с парами ключ/значение со всей информацией. Вскоре мы увидим, как где-то внутри полученного нами объекта JSON будут ссылки на запрошенные нами GIF-файлы!
Какие еще инструкции у нас есть в нашей конечной точке, указанной выше (конечная точка — это пункт назначения, который мы ищем для получения или отправки информации). HOST — это место, откуда мы будем запрашивать нашу информацию, а PATH сужает задачу, которую мы хотим выполнить. Как и в случае с почтовым адресом, думайте о HOST как о городе/штате, а о PATH — как об уникальном адресе.
Теперь, когда у нас есть HOST и уникальный PATH для запроса информации, давайте объединим их. Мы будем запрашивать информацию через запрос GET от:
http://api.giphy.com/v1/gifs/поиск
Звучит довольно хорошо, но, как вы могли заметить, наш URL говорит, что мы запрашиваем информацию через поиск, но не говорит, что мы ищем! Я хочу гифки с котятами, поэтому давайте обязательно упомянем об этом на сервере!
К счастью, у нас есть документация, которая научит нас, как запрашивать то, что мы ищем, используя параметры:
Это довольно круто. Наш URL-адрес http://api.giphy.com/v1/gifs/search может принимать различные параметры после /search, чтобы помочь нам настроить наш поиск. Похоже, в нашем примере есть два обязательных параметра, которые нам нужно включить, поэтому давайте пока побеспокоимся об этих двух. При добавлении параметров в конец вашего URL они должны быть в определенном формате, чтобы запрос понял, что мы просим. Параметры добавляются с помощью ?, но если у вас есть несколько параметров для добавления, первый параметр будет добавлен с использованием ?, а все последующие параметры будут использовать &. Давайте посмотрим, как это выглядит на нашем примере. Нам нужно добавить поисковый запрос или фразу вместе с нашим ключом API, который у нас теперь есть после регистрации. В документации упоминается, что наша фраза будет добавлена с помощью переменной q, а наш ключ API будет добавлен с помощью переменной api_key. Все еще желая увидеть гифки с котятами, наш URL теперь должен выглядеть так:
http://api.giphy.com/v1/gifs/search?q=kittens&api_key=5e43d3b89ae74dd5931c27cce50d5f6e
Обратите внимание на ? перед первым параметром q и & перед вторым параметром api_key. Теперь наш запрос должен точно понимать, что мы хотим, и нам предоставлено разрешение на наш запрос с использованием нашего ключа API!
Нам осталось сделать запрос в нашем javascript-приложении. Для этого мы будем использовать ajax, предоставленный нам библиотекой jQuery. У нас есть простые файлы index.js и index.html, готовые для начала. В нашем файле index.js мы будем работать непосредственно в нашем готовом документе.
Так как же работает ajax? Аякс очень крут. Мы будем вызывать метод ajax из jQuery, используя следующие обозначения:
$.ajax( { } )
ajax принимает объект в качестве аргумента. Этот объект будет включать наш URL-адрес, на который мы делаем запрос, а также любые настройки ajax, которые мы предоставляем для настройки запроса. Как и все объекты javascript, URL-адрес и любые настройки будут отправлены в виде пары ключ-значение. jQuery предоставляет множество различных параметров, которые можно использовать для настройки запроса. В нашем примере мы будем использовать только URL, метод и успех. Не стесняйтесь проверять документацию jQuery для получения информации обо всех доступных настройках: http://api.jquery.com/jquery.ajax/
Давайте заполним нашу просьбу еще немного.
$.ajax( { URL: , метод: , успех: ,
} )
url будет просто строковым значением с нашим полным URL:
$.ajax({
URL: ‘http://api.giphy.com/v1/gifs/search? q=kittens&api_key=5e43d3b89ae74dd5931c27cce50d5f6e’,
метод: ,
успех: ,
} )
метод будет типом HTTP-запроса, который мы делаем. Мы упомянули, что это GET, потому что мы запрашиваем данные из интерфейса (также завернутые в строку):
$.ajax({
URL:http://api.giphy.com/v1/gifs/search?q=kittens&api_key=5e43d3b89ae74dd5931c27cce50d5f6e,
метод:'GET',
успех: ,
} )
успех зависит от того, как мы используем полученные данные! В нашем примере давайте просто получим все GIF-файлы для отображения в теле нашего index.html. Значением успеха будет функция, которая принимает один параметр, который будет нашими запрошенными данными, если запрос был успешным. Эти данные должны быть нашим объектом JSON. Но как нам узнать, что содержится в этих данных, чтобы мы могли перейти к соответствующим ключам, чтобы получить данные, которые мы ищем? Один из способов — взять наш URL-адрес, который мы используем для отправки запроса, и просто скопировать и вставить его в адресную строку нашего браузера. Это покажет нам, как выглядит этот объект, и все пары ключ-значение, вложенные в него. Это может выглядеть немного неряшливо. Доступны расширения и программное обеспечение Chrome, такие как Postman, которые могут помочь вам очистить это представление. Когда мы посмотрим на наш объект, мы увидим, что внутри нашего объекта 25 объектов! Это связано с тем, что конечная точка поиска по умолчанию предоставляет нам 25 GIF-файлов (если иное не настроено в параметрах URL-адреса). В каждом из наших 25 объектов gif, называемых изображениями, есть ключ, который содержит все URL-адреса gif (содержит различные фиксированные размеры для небольшого или большего использования). Мы переберем все 25 объектов и добавим этот URL в тело index.html! На каждом объекте нам нужно будет отобразить через:
gif ›› изображения ›› fixed_height ›› url
для того, чтобы добавить желаемое изображение к нашему телу. Давайте добавим эту функцию в качестве значения нашего ключа успеха в нашем ajax-запросе:
$(документ).готово(функция(){
$.ajax({ URL: ‘http://api.giphy.com/v1/gifs/search?q=kittens&api_key=5e43d3b89ae74dd5931c27cce50d5f6e’,
метод: «ПОЛУЧИТЬ»,
успех: функция (giphy) {
giphy.data.forEach (функция (gif) {
$(‘body’).append(`‹img src=’${gif.images.fixed_height.url}’›`)
})
}
})
})
Сохраните и откройте index.html в своем браузере, и вы должны увидеть 25 gif котят!!
Самое интересное в наблюдении за тем, как происходит волшебство, и в успешном выполнении вашего запроса — это настройка способа просмотра и запроса данных. Например, мы не хотим просто видеть котят в нашем приложении, верно? Я имею в виду, вы могли бы. Но что вы можете сделать, так это создать простую форму в вашем index.html и взять введенную строку. Вы можете взять эту строку ключевого слова или фразы и интерполировать ее в свой URL-запрос! Как это круто? Сделайте вашу новую интеграцию API динамичной в вашем приложении!
Лучший способ узнать больше о том, как использовать API и понять их использование, — это поиграть с ними. Вспомните некоторые из ваших любимых веб-сайтов и просмотрите их документацию по API и интересные вещи, которые они позволяют вам делать с ним!
