MakeCode

The educational technology and digital learning wiki
Jump to navigation Jump to search
E-textile
Module: Adafruit Wearables
◀▬▬▶
draft beginner
2020/02/05 ⚒⚒ 2019/08/28
Objectives
  • Understand how to use this online programming environment
  • Choose the right environment (Playground Express vs. GEMMA)
See also

Objectives

  • Understand how to use this online programming environment
  • Choose the right environment (Playground Express vs. GEMMA)

See also

  • Quality: draft
  • Difficulty: beginner

Introduction

“Microsoft MakeCode brings computer science to life for all students with fun projects, immediate results, and both block and text editors for learners at different levels.” (Hands on computing education, retrieved August 22, 2019).

Makecode looks similar to Snap! and Scratch, i.e. it is a visual programming language. It also allows saving and working with JavaScript code. More precisely, according to its technical home page for programmers, “MakeCode programs can be authored in Blocks, Static TypeScript or Static Python. Both Blocks and Static Python are converted to Static TypeScript before being compiled to lower-level languages. Blocks is implemented using Google Blockly. Static TypeScript is a subset of TypeScript, an extension to JavaScript that allows static typing but can be compiled to standard JavaScript.”

As of August 2019, several environments can be programmed with makecode:

See also:

Adafruit MakeCode

Supported boards

So far (Aug 2019), MakeCode works with

All of these boards also work with CircuitPython and Arduino. Code can be directly downloaded into board via USB. It will be compiled into some kind of machine language.

Online editors

  • The online MakeCode editor for the Playground Express is https://makecode.adafruit.com/. The site includes some walk-through tutorials and some examples. The platform includes that familiar palette with programming elements, a workspace for the program, and a simulator to the left.

Overview of Makecode environment

Makecode is an online environment composed of three parts (see image below)

  • The simulator which allow to test your code by clicking on "play".
  • The Blocks Toolbox which give you "blocks" for coding.
    • Basic blocks (input, light, loops ...)
    • Advanced blocks by clicking on Advanced. You will have 1)additionnal blocks such as pins, functions and so on and 2) Extensions which will give you access to special libraries such as servos,gamepad, mouse ....
  • The coding workspace where you drag and drop blocks from the toolbox.

On the image below, you will find a quick presentation of the environment :

AdaFruit MakeCode environment for Circuit Playground Express

Circuit Playground Express Example

The following simple example shows that a simple application can be done in short time, even by beginners.

Notice: Make sure to save more complex code and maybe create versions. I did loose the blocks code for an example at some point by playing around with the "explorer" functionality.

Block code

The following code will activate on shaking the board and repeat four times a sound and a blinking (from blue to red/yellow) since one ring is shown one after the other.

AdaFruit MakeCode example for Circuit PlayGround Express

The corresponding JavaScript code is

input.onGesture(Gesture.Shake, function () {
    for (let i = 0; i < 4; i++) {
        music.magicWand.play()
        light.showRing(
        `blue blue blue blue blue blue blue blue blue blue`
        )
        light.showRing(
        `yellow red yellow red yellow yellow red red red yellow`
        )
        pause(500)
    }
    light.clear()
})

Downloading

  • Plug in the USB B cable
  • Press the reset button on the board. All the LEDs should become green
  • Save the the code in the CPLAYBOOT drive. (D:) on my machine.
AdaFruit MakeCode download for Circuit PlayGround Express

Note that you can drag and drop a file from your computer directly in the online editor to edit it.

Sharing

Share your code by clicking on share button. After confirming the title of the project, you will have a URL link to share.

AdaFruit MakeCode sharing for Circuit PlayGround Express

Driving external Neopixels

Technical substrate

Microsoft MakeCode is am open source framework for creating JavaScript/Blocks online editors.

According to the Github project page,

Microsoft MakeCode is based on the open source project Microsoft Programming Experience Toolkit (PXT). Microsoft MakeCode is the name in the user-facing editors, PXT is used in all the GitHub sources. PXT is a framework for creating special-purpose programming experiences for beginners, especially focused on computer science education. PXT's underlying programming language is a subset of TypeScript (leaving out JavaScript dynamic features). The main features of PXT are:

  • a Blockly-based code editor along with converter to the text format
  • a Monaco code editor that powers VS Code, editor's features are listed here.
  • extensibility support to define new blocks in TypeScript
  • an ARM Thumb machine code emitter
  • a command-line package manager

Links

Online editors

Official at Microsoft and MakeCode

Additional information

At Adafruit

Tutorials
Projects sample