The App Inventor team just released a new component, and its a whopper: the WEB. Before this component, you had to create and deploy server code, using Python, Java, etc, in order for your app to get data from the web. Now you can call APIs directly from your App Inventor blocks! Suddenly, App Inventor programmers have a lot more power to create web-enabled apps that mash data from various sources.
As a first example, check out this App Inventor app that accesses stock quotes from the Yahoo Finance API:
stock quote app in emulator
Designer view for stock quote app
The blocks for stock quote app (click to enlarge)
The app just sets the Web component’s Url property to the base URL of Yahoo Finance, then adds on the stock symbol input by the user in the StockSymbolTextBox.
The call to Web1.Get then invokes the web request. The event Web1.GotText is triggered when the data arrives back from the Yahoo Finance. The data, in this case the stock info in comma-separated form, is returned in the argument responseContent. The app uses the list function listfromcsvrow to get the csv values into list form, then grabs the second item which is the stock’s current value.
The Yahoo Finance API is especially easy to use because it doesn’t require any password or key. You can get different information out, such as the one-day change in the stock, and you can send different parameters in the URL to ask for different data. Check out this site for a nice spec of the Yahoo Finance API.
There are lots of APIs out there, some of which have simple interfaces like Yahoo Finance, and some which require more work. I’ll be exploring more of these in future posts.
This app is a simple one, but if you want to download it to your phone, just scan the following QR code:
Filed under: api communication, how to | Tagged: android, app inventor, web |
App Inventor Blog 
Great example! Thanks for sharing!
I was wondering if you would be so kind as to create an example that can use the Youtube API. I think the correct documentation is here:
http://code.google.com/apis/youtube/2.0/developers_guide_jsonc.html
No matter what I try, I keep getting errors. I really want to have a Youtube app ready by the time Google TV’s go live with HoneyComb and can get market apps.
Another really important one is the Google products feed. I am having the same difficulty.
http://code.google.com/apis/shopping/search/v1/getting_started.html
Again, it would be a tremendous kindness as I think these two things are going to be big for App Inventor non programmers like myself.
Fantastic! Thanks for this tutorial. And, please, don’t forget to explore and share more complex APIs.
by the way, I bought this book (App inventor). I bought an ebook version, from O’reilly. I am going to read it. Is it written by you, David? Am I going to find there more complex WEB application like the one of this tutorial? Thank you.
Hi Flavio. Yes, I’m the lead author of the book, hope you like it. The book has a couple app samples that talk to the web, one that talks to the Amazon api. But the appinventorapi.com site probably has the most web examples.
Dave
Thanks! this is very useful information!
do you think you can do something similar to show us how to use
web1.gotfile event?
I want to use it to grab an image from the web and display it on the phone via the phone included gallery application but i’m not able to do it.
Thanks
Whoa, whoa, get out the way with that good inforaimton.
I love this as it makes it very easy to interact and make mashups for an Android phone. I slapped a quickie together that reads som info from a site i have when i shake the phone and talks it out loud with the text to speech module.
Daniel, that sounds really cool. Would you be up for me posting your sample on the blog and showing students in my class?
Dave
Dave,
Is it possible to use this new web component to return xml rather than csv?
Ryan
Hi Ryan. Yes, the component just gets back text (or a file). With this stock quote sample, text is returned in comma-separated values, but the text will be in xml format if that’s what the api returns. I believe you have to parse the xml yourself in your app inventor app.
Hello Wolber
Thank for posting your example. I tried it, but keep receiving the message
error 1101: unable to get a response with the specified url
I also tried the command in a browser and then it works fine.
best regards
Kees Bond
In the Web1.GotText block make sure that you are passing the value of responseContent (not responseCode) when obtaining the value for stockDataList.
Error 1101 is Yahoo blocking requests from AppInventor
Hi!
We are using this routine very much, when controlling a broadcast system where we talk an control it by talking to there API.
Do you need to add carrige return and linefeed?
Can you have more then one Web component in one AI app?
Will there be a solution for the need to have several screens in upcoming AI versions?
Yesterday we also bought your book from Amazon:)
To explain a bit more it is of course the receiving system that needs carriage returns and line feeds…I believe we can sort that on our own:)
Hi Lars. You can use the same web component to call different apis, or use separate ones, either way will work.
In terms of the end-iines, displaying lists of information is not real easy with App Inventor. You can dump an entire list into a single Label component, placing endlines (\n) after each line. You can also set up a table arrangement component with rows consisting of labels. You have to code putting the data into each specific row, which is a bother, but the data will show up in tabular format.
In terms of multiple screens, there is a workaround solution now which is to use a number of vertical arrangements. Each arrangement holds one screen. You have to explicitly make the current screen visible and the others not. Its not perfect but it works. I know the App Inventor team is working on adding multiple screen capabilities, but not sure when it will be out.
good luck,
Dave
I’m impressed by your writing. Are you a professional or just very knowledbgelae?
Is there any place i can get help for the web component?? I am really interested in this new component to make my life so much easier. But i dont know enough about it. Any tutorials other than the one you have? Lets say a way to get this blog to show up so i can keep up with the new questions and answers??
Hi David, thanks to your excellent work, i’ve made a similar tutorial but in Italian for italian language speaker, you can find it in my blog:
http://seblogapps.blogspot.com/2011/06/tutorial-11-il-nuovo-componente-web-di.html
i hope you don’t mind if i’ve taken the idea from you to simply show how to use the web component!
excellent work as always!!!
I’m having trouble duplicating a “form” post to a URL. I need to pass multiple variables on the text – do I just concat them?
Looking at using POST not get.
I have problem in viewing the free sampler of the book. Is there any link? thanks sir.
Hi Aidhen. The samples for the book are at: http://examples.oreilly.com/0636920016632/. Download the zip files, then in App Inventor go to the projects page and choose More Actions | Upload Source, and open one of the app zip files. Let me know if you’re able to get them.
Dave
I’m trying to do a similar app, but using google spreadsheet api. I’m able to get a csv file, but I can not extract specific information from the spreadsheet. I notice that you use a special tag in the url so it only bring you the price (l1). What I want to do is… base on the entry in the app search the column “A” in the spreadsheet and bring me the result that is located in column “C” in the CSV file. Can this be done???
Hi Orlando. You can convert the returned csv into a list with the block “list from csv row”. The list will be a list of lists, with each element a list embodying a csv row. Once you select a row, you can get column A by selecting the 1st element from the list. Select 2 from list for B and so on.
good luck,
dave
Tks for the information. Now I think why it didn’t work. When I call the csv from google spreadsheet, it also brings me the heading of the columns creating 2 rows (1 for the heading and one for the result). Now when I run the app an error msg appears saying that the csv list should be only 1 row. What can I do in this situation??
BTW your book is awesome
the url that i’m using is http://spreadsheets.google.com/tq?tqx=out:csv&key=0Ak9ecDZWcAbzdEhGT3ZmcUxRLXBjdllnUVByY3VZamc&tq=select C where A=’SF3RJ238TY’
[…] (I took inspiration from both as I prepared this article): Using the Web component to access Yahoo Finance stock information and the Google Books […]
Hi, I´m trying to do your example, but I can´t find the built-in definition block “value”, how did you get it? Thanks for your help.
Now we just need an example to post a file. The example that I want to see uses an API on my http://www.box.net account. It accepts File Posts to my account and gives me the URL with my authorization key in it. I’ve tried and tried to POST my files from my SD card using the block editor and entering in the full path name from the text. I get my response from the Box server letting me know that they didn’t see any file attached. I think the app inventor code is not functional for this.
I fixed my problem some time ago using app engine and an uploaded python code adapted from another example to handle my web post on the server side, and using my app to post files of photos taken from the camera within the app and send a report in the body of the email. Love App Inventor and the web component.
Do you might have a spam concern on this website; I also am a blogger, and I was wondering your situation; weve got created some nice methods and were looking to trade options with other individuals, be sure to shoot me an e-mail if serious.
Hi any clues what the ‘special tag’ is for return on equity and beta?
Or is there another simple way to get those values. (keep in mind that I’m not a programmer by any stretch).
Why am I getting a
1101 Error
Unable to get a response from the specified URL: url string ?
Thanks for the help.
finally i found someone who knows how to provide relevant information on the problems i have been searching for? thanks, at last i can study with pleasure..
My spouse and I stumbled over here from a different website and thought I might as
well check things out. I like what I see so now i am following
you. Look forward to looking at your web page for a second time.
Piece of writing writing is also a fun, if you be familiar with afterward
you can write or else it is complicated to write.
A biopsy is the removal of some of the suspected tissue from the persons body.
With this information, maybe you will find yourself a more properly informed person,
and will allow you to handle the topic of cancer better.
The effusions lasted from 1 to 10 months, with a median of 3 months.
With havin so much content and articles do you ever rrun into any issues of plagorism
or copyright violation? My website has a lot of exclusivge content I’ve either authored myself or outsourced
but it looks like a lot of it is popping it up all over the
web without my authorization. Do you know any
ways to help prevent content from being ripped off?
I’d definitely appreciate it.
Howdy terrific website! Does running a blog similar to this require a lot of work?
I have very little understanding of programming but I had been hoping
to start my own blog soon. Anyhow, if you have any ideas or techniques for new blg owners please
share. I know this is off topic but I simply wanted to ask.
Thanks a lot!
Un Curs Valutar de App Inventor has a new Component: the
WEB conversie valutara nu este o greutate usoara de a
a fauri de zi cu zi cu modificarea ratelor Curs Valutar straine
. Fiind o moneda instraina , litera la fiecare moneda locala se va a pretui pentru Curs Valutar puterea de scumparatoare in
camp straina se a ramplasa in orice minut uro .
I’m very happy to discover this great site. I need to to thank you for your time
due to this wonderful read!! I definitely appreciated every little bit of it and i also
have you book marked to check out new stuff in your website.
When the 8384 narrative ‘network ‘ world wide web. 8384xS. com.
ルイヴィトン バッグ 新作 http://www.huntersforken.com/
magnificent points altogether, you just gained a logo new reader.
What could you suggest in regards to your put up that you just made a few days ago?
Any positive?
Hey there! I know this is kinda off topic but I was wondering which blog
platform are you using for this site? I’m getting fed up of WordPress because I’ve had issues with hackers and I’m looking at options for
another platform. I would be great if you could
point me in the direction of a good platform.
[…] App Inventor has a new Component: the … – The app just sets the Web component’s Url property to the base URL of Yahoo Finance, then adds on the stock symbol input by the user in the … […]
The get response is blank when using MIT app inventor. I tried hurl.it to test the get response and it seems to work. The website I am trying to access is one that I built using php.
Thanks in advance!!