Рубрики
Без рубрики

Постройте список лучших продавцов с New York Times и API Google Books

Andrew Baxes Создайте список лучших продавцов с New York Times и Google Books Apia Onow API, возможно, не всегда есть все необходимые данные. В этой статье мы пройдем по шагам, чтобы объединить два API, используя уникальные идентификаторы из New York Times

Эндрю тюки

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

Вы можете найти полный проект на Github и просмотреть демонстрацию на Кодепен Отказ

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

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

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

Подожди, но почему?

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

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

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

Это пример, в котором имеется доступ к API, является полезным, но неполным.

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

Мы в бизнесе!

Начиная

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

Нью-Йорк Таймс API предоставляет всю эту информацию, за исключением обложки книги. Возьми свободную Nyt api ключ для начала.

Мы будем использовать 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 объектов в «Результаты». Каждый результат – одна книга. Для ясности этот пример использует .для каждого () сверлить в ответ 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 и по умолчанию для ‘n/a’
  • Количество недель было в списке лучших продавцов, в недели_on_list и по умолчанию на «новую на этой неделе» для книг, которые появляются в списке впервые

Далее мы можем сделать HTML-объект для добавления к Лучшие продавцы - заголовки список. Убедитесь, что ваш проект включает в себя jquery Отказ На кодепене вы можете перейти к настройкам и добавить его на панель JavaScript.

var listing =   '
' +     '
' +       '' +     '
' +     '
' + bookInfo.title + '
' +    '
By ' + bookInfo.author + '
' +    '
' + bookInfo.publisher + '
' +    '
' + bookInfo.description + '
' +     '
' +      '
' +       '
Last Week: ' + lastWeekRank + '
' +       '
Weeks on list: ' + weeksOnList + '
' +    '
' +  '
';
$('#best-seller-titles').append(listing);

Обратите внимание, что изображение оставлено пустым. На Кодепен Я добавил изображение заполнителя для заполнения любых неопределенных ответов от Google.

Наконец, мы сможем обновить номер рейтинга книги и пройти по рейтингу и номеру ISBN для UpdateCover () Отказ

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

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

Google Книги API.

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

Используя 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);  });}

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

Стиль

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

Последний бит JavaScript вы увидите, управляет масштабированием логотипа. Этот код срабатывает при прокрутке окна. Поскольку окно прокручиваются вниз, логотип конденсируется на высоте 80px до 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.

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

Оригинал: “https://www.freecodecamp.org/news/build-a-best-sellers-list-with-new-york-times-google-books-api-46201c30aec7/”

Читайте ещё по теме: