How to code with Google Blockly

Back in the 1980s, home computer users wrote their own software using the BASIC programming language. As PCs came on the scene, providing a wealth of ready-written software, programming died out, leaving the professionals to do it all. According to some business leaders, this has had a detrimental effect on the skills available for the UK’s computer industry. 

To help reverse this trend, this year has been declared the 'Year of Code' with the aim of getting people writing software again. If you fancy getting in on the act, here's a brilliant introduction to programming. We’re going to use Google Blockly which teaches you many of the principles of programming but without the need to enter the program as text. Instead, you simply move blocks around on-screen (hence the name). Although you’ll only learn how to use a handful of Blockly’s features, we trust that this step-by-step introduction will inspire you to learn more yourself.

How to use Google Blockly

1. Go to the Google Blockly website to start creating your program. Click on Text in the bar at the left and then on the Print block – it’ll appear on-screen. Click again on Text and this time click on the “ ” block at the top.

 How to code with Google Blockly 1

2. Drag the “ ” block to the right of the ‘Print’ block and they’ll join together. Now click in the area between the quotation marks on the “ ” block and type ‘Hello World!’ (without the single quotes). You’ve created your first program.

 How to code with Google Blockly 2

3. Click on the white triangle on a red background icon at the top of the screen. Your program will announce ‘Hello World!”. It’s a start but we can do better so click on the bin icon at the top to start again from scratch.

 How to code with Google Blockly 3

4. Create something like the first program but with the ‘Item’ block (under Variables) instead of the “ ” block. Run the program. It will say “undefined” because Item is a variable (an area of memory) but we haven’t yet defined it.

 How to code with Google Blockly 4

5. To define it we use the ‘Set Item To’ block (under variables) and drag a “ ” block into the hole in that block. Type ‘Hello World!’ between the quotation marks and you’ll now find that the program works the same as our first program.

 How to code with Google Blockly 5

6. That might seem pointlessly complicated but try changing it as shown in the screen shot and run it. The variable ‘Item’ ends up as a greeting to you by name. Note that we can have lots of variables each with different names by changing the word Item.

 How to code with Google Blockly 6

7. Now let’s try some arithmetic. You’ll find the relevant blocks under Math. Create the program shown and you’ll find that it calculates the correct answer. Try modifying it to do more complicated calculations. We’ll now move on to generate several results from the one program.

 How to code with Google Blockly 7

8. Generate the program shown here which contains a common programming concept called a loop. Everything inside the loop is carried out for all value of the variable i from 1 to 10. Run it to print out the five times table.

 How to code with Google Blockly 8

9. You can even have loops inside other loops. Modify the program as shown, which now uses two variables, i and j. You’ll find that it now print out the values of all multiplications from 1 x 1 to 10 x 10.

 How to code with Google Blockly 9

10. Another common feature of programming is deciding which instructions to execute depending on the outcome of a comparison. Create the program and try it out supplying positive and negative numbers and zero when prompted. You’ll have to click on the ‘*’ to add the Else if and Else parts.

 How to code with Google Blockly 10

11. We’ve now seen some very simple examples of Blockly programs but if you want to see what you’d have to have typed to do the same sort of thing with a conventional programming language, click on the tabs at the top (JavaScript etc).

How to code with Google Blockly 11