Lesson video

Welcome to lesson three of mobile app development.

I'm Ben, and in this lesson, we're going to continue developing your Tappy Tap app.

And then once we've completed that, you're going to be given a choice of projects that you can then continue developing for the rest of this unit.

So all you need for this lesson is your computer and a web browser.

You'll also need access to the website, code.

org where we're going to continue developing our application using app lab.

So if you're under 13, you'll need to get your parents or carer to log into your account for you or use the credentials that your teacher gave you.

So once you've done all that, if you can find a nice quiet place to work, for the time being, if you can put your mobile phone on silent, that'd be great.

And you find a nice quiet place to work, that'd be even better.

But later on in this lesson, it'd be really great if you could test out your application using your mobile phone, if you have one.

But don't worry if you don't, it doesn't matter, you can still test out your application using a web browser.

So once you've done all that, and once you're ready, let's get started.

So in this lesson, you're going to update that Tappy Tap app that we started in lesson one and two to display the user score.

So far with that app, we've managed to create our user interface.

We've also managed to drive some events using a bit of code where the stop was in collective staff in the game.

And then when we clicked on the blue dot, it moved the blue dot to a different position on the screen and incremented the score.

So what we need to do to finish off the app is we need to be able to show the user their score at the end.

That's what we're going to develop.

And then once we've done that, you're going to start your very own app project.

So before we get going with any of that, I've got an activity for you to complete.

Now, I have an app full of errors.

Now, it's called the Turtle Draw app and the purposes of this app is for the user to click the buttons on the screen to move the arrow on the screen to draw shapes.

So you can see that on the screen, you'd think, wouldn't you.

If you click on go forward, it will move forward.

If you clicked turn left, it will move it left and turn right, it'd move it right.

That's what should happen.

Unfortunately, there are errors in the app and it's not working as the developer intended.

So it's your task to go to this app and see if you can make it all first, spot the errors and make it work.

So there were three errors you need to look out for.

So you should be looking for three.

So you need to sign into your code.

org account.

Like I said, if you're under 13, please ask your parents or carer to do this for you or use the credentials that your teacher gave you.

You should follow the link on your worksheet.

So head over to your worksheet and you'll find a link and then you need to click on view code and remix and see if you can spot the errors.

Now, if you were to click on that link, you would come to this.

Something that looks like this page here.

There we go.

So you can see that the app, what you need to do on the top right hand side, you can see there's an option to view code, but I'm in the way of that.

So I can just move myself out of the way.

There we go.

There's an option to view code.

So you click on that and that will show you the code, but still can't edit it.

So you need to click on remix at the top here.

It's the top left hand side, so we click.

I'm not sure if you can see that, but top left hand side, you've got rename, share and remix.

So click on remix and then it'll give you a version of this code that you can play around with and see if you can spot the errors.

My recommendation starts off with is click run and then to have a go at it, see if you can see anything obviously going wrong and then read through the code before you do anything else.

So let me head back over to the slides.

So I'd like you to pause this video now and see if you can debug this app.

So go to your worksheet, follow the link, remix the code and see if you can fix the three errors.

So good luck.

So how did you get on with that? Were you able to spot all three errors? Well, let's test your app and see if you managed it.

Now, one thing I recommended was to run the applications and see what happens.

So that's the first thing I'm going to do.

So I'm going to run the application.

Now, as soon as I clicked run, you may have noticed an error message appeared on the bottom of the screen, and it said, warning line four, the on event ID parameter refers to turn right which does not exist.

So that's got me curious already, and it's actually highlighted it on the screen for me that's with the yellow triangle and said, turn right does not exist.

Like I said, that's got me fairly curious, but I'm just going to hold that in my mind just for a minute and continue clicking the buttons, see what happens.

So I'll click on go forward, well, nothing's happening there.

So turn right.

Nope.

Nothing is happening.

Turn left.

Okay.

I hope something has happened with turn- All right.

I clicked turn left and something happened and the arrow pointed right.

Interesting.

So maybe that's going to give me a click.

So my next protocol is to stop this from running now.

And that's how I look at the code.

So let's start off with this issue here.

So it says onEvent refers to ID turn right which does not exist.

So I'm using an ID of something that there's no ID of anything called turn right.

So let's have a look at what the IDs of my buttons on the screen.

So this should be turn right.

So if I move my mouse over that, you'll notice that it's called turn.

I don't have anything called turn right.

I've got something called turn.

Let's have a look at the other ones.

That one's called turn left, and that one's called go forward.

So I've got two choices here.

What I could do to fix it is I could just change this to just being turn and that would therefore work, but let's stick with the naming conventions that this developer has used, which is they've connected no spaces and used capital letters for each name.

So I'm going to go to my design mode.

So I'm going to click on design.

I'm going to select the right button so I can access the properties, and I can change the ID to turn the ID.

Sorry, not the ID.

I can change the ID to turn right like that.

And maybe that will work.

So let's go back to my code and have a look.

There we go.

And now I do have something called turn right.

So that should work.

But let me see if I can spot more errors before I preview that.

Right.

The next thing is go forward.

So I've got go forward.

Now, this looks different.

So that says input is not a click.

So maybe it needs to be a click.

So I'm going to click on the drop down chain, change that to click, see if that works.

Let's have a task to this now.

So I'm going to click run.

So I'm going to click on go forward.

There we go.

Now I've clicked on go forward and you can see that it notes that as word, perfect.

Now, my next issue was that turn right.

So I'll click on turn right.

And there we go.

That's worked.

Yeah.

That's worked.

And I'll click on go forward again.

Brilliant.

That seemed to have worked.

And now let's click on turn left.

Well, I'm gone.

That's actually turn right.

So that's not worked.

So let's look at the code again.

So I'm going to click reset.

So I've got on event turn left.

Now.

There we go.

I'm using the wrong block here.

So it says turn right.

So I need to change that to a turn left block.

So I'm going to get rid of that just by dragging it out and I'm dropping it on the left hand side.

Now, which one do I want? We've got these total commands here.

So hopefully it's on the turtle.

So click on that.

And there we go.

There's a turn left option.

So I'll drag that one instead and the default 90.

So that should work.

So let's test it out.

I'm just going to run that one more time, Do you think it's going to work.

Have you got confidence? I have definitely got confidence.

So I'm going to click on go forward.

Yeah.

That's worked, turn right.

Okay.

That looks like to work.

So go forward again.

That's worked.

I'm going to this time, click turn left.

Now, that looks so forward.

So let's just go forward to double check it goes left and there we go.

So I hope that too worked.

So I spotted my three errors.

So let's head over back to the slides.

So hopefully you've spotted those three errors too.

So every number one was, I mean, we didn't necessarily solve them in this order, but error number one was a turn left.

It actually said turn right and it shouldn't have been turn right, it should have been turne left.

The second one was the ID of the property.

So it was currently turn right but there was no ID turn right.

So we changed it.

So that was one.

And then the third error was that the ID event was linked to an input rather than actually a click.

So we changed it to click.

So perfect.

Let's move on to the next part of the lesson, which is to go back to our Tappy Tap app up and add in the final touches, which is the user score.

So like I said, we're going to now apply the final touches to our Tappy Tap app by doing the following.

First of all, design the score screen.

Because at the moment we've got a score screen, but we've not put anything in apart from maybe a title.

And then what we're going to do, we're going to add some code to pass the score into the score screen.

So your instructions are to open the app that you developed in the previous lesson.

Now, if you don't want to use the app that you've been developing over the past two lessons, I mean, ideally you would want to, but if you don't, then if you go to your worksheet, there's a link to kind of start a programme that you can use that will get you to the same point that we left at the end of lesson two.

So once you get that link, you can, again, just click on view code and remix, just like we did with the app that you just worked on.

Now your first task is to just deal with the user, the graphical user interface.

The design elements.

Don't worry about any code at this stage.

So I'd like to enter design mode and select the score screen.

And then I'd like you to add a label and place it to where you would like it to appear.

Change the ID of it to something sensible, use your name and conventions.

I've got two examples on the screen there.

So you can see the name convention that I followed so far in lessons one and two, I've been using the underscores between the words.

So user_score_label.

That's what I would call it.

But you might have got a different convention and you can see that on the picture, I've got different examples.

So that's called camel case.

So it's userScoreLbl sums the label.

So it just gives you an idea, the two different conventions that you might have used.

But like I said, you should be sticking to one of them.

Now, what I'd like to do is format the font size and position.

Now, for the time being, although they haven't got a score yet, I recommend that you add the text property to a number, maybe a double figure number like 10 or 11.

And then that way you can see exactly what it's going to look like when you play around with the font sizes and the font type as well.

If you don't put a text property in there, you might set the font size to 50 and the font type to a certain kind of, to a certain font, but you won't see what that's going to look like until you run it.

So just put in a random text amount, because we're going to overwrite that with your code anyway.

So go to your worksheet.

You've got the instructions on your worksheet.

You've also got that image there.

So you might want to make it look something similar to the image that you can see on the screen now.

So good luck with that.

It shouldn't be too texting.

It's just the user interface elements and we're not doing any code app dev stage.

So enjoy that.

Pause the video, and when you've done all of that, unpause and we'll get going with the coding.

So hopefully you got to a stage where you created your user interface elements to it, and we're now ready to add some code.

So what that involves is passing the score into that user score label.

So we're going to add our code to the app and we're going to tell our programme to set the text of the user score label to the value being held by our score variable.

So my question is, where should we place this code? So I've got three options for you, where at what point in our code, do we want to set that label that you just created and add the score into it? So do you think it's position A, do you think it's position B or do you think it's position C? Now, I could get you to think about this on the spot, but it's much better if you read the code over and put a little bit of thought into it, rather than just guessing a letter.

So pause the video again, just really quickly, read the code and when you're fairly comfortable with an answer, unpause the video and we'll go through, we'll go through the answer.

Okay.

So what do you think the answer was? Was it A, B or C.

Shout it out to me to the screen in three, two, one.

So, three, two, one, it was? Was it B? It wasn't C, it was A.

So well done if you've got A.

So the reason we're putting it in A is because we read through that code while we set our score variable to zero.

So it's outside the event, but when the stop wasn't clicked, that's going to set it to the game screen, and then we're going to, we'll set the screen to score and then wait five seconds.

Now, at that point there, after we waited five seconds, after that five seconds has happened, at that point, we need to set the score to whatever it should be.

So it's before we actually move to the score screen basically because after that five seconds, it's going to set to the score screen.

So before they get to the score screen, at that point there, after the five seconds, we want to take the value as what has been installed in the variable score, put it into that label and then show them the score screen.

So when they arrive with that score screen, they're going to see that score.

So you might have thought we could change it every time the score has incremented.

Now, that wouldn't necessarily be wrong, but you're having to make the code do a lot more work because it updates that label every time they click and they don't necessarily need to do that, it's only the end of the five seconds.

We want to grab whatever the score is being held by that variable and a pop it into that label before they move to that score screen.

So to do this, we need to add the following code into the correct position so we can see, we've got to put it on the A, we want to use a set property.

So change the ID.

So the ID is going to be the ID of the label, of the score label that you created, and then we're going to change the properties.

So that's going to show the text of the variable.

So that's your little challenge that I'd like you to achieve with that.

So the instructions on your task sheet.

So I'd like to pause the video now, head over to your worksheet, and you'll see some instructions on how to do that with a little bit of challenge.

And then when you've done that, unpause and we'll continue, but do have a play around with your app as well.

That'd be really great.

So pause the video.

Good luck.

Enjoy it and unpause when you're ready.

So hopefully you managed that and you've now got a fully working game.

Now don't worry if you didn't to manage up, because I'm just going to show you how to do it.

So I'm looking at my score screen now.

So you can see that I've added the property in there.

So I've got the ID user score label, and I've also added in that run over, I've added a number so I can see what that might look like.

I apologise for that horrible green that I've chosen to use.

So let's get going with the coding for it.

Now I told you for the user controls, I'd like you to use a set position, that wasn't the only block you could have used.

You actually could have used another block as well, which was the set number, but I'm going to use user set property.

Now, we said, to put it, just before we set the screen, so I'm just going to drag it to the right place and drop it in.

So what are we going to change the ID to? So let's have a look at my dropdown and remember, this is all the things that I've named inside my application.

So the one that I used the user score label that I want to change.

Now, I don't want to change the width of it.

What I'd like to do is change the text inside that label.

So if I click on the dropdown, I've got all different types of options.

I've got the text, the width, the height, the X, or Y the font family, the hidden, the border, whatever, this is the text that I want.

So I'm going to change the text, but not to the word text.

I need to change it to whatever has been held by that variable score.

So I'm going to head over to my variables there and just remind myself that I had a variable text score.

And I'm going to remove this text here.

So change the word text.

I'm just going to get rid of the speech marks.

So if you remember from last lesson, if you keep the speech marks in, it literally changed it to the word score, not the value being held by the variable score.

So I'm just going to type in score and in theory, this should work.

Here we go.

So I popped in the word score.

So let's just run this and so I'll click on run on my window and see if this works.

So I'm going to click on start and I play my game.

Okay.

So there we go.

And here we go, right.

So I clicked on it three times and you can see it's giving me the score of three and it's worked.

So it's taken the variable, the position, the value, sorry, has been installed by the variable score and it's popped it into the label for me and displayed it to the user.

Such really exactly what I wanted.

Looking at my app, I'm not quite happy that the number is not quite centred.

So I might change that around a little bit, but maybe that's just me being a perfectionist.

But clearly I'm not because I use that colour green, which is horrendous.

So now, one of the other things you might want to do for niceties sake is you might want to add this play again button that I've added there.

Now that's as simple as going into your design menu in your- I've come to the wrong screen.

Now, if I go to my score screen, go into my design elements, add in a button and play around with the properties of it.

So I've just changed to call the restart button and play again.

Now remember if we go to our code, this will be an event again.

So what we need to do is just add in another event.

And if you remember from lesson two, it doesn't matter where we put this event, as long as it's outside the other two events.

So I'm just going to plot it at the bottom.

I'm going to add my extra event.

It's going to drag down eventually.

There we go.

I've got my event in there and I'll change the ID to play again button.

Where is it? What did I call it? It'll be here somewhere.

I'm just not seeing it right now.

It's a label that I called it.

What did I call it? So I can't remember because I've kind of restarted, that's why.

There we go.

Restart button.

So restart button and click.

So at that point, I wanted to move to my- I want to go to a set screen to the home screen right now.

Once I've dropped that in, I'm going to change it to- I'm going to think of welcome screen.

Now, just to make you aware, that when the application starts with loading for the first time, that is the point where the variable score equals zero.

So when we click on restart button, it goes to welcome screen.

The score won't reset to zero.

So that's something first to think about.

So just, there were a couple of places where we could put this, but I'm just going to restart my variable at that point there, so when they click play again, at that point, I'm going to set score to zero.

So I know that when the game starts again, it all starting at zero.

We're not incrementing our score permanently.

So score equals zero.

Now, one thing, what might be really nice.

So obviously we're watching this being previewed in a kind of mobile phone kind of way.

So it looks like a mobile phone when we run it, but it would be really great if you were able to, and you'll need to, if you're under 13, please ask your parents or carers to give you permission to do this, but you can actually use this oven player on your own device if you're able to and have a compatible device.

So if you have an Android phone or an apple device, you should be able to do this.

So if you click on share, then it gives you a link that you can use there.

So unfortunately send to phone only works with US American phone numbers.

So it doesn't work with UK phone numbers, but what you can do is you can get that URL.

And if you're able to put that URL into your own mobile device, then you will see it working.

So I'm going to give you the excuse to turn your phone off silent or off aeroplane mode to have a go at that.

But please, like I say, ask your parents for permission to do that.

So once you've done all of that and you've had a go at it, you've made your own application and you've done a really great job.

So only two and a half lessons, you've gone from completely no application whatsoever to decomposing a problem, to designing the graphical user interface, to actually adding some code to power our app.

So you've done a really great job.

So the next point of call really is to move on and start developing your own mobile phone application.

Okay.

So let me introduce you to School Lab Studios.

Now, School Lab Studios is a company that specialises in mobile apps and you have been hired to develop a prototype for one of their new apps that they would like you to build.

Now, you have some choices with this because School Lab Studios have come up with lots of ideas and they'd like you to pick one.

So we have a KS2 Maths App.

It starts with primary school age.

They have an app called Your weight in space.

They also have an app called Clicky biscuits and they also have one called Virtual pet.

Now, what I'd like you to do now is I'd like you to choose a project that you would like to work on for the remainder of this unit.

So I'd like head over to your worksheets and on your worksheet, you'll find the images for all those apps, but also a link to a project diary.

Now, I'd you like to open all the project diaries and spend a little bit of time reading the options and requirements for each programme, because each project diary will show you a little bit more detail about each individual app, but also tell you what the requirements for the project are.

I'd like you to pick whichever one you'd like, and then I'd like to download or make a copy of the project you're going to work on.

So these will open up in Google slides.

So if you have a Google account, then you can just click, you can make a copy of it.

But if you've got Microsoft PowerPoint, for example, open office, then you can go file and then download us and select your file type for that.

So if you can pause the video and then have fun, just exploring all those different options for you and pick the one that really you would like to develop for the next few lessons.

So enjoy that.

Pause the video, and when you've picked one and downloaded a project diary, unpause the video and we'll get started.

Okay.

So have you managed to pick a project that you're interested in? Hopefully you have done.

So the first step on our road to making this application is let's start off by making our success criteria.

Now, if you remember, we added success criteria for our Tappy Tap app, but it was given to you.

So what I'd like you to do is decide what would make your project successful.

So you're going to develop your own success criteria.

Now let's have a quick reminder about what success criteria is.

So success criteria is used at the end of a project to help judge your success.

For example, each round must ask 10 questions.

Now, success criteria should allow for factual yes, no answers.

So on that basis, what is wrong with the following criterion? Must be easy to use.

So pause the video for a moment.

Think about what might be wrong with that criterion.

Okay.

So if you watched out what might be wrong? Well, if you remember, when we looked at this earlier on in this unit that we said that success criteria must allow for these factual yes no answers.

Now, you might be looking it must be easy to use and think, will I be able to answer that with a yes or no? Most people will be able to answer that with a yes or no.

But the problem with that is that it is subjective.

It means that I might find the app really easy to use, but the next person use it might not find it easy to use.

So therefore we don't have a yes, a definitive yes, no answer.

What we want is a list of criteria that we can say, just tick off and say, yeah, it must have done that.

It must do this and we can take it off.

For example, each round must ask 10 questions.

That's very factual that you are- by the end of the project, you will know, have I asked 10 questions? Yes or no.

And the next person to review it, they would also be able to answer that question with a yes, no answer.

So what I'd like you to do is head over to that project diary that you've downloaded and add some success criteria that reflect what you intend your app to be able to do.

Now, it might be helpful to look through what the requirements for the project were.

There were already some success criteria in there for you.

So I'd like to add some of your own and hopefully add things that are going to make sure you meet those requirements.

So in the project description, but also add a little bit of something about you, because this is your project.

So if you've got some really nice ideas about what you'd like your app to be able to do, in addition to what you've read in the project description, then please feel free to add those.

So I'd like to pause the video now, head over to your project diary and add those success criteria.

Once you've done that, you can unpause and we'll continue.

Okay.

So hopefully you've got your success criteria now.

So now we've got a really good understanding of what we want to be able to achieve over the coming lessons with the application that you're going to develop.

So I mentioned before you stated your success criteria, I wanted you to put your own stamp on this.

You're constrained slightly with what the app must be able to do.

But also, like I say, you can be a little bit creative.

So what I'd like to do before next lesson is I would like you to create some designs for two of the screens for your app.

Now your app might end up having more than two screens and that's absolutely fine, but I would like to get an impression of what kind of design you would like to create, to maybe get an idea for the look and feel of the application so that even though you've just designed two screens, anybody will be able to pick up those designs and get an idea for the look and feel that you'd like to achieve for the whole app.

So I'll let you pick which screens that you'd like to do.

It would be a really good idea if maybe you had the opening screen, the first screen, and maybe just one of the screen of your choosing.

Now, there's a template for this on your worksheet.

Now, if you have the ability to, you might want to print it off and then draw it by hand or alternatively, it's absolutely fine if you just want to do it on paper, that's not a problem, but if you want to do it electronically, you can just do a text boxes over the top of the template that I've given you.

Now it'd be really great if you could annotate them as well.

So you have the ID name that you intend to use.

So remember the user name convention that you'd like to implement.

I'd like to identify whether or not it's a button or a label or text input or an image that might even be really clear from the naming convention that you use.

And then also it'd be really nice to have an indication of any fonts or any colours that you intend to use.

Not everything will have a fond or a colour, but there might be places where you can really highlight that and point that out to whoever's going to pick up these designs.

Because one of the points of these designs is that somebody else should be able to pick up your designs and able to essentially recreate what you're trying to achieve, the look and feel of the application that you would like as the designer.

So that must be completed before next lesson.

You can do it now if you've got time, but if you don't, then just do it before you start lesson four.

So that's all for this lesson.

I hope you've had fun with it.

I hope you feel a very good sense of achievement that you've finished your first app, which is Tappy Tap app, but also you feel really excited about the project that you can design and you're going to put your stamp on it.

And I really am looking forward to seeing what you're able to achieve over the next few lessons.

Now, if you'd like to share any work that you've done this lesson with us, that would be great.

I'd love to see your completed Tappy Tap apps if you've got the permission of your parents or carer to do so.

I'd also like to see your hand drawn designs for the app that you're about to design.

So if you're willing to share those with us, please do ask your parents or carer to share your work on Instagram, Facebook or Twitter tagging @OakNational and using the #LearnwithOak.

That's all from me.

I'm looking forward to seeing you in next lesson.