This is the transcript for 'Go further with app development in Swift Playgrounds' video.
Hello and welcome. My name is Matt Richards. I'm an Apple Professional Learning Specialist based here in Adelaide, South Australia. Thank you for joining me for this workshop where we are going to further explore and unpack the App Swift Playgrounds 4. Now, if you've joined me for a previous workshop, you'll know that we've been using Swift Playgrounds to create our own iOS apps using one of the templates that's built inside. In this particular workshop, we're going to take it one big step further. We're going to use one of the blank templates and I'll guide you through some of the Swift code you'll need to create your own iOS functioning app. We're going to incorporate a whole range of different pieces of Swift Code. We'll incorporate some of your own photos and we'll even have some navigation built in there as well. Let's get started. Open up our iPad into Swift Playgrounds 4.
Okay, so on my iPad I'm going to open up the Swift Playgrounds app, the white one with the orange bird. Here we are again in Swift Playgrounds and familiar if you've used it before, as you might have done in my previous workshop. This top section are all tiles of pages that I've been working on and down below is access to all of the playgrounds that exist. Now because we're going to be making a app from scratch, we are going to need to use this blank playground here, this blank app, which we'll click on and open it up. Okay, so here it is, my app, mine being copy two because I've been playing around before. So what am I going to make my app about? Well, I'm going to focus on the fact that I'm sitting up here in the Adelaide Hills, even though it is quite cold for the middle of Winter. It is a beautiful part of the world.
So I've been out and I've walked the streets and taken some photos with my phone and I'm going to make my app a bit of a tourism app, a welcome to Lobethal or the little township of Lobethal. So I'm going to rename my app and I'm going to call this Welcome to Lobethal. All right. Let's open this up and have a little bit of a look. Just a reminder, I have three panels in front of me. I am using a connected Bluetooth mouse and I have a connected external keyboard as well. And so in here, I can see on my 12 inch iPad, because I can see all three panels, I can see my files, my Swift code in the middle, and my preview on the right hand side.
One of the first things I'm going to do, like I did in my previous workshop is click on my app settings. And I'm going to give my app a name, same as what I call the file. This is the name of the app, I'll call it the same. Welcome to Lobethal. And I'll click done. Now I'm going to use green. I'm going to keep that green because it's a nice green part of the world, so I might keep that there. And I'm going to use a leaf as my placeholder because it's quite a leafy part. So done.
So in my content view file that's sitting here, this is my homepage and at the moment, it has got some default content, which is an SF symbol, which is my globe and a bit of text there. Now you might recall from a previous workshop we were working in pieces of code called a V stack. And here is my vertical stack. I start with my globe. There it is there. So it tells it to be the accent colour of green. It is large. And in here, is my code for the text. I don't really want this symbol here, so I'm going to delete this and leave just the text. And I'm going to replace that text with the heading of my app, which was Welcome to Lobethal. Now, I do want to change that text, so I do need it to look a little bit more like a heading. So underneath, I'm going to change its font, so dot font and it's going to be in some brackets a large title. So dot large and using camel case a lower L and capital T large title. There we go.
I also want this to look heavy, so I want it to be bold. So I'm going to include a font weight capital W. There it is there. Font weight, and it's going to be dot bold. And there we go. There is my heading. I'm going to leave it black. I don't mind that at all. I'm going to just enter down and push that lower V stack bracket down a little bit. I want to enter a symbol in here. Now, I have said in the past, in my previous workshop that we would take note of the symbol's name and we would insert in and that's because the code was already there, but because the code isn't there, this time we can actually click on it.
Given that Lobethal is a bit of a drive, I'm going to search up car and I want to find this car dot fill and I'm going to click it this time to place it in and it automatically puts everything I need. There is my little car. I do want it to be green, so I am going to create a modifier, which is my foreground colour. I'll use the accent colour, which should make it nice and green. Fantastic. So again, bearing in mind that we're in a vertical stack, I want to put an image underneath. So as I have done in the past, I need to add an asset to my app that I'm making. So I'm going to jump up into this plus button at the top into photo and into my album. I'm going to find a particular photo that I think would be nice to have on the front of this app. I do like this Lobethal centennial hall. So I might put that in here and I might call this town hall.
So that is now an asset that I'd like to put into my app. So back into my content view. Underneath I'm going to need to insert an image. Image, open some brackets, open some speech marks, and we're going to call it town hall. Now, similar to the last workshop, we have a problem where it has put the image in, but it is way too big. So we are going to need to make it resizable. So dot resizable. There is my option there, which will bring it down, but it doesn't constrain those proportions. So now we need to correct it by scaling it correctly and we'll search up scale to fit. And there we have it. Now I don't like that it's edge to edge. I would like to put in some padding as well and I might make that padding value, something like 10. Perfect. I've got my heading, I've got my little SF symbol and I've got a picture underneath.
Now what I'd really like to do next is I'd like to put in three more pictures. And I'm going to start by just adding those images in. I'm going to do this using a different stack. Let's grab some pictures. We'll call this one street one, we'll call this one National trust and we'll grab a third one, which we will call street two. Fantastic. Now I want to put these three images in underneath. So let's start by adding to our vertical stack. Now, very simply because I've got the code already for adding my photos, I can simply highlight that code, come underneath, copy and paste, and you'll see I've got two town halls there. That's not going to work for me. I do need to correct that. I'll put in street one and we'll get that picture there. Let's come down underneath and paste again and we'll put in National trust. Let's get that with a capital N. And finally, in my V stack, I'm going to put in street two.
Okay. So I have my three photos sitting underneath. Now that I look at this, I'm not particularly happy with the layout of them. I'm not happy in the fact that they are really crowding my app. What I think might look nicer is if they were stacked side by side. And if you recall from the previous workshop, we used a different kind of stack and that was called an H stack. Now knowing that I've got my town hall one here, I'm going to leave that one alone. I want to put my H stack in between, so it captures street one, National trust and street two.
So I might pop my cursor in between here and I'll put in my H stack and I'm going to open some curly brackets and close some curly brackets and I'll enter down, which gives me this nice piece of code here. I'm going to grab this bottom of the bracket and drag it down and it will start putting everything within it. As soon as I do that, it did a little bit of thinking and there we go. It stacked those images across. I think this padding of 10 is a little bit too big now, so we might bring that down to five and let's have a little bit of a look and see how that fits. And that feels a whole lot better. Fantastic.
So now that my app is starting to take shape, what I'd like to do is put a button in there that directs users or visitors to a particular website. Let's say we want to find out some more about something. So we're going to need a little bit of interesting code here, starting with the word link. And I'm going to open up a bracket. In here, I'm going to need a destination and a colon telling Swift that it is a URL. And that URL, which when I open up another bracket I can say is a string.
I'm going to open up with another colon and some speech marks to direct users to the particular website. So as complicated as that might look, that's a little bit of code that's going to help users get there. Now, where I am at the moment being Lobethal, it is famous for a community event every year, which is the Lights of Lobethal. So I've just jumped over into Safari and I can have a quick look over here. Here's my Lights of Lobethal website, which I'm going to grab by taking a copy of that and I'm going to just get rid of that, slide over and paste that in between there. And there's my link.
Now, whilst that has done that, it hasn't really finished it, we've created a bit of a problem here. It's not actually allowing us to preview because our code is incomplete. In between these two semi-colon ... Sorry, these two brackets. I'm going to need to put an exclamation mark and open up some curly brackets. This is where we're going to tell it what to actually say for our button, which we'll start with text, open some brackets, open some speech marks, and we'll put in some text Lights of Lobethal info. Okay, fantastic. So we have a button that sits underneath and that's going to direct people to our website. Now we can test that by coming up to our play button. Let's have a little bit of a look. It will load up our app and there it is. There's my images all looking fantastic. There's my link at the bottom and if I click it, sure enough, it directs me straight to that website. So it works. Fantastic. That is exactly what I want to see. All right. Let's quit this one by pressing stop and back into playgrounds.
Okay. So now that my app's starting to come together, I want to take it to another level and that is I want to add some navigation to it, add additional pages so that users can actually feel like they're navigating through different parts of an app. And of course, they serve different functions as well. So what I'm thinking about for my app is some level of map or navigation that allows people to get to the little town that's up here in the hills. So I need to start by creating some more content and that is I need a second page. So let's get into that. Up the top here, I'm going tap on my plus button and I'm going to need to add a new file Swift file. I'm going to call this one map view, remembering that I'm ending everyone of my pages with the word view.
Now that I've got my map view page, you'll notice that there is really nothing to it. There is only just this piece of code import Swift UI. So I really do need to tell Swift Playgrounds that this page has to have its own name, which is map view. I'm going to lift some code from my content view page here. I just scroll back to the top. I'm going to see that after import Swift UI, I can see three lines of code. I've got the structure, a variable and the V stack itself where I can put all the content inside. So I'm going to highlight those three lines of content code back into my map view and I'm going to paste them. Now, they all have opening curly brackets and that's why there is an issue here. None of them are closed off. So I'm just going to enter down a little bit and I'm going to close with three curly brackets, one, two, and three to match. So each of them as a hover over, you'll see that they pair up and there. And then finally the V stack is there as well. Awesome.
So basically, what I've done is created a page. Now the only thing I still haven't done here is given it its name, it still thinks it's called content view. That's because we lifted that code off. So we'll change that to map view. Okay, so now we have the proper code ready for us to create our work and build out our second page. There's still no link between the first one and the second one. There's no button sitting here yet. All right. So let's leave this page for now. We've made it, we'll come back to the content in a moment. For now, let's focus back on our content view page and get the navigation working. So we do already have a link down the bottom, which takes us to a website, an external website. But to make it work within the app itself, to have some internal navigation, we're going to need to add something called a navigation view. That's going to happen after this line of code here, the var body line of code.
So at the end of this, I'm going to enter down just a little bit and I'm going to add in navigation view and I'm going to open up some brackets and enter down to push the closing bracket there. Now, my navigation view needs to encompass everything, see how already it's changing the way that page is actually looking. So I'm going to grab this bottom closed curly bracket and I'm going to drag it down to beneath all of the content. So we're saying that all of this content now sits within a navigation view and bring it down to the bottom and like that. All right. So my page corrects itself, but it now has some navigation to it as well. I'll just bring that up. It doesn't look like there's any navigation yet, but we know that it will be able to cope with it. I'll just get rid of some of this extra space just to keep it nice and neat and tidy. Okay.
So now we want to get some links happening between the two. I'm going to just jump up into here and just close this one up here as well. So here is my link that takes us to that external page. I want to jump in underneath that one. So I'll just push that down a little bit. And we're going to add a navigation link. There it is there. There's my navigation link. I'm going to open up a bracket and type in destination with a colon. And it's going to go to map view. You can start to see this is where the link takes place. Pair of open and closed brackets. Brilliant. Now, it doesn't really know what to say, so we're going to need to open some curly brackets, enter down a little bit. And in here, we're going to write the word text, open bracket, open speech marks, and we'll call it maps. Okay, just close that up.
So now we have two buttons, one that says maps and one that says the Lights of Lobethal. And if I click on maps, it does awesome. It takes us to our second page. And here's the great part, it already knows that this second page is part of a navigation view, so it doesn't need any code on the second page to create this back button. It already knows. Pretty smart. Now, I don't like how they're so close together, I really want to separate them apart. So after my Lights of Lobethal text in here, I am going to add in a little bit of padding, dot padding, open some brackets, and I'll pop that in there. So that's just given a little bit of space. And the second thing is with my maps, I would like the button style to be a little bit more interesting. So I'm going to use one called boarded prominent. Button style dot boarded prominent. I'll pop that one in. And now we'll make it look a lot more like a button.
I might also like to change the way that this button sort of the size of the text. So a little bit like we've done before, we'll add in some font, some font weight I should say. We'll go dot bold and perfect. I'll leave it like that so it starts to look a little bit nicer. So now I have my button, which takes me to my maps. Brilliant. Okay. Well, now that we've got that navigation happening, what about the map view content? And that's where we need to really start building out what we want to see here on this second page. Now, I do have my V stack and I do really need some kind of heading. So I might just jump in here above the V stack and I'm going to put some text in. Some text that's going to save because this is all about getting here. So in here, I'm going to write Getting to Lobethal. Let's just jump back over to this page. There is my heading. I'm going to make it look a little bit more like a heading.
So again, dot font and we'll go dot large title. And once again, we'll do the dot font weight and it's going to be bold, dot bold, spelled correctly. Bingo. Let's just check that out. There it is, getting to Lobethal and it's a nice big bold heading. All right. Now I do want to put in a little bit more obviously some content. And one of the things that I do want to put in is a picture of a map, which I have already got. So I'm going to jump up into my plus button. I'm going to add a photo into my albums. And I have a map right here ready to go. I'm going to call this one Lobethal map. Bingo. Right. Back into my map view and let's add that in. Image, open brackets, open speech marks, Lobethal map, and let's check it out. Aha, and something that we've seen before, we do need to change the way that this behaves, so we are going to need to make it resizable, dot resizable and we're going to need to make it dot scaled to fit.
Jumping back. Fantastic. There it is. Now, I would like to put a button in there. Now what I'm thinking here with this button, what would be really interesting is if I have a button that directs the users to say, the maps app and it provides the option for directions on how to get there, I think that'd be kind of cool. So what I'm thinking is I'm going to need an external link very, very similar to this, but I'm going to lift a link out of the maps app itself. Okay, so let's add this link. Let's put in similar to as we've done before. In fact, what we could do, we could jump back to our content view and we could grab effectively this exact same piece of code. I'm going to command C, copy that back into map view and command C, paste it. Does need an extra closing curly bracket. All right. Now if I do jump there, I have this link here and obviously, that's not what I want.
What I do want is I want it to give me a link on how to get there. So I'm going to change this text on how to get there. All right. And of course my link itself is not going to work, being that it's that link there to the Lights of Lobethal. So I'm going to need to jump over to my maps and let's just bring that over in to alongside. And I'm going to search in Lobethal. I'm going to click on share and copy. I can get rid of that map now and I can highlight this piece of text here and command V to paste it. All right. Looks pretty messy and ugly, but we do know that that is the URL used to open up maps and for us to actually find the map we need. So let's check it out, click on maps, how to get there. If I click it, bingo, it opens up the map. Love it. That's awesome. Back into playgrounds. One thing I would like to do, however, again, I want to make this button a bit more of a button style.
Before we had the boarded prominent, I'm going to use that one again. I think it's a good look. But one thing that I do want to do to make this a little bit more interesting and only because for the purposes of demonstrating this, I might like this button to sit on top of the map. Now, it might seem counterintuitive, I've got a bit of a map here. Hey, I would like to see the map of Lobethal, but this is more about how to get there. So I want this button to sit on top. Now, we've talked before about V stacks and I've mentioned before if I jump into my content view, we've talked about an H stack. The one thing I haven't talked about yet is a Z stack. So a Z stack is the idea that we can have a button sitting on top of other things, things are stacked in depth, not up and down or left to right, but they're stacked one on top of the other.
So what I'd like to do is under my V stack, I'm going to create a Z stack, open curly bracket, close curly bracket, enter down the second closing curly bracket. What I'm going to do here is drag this closing curly bracket down beneath that, all that code. And just like that, one sits on top of the other. One thing to note is it works from the bottom up. So I need to have in my Z stack, just clear that up. In my Z stack, I need to have the image first. Whatever you want at the bottom of the stack appears first in the Z stack. Then whatever you want to appear on top and so forth, you keep adding below that in that list of Z stack. So just like that, I now have the button sitting on top. Not bad.
So let's check out what we've got. We have got an app that has got a heading. It's got an SF symbol sitting underneath. We've got in a V stack, we've got a bunch of images. In that, we have an H stack, which stacks them side by side. Underneath that, we have a link that takes us to an external website. And underneath that, we have a button that takes us to a second page. And all of this sits in what we call a navigation view. And by doing that and clicking on our maps gives us a second page. It gives us some navigation up the top. We don't have to code that, it's done for us. We've put in our map view page, we've got a heading, let's jump back. We've created a Z stack where we have a map behind and we have a button on top. That button takes us to an external link on how to get there using Apple Maps.
Maybe one last little thing I'd like to do with my image, I might change the image being that it's a little bit bright, I might just add some opacity and I'm going to make it 0.50. Let's just have a bit of a look. Sorry, I'll re-change that 0.5. By doing that, it's just washed out that background just a little bit. If you think that's something that you'd like to do, adding that opacity modifier as well. So there we have it. We have a complete app ready to use. Now of course, if you wanted to add more pages, you would just simply come up into your add button here, add more Swift files, and you can lift the code just like we did before, changing it's structure name, it's struct name from map view, or whatever you choose to want to use or call it and continue to add pages, continue to add buttons. The world is your oyster when it comes to creating your own app.
So there we have it. We have all the elements we need to create our own app. We've got some headings, some titles, some icons, some images stacked vertically and horizontally. We've included links to external sites, an internal link. I love this idea of a navigation view, which allows us to navigate around our own app. And then on top of that, we've got the link that takes us to an external app being maps, and we can ... users can use that to navigate to wherever they want to go. So again, I think the possibilities here are limitless.
So there we have it. We now have a fully functioning iOS app built within Swift Playgrounds 4 using nothing more than a blank template and a whole series of pieces of Swift code. I hope that you are able to achieve the same goal at home. And from here on in, you can take this as learners and use this and apply in your own environments wherever you might be. For those that are further interested, don't forget the Apple teacher website, appleteacher.apple.com. We'll engage all learner students and even educators. There are plenty of resources in there that are going to help you take your coding journey a whole lot further. But once again, thank you for joining me for this workshop. Good luck for next time. See you later.
[End of transcript]