This is the transcript for 'Get started with app development with a Swift Playgrounds project' video.
Hello and welcome. My name is Matt Richards and I'm an app professional learning specialist based here in Adelaide, South Australia. Thank you for joining me for this workshop, where we are going to unpack and have a look at Swift Playgrounds version number 4. Now, this is a particularly exciting version of Swift Playgrounds because for the first time since it came out in December last year, 2021, we're able to use it to build and create our own functioning iOS apps. So for the first time, we can use the templates that are built within Swift Playgrounds or our own use of Swift code, and have fully functioning apps.
That leads us to the goal of this workshop. This workshop is going to look at unpacking a particular template where we can build out and create our own functioning app. If we were to break this into some parts, we're going to have a look first of all at what the interface looks like in Swift Playgrounds 4 for building apps. We're going to modify, and we're going to make some actionable code, use some code that's going to give us some end results, and start to find similarities and joins between the code itself and what we see on screen. We're going to get to manipulate and use some images, and bring them in so we have our own photographs and imagery in our app. And finally, we want to expand the app by adding some extra content.
So, join me as we get started, and we'll dive right in on our iPad, and start creating our own app using Swift Playgrounds 4.
Ok so here we are on my iPad. I'm going to immediately jump into the Swift Playgrounds app, the one you can pick with the white background and the orange bird. You'll notice that I'm using a track pad to navigate my way around the iPad, so you can see where I am and what I'm going to click. So as I open Swift Playgrounds, you'll notice that I've got a whole bunch of tiles sitting here. These are all of my apps and projects, playgrounds that I've been working on up until now. That's where they will all sit. Down below, where I can go and retrieve new playgrounds and new templates for an app.
So I'm going to jump into see all. In here, I can see a whole bunch of playgrounds that are going to help me or anyone learn how to get started with coding in Swift. But this section here, this app gallery section, that's the part that I'm really interested in because that's the section where we get new and useful templates that are going to help us build out a gallery, sorry, an app. The first one that I want though, the one we're going to work with, is called About Me. I'm just going to click on Get, and that will immediately download it. It's generally pretty quick. There we go.
Before I get started and before I even open it, I want to show you a quick menu. I'm going to tap and hold on that tile. I've got a few options in here, rename, duplicate, and share. I'm going to start by renaming this to About Matt. I'm just going to give it a more appropriate name, and I'll click done. While I'm there, if I retap and hold on that tile, I can see duplicate and share. Now, duplicate is a really useful feature. If you feel like you have built your app to a point that you're really happy with, but you want to do something big and bold next, it might be a good opportunity to stop and duplicate it so that you don't perhaps unintentionally destroy the work you've done. It's a good safety net.
All right, here we go. Let's jump into this tile, this About Me or in my case About Matt template. All right, I'm going to get rid of these... Close these walkthroughs just up there. I'll come back to them in just a moment. And I'm going to click this button here, which is my sidebar button that shows all my files. So, to get started, what are we looking at? Because straight away, it does look a little bit scary. At first... First thing to know, I'm using a 12-inch iPad Pro, and that allows me to see all three panels, the left, middle, and right all at the same time, which is great for you as I demonstrate what I'm doing.
If you are using a more common 10-inch iPad, you'll only be able to see two panels at any given time, so just bear that one in mind. So what have I got? On the left-hand side, I have all of my Swift files. You can tell these, because they've got the Swift logo next to them. Below that, I have a section called assets. Assets are files that are used within the app itself. So in this case, they're all images. All right. Content view though is where I'm going to stop because that one drives the start of our app.
So in the middle, the scary bit, this part here is where all the code sits. So for those that look at this and think, "I have no idea what this is saying and how difficult it might actually look," the whole point, as I said before, is I'm going to guide you through this, and it will start to make sense, and we can start to make some changes. Running across the top here, I have tabs for each of those files I might have opened over here. So if I do happen to need to close this panel, I can still access different files across the top.
There's a play button. This play button is going to run our app. It's going to run an app not necessarily as a preview, but actually allow the iPad to take over and run it as a proper app on your iPad, which is pretty clever. All right, just press stop, and we're done there. Then on the right hand side, I have my live preview. This live preview as I make changes to my code, as the name suggests, live updates. I've got a maximising option here to make the preview bigger. I have a hide and reveal for my preview. This special button here are the walkthroughs. That little helper that I had at the start there, they all hide in here.
And in this walkthrough, it's going to explain all of the parts of this app piece by piece. So if you're interested in what one of the aspects does or how it works, this is where you go to learn a little bit more. If you're interested in what the thinking is behind it, jump into the walkthroughs and have a bit of a look. Let's reveal that preview again and just one last little hidden button. If I actually click on the word preview, I will see a couple of options like to restart the preview or pause it. And sometimes, you might need to just delete it and restart the preview if things aren't working your way.
Something else to note just in this section, when you make a change to your code, and it will update over here, you might think I want it to be instant, and sometimes it's not. There's a little bit of processing to happen. So you'll see up the top to the left of preview is a spinning wheel. Just bear that one in mind. When it's finished, it will update, but just allow it to do its thinking and processing first. All right, now that we've got a better idea of what we're looking at, what do we do with it? Well, the first thing we're going to do is change one of the settings inside our app. And we have a giant button here that says about me app settings.
I'm going to click on this one. In here, we can change the name of our app. Different to the file name we saw before, this is the actual name of the app, but I am going to repeat it, About Matt. I'll put my surname in, About Matt Richards, and done. While I'm here, I can change my accent colour. What's an accent colour you might ask? Well, if I have a look at my preview, in the bottom, I've got my buttons, and my home button is blue. That blue is the accent colour. It's the default colour used by the app for anything like a button. So, I'm thinking I might use this pinky red one.
Now, from here, I've got one more change I can make, and that is the actual icon for my app. At the moment, it sets a custom where I can import an image, and that would be the icon, an easy, easy process if you wanted to make one using keynote as a square keynote file, and export as an image, you've instantly made yourself a great custom icon. However, I'm going to use a placeholder. And I'm going to jump down below, and I'll find something fun, this smiley guy here, and that will be my placeholder for this. I'll click the cross, and I'm done there.
Let's start playing around with the code that changes our app. We want to make this all about us. So I'm having a look at my files. What can I work out first? I need to start drawing some links and connections with what I see and what's actually happening here. The first thing I'm going to look at are these tabs across the bottom, home, story favorites, fun facts. Now, straight away, I can see here the words home view, story view, favorites view, fun facts view. There's a link there. There's something going on in common.
If I come over to the files, I see, again, home view, story view, favorites view, and fun facts view. There's probably a link between these files and those tabs. Let's check out home view. Let's start with the one we're on. Home view, let the preview build, and here it is. All right, so this page has got all the content it needs to drive this page. And I can see straight away there's a heading called all about, and here, I see some text that says all about. I wonder if I can change this, all about Matt. Straight away, it's made the change.
I can see underneath this text that there are three modifiers that change the way it looks. Its font is a large title, its font weight is bold, and its padding. I don't like the black colour though, so I'm going to jump on the end of padding and I might enter down just a couple of times. I'm going to start with another modifier, which is foreground color, F-O-R-E. And as soon as I've done that, it's come up with a suggestion foreground color. Now, I'm using an external keyboard for what I'm doing, so that keeps the keyboard off the screen. It's going to make life a little easier for me as well.
So again, as I'm using a track pad, so I've got a keyboard and a track pad off my screen. I've typed in fore for foreground color. I'm going to press return. Now, I can choose a colour. One thing to note, I haven't chosen a colour quickly enough. I've got an error. It's just simply saying, "Hey, I need a colour." So, what if I was to type in .purple? I'll press return, and straight away, my heading becomes purple. What about if I chose .orange? It works, but there is one other option. What about .accent color, that colour that we changed in the settings? Sure enough, it's exactly the same as the buttons that were below. It's that pinky color. All right, easy enough. We've just been able to change the foreground color or the colour of our text.
Underneath, I have a space for an image, and I have a look here. It's collecting a file called placeholder. Now if I was to have a look in my assets, remember, I said before the assets are where all the files live. If I look in assets, I see one called placeholder. What if I click on it? Aha, it does look exactly the same. Let's jump back to home view. I think what I would like is a different placeholder. I need a selfie, so one of me, so I'm going to jump up to the top here, I have a plus button. I'm going to click on that, and I'm going to choose photo.
Jump into my albums, and I'll choose a photo of me. I'll grab this one here. And it's sitting there as an asset. Its default name is image asset, and I'm going to type profile pic. Notice that I'm using no spaces, and I'm using Camel case, which means every word in there has a capital letter. I'll just press return. Back into home view. All right, so as I said before, the image that's being picked up is placeholder. So now that I have added one called profile pic, if I simply say, "Hey, I want you to go find profile pic," it should change it, and it does. Brilliant.
There is one other modifier that I would love to add though, so I'm going to enter down under resizable and scale to fit. Now, those two modifiers are really, really important. I'll come back to them a little later, but I'm going to add another one that says .cornerradius. And I'm going to put a value in of say 10. And by doing that, it has added some rounded corners to my About Me photo. In fact, I could change that 10 to say 20, and I get bigger rounded corners and so on. You get the idea.
Lastly, now that we've done our image, the last thing is I can put my name in there itself. So I'll just simply remove this just the same as our heading was before. And just like before, I'm also going to add a foreground color. I might make it orange. All right. On my home screen, I've changed three aspects. I've changed my heading. I've changed my image by importing one in as an asset, and repointing it to where it's got to find it. I added a corner radius to make my photo look a little bit nicer with rounded corners, and I added my name, and changed its colour.
Now, one thing you might notice is that those three parts are all sitting on top of each other. I've got the text first, the image second, and then that last bit of text third. Now, all of those, being that they're sitting on top of each other are sitting in what we call a V stack. V stands for vertical. So everything that is sitting inside this V stack, and there is the opening bracket, and there is its accompanying closing bracket, everything that sits within that V stack is vertically placed. We start with what's on top, the text. Then we have an image and then we have some more texts.
That's a very important piece of information to note, V stack. So, all right, let's jump back to our content view, and see how that looks. It's updated. I've got my tabs across the bottom, looking pretty good. Let's jump over to the story page. I'm going to jump into, you guessed it, story view. I'll let that reload. There we go. So, in my story view, I have all the elements I need to create a part of my story. Let's have a quick look. I see this V stack again. There it is. Everything that sits within that V stack is going to sit inside here. I do have some extra bits and pieces though.
I've got some padding. I've got a frame. I've got a background. Notice this corner radius again of 15. I'm pretty confident that's going to have something to do with these corner edges, these curved corners on the white box, but that's not going to stop me from putting in my story. Let's start changing some texts, things like text your story. I might replace this with Matt's story. Again, it would like me to put my name in, so why not? I'll put it in again. That's looking pretty good, but I haven't got anywhere to actually type my story, and I really want it inside of this white box, because one thing I have noticed is that this white box is all sitting inside what we call a scroll view.
And as the name would suggest, it means that we can scroll up and down the screen if it's too large for the screen. All right, so I'd like some more text. I'm going to pretty well copy what's happening up here. Text, open a bracket, notice it puts the closing bracket in for me. Open some speech marks. Notice it puts the closing speech marks in for me as well. I'm going to start typing a little story about me. My name is Matt. I am an Apple professional learning specialist based in Adelaide. For the purposes of this, that will do. Now, one thing I'm a little bit... Let's have a look at Apple there. Let's fix that one, bit of checking our work.
One thing I do want to do though, I'm not so sold on this. Everything here is a little bit squished for my liking. I'd like this to come down a little bit. So in between these two bottom texts, I'm going to add what's called a spacer. Just that one line of code has just given a little bit of breathing space. The other thing I'd like is I'd like, "My name is Matt," and I'd like, "I am an Apple," down on the next line. Here is my text. My name is Matt, full stop. I'm going to in here add a backslash, and a backslash is the key sitting just below your delete button, a backslash \n. That simple process of \n will push the text down to the next line. So, I'm happy with that.
Now if I like, I could add another photo, so I might grab another one of my profile pics. Now, what I might do is have a little bit of a look back at my home view, and see what was done. I see they copied the same idea, whereas we had text bracket speech marks. We've got image, bracket, speech marks. In fact, what I might even do is go one step better, and copy that whole four lines of code, copy with command C, over into my story view, and I might place it in here, command V. Just like that, it's in there. Not bad. Now, I could go through and change it to a completely different picture. In fact, just for a bit of fun, I know this character is here, Blue from the Swift Playgrounds learn to code.
If I'm going to just jump back into my story view, I mean, what would happen if I changed my profile pic image to Blue? There he is. Perfect. I could technically go and add another picture from my photos, and I could pop that in, Matt and emoji, back into my story view. I'll change that to Matt emoji. There we go. Brilliant. I love it. As simple as that, I could have typed that code out, but I could have just as easily like I did, gone through and copied and pasted the code. Fantastic. One thing I noticed too is that my background is purple.
Now, I might not be a fan of the purple background, so without actually knowing where that code is, I'm going to have a little bit of a scroll through this code, and see if I can see something that reflects it. Here, I see background image purple. I notice that it's taking it as an image. That is this purple one. Now, I've got a couple of others that I could use. I can see I've got red, orange, and green, so I might change that to green. You'll also notice that there's another piece of code sitting afterwards that says opacity 0.5. Opacity commonly referred to as how see through you can make an image. So what if I make that something a little darker?
Let's make it 0.8, and then it's a little less see through, 1.0 being a solid colour. All right, fantastic. Now, we've worked that one out. Let's jump back to our content view file. Let's see how it looks. That bit looks great. Over to my story, that bit looks great. Now, I'm going to jump over into my favorites view. This one's got something really fun. Let's jump into the favorites view file. Here it is. Let it load up as a preview. Now, the first thing I am going to do is I am going to change the spelling of favorites. It is American, so I'm going to pop a U in there. I can see I have another V stack, but it's going to introduce something else.
Let's have a look. I've got my favorites. There's my heading. There's my three modifiers that make that happen. Then I have another stack called an H stack. This one's quite short. This H stack, H is going to stand for horizontal. So like with vertical or V stack running everything down the page or screen, an H stack is going to run across it. So in my H stack, I have a couple of things. I have some text which says hobbies. Fantastic. There it is. I can see it there, and I can see a spacer. All right, so there's something...
There's space to put some more over here. This hobbies is sitting in a horizontal stack. There's that space that we used once before, a bit of padding to space some things out a little bit more. Then I see another H stack. Now, this H stack has some text, we recognise that, but what it's doing is it's picking up an emoji as text. Now, we can use emojis as texts. That's pretty exciting stuff. So if you're not a big fan of the emojis that are there, we can simply get rid of them. And I can open up my emoji panel now on my iPad, on my keyboard.
The bottom left key is a globe key. If I press that, I'm going to find something that's a bit more of a hobby of mine. I might find something like a car, and I'll grab this red one, because I like driving. I love travel, so I might take the surfer out, and I might put in a plane. Finally, I love playing music, so I might find a guitar. Just like that, I was able to put in three new emojis, nice and simple. So, a couple of little pieces of code here that are going to help set this page apart. We've got a bit more padding, a divider, which is going to give us that line. Then we enter into pretty much the same as we see above, an H stack with a heading.
This time it's foods. Then we see another H stack with more emojis about food. Again, just like before, I could go through and I could change those emojis, but there's something really cool going on here, something that I love. It's this disclosure group. Again, favorite is spelt wrong, so I'm going to have to come down where it says guess my favorite, O-U-R-I-T-E colors. We just washed that American spelling, guess my favourite colors is a disclosure group. A disclosure group has this little triangle on the end of it or a little arrow. We call that a disclosure triangle or a disclosure arrow.
If I click it, it's going to reveal something underneath. That's why it's saying guess my favourite colours. Then we can have a look, and there they are. I love the fact that this piece of code here is the disclosure group. This is the part that's going to open and close everything. I can see the colours that are being picked out. If I open this up again, I can see three colours here. I can see color.purple. I can see color and then some brackets. So instead of giving us the exact color where they have underneath colors are orange, so purple and orange are listed out as exact colors.
So, this pink color is a little bit different. It hasn't been given an exact name. It's been given different parameters based on its hue. They've used the term hue, and then given, sorry, hue, saturation and brightness, and we got different values for each of those. That's how they got to that pink colour. So in here, we might just simply like to go through it again, and change them to what we want. I might say red, enter that one in. I might say, "You know what? I actually do know the colour I want, so I can get rid of this hue, saturation, and brightness." I can simply say color.blue.
Finally, I might say color.orange, sorry, not orange, yellow. Let's have a look. For those that are familiar with South Australia, they are the colours of my favourite footy team. There we go. A few little changes we can make to our favourites page. Not too tricky, and most importantly, we love the fact that we can use emojis in the use of code. That's pretty special. All right, there is one other page. We'll jump back to our content view. Let's have another look. All right, home looks good. Story looks good. Favourite looks a little bit different, and we've got some colours in there that are different. And finally, we have a fun facts page.
Now, this one looks interesting. There's not a lot going on here. We do have a heading, but it says show random fact, so it's obviously pulling some random facts from somewhere, and I'm guessing they're going to display somewhere on the page. Sure enough, there it does. Let's check out what's going on. Let's go into our fun facts view. And here they are. We have got three fun facts that I can see, all those pieces of code as lines of text. On this page, you'll notice that we've got a different stack, a third kind of stack. It's called a Z stack.
And Z stacks work a little bit differently, where vertical works with content above and below. Horizontal works with H stack, works with content to the left and to the right. A Z stack works with content in front and behind, so we are stacking on top of each other as though we're looking down on top of it. Now, in this Z stack, we have a vertical stack, and that vertical stack has got a heading called Fun Facts, and some text, which is going to be the fun fact itself. Then we have a button underneath, which is this one here, show random fact. We can see it there.
Now for us, we're going to keep this page fairly simple, as simple as we are going to change what these facts are. I might say Matt lives in Adelaide, South Australia. I could continue on changing these facts. All right. Also, we could change this button, show random fact. We might say show random Matt facts. There we go. We get the idea that we can make some changes to this page. We're going to keep this page fairly simple, and leaving it as it is. However, that said, if you were to take something like what's happening in the story view where we have a coloured background, we might think, "Well, hey, you know what? I like this coloured background, can I apply this to a different page?"
Yes, definitely you can. I'm going to grab this line of code, command C to copy it, and I'm going to jump back into my fun fact view. I'm going to paste that. I'll paste it just outside of that Z stack. I'm going to bring it out here, paste it, and there it is, sits at the back. Now, I don't know that I want to reuse the green, so I might go for something like orange, because I notice that I've got orange sitting there in my assets. Now, you'll notice that I typed orange, but nothing actually happened, and there's a really, really good reason for that. This orange has no capital O. The actual file does.
So, be careful on your cases, code is case sensitive. There we go. Just that simple change from lower case to upper case O makes a huge difference. There we go. All right, so back to our content view. We've made the whole app. We've made this fantastic thing with some content that's all about us, but it does lead itself to a question which is, "What if I want to add a fifth page?" That's where we'll head next
Swift Playgrounds and this particular about me project or template has actually done something to help us make this happen. They've created another file here to get us going called your tab. Now this one, if I click on it, doesn't really have a lot going on inside. It does... This is just a basic default page. A little bit of text that says hello world. I want to change the name of this, because I want it to conform to the others with ending in the word view, so I'm going to tap and hold on your tab, and change it to rename.
I guess I need to think a little bit about what is this page going to be about. For me, I'm going to keep it really simple. I'm going to make it about my garden, because it was a nice easy thing to take some photos of, so I'm going to call this one garden view. There it is there. Now, naming that means I need to make some changes to this page. Otherwise, it doesn't know what the page is called. Even though the file has a name, the actual code within the page doesn't really... It doesn't know what it's called, so it can't be called upon.
Now, it was called your tab. I'm going to jump up in here. I'm going to change what was called your tab to garden view. Now, doing that there means it does throw us an error because we have two more to do. I see your tab here and your tab underneath. So, we need to change them. Your tab to garden view. Brilliant. All right, now, that's only just made the page a little happier. Now, the errors are all gone. There's still no link. If I jump back to my content view, there is still no tab that's going to take us to this page. At the moment, my garden view page is just sitting there doing nothing all by itself.
What I'd really like is a new tab, so I'm going to grab one of these tabs, and I'm going to change it. Let's grab this bottom one, fun fact view. I'm going to highlight the whole piece of code that creates that tab right down to its closing curly bracket, starting with fun fact view, including these pieces of code down to that closing curly bracket. I'm going to command C, copy it, put my cursor underneath, enter down a little bit, command V, and paste. Now, all I've done is I've duplicated this. I've put two of the same thing in.
Hey, check it out. It has put in a fifth tab for me. Of course, it is the same thing because we've just copied the same code. So, we don't want this called fun facts view. We want this to be directing to garden view, so we're getting rid of fun facts, and we'll swap that over to garden. That's telling it where to go. That's great. But the actual pieces here for the button, they still aren't right. The label says fun facts. We're going to change that to My Garden. Then finally, we've got this thing here called a system image. Now, system image is an icon. These are all called SF symbols.
I need to go and grab a different symbol for this, because keeping the thumbs up doesn't really work for me. Now, I can find these symbols up in this plus button at the top. I'm going to click on that plus button into the third tab, the star inside the circle. I'm going to scroll through and find a particular symbol that I like. Now, I know that I would like a leaf, so I'm just going to do a quick search, and find my leaf. I'm going to use this one here. Now, one thing I'm not going to do is I'm not going to click it, because if I click it, it's going to put in more code to make it work. I've already got the code to make it work.
All I need is its name, leaf.fill. That's all I need to know. I'm going to jump back down here. Instead of hand.thumbsup, I'm going to say leaf.fill. Get rid of that P. Just like that, I now have a new symbol. I have the words my garden underneath, and it should be pointing to garden view. Let's check it out. If I click on it, bingo, it worked. There it is. All right, let's get started, and make a little bit of content for this page. The first thing I'm going to need is a heading. Now, to keep it consistent, it probably would make sense to go and grab a heading like we found in any of the other pages.
I've just landed on favorites view, and I can see that in my favorites view, there is some text. That was my text for my heading, so I'm just going to grab those four lines of code, command C, copy over into my garden view. Here's this text called Hello World. I don't really want that anymore. I'm going to get rid of that one, and paste in that heading. Bingo, there it is. Now, you noticed earlier that we were using a... If I jump back into my, not fun facts, favorites view, we were using a V stack. Now, there's no reason why we can't use that again.
Let's pop one in. In that garden view, I'm just going to move this text down just a little bit. I'm going to type in V stack. I'm going to open some curly brackets. It gives me the closing curly bracket, and I'm going to enter down a little bit as well. Now, I want everything to sit inside this V stack. That means I'm going to grab these two dots with my finger, and drag down, and it will grab all of those parts that make my V stack. A bit of empty space there, so I'll just clean that up. It doesn't look any different, but it actually is. It's now sitting inside that V stack. I'll just push all that down.
I don't need it to be called favourites. This page is called My Garden. Being that it is a garden, I'm going to use that foreground modifier we used before to make it look green. Bingo. All right, I'd like a picture in of my garden. I'm going to go and add an asset. I'm going to jump up into my plus button, into my photos, and I'm going to scroll through my album to find a pink flower. I'll call this one pink flower. Back into my garden view, and let's pop this in exactly as we've seen before. Image, open a bracket, open some speech marks, pink flower. Fantastic. We've got the picture in, but we can see we've got a bit of a problem.
It's blown the picture out in terms of proportions, so let's enter down, and we're going to need to add a couple of lines of code. They do actually match the lines of code used in images like the placeholder one on the first page. But while we're here, let's learn them. The first one is .resizable. Now, this resizable modifier allows the image to be resized. It hasn't made it correct for us. It's still... Its proportions are out, but it allows the picture to be able to change its shape. The last one is scaled to fit. By choosing scaled to fit, it will now bring it down to its correct proportions.
Just because I can, I'm going to add this corner radius of 20 just to give it a little bit of a gap in the corners. The one thing I probably would like is it's off the edges as well, so I might even add .padding, and just get it in off the edges, and that looks a little bit nicer. I can, if I want, to put a value in padding. I could even put five in there, and that makes it nice and thin, or I could make it something a lot thicker, say something like 40, and we get a bigger gap. But for now, I'll keep it to 10.
Now that I've added my image, I'd like to add a couple more. I'd like to put two more images underneath, and I'd like to put them side by side. To do that, I'm going to reuse that H stack. Open a bracket, got the closing curly brackets, and enter down a little bit. This H stack is going to allow me to put something side by side. And this H stack is sitting inside the V stack. So, it means I'm going to see my heading, my picture, and then two images side by side underneath. Let's go grab a couple of assets to do this with, so back into photos, into my albums, and I'm going to grab this horseback rider.
We'll call this one horse. I'll grab one more, and we'll call this one yellow flower. It is always a really good idea to... Oh my goodness, if I can get this right. It is a good idea to name your files accordingly, so not using names like pic one and pic two. Actually use names like what they actually describe them to be. All right. In my H stack, so we've used this before. I'm going to grab this code here, because I've already got it. I'm going to copy it, and I'm going to paste it in my H stack. Then I'm going to enter down. I'm going to paste it again. Remembering it's in an H stack, so they sit side by side.
Now, I did that to just speed up the whole process, because now what I can do is change out the file names. I'm going to use my pink flower, or I can easily change that to yellow flower. There it goes. Finally, this pink flower file can be changed to horse. Just like that, I get my picture sitting underneath. I might not be so happy with the padding that's going on here because they're a little bit smaller, so I might make the padding a little less, maybe five. There we have it. I now have got an extra page, and I've got some images on it.
The last thing, I think, might be nice is a little bit of text. I'm going to sit this outside of my H stack underneath it, so it's still inside my vertical stack. I'll have my heading, my image, my horizontal stack, and then finally a little bit of text. As we've done before, we start with text, open a bracket, open some speech marks, and we can start writing. Here are a few photos of my garden, full stop. There we have it. So, just like that, we've been able to add a fifth page, and put some content on it. The way we did it was we used the code that we've seen already in these pages here, the content view, the favorites view, and so on. We either have rewritten it or lifted it out.
The last thing that there is to do is to have a look at our finished app, and see how it looks running as a proper app on our iPad. I'm going to tap on this play button up the top, and let it load, and let's check it out. Here it is. We've got it looking in all its glory. I have my five tabs running across the bottom, so excited that I got my fifth one in there. I have my story tab. I have my favourites view. I can open up and reveal my favourite Crows team, who aren't doing so well. I've got my fun facts view, which shows my random Matt facts. Finally, I've got some images of my garden displayed as a vertical stack, and then a horizontal stack.
Now that that's done, I can close this up, press stop, and it returns it back here. That's it. So, we've been able to make our app, and it is a magnificent way for students to be able to tell their story, and show their learning, show their content, tell a little bit about them in a really interesting, creative, and I'm going to say very new way.
Thank you for joining me for this workshop, and I really hope you got something new out of it. Swift Playgrounds 4 is particularly exciting. For those learners who really want to take this further, I might engage you in the Apple Teacher website, appleteacher.apple.com. Whether you are a student or an educator, it might be a worthwhile place to have a look and find some extra resources that can help guide you on your way further through this coding journey. But once again, thank you for joining me for this workshop. I hope you'll learn something new. It's been a pleasure to show you. See you later.
[End of transcript]