As we continue to move into the new era of mobile computing,we have to reexamine the relationships between layers of computing systems. Wherewe would create a traditional client-based architecture, we might now include aclient-server layer. Since mobile devices often have much less on-board storagethan 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 asdiverse as weather information systems and real-time airline traffic systems.
To more efficiently build applications for these relativelythin mobile devices—and to take advantage of real-time data, developers andprogrammers often employ a web-service architecture.
Let’s look at a real live web service
To demonstrate the purpose and use of a web-servicearchitecture, we’re going to look at a real live web service. The web servicewe’re going to examine is from WebserviceX.net—a website that provides a numberof free web services. This one, in particular, returns real-time stock marketdata for a provided company stock symbol (Figure 1).
Figure 1: The description ofthe Stock Quote service from WebserviceX.NET
You can examine the description of the service yourself at https://www.webservicex.net/ws/WSDetails.aspx?CATID=2&WSID=9.
Accessing the remote service
Let’s access the remote service using some JavaScript code. Keepin mind, as you follow along, that the code that we’re writing is accessing aremote server, pulling information from it, and processing it. Using a similarcoding approach, for example, it would be possible to create eLearning contentthat teaches about the stock market using real-time data. If you exploreWebServiceX you’ll see a couple of examples of the thousands of real-time datafeeds that are available and that serve as the “server side” in a web-servicearchitecture.
To get a sense of how the web service works, type thefollowing into the location bar of your browser:
https://www.webservicex.net/stockquote.asmx/GetQuote?symbol=LUV
Believe it or not, we’re already accessing the web service. Yourbrowser will display the current information for the company with the stocksymbol LUV—Southwest Airlines (Figure 2).
Figure 2: The web serviceprovides 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 thiscode into any text editor. We’re going to start with a very simple userinterface:
<!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. Inyour browser, you should see a field for the user to enter a stock symbol and abutton.
Next step: contacting the server
Now let’s add the code to contact the server. We’re going tobe using a technique known as AJAX, which allows the program to contact theserver behind the scenes and wait for a response.
After the <title> element in your head add the followingscript:
<script> var xmlhttp; window.onload=function() { xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = processReturn; document.getElementById('getInfo').addEventListener('click', sendRequest, false); } function sendRequest() { url = "https://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 JavaScriptor ActionScript experience. This code, however, sends our request to the serverfor data. You can test it by loading it into your browser and requesting astock symbol such as LUV. When you press the “Get Stock Info” button, it willcontact the server. The remote server is going to prepare and send the databack 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 intothe <div> that we initially labeled “result” in our code. We need just acouple of changes to the JavaScript. We’re going to replace the command to createthe alert box as follows. Make sure your processReturn() function looks likethis:
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 stockinformation for your chosen stock symbol. Your response should look somethinglike this (Figure 4):
Figure 4: We can see thatSouthwest Airlines stock was down $1.22
Wrapping up
Whether or not you completely understand the JavaScript, theidea of using a web-service architecture has powerful implications foreLearning. For example:
- If you serve eLearning content live from aserver into a learning app using web-service architecture, you are assuring thelearner of always receiving the most recent updates of data in training. All too frequently, eLearning developersembed the content into the tool that they are using to develop. This poorpractice means that updating content requires an overhaul of the entireeLearning production. If data is served using a web-service architecture, nosuch 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 actualfinancial markets. You can integrate live company data into training content. Thepossibilities are endless and exciting for many areas of eLearning.
- SME’s can update content independent of theeLearning production—making for a more efficient and brief update cycle. Sincecontent is separate from presentation—and downloaded at the time of trainingusing the web-service architecture, there is no reason you can’t update it on afrequent basis.
I hope you’ll agree that it’s valuable for learners to workwith 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 includedin the training work you do, I’d love to hear from you at [email protected].
