Lav en liste over bestsælgere med New York Times og Google Books API

Et enkelt API har muligvis ikke altid alle de data, du har brug for. I denne artikel gennemgår vi trinene til at kombinere to API'er ved hjælp af unikke identifikatorer fra New York Times API til at hente bogomslag fra Google Books API.

Du kan finde det fulde projekt på GitHub og se en demo på CodePen.

Her er de trin, vi vil dække:

  1. Hent data om bedst sælgende bøger fra New York Times API.
  2. Tilføj lister til DOM.
  3. Spørg Google Books API med ISBN-numre for at tilføje omslagsbilleder til listerne.

I slutningen af ​​selvstudiet har du en liste over bestsælgere! Her er et kig:

Vent, men hvorfor?

Jeg begyndte først at arbejde på dette projekt for lidt over et år siden. Jeg lærte om API'er og anmodede om nøgler til at øve sig på at få adgang til og vise data.

Da jeg udforskede New York Times API, fandt jeg, at det var muligt at få en liste over bedst sælgende bøger. For hver bog på listen giver API'en en aktuel rangering og antal uger på listen. Det tilbyder også info som en synopsis og et Amazon-link.

Jeg var i stand til at udfylde tekstinformation, men listen manglede den naturlige visuelle komponent i bogomslag. På det tidspunkt så jeg ikke en klar vej fremad, så jeg lagde projektet på hylden.

Dette er et tilfælde, hvor det er nyttigt at have adgang til en API, men ufuldstændig.

Denne uge vendte jeg tilbage med målet om at tilføje bøgeromslag. Jeg fandt, at Google Books API vil returnere miniaturebilleder for bøger, når de fik et ISBN, et unikt identifikationsnummer. Som heldet ville have det, giver New York Times API det ISBN.

Vi er i forretning!

Kom godt i gang

Først vil vi generere en liste over de mest sælgende fiktionbøger med en smule info om hver. Det ville være dejligt at få vist oplysninger om, hvor længe bogen har været på listen. Vi er også nødt til at se omslaget og give et link til brugere for at lære mere om bogen eller købe en kopi.

New York Times API giver alle disse oplysninger bortset fra bogomslaget. Grib en gratis NYT API-nøgle for at komme i gang.

Vi bruger Fetch API til at få de bedste sælgerdata til hardcover fiktion:

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 inspicerer browseren, ser du et JSON-objekt logget på konsollen. Hvis du ikke har brugt en API før, vil det være nyttigt at bruge et øjeblik på at se gennem dette objekt. At grave ind i dataene for at få adgang til nøjagtigt det, du leder efter, kan tage et stykke tid at vænne sig til.

Svaret returnerer 15 objekter inden for "resultater". Hvert resultat er en bog. For at gøre det lettere, bruger dette eksempel .forEach () til at bore ned i API-svaret nytimesBestSellers looping over hver bog.

nytimesBestSellers.results.forEach (funktion (bog) {
  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 uge';
  // ...
});

Når vi løber over hver enkelt bog, indstilles variablerne til dataene til deres specifikke liste, som vi vil bruge, når vi indtaster indtastningen.

I kodelisten ovenfor

  • ISBN-nummeret er placeret i bogens isbns-array
  • vi vælger den ti-cifrede version af ISBN-nummeret på book_details [0]
  • den sidste uges placering er på rang_last_week og er som standard ikke 'n / a'
  • antallet af uger, det har været på listen over bestsellers, er på week_on_list og er som standard "Ny denne uge" for bøger, der vises på listen for første gang

Dernæst kan vi oprette et HTML-objekt, der skal føjes til listen over bestseller-titler. Sørg for, at dit projekt inkluderer jQuery. På CodePen kan du gå til indstillinger og tilføje det i JavaScript-panelet.

var liste =
  '
' +     '

' +       '' +     '

' +     '

' + bookInfo.title + '

' +     '

Af' + bookInfo.author + '

' +     '

' + bookInfo.publisher + '

' +     '

' + bookInfo.description + '

' +     '
' +       '
' +       '

Sidste uge:' + lastWeekRank + '

' +       '

Uger på listen:' + ugerOnList + '

' +     '
' +   '';
$ ( '# Bestseller-titler') append (notering).;

Bemærk, at billedet er tomt. På CodePen har jeg tilføjet et pladsholderbillede for at udfylde alle udefinerede svar fra Google.

Endelig kan vi opdatere bogens rangnummer og videregive rang og ISBN-nummer til updateCover ().

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

Vi kan nu skrive updateCover (), som vil håndtere hentning af miniature fra Google Bøger API.

Google Books API

Vi har samlet de tekstmæssige dele af fortegnelsen, men for at tilføje et bogomslag var en af ​​de nemmeste måder, jeg kom på, at anmode om Google Books API. Sørg for at få fat i en API-nøgle fra Google Books API.

Ved hjælp af det ti-cifrede ISBN-nummer kan vi få et forsidebillede med miniaturebøger ved at bruge hente igen (). Som før er vi nødt til at bore ned i objektet for at finde det eneste link, der refererer til det miniaturebillede, vi leder efter:

funktionsopdateringCover (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.tumnail;
    img = img.replace (/ ^ http: \ / \ // i, 'https: //');
    $ ('# cover-' + id) .attr ('src', img);
  })
  .fang (fejl => {
    console.log (fejl);
  });
}

Efter at billedet er sikret, udskifter () bytter alle HTTP-links til sikre HTTPS-versioner. Vi opdaterer derefter bogomslaget ved at vælge det korrekte omslag-ID og opdatere dets billedkilde.

Stil

Jeg har tilføjet yderligere stilarter med SASS. Hvis du er mere komfortabel med CSS eller SCSS, skal du bruge rullemenuen i det vindue til at samle koden.

Den sidste bit af JavaScript, du ser, styrer logoets skalering. Denne kode udløses, når vinduet ruller. Når vinduet ruller ned, kondenseres logoet fra en højde på 80px ned til 35px.

$ (vindue) .scroll (funktion (begivenhed) {
  var rulle = $ (vindue) .scrollTop ();
  if (rulle> 50) {
    $ ('# Masthead'). Css ({'højde': '50', 'polstring': '8'});
    . $ ( ’# Nyt-logoet’) css ({ ’højde’:’35' });
  } andet {
    $ ('# Masthead'). Css ({'højde': '100', 'polstring': '10'});
    . $ ( ’# Nyt-logoet’) css ({ ’højde’:’80' });
  }
});

Afsluttende tanker

Det var spændende at vende tilbage til et projekt og bygge videre på dets funktioner. Selvom jeg måske har behandlet dette problem anderledes, hvis jeg var begyndt fra bunden, viser dette eksempel en måde at tage et typisk API-opkald på og tilføje det arbejde.

Faktisk var en af ​​grundene til, at jeg især ønskede at dele dette projekt, at huske, hvor frustrerende det kunne blive for mig, da jeg først begyndte at arbejde med API'er. Jeg blev overvældet af dokumentationen, ikke sikker på, hvilke funktioner eller syntaks der førte mig i den rigtige retning. Jeg ønskede ofte et klart eksempel eller gennemgang af noget, der var et touch ud over Hello World.

API'er leverer hver en bestemt service, og nogle gange er det nødvendigt at kombinere dem. Dette er kun en måde at samle flere tjenester på, men jeg håber, det er lidt inspiration for dem, der udforsker måder at kombinere API'er til at skabe rigere indhold på.