This document provides instructions for a hands-on lab to modify a single page application (SPA) to display registered players for a game from a REST API. It describes the required software, overview of the lab objectives, and steps to update the game client to call the new API endpoint and display the results. These include adding an API method, updating the JavaScript to call it, and modifying the view model to change screens and bind the results. Testing steps are also outlined.

1. Hands On SPA
Development

2. Lab
Requirements
VISUAL STUDIO 2013 U4
GOOGLE CHROME

3. Lab
Overview

4. Lab Starter
CODE
HTTP://GOO.GL/TMULBV
THIS PRESENTATION
HTTP://GOO.GL/CHUHGY

5. Disclaimer 1 – This application is for
demonstration purposes ONLY. It is
meant to teach the fundamentals of
Web API and SPA Design.
A real application would have better
security. Obviously you would
require better authentication

6. Disclaimer 2 – Please do not use this
application to write or draw
anything offensive 

7. Index.html is the main view. You can
start up the browser from this
location
App.js is the applications view
model.

8. Lab Objective
MODIFY THE APPLICATION TO
SHOW THE REGISTERED
PLAYERS

9. Inspect the URL
The TelephonePictionary API on Azure also supports viewing the players registered for a
game
Let’s take a look at what the response looks like in a browser
http://telephonepictionary.azurewebsites.net/api/games/1/players

10. Update GameClient with new call
In the Visual Studio project, open the GameClient.cs located in the /code folder
string apiUrl = string.Format("{0}api/games/{1}/players", clientUrl, gameId);
WebClient client = new WebClient();
byte[] data = client.DownloadData(apiUrl);
string json = UTF8Encoding.UTF8.GetString(data);
var list = JsonConvert.DeserializeObject<List<string>>(json);
return list;

11. Add an API Method Route
In the Visual Studio project, open the
GameController.cs
• Stub out the following method

12. Fill in the API method implementation
In the Visual Studio project, open the GameController.cs – Now let’s fill in the
implementation for GetPlayersForGame
Instead of a simple Ok() result – let’s have it return the data from the GameClient call:
Ok(GameClient.GetPlayersForGame(gameId));
Once complete; you should be able to test your new API call in a browser
http://localhost:25085/api/games/1/players (the port number will be different in your
project)

13. Add API Call in JavaScript
In /app/js/api-client.js add the following function. This is what will enable your application to
retrieve the same players from the server.
getGamePlayers = function (obj) {
$.ajax({
url: "../api/games/" + obj.GameId + "/players",
contentType: 'application/json',
method: 'GET',
success: function (data) {
obj.Callback(data);
}
})
}

14. Add a new view in the HTML
In index.html add the following markup before the closing container div (on line 175)
<div data-bind="visible: CurrentScreen() == 'PlayersList'">
<h2>All Players in game</h2>
<ul class="list-group" data-bind="foreach: AllPlayers">
<li class="list-group-item">
<span data-bind="text: $data"></span>
</li>
</ul>
</div>

15. Change the player count
In index.html, change line from:
<span data-bind="text: NumberOfPlayers"></span>
To:
<a href="#" data-bind="click: $root.PlayersClicked"><span data-bind="text:
NumberOfPlayers"></span></a>
Now we need to create the “PlayersClicked” function on the view model to hook everything
up

16. Update the view model
In app.js, add the following on line 19. This is what will hook everything together. When the
user clicks the “players” link, we will make a RESTful call back to the server to pull the players for
the selected game.
self.AllPlayers = ko.observableArray([]);
self.PlayersClicked = function (row) {
getGamePlayers({
GameId: row.Id,
Callback: function (data) {
self.AllPlayers(data);
}
});
}

17. Run the application
Browse to index.html (be sure to do a SHIFT-REFRESH to load your changes). What happens
when you login?
Using the Chrome Developer Tools (F12), you can see if you have any JavaScript errors on the
page. If you did everything correctly you should not have any
When you click the “number of players” link on each game, nothing happens though. Why?

18. View Model update to change views
Change the implementation of the PlayersClicked function in app.js – switching the view
after the data is loaded from the server will cause the application to display the players
view
self.PlayersClicked = function (row) {
getGamePlayers({
GameId: row.Id,
Callback: function (data) {
self.AllPlayers(data);
self.CurrentScreen("PlayersList");
}
});
}

19. Testing is my responsibility too

20. ”
“
By iteratively developing
your tests, you will be
subtly influencing the
application design

21. ”
“
We need to think of functional
tests as a construction deliverable

22. ”
“
Mocking frameworks are a developer’s best friend