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

Christmas Tree Shopping

Christmas Tree Shopping Perfect Band Aids Artificial Tree XMAS Comic
When I was little my dad took us out a couple of times to cut down a tree at a “farm”. He’d grab his saw. My mom would grab a box of band-aids. And after a few hours my brother and I would come back home to decorate a freshly cut tree … and a whole new vocabulary of swear words to try out. These days my trees come in a box, it unfolds like an umbrella, and it comes pre-hung with 5000 twinkly LED lights. Merry Christmas!

#Christmas #ChristmasTreeShopping #PerfectChristmasTree #BandAids #ArtificialTree #XMAS #DrawnAndCoded #Comic