One common use-case for ZAZA.rocks is to share product information with users. In this article we'll dive into an example using the Google Books API.

First we need to get the required data from the API. This can be done using the following endpoint:

https://www.googleapis.com/books/v1/volumes?q=isbn:<isbn_number>

A HTTP virtual file is the easiest way to get this information into a bag.

Our book.json  file now contains the entire response from the Books API. This is quite a bit of information and not very easy to use yet. Let's reduce the information returned using an epsilon function:

const url = 'https://www.googleapis.com/books/v1/volumes?q=isbn:'
const isbn = '1777119316'

epsilon = async (event) => {
  let response = await fetch(url+isbn)
  const data = await response.json()

  const info = data.items[0].volumeInfo
  const result = {
      'name': info.title,
      'subtitle': info.subtitle,
      'description': info.description,
      'thumbnail': info.imageLinks.thumbnail
  }

  return new Response(JSON.stringify(result))
}

Once we create a virtual file using this epsilon function, the contents of the file will be:

{
    "name": "Product-Led Growth",
    "subtitle": "How to Build a Product That Sells Itself",
    "description": "Product-Led Growth is about ...",
    "thumbnail": "http://books.google.com/books/content?id=..."
}

That's already a lot easier to use! In fact, we use it in part two of our Book information example to build a dynamic website-in-a-bag. Check it out!

While we're working with Epsilon functions, let's see what else they can do. For example, you can create any type of virtual file, not just a json file. Let's create a virtual book.html page by replacing the last line of our virtual file with the following logic:

let body = `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>${result.name}</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
 <card>
   <img src="${result.thumbnail}"/>
   <cardcaption>
              <h4>${result.name}</h4>
              <h5>${result.subtitle}</h5>
              <div class="quote">
                <p>${result.description}</p>
              </div>
          </cardcaption>
 </card>
</body></html>`

  return new Response(body)

This gives us a nicely drawn version of our data:

The contents of styles.css is left as an exercise for the reader.

Did this answer your question?