The Problem: finding all the information on books is annoying and time consuming.
The Solution: make technology do all the heavy lifting.
Some things we need to get
Book cover image
How to get them
Now that we have some vague ideas of what we need to get, let’s explore how we’re going to get them.
My first thought and the one I see implemented on other sites is Goodreads. Complete with it’s own API Goodreads is the choice for being in-sync. I’ve seen people implement progress updates, book reviews and ratings. But that’s all more than I’m looking to do with this. Also the Goodreads API is very slow.
Instead of fumbling around searching how to easily get an image for nearly any book cover like I did (cause hunting down an image for every update seriously sucks) I’ll lay out all the details here.
The solution: Google Books API.
Honestly I should’ve thought of that, thanks Google.
Google Books API is able to return the following information:
The kind of book
Google Books link
Industry identifiers (ISBN, ASIN)
Average rating (from Google Books)
Ratings count (from Google Books)
Image thumbnails Yes!
They’re really all yesses.
Getting the information
That all sounds cool but I’ve never dealt with an API before. What’s the least amount of information we can use to extract all the data from the API?
My thoughts: ISBN codes.
Jekyll supports YAML for it’s _data directory and the structure is relatively simple. To add a book the only thing I need to find is the ISBN code. Everything else auto populates from that.
Now we can pass this YAML formatted document as a JSON file and assign it to a variable on the /booklist/ page.
I had to do a lot of looking to figure out how to optimize performance and query every book in a single request. I couldn’t find this solution anywhere in the docs. Glad those errors are over with.
Just to show a little bit of what’s going on here without explaining it.
Now that we have the URLs to the data, all we have to do fetch it and plug it where we want it.
That super long ‘document.getElementByID’ provides the entire HTML structure of the books selection. It loops for every book returned from the Google Books API (so it adds that HTML for every book). For a cheat sheet on what the variables link to:
To add some error handling in case the ISBN provided does not show up within the Google API I managed to throw an error to the console to determine which ISBN would need to be fixed.
The loadedBooks array saves ISBNs that returned from the Google Books API. The Array.prototype.diff compares the loadedBooks against our isbnslist and logs any left out ISBNs to the console.