Module 2: Introduction to MakeCode

Description

Before diving into the MakeCode environment, you may wish to explore what coding is and why we feel students should be coding.

Coding, in the simplest of terms, is telling a computer to do what you want it to do.
Coding requires computational thinking, which is embedded throughout the curriculum. Educators can incorporate code into learning for all curriculum areas.
Computational thinking is the skill of expressing problems and their solutions in ways that a computer can solve them

To go deeper with Computation Thinking, you may wish to work through our Computational Thinking and Coding Course.

The MakeCode environment is divided into three basic sections:

Simulator
Blocks Toolbox
Coding Workspace

Simulator

On the left is the Simulator, which displays what your program will look like running on the actual Micro:bit. It is interactive and can simulate inputs you might like to use in your program – like button presses, shakes, tilts, light exposure and temperature level. Note that the indicators for shake, etc. will only appear if you’re using blocks for those inputs in your program. The Simulator can simulate outputs such as lighting up the LED matrix (the 5x5 lights in the center of the Micro:bit). The buttons in the toolbar below the Simulator let you stop/start the Simulator, refresh, slow down, control volume, and make it full screen.

To make the Simulator appear and disappear, press the arrow in the far bottom left-hand corner of your screen.

Toolbox

In the middle is the blocks Toolbox. Clicking on a category or “drawer” reveals the blocks available within that drawer. You can then click and drag individual blocks to the Workspace area on the right. Sometimes the Toolbox drawer contains more blocks than can be seen in your screen, so you can scroll down in an open drawer to reveal more blocks. If you know what block you want, but can’t remember the category, you can use the Search field at the top of the Toolbox to look for certain blocks. Blocks are all colour coded to match their category type.

Notice that clicking on the “Advanced” drawer at the bottom of the Toolbox reveals more Toolbox drawer options.

Another service the blocks Toolbox performs is as a trash can. Drag unwanted blocks from the Workspace on the right and drop them in the trash can that appears in the blocks Toolbox. This removes them from the workspace. You can also right click on a block and select ‘delete’ to remove it from your Workspace. Pressing the delete key will also remove the selected block.

Workspace

On the right is the coding Workspace. This is where you will drag and drop blocks from the Toolbox to create your program. Many blocks may initially appear grayed-out. This indicates that the block won’t run because it needs to be inside an input or loop.

In MakeCode, certain block types will start program execution. These blocks have a top and bottom enclosure – they look a bit like a mouth where other blocks can fit in between.

You will need to place other blocks inside these “mouth” blocks for them to be enabled and run.

You can think of the input and loop blocks that are needed to make other blocks active as answering the question, “when?” When you do want to run this code? The input and loop blocks answer that question with responses like, “on button click” or “forever.”

Note that once blocks are joined together, they can only be separated by dragging the lower block off the bottom of the one you want to separate it from. For example, if you want to remove the “while” loop block, click and drag the block out of the
“on start” block.

In the bottom-right corner of the Workspace are the all-important undo and redo buttons, as well as plus and minus signs that let you enlarge and shrink your blocks of code to optimize how you view them. Be careful to only use these zoom icons and not your browser’s zoom function.

Finally, in the bottom left corner, beneath the simulator, is the option to name, and then download your code.

Loading and Managing Programs

The MakeCode programming environment works on a wide variety of browsers across different devices. You can use it on a PC, a Chromebook, and on Mac computers. In addition to the browser-based version, there is also a MakeCode Windows 10 App which you can use on computers running Windows 10, and an iOS app for those devices.

The MicroBit MakeCode home page lists your recent work in the first row under My Projects. In this section, you can also click New Project to open a blank project.

MakeCode automatically saves your work-in-progress in the browser’s cache, under the name of your project so it is a good idea to name each project something unique and descriptive otherwise you will have many ’untitled’ projects.

The home page also includes various tutorials and sample projects which you might find as helpful inspiration.

You can open saved project files from the Home Page by clicking the Import button at the top right of the page.

When you have finished coding and you will need to save the program to your computer. Clicking either the Save icon at the bottom of the screen next to your Project Name or the purple download button will save your project as a file on your computer. The filename will be similar as your project name, for instance ‘microbit-MyCoolProject.hex’

Installing Programs – Flashing Your Board

The Micro:bit can run independent of a computer by using a battery pack, or it can be powered when plugged into a USB port. In order to load your programs onto the Micro:bit, it must be plugged into the USB port of the computer and you must have downloaded the program (.hex file) onto your computer.

To load a program you have created, connect a Micro-USB connector to your Micro:bit, then plug in to your computer using a standard USB port. Once plugged in, the Micro:bit will show up as a USB drive on your computer called MICROBIT and you can load a program onto it.

If you’re using the browser on a Windows PC, Chromebook, or Mac, you just need to find the file that has been downloaded to your computer (typically in the computer’s ‘downloads’ folder) and drag and drop it onto the Micro:bit Express USB drive as if you were copying a file onto a USB thumb drive.

The micro:bit will pause and the yellow LED on the back of the micro:bit will blink while your code is programmed. Once that's finished the code will run automatically!

Windows 10 app

If you are on a Windows 10 computer, and using the MakeCode Windows 10 App, then you simply have to click the Download button for your program to load correctly onto the board – you don’t need to worry about dragging and dropping files.

Sharing Projects

Another feature of MakeCode that makes saving and sharing projects easy is the Share button in the upper-left next to Home. Clicking the Share icon lets you publish and then generate a link for the project. This link can be emailed to students or collaborators.

Opening a MakeCode link gives a preview of the code, lets you play it with the Simulator, and you can click on Edit to fully open and remix the project.

Troubleshooting

If a program does not seem to be running correctly, here are some things to try:

Press the Reset button on the Micro:bit, wait a few seconds, then press it a second time (or unplug it from the computer and then plug it back in).
Reload the program onto the Micro:bit.
Make sure any devices attached to the Micro:bit are connected correctly.
Make sure the batteries are charged if you are using a battery pack to power the board.
Try a different micro-USB cable. Some cables can only supply power and can’t also convey data

Learning Objectives

In this module you will:

Become familiar with the the MakeCode programming environment
Understand how to download and flash programs to the micro:bit

Continue to Module 3: Introductory micro:bit Projects »