Hi, Steven here from Core Electronics. In this tutorial, I'm going to tell you about MakeCode.

MakeCode is one of the ways that we can program our Adafruit Circuit Playground Express, and it's the best option for educators and beginners of programming. MakeCode uses a visual drag and drop interface where you take blocks of code and snap them into place, and it doesn't take any prior programming knowledge to use. You also don't need any dedicated software to run MakeCode. It runs straight off a web browser, or you can install it as a Windows app.

Let's take a look at the interface. The MakeCode interface appears like this on a web browser or in the Windows app. You can use it on just about any device. You can use it on a tablet, laptop, or even a phone. You just need to have a USB out to send it to connect to your Circuit Playground Express.

One of the best things about the MakeCode application is that you have this virtual Circuit Playground Express in the top left, and any code that you make runs on this virtual board, and you can interact with it by clicking on the buttons or changing the temperature that it feels if you're running a temperature program. So really you can test your program as long as it's more or less contained on the board. You can test your program in its entirety and see it working within your programmer before you even send it to the board. So you could create programs on your cell phone, get them all ready to go, and then send your file off to connect to your Circuit Playground Express later when you're back at a regular computer.

So we'll get down into how we program within MakeCode. The block interface is the one that we'll use most, but you can also program with JavaScript, and you clickThis button at the top to switch between the two. So to start making a program, we first need to take a look at our blocks. Our menu in the middle here contains all our blocks that we can create code from, and we have different options such as lights, inputs, music, network options, loops, logics, variables, math, and then we have more advanced functions that we won't get into now.

Just about everything we do needs to be contained within a loop. They're shown with a bracket like this, and any piece of code that'll fit inside them will work as a program. So that's one of the other good things about MakeCode is it makes it really hard to make mistakes, and the things that you can put within a loop that will run are pretty intuitive because if they don't snap in, then it's not an element of code that would have worked anyway.

So for our program, we want to have some lights turn on with each button press. So one half of the lights with a button press, one and a half of the lights with a B button press, and I've chosen red and blue for the colors. And I've also added in a shake to play a rainbow animation.

So we'll do this with a while loop. So within loops, we'll scroll down to while, grab on it, and drag it into our interface. And so while true is what it says now, but we want it to be while a button is pressed. So we'll go into input, scroll down to button A is pressed, and we'll throw that into our while loop.

And we want the lights to turn on when the button A is pressed. So we'll go to lights, grab this show ring. And this is a nice visual way to change the colour of the lights as they're displayed. So we want when we press the A button, we want the right side lights to turn red. So we'll click in the middle, they'reAll shown as red right now, we'll click in the middle to select off. And just click each light on the left hand side in order to turn all those off.

Something important to note is at the bottom of lights, we have this clear option. And I'll put that on afterwards. If we don't tell the lights to turn off after we tell them to turn on, and they'll just stay on forever.

So that's one side, we've got to do the other side. So just to remind you, again, we'll go to loop, grab a while loop, and an input of button B. And we'll change this to B. Grab the show ring again, this time we'll select blue as a color. Turn all the left side blue, turn the right side off. And once again, put a clear afterwards.

And just a explanation of a while of a forever in a while loop. When the program runs, it's going to run through this block of code continuously whenever it's powered until it detects one of these options. So once it detects a button A pressed, while that's pressed, it's going to play the code within the while loop, while the button's not pressed, it's going to bypass it and go on waiting for another input.

So that takes care of our button presses. I also added a shake. So we'll go into input and select a on shake. And this is kind of an event loop. So notice that it's the bracket is the same shape as a loop. So while the while the board's powered, it's going to continuously wait for this command before it runs it.

So to do the shake, we'll first go into inputs and grab an on shake. And this works just like a loop. So but it's called an event and it's waiting for waiting for the board to be shaken to play the code that's inside it.

So we'll go to our music and grab a play sound power up. And we'll change that actually toMagic wand and back to lights and we'll take this show animation, it's set to rainbow and play it for two seconds. And then remember, afterwards, we'll clear it.

So things like this is where make code really shines because making a rainbow animation in normal code takes quite a bit of code and a little bit of kind of complex math in order to make it work. But make code has some really rewarding blocks that you can throw in to make really cool programs really quickly. But it may seem like it might be limiting a little bit that you just run out of blocks, but you have the ability to make your own blocks to, to add code on top of it. And you really you can make within make code just about any program that you can make outside of make code.

So a little bit about putting this code on the board. Now we have a working program. If we look at our virtual interface, we can hit shake. And it demonstrates that that portion of the code or the rainbow plays. And we have a little tone, we can press button A, button B, and it acts just like it will in real life.

To load it on the code, if you're using the load loaded on the board using the windows app, all we need to do is have the board connected and click download, and it will load it on the board automatically. And it'll reset.

If we're using a Windows browser, we need to go down to save. So we have this program called first program, we'll hit the Save button. And it'll save as a UF to file. So a UF to file is the program file type that runs on the Circuit Playground Express.

So to put it on your board, we'll enter bootloader mode, which the very center button on the Circuit Playground Express is the reset button. If you push it once, you'll get a red ring and then a green.Ring. And that's how you know that you're in bootloader mode. And once you're in bootloader mode, you'll have this C play boot drive appear on your computer. And that's your Circuit Playground Express.

So we'll drag our just downloaded first program you have to into the C play boot drive, it'll exit bootloader mode and now your program is installed on your Circuit Playground.

That's all there is to it. That concludes my tutorial on MakeCode for the Circuit Playground Express. Check out our tutorial section for more info on the Circuit Playground Express and MakeCode.

Thanks for watching.