Lag en liste over bestselgere med New York Times og Google Books API

Et enkelt API har kanskje ikke alltid alle dataene du trenger. I denne artikkelen skal vi gå gjennom trinnene for å kombinere to API-er ved å bruke unike identifikatorer fra New York Times API for å hente bokomslag fra Google Books API.

Du kan finne hele prosjektet på GitHub og se en demo på CodePen.

Her er trinnene vi skal dekke:

  1. Hent bestselgende bøker fra New York Times API.
  2. Legg til lister til DOM.
  3. Spørre Google Books API med ISBN-nummer for å legge til omslagsbilder i oppføringene.

På slutten av opplæringen har du en liste over bestselgere! Her er en titt:

Vent, men hvorfor?

Jeg begynte først å jobbe med dette prosjektet for litt over et år siden. Jeg lærte om API-er og ba om nøkler til å øve på tilgang til og visning av data.

Mens jeg utforsket New York Times API fant jeg ut at det var mulig å få en liste over bestselgende bøker. For hver bok på listen gir API en aktuell rangering og antall uker på listen. Det tilbyr også informasjon som en synopsis og en Amazon-kobling.

Jeg var i stand til å fylle tekstinformasjon, men listen manglet den naturlige visuelle komponenten i bokomslag. På det tidspunktet så jeg ikke en klar vei fremover, så jeg la prosjektet på hylla.

Dette er et tilfelle der det er nyttig, men ufullstendig å ha tilgang til et API.

Denne uken kom jeg tilbake med målet om å legge til bøkeromslag. Jeg fant ut at Google Books API vil returnere miniatyrbilder for bøker når de fikk et ISBN, et unikt identifikasjonsnummer. Som flaks ville det, gir New York Times API det ISBN-nummeret.

Vi er i virksomhet!

Starter

Først ønsker vi å lage en liste over de bestselgende skjønnlitterære bøkene med litt informasjon om hver. Det ville være fint å vise informasjon om hvor lenge boka har stått på listen. Vi må også se omslaget og gi en lenke for brukere å lære mer om boka eller kjøpe en kopi.

New York Times API gir all den informasjonen bortsett fra bokomslaget. Ta en gratis NYT API-nøkkel for å komme i gang.

Vi bruker Fetch API for å få bestselgerdata for innbundet skjønnlitteratur:

hente ('https://api.nytimes.com/svc/books/v3/lists.json?list-name=hardcover-fiction&api-key=' + apiKey, {
    metode: 'få',
  })
  .then (response => {return response.json ();})
  .then (json => {console.log (json);});

Hvis du inspiserer nettleseren, vil du se et JSON-objekt som er logget på konsollen. Hvis du ikke har brukt et API før, vil det være nyttig å bruke et øyeblikk på å se gjennom dette objektet. Å grave i dataene for å få tilgang til nøyaktig det du leter etter, kan ta litt tid å bli vant til.

Svaret returnerer 15 objekter innenfor "resultater". Hvert resultat er en bok. For å gjøre det lettere, bruker dette eksemplet .forEach () til å se nærmere på API-svaret nytimesBestSellers som sløyfer over hver bok.

nytimesBestSellers.results.forEach (funksjon (bok) {
  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 || ‘Ny denne uken’;
  // ...
});

Når vi sløyfer over hver enkelt bok, er variablene satt til dataene for deres spesifikke liste, som vi vil bruke når vi oppgir oppføringen.

I kodelisten ovenfor,

  • ISBN-nummeret er plassert i bokens isbns-array
  • vi velger den ti-sifrede versjonen av ISBN-nummeret på book_details [0]
  • den siste ukes rangeringen er på rang_last_week og er standard til ‘n / a’
  • antall uker det har stått på bestselgerlisten, er på uker_liste og er standard til "Ny denne uken" for bøker som vises på listen for første gang

Deretter kan vi lage et HTML-objekt for å legge til listen over bestselgere-titler. Forsikre deg om at prosjektet ditt inkluderer jQuery. På CodePen kan du gå til innstillinger og legge den til i JavaScript-panelet.

var notering =
  '
' +     '

' +       '' +     '

' +     '

' + bookInfo.title + '

' +     '

Av' + bookInfo.author + '

' +     '

' + bookInfo.publisher + '

' +     '

' + bookInfo.description + '

' +     '
' +       '
' +       '

Forrige uke:' + lastWeekRank + '

' +       '

Uker på listen:' + ukerOnList + '

' +     '
' +   '';
$ ( '# Bestselger-titler') append (liste).;

Legg merke til at bildet er tomt. På CodePen har jeg lagt til et plassholderbilde for å fylle ut udefinerte svar fra Google.

Til slutt kan vi oppdatere rangeringsnummeret og passere rangering og ISBN-nummer for å oppdatere omslag ().

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

Vi kan nå skrive updateCover (), som vil håndtere henting av miniatyrbildet fra Google Books API.

Google Books API

Vi har samlet de tekstlige delene av oppføringen, men for å legge til et bokomslag, var en av de enkleste måtene jeg kom over å ringe til Google Books API. Sørg for å hente en API-nøkkel fra Google Books API.

Ved å bruke det ti-sifrede ISBN-nummeret, kan vi få et miniatyrbokomslag ved å bruke hente () igjen. Som før, må vi bore ned i objektet for å finne den eneste lenken som refererer til miniatyrbildet vi leter etter:

funksjon updateCover (id, isbn) {
  hente ('https://www.googleapis.com/books/v1/volumes?q=isbn:' + isbn + "& key =" + apiKey, {
    metode: 'få'
  })
  .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);
  })
  .fangst (feil => {
    console.log (error);
  });
}

Etter at bildet er sikret, bytter du ut () bytter du ut alle HTTP-lenker for å sikre HTTPS-versjoner. Vi oppdaterer deretter bokomslaget ved å velge riktig forside-ID og oppdatere bildekilden.

Stil

Jeg har lagt til flere stiler med SASS. Hvis du er mer komfortabel med CSS eller SCSS, bruker du rullegardinmenyen i det vinduet for å sette sammen koden.

Den siste biten av JavaScript du ser, styrer logoen skalering. Denne koden utløses når vinduet ruller. Når vinduet ruller ned, kondenserer logoen fra en høyde på 80px ned til 35px.

$ (vindu). bla (funksjon (hendelse) {
  var scroll = $ (vindu) .scrollTop ();
  if (bla> 50) {
    $ (‘# Masthead’). Css ({‘høyde’: ‘50’, ‘polstring’: ‘8’});
    . $ ( ‘# Nyt-logo’) css ({ ‘høyde’:’35' });
  } annet {
    $ (‘# Masthead’). Css ({‘høyde’: ‘100’, ‘polstring’: ‘10’});
    . $ ( ‘# Nyt-logo’) css ({ ‘høyde’:’80' });
  }
});

Siste tanker

Det var spennende å komme tilbake til et prosjekt og bygge videre på funksjonene. Selv om jeg kanskje har nærmet meg dette problemet annerledes hvis jeg hadde begynt fra bunnen av, viser dette eksemplet en måte å ta en typisk API-samtale og legge til det arbeidet.

Faktisk, en av grunnene til at jeg spesielt ønsket å dele dette prosjektet, var å huske hvor frustrerende det kunne bli for meg da jeg først begynte å jobbe med APIer. Jeg ville bli overveldet med dokumentasjonen, ikke sikker på hvilke funksjoner eller syntaks som førte meg i riktig retning. Jeg har ofte ønsket meg et tydelig eksempel eller gjennomgang av noe en berøring utover Hello World.

API-er gir hver en spesifikk tjeneste, og noen ganger er det nødvendig å kombinere dem. Dette er bare en måte å samle flere tjenester på, men jeg håper det er litt inspirasjon for de som utforsker måter å kombinere APIer for å skape rikere innhold.