Tech Crunch's Jason Kincaid recently gave App Inventor a spin, and wrote a great article about the tool. One of the samples he contemplated was a Tech Crunch monitor: My first (admittedly overambitious) idea was to create an application
that would allow a user to monitor TechCrunch headlines for keywords,
which could come in handy if a startup wanted to get notified whenever
we wrote a post about them.
Jason correctly noted that App Inventor does not have an RSS feed component and so his idea was thus quickly thwarted. He then discovered that App Inventor does have a Twitter component, and so was able to shift the idea to monitoring Tech Crunch's Twitter feed.But could Jason have written a monitor using TechCrunch's RSS or API feed? The more general question is this: Can App Inventor be used to create apps that talk to the web?
The answer is Yes! with one caveat: you need to know how to program enough to write a web service proxy for the API you want to talk to (or know a programmer who will do this for you). App Inventor provides a component, TinyWebDB, that allows an App Inventor app to talk to any service that conforms to a particular JSON protocol. This TinyWebDB component provides the bridge from App Inventor to the web and thus any computation. The App Inventor team has created a fantastic library of components to program with, but it doesn't have everything. TinyWebDB is the way to circumvent the limitation and access any data/computation you'd like. Using Jason's TechCrunch monitor idea as a sample, I'll show you how to write a proxy service using Python App Engine code, and then I'll show you how to connect to it from your App Inventor program. An App Inventor Proxy for the TechCrunch Posts API Google's App Engine provides an easy way to deploy web pages and services. It supports Python and Java code and allows you to deploy your apps for free. I use the tool in my beginning computer science courses so the students can build web apps in their first semester. The TechCrunch sample web service is written in Python and it's attached at the bottom of this page. The sample modifies the default TinyWebDB service code which was authored by Hal Abelson of MIT and App Inventor. To make a custom service, you need only copy this code and then put your custom code within the GetValue.get_value method. Whatever your code places in "value" will be returned to the caller of the service (e.g., the TinyWebDB component in your App Inventor app). Here's the key part of the code for the TechCrunch sample: class GetValue(webapp.RequestHandler):
def get_value(self, tag): # techcrunch api for seeing how many items about a person # http://blog.crunchbase.com/2009/06/01/new-crunchbase-apis-permalink-techcrunch-posts/ techCrunchFile = urllib.urlopen("http://api.crunchbase.com/v/1/companies/posts?name="+tag) textInFile = techCrunchFile.read() splitList = textInFile.split("\"num_posts\":") if len(splitList)<2: value="0" else: countWithMore=splitList[1] if len(countWithMore)<2: value="0" else: countSplit = countWithMore.split(',') value = countSplit[0] ## We tag the returned result with "VALUE". The TinyWebDB ## component makes no use of this, but other programs might. WritePhoneOrWeb(self, lambda : json.dump(["VALUE", tag, value], self.response.out)) The WritePhoneOrWeb packages your value up as JSON-- the details of which you can explore in the full sample code. But if you just want to write a proxy that will work for an App Inventor program, all you need is to download the attached sample, find the function shown above, and replace the code in bold with your custom code. For more help writing and deploying an App Engine app like this sample, see these notes. The App Inventor Client App Inventor's Component Designer is used to create the user interface for an app. For this sample, you can drag most of the components out from the Basic palette:
The designer view of your client should look like this:  Programming the Behavior in the Blocks Editor The next step is to program the behavior of the client app. The behavior you want is this: When the user enters a company name in the CompanyTextBox and clicks the SubmitButton, the app should access the TechCrunch API (through TinyWebDB) and display the result-- the number of posts for that company, in the NumPostsLabel. With TinyWebDB, you request data with the GetValue command. It doesn't immediately return a result. When the data does arrive back at the phone, the TinyWebDB.GotValue event is triggered. It is within this event that you should process the data. Here are the blocks you'll need:  techCrunchFile = urllib.urlopen("http://api.crunchbase.com/v/1/companies/posts?name="+tag) When the data arrives from the web service, the GotValue event is triggered. The data is returned in the argument "valueFromWebDB" and is placed in NumPostsLabel.Text for display. Attachments techcrunchtinywebdb.zip is the source code for the web service used in this sample. You can download it and modify it to create your own custom TinyWebDB web service. TechCrunchPosts.zip is the App Inventor source code for the sample client. You need not unzip it-- just open App Inventor, go to the My Projects page, and choose More Actions | Upload Source. This will load the project into App Inventor. |
|
|
TechCrunch Sample |
