Тема 1/1: Вводный курс — знакомство с API → Урок 10/12

supersliv.biz – Присоединяйся к лучшим
Запрос веб-браузера

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Введение в урок

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

Даня

Твой пример с рестораном сработал! Теперь понимаю, что такое API.

Юля

Отлично! Следующий наш шаг — найти в Web API Яндекс Маркета запрос, который возвращает данные об отзывах. Чтобы это сделать, нужно понимать, что вообще должен включать в себя запрос, почему он составляется именно так и для чего предназначена каждая его часть. Разобраться с этим нам поможет аналогия со столовым этикетом. Вернёмся снова в ресторан?

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Протокол HTTP

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

✅ Компьютерный протокол — это набор правил, которые компьютеры должны соблюдать при обмене данными. Компьютерный протокол, как и этикет, регламентирует формат общения, и нарушать его нельзя

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим

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

HTTP (Hypertext Transfer Protocol) — это основной протокол для обмена данными между компьютерами в сети Интернет. Это сочетание из четырёх букв — HTTP — видел каждый, кто выходит в интернет через веб-браузер, ведь именно с названия протокола начинаются адреса веб-сайтов. Как только вы вводите адрес сайта с http://, веб-браузер понимает, что для общения с веб-сервером нужно соблюдать протокол HTTP.

Сейчас гораздо чаще встречаются адреса, которые начинаются с https:// . Например, адрес веб-сайта Яндекс Практикума https://practicum.yandex.ru как раз включает в себя https.

HTTPS или Hypertext Transfer Protocol Secure — это «младший брат» HTTP, который серьёзнее относится к вашей безопасности в сети: он шифрует часть передаваемых данных от злоумышленников, не давая им их прочитать

HTTP-запрос клиента к веб-серверу должен включать:

URL.
Метод.
Заголовки.
Тело.

Как может выглядеть HTTP-запрос, когда браузер отправляет его на сервер? Например, так:

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
URL

Чтобы получить данные об отзывах, мы должны знать, где веб-сервер их хранит, то есть знать адрес ресурса — URL (Uniform Resource Locator).

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Как определить адрес ресурса?

Рассмотрим на примере столового этикета, который устанавливает правила сервировки стола. Самое важное в сервировке — правильно расположить посуду и приборы.

Каждому гостю, к примеру, полагается пять вилок: для салата, для рыбы, для мяса, для морепродуктов и десертная. Благодаря правилам сервировки гость знает: вилка, которая расположена справа от тарелки, предназначена для морепродуктов, над тарелкой — для десерта.

Так же веб-браузер знает расположение данных и может их использовать. Данные, которые хранит веб-сервер, называются ресурсами. Ресурсами могут быть веб-страницы, изображения, видео, а также данные об отзывах.

Веб-страницу, на которой вы сейчас находитесь, хранит веб-сервер Яндекс Практикума. Любой веб-браузер может запросить её у веб-сервера для просмотра. Веб-сайт же состоит из множества веб-страниц.

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

Например, так:

Или так:

Используя иерархию, можно описать место любого предмета. Например, вилки для морепродуктов: «стол/справа от тарелки/вилка для морепродуктов» или «стол/вилка/для морепродуктов».

Место на веб-сервере, где хранится ресурс, и называется URL. Посмотрим на URL с веб-сайта Яндекс Практикума:

https://practicum.yandex.ru/

https://practicum.yandex.ru/systems-analyst/

https://practicum.yandex.ru/qa-engineer/

Мы уже знаем, что https в начале URL — это сигнал веб-браузеру, что общаться с веб-сервером он должен в соответствии с правилами протокола HTTP (HTTPS обычно приравнивают к HTTP).

После названия протокола следует название веб-сервера — practicum.yandex.ru. Сразу за названием веб-сервера — путь до ресурса на веб-сервере: /systems-analyst или /qa-engineer. С помощью URL https://practicum.yandex.ru/systems-analyst/ мы можем описать путь до веб-страницы курса «Системный аналитик», а с помощью URL https://practicum.yandex.ru/qa-engineer/ — до веб-страницы курса «Инженер по тестированию».

Опираясь на предложенную иерархию, выберите только корректные URL, то есть те, что соответствуют данной иерархии.

http://предметы-сервировки-стола.рф/для-красного-вина

http://предметы-сервировки-стола.рф/бокал/для-белого-вина

Всё верно! Этот URL действитель ведёт к ресурсу «бокал для белого вина».

http://предметы-сервировки-стола.рф/кофейная-пара/для-игристого-вина

http://предметы-сервировки-стола.рф/чашка/кофейная-пара

http://предметы-сервировки-стола.рф/кофейная-пара/блюдце

Всё верно! Этот URL приведёт вас к блюдцу из кофейной пары.

Теперь, когда мы выяснили, как мог бы выглядеть URL для бокалов и других элементов сервиза, разберёмся, как будет выглядеть URL для отзывов на сайте интернет-магазина посуды.

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Метод

Веб-браузер может по-разному использовать данные, которые хранит веб-сервер. Веб-браузер может запросить у веб-сервера ресурс для просмотра, редактирования или удаления. Он также может передать веб-серверу новые данные для хранения, то есть попросить веб-сервер создать ресурс.

Действие, которое веб-сервер должен сделать, чтобы удовлетворить запрос веб-браузера, называется методом. Чтобы получить данные об отзывах, нужно понимать, какие действия над ресурсами может совершать веб-сервер и какие методы HTTP-запроса им соответствуют.

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Основные методы, которые предоставляет HTTP

POST — создание ресурса. Веб-браузер передаёт на веб-сервер определённый ресурс, который он должен записать у себя определённым образом.
GET — чтение ресурса. Веб-браузер запрашивает у веб-сервера определённый ресурс и получает его в ответ. Например, когда вы открываете главную страницу веб-сайта Яндекс Практикума, ваш веб-браузер использует метод GET.
PUT — замена ресурса. Веб-браузер может заменить существующий на веб-сервере ресурс.
DELETE — удаление ресурса. Веб-браузер может удалить ресурс с веб-сервера.

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

Гость ресторана попросил показать ему десерты на витрине

Чтение ресурса (тип метода GET)

Всегда лучше посмотреть на десерты на витрине, чем читать их описание в меню! Если бы десерт был цифровым, а гость ресторана — веб-браузером, то для просмотра ресурса с десертом он бы выбрал тип метода GET.

Гость ресторана заказал десерт, и его убрали с витрины

Удаление ресурса (тип метода DELETE)

Был десерт — и нет десерта! Если бы десерт был цифровым, а гость ресторана — веб-браузером, то для удаления ресурса с десертом он бы выбрал тип метода DELETE.

Гость ресторана и сам своего рода кондитер — он печёт пончики! Он договорился с рестораном о продаже своих пончиков и хочет разложить их на витрине

Создание ресурса (тип метода POST)

Пончиков много не бывает! Если бы пончики были цифровыми, а гость ресторана — веб-браузером, то для создания ресурса с пончиками он бы выбрал тип метода POST.

Гость ресторана забыл добавить посыпку для глазированных пончиков! Он хочет собрать пончики, добавить посыпку и разложить их по своим местам на витрине

Замена ресурса (тип метода PUT)

Работу над произведением искусства нельзя закончить, её можно только бросить! Если бы пончики были цифровыми, а гость ресторана — веб-браузером, то для замены ресурса с глазированными пончиками он бы выбрал тип метода PUT.

Сопоставьте тип метода и задачу.

Продавец хочет добавить товар в магазине

POST

Веб-браузер использует метод POST, чтобы передать данные веб-серверу на хранение.

Покупатель хочет удалить отзыв о магазине

DELETE

Веб-браузер использует метод DELETE, чтобы удалить данные с веб-сервера.

Продавец хочет прочитать отзыв покупателя о магазине

GET

Веб-браузер использует метод GET, чтобы получить запрашиваемые данные с веб-сервера.

Покупатель хочет отредактировать отзыв о магазине

PUT

Веб-браузер использует метод PUT, чтобы заменить данные, хранящиеся на веб-сервере.

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Заголовки

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

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

Как может выглядеть заголовок? Например, вот так:

JSON


User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5 (.NET CLR 3.5.30729)
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5

Из этого заголовка веб-сервер узнает, что используется браузер Mozilla Firefox на устройстве с операционной системой Windows, а язык пользователя — английский.

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Тело

Чтобы получить данные об отзывах, мы должны знать, какие данные веб-браузер может передать веб-серверу в HTTP-запросе. Эти данные называются телом запроса.

Не все HTTP-запросы включают тело. Тело включают только HTTP-запросы с методами POST и PUT — веб-браузер должен передать веб-серверу данные о ресурсах, которые веб-сервер должен создать или изменить. В HTTP-запросах с методами GET и DELETE, то есть в запросах на чтение и удаление ресурсов, тело не добавляется — достаточно адреса запрашиваемого ресурса, метода и заголовков.

Веб-браузер должен оформить данные в теле HTTP-запроса так, чтобы веб-сервер мог их понять. HTTP-протокол позволяет веб-браузеру и веб-серверу использовать только определённые форматы обмена данными: JSON, XML, CSV и другие.

Самый популярный формат обмена данными — это JSON или нотация объектов JavaScript (JavaScript Object Notation). Свою популярность он заслужил простотой.

JSON определяет правила описания объектов. Объект (Object) — это некоторое понятие предметной области. Например, объектом может быть бокал из королевского сервиза.

В соответствии с JSON начало и конец объекта обозначаются фигурными скобками.

JSON

{

}

Один объект от другого можно отличить благодаря их свойствам. Например, бокал отличается от тарелки объёмом, материалом, формой. Свойства объекта называются ключом (Key). Каждый объект содержит один или несколько ключей. Каждый ключ содержит одно или несколько значений (Value). Например, свойства бокала можно описать так:

Ключ	Значение
Форма	«Тюльпан»
Объём в миллилитрах	300
Материал	Хрусталь, позолота

В соответствии с JSON ключ заключается в кавычки, а после ключа ставится двоеточие. Если значение ключа описывается словом, его тоже заключают в кавычки. Если значение ключа описывается числом, кавычки не нужны. Если у ключа множество значений, начало и конец множества обозначаются квадратными скобками, а значения разделяются запятой. Несколько пар «ключ/значение» тоже разделяются запятой.

JSON

{
   "key_1": "value_1",
   "key_2": 300,
   "key_3": ["value_2", "value_3"]
}

А если добавить сюда значения из таблицы выше, то получится так:

JSON

{
   "shape": "тюльпан",
   "volume": 300,
   "material": ["хрусталь", "позолота"]
}

Значение ключа также можно представить, как объект, состоящий из объектов. Что это значит? Например, производитель — одно из свойств бокала, у которого также можно выделить несколько свойств: название, страна и прочие. В JSON подобная вложенность заключается в отдельные фигурные скобки (как для обозначения начала и конца объекта), а свойства внутри неё так же берут в кавычки и отделяются запятыми:

JSON

{
 "key_1": "value_1",
 "key_2": {
   "key_3": "property_1",
   "key_4": "property_2",
  }
}

Ключ (key_1, key_2 и прочие) всегда прописывается на латинице, а его значение может быть на любом языке, так как это контент, который будет отображаться пользователю.

Для нашего примера JSON может выглядеть так:

JSON

{
 "shape": "тюльпан",
 "vendor": {
   "name": "Королевская хрустальная мануфактура",
   "country": "Великобритания",
  }
}

Заполните пропуски и дополните пунктуацией объект «Производитель» в соответствии с JSON

JSON

ПРОПУСК1
   "vendor": {
      "name": "Королевская хрустальная мануфактура",
      "country": "Великобритания"ПРОПУСК2
      "city": "Суиндон"
   ПРОПУСК3
}

ПРОПУСК1

{

ПРОПУСК 2

ПРОПУСК 3

}

Заполните пропуски в соответствии с JSON.

JSON

{
   ПРОПУСК1: {
      "name": "Королевская хрустальная мануфактура",
      "country": "Великобритания",
      ПРОПУСК2: "Суиндон",
      "street": "Келлсборо-авеню",
      "house": ПРОПУСК3,
      "email": "royal-crystal@buckingham.com"
   }
}

ПРОПУСК 1

"vendor"

ПРОПУСК 2

"city"

ПРОПУСК 3

Теперь вы:

Можете прочитать данные в теле HTTP-запроса.
Понимаете, что они оформляются в соответствии с форматом JSON.
Знаете, что HTTP-запрос веб-браузера к веб-серверу состоит из URL, типа метода, заголовков и тела.

Чтобы выяснить, нужно ли доработать веб-сайт магазина посуды, потребуется получить все данные обо всех отзывах посетителей. Для этого нужно найти в Web API Яндекс Маркета соответсвующий запрос. Среди предложенных вариантов запроса выберите один правильный.

Обратите внимание: в Яндекс Маркете зарегистрировано много магазинов, поэтому, обращаясь к веб-серверу, нужно уточнить, какой магазин нас интересует. Для этого потребуется указать его идентификатор — shopId. При демонстрации в API такие параметры, как этот, берут в фигурные скобки, но для указания в URL они не нужны. Например:

vendor/{vendorId} — так параметр выглядит в API.

vendor/12345 — так этот же параметр выглядит в адресе запроса.

GET /shops/{shopId}

POST /shops/{shopId}/feedback

GET /shops/{shopId}/feedback

Да. Метод GET соответствует тому, что мы получаем отзывы, иерархия соблюдена (сначала магазин, потом уточнение какой именно магазин (shopId), и только потом отзывы).

GET /shops/feedback/{shopId}

DELETE /feedback/shops/{shopId}

Теперь мы знаем, что получить все отзывы с Яндекс Маркета можно при помощи запроса GET /shops/{shopId}/feedback , указав при этом идентификатор магазина.

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим Запрос веб-браузера

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим Введение в урок

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим Протокол HTTP

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим URL

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим Как определить адрес ресурса?

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим Метод

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим Основные методы, которые предоставляет HTTP

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим Заголовки

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим Тело

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Запрос веб-браузера

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Введение в урок

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Протокол HTTP

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
URL

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Как определить адрес ресурса?

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Метод

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Основные методы, которые предоставляет HTTP

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Заголовки

Скачано с сайта - https://supersliv.biz – Присоединяйся к лучшим
Тело