Lesson video

Hello.

Now have you ever thought, "I wonder if it has an app for that", or even wish that you could develop your own mobile phone application.

Well, in this unit, that's exactly what we're going to do.

Now, I'm Ben and I'm going to be walking you through this unit.

So, all you'll need for this lesson is a computer and a web browser, and also will be accessing the website www.

code.

org.

Now you'll need an account for www.

code.

org, so, if you haven't already got one, please go ahead and get one.

But if you're under 13, please ask your parent, carer, or teacher to create you an account in advance of continuing with this lesson.

So, if you clear away any distractions that you might have now, at some point in the coming lessons, we're going to be using your mobile phone.

So, perhaps turn on aeroplane mode for now.

And when we're ready to use it, you can turn it off aeroplane mode.

And if you've got a nice quiet place to work, that would also be really good.

So, when you did all of that and you're ready, let's get started.

In this lesson, You're going to identify when a problem needs to be broken down.

Now we call that decomposition, but we're just about to explore that on the next few slides.

Then after that, we're going to implement and customise GUI elements to meet the needs of the user.

Now use a fake GUI there, but you can see that on the text, on the screen, that GUI, which stands for Graphical User Interface.

So, basically, when we start making an app, in this lesson, we're really going to focus on the elements that the user's going to interact with, rather than the coding elements, which we'll look at next lesson.

So, let's introduce you to an app that we're going to develop together, called Tappy Tap App.

So, over the next two and a half lessons, we will develop a new app called Tappy Tap App.

So, after two and a half lessons, you're going to start developing your own app.

But in the first two and a half lessons, we're going to develop this up together and work as a team when we're developing it.

So, let me tell you something about this app.

So, first of all, this app, the aim of the app is to get the users to click a moving dot, a moving blue dot, as many times as they can within a time limit.

Now, every time they press that dot, the score's going to increment by one.

So, they're going to up their score.

But the trick is that, every time they do hit it and a score increases, the dot's going to move to a different place on the screen.

So, that's the app that we're going to build.

So, let's now talk about this word that I introduced just a moment ago, which was decomposition.

Now, decomposition is breaking down a problem into more manageable chunks.

Now, programming an app for a mobile device can be a daunting task to undertake, whether or not you are a beginner in programming, or an experienced developer.

If I said to anybody, "go and make this Tappy Tap App".

By itself, It's quite an overwhelming problem to just try and open a computer and start coding.

So, what we've got to do is break down the problem into these more manageable chunks, so, we can tackle each part at a time.

And as a result, hopefully that will make the whole bigger problem a little bit less daunting, and hopefully make it more achievable too.

So, let me show you an example of decomposing a problem.

Now imagine that your job is to make the first level of a new platform game.

So, we're parking the idea of the Tappy Tap App, just for a moment, and we're going to give you a new job, which is to make a platform game.

Now, we might start decomposing the problem in the following way.

Now, if we look at the screen here, look at all the different elements going on here.

So, I would personally decompose it this way.

I will start by creating the layout of the level.

So, don't worry about any characters or anything like that for the time being, I just want them the look and feel of the game.

I want to work out what platforms that my character can jump on eventually.

So, once I've made my level, the next part might be to add my character that the user's going to control.

So, I might decide how they're going to move around the screen, whether or not they need to go up and down.

So, that will be the next part to the problem.

The next thing I'll do is maybe have the enemies that they use has got to interact with.

And then finally, I'd also maybe add the score, the time, and the power ups.

So, I've taken a, quite a large problem of making a platform game, but I've actually now broken it down into these manageable chunks, that if I tackled each one at a time, it makes the whole problem way less daunting.

Now, you might be thinking, "well, each one of those four bullet points, I mean, "even those individually, are a little bit more daunting".

Well, if you think that's the case, then what we do is we decompose each one of those further.

So, as I've just mentioned, when you arrive at each decomposed step, you can now decompose it further.

So, how might you decompose the player movement step further? So, we'll just head back to our previous slide, I said, create the layout of the level of the use control character, add the enemies, add the score, timer, and power-ups.

So, I want you to focus on the user controlled character.

So, imagine you've designed that character, I'd like to focus on how are you going to deal with the player movement.

What parts would you do where, what would you do first? So, just pause the video, see if you can think of how you decompose that step.

And then on pause when you've got some ideas.

So, hopefully now you've got, you've decomposed this step a little bit further.

Now, there's not necessarily a right or wrong way to decompose a problem.

As long as you're kind of thinking about all the steps required, a new tactic and the order in which you think is correct.

But this is the answer that I came up with.

So, I think first of all, I would deal with the left and right movement.

So, my character is on screen, how am I going to make them move left or right.

So what key would I press on the keyboard, or when they do click that button on a game pad, for example, how quickly would I expect him to move forward and backwards or go left and right.

The next thing I'll do is, maybe add some kind of a gravity effect, because the platform.

So, I'd imagine that when they step on something and there's a gap, then they fall down the hole, for example.

So, that will be adding some kind of gravity, and then to maybe allow them to get over that hole, the next part that I would add into my game would be the ability to jump.

So, I deal with, once I move left and right, and the ability to fall, and then also add that ability to jump.

Now you might have thought of some different things that I just came up with, or maybe in a different order.

And that be absolutely fine.

The point is, you're taking quite a large problem and you're breaking it down so you can tackle each one in turn.

Now let' move back to our Tappy Tap App idea.

And what I want to do is give you some success criteria.

Now, if you've not come across this terminology in any previous work that you've done, success criteria is a set of, a list almost, that we can judge the success of our project against at the end.

Now these things should allow for a simple yes/no answer.

It should be almost like a checklist that we worked through.

And if we've worked through all that checklist and we've managed to meet all those criteria, then hopefully we've got a successful project.

So, let me show some success criteria that I've written for our Tappy Tap App, that hopefully, by the end of the next two and a half lessons, you will be able to confidently say that you've met all of the criteria for this app.

Now, all of these success criteria are also on your worksheet.

So, you don't need to worry too much about reading through all of these right now, and taking them all in.

But let me just show you some examples of them.

So, I think we need a welcome screen and gameplay.

So, let me look at the welcome screen first of all.

On my welcome screen, there must be a logo and instructions on how to play.

It must also have a button that activates the game once clicked.

The gameplay itself, the game must last 15 seconds before automatically moving to the final score screen.

So, you can see with all these list of criteria, they're not subjective criteria.

They're not things that are based upon opinion.

They're very factual things.

So, by the end of the project, we could confidently say yes or no, that we've done each one of these things.

So, for example, must show a logo and instructions on how to play.

That's a simple, yes, no action.

A success criteria that would be subjective, would be, the instructions must be clear on how to play the game.

Now, I might feel that they're clear, but then again, I wrote them.

Then somebody else who's just coming new to my game, might read my instructions and not find them clear.

So, you see how that one becomes a subjective thing.

It becomes based on opinion.

What's important about our success criteria, is it's not based on opinion.

And we can just put a tick or cross next to each one.

Now, we've also got welcome screen to criteria.

I've got great gameplay criteria.

And on this slide, I've also got final score criteria too.

So, like I said, these are all on your worksheet for you to digest in your own time.

So, let's give you a task to do first of all.

So, we've talked about decomposition, and we've talked about success criteria.

So, your task now is to look at those success criteria, and see how you would decompose the problem.

Now, there's no right or wrong answer here.

Mostly there wasn't in the platform again.

But I would like you to take this larger problem that we've talked about, which is to make my Tappy Tap App.

I've given you the criteria of what it must do.

See if you can break this down into three to five steps.

So, we're talking about that higher level of breaking it down.

What parts would you tackle when.

So, what I'd like to do now is pause this video, head over to task one on your worksheet, and decompose the task of building a Tappy Tap App.

So, I'll leave you alone to do that.

And when you completed that, I'll be here when you get back.

Now, I'm going to briefly talk about how I would have decomposed it, and maybe that would give you a few ideas.

But like I keep saying, this is really up to you.

As long as you've taken the success criteria.

And you're able to kind of maybe create your little subheadings and sections that you can tackle one at a time, then I'm sure you've done a great job.

So, let me head over back to my success criteria.

I think the way I would have done it is, I would have started off by thinking, the first thing I need to do, is to create my three screens I need in my games.

So, I need a welcome screen.

I need a gameplay screen, and I also need some kind of final score screen.

So, I would deal with making those screens first of all.

It may well be that I then kind of create the look and feel of them.

So, I might deal with the kind of adding the titles in, and then I might look at the actual gameplay itself.

So, I'd actually make the game, that would be a step that we can use.

And I think when it gets to that step, I'd want to decompose that further, but that kind of high level view, I think just knowing that this stage, I then need to deal with the gameplay, I think that's absolutely fine.

And then finally, I'd move on to dealing with the user score.

So, not final school screen.

I need to display the user score.

So, I might just have to decompose that code, displaying the user score.

And those would be my decomposed steps.

But again, like I saying, you might have to come up something slightly different and I'm sure that's perfectly fine.

The platform that we're going to use to build our mobile phone application over the next few lessons, it's called App lab, and it's made by code org.

Now code.

org have made this really inspiring video that I'd like to show you, about the reasons about why we're going to use this particular platform to build our mobile phone application.

So, you watch this and we'll get started after it.

♪ Wondering over ♪ ♪ Me me me me me ♪ There's probably been a time in your life when you thought there should totally be an app for that.

Making your own app has never been easier than it is with app lab.

It's a powerful tool for beginning computer science students to quickly build shareable apps that are relevant to their lives.

Here are five reasons that app lab could be a great tool for your classroom.

One.

Rapid prototyping.

Students can go from an initial concept to a working prototype super quickly at App lab, with just a few actions, students can see their idea, come to life and exhibit interactivity.

Two.

Blocks to text.

Coding with blocks, introduces students to programming, without needing to know much JavaScript syntax.

You can code in blocks, you can code in text, and you can actually drag blocks into texts.

This makes programming approachable for new students and dynamic for more experienced students.

Three.

Building interactivity.

You don't need to know any HTML or CSS to build these apps.

In design mode, you can just drag buttons on, drag drop-downs on any kind of UI element that you want to add.

You can add that and then power it with the code.

Four.

Lightweight database capabilities.

Any kind of useful productivity or fun app, it's almost certainly as using a database in the backend.

And that's normally a super inaccessible thing for new programmers to get going.

And with the data blocks that we have built into app lab, that's really easy.

You can build games that have a leaderboard across all your users, a quiz or survey that stores user responses, so you can analyse them later.

Ratings and comments on an app that lets you rate movies, or food, or places to study.

Programming, with the database unlocks a whole new class of apps previously inaccessible for new programmers.

And finally, five, Shareability.

Every app automatically has a unique URL so that once students have a working app, they can instantly share it with their friends and family at any device.

You can put in your phone number, or put in a friend or family member's phone number, and it'll text the link to them.

And when they click it, they open it up and they're using your app on their phone.

It's kind of like the game connected, where I was kind of like a puzzle, and you have to fill in the grid with the colours.

We all worked in groups, and we were like, "Okay, so, what do we want to to do? What do the customers want to see? The name of the game is called the boat.

It's very simple.

We built app lab for our particular CS principles course, but what's amazing about it is that, it can be integrated really into any intro to programming class, that any teacher is interested in using, and we're excited to share it.

{Man] Check out our YouTube channel for more detailed tutorials on how the different features work.

So, I'm sure after watching that, you're really excited to get going and start using this App lab platform.

So, let's go right ahead and do that now.

So, I'm going to show you a demonstration about how to use App lab.

Now, to do this, you need an account for App lab.

Now, if you're under 13, please ask your parents, or carer, or teacher, to set you up with an account, so you can go ahead and do this.

If not, you can go.

If you are 13 or over, you can create your own account and then log into App lab.

Now, I'm going to show you how to do all of that now.

All the steps that you can see on the screen, so, I'm going to show you how to start new projects at App lab, we're going to name our project Tappy Tap App.

And then all we're going to do, is the simple thing of adding a button to the screen.

And that's all we're going to do for our first set of steps.

So, I'm going to show you that now.

So, if you watch a video, and then you can go ahead and do that yourself afterwards.

So, let me hand over to App lab now.

So, this is www.

code.

org.

Now you can search for this using a search engine, but it's just as easy to go to your address bar on your web browser and type in www.

code.

org, and then hit Enter, and you'll find the page that looks just like this.

Now, I've already gotten a count, so, I'm just going to click sign in.

So, that's what you've got to do.

But if you haven't yet gotten an account, then there's an option there to create your account.

Now, remember if you're under 13, please do ask your parents, carer, or teacher to create that account for you.

So, I'm just going to click sign in, and then show you the page where it takes you to.

Now, I've got a teacher account, so yours might look slightly different to this, but all you need to do, if you want to get started, is click on this dropdown where it says "Create." Now my face is in the way, this one is going to move myself around.

There we go.

So ,if you click "Create", you can then select App lab.

Now, App lab would allow us.

this will open up by App lab environment, so, I can start designing and developing our Tappy Tap App.

Now, it's really important that we give it a name to start off with.

So, we can always come back to this later on.

So, where it says "Untitled Project", just to a right hand side of that, I can click "Rename".

And I want you to call this Tappy Tap App.

Now, type that in.

Now I've already got a project name, because I've been developing it to see what this would look like.

So, I'm going to just get this.

I'm going to call this a "Demo Version One".

You don't need to put that part in, you could just put Tappy Tap App.

Click away from that.

It will save it as that, click save there.

And then that way now it remembers the named the app.

Cause if you have a develop apps in the future, you don't want to give it as default name because you'll never remember maybe what version, or what the app was that you were developing.

So, it's really important that you do give it the name.

Now, the only other thing that I asked you to do for this was to add a button in here, which was to be added, to my screen here.

Now, you'll notice that we have three options here.

Just the top left hand side, you can see we've got code, we've got design, and we've also got data.

Now, at the moment, this lesson, we're not going to be dealing with any coding we'll look at that in the next lesson, this lesson we're looking at that term.

Can you remember that term that I described earlier? It was called GUI, which stands for Graphical User Interface.

So, we're going to click on design, and that'll allow us to kind of play around with the look and feel of what we want the app to look like.

Now, you can see, we've got this a window here, my design toolbox here, and we've got button, we've got label, got radio button, we've got image, we've got screenshots.

We've got all these different things that we can insert into our home screen.

Now, before we go any further, actually this is my home screen.

It would be really good idea to call it home screen.

Because again, as you can imagine, we've got screen one.

If we're going to create multiple screens, for example, a gameplay screen, or a final score screen, it'd be really useful to be able to quickly identify these and refer to them, maybe using our code.

So, the first thing I'm going to do is change my ID here.

I'm going to get with a square screen ID, and I'm going to call this home screen.

So, I'm just going to type in home_screen.

Now, I've used the naming convention here.

So, because home screen is two words, and I can't use spaces in the ID, will be certainly that allows me to, be part of practise to.

Then what I'm going to do, is separate them using an underscore.

Often, different programme languages have their different naming conventions.

And the one that I'm using here is actually very familiar or used within the Python environment.

But I also learned to code using a language called Java, and that use something called CamelCase.

And that's where if you've got a two words, I'll demonstrate this now, you always start the first word with a lowercase letter, but if there's a second word, you don't separate it with a space or underscore.

What you do is you start a second word with a capital letter.

So, that's CamelCase because any new word that appears just start with a capital letter.

But like I say, I'm just going to stick to my underscore.

But what I think is really important as you develop this app and you develop your own app is that you stick with a naming convention.

And then that's always going to be easy for you to remember how you named it.

But also anybody else reading your code is going to be able to follow your kind of conventions that you used.

So, I've called that home screen.

So, it hasn't changed anything that user will be able to see, but it's something, like I say, that I can refer to later on.

Now, you've got the option for background colour.

So, you might want to change the background colour.

You can click on the white there and it gives you this colour palette that you can use.

So, if you want to change the background colour to, I dunno, like a red, you can see it changing like that.

Now for the time being, I'm just going to keep it white for that for now, but just keep that in mind for later on.

So, the only thing we needed to do, was to put a button in, and it's as simple as dropping this button here.

And we're just going to drop it in there.

Now we can play around with the properties, but I'm going to demonstrate that in the next video that I do.

So, I'm sure I told you quite enough to get your head down for the time being.

So, that's to log into your account, create a new project called Tappy Tap App, and then just drag a button, and then maybe rename the screen "Home_screen".

Once you've done that, unpause the video and we'll move on to the next steps.

So, how do you get on with that? And hopefully, you didn't find it too tricky and you feel confident to move on to maybe completing the home_screen or the welcome screen.

So, your next task is to implement all the design elements necessary for our welcome screen.

So, don't forget to rename screen one to "home_screen, which hopefully you've already done.

And you continue.

Also you might want to use your success criteria to help, as well as the sketch design that I've gotten the right hand side there.

Now, this screen that you're looking at now, is also on your worksheet.

So, you can use your success criteria that's on your worksheets, but you can also use this design to kind of try and make it look reasonably similar.

Now, I'm going to also give you another demonstration about how it can do a few more things.

But, just to kind of hopefully again, make you feel even more confident and be able to go and take these steps yourself.

So, I'm just going to head over to App lab again now, and back to my app that we were working on just a moment ago.

So, I'm just going to move myself down to the bottom.

There we go, So, you can see what I'm doing.

Now, part of this was to have.

It says that a logo in your success criteria, but I'm happy for you to just add some texts that says Tappy Tap App.

And maybe play around with the text, so it looks a little bit logo like.

Now, what I'd like you to do is, first of all, I would like you to select a label.

Now, we do have a text input and a label.

Text input allows a user to input their own text.

Now, this is just a title that we want on screen, and we don't want text input.

We want a label.

So, I'm just going to drag that into here, and you can see it's just a text.

Now, just keep an eye on the properties that we have here.

But properties are things that we can manipulate and change around to actually change what the appearance and what this label is able to do.

Now, key thing that I wanted to point out is the ID and the text.

So, my label is labelled one.

Now, if I include multiple labels, we don't want it to be called label one, or label two, label three, because again, we won't remember what it does.

So, always give that a sensible name.

So, this is my title.

So, I'm going to call it Title_label.

And I'm going to use the same convention as I used early, which is the underscore.

So, Title_label there.

And that's fine.

Now you notice how the tax hasn't changed the Title_label, because the ID is just that naming convention that I can refer to later on, almost like a variable name.

Now, the text, that's what you see written there, with the appearance of it.

So, I'm going to change that part to Tappy Tap App like that.

Now, we've got the height and width, which we could change here.

So, you can see as I'm moving up, that changes the width of the box, change the height there.

But of course you could also use your mouse and just drag like this and position what it's going to look like.

Now, notice when I made the box bigger, I didn't make the text any bigger.

And also, you notice that it puts a little dotted box around the outside.

Now the user won't be able to see that dotted box.

That's just so you can see where it might appear on the screen to make it nice and clear.

So, just have a look at the screen a second.

What do you think would change, maybe the size of the writing? Have you spotted it yet? Now, Actually, if you look down, further down, we've got the X position to Y position.

That would just be where that box appears on the screen.

So, that's X will be across, and Y up and down.

We've got the text colour here.

We've got the back colour of the text box I've got.

And then we've got this font family and font size.

So, notice as I put the font size up like this.

it's making it nice and big, however big you would like it.

So, let me just keep mine.

Let's just change the box slightly, see if I can make it fit from.

There we go.

Perfect.

And I'm not a massive fan of Aerial, so, I'm going to change it to.

let's have a go at the Verdana, through like that.

Not too bad.

Tahoma, yeah, it's okay.

But you go through and find the font that you like.

That's quite nice one.

I'm also going to change the text colour.

I think I would like me a nice blue there.

Perfect.

Now we're getting there.

Great.

So, I'm happy with that.

That's my title.

I need some instructions.

So, think about how you do that.

And then also what I need some.

I need my button as well here, which I've also got.

So, my button here, I'm going to.

Now, this is called bottom one, but this button is going to start the game.

So, first of all, I've changed the text to "Start".

And then I'm going to change this to "Start_bottom.

Perfect.

Now, I'd like to see what you can create with the rest of this.

So, I'm just going to head back over to my slides now.

So, you can see you have your success criteria to work with.

On your worksheet, you've got this image, this is the kind of design that I've created.

So, see if you can make it look similar to this, using your worksheets and any resources that come with this lesson.

So, good luck with that, have fun.

This is the app that we're making together, but don't be afraid to make it your own.

You've got success criteria that you need to work towards, but there's nothing in the success criteria that talks about font styles or colours.

So, I'm going to leave that completely up to you, how you'd like it to look.

So, if you can do that.

Spend about 10 minutes on that.

And once you've completed your home screen, unpause the video and we'll move on.

So, if you manage that, you've done a really great job.

So, you've started designing the graphical user interface of our application.

So, like I say, next lesson, we'll look at the coding.

But just to give us a bit of a preview to the app that you're going to develop, what I've done is I've made a version of this application.

It's not perfect, but I'd like to have a go at it to maybe give you some inspiration and excitement to look forward to for next lesson.

So, I'd like you to head over to task four on your worksheet, where you will find that a URL to a hyperlink, to a version of the application.

Now, like I say, it's not perfect.

So, I'd like to have a go to have a play with it.

I have a few goals.

And then I'd like to look at your success criteria thing.

Does it actually meet the success criteria, or is there anything missing? So, pause the video head over to that.

Have fun with it.

And in about two, three minutes time, come back and we'll complete the lesson.

So, that's all for this lesson, and a really big well done if you've managed this.

Because what we've done in this lesson is, we've looked at the success criteria.

We've looked at the concept of decomposition, which is breaking down a large problem into smaller steps.

So, hopefully you feel comfortable in moving on to the next stage of this Tappy Tap App, and actually start coding it and adding some functionality into our application.

So, I hope you're looking forward to it as much as I am.

I'd really like to see the work that you've done in this lesson.

I'd really love to have a go at your apps, or at least see the design of the home screen that you've made.

And if you'd like to share with us, then please ask your parent or carer to share it with us on Instagram, Facebook, or Twitter, using and tagging @OakNational, and then using the hashtag loan with Oak.

That's all for lesson one.

And I'm looking forward to seeing you in lesson two.