- One partner will fork and clone this lab, and duplicate/rename the starter code, check out a new branch, etc., as you did during the first two weeks of the course. If you need a refresher on the process or more detailed instructions, refer to the instructions that are in Lab 01.
- There is no requirement that you swap partners today, so feel free to do all of the work on a single machine. Let's keep it simple and put the focus on the learning.
- There are 18 comment items in the starter code, which is a finished version of the book app. The primary goal is to trace exectuion of the code and understand how it all fits together.
- You do not need to get the code up and running today to complete this lab, but you can seek to do so after completing the comment items. It is more important to finish the commenting, so do that first.
- The User Stories and Feature Tasks have been left intact in this document as if they had not been completed; this is so you can see the connection between how these things were described and how they were implemented. You do not need to follow all of those steps to complete the comments in this lab, but you will need some of the details in those tasks to get the code up and running if you choose to do that after finishing the comments.
- Where you identify differences between the starter code and how you and your partner built things next week, dig into those spots and learn from them.
- When you have completed the comments, make a pull request back to your fork, merge to master, then make a PR from your fork back to the lab repo as you did during the first two weeks with the pull request template.
- Google Books API Library
- REST Wiki
- A Beginner's Guide to HTTP and REST
- API Wiki
- Superagent
- Book Store Wireframe
ENV VARS
- Paste the following code snippet into your terminal window:- Reminder: these will be temporary while the current shell session (window) is open
export PORT=3000
export CLIENT_URL=http://localhost:8080
export TOKEN=1234 # Please make your own PIN
export GOOGLE_API_KEY=your google books api key
Mac: export DATABASE_URL=postgres://localhost:5432/books_app
Windows: export DATABASE_URL=postgres://USER:PASSWORD@localhost:5432/books_app
book_app_week_3/
├── book-list-client
│ ├── data
│ │ └── books.json
| ├── .eslintrc.json
| ├── .gitignore
│ ├── index.html
| ├── README.md
│ ├── scripts
│ │ ├── models
│ │ │ └── book.js
│ │ └── views
│ │ ├── admin-view.js
│ │ ├── book-view.js
│ │ ├── error-view.js
│ │ └── routes.js
│ └── styles
│ ├── base.css
│ ├── fonts
│ │ ├── icomoon.eot
│ │ ├── icomoon.svg
│ │ ├── icomoon.ttf
│ │ └── icomoon.woff
│ ├── icons.css
│ ├── layout.css
│ ├── modules
│ │ ├── admin-main.css
│ │ ├── book-main.css
│ │ ├── detail-main.css
│ │ ├── error.css
│ │ ├── footer.css
│ │ ├── form-main.css
│ │ └── header.css
│ └── reset.css
└── book-list-server
├── .eslintrc.json
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── server.js
Today's refactor will implement the use of a 3rd party API, Google Books, which will give users the ability to search by author, title, or ISBN. If the user finds the book they want they will be able to add that book to their persistence layer (database).
1. As a user, I want to access an external API so that I can incorporate additional information into my app, enhancing its functionality.
- Login to Google's API Developer Console using your Google username and password.
- From the Credentials screen, create a new set of credentials for a web application, specifically giving yourself access to the Google Books API.
- This will provide you with an API Key which you can use for making API calls through your server. You will need to set this as an environment variable in your system and in your deployment application on Heroku (described below).
2. As a user, I want to use the Google Books API so that I can search for books and add new books to my list.
- Install and require the
superagent
package from NPM; validate that it's listed as a dependency in yourpackage.json
. - Create a global variable reference to the
GOOGLE_API_KEY
that you set as an env variable for use in your new endpoints. - Add an endpoint for a
GET
request to/api/v1/books/find
which will proxy asuperagent
request from the client to the Google Books API and return a list of ten books that match the search query.- Map over the array of results to build an array of objects that match the
book
model in your database. - Send the newly constructed array of objects to your client in the response.
- Map over the array of results to build an array of objects that match the
- Add an endpoint for a
GET
request to/api/v1/books/find/:isbn
which will proxy asuperagent
request from the client to the Google Books API and return a single book by the ISBN.- Map over the array's single object and return a new object that matches the
book
model in your database. - Send the newly constructed book to your client in the response.
- Map over the array's single object and return a new object that matches the
3. As a user, I want a form and designated space for output so that I can search for books and see the results in a single view.
- Add a new View to
index.html
with a class ofsearch-view
which contains a form for searching the Google Books API by author, title, or ISBN.- The form should contain three individual inputs.
- Include a button to click when your want to trigger your search.
- Add a new View to
index.html
with a class ofsearch-results
, which contains a section and unordered list tag.- Your
<ul></ul>
should include anid
attribute for targeting and insertion of dynamic content.
- Your
4. As a user, I want my app to respond when I submit the form so that I can search the Google Books API and receive my results in my app.
- Add a new view method to
book-view.js
calledbookView.initSearchFormPage
which will show the search form view and attach an event listener to the form. - Add a new client-side route to your
routes.js
file which will listen for/books/search
, and invokebookView.initSearchFormPage
.- The event listener will trigger on
submit
, capturing the form data as an object literal. It will pass the object toBook.find
as thebook
argument andbookView.initSearchResultsPage
as thecallback
argument. Book.find
will populate theBook.all
array with the book objects returned from Google Books API for rendering later.
- The event listener will trigger on
- Add a new view method to
book-view.js
calledbookView.initSearchResultsPage
which will show the search results view and attach an event listener to the.detail-button
.- This view method will also map over the
Book.all
array and append each of the books from your search using yourtoHtml
method created earlier in the week. - The event listener will trigger on
click
, capturing thedata-bookid
value (ISBN) from the great grandparent of the button; use jQuery to traverse the DOM and select the button's ancestor.
- This view method will also map over the
5. As a user, I want to select a single book from my search results so that I can add it to my list.
- Create a new static method on the Book constructor named
find
, which acceptsbook
andcallback
as arguments.- This method will make a
GET
request to/api/v1/books/find
, including thebook
argument. - On success, the results will be passed to
Book.loadall
, and then thecallback
should be invoked. - On failure, invoke your error callback.
- This method will make a
- Create a new static method on the Book constructor named
findOne
, which acceptsisbn
as an argument.- This method will make a
GET
request to/api/v1/books/find/:isbn
, including theisbn
argument. - On success, the results will be passed to
Book.create
. - On failure, invoke your error callback.
- This method will make a
Your README.md must include:
# Project Name
**Author**: Your Name Goes Here
**Version**: 1.1.0 (increment the patch/fix version number up if you make more commits past your first submission)
## Overview
<!-- Provide a high level overview of what this application is and why you are building it, beyond the fact that it's an assignment for a Code Fellows 301 class. (i.e. What's your problem domain?) -->
## Getting Started
<!-- What are the steps that a user must take in order to build this app on their own machine and get it running? -->
## Architecture
<!-- Provide a detailed description of the application design. What technologies (languages, libraries, etc) you're using, and any other relevant design information. -->
## Change Log
<!-- Use this are to document the iterative changes made to your application as each feature is successfully implemented. Use time stamps. Here's an examples:
01-01-2001 4:59pm - Application now has a fully-functional express server, with GET and POST routes for the book resource.
-->