Меня зовут Эрик Ротмюллер, и в настоящее время я учусь в UC. Учебный лагерь по кодированию Berkeley Extension. В рамках этой программы мне нужно было узнать о серверных API и реализовать их использование в проекте. Должен признаться, во время моего исследования мне было трудно понять, что, что происходит или что я должен был делать. Многие люди, писавшие документацию по серверному API, говорят об этом в таком техническом термине, что начинающему, как я, трудно понять концепцию. Цель этой записи в блоге — поделиться тем, что я узнал, и изложить это так просто, чтобы любой, кто хочет узнать об API на стороне сервера, на 100% понял, что они из себя представляют, к концу этого чтения.
Итак, давайте начнем с этого. Что такое серверные API?
Проще говоря, серверный API — это то, что предоставляет вам данные. Например: если вам нужен список видео на YouTube о вашем любимом коктейле, что бы вы сделали? Вы бы зашли на YouTube и искали коктейль. В ответ YouTube предоставит вам список видео, которые, по их мнению, связаны с вашим поиском. Это пример запроса данных и получения данных. Серверный API делает именно это, за исключением того, что он настроен так, что машины могут делать запросы от имени пользователей.
Возьмем тот же пример, за исключением того, что вы находитесь не на YouTube, а на веб-сайте, который дает вам предложения коктейлей с видео, связанными с этим коктейлем. Давайте представим, что вы просматриваете этот коктейльный веб-сайт со всеми доступными рецептами коктейлей, которые вы можете приготовить, и вы заинтригованы видом мятного джулепа, напитка Кентукки Дерби. Вы видите, что у них есть кнопка «Просмотр видео», которая после нажатия на нее отображает кучу видео на YouTube, связанных с Mint Julep.
Но как это произошло? Как веб-сайт динамически генерировал видео на основе коктейля, на который вы нажали. Это коктейльный сайт, делающий именно то, что вы делали раньше, когда были на YouTube. Он сделал запрос на YouTube и получил ответ от YouTube. С этим ответом веб-сайт показал вам релевантные видео. Это было сделано с помощью серверного API. В частности, это было сделано с помощью API YouTube (который является серверным API).
Теперь обратимся к техническим вопросам!
Итак, давайте посмотрим на тот же пример веб-сайта, показывающего вам видео о мятном джулепе. Вот как веб-сайт делает это настолько простыми словами, насколько я могу это написать:
Давайте избавимся от страшных вещей и просто дадим вам весь код. Не волнуйтесь! Я объясню каждую часть этого кода, чтобы вы могли его понять:
var videoSearchURL= «https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&maxResults=5&videoLicense=creativeCommon&q=' + CocktailName + «+cocktail+recipes&key=YOURAPIKEY
function fetchVideos() {
fetch(videosSearchURL).then(function(response) {
return response.json();
}).then (function(data) {< br /> videoId1 = data.items[0].id.videoId;
videoResultsArea.innerHTML = '‹iframe width=”800’ height=”450’ src="https://www.youtube.com /embed/'» + videoId1 + '“ title="Видеоплеер YouTube" frameborder="0' allow="акселерометр; автозапуск; запись в буфер обмена; зашифрованные носители; гироскоп" allowfullscreen›‹/iframe›
Шаг 1.Веб-сайт хочет получить данные с YouTube.
Как он это сделает?
Через запрос на выборку JavaScript.
Посмотрим, как это делается!
Сначала нам нужно установить, какой URL нам нужно получить. Каждый серверный API будет иметь свои собственные требования к синтаксису URL-адреса (в основном именно так, как должен быть структурирован URL-адрес). В зависимости от того, с чем вы работаете, вам потребуется обратиться к документации по API. Однако в этом случае мы работаем с YouTube и, согласно их документации, нам нужен URL-адрес, который выглядит примерно так:
https://www.googleapis.com/youtube/v3/search?ВАШИ ПАРАМЕТРЫ&key=ВАШAPIKEY
Ваши параметры — это просто параметры, которые вы хотите включить в поиск, а ключ — это просто место, где вы указываете свой уникальный ключ API, который YouTube предоставит вам, когда вы зарегистрируетесь для использования их API.
Поговорим о параметрах. Итак, в этом конкретном случае веб-сайт добавил несколько, чтобы дать вам релевантные результаты, связанные с вашим коктейлем. Давайте посмотрим на полный URL:
https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&maxResults=5&videoLicense=creativeCommon&q=' + CocktailName + «+cocktail+recipes&key=YOURAPIKEY
Обратите внимание, что мы добавили параметры «part=snippet&type=video&maxResults=5&videoLicense=creativeCommon&q=» + CocktailName + «+cocktail+recipes».
part=snippet просто означает, что мы хотим вернуть фрагменты.
type=video просто означает, что мы хотим, чтобы все наши результаты были видео
maxResults=5 просто означает, что нам нужны только 5 видео в возвращаемых данных.
videoLicense=creativeCommon просто означает, что нам нужны только видео с лицензией Creative Commons (чтобы мы могли отображать их на нашем веб-сайте).
q= будет просто поисковым запросом, который мы будем искать. В данном случае: q=» + CocktailName + «+cocktail+recipes» просто означает, что мы будем искать «рецепты коктейлей Mint Julep» (обратите внимание, что коктейльName — это переменная с текущим названием коктейля, которое в нашем примере является Мятный джулеп).
Таким образом, конечный URL-адрес после обработки кода будет выглядеть так: https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&maxResults=5&videoLicense=creativeCommon&q=mint_julip+cocktail+recipes&key= ВАУРАПИКЕЙ”
Первая строка «var videoSearchURL =» просто сохраняет URL-адрес в переменной videoSearchURL, чтобы мы могли просто ссылаться на videoSearchURL всякий раз, когда мы хотим использовать URL-адрес.
Как мы будем получать данные с YouTube. Код выглядит следующим образом:
function fetchVideos() {
fetch(videosSearchURL).then(function(response) {
return response.json();
}).then (function(data) {
В первой части кода:
function fetchVideos() {
fetch(videosSearchURL)
Мы просто вызываем функцию, которую назвали fetchVideos(), и внутри этой функции используем метод fetch для «выборки» URL-адреса VideoSearchURL, который мы только что создали. Думайте о выборке как о простом запросе данных. Мы запрашиваем данные из созданного ранее URL-адреса YouTube.
Во второй части кода:
.then(function(response) {
return response.json();
})
Мы просто обрабатываем данные, которые мы получили из запроса на выборку выше. Чтобы правильно видеть и работать с данными, которые мы получаем в ответ от YouTube, нам нужно разобрать их с помощью JSON. Не вдаваясь в технические подробности, просто поймите, что это необходимо.
В третьей части кода:
.then (функция(данные) {
Затем мы собираемся что-то сделать с этими данными, которые мы только что получили от YouTube. Но как выглядят эти данные?
Хорошо, если в этот момент в коде мы написали console.log(data); чтобы увидеть данные, это то, что мы увидим:
{
"kind": "youtube#searchListResponse",
"etag": "3BcUWYra0z9ZrG52cBPTGbM_xBs",
"nextPageToken": "CAUQAA",
"regionCode": US,
pageInfo: {
totalResults: 181,
resultsPerPage: 5
},
items: [
> {
вид: youtube#searchResult,
etag: S-cl_8iPTHkuD4EqIwxwUzuQxqg,
id: {
вид: youtube# видео,
videoId: EuyP4BBVLko
},
фрагмент: {
publishedAt: 2020–04–30T21:37:58Z,< br /> channelId: UCraCAOVtJKEULbgIydaH8jA,
title: Как сделать мятный джулеп | Рецепты коктейлей | Как провести вечеринку с Тайлером Холлингером,
Описание: Аааа, классический мятный джулеп! История: Коктейль из бурбона прибыл на запад, в Кентукки, из Вирджинии, где когда-то его готовили из…,
миниатюры: {
по умолчанию: {
url: «https ://i.ytimg.com/vi/EuyP4BBVLko/default.jpg',
ширина: 120,
высота: 90
},
средний ”: {
«url: «https://i.ytimg.com/vi/EuyP4BBVLko/mqdefault.jpg',
width: 320,
height : 180
},
высокий: {
url: «https://i.ytimg.com/vi/EuyP4BBVLko/hqdefault.jpg',
> ширина: 480,
высота: 360
}
},
channelTitle: Как устроить вечеринку,
liveBroadcastContent: « нет",
"publishTime": "2020–04–30T21:37:58Z"
}
},
Как видите, данных много. Полученные данные будут основаны на запросе, который вы отправили через эти параметры URL, и каждый API будет возвращать разные данные. Но теперь мы хотим что-то сделать с этими данными, и это приводит нас к шагу 2. Я знаю, о чем вы думаете: «Почему мы только на шаге 2?». Не волнуйтесь, всего 2 шага.
Шаг 2. Веб-сайт хочет отобразить данные, которые он получает с YouTube, вам, пользователю.
Как он это сделает?
Сохраняя данные в переменную, а затем добавляя (добавляя) их на страницу.
Посмотрим, как это делается!
Как и прежде, вот вся часть кода (начиная с .then (функция(данные){, оставленная в последнем разделе):
.then (function(data) {
videoId1 = data.items[0].id.videoId;
videoResultsArea.innerHTML = '‹iframe width=”800” height=”450” src =”https://www.youtube.com/embed/' + videoId1 + '“ title=”Видеоплеер YouTube” frameborder=”0’ allow=”акселерометр, автовоспроизведение, запись в буфер обмена, зашифрованные носители, гироскоп "разрешить полный экран›‹/iframe›
Во-первых, часть кода .then (function(data) {) просто сообщает, что мы собираемся что-то сделать с этими данными.
Следующая часть кода:
videoId1 = data.items[0].id.videoId;
Просто сохраняет идентификатор видео первого видео из результатов в переменную videoId1.
Он начинается с объявления переменной videoId1 и указания, что ее значение равно data.items[0].id.videoID. Давайте разберем это еще дальше:
данные(данные, которые мы только что получили).items(раздел элементов данных)[0](первый индекс раздела элементов .id(раздел идентификатора).videoId(идентификатор видео).
Мы получаем этот идентификатор видео и сохраняем его в переменной videoId1, потому что нам нужно будет использовать идентификатор видео для отображения видео. В этом случае идентификатор видео — EuyP4BBVLko.
Теперь к следующей и последней части кода:
videoResultsArea.innerHTML = '‹iframe width="800" height="450" src="https://www.youtube.com/embed/" + videoId1 + '" title="YouTube video player" frameborder=" 0' разрешить = акселерометр; Автовоспроизведение; буфер обмена-запись; зашифрованные носители; гироскоп allowfullscreen›‹/iframe›
Это просто добавление видео на страницу.
Он начинается с: videoResultsArea.innerHTML =
Этот код просто вызывает переменную videoResultsArea, которая ссылается на раздел кода HTML, а затем использует метод .innerHTML для изменения HTML в этом разделе страницы. Но что мы добавляем? Старый добрый iframe.
Если вы заходите на YouTube, найдите видео, нажмите на него. Нажмите кнопку «Поделиться», а затем кнопку «Встроить», вы увидите код для добавления iframe этого видео. Чтобы не усложнять работу с iframe, в этом примере просто думайте об этом просто как о добавлении кода, который добавит видео на ваш сайт.
Последняя часть кода — это iframe, в котором есть много вещей, таких как ширина, высота и другие типичные элементы html. Однако ему нужен идентификатор видео, чтобы отобразить нужное нам видео, и здесь на помощь приходит переменная videoId1. Это переменная, из которой мы сохранили идентификатор видео. Мы просто пишем в коде внедрения «+ videoId1 +» там, где обычно находится идентификатор видео, и он вставляет идентификатор видео, который мы получили из запроса данных YouTube.
Результат? Видео, отображаемое на основе коктейля, о котором мы хотели просмотреть видео. Все делается через вызов выборки API на стороне сервера.
Теперь, когда вы знаете все, что входит в динамическое отображение видео YouTube на веб-сайте, мне любопытно, будете ли вы когда-нибудь думать об этом так же. Я знаю, что не буду.
Заключение
Надеюсь, теперь вы понимаете, что такое серверный API. Я также надеюсь, что вы получили представление о том, как мы, как программисты, можем использовать серверные API для динамического запроса данных с серверов (будь то YouTube или кого-то другого), а затем извлекать эти данные из их ответов и использовать их в нашей веб-приложения.
Изучение этого было разочаровывающим и трудоемким, но также чрезвычайно полезным. Я бы сделал это снова с большим удовольствием. Серверные API — чрезвычайно полезный инструмент; тот, который я надеюсь использовать в будущем. Надеюсь, я помог вам понять этот процесс более четко. В любом случае, я просто хочу сказать спасибо, что нашли время, чтобы прочитать это.
Удачного кодирования. — Эрик Ротмюллер
