Tag: google app inventor

Being a lazy sort, one of the things I’d like to be able to do with Google App Inventor is pull content into a mobile app from outside. The recipes for doing this – for example, pulling content in to an app as a list from an RSS feed – still seem to be a little laboured (what I really want is a “get feed” block that can pull in a JSONified RSS feed from an arbitrary RSS URL via a proxy – such as a Yahoo pipe), so I had a scout around for what other sorts of content could be pulled in to an app…

The most obvious one seemed to be images, using an image container and the image blocks:

If the image container sees an image location starting with http://, it knows to retrieve the image from the web.

But what sort of app might be fun to display? A couple of weeks ago, I noticed that you can now plot a mathematical formula using a Google chart, so I had a 10 minute tinker putting the following app together, (followed by a half-hour hassle trying to get the App Inventor environment to connect to my phone properly! I think the workaround may be to install test apps to my phone via a wi-fi or 3G download, rather than via the tethered debugging route. Memories of edit, recompile, run, come flooding back to me!)

But first, some background… By passing a suitably encoded formula as part of a chart configuration URL, the Google chart API can be used to return a line chart that plots out a supplied formula over a certain range: line charts: data functions. One of the easiest ways of playing with the settings is to use theGoogle chart playground, though you still need to remember to encode certain characters, (such as + -> %2B ;-) yourself…

Trying to read through the documentation late last night didn’t make much sense to me, but I came away with the impression that a handy URL pattern could be based around the following:

http://chart.apis.google.com/chart?cht=lc&chd=t:-1
&chds=0,20&chs=250×150&chco=FF0000
&chxr=0,0,11|1,0,20&chxt=x,y
&chfd=0,x,0,11,0.1,sin(x)*4%2B5

More generally:

http://chart.apis.google.com/chart?cht=lc&chd=t:-1
&chs=250×150&chco=FF0000
&chds=YMIN,YMAX
&chxr=0,XMIN,XMAX|1,YMIN,YMAX
&chxt=x,y&chfd=0,x,XMIN,XMAX,XSTEPSIZE,ENCODED_FORMULA

(This may not be a good set of assumptions – but it’s enough to be going on with…)

If we just use a default range for X, Y and the XSTEPSIZE, all we need to supply to a canned URL is a suitably encoded formula. So here’s the proof of concept minimal chart plotting app I came up with:

Here’s what this app does: when the plotChart button is clicked, look to the text entry box (userFormula) for a suitably encoded formula (such as 20*sin(x) or 5%2B5*cos(x) (for 5+5*cos(x)), generate the chart URL, and then load the chart into the outputChart image container.

That is, it’s an app that will plot out a formula for you :-)

I started to parameterise the arguments that make up the call to the chart generating service to make it easy to extend the app to make it easier to support the handling of additional parameters entered via additional entry dialogues (e.g. text boxes); this might then allow the user to specify the range over which the chart was to be plotted, for example, by entering the range limits into separate text boxes, or maybe setting them from a list of predefined alternative ranges.

It would also be easy enough to create canned formula buttons that plot a chart for a predefined function over a predefined range, for example. (I guess it would be possible to create a list containing these options and then allow the user to select the function to be plotted from a list choice menu? Hmm… an exercise for later, maybe;-)

PS Whilst looking through the chart API, I also noticed a new component (I’ve no idea how long it’s been there) for plotting GraphViz generated network diagrams. So for example:
http://chart.apis.google.com/chart?cht=gv
&chs=250×250&chl=digraph{A->B->C;A->C}
gives:

So I should be able to plot network diagrams too? :-)

I had a quick play with Google App inventor yesterday, and aside from a few issues related to reliably connecting my phone to my Mac, it all seemed to work pretty much as advertised.

As a quick example of what’s possible with no coding and not a lot of programming (ya hearing me, @jimgroom?!;-), here’s a simple Twitter search client:

The paired blocks at the top define a variable called uName containing the search term (in this case, psychemedia, my Twitter user ID).

The second grouping relates to a button I created within the application call search; when the button is clicked, a query is sent to twitter using the search term contained in the uName variable. (Note that I didn’t really need to use the variable – I could have used a text block to set the twitter query term directly.) The third grouping of bloxks tells the app what to do when the Twitter search is successfully completed and the results returned to the app. In this case, the results of the search are assigned to the variable searchResults; when the results have been successfully received by the app, a label I have named searchResultsDisplay is set to display the contents of the searchResults variable – that is, the results of the Twitter search.

When the app is run, a search is made on Twitter for “psychemedia” and the results displayed on the phone. It’s easy enough to imagine an app where we have several buttons that can run separate searches over different search terms – a 1-click Twitter search app.

Whilst there are certain circumstances where a predefined search app may be useful (for example, a conference hashtag search app), we often want to allow our users the freedom to choose their own search terms so that they can decide what they are searching for. So here’s an overview of an app that allows a user to enter a search term into a text box, and then click a button to run the search and then display the results in a label:

The app itself is contains four components: a text entry box (userName), a button (search), a label (searchResultsDisplay) and a predefined Twitter component (Twitter1). The programme is, if anything, simpler than the first example shown above. This time, rather than using a pre-defined variable to contain the search term, we take it from the text entry box. Here’s an annotated version of the above showing how the components relate to each other:

One problem with displaying the whole set of results in a label is that the output display is just one huge block of text. Although he Twitter search returns a list containing separate search results, when we use it for the label display, the separate list items are not separated from each other. In order to tidy up the display, we need to create a routine that will produce a block of output text where each separate result is placed on a separate line. To do this, we need to insert one or two new-line characters (\n) in between each list item. The following programme achieves that:

Here’s how it works. We create a variable (op) to contain the structured output text. When the search results are returned and successfully placed into the searchResults variable, we use a foreach block to run through each item in the results list in turn, one at a time, and do something to each one as we do so. To act as a temporary placeholder for each item, we use the item variable. The set global block builds up the output text message by appending the each item in turn to the current output string (which starts off empty), followed by two newline characters. That is, the string starts of empty; after the first result item it contains “(first result)\n\n”; after the second item it contains “(first result)\n\n(second result)\n\n”; and so on. Once each of the result list items has been added to the output string, we set the label to display that output; this time, each result appears on its own line.

Whilst the above application is very simple, it’s easy to see how we can quickly create a single function application. With a little more thought, and bit of knowledge about how to create advanced Twitter search strings, we could create a more refined application. For example, the “to:” search limit allows us to search for tweets sent to an individual. So we could imagine tweaking our app to include another search button that allows a user to search for tweets sent to a particular user, or sent from a particular user. For example, if we enter a username in the search box we can construct a limited search query by prepending the search term with the “to:” search limit before running the search. That is, doing something like this (untested!):

Note that I have made use of a second instance of the Twitter search object, so that I could in principle run – and handle the results from – two separate search queries initiated from a single button click.

With a little bit of branding added to the app, the “5 mins is all it takes” development cycle for an app like this means we could, if we wanted, create a disposable app around a set of canned search terms to support the reading of a backchannel during an event by meeting participants who don’t subscribe to Twitter.