Liam Green-Hughes

using atlas with mit app inventor

There are lots of fun and useful mobile apps available that are related to television and radio. Apps exists to provide TV schedules, to enable you to play along at home to a game show and to show extra information about a programme currently being shown. If you have an idea for a TV/radio related Android mobile app and would like to prototype your idea, or maybe you would like to learn about programming and use some TV data in the process then using our Atlas metadata service together with MIT’s App Inventor could be a dream come true.

App Inventor is an educational tool that began life in Google Labs and is now being developed by MIT. Instead of writing code to create a program, users connect together “blocks” of functionality in a visual editor. The idea is that people can learn about the key concepts of programming such as variables and loops etc without getting bogged down in syntax too early.

It is also quite a fun prototyping tool allowing people to put together applications quite quickly. Of course there are some tasks it is not suited to, such as complex algorithms. Interestingly, a feature that has been added since MIT took over the project is the ability to work with JSON formatted data – the same format used as a default by Atlas.

a simple demo

To demonstrate Atlas in action with MIT App Inventor let’s make a very simple app with a search box that returns a title, description and an image for a matching programme. You will need to set up App Inventor on your computer first and it is probably a good idea to work with a few of the tutorials first to get used to the environment.

the user interface

First we should set up the components needed for the app. Create a new App Inventor project. From Screen Arrangement drag a HorizontalArrangment into the app window. From Basic drag in a TextBox and a Button into the HorizontalArrangement you created. Change the name of the TextBox to “TxtSearch”. It is also worth adding a label to your button. Drag two Label objects into your project and call them “LblTitle” and “LbDescription”. Then drag in a Image element into your project. Finally from Other stuff drag in a Web component. Your project should now look something like this:

App Inventor UI editor

making a call to atlas

It isn’t possible yet to have local variables in App Inventor so we need to create two global variables to work with. Open up the Blocks Editor and from Definition drag two def variable blocks into the work area. Name one variable “item” and the other “contents”. From Lists plug in call make a list elements into each of the variables. You should end up with two blocks like this:

def item block def contents block

Now let’s call Atlas! From My Blocks -> Button1 drag a Button1.Click element to the work area. From Web1 drag a set Web1.Url element inside the Button1.Click element and connect. Grab a Text -> call make text block and plug this into the Web1.Url block. We’re going to build the Atlas URL here. Create a text element with set the value as “http://atlas.metabroadcast.com/3.0/search.json?q=” and plug it into the “make text” block.

We need to encode the text from the search box before sending it to make it part of the URL. So from My Blocks -> Web1 grab a set Web1.Url block and plug this into the second right hand slot in the make text block. Now you can go to the TxtSearch section and plug in the TxtSearch.Text block into the Web1.UriEncode block. Finally add a text block to the third slot with “&limit=1” as the value to restrict the return to one value. You should end up with a block like this:

metabroadcast atlas: with mit app inventor

processing the results

Drag a Web1.GotText element to the work area. You will notice that App Inventor automatically attaches variable blocks to this object for the return properties such as the status code, contents and type. We only want our code to run when the call is successful. So plug in an ifelse block and the test should be “value responseCode = 200” (have a look in Built-In -> Logic for the block needed).

We can now start parsing the JSON formatted results from Atlas. The first element returned here is called “contents” and is an array (or “list” in App Inventor terms). We need to extract the “contents” part of the document and read it into our “contents” variable. Drag a set global contents block into the if else block, then drag in a lookup in pairs block (from Lists plug this into the “to” socket of set contents global. The “key” should be a text block with the value “contents”. Into “pairs” plug in a call Web1.JsonTextDecode block and into that plug in a value responseContent block. Into “not found” plug in an empty call make a list block.. What we are doing here is reading in the Atlas response into a variable in a way that App Inventor understands. This makes it easier for us to extract the information we need.

Beneath the set global contents to block plug in another if else block and plug these three blocks into each other to make a test: not, call is list empty?, global contents. In the then do section we need to set global item to -> call select list item with a “list” value of global contents and an “index” of “1”. This is selecting the item in the “contents” array.

Now we have got the first item we can start setting the values in our app’s user interface. Drag a set LblTitle.Text beneath the if else block we just created. Drag a call lookup in pairs block into this with a “key” of “title”, “pairs” of global item and a “notFound” of a text block “Not found”. This is how we can do a key/value lookup in App Inventor. Do something similar for the description and image elements using the Atlas fields “description” and “image” respectively. You should now end up with a block that looks like this:

block to handle the response from atlas

The app in actionYou should now be able to run the app and try a programme title in the search box. It isn’t a perfect app by any definition, and could do with some more error handling, to begin with, but hopefully it shows you how you can work with Atlas directly in App Inventor and experiment with ideas for apps.

If you create something in this way let us know! I’m always tinkering with both Atlas and apps, and love exchanging notes and impressions.

In fact, if you locate the next MetaBeers, which I couldn’t recommend more, happening in a not-so-secret Central London pub every mid-month, you have most likely located me 🙂

Come say hello. We’re buying beers and chips, so everyone can stay focused on what matters: food for thought.

blog comments powered by Disqus