Screenshot 2014-03-07 20.38.32

Tutorial: Integrate your Corona SDK app with any API – Part 3

In the previous two posts, we discussed what an API is, how a Corona app can integrate with it, and how to structure your code as a module that will be available from elsewhere in your app. The entire codebase of this super heroine trading card app integrated with comic vine can be found here:

We have created a nice trading card UI and are getting data from comicvine to populate it as an endless trading card shuffle. Our API call to /characters allows us to grab a big dataset of 100 characters. We specified in our API call in mod.lua that we want our data to come back in JSON format, and now we will use that data to populate a table that will give us a heroine name, her photo, and a little blurb about her powers.

Screenshot 2014-03-07 20.38.32

In the onComplete function, you will start sifting through the data that comes back from the API and shape it into something useful. This is an area that can have pitfalls, depending on how good your API is. I found that with comicvine, there tends to be a lot of null fields, so you need to keep checking for nil while importing. onComplete looks like this:

local function onComplete( event )
 
local jsonTable = json.decode(event.response)
 
 for i=1,#jsonTable.results do
 
    if jsonTable.results[i] ~= nil and   jsonTable.results[i].name ~= nil and jsonTable.results[i].image ~= nil and jsonTable.results[i].deck ~= nil then
 
heroines[i] = {["name"]=jsonTable.results[i].name,["image"]=jsonTable.results[i].image.thumb_url,["desc"]=jsonTable.results[i].deck};
 
   end
 
 end
 
print(inspect(heroines))
 
end

Basically, we get all our data as a big clump, and use the json.decode call to sort the json data into a lua table. Then, we can go to town and build up a heroines table that we will reference in the cards. We essentially build up a dictionary with each table row looking like this, as inspected using inspect.lua:

{
desc = “A plant-loving and controlling fatal attraction who can seemingly bend anyone to her will simply by planting a kiss upon them, making them obey her every command, Poison Ivy is one of Batman’s greatest enemies and the deadly mother of nature.”,
image = “http://static.comicvine.com/uploads/scale_avatar/6/66303/2286906-bop_cv11.jpeg”,
name = “Poison Ivy”
}

Be careful to test for nil values as you populate tables. Then you will have clean data to use in your app!

The second API call I make, to just get one character by id:

mod:character(“2048”,onFound)

follows this same pattern, but simply loads a remote image for Wonder Woman for the homepage of my app. I had to use a separate API call for this homepage as Wonder Woman’s data sometimes didn’t come through via the original API call, but if you can avoid a lot of API calls, try to reduce them to reduce online loading of data. I also recommend using a spinner to show when data is being uploaded to avoid user frustration.

So these tutorials have given you a very basic module with which you can work. Go ahead, pick a different api, and try to massage the data that you get back! I recommend ColourLovers.com as a good one to start.

Like my tutorials? You’ll love my apps. Please download, rate and review!

Leave a Reply