Beruflich Dokumente
Kultur Dokumente
Distributed
Information
Systems
P R O T O T Y P I C A L A C T I V E W E BS I T E
R E S T-A P I S , J S O N , D ATA B A S E , C H A RT S
Agenda
• Build an active web application
◦ Show common elements of interacting with other applications
• Acknowledgment
◦ Anupam Bhattacherjee (MS BAIS, F17 – F18)
2
Application overview
• The prototypical application
◦ Consumes a REST API from the IEX Trading exchange
◦ Saves the data in a database
◦ Charts the quotes in the view
• Reference application
◦ https://github.com/ISM6225/2018_Fall_Assignment4_ActiveCloudSite
3
Exchanging data
• A common business technology need is to deliver data to end users
◦ And consume data from other providers
4
Exchanging data
• A common business technology need is to deliver data to end users
◦ And consume data from other providers
5
Exchanging data
• In this example, we will consume data from a relatively new stock
exchange
◦ IEX Trading
◦ Received approval to list stocks in 2017
◦ Provides a fairly simple API to get stock quotes
6
Reading IEX REST API
• Most programming languages provide a framework to read web data
◦ Usually called HttpClient
◦ We will discuss Http in more detail in the OSI module
◦ https://
docs.microsoft.com/en-us/dotnet/api/system.net.http.httpclient?view=net
ramework-4.7.2
• Create a new Controller
◦ Name it as IEXTradingController (or similar)
7
Reading IEX REST API
public class IEXTradingController : Controller
{
HttpClient httpClient;
public IEXTradingController()
{
httpClient = new HttpClient();
httpClient.DefaultRequestHeaders.Accept.Clear();
httpClient.DefaultRequestHeaders.Accept.Add(new
System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/jso
n"));
}
…
}
8
Using the HttpClient
• In the Index action method
HttpResponseMessage response =
httpClient.GetAsync(IEXTrading_API_PATH).GetAwaiter()
.GetResult();
9
HttpResponseMessage
• Framework object to
read the Http response
from the server
◦ Use a breakpoint to
view the response from
the IEXTrading API
◦ There is information we
need
◦ And some additional
protocol overhead
◦ We can use appropriate
reader methods to retrieve
the content we need
10
Reading the Http
response
string charts = "";
if (response.IsSuccessStatusCode)
{
charts = response
.Content
.ReadAsStringAsync()
.GetAwaiter()
.GetResult();
}
11
Parsing the charts Json
string
• The C# approach is to first parse Json objects as regular objects
◦ Make sure your Models file has the following classes
◦ ChartRoot
◦ Equity
◦ Company
◦ These class definitions correspond to the Json objects returned by the API
◦ We will shortly see how to create these class definitions
12
Parsing the charts Json
string
if (!charts.Equals(""))
{
ChartRoot root =
JsonConvert.DeserializeObject<ChartRoot>(charts,
new
JsonSerializerSettings { NullValueHandling =
NullValueHandling.Ignore });
Equities = root.chart.ToList();
}
13
Closing loose ends
• The IEXTrading API does not populate the symbol field
◦ So, we need to populate it
14
Creating C# object
definitions from Json
string
• The Visual Studio editor can help you create object definitions
◦ Also, some web sites can do the same
◦ E.g. http://json2csharp.com/
15
Implementation in
reference application
• The reference application has this method as
◦ Infrastructure/IEXTradingHandler/IEXHandler.cs/GetChart
16
Saving the data to the
database
• We have seen how to save data to the database
◦ The reference application uses the same methods
◦ And some supporting objects to simplify the UI
17
Retrieving symbols
public IActionResult Symbols()
{
IEXHandler webHandler = new IEXHandler();
List<Company> companies = webHandler.GetSymbols();
return View(companies);
}
18
Saving symbols to the
database
• To keep things simple, retrieved symbols are saved to a temp object
◦ A representative sample is shown to users
◦ A button is provided to save all symbols
• Symbols.cshtml view
@model IEnumerable<IEXTrading.Models.Company>
19
Saving symbols to the
database
• TempData is available for the round trip
◦ Controller response → View → User response
◦ Hence a convenient simple mechanism to save data for later use
◦ In the application, used to save all available symbols
◦ Should have worked without serialization, but does not seem to
• Recall
◦ Companies saved to TempData as
TempData["Companies"] = JsonConvert.SerializeObject(companies);
20
Saving companies
foreach (Company company in companies)
{
//Database will give PK constraint violation error when trying to insert record with existing PK.
//So add company only if it doesnt exist, check existence using symbol (PK)
{
dbContext.Companies.Add(company);
}
}
dbContext.SaveChanges();
ViewBag.dbSuccessComp = 1;
return View("Symbols", companies);
21
Displaying quotes for
selected company
• Retrieving quotes is similar to retrieving symbols
◦ Get Json object with quotes for the selected symbol
◦ /Home/Chart
22
Chart.js in the layout
• In _Layout.cshtml
<head>
<link rel="stylesheet" href="~/css/site.css" />
<script type="text/javascript" src="~/js/Chart.min.js"></script>
</head>
23
Using chart.js
• Chart.js works with comma separated values
◦ The controller therefore needs to pass the appropriate values to the chart
script
◦ In chart.cshtml
<script>
getChart("@Model.Dates", "@Model.Prices", "@Model.Volumes", @Model.AvgPrice, @Model.AvgVolume);
</script>
◦ Preferred at the end of the page
◦ Ensures that the elements are rendered before the script is called
24
Passing values to
chart.js
• Linq and utility methods in the string class are helpful to get the values
quickly
◦ Pass these values to the view as part of the view model
25
Displaying the chart
• When using chart.js
◦ The page requires 3 elements
26
Chart.cshtml
• Look at chart.cshtml
1. @model IEXTrading.Models.ViewModel.CompaniesEquities
◦ The data is passed as part of the view model
◦ This model aggregates some entities and other needed values for the page
<div>
<canvas id="myChart" height="500" width="800"></canvas>
</div>
3. The script, calling the method which will display the chart
<script>
getChart("@Model.Dates", "@Model.Prices", "@Model.Volumes",
@Model.AvgPrice, @Model.AvgVolume);
</script>
27
Using chart.js
• Let’s start with a simple chart
◦ Add the following method to site.js
◦ Also, change call in chart.cshtml from getChart to getChart1
28
Refining the chart
• We can progressively update the chart method
◦ Add the second data series
◦ To display volume
◦ Add colors
◦ Add series labels
◦ Add annotations
29
Next steps
• Deploy to Azure
◦ https://azure.microsoft.com/en-us/free/students/
◦ Should primarily just require a change of the database connection string
30
Summary
• Background
• Code first components
• Entity framework example
• Loose ends
◦ Constraints - Fluent API and Data Annotations
◦ Connection strings - Database selection
◦ Migrations
◦ LINQ
31