Bouw een bestsellerslijst met New York Times en Google Books API

Een enkele API bevat mogelijk niet altijd alle gegevens die u nodig hebt. In dit artikel zullen we de stappen doorlopen om twee API's te combineren met behulp van unieke ID's van de New York Times API om boekomslagen van de Google Books API te pakken.

U kunt het volledige project vinden op GitHub en een demo bekijken op CodePen.

Hier zijn de stappen die we zullen behandelen:

  1. Haal best verkopende boekengegevens op van de New York Times API.
  2. Voeg lijsten toe aan de DOM.
  3. Vraag de Google Books API met ISBN-nummers om omslagafbeeldingen aan de vermeldingen toe te voegen.

Aan het einde van de tutorial heb je een lijst met bestsellers! Hier is een kijkje:

Wacht, maar waarom?

Ik begon iets meer dan een jaar geleden voor het eerst aan dit project te werken. Ik leerde over API's en vroeg om sleutels om te oefenen met het openen en weergeven van gegevens.

Tijdens het verkennen van de New York Times API ontdekte ik dat het mogelijk was om een ​​lijst met bestverkopende boeken te krijgen. Voor elk boek op de lijst geeft de API een huidige rang en aantal weken op de lijst. Het biedt ook informatie zoals een synopsis en een Amazon-link.

Ik was in staat om tekstuele informatie te vullen, maar de lijst miste de natuurlijke visuele component van boekomslagen. Destijds zag ik geen duidelijke weg vooruit, dus legde ik het project op de plank.

Dit is een voorbeeld waarbij toegang tot een API nuttig, maar onvolledig is.

Deze week keerde ik terug met het doel om boekenomslagen toe te voegen. Ik heb geconstateerd dat Google Books API miniaturen voor boeken retourneert wanneer ze een ISBN krijgen, een uniek identificatienummer. Zoals geluk zou hebben, biedt de New York Times API dat ISBN.

We zijn in zaken!

Ermee beginnen

Eerst willen we een lijst genereren van de best verkopende fictieboeken met een beetje informatie over elk. Het zou leuk zijn om informatie weer te geven over hoe lang het boek op de lijst staat. We moeten ook de omslag zien en een link bieden voor gebruikers om meer te weten te komen over het boek of een exemplaar te kopen.

De New York Times API biedt al die informatie behalve de boekomslag. Pak een gratis NYT API-sleutel om te beginnen.

We gebruiken de Fetch API om de bestsellersgegevens voor hardcover-fictiewerken te krijgen:

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

Als u de browser inspecteert, ziet u een JSON-object vastgelegd in de console. Als u nog niet eerder een API hebt gebruikt, is het handig om even door dit object te kijken. Het kan even duren voordat u zich in de gegevens verdiept om toegang te krijgen tot waar u naar op zoek bent.

Het antwoord retourneert 15 objecten binnen “resultaten”. Elk resultaat is één boek. Voor de duidelijkheid wordt in dit voorbeeld .forEach () gebruikt om de API-reactie nytimesBestSellers in een lus over elk boek te doorlopen.

nytimesBestSellers.results.forEach (functie (boek) {
  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 || ‘Nieuw deze week’;
  // ...
});

Terwijl we elk individueel boek herhalen, worden de variabelen ingesteld op de gegevens voor hun specifieke lijst, die we zullen gebruiken bij het invoeren.

In de bovenstaande codelijst,

  • het ISBN-nummer bevindt zich in de isbns-array van het boek
  • we selecteren de 10-cijferige versie van het ISBN-nummer op book_details [0]
  • de rangorde van de laatste week is op rank_last_week en staat standaard op 'n.v.t.'
  • het aantal weken dat het op de bestsellerslijst staat, staat op weeks_on_list en staat standaard op 'Nieuw deze week' voor boeken die voor het eerst op de lijst verschijnen

Vervolgens kunnen we een HTML-object maken dat wordt toegevoegd aan de lijst met bestseller-titels. Zorg ervoor dat uw project jQuery bevat. Op CodePen kunt u naar instellingen gaan en deze toevoegen in het JavaScript-paneel.

var listing =
  '
' +     '

' +       '' +     '

' +     '

' + bookInfo.title + '

' +     '

Door' + bookInfo.author + '

' +     '

' + bookInfo.publisher + '

' +     '

' + bookInfo.description + '

' +     '
' +       '
' +       '

Vorige week:' + lastWeekRank + '

' +       '

Weken op lijst:' + weeksOnList + '

' +     '
' +   '';
$ ( '# Best-seller-titels') append (notering).;

Merk op dat de afbeelding leeg is gelaten. Op CodePen heb ik een placeholder-afbeelding toegevoegd om niet-gedefinieerde antwoorden van Google in te vullen.

Ten slotte kunnen we het rangnummer van het boek bijwerken en de rang en het ISBN-nummer doorgeven aan updateCover ().

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

We kunnen nu updateCover () schrijven, die het ophalen van de miniatuur uit de Google Books API zal afhandelen.

Google Books API

We hebben de tekstuele delen van de lijst verzameld, maar om een ​​boekomslag toe te voegen, was een van de gemakkelijkste manieren die ik tegenkwam de Google Books API te gebruiken. Zorg ervoor dat u een API-sleutel uit de Google Books API haalt.

Met behulp van het 10-cijferige ISBN-nummer kunnen we een miniatuurafbeelding van de omslag van het boek krijgen door opnieuw fetch () te gebruiken. Zoals eerder moeten we het object nader bekijken om de enkele link te vinden die verwijst naar de miniatuurafbeelding waarnaar we op zoek zijn:

functie updateCover (id, isbn) {
  fetch ('https://www.googleapis.com/books/v1/volumes?q=isbn:' + isbn + "& key =" + apiKey, {
    methode: 'get'
  })
  .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);
  })
  .catch (error => {
    console.log (fout);
  });
}

Nadat de afbeelding is beveiligd, vervangt () eventuele HTTP-koppelingen om HTTPS-versies te beveiligen. Vervolgens werken we de boekomslag bij door de juiste omslag-ID te selecteren en de afbeeldingsbron bij te werken.

Stijl

Ik heb extra stijlen toegevoegd met SASS. Als u meer vertrouwd bent met CSS of SCSS, gebruikt u de vervolgkeuzeknop in dat venster om de code te compileren.

Het laatste stukje JavaScript dat u ziet, bepaalt de schaal van het logo. Deze code wordt geactiveerd wanneer het venster schuift. Terwijl het venster naar beneden schuift, condenseert het logo van een hoogte van 80 px tot 35 px.

$ (window) .scroll (function (event) {
  var scroll = $ (venster) .scrollTop ();
  if (scroll> 50) {
    $ (‘# Masthead’). Css ({‘height’: ’50 ',‘ padding ’:‘ 8 ’});
    . $ ( ‘# NYT-logo’) css ({ ‘height’:’35' });
  } anders {
    $ (‘# Masthead’). Css ({‘height’: ’100 ',‘ padding ’:’ 10'});
    . $ ( ‘# NYT-logo’) css ({ ‘height’:’80' });
  }
});

Laatste gedachten

Het was opwindend om terug te keren naar een project en voort te bouwen op de functies ervan. Hoewel ik dit probleem misschien anders heb benaderd als ik helemaal opnieuw was begonnen, toont dit voorbeeld een manier om een ​​typische API-aanroep aan te nemen en dat werk aan te vullen.

Een reden waarom ik dit project vooral wilde delen, was dat ik me herinnerde hoe frustrerend het voor mij kon zijn toen ik voor het eerst met API's begon te werken. Ik zou overweldigd raken door de documentatie, niet zeker welke functies of syntaxis me in de goede richting brachten. Ik wenste vaak een duidelijk voorbeeld of doorloop van iets een aanraking buiten de Hello World.

API's bieden elk een specifieke service, en soms is het nodig om ze te combineren. Dit is slechts een manier om meerdere services samen te brengen, maar ik hoop dat het een beetje inspiratie is voor degenen die manieren verkennen om API's te combineren om rijkere inhoud te maken.