dna.js REST-driven Search Component
Video Tutorial – Transcript
1) Welcome to the dna.js REST-driven Search Component tutorial. Over the next few minutes, we will use jQuery and dna.js to build from scratch a book search tool on top of the Google Books API.
2) Using your favorite code editor, create an HTML file named book-finder.html. We'll begin with some very basic boilerplate HTML to give us a valid web page as a starting point. Just after the "h1" header line, insert some plain old HTML for a search input box and a "Find" button.
3) Then add the HTML to display the search results. The "div" with the "books" class is for a list of books, and we'll include one book stub inside the list so we can mockup and style the web page. On the left side will be the thumbnail image for the book cover. Use the sample book cover image from the dnajs.org website. On the right side, will be meta information about the book showing title, publisher, and price.
4) Let's verify that the web page displays in a browser. It does display, but it's quite ugly. So, let's add just enough CSS to make the style reasonable. For production code, you'll want to use a CSS preprocessor, such as LESS, which has nice, clean notation for variables and mixins. For this tutorial, however, the "style" tag will get the job done. This CSS will display each book as a blue box with an 80 pixel wide thumbnail and the book metadata as an inline-block.
5) The book-finder.html page looks better now, but it's still completely static. Next we'll turn the static book HTML into a template that can take JSON data. Before we convert the HTML into a data-driven template, we need to know the structure of the data. Do this in your browser by entering the URL of a sample REST call and manually examining the JSON response.
6) The Google APIs are at "https://www.googleapis.com". Tack on "books" to specify the Books API and "v1" for version 1 of the API. We want the "volumes" data, and our sample search query is made with the parameter "q=ice".
8) Convert the book HTML into a template by changing the class "book" to an ID (so the template has a name) and adding the class "dna-template". Now designate where data is to be injected into the template. Wrap field names in double tildes (~~) and use dot notation to reference nested data in the JSON. For example, the hard-coded value of the image's "src" attribute is replaced with "~~volumeInfo.imageLinks.thumbnail~~". The title becomes "volumeInfo.title", and the publisher becomes "volumeInfo.publisher". Lastly, inject price with "saleInfo.listPrice.amount".
11) Remember that URL we used for the sample REST call? Use that same URL but with the search terms appended dynamically. Then to make the actual REST call, use jQuery's handy getJSON function. The first parameter is the URL of the REST call, and the second parameter is the callback function to handle the results.
12) Of course, now we need to define the handleResults function. jQuery passes the response JSON into the callback function, and we are going to use that data to tell dna.js to clone the "book" template -- one clone for each book. The first parameter for the dna.clone function is the name of the template and...
Remainder of transcript at: