Show off your book collection with this AngularJS script & Google Spreadsheet
I'm a book lover and I have a size-able collection of books, many of which I've left incomplete or unread. To save on storage space, I've been buying ebooks & Kindle books.
While learning AngularJS, I thought I should build a webpage to track the books I have as they are in scattered & in different formats. Having discovered that data stored in a table in Google Spreadsheet can be exposed as a JSON feed, I'll being using that as my back-end. I'll keep adding or deleting books and it will reflect on the web page instantaneously.
The table to store my books has just 2 columns - the book name (cell A1: bookname) & Amazon's unique identifier for the book, ASIN (cell B1: asin). I use the ASIN to generate an image for the book as well as append my affiliate id to that book's page on Amazon.
Here's how the finished page looks now (with a small set of my books). Evidently, there is some work left to do with the CSS.
The entire page is less than 70 lines of un-minified readable code including CSS & JavaScript. The reference to the minified AngularJS file from the Google CDN is about 38KB.
You can re-use the script (which I adapted from this StackOverflow answer) by building your own Google Spreadsheet with your own values for the bookname & asin fields. After you save the sheet, note the key for your file from the URL and replace the key within the code along with your own Amazon affiliate id (lines 14, 59, 61 in the code shared through the Github Gist)
While learning AngularJS, I thought I should build a webpage to track the books I have as they are in scattered & in different formats. Having discovered that data stored in a table in Google Spreadsheet can be exposed as a JSON feed, I'll being using that as my back-end. I'll keep adding or deleting books and it will reflect on the web page instantaneously.
The table to store my books has just 2 columns - the book name (cell A1: bookname) & Amazon's unique identifier for the book, ASIN (cell B1: asin). I use the ASIN to generate an image for the book as well as append my affiliate id to that book's page on Amazon.
Here's how the finished page looks now (with a small set of my books). Evidently, there is some work left to do with the CSS.
The entire page is less than 70 lines of un-minified readable code including CSS & JavaScript. The reference to the minified AngularJS file from the Google CDN is about 38KB.
You can re-use the script (which I adapted from this StackOverflow answer) by building your own Google Spreadsheet with your own values for the bookname & asin fields. After you save the sheet, note the key for your file from the URL and replace the key within the code along with your own Amazon affiliate id (lines 14, 59, 61 in the code shared through the Github Gist)
Comments
Post a Comment