Δημιουργήστε μια λίστα με τους καλύτερους πωλητές με το περιοδικό New York Times και το Google Books API

Ένα ενιαίο API μπορεί να μην έχει πάντα όλα τα δεδομένα που χρειάζεστε. Σε αυτό το άρθρο, θα ακολουθήσουμε τα βήματα για να συνδυάσουμε δύο APIs χρησιμοποιώντας μοναδικά αναγνωριστικά από το API της New York Times για να αρπάξουμε καλύμματα βιβλίων από το API Βιβλίων Google.

Μπορείτε να βρείτε το πλήρες έργο στο GitHub και να δείτε ένα demo στο CodePen.

Ακολουθούν τα βήματα που θα καλύψουμε:

  1. Λάβετε τα καλύτερα διαθέσιμα βιβλία από το New York Times API.
  2. Προσθέστε καταχωρίσεις στο DOM.
  3. Ζητήστε το API των Βιβλίων Google με αριθμούς ISBN για να προσθέσετε εικόνες κάλυψης στις καταχωρίσεις.

Στο τέλος του σεμιναρίου, θα έχετε μια λίστα με τους καλύτερους πωλητές! Εδώ είναι μια ματιά:

Περιμένετε, αλλά γιατί;

Αρχικά άρχισα να εργάζομαι σε αυτό το έργο λίγο περισσότερο από ένα χρόνο πριν. Έμαθα για τα API και ζητώντας κλειδιά για την πρακτική της πρόσβασης και της προβολής δεδομένων.

Ενώ εξερευνούσα το API της New York Times, διαπίστωσα ότι ήταν δυνατό να βρούμε έναν κατάλογο βιβλίων με τις καλύτερες πωλήσεις. Για κάθε βιβλίο της λίστας, το API παρέχει μια τρέχουσα κατάταξη και αριθμό εβδομάδων στη λίστα. Προσφέρει επίσης πληροφορίες όπως μια σύνοψη και μια σύνδεση Amazon.

Ήμουν σε θέση να πληρώσω κειμένου πληροφορίες, αλλά η λίστα δεν είχε το φυσικό οπτικό συστατικό των καλύμματα βιβλίων. Εκείνη την εποχή, δεν έβλεπα έναν σαφή δρόμο προς τα εμπρός, έτσι έβαλα το έργο στο ράφι.

Αυτή είναι μια περίπτωση όπου η πρόσβαση σε ένα API είναι χρήσιμη, αλλά ελλιπής.

Αυτή την εβδομάδα, επέστρεψα με στόχο την προσθήκη βιβλίων. Διαπιστώσαμε ότι το API Βιβλίων Google θα επιστρέφει μικρογραφίες για βιβλία όταν παρέχεται ISBN, ένας μοναδικός αριθμός ταυτοποίησης. Όπως η τύχη θα είχε, το New York Times API προβλέπει ότι το ISBN.

Είμαστε στην επιχείρηση!

Ξεκινώντας

Πρώτον, θέλουμε να δημιουργήσουμε μια λίστα με τα κορυφαία βιβλία φαντασίας με λίγες πληροφορίες για το καθένα. Θα ήταν ωραίο να εμφανίζονται πληροφορίες σχετικά με το πόσο καιρό το βιβλίο ήταν στη λίστα. Πρέπει επίσης να δούμε το εξώφυλλο και να δώσουμε μια σύνδεση για τους χρήστες να μάθουν περισσότερα για το βιβλίο ή να αγοράσουν ένα αντίγραφο.

Το API της New York Times παρέχει όλες αυτές τις πληροφορίες εκτός από το εξώφυλλο του βιβλίου. Πιάσε ένα ελεύθερο κλειδί API NYT για να ξεκινήσεις.

Θα χρησιμοποιήσουμε το API Fetch για να λάβουμε τα δεδομένα των καλύτερων πωλητών για έργα μυθιστοριογραφίας:

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 weekOnList = book.weeks_on_list || «Νέα αυτή την εβδομάδα».
  // ...
});

Καθώς βγάζουμε κάθε βιβλίο, οι μεταβλητές ορίζονται στα δεδομένα για τη συγκεκριμένη καταχώρησή τους, τα οποία θα χρησιμοποιήσουμε κατά την πραγματοποίηση της καταχώρησης.

Στην παραπάνω λίστα κωδικών,

  • ο αριθμός ISBN βρίσκεται στο πεδίο isbns του βιβλίου
  • επιλέγουμε τη δεκαψήφια έκδοση του αριθμού ISBN στο book_details [0]
  • η κατάταξη της τελευταίας εβδομάδας είναι στο rank_last_week και η προεπιλογή είναι "n / a"
  • ο αριθμός των εβδομάδων που ήταν στον κατάλογο των καλύτερων πωλητών, είναι στις εβδομάδες σε λίστα και προεπιλογή για "Νέα αυτή την εβδομάδα" για τα βιβλία που εμφανίζονται στη λίστα για πρώτη φορά

Στη συνέχεια, μπορούμε να δημιουργήσουμε ένα αντικείμενο HTML που να προσαρτάται στη λίστα με τους τίτλους των καλύτερων πωλητών. Βεβαιωθείτε ότι το έργο σας περιλαμβάνει jQuery. Στο CodePen, μπορείτε να μεταβείτε στις ρυθμίσεις και να τις προσθέσετε στον πίνακα JavaScript.

καταχώρηση var =
  '
'     '

' +       ' '     ''     '

' + bookInfo.title + ' ' +     '

Με το' + bookInfo.author + '' +     '

' + bookInfo.publisher + ''     '

' + bookInfo.description + '' +     '

' +       '
' +       '

Τελευταία Εβδομάδα:' + lastWeekRank + ''       '

Εβδομάδες στη λίστα:' + weeksOnList + '' +     ''   '';

$ ('# best-seller-τίτλοι'). Προσθήκη (καταχώριση).

Παρατηρήστε ότι η εικόνα είναι κενή. Στο 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.

Χρησιμοποιώντας τον δεκαψήφιο αριθμό 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 = $ (παράθυρο) .scrollTop ();
  αν (κύλιση> 50) {
    $ ('# Masthead'). Css ({'ύψος': '50', 'padding': '8'});
    $ ('# Nyt-logo'). Css ({'ύψος': '35'));
  } else {
    $ ('# Masthead'). Css ({'ύψος': '100', 'padding': '10'});
    $ ('# Nyt-logo'). Css ({'ύψος': '80'));
  }}
});

Τελικές σκέψεις

Ήταν συναρπαστικό να επιστρέψουμε σε ένα έργο και να αξιοποιήσουμε τα χαρακτηριστικά του. Παρόλο που ενδέχεται να είχα αντιμετωπίσει αυτό το πρόβλημα διαφορετικά αν ξεκινούσα από το μηδέν, αυτό το παράδειγμα δείχνει έναν τρόπο να λάβετε μια τυπική κλήση API και να προσθέσετε αυτή την εργασία.

Στην πραγματικότητα, ένας λόγος που ήθελα ιδιαίτερα να μοιραστώ αυτό το έργο ήταν να θυμάμαι πόσο απογοητευτικό θα μπορούσε να πάρει για μένα όταν άρχισα να δουλεύω με API. Θα ήμουν συγκλονισμένος με την τεκμηρίωση, δεν είμαι σίγουρος ποια χαρακτηριστικά ή σύνταξη με οδηγούσαν προς τη σωστή κατεύθυνση. Συχνά ήθελα να βρω ένα σαφές παράδειγμα ή να περπατήσω κάπως κάτι άγγιγμα πέρα ​​από τον Hello World.

Τα API παρέχουν μια συγκεκριμένη υπηρεσία και μερικές φορές είναι απαραίτητο να τα συνδυάσετε. Αυτός είναι ένας μόνο τρόπος συγκέντρωσης πολλαπλών υπηρεσιών, αλλά ελπίζω ότι είναι μια μικρή έμπνευση για όσους αναζητούν τρόπους για να συνδυάσουν τα API για να δημιουργήσουν πλουσιότερο περιεχόμενο.