Aim to instruct people build a makecode platform and custormize their own blocks, the content on this page is based on the exsited document including microsoft official documnet on Makecode and tutorials of serveral platforms. PS: There might be some differences from the original ones since some code did not work for me through the process.
Microsoft Makecode is based on the open source project Microsoft Programming Experience Toolkit(PXT). Microsoft Makecode is the name in the user-facing editors (hereinafter called the 'platform' or 'target'), PXT is used in all the GitHub sources.
1. Platform (User-Facing) Composed of homepage, simulator, blocks console, and javascript console.User can use blocks or javascript to design their own code and workflow and the result will show within simulator area simultaneously.
Many platforms programmed by makecode have existed and each of them has its own tutorials. (Including the block features, applications in reality and examples).
| Platform Name | Description | Homepage | Tutorial | Github |
|---|---|---|---|---|
| Ada-fruit | You can run your code using the Adafruit Circuit Playground Express simulator, all within the confines of a web browser. The simulator has support for the LED screen, buttons, as well as compass, accelerometer, and digital I/O pins. | Homepage | Tutorial | Github |
| Microbit | The micro:bit provides an easy and fun introduction to programming and making – switch on, program it to do something fun – wear it, customize it. Just like Arduino, the micro:bit can be connected to and interact with sensors, displays, and other devices. | Homepage | Tutorial | Github |
| Minecraft | MakeCode for Minecraft is a code editor to build fun mods and programs for Minecraft. | Homepage | Tutorial | NULL |
| Lego Education | You can run your code using the LEGO® MINDSTORMS® Education EV3 simulator, all inside the same browser window. The simulator has support for the EV3 Brick screen, buttons, sensors, and motors. | Homepage | Tutorial | NULL |
| Chibi Chip | The Love to Code Creative Coding Kit is a fun, new way to learn circuits and coding. | Homepage | Tutorial | Github |
| Seed Studio | When you have your code ready, you connect your Grove Zero Main Board to a computer via a USB cable then press the reset button twice so it appears as a mounted drive（Grove Zero）. | Homepage | Tutorial | Github |
| Beat the traffic | By setting values, simulator could calculate the efficiency of the road | Homepage | NULL | NULL |
| Cornell Build your face | An editor for personalizing mask on your face captured by camera | Homepage | NULL | NULL |
| Arcadia | An editor for Marker-based Augmented Reality | Homepage | Tutorial | NULL |
| Samuel Postcard Making | A Blocks / JavaScript code editor for the holidays powered by Microsoft MakeCode | Homepage | NULL | Github |
2. PXT (Developers-Oriented) . PXT developers are group of people who can reorganize homescreen, build simulators and javascript console, customize blocks including naming attributes, defining new functions ect.
Some useful information for your reference
- Stack Overflow
makecodetag - Discord https://discordapp.com/invite/ypvQNWy (Highly Recommend)
- Email makecode@microsoft.com
Certainly, blocks in the platform represent certain lines of code and by combining them, users can launch functions such as forloop, boolean statement and so on. After reviewing the existed platforms and the blocks they contain, blocks can be divided into groups and detailed information is shown below.
| Types | Name | Function | Looks like |
|---|---|---|---|
| Loops | on start | An event that runs when the program starts |  |
| for | Repeat code for a given number of times using an index |  |
|
| while | Repeat code while a condition is true |  |
|
| repeat | Repeat code for a given number of times |  |
|
| for of | Repeat code for each item in a list |  |
|
| forever | Repeat code for a given number of times |  |
|
| pause | Pause for the specified time in milliseconds |  |
|
| runInBackground | Run this code in parallel with the current code |  |
|
| Logic | if | Conditional statement |  |
| boolean | True or false values |  |
|
| comparison | Compare two values, usually locate as the condition of if |  |
|
| Variable | assign | Assign(set) a variable's value |  |
| change | change a variable's value |  |
| Type | Functions | Achieved operation |
|---|---|---|
| Math | using math, math operators and math functions | integer/float/ binary operation/ remainder/ Exponent / Square root/ Absolute value/ minimum and maxmum / random value / constrain |
| Text | Functions to combine, split, and search text strings | return the character at the specified index/ compare order of two strings/ return substring of the current string/ convert string to number/ convert string to integer |
| Arrays | Add,remove, and replace items in lists | return the index of the first occurence of a value in an array/ append a new element to an array/ remove element from an array and return it/ add element to an array and return the new length / insert the value at a particular index / remove the element at a certain index |
Reference:Target-Creation
System: Mac V10.13.6
Version:
Node v10.13.0
NPM v6.7.0
- Install node.js 8+ Go to https://nodejs.org/en/download/ download the appropriate version and then install
- Install Node.JS and the PXT command line
sudo npm install -g pxt
sudo npm install -g install
- Get a copy of the sample target sources, here the sample used is https://github.com/microsoft/pxt-adafruit
- clone
git clone https://github.com/Microsoft/pxt-adafruit pxt-adafruit- run npm install (under the pxt-adafruit folder)
cd pxt-adafruitnpm install- run the serve (under the pxt-adafruit folder)
npm run serve
Since you copy the sample source "pxt-adafruit" to directory pxt-adafruit in step1, so you can find important files as following in pxt-adafruit file
/libsPackages that define the APIs and they shld be exposed in blocks/simTypescript source for the in-browser simulator, if anydocsmarkdown documentation pagespxtarget.jsonWhere a PXT target is described pxtarget.jsontargetconfig.jsonchange the structure of home screen targetconfig.jsonpackage.jsonall PXT target also must supply an this JSON file package.jsongraphical assetswhere storing pictures and icons of editor homepage and located under/docs/static
Based on the three files of PXT-adafruit & pxt-holidays/pxtarget.json , then figure out the relationship among these attributes and associate them with corresponding part of editor homepage.
❓ change the id/ name/ titlereagarding the sample of pxtarget.json
❓ what is NPM / change your target id and repositories locations, etc.
Comments by makecode team on Discord: ignore this part
related files are pxtarget.json and targetconfig.json
- avatar.svg image used in talking heads
- loader.svg image used in loading overlay