 And hello everyone. Today, I'm going to talk to you about Code.org's App Lab. I'm going to show you how to make a very simple, it looks like a cell phone app, to convert Celsius to Fahrenheit. And this is in JavaScript, but it's also done with blocks, so you don't really have to understand exactly how JavaScript works. It's a really cool system, so let's get started here. Now Code.org is a free website that has tons of coding resources. I use this with my students from grade five and up. It's really awesome, has a lot of cool things, and best of all, it's free. They have a lot of tutorials that you can go through. I suggest, you know, signing up, creating an account. I've already done that. I'm in my account. So assuming you've gotten to that point, what I'm going to do is I'm going to go ahead and hit Create. I'm going to go to App Lab. Now there is a site place where it will teach you how to use App Lab. I definitely recommend you check that out when you get a chance. But if you've checked that out, or you just want to start here with me, that is fine. So I'm going to go ahead and click App Lab. And what it does is it creates a new project. So I'm going to go ahead and rename that. And I'm going to call this, let's see, Tokyo EdTech C2F. Okay, very exciting. Celsius to Fahrenheit. Sorry, I hit Save there. And when you come into the App Lab, what you see is a screen that looks like this. And you've got your, you know, it looks like a cell phone. You've got your toolbox here with all of your different types of data structures and functions and all these kinds of different things that you can do. And some of these are, you know, really high levels and there's a little bit more low level. We're going to stick the high level stuff. And over here you have your workspace. So the first thing I always tell my students to do is if we're going to design an app, start with the design. And so you can see here we're on the screen. So I'm going to go ahead and click the screen. Sorry, I'm going to click on Design first. And then you can see where I'm on the screen. Now what I like to do is I like to give everything a good name. So in this case, I should say an informative name. So in this case I've got SCR because it's a screen and it's going to be our main screen. Now you can see here I've got all kinds of different GUI widgets. We're not going to look at all of them, but we'll look at a couple of them today. You also can change your default theme to the ones they have built in. I'm just going to keep it with the default. But you guys can go ahead and play around with that. So I've got my first screen. And if I go ahead and click Run, you can see nothing happens because we haven't done anything really yet. So I'm going to go back to here. And the first thing I want to put into here is a label. So I'm going to go ahead and just drag this over. You'll see where it says ID. Now I'm really particular about this. So I'm going to call this LBL because it's a label. And I'm going to call this title because it's basically where it is. I'm going to put Celsius to fair and height. Now I can never remember if it's a C or an S, but we'll just leave it the way it is. Now you can see here I can change the size of this. Oops, I can drag it around. If I click, if I can hit the corner there, you can see I can make the box a little bit bigger. Then over here, I can change text color. I can change background color. I can change the font. And I'm going to go ahead and make Comic. Did I miss Comic? Yeah, I'll leave it Comic. And then I can go ahead and make my... I don't think it's Comic, but it doesn't matter, I guess. That's ugly. Now that the fonts are working. Maybe it's because I'm on Linux, I'm not getting quite the set that I would like. So I'll go with Celsius, or with Times, there we go. And then I can also text alignment. I can make it so that it centers the text. And I'm just going to go ahead and make this a little bigger so I can see it. And I'm just going to center it on the screen. So now if I hit Run, I have a nice little label, and this is what my app looks like. So what I'm going to do is I'm going to have a space here where I can enter Celsius. And I have a space here where I can enter fair and height. Where I can actually get the result in fair and height. So what I'm going to do here is I'm going to go ahead and do Label. I'm going to go ahead and do another label. And this first label, I'm going to call label Celsius. I guess we should use the S, I think it's S. Celsius. And then here, and then I'm going to make the text Celsius. And then I'm going to go ahead and same thing here. This label three doesn't really tell me much. So I'm going to call this fair and height. Now if you're a little bit more on the lazy side, you can just type it. Make it LBLF because I think we know what that is. And fair and height. And then what I'm going to do over here is I'm going to try and get these lined up a little bit better. And so it looks a little bit better like that. Now again, we can go ahead and play with the fonts and the size. Let's go make these 20 and 20. Okay, that's good enough. Now what I want to do is I want to make a text input here. And it's a little bit big. So let's go ahead and make that smaller. And this is where I'm going to go ahead and input my Celsius. I'm going to call this, you can call it TEXT. I sometimes call it TXT. But if it's easier, we'll call it text Celsius. And the placeholder is just a value that's there at the beginning. So I'm going to make it 0.0. Same thing, I'll make the font size 20 so it matches everything else. And then what I can do is I can just go ahead and click this and duplicate it. And then just kind of try and line everything up here a little bit. And again, I'm going to change the name here, TEXT, fair and height. Now again, if I go ahead and run my app, I can actually type in here. That doesn't want to do much. So I'm going to hit reset. So notice how I'm starting with design. I haven't done anything remotely related to coding. So I'm going to add one more thing, a button. And this is the button that's going to convert everything. So I'm going to call this BTN for button, convert. And I'm going to call it CF because it's Celsius to fair and height. So convert C to F. And we go ahead and make that a little wider. And it kind of looks kind of centered. I'm basically happy with that. I'm going to go ahead and run it. And then so if I enter, let's see, 100 Celsius, I click convert C to F. Of course nothing happens because we haven't coded it. So this is the end of the design phase. I've designed my app the way I want it to look. Now I could move some stuff around. I mean, this is not quite centered and all that sort of thing. But it's been an hour on that part of it. So the design is good. So I've got a label called title. I've got a label for Celsius. I've got a label for fair and height. I've got a text for Celsius. I've got a text box, I should say, or text input for fair and height. And I've got a button to convert Celsius to fair and height. Now I'm going to go over to my code. And there are a ton of different options here. And we're going to be using a couple of those. The first one is called onEvent. And this is kind of one of the standard things, event driven programming. So when I run this program, nothing really happens. And I'm getting an error here because this hasn't been completed. So as a user, I'm going to be doing things. These are called events. So the only event that really matters in this particular case is clicking this button. So over here onEvent, now here's a list of all these different widgets, all these different elements of our application. So when I click, I'm going to be doing this thing. This is button convert CF. This is why I give everything a really good name. So I know I'm looking for a button and everything's in alphabetical order. So all the buttons will be together. All the labels will be together. Screens will be together. And text inputs will be together, et cetera, et cetera. So it already has click here. So when I click, click, what I want to do is I want to take this value from this text input. So one more time, I want to take this value from this text input. So I'm going to make a variable. And since this is Celsius, I'm going to call this C. And I'm going to go back to UI controls. These are the user interface controls. And I'm going to get property. I'm going to put that right in there. So I'm going to go into, again, this is a text input box. It's Celsius. I'm going to go down to text Celsius. And I don't care about the width of this box. I care about the text inside of it. So whatever value is in here is now in C. Now you see here, you've got this little yellow triangle. This is just a warning. It says C is defined, but it's not called in your program. So we've created this variable, but we haven't done anything with it. It's just a warning to let you know. The program will still run without it. It's just telling you that it doesn't do anything. So what I need to do now is to convert. So I'm going to go to var, which makes a new variable. Let's say f. And the formula is f times 9 divided by 5 plus 32. This is the formula to convert. Oops, it should be f. It should be c. Thank you. Thank you to whoever was thinking that. And you notice as I hit tab there, and it actually converted this to block version. So it's Celsius times 9 divided by 5. And it doesn't really matter how this is. Let me show you this. If I go to show text, it converts it into JavaScript. So I can go ahead and do that as well if I wanted to, but probably doesn't matter mathematically. So Celsius times 9 divided by 5, that whole value plus 32. I got a little triangle because f is defined, but it's not called in the program. So the last thing I want to do is I want to put this f value into this text box. So this is going to be set property. So I'm going to set the property of this text box, which we call text Fahrenheit, to, well, set the text of the text box to f. Now notice I'm getting rid of the quotation marks. So this is my code. I'm going to go ahead and run this, reset and run. Now when I click this button, it's going to pull this value out, so the text out of text Celsius, and assign that to C. Then it's going to make a new variable called Fahrenheit, which is this times 9 over 5, the whole thing plus 32. That's the formula. And then it's going to take this f and put that into this box. Let me go ahead and click that. You can see that 0.0 Celsius is 32 Fahrenheit. That is correct. If I do 100 Celsius, it should give us 212 Fahrenheit. You can see those are some common values that you can test. Another interesting one to test is negative 40. And what's that in Fahrenheit? Negative 40. Negative 40 is where Celsius and Fahrenheit are equal to each other. So I tested those three values. Those are known values. So I'm pretty confident that this app, that this is going to work. I'm pretty confident that I've done this correctly. So let me review this one more time. I started out with the design. So I've got my first screen. I gave it a name that was meaningful, SCR main. It could be like SCR log in. It could be SCR log out. You could have lots of different screens in your app. I made a label so I knew what my app was. I called that title. And notice I put LBL before that just so all the labels would be put together. So I've got three labels, Celsius Fahrenheit and title. I've got two text input boxes, text Celsius, text Fahrenheit. I've got one button, button convert CF. And it's convert CF because that's what it's supposed to do. Now, the idea of what I did with my students is I showed them how to do this. I said, okay, your job now is to add the button convert Fahrenheit to Celsius. So that's a challenge that I would give to you watching at home as well. Then I went over to the code section. And I use the on event control over here. It's at the top. And I chose the button. So when I click the button, now there's other ones. There's all kinds of different ones. I created a variable called Celsius. And that comes from this text box. I created a variable called F for Fahrenheit. And this is just the form that's Celsius times nine divided by five, the whole thing, plus 32. Then I took that F and I put that back into here. One of the big mistakes that beginners make is they leave the quotation marks in here. So let me show you what happens if I do that. Okay, the F, it actually prints an F. If I take out the quotation marks and reset and run, it will print the value of F. And again, for those of you who are a little bit more advanced and have done maybe a little bit of JavaScript before, you can click on show text. And you can actually just type in all of this stuff instead of doing the drag and drop. It's actually a really, really, really powerful system. And you can do so much with this. What's great about this is you can share it. You can click remix, which means make a copy. Other people can remix the stuff that you shared. So be careful not putting any personal information in here. You can actually share it, send it to a cell phone, and then you can run it on your cell phone browser. It looks like you have a little bit of an app actually in your phone. It's very, very cool. And if you're going to go on later to learn more about app programming, this is the exact same process you go through. You have a design. You have these different elements, GUI, graphical user interface elements that you put on your screen. You give them names, give them properties, and then you use the code to glue it all together. But yeah, I can't say enough good things about the app lab from code.org. So thank you to all those people who ever has created this. So that is that. That's what I wanted to show you today. Now you know how to convert Celsius to Fahrenheit. You can create a simple app to do almost any conversion. And go ahead and play around with it. If you have more tutorials on the code.org website, we'll get you started and give you an idea of how to use it in a step-by-step fashion. So take care and keep on coding.