Lesson video

Hi, everyone.

My name is Mrs. Welsh and today we'll be learning about user inputs and variables.

Don't worry if this is new to you, I'll be guiding you through each step.

So let's get started.

Welcome to today's lesson from the unit, "Mobile App Development".

This lesson is called, "User Inputs and Variables".

By the end of the lesson, you'll be able to use variables and user input to create interactivity in an app.

So let's get started.

Before we begin the lesson, let's go over some keywords we'll be using during the session.

Variable, a named piece of data stored in a memory location on a computer.

Input, data that is sent to a programme to be processed.

Data type, the kind of information stored in a variable.

During today's lesson, we're going to learn how to explain how user input can be used in an app and how to use variables to store and display user input.

So let's begin with explaining how user input can be used in an app.

User input is any information the user gives to the app.

When you sign into an app, you type in your username and password.

This is user input.

And for the example there we can see the app asking, "What is your username?" and the user typing in Sam1234, and that would be the user input.

Apps use special elements to get user input.

The most common elements are text input for typing in names, ages and answers, buttons for choosing or submitting, dropdown menus for selecting from a list and radio buttons for yes or no answers or other limited choices.

Let's have a look at a question.

Which of these elements can collect user input? A, a text box, B, a label, C, a button, D, an image? If you need to pause the video now to select your answers and read back through the question, do so now.

So what did you get? Which ones did you think collect user input? If you said A, text box and C, button, you would be correct.

Both of these can collect user input.

So if you've got one of those, well done.

Just make sure that you read the question carefully as it says, "Which of these elements?" So it means you could have selected more than one and if you've got both, excellent job, well done.

And let's move on.

User input makes the app interactive.

It means the app can respond to what the user enters.

Without user input, everybody is gonna see the same thing in the app and the app will not respond or adapt to what the user does.

With user input, the app can remember what the user has said and it can also give answers that feel more personalised.

Examples of apps using user input.

A quiz app uses your answers to give you a score and it may even give you feedback.

A shopping app uses your choices to show the right items. A game uses your choices to change what happens next.

So if you think about the apps that you use, particularly if you use any shopping apps or gaming apps, you will notice that what you see may be very different to what your friend or another user will see, despite the fact you are both using the same app.

Let's have a look at another question.

Why do apps collect user input? A, to make the app look colourful, B, so the app can close quickly, C, to stop the user from using the app, D, to respond to what the user says? If you need to pause the video so you can read back over the question and select your answer, do so now.

So what answer did we get? If you selected D, to respond to what the user says, you would be correct.

Having a look at task A.

Question one.

Write two full sentences explaining how user input is used in apps.

You can use the sentence starters below to help you begin your answer.

If you need to pause the video now so you can read back through the question and write your answer, do so now.

Let's take a look at an answer.

User input is when the app asks the user to type something, choose an option or press a button.

It helps the app respond in a personal way, for example, the app can say, "Hello," and add your name if you typed it in.

So if you've got something similar where you spoke about how the app will collect user input through some different methods and why the app may want user input and how it would respond, you've done a really good job.

So excellent stuff and let's move on.

For question two, for each scenario, choose the correct input type and explain why that input is useful for the app.

So in this one, you need to complete the table and you've got the first scenario completed for you.

So let's have a look at that.

A login screen asks for a username and password and the type of input would be a text input, because the user is gonna have to type in their username and their password.

And why is this input needed? This is to login to the user account.

So the other scenarios we've got are a quiz asks the user to choose one correct answer, a pizza app asks the user to pick a topping, a game asks the user to enter their name.

So you need to think about the different input types we've spoken about before and decide which one you think matches each of the scenario and why that input is needed.

If you need to pause the video now to read back through the task and select your answers, do so now.

So let's have a look at the answers.

A quiz asks the user to choose one correct answer.

The input type would be radio button and the radio buttons are set up already in the app and it allows the user to click on one of them.

And why is this needed? The user can pick an answer and the app can compare it to the correct answer.

A pizza app asks the user to pick a topping.

We could use a dropdown menu and the dropdown menu has the available toppings so the user can only pick what is available.

Now, you may have put radio button, but if you think about what the app screen may end up looking like with all the different toppings, a dropdown menu is gonna be better, because it is hidden the rest of the time.

And again, asks the user to enter their name, text input again, because the app can use the name that has been entered to personalise the app itself.

So for that one, text input is definitely what we're looking for.

So how did we do? Did we get them all correct? Did you get anything different but you've been able to justify it? Okay, maybe compare your answers with somebody else to see if you got the same ones.

If you got what is on the screen, excellent job, well done and let's carry on.

So moving on to the second part of the lesson, which is using variables to store and display user input.

Apps store user inputs in variables and a variable is like a box that keeps the input value safe.

This means the value can be used multiple times in the app code.

In an app quiz, the user is asked to enter their name, the user types their name into a text input box.

The app saves the name using a variable.

The variable has an ID and usually the ID will be something descriptive about the value the variable is holding.

So we can see on the example here, we have got the variable being called name, because it is storing the value name that the user has typed in.

The app then uses the value stored in the variable to show a personalised message.

So for example, "Hello, Sam.

Ready to start the quiz?" So in there, the code has got the text it's going to display and then it's gone and looked at the value stored in the variable and inserted that value into the text, so we get a personalised message.

Variables can help apps by remembering what the user has typed or clicked, storing values such as scores, names, answers or choices and allowing the value to be reused while the app is running.

In App Lab, variables can store different types of data and the different data types we can use are text.

So this would be things like clear words or sentences and we also call these strings or numbers.

So this is both whole numbers and decimals.

So 12 or if you can see there, 3.

14.

And it also can store what's called Boolean.

So that is true or false.

So yes or no answers or on or off values.

Let's have a look at a question.

What is a variable used for in an app? A, to remember information, B, to play sounds, C, to show animations, D, to change colours? If you need to pause the video to read back through the question and make your decision, do so now.

Okay, let's have a look.

If you said A, to remember information, you'd be correct.

Variables let apps store and reuse information like names, numbers or choices.

So if you selected A, well done, good job and let's move on.

So let's have a look at a scenario.

You have just joined a music label and you need to create an artist name generator to help new performers come up with their stage names.

The app will ask users two simple questions.

What's your favourite snack and what's your favourite colour? The app will then take these answers and combine them into a cool artist names like Lil Red Crisps or MC Blue Cookie.

You will collect the user's answers using text input boxes, store them in variables and then display a message with the artist name.

These variables are needed to create the app, favourite snack, favourite colour, artist name and name starters.

So they're the variables that we need to have in the app to store the values that are gonna be used to create the artist's stage name.

So to set up our screen, we need to have a text input box to enter the value to be stored as the favourite snack, we need a text input box to enter the value to be stored as the favourite colour, we need a button to run the function to create the artist name and we also need a label to display the artist name after it has been created.

And we need to remember that all of these elements must have a unique ID.

So when we're coding, we know what we're selecting.

Let's take a look at how we set up variables.

So variables are used to store the user input for things like favourite snack and colour.

We have also got a variable to store the generated artist's name and we've got a variable to store a list of name starters.

And as you can see, all the variables must have a unique ID.

So we can see here for our favourite snack, the variable is called fav_snack, for favourite colour, we've got fav_color, artist name, artist_name and for the list of name starters, we have called it starters and it has been populated with a list of name starters.

So we can see there things like DJ, project, echo, sound, midnight, band and so on.

The other variables at the moment do not have any values attached to them, so they are empty.

So it says here, the variables can contain values set up by the programmer and for our name starter, we have got a list of starters for the artist names, and this will be picked at random in the code.

And this variable is only used by the code, so the user input does not impact on this variable.

Let's have a quick look at a question.

True or false? A variable can store someone's name.

So true or false? If you need to pause the video to read the question, decide on your answer, do so now.

So what do we reckon, is it true or false? If you said true, you would be correct.

Variables can also store numbers and Boolean values.

So again, if you said true, well done, you got that correct and you're understanding what variables do really well.

So let's go back to our app.

On our screen, we have got where the user enters their text and we can see the text entry boxes there with an example of what input we may add.

So in the top one where we're asking for favourite snack, we've got crisps and in the second box where it would be what is their favourite colour, we have got blue.

We have then got the button, which is telling us to mash it up.

And when we click the button, the values entered by the user are stored in the correct variables.

So fav_snack and fav_color are the variables crisps and blue are going to be stored in.

And as we can see here, the variables are used to store the user input and what we've got is the fav_snack variable being used and the command getText and then we select the snack input box.

So what this does is take the text that has been entered into the snack input box and it stores it in the variable fav_snack.

And this repeats for the fav_color where we have the getText, text input, colour input has been selected and it will store the text entered into the favourite colour text input box.

For the artist name, we have a variable that uses the values of the other variables and what we're doing is combining the values from a number of different variables to create the random name.

So what we've got is our name starter variable.

So we can see we've got our starter.

So the code picks a random starter name for us.

We are then using the plus, so this would be a concatenation.

So we are joining lots of variables together to make one name.

So we've got our starter, plus and then we've got these two quotation marks.

So this is so we can have a space, otherwise if we didn't put those in, all our words would be smushed together without any spaces.

So we've got our starter plus a space, plus fav_color, plus a space, plus fav_snack.

Okay, so it says there, "The plus sign allows the variables to be joined together and the result is stored as a variable called artist_name." So when we click the button, it collects the user input and it picks a random starter name.

The function uses the value stored in the artist_name variable to display the generated name to the screen in the label, and you see here the artist's name is going to be The Blue Crisps.

So it's taken the input from favourite snack, the input from favourite colour, it has selected one of the name starters and it has put it all together and we can see there, it has put it all together with the spaces so we can read the artist name clearly.

And in this case, it is The Blue Crisps.

So for task B, you're going to open the starter app, oak.

link/music-tour and for the second part, you're going to modify the app.

So the first part is you're going to add a new input box in design mode with the ID genre_input.

And the placeholder text is going to be, "Enter your favourite genre." So when we look at the screen, it means that we'll have a text box and inside that text box, it is gonna have the prompt, "Enter your favourite genre," which means the user will know what they need to type into that box.

B, in the code view, add the new variable fav_genre at the top of the code.

C, in onEvent, add in fav_genre equals and using the command getText and then selecting the genre input box.

And then D, update the output line to include the genre in the output text.

So if you need to pause the video now to read back through all the tasks and then have a go, do so now.

Okay and let's have a look.

So what we should have on the screen is adding a new input box in design mode with the ID genre input and the placeholder text, "Enter your favourite genre." So we can see here, we have got the placeholder text included so the user knows what to type in and we've got the new input box created for our favourite genre.

For B, looking in code view, we need to add in the new variable fav_genre and what we've done there is at the bottom, we have selected a new variable and we have got the right variable name entered.

For C, we've had to add the onEvent command.

And we can see here that in our onEvent command, we have got fav_genre added underneath favourite number and favourite instrument.

So this means that when we click the generate button, it means it is going to pick up the text from favourite number, favourite instrument and favourite genre.

So it's going to pick up all three values and then we need to update the output line to include the genre.

It's quite a lot of orange going on there for all our joining of the variables together, but we can see here that the fav_genre variable has been added into the output screen so we can then see it when we click the button.

So we've got the plus fav_number variable, plus, a space, plus fav_genre has been added in there, plus, another space, plus, fav_instrument, plus, some more text, plus the city, plus an exclamation mark.

So we get a whole sentence going on and you can find the additional orange plus in the math commands on App Lab.

So if you've managed to get it so the app has got the three inputs, you have added in the new variable and you are getting an output that uses all three variables to generate a sentence, excellent job, well done.

And moving on to part three.

What you're gonna do is edit the city's list at the top of the code and add in five cities you would like the band to tour in.

And then for part four, you need to answer the following questions, what variables are used in the app and what do they store? B, where is user input collected in the code? C, what does the line using a randomNumber do? And D, what would happen if you removed the setText line? So if you need to pause the video now to read back through the task, do so now.

Let's take a look at what we've got.

So for part three, you had to edit the cities.

So this was looking at the variable cities and we can see we've got all the cities stored as a list and it was adding in additional cities.

So by pressing the little forward arrow, you could add in more cities to the list.

So if you've done that, well done.

If you added more than five, excellent job.

If you've only got a couple added in, don't worry, as long as you've given it a go and the list still works and you have got some cities in there that you have selected, excellent job.

For question four, the first one was fav_number stores the number entered by the user, fav_instrument stores the musical instrument entered by the user, fav_genre stores the music genre entered by the user, tour_name stores the final message created by combining the inputs and a random city, cities is a list of city names the app can randomly choose from and city stores the randomly selected city from the cities array.

And for 4B, where is the user input collected in the code? It collects it from fav_number, fav_instrument and fav_genre and they store the values entered by the user.

So if you've got all those right, brilliant job, you're definitely understanding how we use variables in an app to store values.

4C, what does the line using randomNumber do? This is used to randomly select one city from the list, making the output feel different each time the button is clicked.

And 4D, if we remove the set text line, the final tour name would be created in the code, but the user would then not be able to see it on the app screen.

The app would still work behind the scenes, but we would not see the result on the screen itself, because the setText is what updates the label.

So we've got all of those things right and if you tested it out in the code itself, that's a really good idea, because it's a great way of seeing what different code lines do.

So if we got through all of those tasks and we've got everything correct, brilliant job, we are definitely on our way to building a fully working app.

So today we've looked at variables and they are used to store and reuse values like user input in an app.

User input is collected using elements like text boxes.

Variables can be combined to make dynamic, personalised outputs.

And using variables and input together makes apps more interactive and engaging for the user.

So thank you for joining me on today's lesson about using inputs and variables.

We are definitely on our way to creating a fully functioning app, and I hope you'll join me next time.