As we continue to move into the new era of mobile computing, we have to reexamine the relationships between layers of computing systems. Where we would create a traditional client-based architecture, we might now include a client-server layer. Since mobile devices often have much less on-board storage than their laptop and notebook counterparts, we often store data remotely. Additionally, today’s mobile apps may need to interact with real-time data from sources as diverse as weather information systems and real-time airline traffic systems.
To more efficiently build applications for these relatively thin mobile devices—and to take advantage of real-time data, developers and programmers often employ a web-service architecture.
Let’s look at a real live web service
To demonstrate the purpose and use of a web-service architecture, we’re going to look at a real live web service. The web service we’re going to examine is from WebserviceX.net—a website that provides a number of free web services. This one, in particular, returns real-time stock market data for a provided company stock symbol (Figure 1).
Figure 1: The description of
the Stock Quote service from WebserviceX.NET
You can examine the description of the service yourself at http://www.webservicex.net/ws/WSDetails.aspx?CATID=2&WSID=9.
Accessing the remote service
Let’s access the remote service using some JavaScript code. Keep in mind, as you follow along, that the code that we’re writing is accessing a remote server, pulling information from it, and processing it. Using a similar coding approach, for example, it would be possible to create eLearning content that teaches about the stock market using real-time data. If you explore WebServiceX you’ll see a couple of examples of the thousands of real-time data feeds that are available and that serve as the “server side” in a web-service architecture.
To get a sense of how the web service works, type the following into the location bar of your browser:
http://www.webservicex.net/stockquote.asmx/GetQuote?symbol=LUV
Believe it or not, we’re already accessing the web service. Your browser will display the current information for the company with the stock symbol LUV—Southwest Airlines (Figure 2).
Figure 2: The web service
provides current information on Southwest Airlines with the symbol LUV
Creating a simple user interface
Now let’s write some HTML and JavaScript. You can enter this code into any text editor. We’re going to start with a very simple user interface:
<!DOCTYPE html> <head> <title>Stocks</title> <label for="symbol">Symbol</label> <input type="text" id="symbol" /> <button id="getInfo">Get Stock Info</button> <div id="result"> </div> </body> </html>
At this point, let’s save the file as “stock.html.”
Check your work so far by loading the page into the browser. In your browser, you should see a field for the user to enter a stock symbol and a button.
Next step: contacting the server
Now let’s add the code to contact the server. We’re going to be using a technique known as AJAX, which allows the program to contact the server behind the scenes and wait for a response.
After the <title> element in your head add the following script:
<script>
var xmlhttp;
window.onload=function()
{
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = processReturn;
document.getElementById('getInfo').addEventListener('click', sendRequest, false);
}
function sendRequest()
{
url = "http://www.webservicex.net/stockquote.asmx/GetQuote?symbol=";
url += document.getElementById('symbol').value
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function processReturn()
{
if(xmlhttp.readyState == 4 && xmlhttp.status==200)
{
alert("Got it!");
}
}
</script>
This is fairly dense code—especially if you don’t have much JavaScript or ActionScript experience. This code, however, sends our request to the server for data. You can test it by loading it into your browser and requesting a stock symbol such as LUV. When you press the “Get Stock Info” button, it will contact the server. The remote server is going to prepare and send the data back to our program—however we won’t be able to see it just yet.
You should see an alert box in your browser with the words “Got it!” if your code is correct to this point (Figure 3).
Figure 3: Success! (So far!)
Displaying the current stock information
We’re going to alter the code to “dump” the returned data into the <div> that we initially labeled “result” in our code. We need just a couple of changes to the JavaScript. We’re going to replace the command to create the alert box as follows. Make sure your processReturn() function looks like this:
function processReturn()
{
if(xmlhttp.readyState == 4 && xmlhttp.status==200)
{
document.getElementById('result').innerHTML = xmlhttp.responseText;
}
}
Now, instead of the alert box you’ll see the current stock information for your chosen stock symbol. Your response should look something like this (Figure 4):
Figure 4: We can see that
Southwest Airlines stock was down $1.22
Wrapping up
Whether or not you completely understand the JavaScript, the idea of using a web-service architecture has powerful implications for eLearning. For example:
- If you serve eLearning content live from a server into a learning app using web-service architecture, you are assuring the learner of always receiving the most recent updates of data in training. All too frequently, eLearning developers embed the content into the tool that they are using to develop. This poor practice means that updating content requires an overhaul of the entire eLearning production. If data is served using a web-service architecture, no such overhaul is required—just a quick update of the data.
- Learning productions can include real-time (versus phony) data. Financial training can include information from actual financial markets. You can integrate live company data into training content. The possibilities are endless and exciting for many areas of eLearning.
- SME’s can update content independent of the eLearning production—making for a more efficient and brief update cycle. Since content is separate from presentation—and downloaded at the time of training using the web-service architecture, there is no reason you can’t update it on a frequent basis.
I hope you’ll agree that it’s valuable for learners to work with real-time data. While this requires an investment in software development, the advantages of this approach are apparent.
If you can think of more ways real-time data can be included in the training work you do, I’d love to hear from you at mark@learntoprogram.tv.