BillDay.com

This is the fourth and final article in my series on using Google’s App Inventor for Android and eBay web APIs to build Android commerce apps.

The first article walked you through how to install App Inventor and start using it to build and share Android apps. It also discussed some of the limitations of App Inventor versus the full Android SDK including the latter’s ability to deploy apps into the Android Market. The second article discussed the available App Inventor components including how to visually select and connect them to build Android apps capable of accessing arbitrary web APIs. And the third article introduced the various eBay APIs and developer tools. If you followed along with it, you are now setup with the requisite eBay application keys that you’ll use in the commerce app examples in this article.

Now that the stage is set, let’s build on all the previous information. We will use App Inventor and eBay’s API Test Tool to develop and deploy an example Android app that uses the eBay Shopping API.

A couple of calls in the Shopping API

If you didn’t previously dig into the Shopping API while reading the third article in this series, now would be a good time to do so. Click here to access the Shopping API “Call Reference“. From that page you can drill down into each of the particular Shopping API calls available to you.

We could pick any of these API calls to use, but for the sake of simplicity here, I’d like to focus on these in particular:

• GeteBayTime – returns official eBay system time (in GMT) when the request is processed; a good first call to make as it requires minimal input parameters and returns an easy to parse and understand response.
• GetUserProfile – retrieves public user information; you submit a user ID of interest and eBay responds with information about the user’s feedback, About and Seller item URLs, and more.

Time to talk to eBay!

Now let’s build an app that talks to the eBay servers. Since it is our first, let’s keep it absolutely as simple as possible: We’ll call GeteBayTime and display the returned official system time.

To start, launch the eBay API Test Tool. Note that you need to be logged in using the eBay developer account you created in the previous article.

Within the API Test Tool, select “Shopping API” and then the API call “GeteBayTime”. Now you should be able to click the blue “Submit” button on the right side of the tool. If all goes well, you can should get back a successful call response. Expanding the sections of the call request, you should see something like this:

The API Test Tool has provided us with some valuable time saving information: It’s spelled out exactly what we need to pass into the eBay Shopping API service to request an eBay time response.

For simplicity’s sake, we might prefer to put all of the particulars of our request into URL encoded parameters. You can find the URL format in the GeteBayTime Samples portion of the call reference page. For the example above, noting that we are running the Sandbox rather than Production environment and that you need to change the appid parameter to your own Sandbox appid, this call would be:

http://open.api.sandbox.ebay.com/shopping?callname=GeteBayTime&responseencoding=XML&siteid=0&version=733&appid=YourAppId

This URL gives you a response like the one pictured in the API Test Tool screenshot above. If you’d prefer a JSON response, you can modify the responseencoding parameter’s value to be JSON:

http://open.api.sandbox.ebay.com/shopping?callname=GeteBayTime&responseencoding=JSON&siteid=0&version=733&appid=YourAppId

Requesting a JSON response results in something akin to:

{
  "Timestamp" : "2011-08-17T06:48:53.437Z",
  "Ack" : "Success",
  "Build" : "E733_CORE_BUNDLED_13633517_R1",
  "Version" : "733"
}

Hopefully this is all looking strangely familiar to you. It should be, because we’re using eBay’s web APIs in a very similar manner to how we used Yahoo PlaceFinder to request a geocoded JSON response back in the second article in this series. Click here to revisit that article if you need a refresher.

Since we’re sending the same sort of HTTP GET web API request and getting back the same sort of JSON response, we can in fact reuse a great deal of our example app from the second article, too. Let’s select and configure similar components to create our new GeteBayTime app. Here’s what it looks like in the App Inventor Designer once we’ve got all the components in place:

We can also use a similar process to the second article’s to wire up the various components, events, and actions. Here’s what the input portion of our logic looks like in the App Inventor Blocks Editor:

The input processing does the following (note that you read the visual representation above from right to left):

1. Append the value of the appid variable to the rest of the GeteBayTime API call URL
2. Sets TimeQueryWeb1‘s URL to the value generated in step 1
3. Calls TimeQueryWeb1.Get, a HTTP GET call using the URL above

Note that I did choose to define an appid variable this time around rather than hard wiring that in. After you download the example from GitHub (click here to download the project ZIP) and then upload it to you App Inventor workspace, you would need to change yourappid to your own value in order to execute the example app.

Wiring up a simplified version of the second article’s response processing logic, I get the following:

Here’s what the response processing does:

1. Take the eBay server JSON response stored in responseContent and split the response into two portions; first portion ends in "Timestamp": (which means the next portion begins with the JSON encoded timestamp value of interest)
2. Select the second portion to keep (JSON encoded timestamp value is now at the head of the portion kept)
3. Split the portion kept at the first comma (first portion now contains only the JSON encoded timestamp value)
4. Keep the first portion (JSON encoded timestamp value)
5. Decode the remaining text (removes JSON encoding, leaving us with just the timestamp value)
6. Display the timestamp value in the TimeValueLabel2 via it’s TimeValueLabel2.Text field

Launching the app in the Android emulator should then give the following after startup:

Clicking the “Click to get official eBay time” button in turn should fetch a timestamp and display it. Here’s what I saw when I ran this to take a screenshot:

You could certainly perform some clean-up on the timestamp if you like. But the important point here is that it is straightforward to access eBay APIs using the same App Inventor components we use to access other web services. And parsing and using the provided information couldn’t be much simpler!

You can access this series’ examples on GitHub (click here). Alternatively, jump straight to downloading the GeteBayTime project ZIP and/or APK executable if you like.

Getting more complicated responses from eBay

Suppose instead of just official eBay time, we wanted to request something with a more complicated response.

For instance, we could call GetUserProfile for the test Sandbox user TESTUSER_magicalbookseller. Again requesting a JSON response:

http://open.api.sandbox.ebay.com/shopping?callname=GetUserProfile&responseencoding=JSON&siteid=0&version=731&appid=YourAppId&UserID=TESTUSER_magicalbookseller

This would return something similar to:

{ "Ack" : "Success",
  "Build" : "E733_CORE_BUNDLED_13633517_R1",
  "Timestamp" : "2011-08-17T08:33:50.269Z",
  "User" : { "AboutMeURL" : "http://members.sandbox.ebay.com/ws/eBayISAPI.dll?ViewUserPage&userid=testuser_magicalbookseller",
      "FeedbackDetailsURL" : "http://feedback.sandbox.ebay.com/ws/eBayISAPI.dll?ViewFeedback&userid=testuser_magicalbookseller&ssPageName=STRK:ME:UFS",
      "FeedbackPrivate" : false,
      "FeedbackRatingStar" : "Blue",
      "FeedbackScore" : 59,
      "NewUser" : false,
      "PositiveFeedbackPercent" : 100.0,
      "RegistrationDate" : "2010-01-01T00:00:00.000Z",
      "RegistrationSite" : "US",
      "SellerBusinessType" : "Undefined",
      "SellerItemsURL" : "http://search.sandbox.ebay.com/?sass=testuser_magicalbookseller&ht=-1",
      "Status" : "Confirmed",
      "UserID" : "testuser_magicalbookseller"
    },
  "Version" : "733"
}

We would perform the same sort of parsing operations as before, just more times. Once parsed, we could use the user’s feedback, seller, and other information however we liked (within eBay’s developer-partner policies, of course).

The same approach applies to any other part of the eBay commerce APIs. Why not explore the eBay developer documentation to see what’s possible, then give it a try yourself?

Recent developments

As I was finishing this final article in my App Inventor X.commerce series, Google announced they would be discontinuing support for App Inventor.

That’s the bad news. The good news is, they are transitioning App Inventor to open source. And even better, MIT is picking up the banner with a new Center for Mobile Learning whose first activity will focus on App Inventor. Click here to read the MIT press release and here to read the announcement on the Google Research blog.

You can also learn more about the transition and what it may mean for App Inventor users from the author of O’Reilly’s “App Inventor” and the App Inventor Blog, USF Professor David Wolber (@wolberd). Professor Wolber is delivering a free O’Reilly webcast, “What’s Next for App Inventor?” (if the webcast has already occurred by the time you read this, search the O’Reilly webcasts site for an archived version).

I’ll be watching the open sourcing of the tool and MIT’s involvement closely in the coming months. I truly hope this begins a new positive chapter for mobile app building by the masses.

If for some reason the App Inventor transition doesn’t pan out as hoped, there is another technology to consider on the ease-of-mobile-programming front: PhoneGap (@phonegap). I’ve written a little bit about PhoneGap on the X.com DevZone blog previously. While PhoneGap does require some coding, its barrier to entry is relatively low. It enables you to build native apps, able to access device hardware such as sensors, using just HTML, JavaScript, and CSS. And it enables you to package and deploy those apps in available app markets, not just for Android but also iOS, Blackberry, Symbian, HP/Palm’s WebOS, and Samsung’s Bada platforms. I hope to write more about PhoneGap soon.

Conclusions from our series

In this series, I’ve introduced you to both App Inventor for Android and the eBay web APIs. I’ve shown you how to setup your system for development with each of them. If you’ve been following along you’ve built two example Android apps using web APIs. You should now see how to extend what you’ve learned to write Android apps against any of eBay’s APIs, or against just about any arbitrary web API for that matter.

I hope you can now appreciate the power of a visual programming plus web API approach to development. One can build a lot of interesting apps very quickly using this approach. And even if you don’t deploy them, you can use this capability to build rapid prototypes and explore design ideas.

Please let me know if you give App Inventor a try for building against any of the X.commerce APIs. I’d love to hear your feedback on how it went and any difficulties you might encounter.

Until then, happy visual commerce hacking!