In this chapter, you will learn how to set up and work with MakeCode for micro:bit, which is one of the most popular development tools to create micro:bit applications. Like many other software frameworks, MakeCode for micro:bit has a wide array of extensions (packages) to choose from.
You will also learn how to get started with the MakeCode for micro:bit and build some basic applications for micro:bit.
1-1. Starting Microsoft MakeCode for BBC micro:bit
Problem
You want to start the Microsoft MakeCode for BBC micro:bit to build a micro:bit application using Blocks.
Solution
Using your web browser, go to https://www.microsoft.com/en-us/makecode to open the MakeCode landing page.
- In the Hands on computing education section, click Start coding with micro:bit (Figure 1-1 ).
Figure 1-1Landing page for Microsoft MakeCode
You can go directly to makecode.microbit.org.
How It Works
Microsoft MakeCode is a web-based online editor that allows you to build programs using snappable blocks. It is also known as a graphical programming language and supports all modern web browsers and platforms.
The MakeCode website uses cookies for analytics, personalized content, and ads. You don’t need a user account to create and save projects with MakeCode. All projects are saved in the browser’s local cache.
MakeCode is based on the open source project Microsoft Programming Experience Toolkit (PXT), and its framework is available at https://github.com/Microsoft/pxt .
MakeCode provides environments such as BBC micro:bit, Adafruit Circuit Playground Express, Minecraft, LEGO MINDSTROMS Education EV3, Cue, Chibi Chip, and Grove Zero.
- Simulator - Provides the output without the real hardware while you are building the code. The following buttons can be used to control the behavior of the simulator.
(1) Start/Stop the simulator: Stops the program and restarts from the beginning.
(2) Restart the simulator: Restarts the program (output) from the beginning.
(3) Slow-Mo: Displays the output in slow motion.
(4) Mute audio: Mutes audio when you’re working with music and speech.
(5) Launch in full screen: Shows the simulator in full screen mode.
Toolbox - Provides blocks in categories. Also allows you to search extensions in the toolbox and add more extensions (packages) to the toolbox if available.
Coding Area - The area you use the build the code with Blocks and write the code with JavaScript.
- Editor Controls
Home - Takes you to the home screen ( https://makecode.microbit.org/ ), which shows recent projects and other activities.
Share - Displays the Share Project window that lets you publish your project to the public cloud and embed your project in to a web page with different options.
Blocks or JavaScript - Allows you to switch the code view from Blocks to JavaScript, or back again. Press one of the view buttons at the top and center of the window.
Help - Shows a menu with help options such as support, reference, blocks, JavaScript, hardware, and where to buy.
More… (gearwheel) - Allows you to access project settings, adding extensions, deleting the current project, deleting all the projects, choosing a language, and pairing micro:bit for one-click download.
Undo and Redo - Allows you to undo and redo recent changes you make either in Blocks or JavaScript with the Undo and Redo buttons in the bottom right of the editor window.
Zoom In and Zoom Out - The zoom buttons change the size of the blocks when you’re working in the Blocks view. When you’re working with the code in the JavaScript view, the zoom buttons change the size of the text.
Save Project - You can type a name for your project and save it. Type in a name for the project in the text box, and press the disk icon to save.
Download - The Download button will copy your program to a drive on your computer.
- Show/Hide the simulator - The Show/Hide the simulator button can be used to show or hide the simulator.
Figure 1-4.Important areas and controls on the MakeCode editor
By default, the coding area is focused to the Blocks view with on start and forever blocks.
1-2. Saving a Project to a File
Problem
You want to save your work to a file.
Solution
In the project name box, type in a name for your project and click on the Disk icon. The new name of the project is updated in your browser’s local cache. Meanwhile, a hex file will download to your computer.
- If you click on the Disk icon without providing a new name for the project (with the default file name, Untitled), the Rename your project modal box (window) will pop up (Figure 1-5 ).
Figure 1-5.Renaming a project
- Now type in a name for the project, and click on the Save button. The project will save under the new file name, and the new name of the project is updated in your browser’s local cache. Meanwhile, a hex file will download to your computer (Figure 1-6 ).
Figure 1-6.Downloading a hex file
Files you’ve downloaded are automatically saved in the Downloads folder. You can always move downloads from the Downloads folder to other places on your computer.
How It Works
With MakeCode, your code will automatically save as you work under the default project name Untitled. All projects are saved in the browser’s local cache. You can save your project by providing a new file name. If you don’t name your project, it’s kept as an ‘Untitled’ project. You can save your project to a file or in the cloud (see Recipe 1-6. Sharing a Project).
If you want to use the default project named Untitled, just click on the Save button in the Rename your project modal box without providing a new project name.
If you click on the Save icon after saving the project under a new project name, any changes you have made will save, and a hex file of the project will download to your computer.
1-3. Downloading a Project
Problem
You want to download a project into your computer as a hex file.
Solution
- Click on the Download button in the bottom of the page. A hex file will download to your computer (Figure 1-7 ).
Figure 1-7.Downloading the hex file
Google Chrome: The downloaded hex file will appear (list) in the Download Bar at the bottom of the browser. Click on the caret (circumflex) icon and from the shortcut menu, click show in folder to open the folder it was saved to using the default file browser on the system. You can also access the downloaded file by clicking on three dots (⋮) icon in the top-right corner of the browser and click Downloads from the menu or press Ctrl+J. Then in the Downloads page, click Show in folder link to open the folder for the corresponding file.
Microsoft Edge: When asked what to do with this file, select Save and it will be saved to your Downloads folder. Selecting Open Folder will allow you to view your downloads.
Mac Safari: When you select Download in Safari, your file will appear under downloads in the top right of the screen; you can open your downloads folder from here.
How It Works
When you click on the Download button, the code is compiled in the browser and downloaded as a hex file.
Usually the downloaded hex file can be found in the Downloads folder in your computer. The word microbit will append to the start of the file name. As an example, if you have a project named Hello World, the name of the downloaded hex file would be microbit-Hello-World.hex.
1-4. Flashing a Hex File to the micro:bit
Problem
You want to flash a downloaded hex file to the micro:bit.
Solution
Connect the micro:bit to your computer using a micro USB cable (use the micro USB port on the top of the micro:bit).
- Once it has been mounted, find the micro:bit in the file manager and open it. An example shows if a Windows-based system is used (Figure 1-8 ). Drag and drop the hex file into the open micro:bit window.
Figure 1-8.Copying a hex file to the micro:bit drive
- If you’re using Google Chrome browser, you can drag and drop the hex file on the micro:bit drive from the browser’s Download Bar if available (Figure 1-9 ).
Figure 1-9.Copying a hex file to the micro:bit drive
How It Works
The process of transferring a hex file to the micro:bit is called flashing. The LED on the back of your micro:bit flashes during the transfer. Once this has completed, the micro:bit will automatically restart and start executing your code.
1-5. Changing the Download Location to micro:bit Drive with Google Chrome
Problem
You want to download the hex file from the MakeCode directly to the micro:bit drive.
Solution
On your computer, open Chrome.
At the top right, click Customize and control Google Chrome (three-dotted button).
From the drop-down menu, click Settings.
Scroll down the page and at the bottom, click Advanced to expand the page or type Downloads in the search bar with the magnifying glass.
- Under the Downloads section, click on the Change button and select the micro:bit drive (Figure 1-10 ).
Figure 1-10.Setting the downloads location
How It Works
Google Chrome allows you to configure the download location for your files. Changing the default download location to the micro:bit drive allows you to flash the hex file to the micro:bit with a single click.
1-6. Sharing a Project
Problem
You want to share your project.
Solution
- In the Editor controls, click on the Share button (Figure 1-11 ).
Figure 1-11.Sharing a project
- In the Share Project window, click on the Publish project button (Figure 1-12 ).
Figure 1-12.Publishing a project
- In the Share Project modal box (window), click on the Copy button to copy the address to the clipboard (Figure 1-13 ).
Figure 1-13.Sharing a project link
- If you want to embed your project in a website, click on the Embed link to expand the Share Project modal box (Figure 1-14 ).
Figure 1-14.Embedding a project in a website
- The expanded section provides you three options.
- Code - Embeds Blocks or JavaScript of your project (Figure 1-15 ).
Figure 1-15.Embedding blocks or JavaScript of the project
- Editor - Embeds the editor with minimal user interface. You can jump to the full-featured editor by clicking on the Edit button in the top-right corner of the embedded view (Figure 1-16 ).
Figure 1-16.Embedding the MakeCode editor with minimal user interface
Click on the large Copy button to copy the html code to the clipboard.
Open a text editor, such as Notepad, and paste the html code into the editor window.
Save the file with an .html extension. This will allow the system to know it’s a html file.
After saving the file, open it with your web browser by either typing the path in the address bar or dragging and dropping the file into the browser window.
How It Works
When you create a project with MakeCode, it will receive a unique identifier. This identifier is used with when sharing and embedding your code.
1-7. Opening a File from the Computer
Problem
You want to open a micro:bit project on your computer with the MakeCode editor for micro:bit.
Solution
- In the MakeCode editor for micro:bit, click on the Import button (Figure 1-18 ).
Figure 1-18.Import button on the MakeCode editor
- In the Import window, click on the Import File… button (Figure 1-19 ).
Figure 1-19.Importing a project from the file
- In the Open hex file… modal box, click on the Choose File button (Figure 1-20 ).
Figure 1-20.Choosing a hex file to open
In the Open dialog box, browse and locate the hex file of the project you want. Then click on the Open button.
If you want to open a different project, click on the Choose File button again.
- In the Open hex file… modal box, click on the Go ahead! button to open the project (Figure 1-21 ).
Figure 1-21.Choosing a hex file to open
The project will load into the MakeCode editor for micro:bit.
How It Works
micro:bit code files use the .hex file extension. These are normally referred to as ‘hex files’.
When MakeCode compiles the code, it compiles it in a format that is compatible with itself and allows it to decompile a MakeCode hex file and display the correct blocks.
Hex files that have been compiled in non-MakeCode environments, such as MicroPython or Mbed, will have a differing format that MakeCode will not be able to understand and display.
1-8. Opening a Shared Project
Problem
You want to open a shared project from a URL or from the GitHub repository.
Solution
In the MakeCode editor for micro:bit, click on the import button.
In the Import modal box (window), click on the Import URL… button.
In the Open project URL modal box, paste the URL of the shared project or URL of the GitHub repository.
Click on the Go ahead! button.
The project will load into the MakeCode editor for micro:bit.
How It Works
Publicly shared micro:bit projects can be accessed using the shared URL or URL provided by the GitHub repository. However, be cautious when using software or following instructions from unknown sources.
1-9. Deleting a Project
Problem
You want to delete a project from the MakeCode.
Solution
How It Works
The Delete Project option will remove your project from the browser’s local cache.
1-10. Deleting All Projects
Problem
You want to delete all the projects in your MakeCode editor.
Solution
In the Editor controls, click on the More… button.
- In the drop-down menu, click Reset (Figure 1-24 ).
Figure 1-24.Deleting all the projects
- In the delete confirmation window, click on the Reset button (Figure 1-25 ).
Figure 1-25.Confirm dialog box for deleting all the projects
This will delete all projects from the local storage.
How It Works
The Reset option will remove all your projects from the browser’s local cache.