В одном API не всегда могут быть все необходимые данные. В этой статье мы рассмотрим шаги по объединению двух API с использованием уникальных идентификаторов из New York Times API для получения обложек книг из Google Книг.

Вы можете найти полный проект на GitHub и просмотреть демонстрацию на CodePen.

Вот шаги, которые мы рассмотрим:

  1. Получите данные о самых продаваемых книгах из API New York Times.
  2. Добавлять листинги в DOM.
  3. Запросите API Google Книг с номерами ISBN, чтобы добавить изображения обложек в списки.

В конце урока у вас будет список бестселлеров! Вот взгляд:

Подожди, а зачем?

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

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

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

Это тот случай, когда доступ к API полезен, но неполон.

На этой неделе я вернулся с целью добавить обложки книг. Я обнаружил, что API Google Книг будет возвращать эскизы книг, если указан ISBN, уникальный идентификационный номер. К счастью, API New York Times предоставляет этот ISBN.

Мы в деле!

Начиная

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

API New York Times предоставляет всю эту информацию, кроме обложки книги. Для начала возьмите бесплатный ключ API NYT.

Мы будем использовать Fetch API, чтобы получить данные о самых продаваемых произведениях художественной литературы в твердом переплете:

fetch('https://api.nytimes.com/svc/books/v3/lists.json?list-name=hardcover-fiction&api-key=' + apiKey, {
    method: 'get',
  })
  .then(response => { return response.json(); })
  .then(json => { console.log(json); });

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

Ответ возвращает 15 объектов в пределах «результатов». Каждый результат - одна книга. Для ясности, в этом примере .forEach() используется для детализации ответа API nytimesBestSellers, проходящего по каждой книге.

nytimesBestSellers.results.forEach(function(book) {
  var isbn = book.isbns[1].isbn10;
  var bookInfo = book.book_details[0];
  var lastWeekRank = book.rank_last_week || ‘n/a’;
  var weeksOnList = book.weeks_on_list || ‘New this week’;
  // ...
});

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

В листинге кода выше

  • номер ISBN находится в isbns массиве книги
  • выбираем 10-значную версию номера ISBN в book_details[0]
  • рейтинг на прошлой неделе - rank_last_week, по умолчанию - «н / п»
  • количество недель, в течение которых она была в списке бестселлеров, составляет weeks_on_list и по умолчанию установлено значение «Новые на этой неделе» для книг, которые появляются в списке впервые

Затем мы можем создать объект HTML для добавления в список best-seller-titles. Убедитесь, что ваш проект включает jQuery. На CodePen вы можете перейти в настройки и добавить его в панель JavaScript.

var listing = 
  '<div id="' + book.rank + '" class="entry">' + 
    '<p>' + 
      '<img src="" class="book-cover" id="cover-' + book.rank + '">' + 
    '</p>' + 
    '<h2><a href="' + book.amazon_product_url + '" target="_blank">' + bookInfo.title + '</a></h2>' +
    '<h4>By ' + bookInfo.author + '</h4>' +
    '<h4 class="publisher">' + bookInfo.publisher + '</h4>' +
    '<p>' + bookInfo.description + '</p>' + 
    '<div class="stats">' +
      '<hr>' + 
      '<p>Last Week: ' + lastWeekRank + '</p>' + 
      '<p>Weeks on list: ' + weeksOnList + '</p>' +
    '</div>' +
  '</div>';
$('#best-seller-titles').append(listing);

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

Наконец, мы можем обновить номер книги и передать рейтинг и номер ISBN на updateCover().

$('#' + book.rank).attr('nyt-rank', book.rank);
updateCover(book.rank, isbn);

Теперь мы можем написать updateCover(), который будет обрабатывать получение эскиза из API Google Книг.

API Google Книг

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

Используя 10-значный номер ISBN, мы можем получить уменьшенное изображение обложки книги, снова используя fetch(). Как и раньше, мы должны углубиться в объект, чтобы найти единственную ссылку, указывающую на уменьшенное изображение, которое мы ищем:

function updateCover(id, isbn) {
  fetch('https://www.googleapis.com/books/v1/volumes?q=isbn:' + isbn + "&key=" + apiKey, {
    method: 'get'
  })
  .then(response => { return response.json(); })
  .then(data => {
    var img = data.items[0].volumeInfo.imageLinks.thumbnail;
    img = img.replace(/^http:\/\//i, 'https://');
    $('#cover-' + id).attr('src', img);
  })  
  .catch(error=> {   
    console.log(error);
  });
}

После защиты образа replace() меняет местами все ссылки HTTP на защищенные версии HTTPS. Затем мы обновляем обложку книги, выбирая правильный идентификатор обложки и обновляя источник изображения.

Стиль

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

Последний фрагмент кода JavaScript, который вы увидите, управляет масштабированием логотипа. Этот код запускается при прокрутке окна. По мере прокрутки окна вниз логотип сжимается с высоты 80 пикселей до 35 пикселей.

$(window).scroll(function (event) {
  var scroll = $(window).scrollTop();
  if (scroll > 50) {
    $(‘#masthead’).css({‘height’:’50', ‘padding’ : ‘8’});
    $(‘#nyt-logo’).css({‘height’:’35'});
  } else {
    $(‘#masthead’).css({‘height’:’100', ‘padding’:’10'});
    $(‘#nyt-logo’).css({‘height’:’80'});
  }
});

Последние мысли

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

Фактически, одной из причин, по которой я особенно хотел поделиться этим проектом, было воспоминание о том, как это могло меня расстроить, когда я впервые начал работать с API. Я был бы завален документацией, не зная, какие функции или синтаксис ведут меня в правильном направлении. Мне часто хотелось получить ясный пример или пройтись по чему-то, выходящему за рамки Hello World.

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