﻿Hello, and welcome to Lesson Four of our Mobile App Development unit. I'm Ben and in this lesson, you're going to continue, with the mobile app development project, that you picked in Lesson Three. We're also going to look at, how we might handle user input. Okay, so all you'll need this lesson is your computer, a web browser, you'll also need access to CODE.ORG. So if you're under 13 and you haven't got an account, please ask your parent or care to sign you up with account or login with their credentials. Okay. So they're not including any distractions that you might have. And if you got a nice quiet place to work that would be absolutely brilliant. Okay, so when you're ready, let's get started. Okay, so this lesson, we're going to look at User Inputs in our Applied Programming Environment. We're also going to look at Decomposition and use that decomposition mindset of skill to break down your app projects into more manageable steps. Okay. And then hopefully once, get started with your app development, you're going to look at including some variables in your project. Okay, so let's get started and look at some user input. Okay. So user inputs. Now it's common for software applications to obtain data from the user. Okay. So I'd like to look at this login window, and I'm sure you've all seen a login window before. Okay. So I'd like to explore this example that you can see on the right hand side and think what data is being collected. How is it being collected and at what point does a user submit the data. Okay, so can you pause the video, think about the three questions and then unpause when you have an answer. Okay, so hopefully you've got an answer now. So let's go and have a look. Okay, so what we have here, you can see the username and password. Now that's where the user would enter in data, probably using a keyboard or some kind of touchscreen keyboard there okay. Now, we will describe those as being TextBoxes because they allow for the user to input a Text String. And what that means is? they're able to put in any combination of letters, symbols and numbers okay that are on the keyboard okay. And obviously that would be natural for username and password because the username password can be any combination of letters, numbers and symbols okay. Then you might have noticed that, we have the things where it says or okay. That's capturing data from the user and the users inputting their choice on that. Now there is what we call "checkboxes" coz they allow the user to indicate, a yes or no response okay. So um you can see if they're left blank that means no. But if they're selected or checked then that means also you might see a "tick" there or "cross" or something that means a user's indicating a yes response. Okay. Then one of the questions is how is the data captured?,ok Now you can see the login button. Now, that is linked to an event now we discussed events, particularly in lesson two and three at this unit. Where we talked about the fact that would then trigger some code. Okay, so that event once we click on the login button, triggers an event that will capture the data that's been inputted by the user okay. And therefore it can be processed however we code it to be processed. So, let's have a look at that okay. Now inside our App Loving Environment, we have this get text okay and in brackets it says . Now get text is a built in subroutine that collected text entered into a text box okay. Now to be replaced with the name given to the textbox. So if you remember when we built our Tappy Tap app sorry, then every time we made a textbox or label we gave it a name, so on okay?. So that's on the drop down where it says get text wherever you want to get text from, we will select that from the Select Change the "id" to the text box where we going to get text from, okay? And also you can see bar x now the x will be replaced with the variable name. So you can use an event handler to determine when to collect the data and what to do with it. Once it has been be collected and linked with the variable. So you can see the example here that we've got on the right hand side. That say, all event login. Okay, so I've created an event. And there's going to be login. So the "id" is on the call login, which might be linked to a button. And then once that event has been triggered, we have a variable called username. That's going to be linked to the get text and then link the "id" username. So you'd imagine in this example, there would be a textbox called "username". And therefore when the login button is being clicked, whatever text is in that username textbox is going to be stored against the username variable username, sorry. Okay. Hopefully that makes sense. So what I'd like you to do is, put into practise in a different context. Okay, so we have a theme park ticket up. Now the purpose of this office app, is to allow the user to enter the number adult and child tickets required. Now once the user selects the submit button and you can see on the image. You can see all the different names of the boxes. So we got a submit button, we got an adult text input, we got child text input, we got results label okay. So once a user selects that Submit button, the data will be captured and process and the total, we explained it in the results label okay. So now we know all of that. So basically, it's going to collect the data from the text boxes. Once we click Submit, it's going to hopefully do some calculation and then it's going to put the results in the results label. So I've got something called. A Parsons problem for you. Okay, our parsing problem is where you're given the lines of code needed to solve the problem, but they're all jumbled up in the wrong order. So what you have to do is you have to put them in the correct order. Okay, so I'd like you to head over to your worksheet now. Okay, so let me just pop up that side. I've had time to task one on your worksheet and re-order the blocks of code to form a working segment to code. Now new worksheets if you can't remember it describes what you need to achieve. When next slide interactively. Then you can drag and drop the lines of code into the correct order. Okay, so once you're confident you've got the correct order unpause the video and we'll go through the solution. Okay, so how did you get on with that? Hopefully you've got a working working segment the code, there's only one way we can find out if you got to correct. And that's to check the answers. Okay, so here's the solution now. So what we already had in places is on event block, which was linked to a submit button. So once that Submit button was clicked, what do we want to happen? Well, we wanted it to get the adult uhm, get the adult text input and get the child text inputs. Okay, now that did a calculation as you can see, so let's see, what happens is we've got a variable called Adult and it's going to get the text from Adult text box and times that value by 12. And stored up against the variable called Adult. Now, it didn't really matter , which order you did this in so if you did uhm, if you had bar child bar adult the other way around, then That would also be in Okay. Okay. But what's important is bar total can underneath that, because what that did, it took the value being held by the variable adult, it also took the value held by the variable child and it adds them together, okay? And it stores them under a new variable called Total. Okay, so that didn't need to be on the third line. And then the fourth line is very important that this was the last one which set text result label to Total. Okay. So once I click the submit button, there's a calculation done to work out the adult to child. And then there's a total variable that add those two values together and then we're showing them to the user in the results label using the variable total. Okay. So hopefully you got the answer to that. Now, let's go back to the project that you wanted to design yourself okay. So you were given a choice in lesson three of those four different types of apps and you picked one so hopefully you got your project diary and you've got your hand drawn designs and you've also designed some success criteria. Okay. But next time to decompose our problem, we don't want to get coding straightaway. Okay, we want to decompose our problem. Now we have done decomposition before in this unit. So let's just give ourselves a reminder about what decomposition is?. So Decomposition is, breaking a problem down into more manageable chunks. Now, as we talked about the beginning of the Tappy Tap app, programming an app for mobile devices is a really daunting task for anybody to undertake. Not just them, not just school aged children or pupils or students for secondary school okay, Okay. That would be a daunting task for anybody. So decomposition helps us break down these umh a larger problem into these more manageable chunks, and therefore making the task less daunting and more achievable. Okay. So that's give you a reminder of how I went about decomposing the tappy Tap app. Now when we decompose it, we had our success criteria, we use that to help us decompose the problem because we could then from the success criteria under description, work out what we needed to achieve. Now we did two levels of decomposition, we did more of a step one, which is a higher level decomposition, where we took, we took the large problem of making our Tappy tap app game and then breaking it down into maybe more manageable chunks. But on a high level, so what I mean by that is I know I need to create screens. For that first step. I know I needed a welcome screen, I also needed a gameplay and they also needed to do a song with the results screen. So that was my more high level decomposition. So straightaway, I've taken this task and still categorised it into these four steps. Now, I put it into four steps when you did it, you might have done it to three steps, you might have done it the five steps, there's no kind of rule on how many steps you need to decompose the problem into it very much depends on what you're trying to solve. So really, I would say for your projects, maybe four or five, but really is whatever you feel comfortable with. Okay, so that's my more high level task to do. Now, designing all the screens. Well, let's say gameplay let's use gameplay as an example. Gameplay in itself again, there's a lot to achieve in gameplay. So gameplay needs decomposing further. And you can see examples where I've done some decomposition, for example screens. So screen was a step and i decompose up further by creating a by saying, right, I need to create screens. So how am I going to do that? Well, I need to create three empty screen. So work with give each one an appropriate name. And then my next decompose step, is welcome screen. Again, there's lots of things to achieve with my welcome screen. So I'll decompose it further. So once it gets my welcome screen, I need to design the welcome screen. So the graphical user interface elements to it. So adding images, labels and buttons. So that was the graphical user interface part, but they also needed to code it. So they had a button that when it clicked on the button, it moves to the game screen. So this is just an example and of how I have decomposed it. So I've taken more of a higher level, where I've maybe made three or four or five steps, and then free from the steps, have decomposed it further. I'm making a question have extra steps to help remind me and work through each of these steps. uhm, you know in turn, maybe make a little to do list a checklist of things that we need to achieve. Okay? But either way, rather than having this larger problem, I've now got a smaller problem, I can tackle each one in turn, and just deal with one thing at a time. Okay, so what I'd like you to do now is I would like you to pause the video and like to head over to your project diary not your worksheet, go to your project entirely that you saved in lesson three. And I would like you to go to the decomposition slide, and then decompose your problem. So do some high level decomposition, but do some little further decomposition where you take it down into smaller chunks that you can tackle in turn. Ok. Use your success criteria. You can use your project description well to help you with this. Okay, and remember it there really is no right or wrong answer to this, just break down this problem and make it more achievable for you. Okay, so good luck with that, have fun with it. And once you've decomposed it, then you can unpause the video, and we'll continue. Right So, we've done an awful lot of work already without doing any coding whatsoever. So you've got your success criteria, you've got your hands on designs, now you decompose the problem. So really, it's time for us to get going. Okay? So it is time for you to develop your app. So like, it says on the screen, now that you have decompose the problem, and you have designed some screens, you're ready to start developing. So your steps are, I would like you to sign into code.org, So remember, if you don't have an account ask your parents or care to sign you in. Okay, so get your credentials, username and password, I'd like to start a new project. So far, we've been working with some projects that have been created for you. So you need to go through the step of creating a new project. So select projects, and then click on App Lab. There's straightaway in the top left hand side, I'd like to there's the option to rename your projects do that straightaway Okay. And I'd like to rename the same name as your app title Okay? That's the first step that I will like to do. So uhm all I like to do is so, start the project. And then after that it is just a case of you working through your decomposed steps. Now, I would really like you to enjoy this. And coz this is your app, and you can completely make it your own. you've got some design briefs to meet sorry, this is your app. So do make it uniquely yours okay?. Now, there should be nothing here, that really takes you too much by surprise, or something that we haven't yet done. Okay? So don't be afraid to go back, to what you achieved in Lesson One, two, and three and really open this project and look at the code that you wrote. And that will really help you. Now we've also got some videos and lesson two and three that you might want to revisit to see how we did certain things. But if you're not feeling comfortable with that yet, don't be afraid just in this lesson to really focus on maybe just creating the graphical user interface elements to your app. Okay, now is a rough guide, I'd recommend that you spend around 20 minutes on this, but Some that's just a rough guide to what you Feel comfortable in. And this is lesson four. We're going to be continuing with this in lesson five. And we're also going to be continuing with with it for a bit of lesson six as well. So you don't need to finish it up in this lesson. Okay, the 20 minutes is probably a good guide. So if you pause the video now, start your project and have worked through your decomposed steps and have fun. Okay, so pause the video and I'll see when you when you spend 20 minutes on it. Okay, so we achieved that well done, you spent for around 20 minutes on that app. And hopefully by now as a minimum, you've got a welcome screen or home screen, and you created some of the design elements to that. So you might have a title or label an image of Boston. So if you've managed that, that's a really two thumbs up from me. Okay. Now, what I'd like to finish off this lesson is to go to the your new project diary, and go to your milestone one slide. Okay, Now at this stage, it's really important that you document what you've done. Now you'd be surprised about how much you forget even in one or two days time about what you achieve. In this lesson, so it's really helpful in this lesson for your future self to document what you've done. So I'd like to add a screenshot of your code or design window it doesn't need to be both, um whichever one you think is going to be most helpful to you next lesson. I'd like to write a few sentences just describing what you've achieved in this lesson, and maybe describe any problems that you have to overcome. Because if you've overcome some problems, you don't want spend a bit of time next lesson, having the same problem and work and trying re-work out how you solved it. document how you solved it, and that'll help you remember in future lesson, and how to avoid the mistake or how to correct it, if you if you do make that mistake again. Okay?. And then finally, again, write a note to your future self, write down what you need to focus your attention on in next lesson. So it may well be that you finished this section so you think it would make sense if you did this bit next. Okay, so document that. Because next lesson, we'll spend a little bit time, looking back at this milestone document and making a plan for what you're going to achieve in that lesson. Okay?So again, can you head over to your project diary, so not your worksheet, go to your project diary, find that your master in one slide, and then see if you can write down a few sentences about what you've achieved. Okay? so pause the video and then unpause when you're done. Right, that's all for this lesson. And hopefully you feel a really nice sense of achievement that you got started on your app. So it's not just case planning anymore. we've rolled our sleeves up, and now we're actually designing your own app. Okay Now if you remember, in last lesson, we were able to share your Tappy Tap app . So if if you want to ask, please ask your parent or care if you want to do that. We would love to see your app. We'd also love to see the design what you've done and what stages you're in how did you decompose that problem? So if you'd like to share all that with us, please ask your parents or care to share your work on Instagram, Facebook or Twitter and tagging @oaknational and using the #LearnwithOak. So next lesson, We will continue developing your app. We'll continue working through your decomposed steps as well. Okay, so I'm looking forward to it and i hope you are too, and I'll see you next time.

Materials from the Teach Computing Curriculum created by the National Centre for Computing Education and Code org

In the following image, what type of input option do you see at point A?

In the following image, what type of input option do you see at point B?

Looking at the code below, what happens after the "login" button has been clicked?

User input –

In this lesson, we will explore how user input is captured. We will then start to develop our own apps by decomposing the task into more managable steps.

Lesson overview:User input

Core Content

Mobile app development: