How to Code Your BBC micro:bit with Microsoft MakeCode

Basic Workflow

The micro:bit is by far the easiest to work with microcontroller out there.

You can set up a new project in just 3 easy steps.

Lets take a look at them:

Step 1 - Connect to a computer via USB

If your project requires additional components, now is the moment to connect them to the board.

⚠️ Don’t forget to plug the board to power (this includes USB) only AFTER you connect all the components to the board, otherwise, you might run into problems.

Step 2 - Combine some blocks to form a program

Open Microsoft MakeCode on your browser and create a new project.

Drag some blocks into the program space (that big empty area with a grayish background) to form a program.

Step 3 - Save the program to the micro:bit drive

When you plug the micro:bit to the computer, it will be recognized just like a pen-drive or an SD card.

When you finish building your program, click on the save button and save the .hex file to the MICROBIT drive.

Step 4 - Enjoy!

When the code finishes uploading, it will run immediately so you can see the results right away. 👌

The best part about this workflow is that we don’t need to install or configure anything. TRUE Plug n’ Play!!!

Getting familiar with the editor

Now lets take a closer look at the MakeCode editor itself.

Click on the New Project button to get started.

Right away, we can see it has quite a nice interface, wouldn’t you agree?

I just love BIG buttons 🙃 !!! Anyway… back to the explanation!

The interface is divided in a couple sections:

Top Bar

The micro:bit logo and Home buttons both take you back to the projects page.

The Share button allows you to share your project in a couple different ways.

Next, we have two buttons to toggle between the Block Editor and the JavaScript Editor.

The neat part is that as we code our program, it gets converted for both editors. This way we can easily understand the relationship between the visual code blocks and their written counterpart.

Clicking on the Help button gives you access to a hand full of resources and references on the Block and JavaScript editors.

If you want to know more info about a specific block or feature, this is where you’ll find it.

The Cog button contains very useful items such as the ability to change the editor language and delete the project.

Editor

The editor area in the middle is composed by the Simulator (on the left side), the Block Library (on the center), and the Program Space (on the right side).

Let’s take a closer look at each of them.

The Simulator allows you to preview your program without even having a micro:bit connected to the computer.

It simulates all the cool features of the micro:bit and it behaves according to the program on the Program Space.

The Simulator has a couple of buttons that allow you to (from left to right): Play/Pause the simulation, Reset the program, activate Slow-Mo - this mode runs the program in slow motion and shows a yellow outline around the block that is currently being executed (great for debugging and learning what the code is doing), Mute Audio, and show in Full Screen.

On the bottom-left corner of the interface, we also have a button to Hide/Show the Simulator.

The Block Library panel is where all the blocks live.

The available blocks are organized in different categories depending on what type of operation we want to do and it is possible to add more categories of blocks to the list (they’re called extensions).

A really neat characteristic of the block categories is that they each have a different color, making it easier to learn and visually inspect the code.

On top of the Block Library pane, we also have a Search bar available to quickly access a specific block. If we want to react to a button press, for example, we can quickly search for “button”.

Building our programs in the Program Space is pretty self-explanatory.

We simply drag and drop blocks to an empty area and we combine them together to form the functionality of the program.

💡 TIP: Right-clicking on a block or an empty space gives you some additional functionalities!

If we wish to delete a block, there’s a couple different ways to do so:

• Drag it back to the Block Library
• Right-click > Delete Block
• Select it and press the Delete key

MakeCode also supports the ability to comment the code by right-clicking on a block and choosing Add Comment.

To finish off the editor walk-through, lets take a look at the bottom side of the interface.

The first button from the left is the Simulator toggle. Use it to hide and sow the Simulator Pane.

Next, we are offered not one, but two ways to download our program.

The only difference is that to the left of the Save button we have the option to change the name of our program. Once we do, it will be automatically saved online, so no more “I forgot to save it” worries.

On the right side of the UI, we find the Undo/Redo buttons, as well as the Zoom buttons.

Saving your programs

Have you noticed that you don’t need to create an account to save your projects?

That’s because MakeCode saves the projects in the Browser (using local storage), so take this into consideration when creating them.

⚠️ This means that if you clear the browser’s cache and temporary files your projects will be gone!

If you want to be able to access your programs from any computer, save the .hex file to your hard drive (or to a pen-drive) and then drag it into the MakeCode website to open it (you can also click on the Import button to the top-right of the My Projects section).

Another way to make a project easily accessible is to use the sharing functionality and access it through the link, for example.

Tutorial Projects

Now that we’ve explored what creating a new project looks like, lets take a look at some micro:bit tutorial projects included in the MakeCode platform.

To access these projects from the editor, just click on either the micro:bit logo or the Home button.

Right away we see a somewhat overwhelming number of projects to choose from.

With these tutorial projects, you can learn things like display images, scroll text, work with DC and servo motors, play music, make games, and much more.

They are divided in a couple categories:

• My Projects - Every time you create a new project or open an existing one it’s gonna show here.
• Tutorials - The tutorial projects are great for exploring specific features of the micro:bit, such as working with the accelerometer or the radio.
• Games - This section will teach you how to code popular games.
• Radio Games - Same as Games, but using multiple micro:bits.
• Fashion - Did you know you can use the micro:bit to create wearables? Well… now you know!
• Music - This one is really cool because it teaches you how to make music with your micro:bit with basic materials.
• Science - Did you ever wanted to be a mad scientist? Now is your opportunity!
• Tools - Similarly to the Tutorials section, here you can learn about specific features of the micro:bit.
• Turtle - For this one, you’ll control a turtle the size of a single pixel and draw with it. The things they come up with!
• Blocks To JavaScript - These project tutorials help us understand the relationship between the Block editor and the code it produces in JavaScript.
• Courses - I would say this section is mostly targeted at teachers and educators. It includes lesson plans and activities. If you are planning on organizing group activities or teaching electronics and science, this section is for you!
• Behind the MakeCode Hardware - This section has some useful videos that explain how some of the components of the micro:bit work.

For a complete list of educational resources on MakeCode with the micro:bit, I also recommend taking a look at the MakeCode Documentation.

If you are planning on sharing your knowledge on the micro:bit, the Documentation certainly has a format that will aid you to create lesson plans and activities tailored to your target audience, being it children or adults.

Wow! You’ve made it this far, huh?

Well… All I can say to finish off this article is that it would be a lot longer if I went trough all of the features and neat little tricks on the MakeBlocks editor.

Even though it might seem simple on the surface (and it certainly is), it is packed with great features, but I am confident that after reading this guide you get the gist of it.

If you enjoyed this guide, make sure to share it with your fellow makers.

And if you want to know more about Microsoft MakeCode, the micro:bit, or have suggestions on features you want me to cover, comment bellow! 👇