Izveidojiet labāko pārdevēju sarakstu, izmantojot New York Times un Google Books API

Vienā API ne vienmēr var būt visi nepieciešamie dati. Šajā rakstā mēs aprakstīsim divu API apvienošanas darbības, izmantojot New York Times API unikālos identifikatorus, lai greiferstu grāmatu vākus no Google Books API.

Pilnu projektu varat atrast vietnē GitHub un demonstrāciju demonstrēt vietnē CodePen.

Šīs darbības tiks veiktas:

  1. Ielādēt vislabāk pārdoto grāmatu datus no New York Times API.
  2. Pievienojiet ierakstus DOM.
  3. Vaicājiet Google grāmatu API ar ISBN numuriem, lai sarakstiem pievienotu vāka attēlus.

Apmācības beigās jums būs labākais pārdevēju saraksts! Šeit ir palūrēt:

Pagaidiet, bet kāpēc?

Es pirmo reizi sāku strādāt pie šī projekta nedaudz vairāk nekā pirms gada. Es mācījos par API un pieprasīju atslēgas, lai piekļūtu datiem un parādītu tos.

Izpētot New York Times API, es atklāju, ka ir iespējams iegūt vislabāk pārdoto grāmatu sarakstu. Katrai saraksta grāmatai API nodrošina pašreizējo rangu un nedēļu skaitu sarakstā. Tas arī piedāvā tādu informāciju kā konspekts un Amazon saite.

Man bija iespēja aizpildīt tekstuālo informāciju, taču sarakstam trūka grāmatu vāku dabiskā vizuālā komponenta. Tajā laikā es neredzēju skaidru ceļu uz priekšu, tāpēc es ievietoju projektu plauktā.

Šajā gadījumā piekļuve API ir noderīga, taču nepilnīga.

Šonedēļ es atgriezos ar mērķi pievienot grāmatu vākus. Es atklāju, ka Google Books API atgriezīs grāmatu sīktēlus, ja viņiem būs ISBN, unikāls identifikācijas numurs. Kā veiksmei būtu, New York Times API nodrošina šo ISBN.

Mēs strādājam biznesā!

Darba sākšana

Pirmkārt, mēs vēlamies izveidot visvairāk pārdoto daiļliteratūras grāmatu sarakstu ar nelielu informāciju par katru. Būtu jauki parādīt informāciju par to, cik ilgi grāmata ir bijusi sarakstā. Mums arī jāredz vāks un lietotājiem jānodrošina saite, lai uzzinātu vairāk par grāmatu vai iegādātos tās kopiju.

New York Times API nodrošina visu šo informāciju, izņemot grāmatas vāku. Lai sāktu, satveriet bezmaksas NYT API atslēgu.

Mēs izmantosim Fetch API, lai iegūtu labākos datus par daiļliteratūras cietiem vākiem:

atnest ('https://api.nytimes.com/svc/books/v3/lists.json?list-name=hardcover-fiction&api-key=' + apiKey, {
    metode: 'iegūt',
  })
  .tad (atbilde => {return response.json ();})
  .tad (json => {console.log (json);});

Pārbaudot pārlūku, konsolē redzēsit JSON objektu. Ja jūs iepriekš neesat izmantojis API, būs noderīgi veltīt laiku šī objekta apskatīšanai. Iedziļinoties datos, lai piekļūtu tieši tam, ko meklējat, var paiet nedaudz laika, lai pierastu.

Atbilde atgriež 15 objektus “rezultātos”. Katrs rezultāts ir viena grāmata. Skaidrības labad šajā piemērā .forEach () tiek izmantots API atbildes nytimesBestSellers pārskats par katru grāmatu.

nytimesBestSellers.results.forEach (funkcija (grāmata) {
  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 || 'Jauns šonedēļ';
  // ...
});

Pārskatot katru atsevišķo grāmatu, mainīgie tiek iestatīti uz datiem par to konkrēto ierakstu, kuru mēs izmantosim, veicot ierakstu.

Iepriekš norādītajā kodu sarakstā

  • ISBN numurs atrodas grāmatas izbns masīvā
  • mēs izvēlamies ISBN numura 10 ciparu versiju vietnē book_details [0]
  • pēdējās nedēļas vērtējums ir rank_last_week, un noklusējuma vērtība ir “n / a”
  • nedēļu skaits, kad tas ir bijis labāko pārdevēju sarakstā, ir nedēļu_on_listā un pēc noklusējuma ir “Jauns šonedēļ” grāmatām, kuras sarakstā parādās pirmo reizi

Pēc tam mēs varam izveidot HTML objektu, lai to pievienotu bestselleru virsrakstu sarakstam. Pārliecinieties, vai jūsu projektā ir jQuery. Vietnē CodePen varat atvērt iestatījumus un pievienot to JavaScript panelī.

var uzskaitījums =
  '
' +     '

' +       '' +     '

' +     '

' + bookInfo.title + '

' +     '

Autors' + bookInfo.author + '

' +     '

' + bookInfo.publisher + '

' +     '

' + bookInfo.description + '

' +     '
' +       '
' +       '

Pagājušajā nedēļā:' + lastWeekRank + '

' +       '

Nedēļas sarakstā:' + weeksOnList + '

' +     '
' +   '
';
$ ('# bestselleru nosaukumi') .pielikums (uzskaitījums);

Ievērojiet, ka attēls ir atstāts tukšs. Vietnē CodePen esmu pievienojis viettēla attēlu, lai aizpildītu visas Google nenoteiktās atbildes.

Visbeidzot, mēs varēsim atjaunināt grāmatas ranga numuru un pāriet pie kārtas un ISBN numura, lai atjauninātuCover ().

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

Tagad mēs varam rakstīt updateCover (), kas veiks sīktēlu izgūšanu no Google grāmatu API.

Google grāmatu API

Esam apkopojuši ieraksta teksta daļas, taču, lai pievienotu grāmatas vāku, viens no vienkāršākajiem veidiem, kā es saskāros, bija piezvanīt uz Google grāmatu API. Noteikti paņemiet API atslēgu no Google grāmatu API.

Izmantojot 10 ciparu ISBN numuru, mēs varam iegūt sīktēlu grāmatas vāka attēlu, vēlreiz izmantojot fetch (). Tāpat kā iepriekš, mums ir jāveic dziļāka izpēte objektā, lai atrastu vienīgo saiti, kas norāda uz meklēto sīktēlu:

funkciju updateCover (id, isbn) {
  atnest ('https://www.googleapis.com/books/v1/volumes?q=isbn:' + isbn + "& key =" + apiKey, {
    metode: 'saņemt'
  })
  .tad (atbilde => {return response.json ();})
  .tad (dati => {
    var img = data.items [0] .volumeInfo.imageLinks.thumbnail;
    img = img.replace (/ ^ http: \ / \ // i, 'https: //');
    $ ('# cover-' + id) .attr ('src', img);
  })
  .catch (kļūda => {
    console.log (kļūda);
  });
}

Kad attēls ir nostiprināts, nomainiet () apmainās ar visām HTTP saitēm, lai nodrošinātu HTTPS versijas. Pēc tam mēs atjauninām grāmatas vāku, izvēloties pareizo vāka ID un atjauninot tā attēla avotu.

Stils

Es pievienoju papildu stilus ar SASS. Ja jums patīk CSS vai SCSS, izmantojiet nolaižamo pogu šajā logā, lai apkopotu kodu.

Pēdējais redzamais JavaScript kods kontrolē logotipa mērogošanu. Šis kods tiek aktivizēts, kad logs ritina. Logam ritinot uz leju, logotips kondensējas no 80 pikseļu augstuma līdz 35 pikseļiem.

$ (logs) .scroll (funkcija (notikums) {
  var ritināt = $ (logs) .scrollTop ();
  ja (ritiniet> 50) {
    $ ('# Masthead'). Css ({'augstums': '50', 'polsterējums': '8'});
    $ ('# Nyt-logo'). Css ({'augstums': '35'});
  } cits {
    $ ('# Masthead'). Css ({'augstums': '100', 'polsterējums': '10'});
    $ ('# Nyt-logo'). Css ({'augstums': '80'});
  }
});

Noslēguma domas

Bija aizraujoši atgriezties pie projekta un attīstīt tā iespējas. Lai gan es, iespējams, esmu pievērsies šai problēmai savādāk, ja es sāku no nulles, šajā piemērā parādīts veids, kā veikt tipisku API zvanu un pievienot šo darbu.

Faktiski viens no iemesliem, kāpēc es īpaši vēlējos dalīties šajā projektā, bija atcerēšanās, cik neapmierinošs tas man varētu būt, kad es pirmo reizi sāku strādāt ar API. Es būtu satriekts par dokumentāciju, neesmu pārliecināts, kuras funkcijas vai sintakse mani virzīja pareizajā virzienā. Es bieži gribēju skaidru piemēru vai kaut kā pieskārienu, kas pārsniedz Hello World.

Katra API nodrošina noteiktu pakalpojumu, un dažreiz ir nepieciešams tos apvienot. Tas ir tikai viens no veidiem, kā apvienot vairākus pakalpojumus, bet es ceru, ka tas nedaudz iedvesmo tos, kuri pēta veidus, kā apvienot API, lai izveidotu bagātāku saturu.