A Stock Portfolio using Angular 6 : Finding a Financial Web Service

I want live data form my stock portfolio application. Alpha Vantage provides a “free” REST service that supports a plethora of calls for retreiving stock information. If you go here you can make calls against their services. To make calls from your own application however you are going to need to generate your own unique API Key.

CORS

The cool thing about Alpha Advantage is that their REST services are CORS-enabled. CORS-enabled services can be called directly from a web browser without being blocked by cross-domain policies. Typically, a web browser will not allow you to GET data from a domain other then the one your application is running on. So, http://www.mysite.com/myapp can not make calls to http://www.yoursite/yourservice. CORS includes a special headers in the REST HTTP Request, “Access-Control-Allow-Origin” that circumvents this restriction. Prior to CORS and it’s predecessor ( JSONP) I would of had to expose a proxy service on the web application running the stock portfolio application. The proxy service wouldn’t be restricted by cross-domain policies as it would be running on the server. The web-browser would call the proxy service which would in turn call the service residing on another domain.

To get a quote for a stock we’re going to make this REST call against Alpha Vantage. This is what the result looks like :

{
   "Global Quote": {
      "01. symbol": "MSFT",
      "02. open": "99.3000",
      "03. high": "99.7500",
      "04. low": "96.4000",
      "05. price": "99.2400",
      "06. volume": "33233175",
      "07. latest trading day": "2018-12-27",
      "08. previous close": "100.5600",
      "09. change": "-1.3200",
     "10. change percent": "-1.3126%"
   }
}

A Strongly-Typed Quote Model

Although we could store the quote as-is it would be a better idea to create a Strongly-Typed Model for it using Typescript. By using a Strongly-Typed Model :

• The signature of the result will be known to downstream consumers – eliminating guesswork and confusion.
• Typescript provides validation support. The compiler will notify you if you’re trying to access field on the Model that does not exist.

This is what my Quote Model looks like :

export class Quote {

   constructor ( symbol: string, open: number, high: number, low: number, price: number, volume: number, latestTradingDay: string, previousClose: number, change: number, changePercent: number ) {
      this.symbol = symbol;
      this.open = open;
      this.high = high;
      this.low = low;
      this.price = price;
      this.volume = volume;
      this.latestTradingDay = latestTradingDay;
      this.previousClose = previousClose;
      this.change = change;
      this.changePercent = changePercent;
   }

   symbol: string; 
   open: number;
   high: number;
   low: number;
   price: number;
   volume: number;
   latestTradingDay: string;
   previousClose: number;
   change: number;
   changePercent: number;
}

An Angular Service

I created a Ticker Service to fetch the quote from Alpha Vantage’s REST service, wrap it up as a Quote object, and then return it. As REST service calls are asynchoronous the Quote is returned as an Observable. The Ticker Service returns the Observable immediately – even if the REST call hasn’t completed :

...
export class TickerService {

...

getQuote(ticker: string) : Observable {

   let url = ...

   return this.http.get(url).pipe(map( res => new Quote(
      res["Global Quote"]["01. symbol"],
      res["Global Quote"]["02. open"],
      res["Global Quote"]["03. high"],
      res["Global Quote"]["04. low"],
      res["Global Quote"]["05. price"],
      res["Global Quote"]["06. volume"],
      res["Global Quote"]["07. latest trading day"],
      res["Global Quote"]["08. previous close"],
      res["Global Quote"]["09. change"],
      res["Global Quote"]["08. change percent"]
   )));

   }
}

The consumer/client subscribes to the Observable – and waits. When the REST service data is finally fetched, “subscribe” is invoked along with a “data” object (the desired Quote). This code snippet is from the Ticker Service’s Unit Test

...
describe('TickerserviceService', () => {
...

   it('should return a quote (MSFT)', () => {
      const service: TickerService = TestBed.get(TickerService);
      service.getQuote("MSFT").subscribe( data => {
         expect(data.symbol == "MSFT");
      });
   });
});

In a hurry?

The finished source code is available on my GitHub repository.

The finished application is up-and-running on Heroku here. Be aware that it is running on a “free” development server so give it a minute or so to spool up.

Till next time!

-Scott

Next : Routing

Previous : Requirements, Components, and Mock-ups

---

#Angular6 #Angular #CodingChallenge #CORS #FrontEnd #Heroku #Bootstrap #AngularMaterial#Programming #SoftwareDevelopment #SoftwareEngineer #DrawnAndCoded