Lesson video

Hi everyone.

My name is Mrs. Welsh and today we'll be continuing our app development project.

This is lesson two of two.

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

So let's get started.

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

This lesson is called App Development Project part two.

By the end of today's lesson, you'll be able to make an app with multiple screens and test that it meets user requirements.

Before we begin, let's take a look at some of the keywords we'll be using in today's lesson, testing.

Checking your app works as expected.

Debugging, the process of finding and fixing errors in code to ensure it works correctly.

Rubric, a guide that outlines criteria and levels of achievement to help you evaluate your work fairly and consistently.

So let's get started, in today's lesson, we're going to implement the interactivity into the app, debug the code to improve the use of experience and compare the app to the user requirements.

So first of all, we're going to look at implementing interactivity in the app.

Interactivity can be added to the app using the code tab.

Adding interactivity allows users to interact with the content and enhance the user experience by improving usability, supporting learning, providing feedback, and engaging the user.

So think about all the different ways that you will interact with the apps that you use on a daily basis.

Do they fit the criteria? Apps need to respond to the user.

To create interactivity in App Lab, the code needs to include events, events.

So when the user clicks a button, it will do something.

Variables to store any user input and selection to check if the user's input is correct.

So the common blocks that we would use to create interactivity are as followed.

The onEvents.

And this responds to the user action, such as a click of a button.

Set screen, this moves the user to a different screen in the app and set text.

This changes what appears on a label, so we can change the text that appears on one of the screens when we interact with it.

getText, this allows us to use the information a user has typed into one of the text input boxes.

So for example, using an answer to check whether it is correct or not and creating variables to store a value in the app.

And that might be something such as score, which we would use throughout the app and present it at the end to the user.

So we're looking at creating interactivity, we will have an onEvent and this is waiting for something to happen.

We then have to select what element is going to have this onEvent activity.

And in this example we are using the question two submit button.

We select what type of trigger we are waiting for.

Inside the function, we have then got a selection statement and this is to check to see if the user input is the same as the answer to the question that has been asked.

To do this, we use the getText to pull the user input from the text input box.

It then compares it to the answer that we have programmed in.

After that, it updates the score variable if they've got the answer correct, so it adds one to the score and then after that, it sets the screen to the next question.

So in this case, it is going to move the user onto the question three screen.

Let's take a look at a question.

Why is it important to add interactivity to an app? Is it A, so the user has more screens, B, so the user can click buttons and get feedback, C, so the app runs faster, D, so it looks better with more colour.

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

So what answer do you think it is? A, B, C, or D? If you said B, you'd be correct.

Interactivity let's use as click buttons, enter answers and get feedback.

Without it, the app would just be a static display.

So did you get the answer correct? Did you understand that adding interactivity is important so the users can interact with the app to get feedback.

If you did, well done and let's move on.

For task A, one, open the starter app, two, create a variable called score.

Three, for each question, add the onEvent block and select the question submit button from the list of elements.

Then add the selection block from the control menu.

Add the comparison criteria to the selection block to check the user input against the correct answer, add one to the score variable in the selection block, add the set screen and select the next question screen.

And then finally, add the set screen and the select score screen on the last question to view the quiz score.

So quite a lot going on in this task.

It is gonna be the same set of commands for each question.

So if you remember the example we just had a look at, you need to get the onEvent command, select the correct submit button, add in the selection statement, compare the user input to the answer to the question, include updating the score variable and then underneath the statement, have it so the screen moves to the next question.

And remembering on that final question, the screen needs to move to the score screen.

So if you need to pause the video to read back through the task and to complete it, do so now, we have nearly sorted our app.

So let's have a look at the question interactivity.

For each of the questions you should have the following, we'll have the onEvent with the question submit button selected.

Inside the function we have got our selection block with the criteria to compare the user input to the correct answer.

And then under that we have got the score being updated by one if the answer is correct.

So remember to get the user answer, we have to use the getText command and select the text input box for that question.

Underneath the selection statement, we have then got to make sure we are updating the screen.

So we have the set screen and it moves on to the next question screen.

So you can see here we are on the question two screen and we'll move to the question three screen.

So you should have repeated this code for all of the questions.

The only one that's gonna be slightly different is the final question, which is gonna be moving onto the score screen.

For part four of this task, on the final question, we need to add the set text to display the score.

To do the set text for the score screen, we are going to set the text to feedback because this is our label that's gonna display the score and then we're going to include some text.

So we've got you have scored and then including the variable.

And this means it's going to pull the value from the variable called score to display how many questions they have got correct.

Part five, you're gonna update the score text so it is 18 points in terms of size.

You're going to change the border thickness to show three points and you are going to change the border colour and you can select a colour that you wish.

So again, if you need to pause the video now so you can read back through this task and complete it in the app, do so now.

And let's take a look at some possible solutions.

So on the final question, we have got our onEvent, which we had already set up with our selection statements.

And underneath we have got our set text.

We have selected the feedback label and we have got the text that we want to include plus the score variable.

And then under that, we need to make sure we have set the screen to the score screen.

So what happens now is when we submit the last question, it will check to see if we've got the last question correct, update the variable if we have got the question correct, and then it will set the label on the score screen to you have scored and the value of the variable.

And then it will move us to the score screen.

If we've got all that sorted, we should have our app fully interactive in terms of allowing the user to move through each of the screens.

And then the last little bit was to do a little bit of formatting to make the app more engaging.

On our score display screen, we should have our feedback label updated.

And we can see here that the font size has been increased to 18.

We have got a thick border around it to make it stand out from the screen and we have also selected a colour.

And on this one it's got quite a bright pink border to make it stand out.

If you've managed to do all of those things, you should now have a fully functioning app that allows the user to go through all of the questions and display a high score at the end with the formatting that you have also included.

So if you've managed to get all of that done and the app is working as you expected, absolutely brilliant, you have created one app completely from scratch and that's an excellent job.

So well done and let's move on.

So what we need to look at now is debugging the code to improve the user experience.

Debugging means finding and fixing errors in the code that stops it from working correctly.

You debug when you are developing an app.

Errors might be the screens do not load correctly, the button does nothing, the user input is not being used or the screens do not change.

To debug an app during development, follow these steps.

One, use App Lab's debug console to find errors.

Two, read the error messages.

Three, trace through the code to check for errors.

Four, fix each error and then run the code to check that the update works.

So to find the debug commands, when you are looking at the code screen at the bottom of the screen you can see show debug commands.

So you can click the little arrow that's pointing upwards and this will open the debug window for you.

If you've got any errors in your code, the error messages will appear in the debug console.

So we can see an example here that it is telling us that there is a warning.

Then that means there is something wrong with our code.

It tells us what line, we can see here it is line 18 code, that the getText ID parameter and then it gives us the ID.

So we can see here in the brackets we've got Q2 text input and it's telling us it doesn't exist and we can see there somehow we have got the wrong element name selected or we've managed to get rid of one of the letters within the name so it is saying that it doesn't exist.

So it means that we can go and look at line 18 and update the error and correct it.

It's a really easy way of being able to debug your code without having to continually run the code and read over everything.

App Lab does a lot of it for you.

When debugging, always reset the app before running it again to see if the changes have been successful.

Remember, if you leave the app running and you're expecting something to have changed, that's not gonna work because it's going to still be using the old version of the code.

Make sure to use clear IDs for all the elements in the app, including screens, buttons, labels, images and text input.

Remember, by having the clear IDs makes it easier to identify what element you are programming or what element you are looking at.

And also do not expect everything to work correctly first time, make a mistake as all part of the process, okay, we can't expect to be coding everything correctly straight away.

So let's have a look at a question.

What is the best first step to take if a button in your app is not working? A, add more screens.

B, rebuild the entire app from scratch.

C, check the buttons ID and onEvent code, D, delete the button, pause the video now if you need to read back through the question and decide upon your answer, is it A, B, C, or D? What do you think, what is the answer? If you said C, check the buttons ID and onEvent code you would be correct.

The most common issues are generally spelling mistakes in the element IDs and missing or incorrect onEvent blocks.

So remember when you are creating any of your element names, do make sure to check the spelling when you are typing them in as it's really easy to misspell something.

So if got that correct, great job, let's move on.

Testing is done once the app is complete, you do it to see if there are any problems with the app and to check that everything works as expected.

Testing helps you find things that don't work such as broken buttons, design issues like text that is hard to read or confusing layouts or whether the app is fun and easy to use and a good user experience.

A test plan is a simple table that helps you organise how you will test your app and you can use the test plan to check that every part of your app works, match your app to the user requirements and record any problems and how you can fix them.

A test plan is based on the user requirements and details what testing will involve.

It will have a space where you can record the test results.

So you can see here below we've got an example of a table with one test in it.

So we've got the test description and that is telling us that the welcome screen loads correctly, we've got the expected outcome and that would be that the app starts on the welcome screen and the start button is displayed.

The result, has it worked correctly? In this case it is a pass.

If that hadn't worked correctly, we would have a fail.

And the action taken, for this one, because it passed, there is no action to be taken.

But if the test failed, we would have to put in what action was taken.

So maybe this was going and checking element IDs, maybe it was the fact that we'd forgotten to put the button on the start screen and so on.

So let's have a look at a question.

Why is it important to test your app while you build it, A, so it looks more colourful.

B, so you can finish the project more quickly.

C, to check if buttons, screens and score features work properly.

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

What do you think is the answer A, B, or C? If you said C, you would be correct.

It is to check if buttons, screens and score features all work correctly.

So if you got that, excellent job, we're definitely understanding what testing is about.

So task B, one, use the test plan template provided in the additional materials to check if your app meets the project requirements.

Test each part of your app carefully.

Try all the buttons, answer all the questions with right and wrong answers.

Check that the score updates, make sure each screen looks right and works as expected.

And two, record the test results in the test plan.

Use the debug console in App Lab to check for problems and fix any problems in your app.

Four, update your test plan when you fix something.

And five, keep testing until your app meets all the user requirements and works as expected.

If you need to pause the video now to go through and complete those tasks, do so.

Okay, let's move on.

This is an example of a completed test plan.

Yours may look different because obviously your app is going to be different to the example and therefore different tests may have passed or failed and there may have been different code errors.

But if we have a look, we've already spoken about the first one, so let's have a look at test two.

We've got that the start button works and the expected outcome is that clicking the start button takes you to question one.

The result in this case was a fail and the action taken was we had to fix the error in the code, we had selected the wrong button for the onEvent.

And then underneath we've got question one screen displays correctly.

The expected outcome is the question, text the image, the user input box and the submit button all appear, and this was a pass, so there was no action taken.

As said, your results and actions taken may look slightly different because of your app and how you have chosen to code it and also lay it out.

Which if you have gone through the test plan and you have checked all of the tests you have done any actions taken.

Excellent, hopefully your app should be working as expected at this point in time.

So moving on to the final part of the lesson, we are going to compare the app to the user requirements.

After building and testing your app, is it important to check if it meets the user requirements? This helps you make sure the app works as it should and it's useful for the target audience.

So remember the app we were building for primary school pupils? So to evaluate your app, we're going to look at the list of user requirements.

Check if each part of your app matches what was planned, find anything that is missing, broken, or doesn't fit the brief and suggest ways of making the app better.

A rubric is a checklist that helps you assess your app clearly and fairly.

It breaks down the user requirements into smaller parts.

So you can see what a good app should include.

A rubric helps you to judge your finished app and makes it easier to give useful feedback on what works well and what could be improved.

So let's have a look at a question.

Why is it important to check your app against the user requirements at the end of the project? Is it A, to see if the app looks the same as everybody else's? B to check if the app includes everything the user asked for, C to make the app harder to use, D to delete parts that don't work.

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

Okay, what do we think, is it A, B, C, or D? If we said B, you'd be correct.

It is to check if the app includes everything the user asked for, if you got that right, brilliant job and let's move on.

Looking at task C, we are going to compare your quiz app to the original user requirements using the rubric template provided in the additional materials.

One, go through each user requirements and review your app.

Two, fill in the comparison table, writing down what works well and what could be better.

And three, suggest one or two improvements you could make to your app.

You need to pause the video so you can read back through the task and complete it, do so now.

Let's take a look.

Here's an example of a completed rubric.

Again, yours may be different depending on how you have judged if you have met the user requirements or not.

The first one, an app has a welcome screen with a clear title and a working start button and we have said this has been completely met, so therefore we do not have any improvements to make.

The app includes five quiz questions, each on a separate screen and met, as we've got five quiz questions all on separate screens so there are, again, no improvements to be made here.

Third one users can type answers into a text input box for each question.

Now this has been put as partially met because we've decided the text input box needs to be bigger to make it clearer on the screen.

So again, as you go through the rubric, you have to decide whether your app has met, partially met or not met at all.

And this is obviously based upon your judgement and again, the improvements that you have decided will be based upon your judgement.

So if you've been through the rubric and you've completed it and your app in the main is meeting or partially meeting all of those user requirements and you've identified some improvements, excellent job.

We have got a fully working app that meets the rubric so it meets the user requirements that were set out at the beginning of the project.

Excellent job, really well done.

In summary, interactivity is added to an app using code that responds to user actions such as clicking buttons or entering text.

Debugging involves finding and fixing errors by testing and checking code carefully.

A rubric is used to assess each feature and suggest improvements.

So thank you for joining me for the unit Mobile App Development.

I'm hoping you've enjoyed it and learned a lot about how to develop an app from start to finish using screens and interactivity.

So once again, brilliant job on this unit of work, particularly the last two lessons where you've created an app from the beginning and got it so it is fully interactive and working to a set of user requirements.