A Stock Portfolio using Angular 6 : Routing

Angular

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.

programming hashtags angular routing software development

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!

-Scott

Previous : Finding a Financial Web Service


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

Teaching My Girls to Program

Programming Minecraft Python Kids Comic
I couldn’t find a good illustration for my daddy/daughter programming project so I created my own. Minecraft, Raspberry Pi, Python, and daughters – what’s not to love?

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!

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.

Step 1 : Start Python

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

Step 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.

Step 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”.

Step 4 : The Text Editor

You will create your program “file” in a text editor.

Step 5 : Type in the Program

Type this into the text editor :

print("Hello World!")

Step 6 : Save the Program

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

Step 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”.

Step 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”.

Step 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:

Step 1 : Check for updates for stuff that is already installed.

Type in “sudo apt-get update” and click the ENTER button.

Step 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.

Step 1 : Start Minecraft Pi.

Step 2 : Start a Game.

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

Step 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”.

Step 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”.

Step 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!") 

Step 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:

KeyAction
WForward
ALeft
SBackward
DRight
EInventory
SpaceJump
Double SpaceFly / Fall
ESCPause / Game Menu
TabRelease/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”.

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.

-Scott


#ProgrammingWithKids #KidsProgramming #LearningPython #MinecraftPython #BeginningProgramming #TeachingMyGirlsToProgram #RaspberryPi #Minecraft #Programming #DrawnAndCoded

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

Angular

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

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

Angular

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.

Till next time!

-Scott

Next : Finding a financial web service

Previous : Challenge Accepted


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

A Stock Portfolio using Angular 6 : Challenge Accepted

Angular

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.

Till next time!

-Scott

Next : Requirements, Components, and Mock-ups.


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

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

Drupal CMS

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.

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(&amp;$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' &lt;=== comment this out.
    			

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

-Scott


#Drupal #Drupal7 #JQuery #Programming #SoftwareDevelopment #SoftwareEngineer #DrawnAndCoded

Running Handbrake in Ubuntu on a Windows 7 Host

HandBrake

I have kids that are now of Disney-watching age. They love their DVD’s but do not know how to take care of them. A DVD is a frisbee, coaster, and also just happens to play movies, too. To correct this I have been backing up their DVD’s to .mp4/.mv4 files and playing them instead.

Handbrake has been my go-to choice for backing up DRM-protected movies but I have had problems running it directly in Windows 7. For starters I cannot get the 64-bit version to run and the 32-bit version renders at an abysmal 7 frames per second.

I had a few hours of play time the other day and I decided to attack DVD backups from a different direction. I decided to try running Handbrake in Ubuntu (Linux) using Oracle’s Virtual Box on Windows 7. It took a while to piece together but these are my step-by-step instructions on how to configure the VM. Oh, and as it turns out Handbrake runs much much faster in Ubuntu …

Requirements:

  • 8 GB RAM (or more)
  • Windows 7 (or newer)
  • 20GB of free hard drive space
  • DVD-ROM Drive

Install Virtual Box

  1. Install Oracle VirtualBox. VirtualBox can be downloaded here. I am using VirtualBox 5.0.16 installed on a Windows 7 host computer for this walk through

Create Ubuntu Client on VirtualBox

  1. Download an .iso (disk image) of Ubuntu. I downloaded a copy of 64-bit Ubuntu Desktop 14.04 from here.
  2. Start VirtualBox; Click “New”; Select Type: Linux and Version: Ubuntu (64-bit)
    • Memory size should be at least 3000 MB
    • Virtual Hard Disk should be at least 20 GB
  3. Click “Start”
  4. Select .iso file from (1).
  5. Click “Start”.
  6. Follow the wizard to install Ubuntu.

Install Guest Additions

Guest additions will allow us to run Ubuntu full screen from within VirtualBox and share folders between Windows (host) and Ubuntu (Client).

  1. Select Devices -> “Insert Guest Additions CD Image” from the VirtualBox window. This will mount VirtualBox guest additions so that it might be installed into your Ubuntu client.
  2. Press CTRL+ALT+T to bring up a terminal.
cd /media/scott/VBOXADDITIONS_5.0.16_105871

Now, install guest additions.

sudo ./VBoxLinuxAdditions.run
  • Restart Ubuntu.
  • Ubuntu should now be able to run full screen. Goodbye tiny window.

    Enable shared folder

    Guest additions also allows you to share folder between your Windows Host and Ubuntu Client.

    1. Create a folder “C:\shared” in Windows (your host machine)
    2. Select Devices -> Shared Folders -> Shared Folder Settings from the VirtualBox window.
    3. Clicked “Shared Folders” in left menu.
    4. Click the Add Folder icon on the right margin.
    5. Select the location of the “shared” Windows folder for “Folder Path”.
    6. Set “Folder Name” to “shared”.
    7. Check “Auto-mount” and “Make Permanent”.
    8. Click “OK”.
    9. Press CTRL+ALT+T to bring up a terminal.
    cut -d: -f1 /etc/group
    

    Next, list which groups you are a member of; You shouldn’t see yourself.

    groups
    

    Finally, add your account to vboxsf shared folder group. “scott” is the account you will be logging into Ubuntu with.

    sudo usermod -a -G vboxsf scott
    
  • Restart Ubuntu.
  • The “shared” folder is now mounted as media/sf_shared.

    Configure DVD-ROM Passthrough

    This will enable Ubuntu to read from the hosts drive; Not doing this will result in region errors when reading from the drive.

    1. Shut down Ubuntu if it is running.
    2. In Oracle VM Virtual Box Manager Window right-click on “Ubuntu” in left pane and select “Settings”.
    3. Select “Storage” from the left pane.
    4. Select your DVD-ROM and click the “Passthrough” checkbox.
    5. Click “OK”.

    Install Handbrake

    1. Press CTRL+ALT+T to bring up a terminal.
    sudo add-apt-repository ppa:stebbins/handbrake-releases
    

    Next, get gets package info from internet.

    sudo apt-get update
    

    Finally, install handbrake gui and command-line interface.

    sudo apt-get install handbrake-gtk handbrake-cli
    

    Enable DVD decryption

    This installs libdvdcss, an open source library for decrypting DVD’s. These instructions are specific to Ubuntu 14.04 and might change.

    1. Press CTRL+ALT+T to bring up a terminal.
    sudo apt-get install libdvdread4
    

    Register libdvdcss

    sudo /usr/share/doc/libdvdread4/install-css.sh
    
  • Restart Ubuntu.
  • Handbrake should now be able to rip movies to your shared drive! Okay you got me. Batman Begins is definitely not a movie I show my kids – but it’s the only DVD I had on hand for this example.


    #HandBrake #VirtualBox #Ubuntu #CopyMovies #SoftwareDevelopment #SoftwareEngineer #DrawnAndCoded

    A Paginated JQuery UI Autocomplete Widget

    JQuery Javascript

    The JQuery UI Autocomplete Widget allows you to return a list of suggestions based upon a query string. The widget works great unless the user does not know what to search for. For example, if the user wants to search through a large database of people using only a single letter (presumably the first letter of the last name) the Autocomplete Widget quickly becomes unwieldy. Either the suggestions need to be truncated or the list of suggestions becomes so large as to be unusable.

    To resolve this problem I have extended the JQuery UI Autocomplete Widget and added pagination. Arrows allow the user to cycle through pages of suggestions. Each page of is retrieved using AJAX. Click here for a jsFiddle sample. The sample uses MockJax to simulate the AJAX calls. A complete end-to-end example using ASP.NET MVC is available here.

    The Paginated Autocomplete Widget inherits the same API as the Autocomplete Widget from which it is derived. However, there are some differences to be aware of …

    First, the web server endpoint that handles the AJAX GET must support three parameters – search, pageSize, and pageIndex. search is the query string provided by the user. pageSize is the number of items to return per page. pageIndex is the page to return.

    [HttpGet]
    public JsonResult SearchCars(string search, int pageSize=20, int pageIndex=0)
    {
       // Your logic here.
    }
    
    ASP.NET MVC Controller ActionMethod to support the Paginated Autocomplete Widget.

    Second, the Paginated Autocomplete expects a JSON response from the web server in a specific format. The Widget requires this format to facilitate pagination. data is an array of text/value objects that will get bound to to the list of suggestions. total is the total number of unpaginated suggestions that the search query returned.

    {
       data : [
          { text : "Item 1", value : 0 },
          { text : "Item 2", value : 1 },
          { text : "Item 3", value : 2 }
       ],
       total : 1000
    }
    
    JSON result expected by the Paginated Autocomplete Widget.

    Third, when using the Paginated Autocomplete Widget in Javascript you need to specify sourceUrl. The Widget will automatically generate an AJAX GET to the sourceUrl and retrieve paginated suggestions as necessary. This is different than the Autocomplete Widget where you need to define the source method as well as the underlying AJAX GET. The obfuscation is necessary to facilitate pagination. In addition pageSize is an optional parameter that determines the number of suggestions per page.

    <input id="myFilter" type="text" />
    
    <script type="text/javascript">
    
       $(document).ready(function() {
    
          $("#myFilter").paginatedAutocomplete({
             pageSize: 10,
             sourceUrl: '/Simpsons/SearchCharacters'
          });
       });
    
    </script>
    
    Using the Paginated Autocomplete Widget in Javascript.

    The Paginated Autocomplete Widget requires JQuery 1.9.1 or newer and JQuery UI 1.10.3 or newer. I have tested it against Internet Explorer 7/8/9/10, Firefox 21, and Chrome 27. It will probably run in other permutations as well. Please let me know if you have any comments or questions.


    #JQuery #Javascript #Programming #SoftwareDevelopment #SoftwareEngineer #DrawnAndCoded

    Javascript Memory Leaks and the Kendo Grid

    Telerik Kendo UI ASP.NET

    Javascript is garbage collected but it can still leak memory. The majority of these leaks are caused by Javascript “hooks” into the DOM. There are numerous articles on the internet that provide Javascript memory leak patterns to avoid. Here is a real-world example that I encountered while working with Telerik’s Kendo Grid.

    My implementation of the Kendo Grid has a 30 seconds refresh interval. When an interval elapses the Kendo Grid’s Datasource is refreshed from the web server and a dataBound() event handler is triggered. The dataBound() event handler creates elements for the newly fetched data and binds them to the DOM. In the dataBound() event handler we attach several event handlers to these newly created DOM elements. I use these event handlers to show dialogs and such when the user clicks on a cell in the Kendo Grid.

    The memory leak occurs when the Kendo Grid is refreshed. On a refresh the Kendo Grid removes the elements from the DOM that were previously added during the last dataBound() invocation. Kendo does not dispose of these elements as expected. Specifically, the event handlers that were previously attached to these elements are not “told” that the elements were removed. This causes a memory leak because the event handlers are retained in memory indefinitely. Every refresh of the Kendo Grid causes another generation of these event handlers to be retained.

    Fortunately, fixing the leak is easy. You just need to detach every event handler prior to removing the DOM element to which it is bound. Wen using the Kendo Grid you want to attach your event handlers in the dataBound() event. You want to detach your event handlers in the dataBinding() event. If you use JQuery’s .on() to attach an event handler ( this includes .click(), change(), etc…) you need to use .off() to detach it. If you use JQuery’s .bind() to attach an event handler you need to use .unbind() to detach it.

    I’ve created a couple of examples to demonstrate the before and after effects of properly handling this memory leak. The initial source code is taken directly from Kendo’s Demo Site. I have attached a .click() event handler in the Kendo Grid’s dataBound() event handler. The .click() event simply displays an alert pop-up whenever a user clicks on a cell in the table. This is the jsFiddle portraying the memory leak. If I detach the .click() event handler in the Kendo Grid’s dataBinding() event handler the memory leak disappears. This is a jsFiddle with the “fix” applied.

    This is the memory footprint of each jsFiddle over a 20 minute period. The green line portrays the memory leak. The red line portrays the “fix”. The memory leakage is around 100-200 kb every 10 minutes.

    Memory Leak (Before and After)

    For a long-running single-page application this is not good. Moving forward I now make memory profiling part of my testing regime. Please let me know if you have any questions.

    Notes

    1. The JQuery .empty() function is supposed to recursively remove all child elements as well as detach all event handlers. I have not looked at the Kendo Grid source code. However, if .empty() were being called to dispose of obsolete elements upon a Datasource refresh I would expect this memory leak to not occur.

    #JQuery #C #Telerik #Kendo #KendoGrid #Javascript #Programming #SoftwareDevelopment #SoftwareEngineer #DrawnAndCoded