dna-engine Tutorial to Build a REST-driven Search Component
Channel: Dem Pilafian
Date: 02/12/2023

dna-engine Tutorial to Build a REST-driven Search Component
An uncomplicated user interface library for cloning semantic templates

1) Welcome to the dna-engine tutorial to build a REST-driven search component.  We will use dna-engine to power a simple book search tool that calls the Google Books API.

2) Let's begin with some very basic boilerplate HTML to give us a valid web page as a starting point.  Now just after the "h1" header line, insert some plain old HTML for a search input box and a "Find" button.

3) Then add the static HTML to mock up the search results.  The "section" tag 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.  Each book in the search results will contain a thumbnail image for the book cover.  For the purpose of styling the mockup we'll temporarily use a sample book cover image from the dna-engine.org website.  Displayed adjacent to the thumbnail will be meta information showing the book 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 simplicity we'll use the "style" tag to embed the CSS directly into the web page.  This CSS will display each book in a blue box with a thumbnail for the book cover on the left side and book metadata on the right side.

5) Back to the browser.  Refresh.  The web page looks better now, but it's still completely static.  Next we'll turn the static HTML for a book 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.  We will do this in the browser by entering the URL of a sample REST call and manually examining the JSON response.

6) The Google APIs are at "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=spacex".

7) Instead of getting back HTML to render a web page, the REST API responds with JSON data.  In this case, the search results are returned as an array of books in the "items" field.  We are only interested in four specific pieces of data for each book.  Three of those fields are in the book's "volumeInfo" object.  There's the "title" and the "publisher", and a little further down inside the "imageLinks" object is the "thumbnail" URL.  Over in the "salesInfo" object, we find the "listPrice" object, which contains the "amount" field.  Now we have the information necessary to turn our static HTML for one book into a data-driven template to generate a list of books.

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~~".

9) So now our book template is done and next we'll load the dna-engine library.  A CDN (Content Delivery Network) makes it easy to load the CSS and JavaScript files.  First, load the CSS file for dna-engine.  Within the "head" section, insert a "link" tag to the stylesheet.  Then insert a "script" tag to load the dna-engine JavaScript.  Additionally, we'll load the fetchJson library.  fetchJson is a lightweight library that makes it trivial to call a REST endpoint when the data returned is JSON.

10) Now for the fun part: writing the JavaScript to make the REST call and display the search results.  Add a "script" tag and define a variable to store the base URL for the Google Books API.  Then create a function named "findBooks()".  The first line of code reads the user's search terms by getting the value of the "input" element.

11) Now that we have the URL and the search terms, we're ready to use fetchJson to make an HTTP GET request.  Call the "fetchJson.get()" function, and set the first parameter to the URL.  The second parameter is for the query string object.  In our case, we have one query parameter named "q" and its value will be the search terms entered by the user.  We tell fetchJson to send the data to the function named "handleResults()" once the REST call promise is fulfilled.

[Transcript abbreviated for length]

dna-engine.org/tutorial
License under Creative Commons CC-BY 4.0
This video is not monetized.