LEARN.PARALLAX.COM
Published on LEARN.PARALLAX.COM (https://learn.parallax.com)
Home > Get Started with micro:bit and MakeCode

Get Started with micro:bit and MakeCode

What It’s About

The micro:bit module is a tiny computer with lights, push buttons, and sensors. Follow this tutorial to get ready to program your micro:bit with the Makecode block language.

What you need to get started

A Windows, Mac, or Chromebook computer with:

  • An open USB port*
  • A Google Chrome or Microsoft Edge browser
  • A micro:bit module
  • A USB A to micro B cable

*If your computer only has USB C ports, you will also need a USB C to A Adapter.

Software and versions: This lesson is for the current micro:bit Makecode Editor for use with Google Chrome or Microsoft Edge.

Flash Projects with MakeCode Editor

What is a project?

A project, also called a program, is a set of instructions that a computer runs to make the computer perform tasks. Programs make phone apps do their jobs, and they also make web pages respond to your clicks and taps. Projects for the micro:bit can make it do all kinds of interesting apps as you will see. 

For the micro:bit to run a project, it first needs to be transferred to the micro:bit module’s flash memory. 

In this activity, you will use the micro:bit MakeCode Editor to make projects and to transfer projects into the micro:bit module’s flash memory.

The micro:Bit MakeCode Editor runs in your Chrome or Microsoft Edge browser. If you must be offline while writing and loading projects for your micro:bit, you may use the optional MakeCode installed on your computer.

 

Using the MakeCode Editor

The instructions below guide you step-by-step through connecting your micro:bit to your computer and running your first project.

Make sure to follow along and repeat the steps with your own micro:bit.

  • Open a browser and go to makecode.microbit.org.
  • Enter the blocks shown below, look at the simulator on the left, and observe what the project will make the micro:bit do.
  • Click the Download button.
  • Observe what happens to your micro:bit, it should look the same as what the simulator is doing.

  • When the ‘Connect your micro:bit to your computer’ popup appears, connect the micro:bit to your computer with the USB cable (using your USB A to C Adapter if you need it). Then, click Next.

  • When the Pair your micro:bit to your browser popup appears, make a note of what it’s telling you to do in the next popup, namely: choose your micro:bit and then select Connect.  Click Next.
  • In the ‘makecode.microbit.org wants to connect’ popup: choose your micro:bit and click Connect.
  • Check for the micro:bit flashed image; it’s right next to the Download words on the button.

  • Check the micro:bit module’s LED matrix display to make sure what it displays matches what you saw in the simulation.

Try This: Make Changes

Modifying the Project

Now that your micro:bit module is connected, the MakeCode Editor will remember that connection. So, it will load the project right away without the popup asking you to choose your micro:bit.
 

  • In the project, change HEART to HAPPY.
  • Also change ‘Hello’ to ‘Hi!’.
  • Look at the simulator and check the effects of the changes you made.
  • Click the Download button.
  • Check the micro:bit module’s LED matrix display and verify that it again matches the simulation of your changes to the project.

Save & Edit Projects

It’s always a good idea to save your projects so that you can open and improve them later.

  • Enter the project below into the micro:bit MakeCode Editor. (It’s just the default project with HEART changed to HAPPY and ‘Hello’ changed to ‘Hi!’.)

  • Click the project name, to the right of the Download button.
  • Change the name to happy_image_hi_text. 
  • Hit the save button to download the hex file.
  • Open a file browser (Windows Files Explorer, Mac Finder, or Chromebook Files). 
  • Check your Downloads folder and make sure you can find microbit-happy_image_hi_text.hex.

  • Exit the project.
  • Click the micro:bit MakeCodes Editor’s Import button
  • Choose the Import File… option then click Choose File.
  • Select microbit-happy_image_hi_text from downloads.
  • Then click the Open button. 
  • Verify that the project is the version you saved.

Editor Controls and Left Side Panel

The micro:bit MakeCode Editor has editor controls for undoing and redoing editor actions as well as collapsing and restoring the side panels. 

The left side panel contains the simulator as well as the file locations of all the files used in the project when you’re in the javascript mode. 

  • Click the + and – buttons (In the bottom right of the screen) to increase and decrease the editor pane’s block size.
  • Click the arrow buttons in the middle of the side panels to minimize and restore them.
  • Try the undo and redo buttons (also in the bottom left) to undo and redo changes you have made to your project.

Add extensions to your micro:bit

In the block language, you can use specialized instructions just for the micro:bit that are grouped into categories.  A category must be stored in a special area on your micro:bit, called the file system, before its instructions can be used in a project.  For example, the cyber:bot library archive includes several categories that will let you write micro:bit projects for your cyber:bot robot. 

You have two options: use a .hex file template that already has the extension included, or add the extension to your micro:bit project manually. 

  1. How to use a .hex file template that already has the extension included: Quick Start Template for cyber:bot Robots using Online Makecode Editor (below)  
  2. How to add the extension to your project manually: Adding an Extension to micro:bit Project (also below)

Quick Start Template for cyber:bot Robots Using Online Makecode editor

Here is a template shortcut if you are using the online makecode.microbit.org editor and just need to get started with the cyber:bot robot quickly. Download the template below, open it with the Makecode online editor, and start coding. It already has the cyber:bot extension added to its project settings, so you can immediately use its instructions in your projects.

  • Right-click the hex link below, choose Save link as…, and then save the file to your computer.

Cyberbot-template-with-blink.hex 

As written, this project will make the P21 light blink.  Let’s try this to make sure the cyber:bot system is ready:

  • In a browser, go to the micro:bit Makecode Editor.
  • Click the micro:bit Makecode Editor’s import button.
  • Choose the Import File… option then click Choose File.
  • Browse to and open cyberbot_template_with_blink.hex (it’s usually in the Downloads folder).
  • Make sure that:
    • The micro:bit is connected to the cyber:bot board. 
    • The 5AA battery pack is plugged into the cyber:bot board.
    • The micro:bit is connected to a computer with the USB cable.
    • The cyber:bot board’s PWR switch to 2 to power all features, or to 1 to power everything but the servo ports (this keeps the robot from running away while downloading code). The project won’t run if PWR is set to 0.
    • The extension is on the most recent release (to verify just go to the javascript side of the project, press the dropdown that says Explorer, and press the version button on the cyber:bot file to update it).
  • Click the Download button, and follow the Connect to micro:bit popups.  (For robot navigation apps, you’d be disconnecting the USB cable after this step.)
  • Verify that the P21 light blinks.

The cyberbot_template_with_blink.hex file is a good one to open/duplicate every time you start on a new cyber:bot project.  Just delete the default project and replace it with whatever cyber:bot project you are working on.  Make sure to update the project name before you save your work.  (See Save & Edit Projects.)  When you reopen the file later with the micro:bit MakeCode Editor, it will still have the extension(s) it needs and be ready for the cyber:bot to run.  That way, you won’t have to repeat all the steps in the Adding an Extension to the micro:bit Filesystem section every time.

Adding an Extension to micro:bit Project

Watch the following video and follow along with these instructions for adding an extension to your project. The cyber:bot extension is used as an example. Follow along with your own computer and micro:bit.

  • Open a browser and navigate to makecode.microbit.org.
  • Open a new project and name it cyberbot_template.
  • Press the gray +Extensions button.
  • Type cyberbot into the extensions search bar and press enter.
  • Click on the extension shown below.

  • You should now see the cyberbot category in between the Led and Radio categories.
  • You can now duplicate this project and rename it for any project with which you want to use the cyberbot blocks.

Use the Serial Monitor

Micro:bit’s MakeCode Editor doesn’t have its own serial terminal, but we can use an online one that displays messages from the micro:bit. You can also type messages into the serial terminal to send them to the micro:bit. 

A nice thing about the serial terminals is that there’s no need to wait for messages to scroll across the micro:bit module’s LED matrix display. You’ll be able to see the whole massage, all at once.

Different MakeCode blocks display messages in the serial terminal. Instead of show icon and show string for the LED matrix, you’ll be using serial write blocks to display messages and input statements to collect the text of messages you type. 

This activity will use an example project that makes the micro:bit communicate with the serial terminal. The micro:bit will prompt you to type some text, and then repeat back what you typed.

  • Enter these blocks into the micro:bit Makcode Editor.

  • Click Download to make the micro:bit run it.
  • Verify that the micro:bit module’s LED matrix display does not display anything.
  • Open another browser and navigate to Google Chrome Labs Serial Terminal. (Click Connect and choose your micro:bit then click Connect again)
  • Make sure to check the box that says Local echo.

  • Check for the ‘Type a message:’ prompt. If it doesn’t appear, try clicking the Download button again. You might need to try it more than once before it takes.
    • If the ‘Type a message’ prompt did not appear and clicking the Download button a couple of times doesn’t fix it, try this:
      • Press the Disconnect button and reconnect the micro:bit.
      • Then, click the Download button again, and it should start working.
  • Click to the right of the ‘Type a message:’ prompt, type a message, and press the Enter key.
  • Make sure the serial terminal responds with ‘You typed:’ and then a repeat of the message you typed.
  • If some of the letters are randomly missing don’t worry about it, it’s the terminals fault not the codes.

Try this: Display What You Type in LED Matrix too

  • Add show string (text) immediately below the serial write line (join (‘You typed:’, text)) block.
  • Click Download.
  • Type a message into the serial terminal.
  • Verify that the message you typed is displayed on both the serial terminal AND on the micro:bit module’s LED matrix.

DISCUSSION FORUMS | PARALLAX INC. STORE

About | Terms of Use | Feedback: learn@parallax.com | Copyright©Parallax Inc. 2024


Source URL:https://learn.parallax.com/courses/get-started-with-microbit-and-makecode_makecode/
Links