I am a big fan of Delicious the online bookmarking site. It has proved very useful to me as a way to find information and build a collection of links that are useful to me. Delicious also has a really good mobile site and can be a good way to retrieve links from earlier research while out and about. One issue that is always a bit fiddly with mobile devices though is text entry, so wouldn't it be great if we could just say out loud what terms we would like to search for and populate the search box with that? Interestingly this is quite an easy facility to build with the new Android App Inventor. In just a few clicks we can build an application that takes voice input, processes it and then launches a web page with a search box populated with those terms.
The app I built is very rough and ready but it is just for my own use and with a bit of effort could be made to look a bit better. I am going to assume here that you have got your phone and computer set up to use the App Inventor, if not follow my earlier instructions to get this up and running on Ubuntu as well as Google's instructions for this and alternative platforms.
The first step is to build the user interface, which in this case is a very simple user interface containing only a button and some hidden components we will use later. Start a new project and call it something like Delicious Voice. This should bring up the page where you can start dragging elements to the screen. Before you do this go to the Properties for the screen in the right hand side and change the title for the Screen to something more meaningful than Screen 1, preferably to the same title as the app.
Now go to the Basic section of the Palette and drag a button to the Screen. Under Properties change the text for the button to Press to search by voice! and then alter the other properties until you get a button you are happy with. Now go to the Other Stuff section of the Palette and drag Activity Starter and Speech Recognizer components to the Screen. These will appear underneath the screen in a section named non-visible components. The Activity Starter is a very handy component that lets you start up other applications on your phone from App Inventor. in the Properties for it set the Action to android.intent.action.VIEW, this tells App Inventor to launch the web browser, we also need to set the address, but we will deal with that in a moment. In our case we are going to use it to launch the web browser, so . You should end up with something like the screenshot below.
Now it is time to make the app do something when you press that button. To do this we will use the Blocks Editor, go ahead and open it if you haven't done so already. We need to build two blocks of functionality, one to handle the button press and call the speech recognition component, the other to handle the output of that component, build the url and launch the web page. Click on My Blocks and then Button 1. A drawer will open with components for our block related to that button. Drag the block with the text When Button1.Click do to the grey work area of the blocks editor. Now click on the SpeechRecognizer1 button on the left hand side and drag the component with call SpeechRecognizer1.GetText so that it is inside the first block you used. The two should click into place. What this does is call the speech recogniser service when you press the button. You should have something like the screenshot below. You can go ahead and test it so far, when you press the button you will be prompted to speak into the mobile, but nothing else will happen yet.
The next bit is slightly more complex. Click on the SpeechRecognizer1 button on the left and drag the component marked when SpeechRecognizer1.AfterGettingText do to the work area. You will notice that there is also a blue component attached to it with the text name result, don't worry about this and leave it where it is. Now we need to construct the right web address to launch Delicious using the Activity Starter and insert the text we got from the speech recogniser. Click on the ActivityStarter1 button on the left and drag the component marked set ActivityStarter1.DataUri into the last component so that it clicks in place. If you ever drag the wrong component into the work area remember that you can remove it by simply dragging it to the bin in the bottom right.
We need to manipulate the text of the address a bit before sending it to the activity starter, so in the work area click you left mouse button, you should now see some buttons appear that say Defin.. Text Lists and so on, click on Text and join from the drop down menu. We're going to use this to append the text we got back from the speech recogniser to the address for the search in Delicious. In the grey work area left click again to bring the menu again, click text and this time just click text from the drop down menu. You should get a new component that just says text text on it, click on the text in larger print and you will find that you can edit it, change it to say "http://m.delicious.com/search?p=". Now drag your text block into the first slot of your join block. Now click on the SpeechRecognizer1 button on the left and drag the component marked SpeechRecognizer1.Result into the second slot in our join block. What we have done here is to construct a web address that passes the results of the speech recognition as parameters to the search box on the Delicious website.
You can now drag your new join block so that it clicks into the set ActivityStarter1.DataURI to component that we made earlier. There is only one thing left to do, now that we have set up the activity starter to launch a web browser and specified the right web address to use we need to tell it that we are happy for it to go ahead. Do this by clicking on the ActivityStarter1 button on the left and drag the component marked call ActivityStarter1.StartActivity to click into place below the set ActivityStarter1.DataURI to block, but still inside the when SpeechRecognizer1.AfterGettingText do block. You should end up with something like the screenshot below:
Now when you try the app out on your mobile you should be able to press the button, speak into the phone and have a web page launched with your voice input as the search terms! This works better if you have previously signed into Delicious as it will retrieve your bookmarks first. Of course this technique is not limited to Delicious, you could use it to search almost any site with a search box, your favourite shopping site, forum or library catalogue could all be good candidates, you just need to work out how to build the web address. Although this app is very simple it shows how to perform basic string manipulation, launch other apps and how simple it is to use some very sophisticated but useful technology such as the speech recogniser.
App Inventor Activity Starter (Delicius)
Hi Liam
Thanks a lot for this tut.
I tried to include it to one of my apps but i did not succed. I get the error:
Error 601: No corresponding activity was found
Of course i googled this error response but did not find any help.
Do you have an idea of what is wrong or what is missing?
Thanks a lot
D. Gasser / 27th June 2012
Hi, are you using MIT's
Hi, are you using MIT's version of App Inventor?