Overview of Google App Inventor Blocks

So I got my Google App Inventor invite last night, had a quick play this morning with the Hello World app, and then hit an issue as the App Inventor kept failing to connect to my phone with anything other than a new app project started from scratch… so rather than waste the morning variously rebooting my phone, mac, phone and mac, in various combinations, here’s a quick tour – without commentary for now – of some of the various blocks that the App Inventor editor supports…

First of all, the “built-in” blocks, that are always available:

Procedure definitions:

App Inventor - definition blocks

String manipulation:

Google app inventor - string blocks

List manipulation:

Google app inventor - list blocks

Maths blocks:

Google app inventor - maths blocks Google app inventor - maths blocks 2

Logic blocks:

Google app inventor - logic blocks

Control blocks:

Google app inventor - control blocks

Colour blocks:

Google app inventor - colour blocks

Then there are the blocks associated with components that have been added to the app. So for example, there are various sensor related blocks:

Accelerometer blocks:

Google app inventor - accelerometer blocks

Location sensor:

Google app inventor - location sensor blocks Google app inventor - location sensor blocks 2

Orientation sensor:

Google app inventor - orientation sensor

These being phone apps, phone functions are also handy. For example:

Phone calls:

Google app inventor - phone call blocks

Texting:

Google app inventor - texting

To make the phone related activities easier, I’m guessing the contacts and phone number picking utilities might be handy (though I’m not sure how you’d use them?)

Phone numbers:

Google app inventor - phone number picker 1 Google app inventor - phone number picker 2

Contacts:

Google app inventor - contact picker 1 Google app inventor - contact picker 2

There are also a range of social tools. For example:

Twitter:

Goole app inventor - twitter 1 Google app inventor - twitter 2

(It occurs to me that the Twitter blocks use basic authentication rather than OAuth, which means any apps built using the Twitter login component as-is will break at the end of August when basic authentication to Twitter is switched off…)

Media components are supported too. For example:

<em<Sound and vibration:

Google app invemtor - sound

Video:

Google app inventor - video blocks

Images:

Google app invemtor - images

Database facilities are also provided:

Google app inventor- - tinydb

and timer related functions:

Google app inventor - clock 1 Google app inventor - clock 2

Google app inventor - clock 3

Then there are various blocks relating to screen components. For example:

Screen display:

Google app inventor - screen

Labels:

Google app inventor - labels

Button blocks:

Google app inventor - button blocks 1 Google app inventor - button blocks 2

Canvas blocks:

Google app inventor - canvas blocks 1 Google app inventor - canvas blocks 2

Text blocks:

Google app inventor - text box 1 Google app inventor - text blocks 2

Check boxes:

Google app invemtor - check box 1

LIst pickers:

Google app invemntor - list picker 1

Then there are layout related blocks, such as:

Table layout:

Google app inventor - tables

Horizontal and vertical layout:

Google app inventor - horizontal layout Google app inventor - vertical layout

Okay – that’s enough for now… I’ll maybe have to try restarting my browser, rebooting my phone, and giving the actual creative site of app inventor a go again…;-)

PS I missed a couple of really interesting blocks…

Barcode scanner:

Google app inventor - barcode scanner block

Speech recogniser blocks:

Google app inventor - speech recogniser blocks

Text-to-speech:

Google app inventor - text to speech

Activity starter:

Google app inventor - activity starter

The help documentation describes the activity starter as follows:

A component that can launch an activity using the StartActivity method.

Activities that can be launched include:

starting other App Inventor for Android apps
starting the camera application
performing web search
opening a browser to a specified web page
opening the map application to a specified location

so it looks like quite a lot of scope for interacting, albeit loosely in the first instance, with other things on the phone? (See Activity starter notes for more…)

Something that’s listed as not quite ready yet is the TinyWebDB:

Google app inventor - tinywebdb

From demos posted on the Google group, it looks like you can use this as a proxy for web content – e.g. allowing a web app to post stuff into the DB, and then the inventor app to pull the results (and maybe make additional requests) via the web database. The representation format used to support comms between the app and the web database seems to be JSON.

For some outdated, but still informative, info about the various blocks, see component reference and blocks reference.

Getting Started With Google App Inventor – A Twitter Search Client

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:

ogle App inventor - Twitter search app

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:

Google app inventor  - twitter search app

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:

Google app inventor - Twitter search client, annotated

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:

Google app inventor - displaying a list of search results from twitter

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!):

Google App inventor - modifiying a search query

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.

Getting Web-based Images into a Mobile App – App Inventor Formula Plotting App Using the Google Charts API

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:

Google app invemtor - images

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…

Google chart playground

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:

Google app inventor - minimal chart plotting app

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:

graphviz chart from google chart api

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