Web Component - JSON Response - App Inventor Blocks

Web Component - JSON Response

Google introduced a new component called Web which gives you the functionality to send and fetch data from a server or a website through GET and POST requests. This component can decode both JSON and HTML formatted data. We will be writing an app called iRead that will ask a user to type in a full or partial book name and query Google's database of books using Books API and retrieve the most relevant book info. We will parse the Title and Author of the book, we will get the image URL of the book cover, and finally the book URL which can be launched through a browser. This is how our app would look like-

Before we start, I advise you to read on anything that is unfamiliar to you but mentioned in the paragraph above like Books API, JSON, HTML, GET, POST, etc.

First thing first, build your interface in the Designer/Viewer window. It should look like this-

If you are having hard time designing, download the source file (iRead.zip) from Downloads page and take a look.

Have you tried executing a Book API query request yet? Click on the link below to see the API response.

https://www.googleapis.com/books/v1/volumes?q=Harry&maxResults=1&projection=lite

This gives you a response that contains-

Our concern is not the actual book info (Over time you might not get the same book info using the same query), our concerns are the tokens that we'll need to identify and parse specific data. Take a look at the tokens like "title": that ends with a comma and a new line, "authors": that ends with ], etc.

Now let's start defining actions and interactions in the blocks editor.

We have three global variables defined-

googleBookSearchURL - That's where we store the API URL address for book search.
tempData - We will use that for saving temporary data.
bookURL - That's where we will parse and store the URL ("infoLink" token) of the book info returned by the API.

When a user enters a book name and hits Search button, we call GetBookInfo procedure where we simply construct our URL with user inputted text and encode it for using it as a URL, and finally feed it to Web component's Url property. We want to get only one book info (API may return many); so we used maxResults=1. If we didn't use projection=lite, we would get a lot of other info that we are not going to use in this tutorial app. At the end we call Web.get to execute our query.

Let's parse the JSON response from the API.

We only can proceed if responseCode is 200 which means our query didn't fail along the way. We have another procedure called ParseBookResult that actually parses the response. Let's take a look at it-

In the ParseBookResult procedure, we split the response content using the start tag and end tag. For an example, to parse title of the book, we need to know what title data begins and ends with. If you have noticed in the query, it returns-

"title": "Harry Potter and the chamber of secrets",

    "authors": [
     "J. K. Rowling"
    ],

  So we know, it begins with "title": and ends with a comma followed by a new line that is what we used to split and get the value, in this case, the value is "Harry potter and the chamber of secrets". Then we decode the JSON value by calling Web's JsonTextDecode. And finally decode the HTML characters by calling HtmlTextDecode. Note that we only call HtmlTextDecode if a certain value may contain HTML characters. An image link is a URL and should not be parsed. That is why, for that, we don't call HtmlTextDecode.

When a user taps on the Read button, we simply launch the browser with the book URL.

    You can download the source file of this app (iRead.zip) from Downloads page.

    If you want to parse multiple occurrences of a token/tag, say you want to get three books info by setting the maxResults=3, in that case you can use a foreach loop to do so. You can download the iRead2.zip from Downloads page to see how to parse multiple occurrences from a JSON response.

Comments