Social Icons

StockQuotes for App Inventor 2

StockQuotes

What You're Building

Just like you can access web pages from your phone -- for example, to look up a stock price -- so can App Inventor. This app enables the user to enter a stock symbol, then looks up the price of the stock on Yahoo! Finance and displays the price on the phone.

This tutorial assumes that you are familiar with the basics of App Inventor -- using the Component Designer to build a user interface and using the Blocks Editor to specify event handlers. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing.

Introduction

This tutorial includes

  1. Accepting text input from the user to specify the stock symbol.
  2. Using the Web component to ask Yahoo! Finance for the latest price for the stock.
  3. Displaying the result.

Getting Started

Connect to the App Inventor web site and start a new project. Name it StockQuotes, and also set the screen’s Title to “Stock Quotes”. Open the Blocks Editor and connect it to the phone.

Set up the Components

Use the component designer to create the user interface. When you are done, it should look something like the picture below. Additional instructions are below the picture.

Create the following components by dragging them from the Palette into the Viewer.

Component Type Palette Group What you'll name it Purpose of Component
TextBox User Interface StockSymbolTextBox Where the user enters the stock symbol
Button User Interface GetQuoteButton To request the stock quote
Label User Interface ValueLabel To display the stock quote
Web Connectivity Web1 To request and receive the stock quote

Stick with the default properties except for the following changes:

Component Action
StockSymbolTextBox Set its Hint property to "Enter a stock symbol".
GetQuoteButton Set its Text property to "Get Stock Quote".
ValueLabel Clear its Text property.

The Yahoo! Finance API

Many web services provide an application programmer interface (API) for developers to enable their programs to access the service. Some ways to discover APIs are through the website http://programmableweb.com or just by doing a web search for the service name and “API”.

For example, you can use the Yahoo! Finance API to get the latest price for the stock with the symbol "GOOG", for example, with the URL http://download.finance.yahoo.com/d/quotes.csv?f=nl1c1&e=.csv&s=GOOG . The section "f=l1" (lower-case letter L, followed by the number 1) says we would like the latest price, and the section “s=GOOG” says we would like information about the stock whose symbol is “GOOG”. The result is returned in comma-separated value (CSV) format, which you may be familiar with from spreadsheets. Since only one value will be returned for our query, the result will be a plain old number, such as “511.5”, without any commas. (Commas would be used if we requested multiple pieces of data from Yahoo!, such as the name of the company and the daily trade volume. To get data for multiple stocks, chain together the stock symbols with commas).

Add Behaviors to the Components

Requesting the Data

The blocks to make the web request are shown here and detailed below:

Block type Drawer Purpose
GetQuoteButton.Click GetQuoteButton Handle a click of the "Get Quote" button.
set Web1.Url to Web1 Specify the URL to request.
join Text Concatenate the parts of the URL.
" " (http://download.finance.yahoo.com/d/quotes.csv?f=nl1c1&e=.csv&s=) Text Specify the first unchanging part of the URL.
StockSymbolTextBox.Text StockSymbolTextBox Get the stock symbol from the text box.
call Web1.Get Web1 Make the web request.

The meaning is: When GetQuoteButton is clicked:

  1. Build the Web component’s URL by concatenating “http://download.finance.yahoo.com/d/quotes.csv?f=nl1c1&e=.csv&s=” (which you should copy and paste into the text block) and the symbol entered by the user (StockSymbolTextBox.Text).
  2. Request the page specified by the URL. (This is like pressing return after entering a URL in your web browser.)
Receiving the Data

When the response to the web request arrives, the Web.GotText event is raised with four parameters (only some of which we’ll use in this app):

  1. url: the URL of the original request (which is useful if requests are made with many different URLs).
  2. responseCode: the HTTP status code, which indicates whether the web request succeeded or how it failed; for example, 200 means that the request succeeded, 404 that the page could not be found, etc.
  3. responseType: the MIME type of the response, such as “text/csv” in this app, “image/jpeg”, etc.
  4. responseContent: the data being returned, such as “511.5”.

Here are a picture and table of the blocks you need to create:

Block type Drawer Purpose
Web1.GotText Web1 Specify what to do when the reply comes back from the web.
if then Control Provide different behavior depending on whether the request succeeded. Use the mutator to add an else statement.
get responseCode Variables Gets the response code returned for the web request, which...
= (equals) block Logic ...is checked for equality with...
number (200) Math ...200, the code for valid web responses.
set ValueLabel.Text to ValueLabel Display the result on the screen.
join Text Build the result by concatenating...
" " ("Current value: ") Text ...the text “Current value: “ and...
get responseContent Variables Gets the value returned from the web.
set ValueLabel.Text to ValueLabel Display an error message.
" " ("Error getting stock quote") Text The error message

Here's a description of the block's behavior:

  1. If the response code indicates that the web request succeeded (= 200), set the label to the concatenation of “Current value: “ and the returned data (e.g., 511.5).
  2. Otherwise, set the label to “Error getting stock quote”.

Invalid Stock Symbol

What happens if you misspell a stock symbol? The app says that the Current Value is N/A! N/A stands for “not applicable”--or, that the API doesn’t know what that stock symbol is, so it can’t find a current value. Below is a picture and a table of the blocks required to tell the user they have entered an invalid stock symbol.

Block type Drawer Purpose
Web1.GotText Web1 Specify what to do when the reply comes back from the web.
if then Control Provide different behavior depending on whether the request succeeded. Use the mutator to add an else statement.
get responseCode Variables Gets the response code returned for the web request, which...
= (equals) block Logic ...is checked for equality with...
number (200) Math ...200, the code for valid web responses.
if then Control Provide different behavior depending on whether the symbol was valid. use the mutator to add an else statement.
contains Text Checks whether a piece of text exists within another piece of text
get responseContent Variables Gets the value returned from the web, which contains “N/A” if the symbol was not found.
" " ("N/A") Text The text "N/A"
span class="setcomponent-ai2">set ValueLabel.Text to ValueLabel Display an error message.
" " ("Couldn't find quote. Are you sure that's a valid symbol?") Text An error message.
set ValueLabel.Text to ValueLabel Display the result on the screen.
join Text Build the result by concatenating...
" " ("Current value: $") Text ...the text “Current value: $“ and...
get responseContent Variables Gets the value returned from the web.
set ValueLabel.Text to ValueLabel Display an error message.
" " ("Error getting stock quote") Text An error message

Here's a description of the block's behavior:

  1. Check whether the response code indicates that the web request succeeded (=200); if it did not, set the label to "Error getting stock quote".
  2. If it did, check if the stock symbol was found. If it was not found, set the label to "Couldn't find quote. Are you sure that's a valid symbol?".
  3. If the stock symbol was found, set the label to the concatenation of "Current Value: $" and the returned data (e.g., 511.5).

Review

Here are some ideas introduced in this tutorial:

  1. Using an application programmer interface (API)
  2. Making a request with the Web component
  3. Checking whether a web request was successful
  4. Displaying information returned from the web

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then open App Inventor, click Projects, choose Import project (.aia) from my computer..., and select the source code you just downloaded.

Credits

This tutorial is based on an app created by Prof. David Wolber and relies on the Yahoo! Finance API.

Done with StockQuotes? Return to the other tutorials here.

Tutorial Version: 

Tutorial Difficulty: 

  • Intermediate

Tutorial Type: 

  • External API