Створіть список найкращих продавців за допомогою New York Times та API Google Books

Один API може не завжди мати всі необхідні вам дані. У цій статті ми ознайомимось із кроками поєднання двох API, використовуючи унікальні ідентифікатори API New York Times API, щоб захопити обкладинки книг з 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, щоб розпочати роботу.

Ми будемо використовувати API Fetch для отримання даних про кращих продавців художньої літератури:

fetch ('https://api.nytimes.com/svc/books/v3/lists.json?list-name=hardcover-fiction&api-key=' + apiKey, {
    метод: "отримати",
  })
  .then (response => {return response.json ();})
  .then (json => {console.log (json);});

Якщо ви оглядаєте веб-переглядач, ви побачите в консолі об'єкт JSON. Якщо ви раніше не використовували API, буде корисно провести мить, переглядаючи цей об’єкт. Увійти в дані, щоб отримати доступ до саме того, що ви шукаєте, може зайняти деякий час, щоб звикнути.

Відповідь повертає 15 об'єктів у межах «результатів». Кожен результат - одна книга. Для наочності цей приклад використовує .forEach () для детального перегляду відповіді API nytimesBestSellers, що перебирається над кожною книгою.

nytimesBestSellers.results.forEach (функція (книга) {
  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 || "Новий цього тижня";
  // ...
});

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

У наведеному вище коді:

  • номер ISBN знаходиться в масиві isbns книги
  • ми вибираємо 10-значну версію номера ISBN у book_details [0]
  • рейтинг за останній тиждень знаходиться на рівні rank_last_week і за замовчуванням дорівнює "n / a"
  • кількість тижнів, в яких вона потрапила до списку кращих продавців, - у weeks_on_list та за замовчуванням "Новий на цьому тижні" для книг, які вперше з'являються у списку.

Далі ми можемо зробити об’єкт HTML для додавання до списку найменувань бестселерів. Будьте впевнені, що ваш проект включає jQuery. На CodePen ви можете перейти до налаштувань і додати їх на панелі JavaScript.

var listing =
  '
' +     '

' +       ' '+     '

' +     '

' + bookInfo.title + '

' +     '

Від' + bookInfo.author + '

' +     '

"+ bookInfo.publisher +'

'+     '

' + bookInfo.description + '

' +     '
' +       '
' +       '

Минулий тиждень:' + lastWeekRank + '

' +       '

Тиждень у списку:' + weeksOnList + '

' +     '
' +   '
';
$ ('# бестселер-титри'). додаток (лістинг);

Зауважте, що зображення залишається порожнім. У 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 (). Як і раніше, нам доведеться розгорнутися в об'єкт, щоб знайти єдине посилання, яке посилається на ескіз, який ми шукаємо:

функція updateCover (id, isbn) {
  fetch ('https://www.googleapis.com/books/v1/volumes?q=isbn:' + isbn + "& key =" + apiKey, {
    метод: 'отримати'
  })
  .then (response => {return response.json ();})
  .then (дані => {
    var img = data.items [0] .volumeInfo.imageLinks.thumbnail;
    img = img.replace (/ ^ http: \ / \ // i, 'https: //');
    $ ('# cover-' + id) .attr ('src', img);
  })
  .catch (помилка => {
    console.log (помилка);
  });
}

Після того, як зображення захищено, замініть () підміняє будь-які HTTP-посилання для захисту версій HTTPS. Потім ми оновлюємо обкладинку книги, вибираючи відповідний ідентифікатор обкладинки та оновлюючи її джерело зображення.

Стиль

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

Останній біт JavaScript, який ви побачите, керує масштабуванням логотипу. Цей код спрацьовує, коли вікно прокручується. Коли вікно прокручується вниз, логотип конденсується з висоти від 80 до 35 пікселів.

$ (window) .scroll (функція (подія) {
  var scroll = $ (window) .scrollTop ();
  if (прокручування> 50) {
    $ ('# Masthead'). Css ({'height': '50', 'padding': '8'});
    $ ('# Nyt-logo'). Css ({'висота': '35'});
  } else {
    $ ('# Masthead'). Css ({'height': '100', 'padding': '10'});
    $ ('# Nyt-logo'). Css ({'висота': '80'});
  }
});

Фінальні думки

Було захоплююче повернутися до проекту та розвинути його особливості. Хоча я, можливо, інакше підходив до цієї проблеми, якби я почав з нуля, цей приклад показує спосіб прийняти типовий виклик API та додати цю роботу.

Насправді, одна з причин, якою я особливо хотів поділитися цим проектом, - це пригадування того, як це може засмутити мене, коли я вперше почав працювати з API. Я був би перевантажений документацією, не впевнений, які функції чи синтаксис ведуть мене в правильному напрямку. Мені часто хотілося навести чіткий приклад або переглядати щось дотик поза Привітним світом.

API надають кожну конкретну послугу, і іноді їх потрібно комбінувати. Це лише один із способів об’єднання декількох сервісів, але сподіваюся, що це трохи натхнення для тих, хто вивчає способи комбінування API, щоб створити більш багатий контент.