В одном API не всегда могут быть все необходимые данные. В этой статье мы рассмотрим шаги по объединению двух API с использованием уникальных идентификаторов из New York Times API для получения обложек книг из Google Книг.
Вы можете найти полный проект на GitHub и просмотреть демонстрацию на CodePen.
Вот шаги, которые мы рассмотрим:
- Получите данные о самых продаваемых книгах из API New York Times.
- Добавлять листинги в DOM.
- Запросите 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-интерфейсов для создания более богатого контента.