A Stock Portfolio using Angular 6 : Routing

Hashtags

Routing is a cornerstone of single page applications (SPA’s). In SPA’s, a single page is loaded and the application resides within it. Re-loading the page or navigating to a new page or url is a no-no.Keeping the url static for the lifetime of the SPA is equally bad. Static urls don’t allow the web browser to collect history. Without history the web browser’s back button will just go to whatever site you visited previously – even if you spent 10 minutes judiciously navigating around the SPA. Bookmarks will become meaningless as well.

The Hash

So changing the url is mostly bad. A way around this is using hashes (#) in the URL Path. Hashes were initially used to navigate within a page to different anchor tags ( <a/> ) on the same page. They don’t cause a page refresh and are collected in the web browser’s history. A good example is a page that has a table of contents in the header. Clicking the hyperlinks in the table of contents scrolls down to that particular section on the page which is tagged with anchor. Adding ( or removing ) hashes to the URL does not cause the page to refresh.

This doesn’t cause a page refresh :

http://www.myapplication.com/quote#addnews

…this does :

http://www.myapplication.com/quote/addnews

In general, routing in a SPA leverages URL hashes. Navigating to different parts of the application changes the page’s URL by manipulating hashes.

Routing in Angular

In Angular, Routing loads a Component given a URL Path. This was my first stab at a Routing Table for the Stock Portfolio Application.

const appRoutes: Routes = [

  { path: 'quote', component: TickerComponent },
  { path: 'quote/:id', component: TickerComponent,
    children:[
      { path: 'details', component: TickerContainerComponent},       
      { path: 'addNews', component: TickerNewsAddComponent}, 
      { path: 'addSymbol', component: TickerAddComponent},       
    ] },
  { path: '', redirectTo: '/quote', pathMatch: 'full'}
];

So, ../quote/msft will load the TickerComponent with ticker info for Microsoft.

And the “Child Route” ../quote/msft/details will load the TickerContainerComponent as a child element of the TickerComponent.

Child Routes

Child routes allow you to display a child component within a parent component based upon the URL. Typically, the Application component template contains a <router-outlet> directive that displays the initial Component. Parent Components follow a similar pattern. They will likewise have a <router-outlet> directive in which their child component gets loaded.

To clarify I should point out that the ultimate routing table that I ended up using for the Stock Portfolio does not use child routes. I just wanted to give a quick overview of them here as well, I almost used them.

The Routing Module

This is what the Routing Module ( minus the Routing Table ) looks like :

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { APP_BASE_HREF} from '@angular/common';

import { TickerComponent } from './components/ticker/ticker.component';
import { TickerAddComponent } from './components/ticker-add/ticker-add.component';
import { TickerNewsAddComponent } from './components/ticker-news-add/ticker-news-add.component';
import { TickerContainerComponent } from './components/ticker-container/ticker-container.component';

const appRoutes: Routes = [
	/* Routing Table */
];

@NgModule({
 providers: [
    {provide: APP_BASE_HREF, useValue: '/stockapp'}
  ],

  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}


Make sure that you import all of the Components that are loaded by the URL Paths into the Module. The router needs to know about the Components it should load.

What is APP_BASE_HREF?

After migrating routing to a Module I kept getting an error when running my unit tests for the “root” AppComponent:

“Please provide a value for the APP_BASE_HREF token or add a base element to the document.”

Strangely, the error was NOT occuring at runtime. To fix the error I followed these instructions on the Angular website. The router needs to know which “base url” to use when navigating to your routes.

Why a Separate Module?

Best practices dictate that routing should be kept in a separate module from the rest of the application. Another best practices should also be to explain why doing something as such is a best practice. Unfortunately, the official Angular documentation dictates it as such and glosses over the “why”. I’ll take a stab at it :

  1. Seperation of Concerns. Components shouldn’t care what URL invoked them. They should be stand-alone and isolated from such things.
  2. Strategy Pattern. Keeping routing in a seperate module makes it easier to change which URLs launch which Components.

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.

That’s it for now

Please let me know if you have any questions or comments. If you want to start from the beginning please go here.

Teaching My Girls to Program – Lesson One: Programming, Python, and Minecraft Pi

kids-lesson-1-final

Introduction

So, I really want my girls ( 7 and 9 ) to learn how to program. At the very least it will make them more comfortable with computers. At best it will spark their imaginative spirit and inspire them to create something cool. Just last weekend we were going to play a board game together before we discovered the spinner missing. I told them that we could write a program to mimic the spinner on a computer. My oldest immediately got excited – and so did I.

I’ve taken my girls to STEM fairs and realized very quickly that although there are countless after school programs willing to teach programming they all change exorbitant rates. Being a software engineer ( and a “frugal” one at that ) I decided that the only way my girls were going to learn is if I teach them myself.

This is my first of lesson on how to teach my girls to program.

Enjoy!

Table of Contents

  1. What is Programming?

    1. Machine Language
    2. Programming Languages
      1. Python
  2. The Raspberry Pi

    1. Operating Systems
    2. Getting Started w/ the Raspberry Pi

      1. Stuff you need
  3. Hello World

    1. The Python Shell
  4. Hello “You”

    1. What is a Variable?
    2. What is a Loop?
    3. Hello “You”, Hello “You”, …
  5. Minecraft Pi

    1. What is the Terminal?
    2. Installing Minecraft Pi

      1. What is sudo?
    3. Hello Minecraft

      1. What is a Library?
      2. What is a Function?
    4. Minecraft Pi Keyboard Controls
    5. Teleporting in Minecraft

      1. The X, Y, and Z Coordinate System
      2. Getting Our Coordinates in Minecraft
      3. Teleporting “Up”
      4. Teleporting “Sideways”
    6. Creating Blocks in Minecraft
    7. Creating a Wall in Minecraft

What is Programming?

Today I’m going to teach you how to be programmers. Programmers create “programs” that are run on “computers”.

Some examples of programs are :

  1. Games : All of the games that you play are programs – Minecraft, Pokemon Go, Roblox, …
  2. Singing birthday cards : A programmer wrote a program to play “Happy Birthday” when you open a birthday card.
  3. Wrist watches : Even something as simple as a wrist watch has a program that keeps track of and display the time.

Machine Language

Computers don’t understand your language – they understand machine language. Machine language looks like a bunch of numbers and letters. This program is written using a machine language. It tells the computer to write “Hello World” :

Programming Languages

Programmers can’t read or write machine language. Instead, they use a Programming Language to tell a computer what to do. A programming languages is a special languages that you can understand that is “translated” to machine language. Translating a program written in a programming language to machine language is called compiling.

Programming Languages are not spoken like English – they are written. We are going to be writting our programs using the Python programming language. Here’s what a very simple program written in the Python langauge looks likes :

	
			print("This line will be printed.")
			

This program writes “This line will be printed” to the screen. Pretty simple, right? Python isn’t the only programming language. There are many many others and just like the languages that we speak they all look a little different.

The Raspberry Pi

This is the Raspberry Pi – the computer that we’ll be creating programs for.

The Raspberry Pi is a cheap yet powerful computer that runs an operating system called “Rasbian Linux”.

Operating Systems

An operating system is special type of program upon which other programs can be run. Usually a programmer will create a program that runs on an operating system rather than directly on the computer itself. Why? To save time. An operating system can already do a bunch of things that a programmer might want to do. For example : it “knows” how to listen to your keyboard and your mouse. As a programmer why would you want to create another program to do this?

Getting Started

To get started you will need :

The first step is to get the Rasbian Operating System on the Micro SD Card. Follow these instruction to do that. After Raspbian has been copied onto the Micro SD Card you can slide it into the slot on the Raspberry Pi and power it on.

The Rasbian OS will lead you through some initial setup stuff. After that we can finally get coding …

Hello World

As a programmer your first application when learning a programming langauge is “Hello World”. What does it do? It prints “Hello World” onto the monitor. That’s it. Drum roll. Boring? Maybe. But as simple as it may seem its a good test to make sure everything is working properly before getting your hands dirty with anything more complicated.

  1. Start Python. Click on the “Raspberry” button at the top-right of your screen. Select “Programming” and “Python 3”.

  2. The Python Shell. This will bring up the Python Shell. You can run Python programs through the shell. The >>> is called a cursor. You can write stuff on the cursor in the Python language to tell the computer to do something cool.

  3. Create a Program File. Programs can be very long. Having to type a program in by hand every time you run it is boring. If I had to do this every time I wouldn’t be a programmer! Fortunately, the Python Shell allows you to to create a “file”. The Python Shell will “read” from this file when running your program. On the Python Shell click “File” and “New File”.

  4. The Text Editor. You will create your program “file” in a text editor.

  5. Type in the Program. Type this into the text editor :

    				print("Hello World!")
    				

  6. Save the Program. Now click “File” and “Save As” to save your first program as a file.

  7. Give the Program File a Name. You need to give your program file a name. We’re going to call it “hello-world.py”. Why the “.py”? It’s called an extension. File extensions tell the operating system ( and us programmers ) what a file is used for. Python programs always have the extension “.py”.

  8. Run the Program. Now that you have a program “file” you can run it in the Python Shell by clicking “Run” and selecting “Run Module”.

  9. Hello World! In you see “Hello World” in the Python Shell – congratulations! You just created your first program using Python!

Pretty boring, right? Programming langauges like Python would be pretty useless if all they did was say “Hello World”. Let’s try something a little different.

Hello “You”

Let’s create another program. This program will allows you to type in your name and it will write “Hello You!”. And by by “you” I mean your name…

Create a new file using the Python Shell again by following Steps 3-7.

For Step 5 type in this :

		print("Enter your name:")
		myName = input()
	 	print("Hello " + myName)
		

For Step 7 save the file as “hello-name.py”.

Now, if you click “Run” and “Run Module” from the Python Shell it will ask you for your name. If you type in your name and click the ENTER button it will write out “Hello, Scott”.

So how does this work?

input() “reads” whatever you type with the keyboard. When you click the ENTER button whatever you typed is saved to a variable called myName.

Variables

A variable is a way of storing stuff in a program that you want to use again. You can store sentences ( also known as “strings” in programmer-speak ) in variables as well as a bunch of other things. Without variables the program would have to keep asking you for your name.

print() “writes” the variable to the screen. If you typed “Scott” it will write “Scott”.

Still pretty boring, right? One more thing before we move on to something way cooler. Loops.

Loops

What if I wanted to do something over and over again?

Create a new file using the Python Shell again by following Steps 3-7.

For Step 5 type in this :

			print("Enter your name :")
			myName = input()
			
			counter = 0
			 
			while counter < 100:
			    print("Hello " + myName)
			    counter = counter + 1
			

For Step 7 save the file as “hello-name-100.py”.

Now, if you click “Run” and “Run Module” in the Python Shell it will ask you for your name. If you type in your name and click the ENTER button it will do write out “Hello, Scott” 100 times.

Can you guess why this happened?

while causes this code to repeat over and over again.

			print("Hello " + myName)
			counter = counter + 1
			

counter is a variable. It is set to 0 at the beginning of the program – before the while loop starts.

			counter = 0
			

Each time the code is repeated 1 is added to the counter variable. So, the first time counter is 0. The next time it’s 1. The next time it’s 2…

			counter = counter + 1
			

The code will be run again and again as long as the counter variable is less than 100.

Minecraft Pi

The Rasbian Operating System running on the Rasperry Pi supports a “special” version of Minecraft that you can program using the Python programming language. First things first – we need to install it! You will need to use the Terminal ( also Command Line, Command Prompt ) to install Minecraft.

The Terminal

The terminal allows a programmer to type in commands to tell the computer to do things. Before there were laptops, tablets, phones, and home computers with fancy touch screens and pretty buttons there was only the terminal. The terminal originally wasn’t even a computer. It was just a screen and a keyboard that would “talk to” a computer. The computer could be in the next room or even in another country.

The terminal that we are going to use to install Minecraft Pi can be run by clicking the black box icon on the top-left of the screen. This terminal talks directly to your Raspberry Pi.

Installing Minecraft

To install Minecraft Pi you will need to type the following in the Terminal:

  1. Check for updates for stuff that is already installed. Type in “sudo apt-get update” and click the ENTER button.

  2. Install Minecraft Pi. Type in “sudo apt-get install minecraft-pi” and click the ENTER button.

Sudo

You’re probably wondering what all that stuff you typed into the Terminal means. Well, sudo is one of many commands that you can use. It means “superuser do”. A “super user” is someone who has the highest permissions on the computer. So, you’re telling the computer to do something as the “super” user. Why? Well the next command is apt-get. apt-get is a another command that installs stuff onto the computer. Only “super” users have permissions to “do” this.

Hello, Minecraft

Now that we have Minecraft Pi installed can you guess what we need to next? That’s right! We’re going to write a another “Hello World” program to make sure that everything works properly.

  1. Start Minecraft Pi. The first thing we need to do is to start Minecraft Pi. Click on the Raspberry Button, select “Games”, and click on “Minecraft Pi”.

  2. Start a Game. Next, from the Minecraft Pi menu click on “Start Game” and “Create new” to start a new game.

  3. Start the Python Shell. Next we need to start the Python Shell. If you move your mouse you will notice that it is kind of “glued” to Minecraft. If you click the “Tab” button Minecraft will “let go” of it and allow you to do other things. This is called toggling. You will need to toggle the mouse on and off in Minecraft to play with the Python Shell. Go ahead an click the “Tab” button to free up the mouse. This will allow you to Click on the “Raspberry” button at the top-right of your screen. Select “Programming” and “Python 3”.

  4. Create a Program File. Next let’s create a file to store our program so we don’t have to re-write it each time. On the Python Shell click “File” and “New File”.

  5. Type in the Program and Save. Next, type this into the text editor. When you’re done click “File” and “Save As” and save your program as “hello-minecraft.py”.

    						from mcpi import minecraft
    					
    						mc = minecraft.Minecraft.create()
    					
    						mc.postToChat("Hello world!")
    					

  6. Run the Program. Finally, click “Run” and select “Run Module” in the Text Editor. You should see “Hello World” displayed in Minecraft.

Libraries

In order for you to do stuff in Minecraft using Python you need to import a library called “mcpi”.

				from mcpi import minecraft	
			

In real life a library is a building where a bunch of books are stored. You can check books out and read them to learn new things. In programming a library is a bunch of applications and code that is kept together. The programs that you write can import the stuff stored in a library. The “mcpi” library has a bunch of code that allows you to program Minecraft through the Python Shell. We’re going to use this code in all of our Minecraft programs. Creating the “mcpi” library on our own would take a lot of time. You can look through the library here. That’s a lot of code, right? See? We’re being smart by reusing stuff that is already written

We can program Minecraft Pi using the “mc” variable that we get from the “mcpi” library.

				from mcpi import minecraft
			
				mc = minecraft.Minecraft.create()				
			

Functions

Can you guess what postToChat() does? It’s called a function and it prints “Hello World” to the Minecraft screen. Functions do different things – this one prints a sentence to the screen. The “mc” variable that we imported from the “mcpi” library has a bunch of useful functions that we can use to do cool stuff in Minecraft Pi.

		
				mc.postToChat("Hello world!")
			

Minecraft Pi Controls

I am going to assume that you have played Minecraft before. The Pi version isn’t much different other than it is lacking some features. The mouse moves you character’s “head” around. To move your character ( and more ) you will need to use the keyboard as follows:

Key Action
W Forward
A Left
S Backward
D Right
E Inventory
Space Jump
Double Space Fly / Fall
ESC Pause / Game Menu
Tab Release/Toggle Mouse

Teleporting

For our next program let’s “teleport” – or move ourselves somewhere else in the Minecraft world. In order to do this we first need to know where we are.

The X, Y, and Z Coordinates

Our location in the Minecraft world – and any first-person video game for that matter is made up of three numbers identified by the letters – X, Y, and Z. These are called coordinates. If you think of the Minecraft world as a checkerboard – the X and Y coordinates are used to determine which “box” you are in.

What about the Z coordinate? Well, if you go up a mountain the z-coordinate will increase. So, instead of a “checkerboard” think of a “Rubik’s Cube”. The z-coordinate is how “high” ( or “low” ) a box is in the cube. Make sense?

Getting Our Coordinates

In our previous program we used the “mc” variable from the “mcpi” library to write something to the screen. We can also use it to tell us where we are in the Minecraft World. Assuming that you still have the Python Shell and Minecraft Pi running let’s go straight to Step 4 and create a new program.

For Step 5 type the following into the Text Editor and save it as “get-position-minecraft.py”.

				from mcpi import minecraft
				
				mc = minecraft.Minecraft.create()
				
				pos = mc.player.getPos()
				
				mc.postToChat(pos)
				

Now run the application like you did in Step 6 above. Your position in the Minecraft World will be displayed as three numbers seperated by commas. The middle number is the z-coordinate, or how “high” you are. The other two numbers are the x and y coordinates – or where you are on the “checkerboard”.

Teleport Up

Now let’s teleport. Let’s create another application called “teleport-minecraft.py”. I’m not going to go through the steps again as we should be “pros” at this by now. The program should look like this:

				from mcpi import minecraft
				
				mc = minecraft.Minecraft.create()
				
				pos = mc.player.getPos()
				
				mc.postToChat(pos)
				
				mc.player.setPos(pos.x, 20, pos.y)
				

What happened? You should have fallen from the sky? How far? 20. The setPos() function allows you to set your x, y, and z coordinates in the Minecraft World. You are calling the getPos() function to get your position in the Minecraft World and setting it to a variable called pos. The pos variable stores three numbers – your x, y, and z coordinates in Minecraft. You can use these coordinates to set your position.

Teleport Sideways

Now change the last line in your program, save it, and run it again :

				from mcpi import minecraft
				
				mc = minecraft.Minecraft.create()
				
				pos = mc.player.getPos()
				
				mc.postToChat(pos)
				
				mc.player.setPos(pos.x+10, pos.z, pos.y)
				

Your position in the Minecraft World should change by 10 – but “sideways” this time. Remember, the x and y coordinates are used to determine your location on a flat “checkerboard”.

Create a Block

Now that we know a little about coordinates let’s write one last program. Let’s create a block in front of us. Assuming that you still have the Python Shell and Minecraft Pi running let’s go straight to Step 4 and create a new program.

Type the following into the Text Editor and save it as “create-a-brick-minecraft.py”.

			from mcpi import minecraft
			
			mc = minecraft.Minecraft.create()
			
			x, y, z = mc.player.getPos()
			mc.setBlock(x+1, y, z, 1)

			

Now select “Run” and “Run Module”. Poof! a block will appear in front of you. Okay, maybe not right in front of you. I had to use my mouse to look around for it – but rest assured it will very close to you. How close? 1 unit away. We used the setBlock() function to do this.

You can use the setBlock() function to create blocks in mid-air as well by changing the z-coordinate. Remember the z-coordinate is “height” or how far up something is on the “Rubik’s Cube”.

A Wall of Blocks using a Loop

Single blocks are so boring. Let’s use our knowledge of loops from earlier to create an entire wall of blocks. Remember, you can use a loop to repeat the same code over and over again.

Assuming that you still have the Python Shell and Minecraft Pi running let’s go straight to Step 4 and create a new program.

Type the following into the Text Editor and save it as “create-a-wall-minecraft.py”.

				from mcpi import minecraft
				
				mc = minecraft.Minecraft.create()
				
				x, y, z = mc.player.getPos()

				counter = 0

				while counter < 100:
					mc.setBlock(x+counter, y, z, 1)
					counter = counter + 1
				

Now select “Run” and “Run Module”. Cool wall, huh? We’re using the setBlock() function and a loop to place blocks in a line. Each time the loop runs it’s code it creats a block 1 space in front of the prior block.

That’s All Folks…

Please let me know if this lesson was helpful. And stay tuned … I plan to create more lessons like this one as time permits.

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.

Next up?

Hooking up Basic Routing

Or, start from the beginning.

A Stock Portfolio using Angular 6 : Requirements, Components, and Mock-ups

The requirements presented to me for the coding challenge were pretty sparse :

  1. Create an application for managing “news” articles for a user’s stock portfolio.
  2. It needs to be responsive so it displays nicely on a variety of devices.

Naturally, I had to add my own requirements :

  1. The users’ stock portfolio and news needs to be persistent; a user should not have to re-create their portfolio every time they use the application.
  2. Stock data for the users’ portfolio needs to be refreshed in real-time.
  3. The user should be able to view historical data for a stock in a chart.

Why Components are Awesome

The cool thing about modern web frameworks is that they force you to compartmentalize your stuff into reusable widgets. So, instead of a huge monolithic Javascript file you have a bunch of self-enclosed “widgets”. Each “widget” performs a specific task and has it’s own javascript, html, css, and tests. A “widget” can be used for fetching data or displaying a particular section of markup. This a huge boon when working on large projects on a large team as it allows you to break up the work more easily.

Stock Portfolio Components

I broke up the application into 8 Components: The NavigationComponent will always be displayed in the header. Clicking on “Add Symbols” will bring up the TickerAddComponent which will allow the user to add stock symbols. Clicking on “Add News” will bring up the TickerNewsAddComponent which will allow the user to add news for a stock symbol. The TickerComponent will be displayed on the “home” page. Clicking on a stock symbol will bring up the TickerContainerComponent which hosts the TickerChartComponent, TickerDetailsComponent, and TickerNewsComponent.

Mock-up

This is a mock-up of what the Components looks like as well as their interaction.

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.

Next up?

Finding a financial web service.

Or, start from the beginning

A Stock Portfolio using Angular 6 : Challenge Accepted

The Interview Coding Challenge

I’m interviewing right now. One thing that has changed dramatically since I last interviewed is …. the dreaded “Coding Challenge”. What used to consist of a quick whiteboarding excercise has now progressed into the design and development of an entire application. The good news is that employers typically allow you to do it from the comfort of your own home and at your own pace. The bad news is that the challenges can be quite elaborate.

A Stock Portfolio using Angular 6

One of the coding challenges that I was presented with by an employer was to develop a “stock portfolio” application that would allow you to enter stock tickers and news articles. The rules were vague: I just needed to use a newer Javascript Framework ( React, Angular, Vue, etc … ) as well as a Presentation Framework ( Angular Material, Bootstrap, etc… ).

I accepted the challenge, started working on it, and then quickly realized how much cooler the stock portfolio application could be with some additional features. I coul pull in Local Storage, a Live Stock Feed, Charting! Professionally this would be taboo – a bad case of what is know as scope creep. However, being unemployed with some extra time on my hands I felt it was an opportunity to showcase something pretty cool.

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.

Next Up?

Requirements, Components, and Mock-ups.

Drupal 7: Allow a Theme to use a newer version of jQuery

Recently I have started working with Drupal 7. Drupal is a CMS built on top of PHP, MySQL, and jQuery. In Drupal, a website layout is managed by a Theme. Boostrap Themes can be plugged in – or, you can roll your own. At Qualcomm, my group created a custom theme that required a newer version of JQuery (1.11) than Drupal 7 provided (1.4).

Initially, our custom theme loaded the newer version of jQuery. Drupal 7 allows this as it uses jQuery’s .noConflict() function. .noConflict() is frees up jQuery’s $ alias for other frameworks to use. In this case the “other” framework … was just a newer version of jQuery.

There were two problems with this …

  1. We were loading jQuery TWICE. When visiting the site Drupal would load jQuery 1.4 – and then our custom theme would load jQuery 1.11.
  2. We discovered that any jQuery plugins loaded by Drupal for jQuery 1.4 needed to be reloaded by our custom theme after it loaded jQuery 1.11.
  3. I found this out the hard way. I kept getting TypeError: $(…).once is not a function” errors. This was because our custom theme required the jquery.once.js plugin. This plugin was initially loaded by Drupal when it loaded JQuery 1.4 – but subsequentally wiped out by our custom theme’s newer JQuery.

To fix this we did the following …

  1. We added the desired version of JQuery to our custom theme :

    \sites\all\themes\[custom_theme]\js\jquery-x.x.x.js

  2. We added this statement to our custom themes template.php :

    So, in this file :

    \sites\all\themes\[custom_theme]\template.php

    We added this code :

    		function [custom_theme]_js_alter(&$javascript) {
    			$javascript['misc/jquery.js']['data'] = drupal_get_path('theme', '[custom_theme]') . '/js/jquery-x.x.x.js';
    		}
    		

    This will instruct Drupal to swap out the version of jQuery (1.4) it uses with the version that resides in your custom theme. :

  3. We encapsulated any javascript used by our custom theme into a Javascript module and injected jQuery into it.

    For example :

    Behavior = (function($){
    
    	$( document ).ready(function() {
    
    	});
    
    	// Public Interface.
    	return {
    
    		myFunc : function () {
    
    		}
    	}  
    }(jQuery));	
    

    Notice that jQuery is injected rather than its $ alias. As I mentioned earlier this is because Drupal invokes jQuery’s .noConflict() function. To tidy things up a bit I inject jQuery as $.

  4. We stopped our custom theme from loading its own version of jQuery. It is no longer necessary as (1) and (2) above will force Drupal to use whatever version of jQuery you desire.

    So in this file :

    sites/all/themes/[custom_theme]/[custom_theme].info

    We removed this :

    			
    			scripts[] = 'js/jquery-x.x.x.js' <=== comment this out.
    			

I Hope this helps! Let me know if you have any questions!

Build your own Raspberry Pi Arcade Cabinet

About six months ago I read about a very cool project called RetroPie. RetroPie allows you to play classic arcade and console games on a Raspberry Pi. It is a distribution of emulators for Mame, Nintendo, Genesis, Neo Geo, etc… that run on the Raspberry Pi.

Being the nerd I am I quickly purchased a Raspberry PI 2 and a USB Super Nintendo Controller to see if I could make it work. After downloading some game ROMS off of the internet and following some instructions I was able to play my favorite video games of yesteryear. I bought a second controller and unleashed my 4 and 6 year old daughters on Bubble Bobble and the original Super Mario Brothers and Sonic the Hedgehog. Life was good.

…and then I turned 40 and had a rush of nostalgia. I realized what I needed to do to complete the classic video game experience. I needed to build a cabinet.

Kits and Custom Builds

Due to budgetary constraints and the fact that I didn’t want a enormous arcade cabinet clogging my garage I decided to go small. I found numerous custom builds on the internet such as these by Rasmus Kønig Sørensen. And this, this, and this from Instructables. There are kits available as well: Haruman Customs has cabinets of all shapes and sizes, Game Room Solutions has a nice configurable 2 player tabletop. The PortaPi and the Picade are two more well designed one-player kits.

My Build

I decided to go single-player and retrofit a used iCade to reduce cost, size, and complexity. My build was based on this tutorial from Instructables. I did take some creative liberties, however …

First, I used a single 12v/5v switching power supply to power everything. I did this because I wanted a single on/off switch and I didn’t want a bunch of ac/dc adapters clutering the inside of the already small iCade cabinet. The LCD screen, coin slot LED, and marquee LED are all 12v. The Raspberry PI and sound amplifier are both 5v. The downside of using a single power supply is the sound produced by the amplifier generated a lot of feedback. After reading a few articles on ground loops I solved the problem by installing one of these.

Second, I built in an LED back-lit marquee. An arcade cabinet just seemed naked without one. I also enclosed two small 2″ stereo speakers in the marquee box.

Third, I diverted the Raspberry PI’s sound to a USB sound adapter to bypass the horrendous static that is generated through the standard 3.5mm jack. I used this adapter. Instructions on how to configure the Raspberry PI to use a USB sound can be found here.

Fourth, I used threaded wood inserts throughout the cabinet so that the whole thing can be “easily” disassembled and reassembled. Ideally, this will allow a bigger screen to be swapped in. Someday.

Fifth, I exposed a USB port and volume control on the back cover plate. I didn’t want to have to crack open the case every time I needed to plug in a keyboard or external controller.

Last is the cabinet art. Most of the artwork was pulled from a Nintendo Super Smash Brothers poster that I split in half and modified. The other stuff I ripped liberally from the Internet. I used Gimp to pull everything together and used this cool font to add a nice 80’s/90’s arcade vibe. My sister-in-law works for HP and printed the artwork for me for free. Thanks, Jayme!

Cost

Expect to spend between $250 and $300 for a similar build. That’s assuming you have all of the necessary tools, too. As far as power tools you will need a circular saw, jig saw, drill, and a soldering iron. You will also need a wide assortment of hand tools as well including allen wrenches, screwdrivers, wood files, and clamps.

Component Breakdown

Here’s a pretty good breakdown of the components, where you can find them (typically Ebay), and how much they cost. Most of my stuff shipped from China. I was half expecting some dudes in black suits to show up at my door to question me about all of the little packages that trickled in from China during the project. Fortunately, my fears never manifested.

$36.99 Raspberry PI 2
$39.75 Used iCade Cabinet
$48.00 8″ LCD Display 1027×769; HJ080IA-01E
$14.13 30w 5v/12v switching power supply
$5.48 5v amplifier
$6.29 2″ 4ohm 3w speakers
$8.99 3.5mm Ground Loop Isolator
$7.95 USB Sound Adapter
$8.99 Zero Delay Aracde USB Encoder
$1.70 12v LED Marquee Light
$9.95 Power switch
$2.50 7″ USB 2.0 Male to Female Extender
$1.79 USB 2.0 Adapter for back panel
$2.11 10x 12v DC Pigtails (for wiring LCD display)
$3.97 Screw Head Covers (for screen)
$6.99 Super Nintendo USB Controller
Free Plexiglass Sheet; Leftover gifted to me by neighbor.
3/8″ plywood; Used for speaker tray, LCD frame, and back panel
1/2″ furniture board; Used for bottom of arcade cabinet
Spray can of primer
Spray can of satin black paint
Epoxy; To set threaded wood inserts (and fix stripped ones in the used iCade cabinet)
Double Sided Mountin Tape; To adhere stuff where screws just wouldn’t work
22 gauge wire (for 5v)
18 gauge wire (for 12v and AC)
Assorted M4 screws, nuts, and bolts
Assorted wiring connectors

Conclusion

In retrospect it would have been a lot cheaper and easier to buy a kit. But where is the fun in that? Now if I can just get the quarter slot to work I can start making money …

Please let me know if you have any questions