Programming with Microsoft MakeCode and Circuit Playground Express | Azure Developer Streams

, , Leave a comment


(music)>>Okay welcome back to.>>Welcome back to the
stream, I’m dad AKA Michael.>>I’m Ren AKA dad’s daughter.>>Dad’s daughter that’s correct. I work on Azure, I’m also a full time dad. This is our show.>>Yeah our show, welcome.>>I was gonna give you the
opportunity to play something before we really start
rocking and rolling. Are you ready, alright lets hear it. (music) Wow, alright. Well all I can say is
that was pretty darn cool.>>Oh yeah.>>Yeah.
>>Yeah.>>The first thing that I kinda
had on the agenda here was that I was at Ignite, as you know Ren.>>Yep.>>While I was there I
actually got my hands on this Circuit Playground express.>>Ooh.>>So this is the actual chip
or the board that I was given and you can open it
kinda here from the top and here it gives you a tiny
bit of like instructions. By the way you can buy these things, I think there like $20 – $25. On the board itself there’s
quite a bit of things that I know you can do, I know it’s got an A and a B
button that you can press down. I also know it has the
ability to play sounds and you can program this and it’s apparently very
easy to get to programing. By the way on the front you
got this little micro USB.>>Are we gonna use it?>>What were gonna do is were gonna look at actually programing one of these today.>>Oo la la.>>And we may plug this
one in, I think I may have a cable around here
that we can plug it in. But what’s kinda cool is that even if you don’t have one of these and maybe you have somebody like Ren that’s interested and eager to learn, you can actually start learning without actually buying this board. We’re gonna kinda walk through that. Until the back I thought
this was like really cool. On the back it say’s something like “This board belongs to” and you can like write your name in there.>>I could write Ren.>>So I want to talk to you
a little bit about that. First off I want to go ahead
and take a look at this thing called http://www.makecode.com, if you are absolutely brand
new to the makers space or maybe you just got
one of these devices. They gave out, I don’t
know a couple of thousand,>>Minecraft.
>>at those Adafruit classes, or maybe you’re just interested in this and maybe you like a project
kinda do with the family, again they give me nothing for this but you can pick up one of these boards,>>Can I do this one?>>and you really get started super fast.>>Can we do Minecraft?>>So go ahead and click on the one that says “Circuit Playground Express” Once you click on it this
is completely tailored to for people that has this actual device. There’s different things that you can do, and you can see all these different ways that people have already
started working with it. These are the full blown tutorials, there’s also things like
Reddit discussion boards and other things like
this looks kinda cool, like a music box, Jake the hotdog.>>Jake the hotdog, lives
in fally, falala la la la–>>Let’s just show this
one, we’ll see right here. So this. Oh, it’s gonna like explode. So not only can you kinda like
do these tutorials in here which we’re about to look at, but you can also download tutorials if you actually have a physical device. And my kinda like first step
that we could do that we could do that would be pretty awesome, would be to come back
again here to the Siren. I’m just gonna let you drive.>>What?>>I’m letting you drive.>>Do I start tutorial?>>On the mouse yep.>>This is gonna be fun!>>It is gonna be fun?>>Okay so, oh this is
what we do at school.>>What you’re talking about maybe more along the lines towards Scratch?>>We don’t do, yeah we
don’t do this, we do Scratch.>>Do you know scratch?>>Yeah, I loved it.>>So you’ve already done, you’ve already done Scratch programming.>>Yeah and there’s this–>>But you haven’t done this type.>>No.
>>Okay.>>So, what would you do first?>>So before we get completely started, this is one of the
tutorials to make it a siren and inside of this, you’ll notice that this little device here.>>Yeah.>>You can actually press this button, you can like shake it once
you get some code put in here What I think we should
do, we should take a look at actually building one of these out, so basically if you don’t
have a physical device, then you can use this
to kind of emulate that.>>So–>>So if you know scratch, then more than likely you may know this, so read the directions up there
and lets just, lets do one.>>So first it says, go to input.>>Yep.>>Then it says.>>Get the onShake event.>>Get the onShake.>>Sweet.>>Okay now, put it
below the work, so right.>>I think you need to put it inside that forever block so move it up, you may have to write more code. so just go, its fine, go ahead and drop it down a little bit.>>Okay then it says, find a
show ring, so where was that?>>So it is on this onShake method and then it says “Find a show ring.” So go to light, there you go.>>And now you can pick your–>>And it says, get a show ring, so pull that show ring out,
like grab it, the whole thing. Yep, perfect, now put it
inside of that onShake event Yeah, onShake, that one.>>That one.>>What you see is is that
we’ve got onShake event when you shake it, its
going to show a ring, and there is more than this, so think of this one as the onShake, but you can also do things like
tilt up, tilt down, face up, so think of this as
like there’s other ways that you can invoke this method, and so, as you see the
rings that are on this.>>Oh yeah, those little things.>>You got these little rings, you’ve got one, two three, four, five.>>So, if you shake it
will it show up colors?>>Well they’re building a siren, so–>>Ohhhh, a siren.>>Yeah, this is gonna be
a siren, so its just going to do its normal kind
of flashing, et cetera.>>Find a show ring so–>>So it says, we’ve completed.>>Oh yeah.>>The input, the onShake block, and then we found the show ring, and we placed it in the onShake method, so now click the button next.>>Next, I like controlling
this, use the color palette to select your color, you’ll
pick one of the colors from the middle of the ring. Go around the ring and touch each pixel to change them to color,
lets use blue for now.>>Okay, so perfect.>>Just like that?>>That’s really good,
pick one of the colors, go around the ring to touch each pixel, so you could finish up going
around the full circle, so use blue for now.>>Then we can change it later?>>Yeah, okay.>>Next, we’ll add another
ring to make an animation. Drag another show ring block and place it right under the first one. So show ring, so go to light.>>Yep go to light.>>And then pick it out.>>Show ring, pull the
whole show ring out, yep.>>Do we need this?>>Yeah we do.>>Forever block?>>And, and we’ll talk
about it, once we get in there and do it.>>Okay, now we can go into the next one, now lets make the lights flash. Go to loops and grab the repeat block. Drag it over to your show ring blocks until it surrounds inside the onShake. So it said, “Go to loops.”.>>Yep.>>And then go to repeat
and then place it where?>>Okay.>>And then place it under the
show ring, can we scroll down?>>Yes you can, absolutely. so it says repeat, go to loops,
hit the repeat, all right.>>And put it–
>>Drag it over, actually it said drag it over
your two show ring blocks.>>Drag it over, I did.>>Yeah, well, so you dragged
it under, it’s saying go over. Yep, pull it up, no, no, yeah, yeah, and where it says show ring,
just put it on top part, a little bit higher. Yeah.>>Oh, oh.>>Now this is starting to
make a little bit more sense. We’re on step four right
now but what you can see is is that, it’s saying
on the shake event, I want you to repeat this
four times, and so this says do, this is a thing
called a do while loop. So, do show ring as a blue, and then show the ring as red four times, so just like a police
officer or like an ambulance, or somebody like that. So it said, now lets
make the lights flash. Go to loops, and repeat
block, which we just did we dragged it over, and
put them inside the onShake so now we’re ready to
go ahead and hit next.>>Hey, lets add some sound. From the music drawer,
drag out a play sound block and place it just before
the repeat loop block. Okay, so go to music, and then play sound, and then right before this.>>Yep, that’s pretty much it.>>Click on the part
of the play sound block that shows the name of the sound. Change it to the siren sound. Siren, and finally put
clear at the end of onShake. Clear?>>Its gonna be inside of the input.>>Input, where’s that at?>>This input right here. Oh I’m sorry I think
this is the light one, so get rid of that, I think
you can just click it, yeah. Drop it down there, and now go to music. Go back to lot, I’m just, there it is.>>Clear?>>Yeah, and so that clear
goes down to the bottom. Yeah, lets see if that’s right>>I don’t think its right.>>You don’t think its right?>>Wait on the onShake,
so after, after that.>>Okay.>>OnShake.>>Go ahead and hit next. What’s interesting here Ren,
is that we can’t actually– (sound) (laughs)>>We can shake it, so
yes we did not leave that forever block, so
go ahead and click on it. (sound)>>So what you just did, was
you were shaking the emulator and in turn by shaking the emulator, it’s performing your code, now look at what your code is so far.>>This?>>Yeah, and see if
that makes sense to you.>>’Cause its doing the instructions that you just had for it.>>Yeah makes sense.>>Okay, so there is a method
that is called onShake. What happens if you
don’t shake the device?>>Then it doesn’t do it.>>That’s very, very true. What happens if you shake it twice.>>I don’t know, lets see. (sound)>>Very cool, so ah.>>Like in a row. (sound)>>It doesn’t ah, so it does clear it out. So down at the bottom, it clears it out. So once you’ve performed
one shake, you would have to shake it again basically
in order to be able to–>>What if we take it out?>>Try it, that’s the way
to do it, is to try it. (sound)>>Why did it stop there? Look it still lit up though. See how the lights are still lit up.>>I know, it’s still up.>>It hasn’t been cleared out, so drop that clear back down in there. Now try shaking it again. (sound)>>See how the lights are
off, try not to shake it.>>Okay lets try something else. What if you wanted to
repeat that eight times? What would you do to do it eight times?>>You’d press this,
then you’d press eight. And then you do that,
and then lets shake it. (sound)>>So believe it or not.>>I just–>>You’ve just started programming
for this Adafruit device.>>So can you activate this to that?>>You can, all of the code
that was used to create that you can actually put
on this little bitty device.>>So if you download it.>>So click on that button that says, “Click download to transfer your code “to the Adafruit Circuit
Express”, click download.>>May have to give it a second or two. Click it, and it should be downloading! Ah that download, we just had, that wasn’t actually a
button to download it. Take the USB cable you
connected to your computer. Plug it in, press the reset
button, this is interesting.>>Do we have a plug?>>I may have to go find one, what its saying is plug this
in press the reset button, click and drag the file you
downloaded onto CPLAYBOOT. I think we are gonna do
that, but before we do that were gonna get, have
a stand up kind of break, for a minute and I’m
gonna do some push ups and I’ll let you do a few.>>This is fun.>>And then I’m going,
I’m will, I’m gonna find a quick cable that we can use.>>I want to make one
with different colors.>>Well you know, you’ll be
able to make anything you want.>>Can I have this app dad, or whatever it is called, or website?>>Yes, this is yours, and
the device is also yours.>>What do you mean, what device?>>This, it also has–>>It’s mine?>>Yeah, it also has a little battery and with that little
battery, I think it will run without power, without something
connected to it, I believe.>>Wait so can you activate
it, like the only way you can activate it is on here right?>>You have to plug it in,
and we’re about to plug it in.>>Oh yeah like right there.>>We’re about to go look
for a quick cable, USB cable but before we do that, its
kind of our time to get up and stretch a little bit,
let’s do some push ups. Twenty! How many did you do?>>Ten!>>Do you wanna do like ten more?>>No.>>What were gonna do first,
is were gonna plug this in. (music)>>What, wait can I see it?>>Look at that. Come back over here, and so just by plugging this device in, it wound up giving us all these colors, I’ve done nothing else.
>>This is mine.>>Also, went ahead and
it found the device, I’m using Windows here, but
obviously works everywhere else and the instructions
that it had here was–>>Plug it in.>>Press the reset button.>>Did you press it?>>When the lights turn green, and then it said drag it onto CPLAYBOOT, oh it says setting up device,
lets give it a second.>>Device is ready.>>Here we go, CPLAYBOOT,
so lets go into downloads and this was the one that
we did, and lets copy it and then we are gonna go
back down into CPLAYBOOT and then were gonna paste it. (sound)>>There you go, its working
now, isn’t that awesome? Alright, now shake it. (sound) There you go. So what you just created,
right over here in makecode on this screen right here,
it actually just made it it made it onto the device. So, lets try something else. What I’d like to do is exit this tutorial, and it saved it
automatically, which is great. And then I’d like to click on new project. So far tonight, we kinda
started up playing with this. You’ve seen how you can build and how you can program
for this by yourself.>>And its very fun.>>Its a ton of fun, so what
I was thinking we could do, since we’ve already kind of
done the little like siren. Maybe kind of make up our own version, of what we’d like to do, with this.>>You know–>>Can you think of something
that you would like to do with this because I can think of one, which may be with these buttons, so it has two buttons, like
a button A and a button 2. Button A and button B. I was thinking that you could actually, click one of those buttons
and make it do something. So here’s an example of using the button. A simple game of chance, this
is totally what we want to do. ‘Cause we wanna press the button. Lets read out the instructions, and lets just rock and roll with it.>>I think its in pink because
its surrounded by pink?>>Yep.>>So on button A click
and then add to code that runs with the button, what?>>So it says drag out, on
button A click to add code that runs when A is pressed, that’s it.>>Oh so like that button A?>>Yeah so look right
here on this screen also, this is button A.>>That’s like button
A and that’s button B.>>So when you press this one, it needs to perform some sort of action.>>It says grab an if then else and then put inside the A button to click. We’ll use this, along a
random number to decide if you’re gonna win or lose.>>Okay, logic, so when we think of these if then else statements, we think of these as these
are conditional statements. If this light is purple then I want you to perform this function, but if its any other color,
such as gray or if it’s yellow.>>Blue.>>Then it falls into
the other block, right?>>Yeah.>>So lets go try one of
theses so it says “if true”>>Then else.>>Actually go ahead and hit next. I think its gonna use a random integer. So go over to logic, so this
is a comparison operator. So the one that it wanted you
to pick, was yep that one. I think it was that one
>>Where do we put it?>>Yeah yeah, use it to
replace the true condition, so that goes inside of the true, okay? So at this point you
can think of this being when you click button A,
if blank number is less than another number then
we’re gonna perform some code. So lets just go ahead and hit next and then we’ll go through it. Alright in the math tool box drawer, pick out a random number block and place it into the first slot, okay? It is using random, and it says–>>This–>>Type five in the second slot–>>This one or this one?>>So it says in the math
tool box, in the first slot.>>Here?>>Zero to zero in the
second slot, type five, it goes over there,
yeah click right there. Five, and now click back
over, in that slot field. Okay if the number is less than five, then it will run the code in the if part, but if its greater, now I think
we can go on the hit next.>>So place sound, and put
it in the show animation. So where would that be?>>It says drag out the play
sounds, so you can just you can put that anywhere, like right there, and then get the show animation block, it’s probably inside like logic. There it is, pull that one out.>>Okay and then just set it down?>>Uh huh, set it down right there. It says drag to create
a win and lose effect. You pick the sounds, okay? So what we want to do is those blocks, these would go inside the if statement.>>Both of them?>>Yep, well keep this one as a winner. So think of this as
maybe as like the winner, it’s just a game of chance. So, a winner you may wanna
do something like play sound go wa, wa, wa.>>No its like wa, wa, waa.>>Oh that’s what that was?>>No I don’t know.>>Okay, now do that same
thing for the else statement. If it’s less than five, you
won, otherwise you lost.>>So put both of these in here?>>Two new ones. Yep, bring that one in, and put it yeah. That’s fine. Perfect, and that one should be fine. And now click next, so before
we’re gonna try our luck. So go ahead and hit A on the emulator.>>I don’t have A, oh A.>>Yeah. (sound) (sound) (sound)>>Alright, because they are
both playing the same sound so you wanna change the sounds
to be a little bit different. On this one we will just do power down. That one, and then if
its correct, play sound. Go back up to this one,
play sound right here. And that sound were gonna use power up. Click on that one and then go power up. Yep and now press the A
button on the emulator. (sound)>>Okay.>>That sounds good. (sound)>>That means you lost. So hit A. (sound)>>Now hit it again.>>You won? (sound)>>Another win. (sound)>>Lost.>>And what you can do,
see where this says 500 in this that’s 500 milliseconds.>>Oh.>>Which equals five seconds. You could make the winning beep 500, and then the losing beep could be like 1.>>Okay lets play it. (sound) (sound) (sound) (sound) (sound)>>And for this animation>>Oh like you’re running away?>>Yep so lets go here. (sound) (sound)>>It just turns red?>>It turned it all red. (sound)>>That like rainbows a good thing.>>Lets try this one. (sound) (sound) (sound)
>>We’re winning! (sound)>>So different sets of like colors there can you put the animation before the sound to make like the device
is thinking before you get the answer? That’s actually a really great idea. So, somebody in the chat
just helped you out. Helped me out too, by suggesting moving this animation first. So they actually think that we’re working and doing something before
we actually play the sound.>>Oh yeah.>>So now go ahead and press
A again, lets try it again. (sound)
>>That makes more sense. (sound)>>You know what we would need to do? We would need to more than likely, add an additional delay here. So like this, if we maybe
put like two seconds, or like one second or something. Hit A. (sound)
>>There we go, there we go.>>It showed the color for–>>Now try it again.>>It showed the color for two seconds. (sound)>>And that’s what its supposed to do. You just found a bug in the program, do you know what that bug
is, that you just found?>>That this is before?>>If you look on the
device itself you see that it is actually, still,
there’s still a color. So how would you fix that, how
do you clear out the value? In the last exercise, we were
able to use this functionality and this functionality was a
clear, do you remember a clear?>>Oh yeah, its not on here.>>They may not have it in here
because this is a tutorial, but there is a clear method. Lets put this on our device, and we’ll wrap up a few
things then for the night. On the device itself there is
like a little reset button, so I’m gonna hit that reset button, while it’s doing that I’m
gonna hit this download button, by doing that we now
have the actual project. So I’m gonna go back in here to downloads, this is the one we just
created, I’m gonna copy it, and I’m gonna come back
over here to the PLAYBOOT. We’re gonna paste it, now that we paste it looks like it automatically
refreshes the device. So here is the current device. Hit the A button. (sound)>>Now hit it again.
(sound)>>That’s cool.>>And remember, we had
a bug that was in this and the bug leaves the
lights on just like that.>>Forever?>>Yeah, it would leave
them on there forever. Press the button. (sound) (sound) (sound)>>So with that said we’re gonna
call it a night right there. Nothing but love for all of the people
that’s been supporting us. With that being said, do you
want to give us an outro?>>Bye guys, hope you had
a good time with us today and had a lot of fun, you
can build your own too, if you get this, or you can just play
around with it on there.

 

Leave a Reply