Създайте списък на най-добрите продавачи с New York Times и Google Books API

Един API може не винаги да има всички необходими данни. В тази статия ще преминем през стъпките за комбиниране на два API, като използваме уникални идентификатори от API на New York Times, за да вземем корици на книги от API на Google Books.

Можете да намерите пълния проект в 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 на Ню Йорк Таймс предоставя този ISBN номер.

Ние сме в бизнеса!

Приготвяме се да започнем

Първо, искаме да генерираме списък с най-продаваните художествени книги с малко информация за всяка. Би било хубаво да се покаже информация колко време е книгата в списъка. Също така трябва да видим корицата и да предоставим връзка за потребителите, за да научат повече за книгата или да купят копие.

API на New York Times предоставя цялата тази информация, с изключение на корицата на книгата. Вземете безплатен ключ за NYT API, за да започнете.

Ще използваме API за изтегляне, за да получим данни за най-добрия продавач за художествени произведения на твърди корици:

fetch („https://api.nytimes.com/svc/books/v3/lists.json?list-name=hardcover-fiction&api-key=“ + apiKey, {
    метод: 'получавам',
  })
  .then (отговор => {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“
  • броят седмици, в които е бил в списъка на най-добрите продавачи, е в Week_on_list и по подразбиране е „Нова тази седмица“ за книги, които се появяват в списъка за първи път

След това можем да направим HTML обект, който да добавим към списъка със заглавия на най-продаваните. Бъдете сигурни, че вашият проект включва jQuery. В CodePen можете да отидете на настройки и да го добавите в панела на JavaScript.

var листинг =
  '
' +     '

' +       '' +     '

' +     '

' + 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 (отговор => {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, който ще видите, контролира мащабирането на логото. Този код се задейства, когато прозорецът се превърта. Докато прозорецът се превърта надолу, логото се кондензира от височина от 80px до 35px.

$ (прозорец) .scroll (функция (събитие) {
  var scroll = $ (window) .scrollTop ();
  ако (превъртете> 50) {
    $ ('# Masthead'). Css ({'height': '50', 'padding': '8'});
    . $ ( "# NYT-лого) CSS ({ 'височина': '35'});
  } else {
    $ ('# Masthead'). Css ({'height': '100', 'padding': '10'});
    . $ ( "# NYT-лого) CSS ({ 'височина': '80'});
  }
});

Заключителни мисли

Беше вълнуващо да се върна към един проект и да надградим неговите характеристики. Въпреки че може би съм подхождал към този проблем по различен начин, ако започнах от нулата, този пример показва начин да предприемете типично обаждане за API и да добавите към тази работа.

Всъщност една от причините, поради която исках да споделя този проект, беше да си спомня колко фрустриращ може да ми стане, когато за пръв път започнах да работя с API. Бих се затрупал с документацията, не съм сигурен кои функции или синтаксис ме водят в правилната посока. Често ми се искаше ясен пример или разглеждане на нещо докосване отвъд Hello World.

Всеки API предоставя всяка конкретна услуга и понякога е необходимо да ги комбинирате. Това е само един начин за обединяване на множество услуги, но се надявам, че е малко вдъхновение за тези, които проучват начини за комбиниране на API за създаване на по-богато съдържание.