How to Make an App for Beginners 2018 | Chris Ching | Skillshare

How to Make an App for Beginners 2018

Chris Ching, Co-Founder of CodeWithChris.com

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (3h 15m)
    • 1. How to Make an App for Beginners Lesson 1

      9:22
    • 2. How to Make an App for Beginners Lesson 2

      27:43
    • 3. How to Make an App for Beginners Lesson 3

      24:19
    • 4. How to Make an App for Beginners Lesson 4

      23:15
    • 5. How to Make an App for Beginners Lesson 5

      16:09
    • 6. How to Make an App for Beginners Lesson 6

      19:48
    • 7. How to Make an App for Beginners Lesson 7

      13:36
    • 8. How to Make an App for Beginners Lesson 8

      24:53
    • 9. How to Make an App for Beginners Lesson 9

      13:14
    • 10. How to Make an App for Beginners Lesson 10

      17:47
    • 11. How to Make an App for Beginners Lesson 11

      4:47

About This Class

Welcome!

If you’re new to programming, you’ll soon discover that with a little practice, it’s not as hard as people make it out to be! You can definitely teach yourself how to code iPhone apps and before you know it, you’ll be submitting your own app into the App Store.

You’ll be introduced to programming terminology, Swift code and iOS development basics one building block at a time. By the end of the following lessons, I guarantee that you’ll be surprised at how much you’ve been able to accomplish from scratch!

This course also comes with downloadable PDFs such as worksheets and cheatsheets. 

The videos are also available to download for offline viewing!

  • You'll be introduced to Xcode 9 and all of the various other tools/resources we'll be using.
  • You'll learn all of the components that go into any iPhone app
  • You'll get your feet wet with writing Swift code
  • You'll learn how to use Auto Layout to build your user interface
  • You'll learn how to handle button taps in your app
  • You'll learn how to display images!
  • You'll add logic and write code to determine a winner
  • You'll learn how to use graphics and style the app
  • By the end, you'll have built a fully functional app
  • You're only 11 lessons away so stay motivated!

The lessons are short and focus on being practical. If you're practicing what you learn on your own computer, you'll learn a lot faster so I highly recommend that you follow along!

Transcripts

1. How to Make an App for Beginners Lesson 1: Hi. Welcome to how to make it out for beginners. If you've ever thought about building your own app, this is the video for you. By the end of this video, you will have built your very first watch all 10 videos, and you will have built these ups building. These APS will teach you how to build your APS user interface, how to add graphics, text and even buttons to Europe. How to respond to user interaction. How to make sure your layout works on multiple screen sizes and orientations. Finally, I'll show you how to install that up on your device so that you can show all of your friends and family that that you've built. I'm Christian, the founder of Code with Chris, where beginners go to learn how to make a nap with no programming experience building an app, a simple There are only two things you need to know. The first thing is X Code. This is the application you build apse with its free use it to constructor APS user interface as well. It's the right code to respond to user in traction and to express logic. The code that we write follows a certain structure or syntax. And this brings me to the second thing that you have to learn the swift programming language to give you an example of how these two things work together, imagining had to write in English essay. In this case, Swift would be the English language and X Could would be your pen and paper. Now here's the nice thing about Learning X Code and Swift. These are the same tools you're going to use for everything in the apple ecosystem. You're going to be able to put iPad and iPhone, APS, IOS games, Apple watch APS, Apple TV ups and APS for Mac. Now that we know what we need to learn, let's dive right in first. Let's download X code. If you're using Windows, check the description below for my guide on how to use X Hood on Windows. If you're on a Mac, just go to the Mac App store and downloaded for free. I'm going to warn you, though, you will probably need the latest Mac OS and a whole lot of free disk space. Once you've got it installed, launch the APP and click on Start a new X Code project across the top of the next screen. You'll see templates for all of the different platforms we mentioned earlier. Make sure you're on the Iowa's tab and choose single view app. Click Next here. You're going to be able to specify some properties for your project for the product name. You could just type a name for your app. I'll just call this at one. You can leave team as is for organization name. You can put your own name in there and for the organisation, identify air. Just put com dot either your name or your company name and together with the product name that's going to form in. Identify her for your APP. Important thing is for language. Make sure you have swift selected and you can unsolicited all of these options down here. Click next. Choose a place to save your project. You can leave source control unchecked and then click Create. Say hello to your new project. Now this might look intimidating, but it's really not. Let me walk you through it. Oops. At the end of this video, I'll show you where you can download my Exco cheat sheet on the left hand side. You have your Navigator area. What's shown here is the File Navigator, where you can see all the files in your project. Each tab at the top is a different Navigator type, but leave it at the File Navigator for now because you'll be using this most often. If you select a file from your file navigator, it will change what's shown here in the editor area. The interface changes depending on what sort of follow you choose. For example, choosing this project file will let you configure the project properties while selecting a code file. We'll let you write swift code in the editor area. Furthermore, choosing the storyboard file is going to let you customize the user interface for your app . On the right hand side, you're going to find the utility area. This Panelist split into two pains. The inspector pain is the top one, and I'll show you information and configurable properties for the file or user interface element. You click on the bottom pane of the utility area is called the Library Pain, and this contains lists of reusable code snippets and user interface elements that we can add to our project. Finally, along the top, you have the X Code toolbar. This gives you the controls to run your project. It shows you the status of your project and on the right hand side, buttons the hide or show the various parts of the X code in freeze. We just talked about Let's try to run our Project X Code comes with an Iowa simulator, which lets you run and test her out without needing a physical IOS device. Let's choose a simulator from the toolbar and then click the big play button here. It might take a few minutes for the first time it runs, but this is going to launch the simulator and you'll see your app running. If the simulator is too big on your screen, you can go up here to the window menu and go under scale and change the scaling of the device to fit your screen. You can also hit on your keyboard command one command to and command three. It's just the white screen now, sadly, but that's because we haven't added anything to it now. How did that Exco project turn into this app that you're seeing in the simulator? Let's break it down this top layer is called the View. It's the user interface that the user seats. You can configure this from the main dot storyboard file in your exclude project. The second layer is the view controller. This code files responsibility is to manage the view. For instance, when the user taps on the view, it will let the view controller no. And then you can write the code that you want to run. When this happens. This view controller is represented by the view control dot swift file in your Ex Code project. If you click it, the editor area turns into the code editor where you can write swift code to manage the view. So back in our ex code project hit this stop. I gone here to stop running your project. If you want to display something on the screen, we have to add some elements to the view in our storyboard. So go ahead and click on main dot story Ward here, and the editor area will turn into interface builder and in the library pain. That's this guy down here. Make sure you're looking at the object library tab, then in the filter box type and label that's going to show us the label element, then simply click and drag that element and drop it into our view. We're not finished yet because we haven't positioned the label on our screen. Exco uses a system called Auto layout to size and position the elements on the screen. This makes it easier for you to build layouts that work on multiple screen sizes and orientations. Basically, you specify rules that dictate how your elements should be positioned and how they should be sized. Rules such as this element should be the same height as another element, or this element should be 20 points away from the right side. These rules are called Auto Leo Constraints. Now you're going to learn a lot more about auto lay out in the next lesson. But for now, let's jump back into X code and position are label Now. After you added your label, you might have noticed that it also showed up here. This area is called the document outline, and it lists all the elements you have. In your view, if you don't have this window, click this little icon here to show and hide it. Let's center our label in the screen by adding some constraints to it. Click on the label from your document outlined to select it. And then down in the lower corner, we have these little icons. If you hover over them, you'll see their names. Click on the Alliance Icon and out pops this menu. Choose the horizontally in container and vertically in container, and then click this button that say's add to constraints. And then you'll see the label reposition itself based on the nearly added constraints. Now let's change the text on the label. With your label selected, you should see it's configurable properties in the inspector pain on the right hand side. Make sure you're looking at the correct tab and then scroll to find the text. Property should be the 1st 1 and then just erase that label in there and type in. Hello world. Now let's run the project in our simulator again. Click this little run icon here and then you should see this. Congratulations. You've built your very first out. Today you've got a tour of the Exco development environment. You learn about the view, which is what the user sees, and the view controller whose job it is to manage that view, you learn that you can customize that view in the main dot storyboard file in your ex code project. You also learned that the view controller is represented by the view control of that swift file in your ex code project. All of this is in my ex could cheat sheet, and it's free for you to download. But first, if you like this video, please subscribe to my channel by clicking the subscribe button below. And if you don't want to miss a single video, click that Bell icon as well. Now I want to turn over to you with the skills that you're going to learn. Are you gonna build a nap? Are you gonna build a game? Let me know by leaving a quick comment below. And lastly, I promise you guys, my ex code cheat, cheat just follow the girl on screen, or that you are out in the description below to download it. Thanks for watching. I'll see you guys in the next lesson. The video broke up, so I have to press record again. 2. How to Make an App for Beginners Lesson 2: Hi. Welcome the lesson to in this video you're gonna learn how to build your APS user interface . And that's just the technical term for the screen that the user sees. You'll learn about auto layout that's used to position in size elements. By the end of this video, you'll have built this user interface. As you can see, you're going to learn how to add images, text and how to position them. More importantly, you're going to be doing it with auto Leo constraints, and you're gonna learn how to do it in a way that's gonna make it work for all screen sizes . So we're just going to start a brand New Exco project just like we did in the previous lesson. Make sure you're looking under this I West Tap and that you've got single view app selected . Let's click next and then in the product name I'm going to say up to, and the rest of the properties should already be filled out from the project you created from the last lesson. We don't need to change any of that Click next, and then we are just going to save it on the desktop. Jumped right into the main dot storyboard here because we're going to start customizing our view in the lower right hand corner. Do you remember what this is called? This is the library pain, and we're gonna be looking at this tab, the object library. This is where we're going to be able to select some elements to add into our view. So in this filter text box, I'm going to type in image you because this is the element we're going to use to display images in our screen. So let's click and drag and then drop that into our view. Unfortunately, right now, we don't have any images to show in that image view. We have actually add those images into our exclude project. So if you look in the file navigator here on the left hand side, right underneath the main, that storyboard, you'll see this assets thought XY assets. If you click that, it's going to bring you to a section where we store the images that we use for our project . As expected, there's nothing right here. And in fact, there's even an entry for the APP icon. But there are no image assets here. So what we're gonna want to do is add some images in here for us to use. And if you check the description below this video, I've got a link to the image that we're going to use in this project. It's called Lesson two assets Start zip. So just click that link right now, Download that zip file and put it on your desktop. And then I want you to go ahead and unzip that file. I'm going to double click the ZIP file and it's going to unpack it and out pops an image. This is the image we're going to use. So all you have to do is click this image and drag it into your Exco project, and you should have highlighted the assets dot XY assets so you can drag it directly into this asset library. You can either put it in this panel or this panel. It really doesn't matter. But when you let go of your mouse button, you're gonna have this image in your exclude project. Now, what we're gonna want to do is actually rename this asset, and you need click it and wait about a second. It's going to open up a text box for us to rename it Put landscape in there. Alternatively, you can actually highlight it and just hit Enter on your keyboard and that allows you to rename it as well. So right now you should be looking at your assets without XY assets. You should have this landscape entry and you should see this image here. Let's go back to maine dot storyboard. And now, in this image view, just highlight it in the document outline. And right here in the inspector pain. We're looking at the attributes, Inspector. At the very top there is this image property pulled the drop down down, and you're going to see that image asset which we added. So just click that and then immediately you're going to see your image. You display that image. Now, we're gonna want this guy to be full screen, so we're going to need to set some constraints for this. You image you but first I want to show you something called the safe area. In this document outline. If you go ahead and click that you're going to see a portion of your view highlighted in blue, and this is what is known as the safe area. You can see this little bar at the top in white. That's not part of the safe area. And the safe area is just a space where you can be guaranteed that the stuff you add won't be obstructed. So as you can tell up here, this is where the status bar for the phone is, right that you see your time. You see the carrier, you see, you know, a bunch of icons and stuff like that. So it's just warning you, you know of you highlight the safe area that the area highlighted in blue is an area where you're elements won't get obstructed. Now, that doesn't mean that you can't put anything up here. I mean, we can go ahead and stretch that image all the way to the very top. We just have to understand that there may be some text overlaying that like the carrier, the time, the symbols and such. So this is going to come into play because when we Adauto layout constraints, we can specify. Do we want that constraint? Like, for instance, if we're specifying a top margin for this element, do we want that to be zero from the safe area, Or do we want it to be zero from the very edge of the screen? All right. So I'm going to show you that right now we're gonna highlight the U Y image you and then we're gonna go down here to the bottom, right, And we're gonna click this Add new constraints button and this menu pops up. It's going to allow us to add some margin constraints for Are you image? You You can see four text boxes here, one on each side, and each of these text boxes represents the margin that we want to set for that you image view right here. There are some default numbers, and these numbers are just the current values. If we wanted to have the u image, you look like this so you can see 2 35 here right now. This length right here is to 35. So we're gonna go ahead and change this to 00 and I should mention that the values you see here will be different, because when you drag that you image view into the view, you'll probably have dropped in different place than I have. So where I dropped it into the view. These are the current margins. So I've set this 2120 You can see that this constraint is active or I'm about to add it because this red line is highlighted. Now, the other three margin lines are blanked out and down here, you can see add one constraint. If I change the number, it kind of automatically activates that constraint. And you can see down here it says, add to constraints. Now, if I click this button right now, it's going to add this top constraint and this left constraint. Now I can actually click that and turn it on or off. Right now, I'm not adding any constraints, and right now I'm adding to constraints. Another thing I want to mention is this little triangle here. It thes aren't actually text boxes. They're actually drop downs. So if I click this, you're going to see the safe area and the view. This is what I was mentioning before. Do we want it to be zero margin from the safe area or from the view? So I'm actually going to change this to the view like that And be careful because it changes back to 2 35 when I still like that. So I'm gonna go ahead and hit zero again. So even for these ones, I'm going to change it from safe area to the view. To make sure is actually to the very edge of the screen. This one again change it to the video and this one down here, I'm gonna change it to the view. And then I'm gonna set all of these 20 So a fast way to jump through the different text boxes is if you just press tab that and then lastly, we're going to uncheck constraint to margins because we want it to be to the very edge and not towards some margin. And then down here, it should say add four constraints. So click that and immediately you're going to see that you are image. You stretch to all four edges now it doesn't go all the way to the top. I'm going to double check what we added there. If you look in the document outline, you'll see that now you have this entry called constraints. If we expand that, you can see the four constraints which we added and clicking each of them. You can look in the inspector pain on the right hand side, and you can look at some configurable properties for it. So let's take a look at the top one Landscape top equals. So somehow, even though I said it to the view somehow it's changed itself back to the safe area. So what we can do? Actually, before I do that, let me explain to you what this means. So this constraint is saying to make the landscape landscape is our image view at the top edge of our image. You equal to the top edge of the safe area, right? And zero. This is what we specified. But I don't want it to be zero from the safe area. I actually wanted to be zero from the view up here, So I'm gonna pull this drop down down, and I'm going to choose Super View and Super View is just a term to describe the view that contains are you image view. So let's click on super view, and then you can see that this constant has changed to 20 and you can see that there is this bar here. This constraint is indicating that my you image you is now 20 from the super view dot top. While I'm going to change that back to zero hit, enter. And now you can see that it's actually zero from the very, very top instead of the safe area. So I've just showed you that you can click on a constraint and you can edit it from this inspector panel. Now I want to show you that you can actually just remove them. So if you make a mistake, go ahead into this document outlined right here. You can hold them, command or shift, and you can click each of them like this and then just go ahead and hit delete on your keyboard. If we do that, this image view, it looks like it's positioned correctly. But in reality there are no constraints dictating how it should be positioned or sized. So that's gonna be a problem. We just deleted all of our constraints as extra practice. We're gonna just re add them. So let's click on the landscape right here. This you image view that is now named landscape, I mean and then go down here to the bottom, right and go to add new constraints were going to do this again. So first of all, it looks like this one is safe area. So I'm gonna choose view this one safe here. I'm gonna select view instead this one of a select view This one is feel OK and double check that it hasn't changed on me again. And let's click add four constraints. So there we go. We have four again, All right? The next thing is that this image actually looks kind of stretch. That looks distorted, right? If we highlight the image you here and go into the inspector panel, there is a property called content mode, and this dictates how the image should be stretched or if it should not be stretched right now, it's set to scale to fill, which means it's just going to stretch it. However, it needs to, in order, fill up the whole image view, for instance, we can set it to just center, and it's just not going to stretch it. And there's actually a lot of overlap that you can't see right now or we can set it toe aspect fit. It's just going to try and fit the entire image without stretching it. Or we can set up the aspect. Phil. It's going toe, enlarge it so that it fills the entire image view. But it's not going to distort it because it's going to maintain the same height and width ratio so they won't look squished or stretched or anything like that. So that's the one we're going to choose. So then we get something that looks like this. All right. Now we have to add our labels, but we can't just add our labels here because that text is going to be pretty hard to read . So we're going to create a little bit of a black background here so that we can put our labels on top of it. And then it will be easier to read. So down here in the object library, let's change this filter text instead of image view. Let's type in you eye view. When you do that, you're going to see this element here that say's view. So this is kind of like a generic view that we can color and we can put things in. We're going to go ahead and click that and drag that onto our screen just like that and having it highlighted in this document outline. I'm going to go over to the inspector pain. We're gonna change the background color. So go ahead, hit this drop down and choose block color, and then you're going to click this little black rectangle here that's gonna bring up this little menu with a couple of tabs. If you choose this tab here, it's gonna be all blocked. But you can slide this opacity. You could make it semi opaque like that. And I mean, I said to about 80% You can also just type it into this text box here and then we're going to go ahead and click that Red X to close it. And you can see that we have this beautiful sort of semi transparent black which we're going to put our labels on top of. But first, let's position this, um, you I view So having it highlighted in our document outlines, I'm going to go over here and click, Add new constraints. I'm going to just off the bat, uncheck constrained to margins, and I'm going to go ahead and enable the left the right and the bottom constraints And then I'm going to choose view instead of safe area like that and change that. And then I'm going to set these 20 notice that I'm not touching this top constraint and I'll show you why in a second unit 00 I'm going to do zero me. Just double check that it hasn't changed back to the safe area, all right, and we're going to click. Add three constraints this time, all right, so you you're going to see a couple of things here. First of all, it's stretch to the left and right because we added those constraints. But now there's this red line here, and it's supposed to stick to the bottom because we said it should be zero from the bottom . But there's this red line here and over on the document outline. You can see this little red arrow here. If we click that you're going to see that there are some auto layout errors right here. It say's that it's missing some constraints. It can't determine do why position or the height. So before our bottom constraint is going to take effect, we're going to need to set either a height for this view or a top constraint. So that auto layout system has all the information it needs to be able to position that you eye view. So what we're going to do is highly this view while holding down the command key Click on this route view as well. This is kind of like the the overall view that contains everything. So Okay, let me try that again. So highlight this view. Hold down command, and then click this route view. So you should have both of these highlighted and blue. Now. Now, with that, I want to go down here, add new constraints again, and I want you to choose equal heights, and that is going to basically make this block dimmed view the same height as the root view , which basically is this entire view right here. But we're going to do a little something special in orderto make it dynamic. So you're gonna see that in a second. But for now, make sure you have equal heights checked on and then click. Add one constraint. Then you're going to see basically the whole thing dimmed out. Um and then a couple more constraints added in this constraint menu, you can see that it's starting to get pretty confusing. I can't really tell unless I really, really try to read it. I can't really tell which constraints have to do with the landscape in which constraints have to do with this view, right? So one easy way to tell if I only care about the constraints for this you I view, for instance, let's highlight it in the document outline here. And then I'm going to go into this size inspector tab. And if I scroll down, it actually shows me that there are four constraints that relate to this element. And like this, I can easily tell which constraints that I want to modify. So I actually want to modify this one equal height to super view. I'm going to double click it while it's automatically going to highlight the constraint that I selected. And then it's going to show me it's configurable properties here on the inspector pain. So let me read this constraint to you. The views Height should be equal to the super views height. So this is the view and this is the super view. Remember, Super view is just a fancy word for the view that contains that element. So you can see that if I collapsed this view, everything is inside of it. Right? So this view actually contains everything inside of it. All right, So if you have this reversed, if you have super viewed out height is equal to view dot high. I want you to go down here and click on reversed first and second item. If I click that you're gonna see super view height equal view, I I don't want that. I want you to click this reverse first and second item. The first item should be view height because that's what you're trying to specify. So our rule states that the views height should be equal to the super views height and down here, there's a multiplier. I want to change this to 0.3 when I do that. That's saying that the views height should be equal to 0.3 times the super views height and this is going to set the height so that it's about 1/3 or about 30% of the entire height. And this is going to be dynamic. It doesn't matter how tall the route view is, it's always going to be 30% of that height. All right now in the bottom right hand corner. Let's change this. You, I've you filter tax. Let's type in label because we're about to add some labels and let's click endless drag this into this block area. This you live you. When you do that, you can see that my label is actually inside of this. You I view now because this you live you is actually a container view. It can contain other elements. And now that my label is inside that view, when I specify my auto label constraints, let's say I want it to be zero from the top. It's going to be zero from the top of this. You, I view. It's not gonna be zero from the top of this route view, right, because you're always specifying the positioning constraints relative to the parent that contains it. All right, so since this view contains my label, if I position my label zero from the top, it's going to be based on the top of this view, which is fine. That's exactly what I want. So let's highlight this label In the document outlining Let's go into the attributes, inspector here. First of all, let's change the color so it can actually read it. I'm gonna choose white color and let's change the label to city by the sea. And don't worry that it's kind of cut off right now. We're gonna address that and then I'm gonna click this little icon here so we can change it to a bold type of foreign. And I'm just going to up the size to something like 24. And then we're going to specify some auto Leo constraints for this guy. So with this label highlighted, I'm going to go down here to add constraints and we are going to Let's do those constraints , The top, the left and the right. So for the top, I'm going to say 20 from the left. I'm going to say 20 and from the right, I'm going to say 20 as well. And then we're gonna click, add three constraints and then you're going to see something like this. We're gonna add a little description label below that. So let's click this label and let's pop it into there as well. And now you can see in this Stockman outlined that my view contains two labels. So highlight this second label. Let's configure some properties. Let's change it toe White. Let's change the font. We'll leave it at 17 and we're gonna set some constraints for this guy. So make sure it's highlighted here and then click on Add new constraints down here. And this time we are going to again, We're going to do that. But if you pull this drop down down, you're gonna see that you can position it relative to the label that's directly above it. So we're gonna choose that we're not going to choose the view, So position it relative to the element that's right above it. And I'm going to say that it should be 10 points below that title able. The left will be 20 and the right will be 20 as well. And then I'm gonna add these three constraints when you see something like that. Now I'm going to go back to these properties. Um, there are a couple of things I forgot to set. For example, I want a type sentence. So this is such a beautiful place. And if we wanted to make it multi line all we have to do down here is change that lines by default. It's one. Let's change it to zero. And if I typed more tax, that's going to be multi line. But I'm gonna leave it like that for now. Now that we've created this beautiful layout, we're going to preview it in different screen sizes and orientations. And the way we do that, you might have noticed down here it say's view as iPhone eight. If I click this, I bring it up. You can actually see a whole bunch of different screen sizes and orientations, So the one I'm looking at right now is iPhone eight. But you can go up. So let's say click this. This is the iPhone X. Sometimes if you don't see this entire view or some if it's blocked out, or maybe it's the screen is all white. Try zooming in and zooming out to force that view to kind of refresh and redraw itself. Now let's go up again. This is the iPhone eight plus, so you see hair, I have a white screen. I'm just going to click and zoom in. So you see now it's just redrawn. If you don't have these controls here. And maybe that you're maybe on a laptop screen and you can't see this. You need to make a little more space. Click this document outlined button to just hide the document outline, and you'll probably get your zoom buttons down here. All right, so let's go downwards now. So we were looking at the iPhone eight. That's where we started. Let's go downwards. This is the iPhone S E. And this is the iPhone four s. Now we're gonna change the orientation. We're going to click on landscape here. You see that? Everything's adapted itself because all of our constraints are dynamic, and you can see that this still takes up a 30% of the height of the screen. We're gonna go upwards. This is the iPhone S E iPhone eight, the iPhone 10 and again. Part of it is cropped. Let's go like that. So you can see that here. It's kind of a little bit almost touching our text label here. Now, if we had specified that the left side of the U image you and the you have, you should be relative to the safe area and not to the very edge. Then we wouldn't have come into this notch area. Actually, this part right here, this parts considered a safe area. Let me see if I Yeah, if I click on safe area right here, you can see a blue outline. You can see that this left edge of the screen this is not in the safe area. And you can see that this part is not in the safe area. And also, this part down here is not in the safe area, since we kind of ignored the safe area and we specified our elements. The very edges. That's why this Texas so close to hear. In order to fix this, we might just increase the margin on the left side or something like that. All right, let's move on. Let's go to the next device. We've got the eight plus again of this white screen. Let's zoom out, zoom in. So there you go. Now, One thing I ought to mention is that this area down here lets you preview your layout in multiple screen sizes orientations, But it also allows you to add constraints that are specific to a certain screen size and the way you do that is this button here? Very for constraints. If you accidentally click this and then let's say you clicked something like that and then this area became blue, then you're actually at this point, you're going to be adding constraints that are specific to this right here. And you're not actually specifying constraints to be specific to a screen size. But there's something called size classes, which each size class actually contains a bunch of different screen sizes. It's like a category of screen sizes. This is something that will cover down the line. I want to warn you about it right now, but just in case, uh, this area looks blue for you. If it does, you have to click on this done varying. And chances are the constraints that you added were specific to whatever screen size you accidentally selected. So I would at this point, advise you, um, after you, you clicked on done varying. If you had accidentally clicked it before is to now, go ahead and delete all your constraints and kind of redo it and re add it. But for most of you, if you didn't click this button before and you didn't know about it or you didn't notice it . Um, and it's not blue. Chances are you don't have anything to worry about. So now I'm going to run it in the simulator. So I'm gonna go ahead and select the iPhone eight some later. Click run when you see it, launch in our simulator just like that. And in order to rotate the device, you can go upto hardware. Ah, you can go down to rotate left or rotate. Right. And as you can see there, shortcut keys. You can hold down command and press the left arrow or right arrow. Uh, you can actually even just choose one like this from here. Orientation. I'm gonna use the shortcut keys. So on my keyboard, let's press command and left. You can see that it's just rotated. Rotated fact rotated the other way now. So there you have it. Today, you learned about auto layout and what the safe area is. You learn how to add, edit and delete constraints. You also learn how to check your layout under different screen sizes and orientations. Now, how would you like to get some extra practice and build another user interface? I've got a worksheet for you to do just that. Go through it and build this user interface. First, I've got a question for you for the app that you want to build. Are you going to be focused on the iPad screen size or the iPhone screen size? Let me know by leaving a quick comment below. If you like this video, please subscribe to my channel by clicking the subscribe button below. And if you don't want to miss a single video, make sure you click that Bell icon as well. Lastly, don't forget to grab that worksheet and get some extra practice with auto layout. Just follow the girl on the screen or click on the girl in the description below the video . Thanks for watching, and I'll see you in the next lesson. 3. How to Make an App for Beginners Lesson 3: Hi. Welcome the lesson three of 10. In the previous lesson, you learned about auto layout and auto label constraints. In this video, you're gonna learn about staff use and how they're gonna help you position elements while drastically cutting down on the number of auto Leo constraints that you need to set. By the end of this video, you're gonna have built this user interface. If you went through the lesson to worksheet, you might have noticed that this is what you built. However, you're going to see that by using stack views, you're gonna be able to build this layout much easier and much faster. Let's start a brand new X code project. Make sure you're looking at IOS and choose single view app. Let's click next. I'm going to call this at three. And all of these details should be the same. Language should be swift. Click next, and I'm just going to save it on my desktop here, right here where the project configuration screen is because we've got this note highlighted scroll down to deployment info and under device orientation. We're gonna uncheck portrait and just have landscape left and landscape, right, because this you why is going to be ah, landscape view that's going to the storyboard and we're gonna click view as and let's just change it to landscape orientation more so that we can visualize what we are actually building here. Um, the next thing I want to do is let's click on the asset library right here, and we're going toe import images for our exclude project. Now, I've provided a link in the description below to download these assets. The ZIP file is called Lesson Three assets. So I want you to go ahead and click that link. Download it. I've got it already downloaded on my desktop here, and I'm just going to double click it to unzip it. It's going to open up a folder inside. You're gonna find three images. What I want you to do is just high. All three e compressed command, a toe, highlight everything, and then you can drag it either in here or in here. All right, so on the right hand side, I'm gonna have burger, burrito and salmon these air properly named already. So you don't need to change any of the assets names and then let's go into main that's story bored, and what we're going to start with today is a stack view. So let's go down here in the lower right hand corner, looking at the object library type and stack view into the filter box. And there are two types horizontal stack view and vertical stack view, so these icons might confuse you a little bit. But a horizontal stack view basically stacks things in a horizontal fashion, so the first item you add will be on the left. Second item will be to the right of that third item will be to the right of that one, and so on and so forth for a vertical stack view. When you add an item that's going to be at the top, second item you add is going to be put below it, and then you know so on and so forth. So a vertical stack view stacks things vertically, while a horizontal stack view aligns all of your elements horizontally beside each other. So we're gonna choose vertical sack view. There's gonna put it right there, and then let's change that filter text to a label, gonna drag a label into the stack view. You'll notice that right here in this documentary line, you have a label inside of the stack view. See, I can collapse the stack view, and the label is inside of it. All right, So the staff, you actually contains the label. Um, you're going to see a bunch of red lines here because we haven't actually positioned the stack view, and we need to add a second element just to illustrate how the staff he works. So let's type in image view in here rather than dragging it onto the view here, you can actually just drag it directly into the stack view in the document outlines. So you can see here. I've got the image you inside the stack for you. Now, if I close the stack view, the image view and the label disappear there inside of it. And you can see here in the storyboard that are you I image, view and label are stacked on top of each other right inside the stack view. Um, I want the label to actually be on top of the stack view. So in this document outlined, I'm just going to click and drag and rearrange these two elements so that the label is above the image you do you see here. Now here's the cool thing with a stack view element right here. Let me just highlight it and go over on the right hand side. I can change the orientation whenever I want. So even though I added a vertical stack view onto my view, I can change it to a horizontal stack for you. So let me just do that and you can see if I do that, it's just going to position them side by side like that. And there is also a spacing property that I consent. If I just put 20 there, it's going to space it out. Eso that it has a 20 point gap between each of the elements, and I can keep adding elements into my stack view, and it's going to place it side by side. No need to add any sort of auto label constraints. Okay, so let me flip it back to Vertical here. Now let's talk about some of the other things that weaken set for a stack view. If I click on this alignment, drop down, you're going to see that by default. That's set to fill I consented to leading center or trailing. And if I said it to center, it's basically going to center all of the elements down the middle. And if I click on leading, it's going to left the line. All the elements inside of it trailing is write a line, and fill basically tries to stretch it out so that it fills up the entire stack view. And this is the setting by default. So if I choose center, we're gonna see that label become, ah, center aligned. So let's choose that. You can see that is central lined. Now the image view is still like this because there really isn't any sort of inherent with to it. Once we do set an image, depending on that size of the image, you might see it center. If it's very big, you might see it, Philip the entire width. All right, so what I want to do next is we're gonna want to create another two of these things. So let's add another image view there, and I'm actually going to make this one a little skinny or so that I can fit another one there, and you can just resize that a little bit so that we can just fit it into the view. Then we're gonna choose the label Dragon put it approximately above each of those image views. And you see how this guy is inside of a stack view right in the document outline. And we did this by adding a stack view first onto our view. And then we added the elements inside of the stack view this time because we have our elements are ready on the screen. I'm going to show you how to put existing elements into a stack view. There's actually a button to do that. So I'm going to highlight this. You image you, I'm gonna hold down command, and I'm gonna click this label so that they're both highlighted. If I wanted to place thes two elements into their own stack view, I first have to select them like I have. And then I go down here and click this button embed in stack view, and when I click that it automatically takes those two elements and puts them inside of a stack view. Now it's going to choose a vertical or horizontal staff you, depending on how they're already positioned but it really doesn't matter because you can always just change the access from the stack view property. So by default, Exco chose to put it in a vertical stack view, which is what I wanted. Let's do the same thing with ease. To click on the U image, you hold down command on your keyboard and then click this so that you can multi select both of them. And then let's go and click this button to put that in a vertical stack view. So now, at this point, if you look over on the left hand side, we have three stack views, and if you pop open each of them, you're going to see the label in the image view and each of them. You'll notice that the spacing for the stack view we have a gap, right? Because we specified that spacing. But we haven't done so for these two, so I'm gonna go ahead and do that, highlight the stack view here, go to spacing and hit 20 and then go to this stack view with a spacing and hit 20 and then what we're going to do now. Let's close all of these stack views we're gonna highlight all three of them. You can either hold shift on your keyboard and click this one. So you highlight all of them. Or you can hold command and just individually select all three. But you should have also highlighted and blue like this. And then we're going to click on this stack view again. So when you do that is gonna put all three of them into a horizontal stack view this time. So you should end up with something like this. You have a horizontal stack view, and inside of that you have three vertical stack views and then inside of each vertical stack, Phoebe have a label and an image. You like that? So now let's click on the horizontal stack view and for spacing, I'm going to put 20. And that's going to add a 20 point gap in between each of those vertical stack views. Now, the only thing we need to position is actually this outer stack view because it doesn't know you know where to put this guy. All right, so we have to Ah, position that. So go ahead and highlight this horizontal stack view and then go down to the lower right click on add new constraints and we're gonna unchecked constraint to margins. We are just going to zero tab zero tab zero. Add four constraints like that and I don't mind if their relative the safe area, that's fine. Actually, instead of zeros, we're gonna do 20 just to be consistent with the 20 gaps in between each of the elements. So it's gonna be 20 away from the top 20 from the left, 20 from the right and 20 from the bottom. Let's add four constraints and then you're going to see this horizontal staff. You being pulled in all of these directions right here. Now you can see that inside. They're still kind of not positioned correctly, and we can actually change how they're distributed within the stack view. So let's go ahead. Click that horizontal stack view. We go over to the right hand side to the inspector pain. I want to show you this alignment menu again. So if I click this, you're gonna see top center in bottom. Well, before when I showed you this, it said, leading center and trailing right for left. The line center, aligned or right, aligned right But how come this time? And says top center in bottom. Well, the reason is because last time we were looking at a vertical stack view. And when you talk about alignment for a vertical stack view, you are either aligning things to the left, the center or the right. When you're talking about a horizontal stack view, which is what we have highlighted right now, alignment refers to top center or bottom aligned. So right now it's set to fill, which is basically going to stretch the elements inside of it from the top all the way to the bottom. It's gonna try to kind of fill up the entire space. That's fine. We're going to leave it like that. What I want to point out is distribution. So this is how the space is divided up horizontally. And if this were a vertical stack, view distribution would refer to how the spaces divvied up vertically. All right, so looking at this horizontal stack view, we can either choose Phil, which is the default, and it basically just gives each element the space that it needs. So that's why we kind of get this disproportionate spacing is because this is the size that we had that stack view originally. And these two elements, Uh, this is the size that we had originally, so it's just gonna keep that size. However, if we choose something like Phil equally, that is going to divide up the space between all of the elements inside equally. So let's go ahead and choose that. And you can see now that it actually gives each stack view this an equal amount of space, it doesn't look like it because thes image views are, um, different sizes. But if you click the actual stack view like this, you're going to see that all of them actually have an equal amount of space horizontally. Okay, so now the next thing we should do is probably give these image views some wits because we basically want this image view to be as wide as the stack view that contains it. So we need to do that. And in order to do that, we're basically going to highlight the image view and then hold down command and highlight the stack view, which contains it, so that both of them are highlighted going to go down here to add Dean constraints and whips mean to click that one. This one's at new constraints, and we're going to say equal wits. When you do that, it adds a constraint. You can see down here that says that the image view with should be the same with as the stack view. So let's do it for this other stack view an image view the highly this image you hold down command, select the stack view that contains it. Go down here equal. It's had constraint. So you're gonna see that stretch out, Do the same thing for this last one. Highlight the image. You hold down command on your keyboard and click that stack view going down here. We're in. Choose equal widths. Now, there's actually a shortcut way to do this. And now this is completely optional. I'm gonna show you how to do that. I'm gonna first delete this constraint, which I just added. And the way you do this is if you highlight the image, you, then you hold down control on your keyboard and then you click this image of you and kind of drag it towards that stack view and then let go. It's gonna pop of this low menu, and you can simply select equal what's from there. So that has the same effect. And that's sort of and advanced the shortcut way to do it once you get more used to things . But remember, if you're you, I doesn't look like this. What I have right now. Then chances are you've added incorrectly a constraint end. It's very easy to fix. Just go ahead. You know, open up these little blue constraint menus, delete the constraints and then re add them. Or you can click on a constraint, and then you can edit the properties of that constraint on the right hand side. But at this point, you should have something that looks like this. Ah, So what we're going to do now is click on this route view here, and we're going to change that background to a black color, and then we're gonna highlight the labels. So what you can do is you can expand each of these stack view so that you see all three labels Click that and hold down command toe klik. The 2nd 1 while still holding down command, click on the 3rd 1 So you have all three of them highlighted. And then go over here. Um, in the attributes, Inspector, you can change the text color toe white for all three in one shot. And we're gonna also change the font from regular too bold. And I'm gonna change the text individually, actually. So for this label, this is going to be our burrito. This one is going to be our for a car. This one is going to be our salmon, all right? And now we can actually also set the images. So let's go ahead and click this You I image you click image, and we're gonna choose burrito. Now, what has happened here? It suddenly just blew her label out of the view. Although it's actually still there if you take a look right here in the document outlined. And this burrito kind of just is also distorted. And we're going to highlight this burrito image view, and then we're gonna go to content mode instead of scale to fill. Will say aspect, Phil, Now that seems to have made things even worse. Could see the image spilling out of the image view now, and that's actually completely normal because the images actually bigger than the image view. And if we don't want the image to spill out, what we can do is enable this clip to bounce property. So if we click that, it's going to clip the edges so that anything spilling out of the image view is kind of cropped or, you know, clipped. All right, so now we still have to address the reason for this image kind of pushing that label out of the view. This brings us to a very important question in this case that we have right here. This stack view on Lee goes from here like about here. Don't here. There's only a finite amount of space. So what happens when there's not enough space to display both elements like we have in this case right here? Because the image wants to take up all of the space, and that really doesn't leave enough space for the label. So let me show you how we address that. Let's click on the label. This burrito label here, you can see it's actually ah, line. It's like squish. There's no height to it. And let's go over here to the size, Inspector. If you scroll all the way down, you're going to see a couple of things here. You're going to see content hugging priority and content. Compression resistance. Priority. I'm gonna explain what content hugging priority is in a second, but I want to point out what this one is when there's not enough space to display all of the elements. This is what the auto layout system uses to determine which elements should be squished. The element with the lower content, compression resistance, priority will be the one that gets squished. So in this case, I think by default they're both 7 50 So let's take a look at this right now. I have the label highlighted and the vertical content. Compression resistance, probably a 7 50 Let's take a look at the image. You click on the image and go down here. It's 7 50 as well. So that's why if you look at here in the document outline, if you look at this little red error icon and click it, it's telling us that there's some sort of content ambiguity, and it's telling us that we need to set the vertical compression resistance priority for these elements because right now they're both tied at 7 50 Ex coat cannot determine which element to squish in which one not to. So let's go back to it. And we need to give one of these higher priority than the other. So for the label, let's give it a higher priority. So let's break the tie and give this guy 7 51 because this guy has a higher priority against compression. Um, it's not gonna get squished. Ex school will rather resize this element that has a lower resistance priority than to squish the label. Because this one this label Ray, has 7 51 content compression resistance, priority. Whereas the Speedo you image, you has 7 50 Now, if I change this burial image you to have a vertical compression resistance priority to 7 52 then you're going to see it actually takes out the label because now the label has a lower priority, so it's gonna get squished, right? So we don't want that. Let's lower the vertical priority of the of the U image view. So the same problem is gonna happen with ease to. But I want to talk about content hugging priority, so content hugging priority is actually the opposite problem. What happens when we have too much space? You can see here in this stack view, the label is actually stretched out like this, so content hugging priority dictates when there is too much space. Which element is going to get stretched to fill up that extra space? Because in a stack view, when the distribution is set to fill, its gonna try and Philip that entire stack view you can see right now because the U image you doesn't really have a size. It's trying to stretch out the label to Philip. The remaining amount of space now content hugging priority, like I said, determines when there is too much space. Which element gets stretched out. The element with the higher content hugging priority will not get stretched. It's actually the element, which has the lowest content hugging party that is going to get squished. I know sometimes it's kind of hard to wrap your head around this because it feels like you're speaking in opposites. But the way I think about content hugging priority is, I imagine hugging that element so the tighter you hug it, as in the higher priority it has, the less likely it's going to get stretched out. So if I give this burger label a really high vertical, content hugging priority, that means it's gonna hug it really tight, and it's not gonna stretch it out. It's going to stretch out the other element, like you see what happened here. The other one is actually easier to understand. Compression resistance. It's exactly how it sounds, right? If you have a high compression resistance, then you're not gonna get compressed. All right, so now let's set the image view for this guy. We're gonna change back to this tab attributes, Inspector. We're gonna change the image to the burger, and we are going to change this toe aspect, Phil, and we have the same sort of problem. So let's clip the bounds. And because this image is really large, there's not enough space to show both the label and the image. So we're gonna have to set which element has a higher compression resistance. So obviously we want the label to be shown. Let's highlight the burger label, and let's give it a high compression resistance on the vertical access higher than this image you at least. Okay, so we're gonna do the same thing here by now, you should understand what's happening. She's salmon, this shoes aspect, Phil, that's clipped, abounds. And then let's click on the salmon label, go to size Inspector, and then we're going to up the vertical compression resistance priority so that it's higher than this image view. All right, so now let's view as and take a look at this layout in a couple of different screen sizes. So let's go. Let's go up. Who got the iPhone 10. Here? Let's click the zoom buttons that looks good. Click on the iPhone eight plus zu mountains and back in. It's good click on iPhone, etc. And I feel for us and we can even change the orientation. I mean, it's gonna try its best. Two followed our auto Leo constraint rules and the stack view configurations, and we're gonna get something like this. Everything still visible. If you know, zoom out, some beckon, you know. Obviously it's not ideal to have a portrait orientation for this sort of layout. However, you know, in our project properties, we configured it so that it should be landscape only, so that's going to prevent it from going into portrait anyways. All right, so let's test it out in our simulator. Let's choose iPhone eight. Let's click run, and it's not gonna change it to landscape by default. So we're going to press command, right arrow, and you can see it like this. So today you learned about statues and how they could be used to position elements. You also learned about content hugging priority and content. Compression resistance. Priority. If you like this video, please subscribe to my channel by clicking subscribe button below. And if you don't wanna miss a single video, make sure you click that bell icon as well. Thanks for watching, and I see you in the next lesson. 4. How to Make an App for Beginners Lesson 4: Hi. Welcome to lessen four of 10 equipped with your new skills and auto layout and staff views , it's time to put your skills to the test. By the end of this video, you're going to have built the user interface for our war card game app. We're going to start a brand New Exco project. Make sure you're looking under the IOS tab at single view app. Let's click next for the product name. I'm going to call it the War App and the rest of the details should be the same as your previous projects, so you don't need to change any of it. The only thing I want you to make sure of is that the language say's swift. And if it doesn't just hit this drop down and select it, click next and then let's save it on the desktop or anywhere you'd like. The first thing we're gonna do is add the graphic assets into our exclude project. So below the video, you're going to find a link to download these assets. It's called Lesson for Assets. Just go ahead and click that link and download that zip file, save it on your desktop and I've already done that. So I'm gonna go ahead and double click. That's it. Fall to unzip it after you unzip it, you're going to get a folder. If you open up that folder, you're going to see all of the graphic assets for our project. Now, you might notice that each of these assets come in a set of three. So let's open up a set of these assets. I'm gonna open up back dot PNG. This is the back of the card. Let's open up back at two x, stop PNG and back at three x. Stop PNG. If I spread them out a little bit, you can see that backed up. PNG is the original size back at two x dot PNG is two times that size and the three x version is just three x the size of the original. And the reason why we have three different sizes for the same graphic asset is to accommodate the different iPhone screen resolutions. So the retina screens used the at two x version and the larger screens like the iPhone eight plus used the at three x version. Let's go ahead and close thes. Now we're gonna actually, just add all of these two are projects. So first go into the asset library for your exclude project and then go back to the folder hit command A on your keyboard to select everything. And then let's drag and drop them into our asset library, and you're gonna see that X Code is smart enough to group all of the different sizes together. So if you click on and say back, you're going to see the one x two x and three x Group together like that, so you should have back background car to all the way to cart 14 deal button and logo. Now let's go back to the main dot storyboard and in the lower right hand corner in the library Pain. Make sure you're looking at this object library tab in the filter box. Let's type in image view and let's drag and drop that guy right there and make sure you've selected it in the document outline. Let's go to add new constraints, we're gonna uncheck constraint margins, and I'm going to pull down these little drop downs and I'm going to choose view inside of safe area because I want this background to be edge to edge. Let's go ahead and do that. And then let's change all of these 20 So zero tab zero tab zero tap hitting the Tabachnik uber just helps you jump from box to box. And I just want to draw to your attention. If you change it to view now or you click view again like I'm doing now, that number changes. So just be cautious of that and make sure that those are zeros. And in any case, even if you add the wrong constraint, you know how to edit or remove it and re add it because we learned that in lesson to. So let's go ahead and add these four constraints. You're going to see you're you. I view stretched from edge to edge, even all the way to the top and of yours doesn't look like that. Just go in the document outlined. Delete all four constraints and try that again. Okay, so now, having the image you highlighted in the inspector pain on the right hand side, choose image and let's choose background like that. The second thing we're going to do is we're gonna add a stack view a vertical one because we're gonna have the logo and have the cards. Everything is kind of stacked in a vertical fashion. So let's go down here in that filter box. Let's search for a stack, feel I'm gonna add a vertical stack view just like that. And now we're gonna set some constraints for it. Click. Add new constraints. I'm going to remove constraint margins and put zeros for all of them again. But this time I'm gonna leave them relative to the safe area because I don't want the elements in the stack view to be blocked by anything. So that's add those four constraints. You'll see that they are edged edge except for the top here where the status bar is covered . Okay, so we're good for that. And now it's time to add some elements. So let's go back to the stack view here and again. We're going to search for image you. So go ahead and drag that into the stack view. Um, in the document outlined, you should see the staff you right here. And then you should see the image he was inside of the stack view. If you collapse the stack view that image. You should be inside of it. Okay? And the background is outside. It's behind the stack view. Okay, so we've got this image. You here, um, we are going to add another stack view, and this time it's going to be a horizontal stack view. So rather than dragging it onto the screen here, I'm actually going to drag it into the document outline. And the way I've done it here is I've put it inside this stack view, but below the image you. So if you collapse the stack view both the horizontal stack view in the image, you should be inside of it. And in fact, I'm actually going to click this you can hit Enter. And I'm going to just rename this right now and call it the route stack view. So when I refer to the root stack view, you know, I'm talking about this guy, the staff here that contains everything. Okay, so we've got this stack view, this horizontal one right here and in the filter box. We're going toe type in image. You again. And we are going to drag this into the document outline. And this time I'm gonna put it inside that horizontal stack view. Okay, so if I collapse this, you should see that image view being tucked inside of it. I'm gonna do that again because we have two cards and again put it inside. Now, if you accidentally put it on the outside, let's say, you know, you put it somewhere like that, and then you collapse that sack view and that image, you is still there. Just go ahead and put it inside like that. You can rearrange them, and sometimes it takes a little bit of patients to get it just right. Okay, so we've got to image. He's here. These two represent the two cards, so it's starting to get a little bit confusing in the u Y. Here. So let's start setting some images and start naming some of these things. So I'm gonna call this the card stack view, and you can hit enter to rename it. And this one I'm gonna change the distribution to fill equally. And so you can see that change down there. And for this image viewer, I'm going to click it. And in the inspector property, I'm gonna choose back. And in this one, I'm gonna choose Bacchus. Well, so don't worry that it doesn't look quite right right now. All right, so there's our card stack view containing the two card images for this one above it. This one is supposed to be the logo. So I'm going to scroll down and choose a logo like that, and right now it really doesn't look right. But we can deal with that in a second. Okay? And now we're gonna go to button, and we are going to drag this button. Now. This part is going to be a little tricky because we want to put it into the root stack view , but below the cards stacked view. And sometimes when you dragged this button here, it wants to put itself inside this car stack. You look, I've just accidentally put it inside the cards stacked view, and you can see there's a card. There's a cart, and then there's a button beside it. That's incorrect. I actually want the button outside of it. So an easy way to position it is if you tried this guy out and then just drag it in between the logo on the button like that, you know, not supposed to be there, but now you can collapse this cart stack view and then just move this one above the button . And so that's an easy way to get Get what you want for the roots stack view. What we can do now is actually highlight it on the right hand side, change the distribution to fill equally. So that's going to given equal amount of space to all of the elements inside of it. So the next thing we're going to do is we're gonna add some labels. So let's go down here in the bottom, right? Let's choose label or type in label rather, and let's track this label. And again, I'm going to just drag it into the document outline and put it below that button. You know, everything should actually be inside of this route stack view. So I just want you to do a sanity check here. So collapse that routes that view. You shouldn't see any elements outside of that stack view. If they are, just click it and drag it into the roots back view and inside the routes that view you should have the logo. The card stack view, which contains thes two card images and then a button and then the label. So let's add a couple more labels. Let's click and drag that guy and put it in between the button and the label was clicking. Do that again. We're gonna add a total of four. Do that again, and then I'm going to select all four labels. You can hold down command, and you can individually select all four. And then let's change the color of the text to White. And then now what we're going to do is to select it from here. We're gonna select that label and hold down command and select the second label. And we are going to click this button to put them both into a stack view. And so that's gonna put them into a vertical stack view. We're going to do the same for thes two bottom ones. Click this guy, hold down Command to select this guy simultaneously, and then we're gonna click this button and embed that into a vertical stacked us. Well, now, in the document outline below this button element, you should have two vertical stacks views inside of each of them. You're gonna have to labels OK, now let's collapse. Thes two staff used to hold down command, select both of them simultaneously like that. And then let's click this embed in stack you again. So now you're gonna have a vertical stack view with two vertical stacks views inside each of them containing two labels. However, for this stack view that contains all of the stuff below it, we're going to change this to a horizontal axis. So go on the right hand side and inspector pain. And let's change that to horizontal. And then you're going to get something that looks like this. It still doesn't look quite right, but we're gonna fix it. So in this horizontal stack view that you just change, let's change the distribution to fill equally. And then, for this first stack viewed in here, let's change alignment to center. And let's change distribution to feel equally. And then, for this one that contains the labels on the right hand side, we're gonna do the same alignment. A center and distribution is Phil equally so now it's starting to take shape. Okay, so for this label that is on top on the left hand side, let's change that to change the player, the text of player. And then let's change the font to ah, bold type of Funt. And then for this one right here, we're going to change that to CPU, and then we're gonna change the font, Wait too bold. And then for this label right here when it changed that 20 for this label really change that to zero. Okay, so now we have pretty much all the elements on the screen. It still doesn't look quite right, but we're not done yet. So for this button, let's go here, uh, and change the image to deal button and let's erase that text right there. Case turned to take shape for this logo up here. I want you to click that, and right now it's set to scale to fill, so it's stretching it out, and I want to change that just the center instead. And so where it's not going to try and stretch, it is just going to center that image inside of the image you and for these guys right here instead of scale to fill, you know, it's really pulling it in all directions to Philip the image viewer. I'm going to change it to aspect fit and same thing for this guy. I'm going to change from Scott Ifill toe aspect fit. And then you get something like this, which looks like what you intended. So, um, one thing is that one thing we can changes for this route stack view. If you feel like it's stretching all the way down here too much, we can just bump everything up a little bit. So for this route staff, you select it. Let's go into size, inspector and scroll down to all of the constraints that relate to the roots back view. And for this one that aligns the bottom of the sack view to the safe area. Let's click edit and let's change that constant to something like 20 and then you're going to see it bump up just by a bit. All right, so let's take a look at this. You I in a couple of different orientations and devices. So down here it say's view as iPhone eight. I'm just gonna open that up and leave it at Portrait right now, so we'll test out the portrait ones first. Let's choose the iPhone 10. Yeah, let's minimize it a little bit so we can see everything. And if your screen turns white and you can't see anything, just change the zoom level here. If you can't see these doom controls, just hide this document outlined by clicking this button here. That's gonna create more space here to allow you to see the zoom buttons. All right, let's see the iPhone eight plus. You see, my screen just turned white. Let's assume in and zoom back out. This is the iPhone S E. This is the iPhone four s. OK, so now let's check out the horizontal ones or landscape orientation. So change the orientation looks pretty good. You know, the cards are kind of small, which is something that we can definitely address. Clicking that now looks a little messed up, but that's just kind of ah refresh issue. So let's zoom out. Zoom back in and you can see that it looks fine. Now on these bigger screens, you can see that that car's air really small, and the reason for this is because the roots stack view. We told it to distribute its space equally between all of the elements, so the logo gets an equal chunk of space. The cards get an equal chunk of space, the buttons, the labels down here, they all get an equal chunk of space. If we wanted thes cars to be bigger, we would actually have to tell that roots back view instead of distribution. Phil. Equally, we might say something like Phil, and then you can see it looks a lot better, right? But the problem is, if we change the distribution to fill, if we go back to the portrait orientation, you can see that the things start to look scrunched up. So this real solution here is if we have distribution to be Phil equally for this vertical orientation. But for the horizontal orientation, you know that we could change the distribution to fill, and that is something that we can do. Actually, I'll show you that in a second. But first we need to talk about something called size classes. Size classes are basically categories of screen sizes, because there so many devices and two orientations for each device. The apple decided to separate all of these into different categories of screen sizes, So when you're adding a constraint, you are able to say something like add this constraint for all size classes, as in all categories of screen sizes or Onley. Add this constraint for a specific size class, so this gives us some flexibility to change the layout, depending on a specific size class. Let's say you're at might look different on the iPad size classes versus like a smaller device like an iPhone. And each size class is defined by two parameters. A height and the width. Now the height can be compact or regular, and the wit can also be compact or regular. So, for instance, one size class might be compact with and compact height. Another size class might be compact with but regular height. And in the case where you don't care about size classes and you want to add your constraint for all size classes, it would be any within any height. Now let's dive back into our Exco project, and I can show you how we can add a constraint for a specific size class. Now the first thing I want you to look at is down here in the view as iPhone 10. You can see the size cause here that this is it is compact with and come back tighten. Let's change it to the portrait orientation and you can just see that size class changes to compact with but regular height. So just to reiterate what we want, we want distribution to be Phil equally on the compact with and regular height. Or actually, we wanted to be feel equally for any size class. But when it comes to this size class, right, the compact within compact height, we want distribution to be Phil instead. So that's just for that case just for that size class of compact with and come back tight. We want distribution to be filled. Otherwise, we want Phil equally for all other size classes. So this is where you're going to set it back to feel equally. And we are looking at this size class right now, right? Compact within combat tight. And we're going to click this very four traits button, and we're gonna introduce a variation based on, uh, the with and the heights. We're gonna click both and then just click out of that and this section turns blue and it shows you you're you're currently varying For all of these screens. All of these screens are in this size class or in this category of screen size. I don't know if you've noticed, but we are actually missing the screen size. There was one to the left of this iPhone 10 and that was the iPhone eight plus. Now, let's take a look at why varying for this size Class doesn't include that iPhone eight plus . So I'm gonna click done, varying to kind of get back to all sides. Costs is, and let's go ahead and click this iPhone eight plus well, this iPhone eight plus is not in the same size costs as these other guys. It's in the regular with and compact height. And the reason is is because the screen is just so big that it counts as regular width doesn't count as compact with, whereas these other guys like the iPhone 10 counts as a compact with. So if we wanted, you know, to also add our constraint, Um, for this size class as well, what we're going to do is we're gonna click on very for trades, but we're gonna introduce the variation simply on the height. We're going to say that, um, for any compact height size, class we don't care about what with it is whether it's regular with or compact with. We don't care. We only want to care about the height. So if its compact height right now, you can see that it includes the iPhone eight. Whereas before, when I varied on both them both the high end with it did not. So I'm just gonna very on the height right now, right? So gonna have this blue section here, and it tells us we are varying for the compact height devices. And what I'm going to do is go up to distribution should be set to fill equally. Right now click this little plus icon beside distribution. And here I can say again, you can kind of set the variation that you want. Leave it as with this any in the highest compact click add variation. And then now you can see that you can actually change this value specifically for this size . Kloss, which is compact height. So I'm gonna change this to fill. And now it's basically going to use Phil equally for all cases except for size classes of compact heightened. In that case, it's going to use Phil all right, Let's click. Done varying down here. And then let's test this out. So if I go into portrait mode, you can see that it uses feel equally. It still looks good, but when I go into landscape mode, you can see that it uses Phil and my cards look bigger than they were before school. Check out the iPhone 10. See how big those cards are. When I go into a portrait, you can still see that everything is spaced out evenly. All right, So let's run this in the simulator as a last task, and I'm gonna choose the iPhone eight plus simulator this time. All right, so here we are with the portrait orientation. I'm in a press command and the right arrow, and here we have the landscape orientation. And then let us stop this project. And let's use a small one like the the five s. Let's launch that. Oh, and we've actually popped up a different simulator. So here we have the portrait orientation. Let's press command, right arrow. And here we've got the landscape one on both look pretty good. That's awesome, right? If you're having trouble putting this layout together, just leave me a comment below and I'll jump right in to help out. Also, make sure you download my exclude project so that you can compare it with your own. You can get it by following the link in the description below. Now I want to turn it over to you. Now that we've built the war card game user interface. Was it easier than you expected? Or was it harder than you expected? Let me know by leaving a quick comment below. If you like this video, please subscribe to my channel by hitting the subscribe button below. If you don't want to miss a single video, make sure you click that bell icon as well. Remember, you can download my ex code project that I showed you in this video by clicking on the link in the description below. Thanks for watching. And I'll see you in the next video 5. How to Make an App for Beginners Lesson 5: Hi. Welcome to lessen five. You're halfway there in this lesson. We're diving right into the swift programming language for this video. And the next to you're going to be learning about the basics of Swift. This is stuff that you're going to need to know in order to complete the project that we're working on together. I know that the coding part is intimidating to a lot of people, but I want you to stick with this lesson and the next two really pay attention. And I recommend that you open up X code on your own computer and type out exactly what I'm showing you on the screen. By doing that, it's going to help you remember the language structure and the keywords without having to memorize anything. And I promise you, by lesson 10 you will be able to write swift code. All right, let's get started. When you launch X code, you're going to see this option here to get started with the playground. So go ahead and click that and we're under IOS. We're just going to choose a blank playground. Go ahead and create that on your desktop, Going to see something like this a playground is not an entirely new Exco project like we've been creating in the past two lessons. Rather, it's a lightweight place where we can test out some code. So it's perfect for what we need to do. If you don't have the line numbers on the left hand side there and you'd like them just go into your ex code preferences under the text editing section of the Preferences, you'll see a check box that you could enable to show your line numbers in this playground. Right here. You're gonna see this editor area in the middle where you can write some code on the top. You're going to see a status bar, Mind says. Ready. Right now, yours might say launching simulator or might be spinning and doing something. And when it turns ready, you're going to see some text on the right hand side here, and then this is sort of like a preview pain. I don't want you to pay too much attention to what goes on right here, because depending on your version of X Code, you might see something different than what I see. And I don't want you to get confused. What we are going to do, however, is click this little arrow right here to show this consul area, and we're going to focus on the output that is down here rather than the output here. Okay, so let's talk about some of the code that you see on the screen starting from the top at the top. You're going to see this text in green. This isn't actually code that is going to be executed. These air called comments and they're basically notes or remarks that you can leave for yourself to remind yourself what this piece of code does or why you wrote it. You can write a comment as long as you start the line with these two. Ford slashes anything. You right after that on the same line will be regarded as a comment, and it won't be run as code. For example, down here we can start with two Ford slashes and we can say a comment like just testing out some code. Now. Obviously, when you write comments for your own projects, they're going to be much more meaningful than that. But this is just to demonstrate comment when you're working with the team of people. It's crucial that you leave comments to show your teammates your reasoning in your rationale behind the code that you're writing. If you're working by yourself. It's also crucial to leave comments because when you come back to your project months later down the road, you won't remember why you wrote that coat unless you've left yourself comments. Now the line below the comment import you. I kid you like it is something that we're going to talk a lot about later. But for now, just know that it's a library full of code that Apple provides, and it contains a lot of useful stuff for building APS. Import is a special key word that say's that we want to use that library of code by importing. It will be able to take advantage of the U I Kit library before we talk about the next line of code. This one right here, we need to talk about variables in that there's lots of data being passed around. You need a way to keep track of this data. That's what variables air for. You can think of variables as kind of like a sticky tab. You know those ones where you can stick on a page, you can give it a name and it keeps track of that page or, in our case, a piece of data. Let's talk about the line of code below now, following our analogy, Var is a special keyword and swift that creates a new sticky tab. Str is in this case, the name that we write on the sticky tab. Hello World is the piece of data that we want this variable to keep track of the equal sign is assigning that data to that variable. In the case of our analogy, it's like sticking that sticky tab on the page that we want to keep track of. Now this line of code here online seven makes sense, right? We're declaring a new variable called str and we're assigning hello playground to it now, using our sticky tab analogy. What if we changed our mind, peeled off that sticky tab and stuck it on another page? Well, we can do that with our variable to, but there's just one catch. Let's just say that we used a permanent marker to write the name on that sticky tape so we can change the name this is how are variable. Works just like moving are sticky tab to point to another page. We can point are variable to another piece of data as well. Notice that we don't use the var keyword on this line because we only needed it in Line seven to create that variable I just said create. So it's easier to understand, but the proper terminology is declaring a variable. So we declared str online seven and online nine were simply assigning it another piece of data so you can see that now that we have another line of code, we haven't another preview here, but again, I don't want you to pay attention to that because your preview might look different than what I have, depending on your version of Mexico. I alluded to being able to show the output down here, and that's exactly what we're going to do. We're going to use a keyword called print, and that's going to allow us to output the contents of our variable. So in here, in between these two statements, let's write print and then you want to open around bracket like that, and this menu that comes up is X code tryingto auto complete what you're writing. In other words, it's just Exco trying to make your life easier by trying to guess what you want to type and allowing you to select it from this menu. We don't need to do that right now. Type str And if you don't have this closing bracket that I have here just on your keyboard , hit the closing bracket to complete the statement. When you do that down here in the consul area, you should see hello playground. And this is the contents of the str variable, which is what the print statement does now on your own playground. If you don't see that output yet, you might see at the top of the status bar doesn't say ready. Instead, it might be like running the code or something like that. Or if you don't even see that what I want you to make sure is that this Icahn here this play button is in blue. And if yours is not that, I want you to click and hold this and make sure that it's set toe automatically run because if you said it toe manually run, you're gonna have to click this play button every time you wanted to process the coat. But when it set to automatically run every time we changed the code in this editor area, it's going to rerun the code and, ah, process all of the output that it needs to show down here. Now let's try printing the contents of str again, but this time after we've changed it. So type print to open up around bracket str and that you can close that round bracket and then it's processing. But after processes, you can see down here that this is the first print statement. This is the second print statement. So you see, after we changed, what are variable is pointing to, and we printed it out. Indeed, it say's another playground. Next, we're gonna talk about Constance. Constants are just like variables, except that once you assign data to it, that's it. That constant can't point to anything else following our sticky tab analogy. Imagine that before you stuck the tab on the sheet of paper, you applied some superglue and then you stuck it on the paper. There's no way you're gonna peel off that tab. That's like a constant the syntax for constant is pretty much the same, except that we use the let keyword instead of the var keyword which we used before. Let's go back to our playground and try it out. So we're going to type this out using let we're gonna say Let s t r equals yet another playground. Now you're Exco might be processing, but once it does, you're going to see that it declares an error here and it's gonna highlight this line and red and also in the console you'll see that there is an error. The problem is that constants and variables must have different names because otherwise it would be quite confusing. Let's change the name of our constant. Now I'm just going to call it Khan and now the error goes away and everything is fine. Let's try assigning something different to our con Constant. Let extra do its think. And then it's going to tell you that you cannot assign another piece of data to our constant because, like I said, a constant once you have signed a piece of data to it, that's it. Now you might be wondering, Why would we want to use a constant versus variable. Well, sometimes when you're programming and you want to keep track of a piece of data, you want to make sure that no one else touches it or changes it. That's when you would use a constant. You would use a variable when you expect that the data it points to will change. Or maybe it gets updated or something like that. So let's go ahead and erase this line here, and I don't know if you've noticed, but so far we've only been assigning pieces of text. Two are constants and variables, while their other types of data that we can assign to this brings us to the next topic. Data types. The pieces of text that we've been assigning toe are variables and constants are called strings. Now I know it's kind of a strange term. I remember when I first start programming, I thought of those as strings of characters forming a piece of text. The next data type is Boolean or bull. For short Ah, Boolean value is going to be either true or false, perfect for keeping track of those pieces of data which are only gonna be one of two values . Don't worry we're gonna try all of these out in the playground in just a second. Next up, we have integers or into for short. These represent integers just like you learned in math class. Integers are whole numbers in the positive or negative range, including zero. You might ask. What about decimals? Don't worry. We've got that float is what you're looking for. The float data type represents floating point data. In other words, you're decimal numbers we've just covered for data types and we're about to go back to our playground and try them out. But I just want to say there are more data types. However, these four are great to start with at the end. I have a swift cheat sheet that includes the rest of them, and I have a worksheet for you to get extra practice from two. All right, let's go back to the playground and try this stuff out. All right? First, let's try out billions. So I'm going to declare, I'm just going to use the variable name be and we're just going to type. The value is true. Now this is a boolean. Now that's print out. Be like that and you're going to see down here that it says true. The other value that you can assign B two is simply false and true or false are special keywords and swift that you can use as the values for a boolean variable Next thought. We have integers, so let's create one like this and you know, an investor can be something like that, you know? Or it can be zero. Or like we said, it could be a negative number. All right, now, let's try working with some float data types, so I'm going to use the very well f I'm going to say something like that or something like that, for instance, And then we can also go ahead and print this out, print out f and we'll print out I as well. And you can see that with the print statement down here, the contents of the variable is just the last value that I've assigned to it. Now that we've gone through data types, let me tell you one other thing about variables and constants. A variable or constant can Onley store data of one type. Know what I mean by that? Let me demonstrate. So, for example, we have this variable I here and we've assigned to it an integer and we can reassign it. Different integers, right? But however, let me try to assign it suddenly afloat, and it's going to say I can't assign a double to a type in and Double is just another data type that stores decimal numbers just like float does, except that it's less precise. It can't store as many decimal places as afloat data type can. Anyways, it's saying that we can't assign value of type double, which is what this is to a type of int, which is what I is. But where did we specify that are variable? I could only store int data types. We didn't specify that. In fact, what it did was it took the first thing that you assigned to that variable, and it basically inferred the data type from that value because we assigned 32 into the variable I and 32 is an int. This very well assumed that it would only store int values, and so suddenly, when we try to assign it a double or afloat value, that's gonna cause an error. Same thing goes for these other lines of code appear so far B equals false. Be now can only store Boolean values. Right? If I did, B equals true, that would be fine. But if I suddenly did you know B equals test or something like that and ice tried to assign a string to it. You'll see that there is another error. So I just want you to make a mental note of that. So let me just erase these lines of code like that. Another thing I want you to make aware of is that we can explicitly state that a variable can only store a certain data type. And we do that when we declare the variable here and we use colon and then we type out the data type that tells x code that we want this variable I toe Onley store integer types. If I declare my variable like this and I say that I can only store integer types and I suddenly try to assign it afloat, it's not going to like that, even though it's the first thing I'm assigning to it. All right, so that is just something I wanted you to know. I could do this with this as well, just to show you what the data type names are. Think that so that's all fine. I'm just explicitly stating that these variables store this data type float int cool and string at the same time. Like you saw. We can leave that out, and it will just infer from the first piece of data that we assign it that that is the data type for the variable. So that is your first lesson in swift programming. You learned about variables Constance and how they can store values. You also learn about data types, specifically bull, string, int and float. I have a swift cheat sheet for you guys that covers all of this stuff, and it's going to be a handy reference to keep around as you're learning swift. I also have a worksheet for you that's going to cover using variables and performing math operations on them. So I highly recommend that you download that and check it out. You can get them both by following the euro that's on the screen or the Ural in the description below. But first, if you enjoy this video, please subscribe to my channel by clicking the subscribe button below. And if you don't want to miss a single video, make sure you click that bell icon as well. Now I want to turn over to you. It's swift programming your first time learning coding or do you know some other programming language? Let me know by leaving a quick comment below. So thanks for watching you guys and us. You in the next lesson. 6. How to Make an App for Beginners Lesson 6: Hi. Welcome to lessen six. In the last lesson, you learn some basic swift code. Let me ask you something. How does the user interact with a nap? Usually it's something like the user takes an action, such as tapping a names headline in the APP reacts by displaying that article action reaction. Well, that implies that when the user takes an action, we need to be able to run some specific pieces of code. In that case, we need a way to organize our code into bite size chunks so that when the user takes this action, we run this block of code. And when the user takes that action, we run another block of code, while Swift has something called Functions, and this is basically wrapping up a block of code and giving it a name so that when we need to execute that code, we just call it by its name. So let's dive into a playground and see how we use functions. We're going to start by creating a brand new playground, So go ahead, get started with the playground under IOS. Let's shoes blank playground, and I'm gonna call this the Functions Playground and just save it on the desktop. So in order to declare a function, we used the key word F u N c and then we type of space and then we type in the name of the function. Now, the name that we give the function is the same name that we're going to call the function with to execute the code inside the function. So I'm gonna call this one to say hello. The next thing we do is open up a pair of rounded brackets like that. Now, inside those brackets, there can be things called parameters, which we're going to cover later on in this lesson. But for now, we're going to just leave it as an empty set of rounded rockets. Next, we're gonna hit space and find the curly brackets on your keyboard, and we're going to open up a pair of those just like that, an opening one and a closing one. And inside of those curly brackets, that's where the code for our function goes. So let's hit enter a couple of times to create some space, and inside this function, I'm going to have only a single line of code. I'm just gonna print something into the console, so gonna print out. Hello, Just like that. Now, notice that in the console nothing gets output because the code inside my function is not going to be run until I actually call it a function by its name. Now let's go down here and line 12 and out demonstrate how to call it. All you have to do is type the name of the function, followed by those rounded brackets like that. And then you're going to see the output because it's running this line of code. When you write a function, usually think about performing a specific task. In our earlier use case, you might write a function to display an article so that when the user taps on Nice headline, you can run that function to display that article. Now, sometimes a function may require some sort of input to performance task. For example, what happens when the user taps on Headline number one vs News Headline number two. Are you going to write a different function for every single news headline? Of course you're not, and furthermore, that needs changes every day so you can write a function for a piece of needs that hasn't come out yet. Instead, you write a function that displays an article, but it doesn't know or care which one it is. You have to specify which article it's just show when you call that function, bypassing that article into the function and then your function will take that input and display that article. You can do this with function parameters. Remember those rounded brackets in the function? Call well inside of those brackets. You can specify what sort of data you want to be passed into the function when it's called . In the example below, we declare function called Say hello to In between the brackets you have a parameter called name that is of the data type string. That kind of looks like a variable declaration, but without the var keyword right. Whenever you call the say hello to function, you're going to have to supply a piece of text with that function. Call now, let's go into the playground and see how we can work with function parameters. Now, as you were typing that function name, you might have noticed Exco, try Toe auto, Complete it for you. So let me demonstrate just in case that didn't happen for you. Let me erase this function. Call. Let me start typing the names more slowly s a wise. You can see it pops of this auto complete menu trying to help you out. So if you see what you want to type out already, you can simply hit enter because it's already highlighted. The function call I wanted to type out or if it's not this particular one. But you see it somewhere down here you can hit the up or down arrow keys on your keyboard to select it and then hit Enter. So we're going to select this one because that's what we're intending to call and it will complete that function call for you. All right, So now, before I demonstrate the function with the parameters, why don't we go ahead and add a comment here? Just call this one the basic function because we're going to have a couple of different things in here. This one's a function with a with parameters of Minnesota. All right, so let's write out our functions. Say hello to and then we're gonna open up our pair of round brackets. But this time inside there we are going to put a parameter. Now this parameter is going to dictate that when you call this function, say hello to you're gonna have to pass in some data. And this parameter basically dictates what sort of data you're supposed to pass it. So I'm gonna call my parameter name and then colon, followed by the type of data that I want to be passed ID. And there you go. That's one primer that need to be passed in space. Open up the pair of curly brackets in between. There were going to hit enter a couple of times where we're going to write our coat Now, in here, I wanna print out the name that gets passed in. Well, how do I access that data that gets passed in? Well, this parameter here actually has a parameter name and conveniently we called it name. So this is how we access that data that gets passed in by referencing this parameter name. So all I need to do is say print name like that. And down here, of course, nothing gets output until we call the function. Now, watch this. I'm going to start typing s a why and now ex code will show me their couple of different function calls I can make. This one was our basic function, and this one is our new one that includes a parameter. So I'm gonna go ahead and press the down key and then press enter, and it's going to basically auto complete that function. Um, and it's going to highlight the parameter that we need to specify in order to complete the function call. So I'm gonna pass in a string piece of data, and they're open up a pair of quotation marks and let's put in Tom. And this actually completes the function call, and you can see here down here, it says, prints out Tom, and this piece of text gets passed in to the function call through this parameter. And then this line of code basically just takes that parameter and prints it out into the console. Noticed that in here I have to specify that parameter name followed by colon and followed by the actual piece of data that I want passed in. Now what if I want to print out? Hello, Tom. Instead of just the name Well, I wanna show you something cool where you can actually insert a variable or parameter your parameters basically variable, you know, insert that variable into a string, your piece of text. So let's write a piece of text here that's a hello in space. And then in order to insert name dynamically into this piece of text, you do back slash open up a pair of rounded brackets like that, and in between those rounded brackets, you put the name of your variable. In our case, it would be just name. And so now you can see down here It says, Hello, space Tom, Don't worry about this. If you, you know, don't remember how to do that, we're going to actually use this again in a couple of lessons. Now I want to show you how you can specify a function that has more than one parameter. So wrap right up here we have name Colin String. If we wanted to specify a second parameter, all we need to do is just hit comma and space, and we're gonna add another parameter. This time I'm going to call it H Colon int me in data type. And so now Exco detects because we've changed it so that calling this function requires to data inputs. Now ex code notices that, Hey, we're not doing that here and that's an error. So I'm just going to erase this line of Code se now. I can actually just select it from this auto complete menu and hit Enter. You can see this structure kind of coincides with what's up here, right? Have name Colon. And then I have to specify the string data to passing, followed by a comma and then age, which is the second parameter name colon, followed by the actual into data that I want passed in. So let's pass in Tom and Oppressed Tab Last Meted Just jump straight to specifying the second parameter there and limits. Put 35. And of course, it's still say's Hello, Tom, because we haven't incorporated this second parameter. So in this statement here Hello name? Let's put a comma. You are I want to insert the age at this point Age space years old. Now what's output down here? Just you have a moment for ex voto process the new code. Hello, Tom. You're 35 years old and that's just based on what we type in here. You know, I can say 45 that's gonna turn into 45 years old so you can expand on this and you can do three parameters or four parameters. But I wouldn't go crazy with this. In the future, you're gonna learn about how you can actually collect pieces of data together and specify them in a single parameter. But for now, you know you're passing simple values around, and so if you need to pass in three or four or five or eight parameters and go ahead and do that One thing I do want to point out, though, is that in your function call you can actually make it so that you can omit thes parameter names here so I could call my function like this. Alright, Right now this is going to be in error, right? But let me show you how to make it so that you can omit thes parameter names and that kind of saves you some typing eso here up here you can specify underscore and in space right in front of that parameter name. Same with the second parameter underscore and in space. When you do that it's just erase dysfunction call cause this is now incorrect. I'm gonna use auto completely and say hello to now. You can see this entire thing is highlighted. If I specify my parameter, you can see now I don't need to put those labels in there. What you're actually doing with this underscore is your omitting the argument label for that parameter. But I'm not going to go into that now because I don't want to confuse you. If you do want to learn about that ah, linked to something in the description below and you can look into if you're curious but down the line, Once you learn more about Swift, you're going to learn about it Anyways, for now, all you need to know is that underscore space in front of your printer name allows you to omit it from the function Call like this. Now you know how to write functions which expect some sort of input toe work with another great use of functions is to take some data input, transform it, and then return that result Functions can do this by using the return key word in the function below. It takes an integer input and then it adds for to it, and then it gives it back to us. Notice in this function declaration that after the rounded brackets we have an arrow and then we have a data type into. This indicates the type of data that the function will give back when you call it. Let's go back to our playground and try it out. All right, So now let's create another section down here and let's create some space here so we can look at the middle of the screen and I'm going to call this function with return value. Okay, so let's type out our function that we demonstrated at 42 That's Capital T and open up a bracket. We're gonna type in X colon int. That's going to be the data that needs to be passed in an integer. And this time we're going to type dash, make sure you've got a space here dash greater than symbol and in space. And now we specify the type of the data that dysfunction will return. So I'm actually going to return in int data type. Let's open up a pair of curly brackets and let's create some space down here. So what I'm going to do here? I am going to create a variable. Let's say we call this the sum equals and we're going to take the primary that gets passed in, which is X, and I'm going to add four to it. So the variable some contains X Plus four. Now, since we specified that this function actually returns the value, we need to somehow get this some to be returned and we use a keyword called Return. That's exactly how it sounds. And we are going to return this some just like that. And in fact, if you forget the return key word But you have specified up here that this function returns , something explode isn't gonna like that. It's going to spit out an error, actually, and it's telling you that it's missing a return statement, so you're gonna have to return to some now. What happens with a function that returns of value? How do you call it, and how do you get that value that it returned? Well, let's first start by calling the function. So add four and auto complete pops up. Just gonna hit enter. Actually, I want to point out something special here. He can see here in this auto complete menu on this left column you can see into this tells you that it returns and in data type. Okay, hit, enter. And now we have to specify the data input. So let's put 10 in there so the actual function code will add for to it, and then it's going to return. 14. Where where did that 14 go? Well, we actually have to keep track of it by assigning it to a variable. So let's create a new variable. It's called Result Equals had 42 and then we pass intent. So this function is gonna take our 10 ad for To it it's going to spit out 14 and we are going to assign that data to our result variable. And now, down here, let's try printing out the contents of result, and we're going to see that it is 14. Now, you might ask me, Why do I have to use this return value? Why do I have to create a function that uses this return key word and I have to specify the data type that it returns. Can't I just simply refer to this variable some because doesn't it contain my X Plus four? Well, that brings me to my next topic. Variable scope. I want you to try down here to print out the variable some. You're going to get an error once X Code gets around to processing the code, and it's saying that use of unresolved I tend to fire some. Which basically means that it can't find this. Keyword can't find what some is. And the reason for that is because all of the code in between these two curly brackets you know the code that's inside this function is inside of its own scope. It's kind of like its own little bubble. So any data that you haven't hear, the variables that you declare and stuff like that you can access it from outside of this scope. So that's why, even though I've declared some in here this variable, I can't access it from outside of the function, I can access it from inside this function. No, because it's in the same scope so I can actually print out some right there, and that would be fine a soon as explode finishes processing it. So now we actually see to fourteens because the 1st 1 is from this statement printing it out and then the 2nd 14 is from printing out the result of calling up that function. But anyways, my point is that from inside the function you can reference that variable that you declare in there because when you declare that variable in here, it only exists in this scope. Within this function, you can't access it from outside that function, which would be not in this scope again, it helps to think of the code inside the function as it in its own little bubble. So that's why if you want to get the data out, you use the return key word right there. And you also have to specify up here that this function returns some sort of data. And in case it wasn't clear, it's actually each function has its own scope. So let me declare another function here. I'm just gonna call it function, See, from within this function, it's got its own scope. So I can't access some because that's in this functions little bubble and you see here the Exco doesn't know what some is. And if I declared a variable inside function. See, I wouldn't be able to access that from outside that function or from within another function either. So you can think of each function. The code inside of it is in its own little world. And what you do in there is kind of invisible to the outside. Unless you start returning the data. All right, so let's erase this test function here. And I guess one last thing before we move on is this yellow line is called the Warning and Ex Code is just trying to optimize things here. It's saying that some after we assigned something to it, it was never changed again. So why don't we use a constant instead of a variable so we can actually use let instead of our which is something you learned about a couple of lessons ago? All right. Today you learned about how you can organize your code into functions you learned about function prompters, where you can pass data into functions for them toe work with. We also covered return values where functions can return data back to us. And finally we covered variable scope, where the variables and data inside of a function only exist within the scope of that function. Believe it or not, there's still more to functions that you can learn about. But what we've covered in this lesson is more than sufficient for what you need right now. If you do want to learn more about functions right now at some links into the description two additional videos that I have, as well as the official Apple documentation for functions. And don't forget to download my handy cheat sheet as well as the lesson worksheet so that you can practice working with functions somewhere. If you like this video, please subscribe to my channel by hitting that subscribe button below. And if you don't want to miss a video, make sure you click on that bell icon as well. Now, want to turn it over to you? Were two lessons in two swift programming with one more left to go? Do you feel like you've got a grip on it? So far, Yes or no? Let me know by leaving a comment below. And lastly, to get the worksheet for this lesson and the cheat sheet. If you haven't downloaded in the previous lesson already, just follow the girl in the description below or on the screen right now. Thanks for watching. And I'll see you guys in the next lesson. 7. How to Make an App for Beginners Lesson 7: Hi. Welcome to lessen seven. In the previous lessons, you learned about some basic swift code and also how to organize that code into execute herbal blocks called Function. Well, in this lesson, you're gonna learn about how to organize a group those functions together into what's known as a class. Before we go on, I just want to say something. Learning something new is heart. Seriously, I know firsthand because I failed that learning. I was programming myself when I first tried for coming this far. Give yourself a pat on the back, especially if you've never coded before. I know you might be wondering variables. Constance functions, classes. Why the heck do I need to know all of this stuff? Well, by the end of this lesson, and when you start to watch the next, all the pieces will fall into place, we're going to go back to the Exco project. I'll point out all the little pieces to you that we've been learning about in the past three lessons, and you'll have a eureka moment. So I want you to pay extra attention to this video because it's the last lesson that we're going to do on swift before we go back to our ex code project and finish building that war card game map. All right, here we go. All right, So we're starting with this playground, and I've got two functions here. You should be able to read this swift code and understand what they do. Here's the thing. These functions don't actually do anything, but you can read the function names. One function is supposed to initiate cruising, and the other function is supposed to initiate the rocket thrusters. Now, for instance, inside this function, we're supposed to write the code that will initiate the rocket thrusters essentially to carry out the task set out by this function and likewise in here, we're supposed to write the lines of code that will initiate cruising now, all of the lines of code that we right in here they all contribute, and they all relate to this task. Well, we can go on to say that these two functions have related responsibilities that serve a higher purpose. For instance, we can group these two functions together into a single class. Let's see how we can declare a nuke loss. I'm going to declare it up here create some space. We start with the class keyword, and then we're going to put the name of the class and I'm gonna call the name spaceship and then you hit space and then you open up a pair of curly brackets and inside the pair of curly rockets, let's create some space because all of the functions that are related to this class are going to go in there. So I'm going to highlight these two functions like this. I'm going to press Command X on my keyboard to cut it, and then I'm going to put my cursor inside the curly brackets of my class, and I'm going to press command V to paste these two functions inside my class. When the function is inside of a class like this, it's no longer call the function. It's actually called a method of that class. I know it's kind of confusing. Check out these diagrams. First we had functions, and then we put them inside of a class, and now they're called methods. I want to talk about variable scope for a second. In the last lesson, you learned that declaring a variable inside of a function, it only exists within that scope. So, for instance, we declared a variable called name in function A. We cannot access that name variable in function beat. Because function B has its own scope. Same goes for the reverse. If we declare a very well in front can be, we can't access it within function. Eight. Because that very well Onley exists within functions. Bees scope, not get this. The class actually has its own scope. You can actually declare variable inside the class that sits outside of any function. This variable exists inside the entire scope of the class. Since function a and function be are also inside the scope of that class. They can both access that variable when you declare a variable inside the class. But it's outside of any functions. It's called a property of that class again. I know it's confusing because we're kind of changing the name on you when it's inside of the class, but that's what it's called. So let's see this in action. I'm going to declare a property up here that is inside my spaceship clause. But outside of any functions and I'm going to declare it, I'm gonna call it fuel level, and I'm going to go ahead and set that to 100. For instance, inside of the thrust function, we will need to access the fuel level property to determine if we can perform the thrust. So let's just check if we can access that guy like that and let's wait for X code to do it . Oh, actually, it's not going to output this because we need to call the thrust function. It's not going to run this code until this function gets called. However, we know that we can access the fuel level property from inside the thrust function. Now let us try something else here. If I declared a variable inside crews, let's just call it Test equals test from within the thrust function. I can't access that test variable. You're going to see that it throws an error here. So this proofs that the scope of the functions remain the same right each block of code inside of the function is in. It's own little bubble, right? It's and it's only a scope. But however, when you declare something outside of the functions, but inside the class that is available for the entire scope of the Kloss. Right? So even in here in cruise, I can access the fuel level property. Let's get rid of that print. Yeah, So there are no airs with the way it is right now. Inside both functions, I can access fuel level because fuel level exists for the entire scope of the class. Let's go ahead and erase these prints statements. All right, now we're gonna take a giant leap and I'll explain to you how classes are used. It's going to require a little bit of abstract thinking. I just want to say that in my four years of teaching IOS programming, this is one of the hardest concepts, if not the hardest concept for beginners who have never programmed before toe. Understand. However, once you get this concept, you'll have passed the major hump that so many beginners have given up that I'm done talking. Let's do this. So let's use our analogies here. So we have some data and we have some variables and constants as sticky tabs. Now we have functions that encapsulate these pieces of coat. Let's say that functions are like file folders. Now we have classes that contain a bunch of functions and variables. And let's say that the classes like a file box that contains the file folders and the pages . Well, at the end of the day, what we have is just a file box full of instructions. It doesn't actually do anything. Some people think of the class like a recipe. Some people say to think of it like a blueprint. What's the common thing here? They all need someone or something to turn this set of instructions into action. Someone takes the recipe and turns it into a cake. Someone takes the blueprints and builds a spaceship. This spaceship will work exactly like we've designed it to. It can thrust, and it can cruise because we gave it functions to do so. But understand that the class itself doesn't trust our crews. It's the actual object that gets created from the costs that will thrust their crews. Furthermore, once you have a blueprint, you can make multiple spaceships. Each of them will have its own fuel level and ability to thrust their cruise. The blueprint is called the class, and the objects that are created are called objects or instances of the spaceship Kloss. All right, so who is that person that will take that class and turn it into an object? Well, that's the device in your hand. It's like a mini computer. You write your instructions, and ex Code X cold will turn it into a format that can be understood by your device, and your device carries out those instructions. Here's the tricky part. You need to write instructions to tell the computer to take your classes and turn them into objects. And furthermore, you need to write instructions to tell the computer how you wanted to use those objects. For example, you're right instructions, like when the user taps on the lift off button, create an object from the spaceship Kloss, call the thrust function of that object and then called a cruise function of that object. That could be an app right there. Let's go back to our playground and see how we can write instructions like this. So here we have our spaceship class. That's this whole thing right there, and it's got a property called fuel level, and it's called two functions right here. So in order to take this spaceship class and turn it into a spaceship object, this is what you do. You call the class by its name like that, and then you put in those two round brackets and that statement will return a spaceship object to you now, just like a function returns of value to you. We need to assign this new object to a variable so we can keep track of it. So let's create. Maybe we can use a constant this time. Let's create a constant called my ship and then equal. And this line right here creates a new spaceship object, and we're going to assign that object to the my ship Constant. Now, remember, back in the first swift basics lesson, I told you that variables and constants can only be a sign data of a single type. Watch this. I can't do something like my ship equals 10 now, right? Because 10 is an integer. And what did I assigned to it? First I assigned to it a spaceship object. Your class is actually also a data type now. So where I could do something like this? Navarre, my int is data type of type int. You know, in a sign a 10 here I am specifying that this variable will contain this data type. I could do this. This variable will contain objects or this type. So that's why I cannot assign My ship equals 10. Because once I create a spaceship object and assign it to my ship, it can only be assigned spaceship type of objects. And don't forget that this is a constant, so I can't even reassign anything to it. But if it were a variable, I could assign a new spaceship object to it. I can create another one and then assign it to my ship. But I cannot start assigning other data types to it. All right now, the next order of business is how do I take that object that this variable is pointing to and then access the fuel level property or call the cruise it or thrust function? Let me show you how to do that. So we're gonna type in my ship. That's the variable, right? And it's pointing to our spaceship object. And then I'm going to use what's called dot notation. So I just got a keyboard, and then it's gonna show me all of the available properties and functions that I could access and call so For instance, if I chose thrust like this, I would actually be calling the thrust function of this spaceship object. If I did this, my ship dot crews, I would be calling the cruise function of this spaceship object. And if I did this, I can print it. I would be accessing the fuel level property of this spaceship object. Now I can actually also said it so I can do dot Fuel level equals 10. And then when I do that, the new fuel level will be 10 and you can see that it prints it out. Here. It's gonna be 10. So using dot notation you can access the methods and properties of that object. I like to think that coding an app is like writing a script for a movie. The movie script is your APP code. The character roles are the classes you designed, but the character roles themselves. They don't do anything. Those roles need to be filled by physical actors and actresses, just like we need to turn classes in tow objects. Then the actors and actresses follow the script to perform your movie, just like how your objects work together to make your app function. All right, so all of that was pretty abstract. But in the next lesson, we're gonna put all of it into practice. Let's recap what we've learned. You've learned about classes and how they contain methods and properties. You learn that classes don't actually do anything themselves. They need to be turned into objects first. These objects are also called instances of that class. You learn how to create an instance of the class he learned about the dot notation and how it can be used to access the methods of properties of a class. You also learn about the variable scope within the class itself. If you need to re watch this video and ask any questions you might have in the comment section below, I also have a worksheet for you to practice what you've learned today. In the next lesson, you're going to start bringing your upto life with your newly minted swift skills. If you're excited like I am, type, I'm pumped in the comment section below. If you like this video, please subscribe to my channel by hitting the subscribe button below. And if you don't wanna miss a video, make sure you click that Bell icon as well. Remember, you can download this lessons worksheet from the euro that's on the screen or in the link in the description below. 8. How to Make an App for Beginners Lesson 8: Hi. Welcome the lesson eight. You're almost there. Only three lessons to go in this video. I'll show you how those swift basics you've been learning about apply and relate to our ex code project. By the end of this video, you'll learn how to write code in the view controller to manage and access the elements in the store board. I'm also going to show you what to do when your app crashes, which happens more often than you think. All right, let's do it right here. We have the Exco project that we started back in lesson for while we're going to continue working on it right now, let's jump into view controller dot Swift, where I'm gonna point out a couple of things to you based on what we've covered in the previous couple of swift lessons. Starting from line nine, we've got import. You like it now you definitely know what that is because you've seen it in the playground you like. It is a library of code that's provided by Apple in the import statement is basically saying to use it now online 11. We've got class view controller. That is a class your view controller is a class, and you can see this is the starting curly bracket for it. And this is the ending curly bracket. So all of this stuff inside is part of the class. There are some things that I'm gonna Kloss over right now because you will learn about it in the future. And I don't want to confuse you now. And one of those things is this This colon you, I view controller part. It's something called subclass ing, which allows you to build your class off of a pre existing class rather than starting from scratch. But we're not gonna talk about sub crossing in this lesson. Just kind of keep in mind that that's what this part of the code does basically view controllers. That class that builds off of the U I view controller class and down here you have some functions. Now there is an override keyword before the f. U N C. But ignore that for now. It has to do with sub crossing. And so here's your function. It's called View did load and then you've got an opening curly bracket and the closing one and then the code inside here is the code for your function. Super is another key word that has to do with sub classing. So we're gonna ignore that for now. And same thing goes for this function. Did receive a memory warning. Okay, so this is another function. Isn't this cool? This was stuff that you were learning about in the past couple of swift lessons. And now we can relate it directly back to our Exco project. So your view controller is a class that means for it to do anything, the view controller has to be turned into an object. Right? So let's go into the main dot storyboard and I'll show you something else that will blow your mind. Look at all of these elements that we added to the view Are those objects are those classes ? What are those things that we are adding and customizing to this view? Believe it or not, we're actually creating objects when we drag these elements onto the view while you might ask, objects come from classes, right? What sorts of classes do these elements come from? Well, all of these elements in the object library down here in the lower right hand corner. These are actually classes in you. I kit stuff like this label this button, you know, text fields and stuff like that. These are all classes. And so now this name object library is a little more significant to you, right? That's right. You like It is actually a library of classes that apple provides. And it contains useful crosses such as buttons, labels, image views, all the stuff that you've been using and a lot more. For instance, by dragging and dropping this you I image you here. I'm actually creating an object of this clause. Click it and check out the stuff in the inspector pain. All of these things that I can configure, they are properties of the U. Y. Image view class. You see, the interface builder here is simply a visual way to make it easier for us. Everything we're doing here in the storyboard we can actually do through code. In fact, we can completely omit using the storyboard and instead write code inside of the view controller here to create all of the objects, set their properties and then place them into the view. However, that is definitely more of an intermediate to advanced thing. that you'll eventually get to. For beginners who are just starting out, I highly recommend using the storyboard. So these elements in the view here are objects. How can I get access to them from the view controller? That's where I be Outlet properties come into play. Let me show you how to expose these elements, from the storyboard to the view controller as an I B outlet property. Now there are multiple ways of doing it. But the easiest way is just to select the view controller here in the document outlined to make sure that you have it highlighted and then go over here in the upper right hand corner and click on this little icon that looks like to inter joining circles. This is what's known as the assistant editor, and it basically kind of splits your screen into two. So the left hand side you can view your story board, and on the right hand side you can view the code. Now I want you to go over here to this little breadcrumb navigation and make sure that where my mouse is hovering, yours also say's automatic. If it doesn't just go ahead, click it and then scroll down automatic here. Um, you should see view control about Swift if you've got it highlighted here because basically , the automatic setting will show what's relevant on the right hand side according to what you select on the left hand side. So if you've got the view controller selected, this automatic setting should be showing you view control about Swift. The reason is because this view controller here, this note in the document outline is actually the visual representation are you could call it the object of this view controller clause here. Now, what I want you to do is on the right hand side in the view controller right underneath class, like inside the class. But above the view did load function. Just press enter a couple of times on your keyboard to create a little bit of space and make sure you don't do it here. But you do it here right inside the class, right after that starting curly bracket for the class. So I hear create some space and then on the left hand side it in the document outline. Click on this first card. This is the left card right here. And you can see that being highlighted. If I click this one, you're going to see the right card being highlighted. So go ahead. Let's click the left one. We'll start with that. And now hold down control on your keyboard. And while still holding that down, click this image view in the document, Ally, and start moving your mouse and dragging it. You're going to see a blue line. Follow your mouse as long as you're holding out that control button and you haven't let go of the male. See it? So drag it over here on the right hand side where we created that space and you should see that little note saying insert outlet or outlet collection. And now you can let go of your mouse and you can let go of control and out pops this little menu here and you can see that the connection type is set to outlet and the object is view controller and we're going to name our IBL. Let property now you can ignore the rest here. Well, the type should be you image. You shouldn't need to change this. If you selected the right element here, you should automatically have this type as you image You. Okay, so here, I'm gonna call it the left Image. You like that? And I'm going to click this connect button. So there we have it. It automatically generates this property for us. Now, this property is special in that it has this special keyword. Here I be outlet, and you can see that bar keyword there. And maybe I should just minimize that pain. So we have a little more space and ah, you can see this is the name that I gave the property. And this is the data type, all right, that the property is going to hold there a couple of things that were going to ignore right now I don't explain it down the road that had is this week in this exclamation mark. You don't have to worry about that for now. But what you should know is that what we've just done is we've connected this element here . This left carve you, um, to this ibl that property here so that this property will actually point to this you image , you object. And since we have a reference to that object, we can use dot notation like you learn in the previous lesson to access all of the methods and properties of that You I image view, object, right? So if we wanted to change that image, we could call functions on it. We could, you know, set its properties. And we can do that. I'll show you that in a second. But right now I just want to go over some common mistakes. We want a double check that we've connected it. Right. So what I want you to do is go back here on the left hand side, the storyboard, and then right click your left image. You can see that it even changed its name here. You can either right. Click it in the document outline here or right, click it in the storyboard. Either way, it should pop up this little context menu for that element. And under a referencing outlets, you should see the property name, which is left image. You followed by view controller. Just This is the object which contains that property. This shows you that this element is connected as an l let property to this class right here . And it also gives you this little X button for you. to break that connection. If you don't see this, that means that you might have connected the wrong element. So let me show you how to fix that. What you're going to do first is you need to find out which element you accidentally connected. So what I would do is I would go right click this guy and then check, you know, Right, Right. Click a couple of elements which you think you might have dried. It could be potentially this card stack view. Right, Cause if you're clicking this, you might have accidentally selected the stack you instead, you know, So sometimes it's just easier to connect it from the document outlined rather than clicking from here. Anyways, after you find out the one that you accidentally connected go ahead, click X to break the connection and then go back to the view controller here and then delete that IBL let property and now you can start from scratch again. Essentially. So again, let's do it one more time for practice on the left hand side Here I have selected the left you image. You hold down control on the keyboard, click and drag over here. Let go And then I can now name my outlet left image view, and I'm going to click Connect now. Another mistake that sometimes happens is that you made a typo while you named that outlet property. So some people might just go ahead and correct it. Let's say they forgot to capitalize something, and they might just change it here. I'm just going toe. Maybe I'm gonna add a letter like that. Let's pretend I am correcting a typo. But if you do this, things will break. Let's go back to the left hand side and right click that you are image view. You can see here that the referencing outlet it's connected to left image view, right? But I've just changed that proper name to left image views. So when you run your app, it's going to be looking for that property to assign the object to. It's not gonna find that property and it's gonna break. So if you made a typo, don't just erase it or corrected here, you will actually have to just go ahead and delete it and then go back here on the left hand side, right click click this X to break the connection first and then do it over again. So hold that control. Click and drag it here. Left image, view, Connect. All right, let's connect the other image view. So I'm going to click on this one. Hold down, control, click and drag it here. Make sure you don't drag it into this existing outlet you can see here. It highlights the outlet and blue. You don't want to do that. Otherwise you're gonna have connected to outlets to the same property end. Bad things can happen. So just make some space if you need to and connect it down here. I'm going to call this the right image view just like that. And you'll actually notice that this gray circle this filled in its if you hover over it tells you what it's connected to see, and when it's filled in, that means it's connected. Let me just show you here. I'm gonna break the connection in the story board here and now you can actually see that It his turned, um hollow. And that means that this property isn't connected to anything. Now I find that this is not the most reliable way to tell because sometimes when you just open your extra project. It doesn't really update thesis little circles. So there are times when I know they are connected, but they still show hollow, so I wouldn't put too much emphasis on using this. But anyways, here's another way to connect your outlet. If you already have the property here, right click here. New referencing outlet. You can this little circle here, you can actually click this plus icon and you can strike it to the view control or node here, let go, and you can actually select the property. Make sure you select their correct one, though, right? Image you. And now you can see that this is a filled in and when you hover over it, it should highlight the right image view. But, you know, I wouldn't attempt to do it the way I just showed you. If you're not comfortable with things yet, just connect it. Using the control, click and drag method. That's the easiest way for beginners to learn. I feel so now and go back down here under the stack view. We are also going to connect the labels so there to labels that we want to connect this zero under player. So hold down, control, click and drag down here. I'm going to call this the left score label. And for this one click drag hold down control as well. I forgot to mention right score. Now, before I connect this one, I'm going to purposely make a type of Let's call it right Score labels. That and when I connected, I've noticed. Oh, man, I made a typo. So I am going to actually just correct it like this. You can actually see. When I did that, this became disconnected. And if I right click my label here, it's still connected to write score labels. But I don't have that property, and I'm going to run it for you right now and show you what happens. So it's going to crash. And because we have assistant editor open, both the pains changed to here. But it's gonna highlight this red line here, which doesn't really tell us much. What you want to do actually, is go down to the lower right hand corner into this console area where there's a lot of gibberish. But this is essentially where you can find the detailed error message. The last line tells you, terminating with uncaught exception of type Ennis exception. That's basically just telling you that the app crashed. What you should do issue should scroll all the way up only up to the top usually, and you're going to find actually a more detailed error message, more plain English that you can read to stuff here blah, blah, blah, blah, blah. And then down here, this class is not key value coding compliant for the key right score labels. Now this lion might not make any sense to you. This class is not key value coding complaint for the key. But, however, over time when you see the same message over and over again, you kind of learn to understand what the cause of that is. And in this case, it's because it's trying to look for right score labels. But however, we don't have that property, you know, this is a heck of a lot more easy to understand. Then you know, reading any of this and this is just a generic message, which doesn't tell you what's wrong. So in this consul area, you scroll all the way up, and then you read what the error messages So let's go back to the story board and let's fix this error and resolve this crash. So we're gonna click on the story board the left hand side changes of our assistant editor . And on the right hand side, you should see the View controller. If you don't click on the View controller up here, make sure that this side is set to automatic like that end. We're gonna fix this right score label. So this one, this is connected to an outlet that doesn't exist anymore. So go ahead and click X, and then we are going to take this new referencing outlet and connected to a pre existing one. And that's right score label. And so now this guy's filled in. If I hover over this circle, you'll see that this right score labels highlighted so we know which one it's connected to . OK, so now we've got four ibl let properties, and they are connected to thes objects that are on our storyboard. And since thes properties are outside of any functions and they're inside our class, we can actually access them from inside any function. So let's just do a little test here in viewed it load, for example, I can say left image view, right, That's our property name up here dot And then these are all of the properties and functions that are available for a U I image view object. And I can access this property called image, right. And then I can go ahead And what I can set that and change the image. We're not gonna do that right now. We're going to do this in the next lesson. But for now, I just wanted to show you that we can access this image view here, and we can access the image property using dot notation like that. So let's go ahead and delete that. You know, the image property that I just showed you. Let's click this button to go back to the single view editor and let's click this button to get our inspector pain back. If I click this image you see right here in the inspector pain, this image dropped down here. Well, that is the image property that I just accessed in the view controller. Right? So if I set that with code, that's the equivalent of setting it here to one of these image assets, The Jews card 14. She's whatever. And simply by connecting this element as an I B outlet property to the view controller, the view controller now can write code to manage this element in the surfboard. Okay, so now the next order of business is how do we run some specific block of code or a function when the deal button is tapped here? Because essentially, when this button is tapped, we want to run code that will change these images, right? Well, we can use something called an I B action function. So very similar toe I be outlet property. But this one is a function. So let me show you how to connect that. We're going to go back to assistant editor. So hit view controller on the right hand side should be set to automatic view controller and we were connecting outlets up here because that's where properties go inside the class . But now, for a function, we only have to put it inside of the class. Right? So this last curly bracket, this one is the ending curly bracket for the cloth. So we want to put our function inside of the class, right? So you have to make sure that you create some space before this lost curly bracket. All right, this curly bracket is for this function, and so right here would be a good place to put the function to run. When the deal button is tapped, we don't have to write the function. All we have to do is go over here on the left hand side and click on the button element from the document outlined. Hold down control on your keyboard, click and drag all the way here and then let go of your mouse button and out pops this little guy. But before you connect it, change the connection type toe. I be action instead, okay? And the object is few. Controller, The name I'm gonna call it Deal tapped, and the you can leave the rest of it as is, the event is touch up inside. Now touch up inside is basically the event. When the user taps on the button and lets go of the finger while still within the button, right, this is essentially topping of the button. There's also other ones. If you click it, there's like touch, drag outside touch drag inside this touch up outside, which is actually when the user taps on the button but slides their finger off the button and then let's go. So that doesn't count as a tap. And we don't want that. This is the one we want touch up inside, Let's click Connect and now you can see that it actually connected a function CF UNC and the function name is deal tact and inside, it's got a parameter. You don't have to worry about what that is, but it's essentially the button that triggered that event. So in between these two curly brackets, that's where we write the code for our function. Hit, enter a couple of times and in here I'm just going to print out a statement so we can test it out. It's a deal like that and in the next lesson will actually put some real code in there. But this looks like an IBM let property, except that the function you can see this key word. Here I be action and you can see this if I hover over this, it goes over the button now, in terms of troubleshooting similar toe ibl that properties if you accidentally made a typo or something like that, or you might have connected the wrong element. Simply. Go ahead. Let's delete this. I be action altogether. Let's right. Click that button and you're going to see all of these events under touch up inside. It's connected to the view controller Deal tapped. But I just erase that function so it doesn't exist. Click this X to break that connection and let's go ahead and do it again. So hold down control dragged the button, Let go there and I am actually going to Oh, don't forget to change the connection type action. I oftentimes forget to do that. And let's call it deal. I'm gonna accidentally miss Type it again. So deal taps, Okay, I'm gonna connect it and then realize Oh, no, I made a typo, and then I go ahead and, uh, corrected here, but notice now it's not connected to anything, right? The button here it's connected to deal taps, which I just got rid of. Now I only have deal tapped. So if you make a mistake like that, break the connection and you can actually touch up inside. Move to the right And this This is a little prone to error, actually, because you might be over over the wrong circle. So if you just move your mouse for here, click and drag it to the view controller here and you can select an I B action function, and then you can see it connected, right? Or, if you don't want to do it that way, just, you know, delete this, break the connection and then use the control drag method and reconnected. Oh, but anyways, let's test out this function here. So let's use print. Let's use deal. That and let's run are up again. Now, if you don't see this and it crashes or something like that, then you know you've probably made a mistake connecting your outlets. So go through the troubleshooting steps that we've gone through in this video. Now clicking the deal button, we should see something pop up in the console so you can see the each time we hit deal. This function is being fired, and it's printing deal into the console. All right, so in this lesson, you learn about I'd be outlet properties and how they can be used to expose the elements in the store board to the view controller. You also learned about I'd be action functions which let you write code in response to events from the storyboard. You learn how to correct any mistakes you might have made when connecting ibl let properties or I'd be action functions. And finally, when you're out crashes, you learned about how to find that detailed air message, which is so crucial to understanding why you're apus crashing. There's no worksheet for this lesson, but I highly recommend that you replicate what we've done in this video in your own Exco project. And if your app is crashing, remember to go through those steps that we cover them. This video. If you like this video, please subscribe to my channel by hitting the subscribe button below. If you don't wanna miss a single video, make sure you click that Bell icon as well. Thanks for watching. I'll see you guys in the next lesson 9. How to Make an App for Beginners Lesson 9: Hi. Welcome the lesson nine. This is a fun lesson today in this video. We're going to make the card images change as you tap on the deal button. Let's jump right in. So here we've got our Exco project. The first thing we're going to do is try to change these images through code. Click on this, you'll I image view. And then in the inspector panel, you can see here this is the image property and in the drop down, we can simply select Let's say car 10 right for that one and has click on this guy. And let's change that to card 13. So we've got a 10 and a King. This one's got its image property set to car 13 and this one here, the left one has got its image. Property said to car 10. Now let's set them back to the back because we're going to try to do what we just did through code. Let's jump into our view controller and let's go down here to the deal topped function. This fires when the deal. But in his stepped, we're gonna erase that line that printed out the deal text in the console. And so we've got an empty function. And let's just scroll up a little bit to remind ourselves that the left image view is connected to this property In the right image, view is connected to this property. All right, you can see that this property is type of your image. You and this property is also a type of your image. You Let's go down here and let's type left image view in order to access that object that we have in the storyboard. And let us use dot notation to access the image property. Now you can see that on the left hand side here, it say's you I image. Don't mistake this for a u I image view, which is what we have here. Au I image represents an image okay, in the U. S. Image view, which is what we have, you know, up here, the left image, you in the right image view, these are used to display you images. So going back here, let me show you that auto complete menu again. Delete that and hit dot And then the top image you can see here the description for this property say's the image displayed in the image view. So what we have to do is actually we have to assign a u I image object to this image property because this left hand side tells us what data type that this property expects. So let's go ahead and choose that and we are going to hit equals. And now we are going to create a new U I image object. Now you Why? Image is also a class from the You like it. We're gonna do this. You I and make sure you're typing, you know, capital, U capital I and the capital I And then all lower case is M A G. It's actually, and it makes a difference in matters. Same thing for here. This image property is a lower case, I So when you're following me typing out this code, you kind of have to type it out letter for letter. And also another mistake I've seen before is make sure you have spaces before and after your equal science. Something like that is not the same thing. All right, so go like that. And then ah, in order to create a new object of that class, remember, you use the rounded brackets like that. So here we are, creating a U I image object, and we are assigning it to the image property of the left image view. So it's going to display this you image. But you know what? This you image is empty it. We haven't specified what image we want to show from the asset library. Right in our asset library. We've got all of these great card images. So back in the view controller here, the U I image class actually has a way for us to when we create that object passing that image that we want the U image to represent as a data input. So let me show you what that is. I'm gonna open up the left bracket. You can see here. You could just create a u I image object with a set of brackets like that. Or you can choose one of these functions that lets you pass in a data input and which returns au image object representing that data input. Let's scroll all the way down to this one here named, and you get to pass in a string representing the asset name that you want this your image to represent? So go ahead and select that and then gonna passing a string. Right, Let's put card 10. Now, This actually also has to be exact if you go into your asset library. If this say's card 10 with a lower case C with no space in between the D and the one you know, word for word letter for letter character for character, you have to use that exact same asset name here. Otherwise it's not going to find it. So this line, basically you're accessing the left image view on the storyboard. You are accessing its image property. And then here you are creating a U I image object, using a special function that lets you specify the asset name that you want, that you are image to represent. And then we are assigning that object to the image property, and that's actually going to do the trick. So if we run our project right now, you are not going to see it because we haven't tapped on the deal button yet. But as soon as we tap on this deal button, it's going to run. This deal tapped function, and it's going to change. See if this looks like an empty space for you. That means you might have either made a typo in the asset name here. Or you might not actually even have the asset in your ass. A library here. So double check those two things. Now we're going to also change the right card, so go ahead and do right image you dot image equals ur image. Open that up. You could use auto complete go all the way down named like that, and then we'll pass in card 13. And let's press command are to run the project. Or you can just tap on that little play up icon up there and let's stop on the deal button and then you're going to see that happen. If I top on it again, nothing's going to change because our code just sets thes two image, these two, these two specific images. Now the next thing we have to worry about is how do we randomize it when we talk on this deal button? Well, in order to do that, we're gonna have to learn how to generate some random numbers. So let's go down here and let's generate a random number. We're going to store it into a constant Let's say left random number equals and there's a special function that we use. It's called Arc for random. And as you start typing a R. C, it should actually pop up and you're not going to use arc for random. You're going to scroll down a little bit. You're gonna use arc for random underscore uniform. It's gonna let you specify an upper bound for you to randomize on. And so we have cards number. Let's go back to our asset library here. Cards number two all the way up to 14. However, it's weaken Onley specify an upper limit for that arc for random underscore uniform function. So that function is actually going to randomize an integer from zero all the way up to the limit that you specify minus one, meaning that if you pass in an upper limit of 15 it's gonna randomize a number from 0 to 14 . And if we get zero or one, we don't have cards. Zero toe one, and we only have starting from two s. Oh, I want to randomize from 0 to 12 and then add to to the result, which is going to give us the same thing. So in order to randomize all the way up to 12 we have to pass in an upper limit of 13 because that's how dysfunction works here. Now, when you specify an upper bound, let's say we put in 13 it's going to go from 0 to 12 and then what we're going to do is we're gonna add to to that result, um, and this is going to give us 2 to 14 which is exactly what we have in terms of the card names. And now I think you're getting an idea of how we're going to do this random ization. So what I'm going to do is actually randomized to numbers. So let right. Random number equals art for random uniform, and we are actually going to do the same thing for the right side. We just want a different random number, and we're going to print this out. So let's try it out. Print left. Random number is, and then remember, we learned how to substitute variables into strings backslash a pair of rounded brackets, and then we put the variable name so left random number And then after we randomize the right one, let's also print that out, right? Random number is Make sure you put right random number this time, all right. And now let's press command are and rerun are up, all right. And now we're going to click the deal button and we should see the random numbers printed out in the console. Right? So we've got nine and 11 two and five, nine and 14 and ah, 13 and 11 and can keep going. And I just want to make sure that we don't see any zero ones or anything beyond 14 because we don't have those cards, all right, so we can generate random numbers just like that. And now, going back to the X Code project. Here's a neat trick if you want to stop a line of code from running, but you're not sure if you might need it soon, you can actually just put too forward slashes and treated as a comment just like that. And that line of code is now treated as a note or remark, so it's not going to be run its code, and then later, when you need it, you can just erase those two Ford Slash is like that, and then you know you still have it, but I want to warn you against doing this too much because it can get pretty messy if you just leave. Commented out code everywhere. So only use this in a very temporary sense because not only can you comment out a line like this, but you can actually comment out a whole chunk of code or a section of code. If you do forward slash star, you can see how everything turns green beneath it and where you want it to end. You go star forward, slash like that. So everything in between these two symbols is going to be treated as a comment. So that's how you comment out entire chunks of code. Uh, let's delete that. All right, so now I think you can see how we are going to combine this random number with setting the image right. We actually just did it up here. We're gonna use variable substitution. So instead of car 10 let's erase that slash and then open up a pair of brackets and then here put left random number and then down here instead of 13. Let's erase that slash. Open up a pair of rounded brackets and put the right one, all right. And now we can actually just run our project press commander, and you can see that the random numbers are being basically combined with card to generate our asset name. So that's why the cards are named as they are here like this. Now, if you're clicking through these cards and some of the times you see an empty card or blank card, that probably means that one of your assets might be named incorrectly because the reason why it would be blank is because I can't find that asset name. In this lesson, you learn how to change the image of a U. S image view through code. He learned how to randomized numbers and insert variables into strings. I can't stop tapping the deal button in the next lesson. You're going to learn how to update the labels and count score. If you like this video, please subscribe to my channel by hitting the subscribe button below. And if you don't want to miss a single video, make sure you tap on that bell icon as well. Thanks for watching, and I'll see you guys in the next lesson. 10. How to Make an App for Beginners Lesson 10: Hi. Welcome the lesson 10. By the end of this video, you will have completed the War card game project. All that's left to do is to count, score and update the labels. In order to do that, though, we need to write swift code that can compare to numbers and then execute a different branch of coat, depending on the outcome. In other words, you're going to be writing swift code that can make its own decisions that stuff one. If you want to build a Terminator. All right, let's get this show on the road. So here I've got a playground, and the only thing I have right now is a constant called X, and I've said it to equal to 10. And now I'm going to show you how to write what's called an if statement in this. If state lets us test conditions and if the condition that were testing is true, then we can choose to run some code. And this is how we are going to actually compare the two numbers in our war card game project when we randomize those two numbers. So let me show you how to write this. If statement we start off with the keyword if and then we do space, and then we write our condition or expression here, and in this case, I'm gonna test. This condition is x greater than 14. And if that is true that I want to run the following code, We open up a coat block with a pair of curly brackets and inside here, let's just print Hello. So I'm just gonna put a comment here. This code will run if X is greater than 14 since X is actually 10. And this is not true. It's not gonna run this statement here. It's not gonna run any of the code in here. I can put lots of code statements in here if I wanted to. Alice, change X to 15. In this case, this becomes true. And then it's going to run the code inside the if statement, and therefore we see this hello? Statement down here. Now, the cool thing is that I can actually expand my if statement into multiple branches I contest. Many things have all wanted to. And the way we do that is this first test we use. If the second test we use else space if and then I contest Another condition, I can say is X less than 10 right? If that's the case, then let's print. I don't know. Let's just print a and I can go on and I contest something else his ex Alice do equal to and open up another code block of that is true. Now, here's the interesting thing I want to show you. If X is equal to 12 I don't use the single equal sign. I use a double equal sign and this is to test equality. Why is this the case? Well, because the single equal sign is used for assignment. You learned this back in the first swift lesson where we talked about variables and constants. This equal sign is to use to sign this data on the right hand side to the variable or to the constant. So if I used a single equal sign here, X code will actually think we are assigning this to that when we actually want to compare. So you used a double equal sign to test for equality. All right, so in this case, I mean, I just print be. So far, we've said that you contest a single condition and then you contest other conditions after that. And there is actually a last part to the if statement, which is the else keyword. And there's no if, in this case this is kind of like the last resort. If none of these conditions up here are true, then thistles kind of like your catch all. Let's open up a code block and let's just print see in here. So this entire thing is your if statement, let's talk about how this code is going to be run. So when it comes here, it's going to test. The statement is X greater than 14 and if it is, it's going to come into this. This is called a branch of the if statement, and it's going to execute this line, and it's going to skip everything else because in the entire if statement, it's only going to choose one branch to go into so in here. This is true, so it comes into this branch and it's going to skip the rest. How about if we change X two nine now A. Is printed. So what's happening here? Well, it's gonna test this condition first and that's false. So then it's going to test the next one, and in this case it's true. So then it's gonna come into here and it's gonna skip the rest. Now let's change extra 12 and you kind of get the idea ready to test this one False will test the next one. That's false. Then I'll test the next one and this is true. So that's gonna come in here and it's gonna skip this guy now if I just made ah, see 13 would be, I guess, the sweet spot here and we get see because it's gonna test these conditions. All of them evaluate to false. And then it's gonna come down here. And this is kind of the last resort where if none of this is true, then it's going to come into this branch of code. I want to point out that you can actually just omit the else if you wanted to, and if you did that nothing would happen because they would check all of these conditions. All of them are false, so it's not gonna do any of it. And furthermore, you can have mawr else if branches if you want or you could just have one. Or you can simply have none in just a simple single branch. If statement, let me just hit Undo here. I want to point out something else here. And that is that this whole thing is a single if statement. I know I've said this before, but I wanna tell you what the implications of that are. It means that only a single branch of this if statement is going to be executed, right, It's gonna go into the 1st 1 that is true. Or since we have an else clause, it's going to come into this last branch. This is different than if I had done something like this. If I had done something like this, these air separate if statements. This is a single if statement, This is another if statement. And lastly, this is the third if statement, So that means in this case, I could have multiple things printed. So let me change this toe. That and if I had this, as, let's say, 15 well, you could see hello is printed, you can see a is printed and you can see that C is also printed right? And the reason for this is because this is a single if statement, it's going to test this. If it's true, that's gonna print this now on to the second if statement, this is true. So that's gonna print this third, if statement, it's gonna test this, that's false. Then it's gonna come into the else branch. All right? This is very different than if I had made thes branches off my first if statement. Now, this is a single if statement, it's only gonna choose one branch to go into. It's gonna test each of these conditions and go into the 1st 1 That is true in this case, this one and it's going to skip the rest. So I just want to make that distinction to you. And the last thing I just want to say about if statements before we move on is that testing these conditions can actually get pretty complex because there are things called boolean operators where you can chain multiple conditions together. So I'm just going to do a very quick example. This isn't something that we're going to need for our war card game project, But, um, you know, good to know this stuff so For example, I contest If X is greater than 14 end, why is equal to 10? I use a double ampersand symbol like that space and then I contest that. So this is going to do to tests and they both have to be true in order for it to come into this branch because it's an end, okay. And you can actually change a whole bunch of these together. Now I want to show you or and that is these two double pipes on my keyboard. I have to hold down, shift and hit the backslash key in order to get these symbols here. This is the or operator. That means that if this is true or this is true, then it will come into here. Only one of these two conditions needs to be true. You no one can be false. For example, let's say I change extra 10 right? This is false. However, this is true. And since it's an or it will still come into here in print ello. However, if this is and and Klaus then they both have to be true. You can see down here it actually comes down to Prince see down here. Okay, so that's the and and or And you can chain multiple times together and actually let me show you one more thing. So this is equality. If why is equal to 10? If you want to test inequality, use that exclamation mark equals. And that is going to say if why is not equal to 10. And just to whet your appetite a little bit and show you some more things that you could do with this statements. You can even include these brackets. So you can say something like if this and this are true or you know X plus Y is greater than 29 or something like that. So in this or statement, either this is true or either this is true, and that's what those brackets allow you to do, kind of like group things together. Or if we had another thing that's like a string like that you can do tests like Zed is equal to test. Then with the print Hello or you know you could do not equal to test, and you can actually even do greater than. But in this case, it's kind of weird to say if it's greater than or less than a. But essentially it doesn't care about TheStreet in length. So even though testes four characters and that this is only one character, it basically tests character by character. If this is greater than a, then it's gonna be considered true, you know? And if we had two letters like that, it would also it would basically test this letter against this letter, and then e is considered greater than a and so this would be true and to come down here. But I don't usually see this happening a lot using equality symbol using greater than or less than with strings. I just wanted to show you that that was possible. All right, so now we're gonna go back into our war card game project and use if statements to compare the scores. So we're gonna first go into the view controller that swift, and when deal tapped in here we are random izing. Two numbers, right, The left random number and the right random number. And then we're setting the images. In fact, we should probably right some comments. So I think we can get rid of this Prince Damon here. Let's get rid of his prints statements. And down here, I'm gonna write, um, randomize to numbers. Change the image views. And down here we are Go to compare the numbers. All right, So I can say if the left random number is greater than the right random number and then we opened up a pair of curly brackets, right? In this case, the left side has won because it's got the bigger number. And I'm gonna do here else if right random number is greater than the left. Random number didn't do this. And then for the last clause, there's only one more possibility, right? And that is, if they are equal. So I can either, you know, just use an else statement like that, or you can just Do you know, if left a random number is equal to right around them number. If you want to be a little clear, it can do that as well. So there are three different cases. So in order to keep a score, we actually need a counter of some sort. So we're gonna go all the way up here, and we are going to write to properties to keep track of the scores so that's right. A left score. We're gonna just set that to zero. And we are also going to do a right score also equal to zero in the scroll all the way back down here. So if the left random number is greater than the right random number, then we're going to increase this, uh, the left score. So you can either do left, score equals left, score, plus one, or you can actually do a shorthand way. And that is to use the symbol plus equals. And that just means to increment. So we're gonna increment. Whatever left score is by one. All right, we're going to do the same thing here of the right random number is greater than the left number. Then we are going to do the right score plus equal one. And if you want a deck Ament, you can actually do minus equal. Just a quick note. All right, So here, update the score. Now update the label to reflect that new score. And we have an i b l that property for that left score label. Right. We connected it before so we can do left score label, and the label has actually got a text property. And you've said it before. Let's go to the storyboard. Let me click this label. You can see here in the inspector panel There is this text property right here. All right, so we can use dot notation start typing text, and it expects a string. Right, so we can try to assign it this left score, which is an integer and see what happens, right and ex code is gonna complaint cannot assign value of int to a type of string, so we need to somehow convert this int data to a string data. All right, We need to represent that number in the form of a string so you can actually create a new string object and pass in an integer to create a string version of that integer, and you do it like this. OK, so we're gonna do the same thing here, update the score, update the label and make sure your incremental ing the correct score right here. We're implementing the left score and updating the left score label here. We're gonna update the right score and update the right score Label dot text equals a new string and in this string object. We are going to initialize it with the right score and let us run our project and see how that looks for a tie. I'm not sure what we want to do there, so I'm gonna actually leave that empty. So 10 is greater than six. So we have this updated. This is greater than five. So we have. This is to now it looks like the players winning all the time. There we go. CPU gets one on the scoreboard. 10 is greater than five. All right. Pretty cool right now. The last part is how to get this up onto our device. So what you're gonna do is you're actually gonna plug your device into your computer, And then if you go back to ex code here and you pull down this where you select the simulator, you go all the way up here. You're going to see this menu? No. Well, mind sees no devices connected to my Mac because I don't actually have a phone there. But if you have connected your phone or your iPad here, you're going to see that device appear here. And you just want to select it. So This is what I get because I don't have a device. But when you select it, um, it should have your device selected. And then all you need to do is hit the run button, and you're going to run that app on your device. And even after you disconnect your device, you'll still have that app on your phone. And you also might get a prompt. If it's the first time you're using your device with X code, you might get a little pop up asking if you want to use this device for development than you just say yes and off you go. Not bad, right? Look at how far you've come. Seriously, give yourself a pat on the back. If you finish this project, I want you to go to the lesson page, scroll down and click on that tweet button toe. Let me know. I love hearing from people who have completed this project, and I'll also put your name on the wall of fame that is exclusively for people who have finished this project. And if you haven't gotten this project toe work yet, remember, you can always download my Ex Code project and compare it against your own. Also, don't be afraid to ask for help. Just leave a comment below. In the next lesson, I'll show you where to go from here and what to learn next. All right, See you there. 11. How to Make an App for Beginners Lesson 11: Hi. You made it in this video. I'm gonna tell you what to learn next. Now give me three pieces of advice on how to approach building your own app. The first I want to mention that the 10 videos you just watched are actually part of my larger course that teaches beginners how to make APS. There are over 50 additional lessons that are going to continue growing your skills from here. If you'd like to check that out, just follow the euro on screen or in the description below. All right, now let's talk about building your own app. I see this happen all the time. One of two things, actually. Problem number one. You want to start building your own app, but when you sit down to do it, you have no idea where or how to start. And problem number two. You have all of these great features. Imagine for your app. You might even have wire frame the screens for your app. Already, it's gonna have multiple screens log in and user accounts. It's gonna have social features. It's going to connect to a database, connect a Facebook twitter instagram. It's going to have forms for the user to fill out, you know, the whole works. And then you start working on your first feature and you encounter a roadblock. After wrestling with it for a few hours, you begin to realize that it's going to take a lot more time and work than you thought. You get overwhelmed, wonder if it's all worth it, and then you abandon the project. Look, I'm sorry for painting such an ugly picture, but the good news is that I'm gonna tell you exactly how to overcome those two problems right now. Let's address problem number one Whenever I start a brand new app, I always think about the previous projects that I've built before. This gives me a great starting point. I might realize that the structure for this up I'm trying to build is very similar or slightly similar to an app that I've already built before. Either way, it gives me a starting point to build off of if you don't have the experience of past projects to draw from its hard to know how to start your own app. So this brings me to my first piece of advice when you're first starting out build as many small projects or demos as you can get your hands on. There are tons of tutorials out there and even on my YouTube channel, where you're gonna build small demos or small lapse, it doesn't matter if that demo or small app has nothing to do with your dream. At the point is you want to build up that pool of experience so that when it comes time to building your own up, you have that experience to draw from. In my course, you'll be building four relapse that you can actually submit to the APP store. I've made each have very different so that by completing them you have a well rounded pool of experience that you can draw from for your own app. Now let's talk about problem number two. When you start building your own app, you make the mistake of trying to boil the ocean. Have you heard of that phrase before? How about biting off more than you can chew? The point is great. APS don't usually get built all at once. When I started new app and their features that I've never worked on before, I usually break out those features into smaller test projects. Get them working in the smaller projects first and then go back to the main project. So that is my second piece of advice for you. Forget the bigger picture for now and focus on working on each feature in your smaller project. This weight you're going to get a sense of accomplishment each time you get a feature done rather than getting overwhelmed with the larger scope of the project. When you build the four APS in my course, you'll be taking this approach oftentimes will try out a new feature in a playground or in a smaller project before working on the main project. You'll also learn how I plan out the APP architecture for my app. Before starting the code, you'll save yourself a lot of headache and time by learning how to navigate through potential pitfalls before you start to code. My third piece of advice for you is that learning is a very human process. Instead of just learning by yourself in a vacuum, trying to find some communities or forums either online or offline, and immerse yourself having that support system goes a long ways towards increasing your chances of success. So in order to provide that human element in my own courses, I decided to give students access to myself. One of the biggest reasons that people join my course is so that they can get my guidance as they're learning. I Wes, I personally answer all my questions and help students over the hump with a specific problem that they're facing, oftentimes recording videos just to explain something to them. You'll also get access to a private Facebook group on Lee for members of the course, where you conform relationships, get help or just bounce ideas off of like minded individuals who are also learning IOS again, the link to my course is on screen or in the description below. All right, let's recap my three pieces of advice for you. Number one. Build as many small demos and projects as you can to get experience under your belt number to break out the functionality of your app into smaller projects. Number three. Find a support system for learning. Iowa s Finally, I want to thank you so much for learning with me, whether that's through my courses, my YouTube channel or my blood. Thank you for your support. I really appreciate it. And if there's anything I can do to help, just leave me a comment below. Thank you for watching. Don't forget to subscribe and I'll see you and many more videos to come.