2021 SwiftUI Tutorial for Beginners (3.5 hour Masterclass)

hello and welcome in this 14 day beginner challenge you're going to start your app journey off with a bang you're going to learn how apps are made and how they end up on the app store you're going to get familiar with xcode and how to start your very own app project you're going to learn how to build user interfaces with swift ui and you're going to learn swift programming basics so that you can read and write simple swift code now in the next 14 lessons you're going to gain all of these new skills and you're going to have built your very own app that you can install on your device and show all of your friends and family what you've done more importantly than that however you will be extremely confident and excited to continue growing your app development skills beyond what we've covered here this really could be the start of something new for you now just in case you're new around here my name is chris and welcome to code with chris the place to be if you want to learn how to make an app we've taught thousands of people with no coding experience how to code and how to make apps and i'm sure that we can do the same thing for you on that note why are you here learning app development let me know by leaving a quick comment below and on your way down there if you wouldn't mind please give this video a quick thumbs up it really helps the video out and i appreciate that so much okay so if you're ready let's roll up our sleeves and get started i'm going to walk through this diagram and then after i'll tell you where to get all of the pieces it all starts with the xcode ide now ide stands for integrated development environment which is a term for the application and all of the tools a developer uses to build something for the rest of this course we'll simply call it xcode this is where we build our app by writing swift code building the user interface or ui for short and connecting it with all of our data swift is the programming language we use to express our logic and to tell the system what we want to do we can even build the ui through swift code as you'll soon see now swift ui is a ui framework that makes it easy for us to rapidly build apps for all of apple's platforms a nice benefit of learning xcode swift and swift ui is that there are the same skills and tools used to build all apps for all of apple's platforms including ios ipad os tv os watch os and mac os and in some cases your app will be able to work on multiple platforms without much changes at all now once your app is built you can distribute it with apple's app store this is done by joining the apple developer program which requires an annual enrollment fee once you're enrolled you get access to multiple benefits including the app store connect portal test flight and the provisioning portal there are some more benefits including access to beta software and support from apple engineers and i'll provide a link to the full list below the provisioning portal gives you access to tools for identifying and code signing your app it's like putting your signature on the app so that apple can identify who built it and this is important for the safety of the end users downloading your app and it's also important for you because it stops malicious coders from pretending to be you once your app is in a testable state test flight allows you to invite people to download and beta test your app they'll be able to send feedback and bug reports directly to you through the test flight program use test flight to ensure that your app is as polished as it can be before launch and finally app store connect is where you'll create the app listing for your app including all of the metadata and screenshots if your app has in-app purchases this is also where you would configure them once your app is tested and the listing is ready you can upload the app from xcode to app store connect from there the certification team at apple will review your app to ensure that it meets the app store quality guidelines this takes a couple of days and don't worry if you fail because you can fix whatever they point out and resubmit it for review if everything looks good they'll approve the app and your app will be live congratulations alright so where can you get these different pieces of the apple developer ecosystem you can download xcode for free from the mac app store i'll provide a link below you don't need to get swift or swift ui those just come with xcode as for the apple developer program i'll provide a link to the enrollment page below i want to mention that joining the apple developer program is completely optional if your goal isn't to distribute apps into the app store don't join it you'll still be able to learn how to build apps for yourself so that's the apple developer ecosystem it's the process that i'll be taking you through if you continue on with this app journey now by the end of this learning path you'll be building your own apps using all of these tools that we've covered even if you don't have any coding experience right now i promise you you'll be surprised at what you can do by the end of this challenge now i highly recommend that you go over to codewithkris.com and create an account you can take this same course and get all of the supplemental material and get access to all of the quizzes and exercises to make your learning truly effective in fact if you go and do that right now there is a quiz that you can take to reinforce what you've learned here today in the next lesson we're going to dive right into xcode and if you don't want to miss it make sure you're subscribed to the channel by hitting that subscribe button below and turn on bell notifications so that you get notified alright i'll see you in the next lesson hello and welcome in this xcode tutorial you're going to get familiar with the development environment that you'll be building apps in i'll show you where to download xcode and how to start a new app project and then we're going to go through the major areas of xcode and then what each of the files in your app project is for and then finally we'll wrap up the lesson with some quick tips on how to navigate around in xcode all right with that said let's dive in let's start by talking about where to get xcode it's free so you don't need to pay for it just launch the mac app store on your computer and then search for xcode you're going to get to a page like this in the search results click into it and you're going to be able to download it for free so i've already got it downloaded so that's why it says update here i want you to just ignore the warning here it's actually a very large uh app with a lot of different features it's understandable that there are a few bugs and if you look at the reviews there are people complaining about other things unrelated to the app they're complaining about the way apple is running their business and so on and so forth and some of these are um very very old okay i want you to take note of this important information click on this just to make sure what the requirements are to install xcode and also double check that you have enough free hard drive space now in my experience it actually takes more hard drive space over time than what it says here so if you have something like 12 gigs free it might not let you install this because during the installation process it actually takes up more space and then i think it gets rid of a bunch of files and it stops at this size however over time when you download additional developer components and additional ios simulators this can actually get even higher so make sure you have sufficient hard drive space all right so if for some reason you can't get access to the mac app store you can also visit the official xcode page on the apple developer site so the url is developer.apple.com xcode and you can immediately click on the resources link up here and then you'll be taken to a page where you can download xcode here it just takes you to the mac app store actually you can also download beta versions of xcode now i wouldn't recommend this because oftentimes it actually is pretty buggy their beta software so i would recommend to stick with the official releases if for some reason you want to download an older version of xcode you can scroll down here and you can click this link here now just a note in order to download beta versions of apple software you need to be enrolled in their apple developer program which we talked about in the previous lesson to download older versions of xcode i don't think you need to be enrolled in that program i think you just need a free apple id and lastly if you are on a pc you're running windows check the resources in the beginning of the course for options for you alright so now take the opportunity to download and install xcode if you haven't already and then launch it for the first time during your first launch it's going to ask you for your administrative password to install additional development components you're going to want to do this so go ahead and enter in your admin password after you've done that let's continue on with the rest of the video alright so now let's talk about how to start a brand new xcode app project this should be the first welcome screen that you see when you launch xcode if you don't see this don't worry you can always go to file new and choose project otherwise from this welcome screen you can go ahead and click create a new xcode project from here from here you're going to choose a template for your new project you're going to configure the project properties for this and then you're going to choose a place to save it so let's start by choosing a template the most basic one for our purposes is under ios and app so go ahead and choose that and hit next and then here you're going to configure the properties for your project so if you don't have a team here don't worry later on you can add your apple account here and then you can configure the team for the project one thing that you will want to make sure of though is to set your organization identifier here if you have a business or a website you can use a reverse domain style name here com dot whatever that may be and you could even use your first and last name here if you'd want and then here you'd fill in the name for your app or the product name so here if i put in test you'll see that this bundle identifier is a combination of the organization identifier plus the product name and this together forms this unique bundle identifier this bundle identifier is used in different places to identify your app such as in the app store or in the provisioning portal or in app store connect so this is very important don't worry you can change the bundle identifier for your project later on i just want to draw your attention to how it's formed and what it's used for all right next up for your interface you're going to make sure that you have swift ui selected and for life cycle you're going to make sure you have swift ui app selected and then finally for language choose swift and for these options just leave them all unchecked or if they are checked just uncheck them now a brief note on these drop downs right here over time as app development for ios has evolved there have been a couple of programming languages and also a couple of ways of building user interfaces the latest and greatest is swift ui and swift so that's what we want to be using let's go ahead and hit next if you're happy with all of your selections here and then choose a place to save it i'm just going to save it on my desktop so that it's easy to find since i've already got a project there i was just going to replace it alright welcome to your brand new xcode project now it might seem overwhelming with all of the different panels and areas but it's actually not so complex once you know how it gets broken down there are actually only four major areas of xcode let's start from the very very left here we have the navigator panel or the navigator area and as you can see here we have a file listing of all of the different files in our app project the navigator area actually has different tabs to navigate through different things as well which we will get to in future lessons for now it's set to the first tab and we have a listing of our files when you click on a file it changes what is shown in this big main area and this is called the editor area it allows us to edit the files that we choose in the file navigator you can see that it adapts to the type of file that you choose if i choose a dot swift file those are code files if i choose this xc assets file this is an image library so it's showing me something like this the editor area is a place to edit the file that i choose here so the last tab is on the very right hand side and this is called the inspector area and it either shows me additional supplemental information on what i select in the editor area or it allows me to configure or edit the thing that i select in the editor area depending on what sort of editor i'm currently working in so for example this is a code editor because i'm looking at a dot swift file so when i hover over or select the keyword here if i'm on this quick help tab it's showing me some quick information about what that piece of code or keyword is for the inspector panel also has a couple of different tabs up here for example this one is an identity tab it shows me information about that file that i've got selected about where it's located and which app it's included in and if we were building our user interface now if i were to select one of those elements and go to this tab it would allow me to configure it so to sum it up the inspector panel here is contextual to what you select in the editor area and the editor area is contextual to what you select in the navigator area so it all stems from what you select here on the left hand side first and then across the top we have the toolbar here let me explain to you what this is there's a button here on the very left and very right to hide and show the navigator and inspector these are handy if you don't have a lot of screen real estate next thing i want to draw your attention to is in the middle here this is the status bar it tells you what's currently happening what is xcode doing do you have any errors do you have any warnings and so on and so forth to the left of that you have a drop down to select a simulator and this ios simulator is basically a virtual device that appears on the screen where you can run your app and test it you don't actually need a physical device if you do have one however and you plug it in and you want to run your xcode project on your actual device you'll find that it will be selectable from here once you plug it in and then to the left of this menu you're going to see a couple of buttons here to run your project hitting this button will actually run your project in the simulator and hitting this stop button will stop running your project in the simulator and then all the way on the right hand side there are also two more buttons this is the library button where you're going to find different user interface elements different ways to modify those elements code snippets any assets you've added to the project the colors that you've specified for your project and so on this little library panel is useful to do a search and to quickly select and add things into the editor area we're going to get to that in the next lesson but for now that's the library area this you probably won't use too much in the beginning this is a revision or code review sort of button that will show you if you're using source control how your files have been changed through time so those are the four major areas of the xcode user interface all right now let's go over the files in your new project let's start from the very top this is the root node or it's your project file if you select it the editor area will change into this configuration screen for you to edit some of those details that pertain to your project for example here's the bundle identifier that's changeable you can configure device orientation in which devices and which platforms it can run on things like that if we go down a level you can see that there are two folders here this one is containing all of your code files and project files this products one contains the output when you build your app and compile it it gets turned into this app which ultimately is that little deployable bundle or package that we send into the app store you don't really have to do too much here with this but that's where it's stored all right let's take a look at this file this will be named after your product name app.swift and you can see here with this main tag here this is the entry point to your app at this point there's not too much to configure here all it really does is create that first view that the user sees which is content view and you can see that this name maps to contentview.swift so let's take a look at this this file represents the view that the user sees now you can create additional views but by default you get this content view to start with and yes it's all code here so that means that the user interface is generated by code but also there is a visual way to customize the user interface which you'll see in the next lesson let's move on with our other files this one as i mentioned before is our asset library this is where we can store the colors for our app as well as the app icons as well as any other images that we want to add to our project we just drag it and drop it in here this is our image asset well not just images but asset library and then we have an info.plist and this is some additional configuration information for the project here we have preview content and this is another asset library but these are only for pre-production assets so only images and text and colors and things like that that you are testing with as the name preview suggests if it's an asset that will ultimately make it to the app that you're going to push the app store then you can put it in the asset library here instead so that's a quick explanation of all of the files in your project in a nutshell in the future lessons we're going to dive deeper into each one and you're going to see how each of these files play a part in the construction of your app the last thing i want to do in this lesson is to give you a couple of quick tips on navigating around xcode in terms of going through your files and also in terms of editing code so first of all let's talk about navigating around in files you'll notice these two arrows here these are really handy because it's going to let you go to the last file you were looking at and although it seems a little trivial now uh when you're jumping around editing in files this becomes really handy instead of having to go and reselect that file from the navigator you can just hit back and jump back to that previous file you'll also notice that you can have multiple tabs here so you can hold down control and you can click on a file and you can always choose open in new tab you can also open in a new window if you'd like so since i already have that as a tab then it's uh it's not going to open a second tab for me now if you want to have things side by side you can do that as well so let's say i wanted to look at both these files side by side so i can close this and then i can go ahead and i can add another editor pane on the right hand side so i can split my editor area into two editor areas you can see that here i'm looking at contentview.swift and for here let's look at the test app so they're independent areas and i might want to just get rid of my canvas and then i can see both files like that if you prefer them to be horizontally stacked you can hold down option and you can see that that icon changes right if you hit this button again it's going to add another editor area to the right so you're going to split into three or you can hold down option and you can add an editor to the bottom instead so you could do that you can also do that here hold down option and do that now a quick way to launch a file into a split editor view so let's say i'm looking at test app and i want to open up content view as a separate editor area i can hold down option and click on the file that i want to open in a separate editor view so those are some of the ways that you can work with your files just to recap you can navigate you can go back and go forward you can have different tabs and then also you can split up your editor area into multiple instances of the editor now i want to talk about editing code because this is a lot of what you will be doing and the code looks pretty short right now but it can get longer so it's handy to know a couple of ways to deal with that at the top here you're going to see this sort of breadcrumb menu and you'll notice that that is the root node corresponds to that right this is a folder or group you can see that and then this is the content view which is the file that you're looking at which is here inside test and here we can actually click this and you can jump to different sections of your code you can see that content view matches that body matches that right so this is a great way to jump to different sections in your code file in case your code file gets pretty long you can also add different comments in here that will correspond to what you see up here so you can see here i've created my own documentation and it adds it here so this is a great way to organize your file we're going to talk again about this in the future so don't worry if this is going a little too fast all right now i want to talk about this little button here you've seen me use this to open up the canvas but you can also open up this mini map right here and this minimap will show you an outline of your code file you can drag this to scrub through your code unfortunately i can't do it very much here because this code file isn't very long but if you had a really long code file it would show you the outline of that code file down here and you can navigate really easily by clicking and dragging this you'll notice that even as i highlight it it's going to show me the different parts of my code corresponding to what we have here again those were just some quick fire tips don't worry if that flew by too fast because we will be using all of these things together in the upcoming lessons so that's a quick xcode tutorial to get you started not so complicated once you know where things are right just to recap you found out where to download xcode and how to start a new app project you learned what each of the files in your project is for and you learn the major areas of xcode including the navigator the editor the inspector and the toolbar finally you'll also learn some quick tips about how to navigate around with an xcode now don't worry if it's a little bit overwhelming right now you'll feel right at home with xcode as we use it more often together in the upcoming lessons to help you get settled in i actually created an xcode cheat sheet which you can print out and keep by your side as you're learning to use xcode to get it simply visit the resources link at the top navigation of your student dashboard and finally i have a quiz for you to take in the next lesson to reinforce what you've learned today after you take the quiz i highly recommend that you try to create your own xcode project on your own computer just for extra practice in the next lesson we're going to use xcode to build our first user interface alright i'll see you there hello and welcome in this lesson you're going to learn how to use xcode to build user interfaces with swift ui we're going to first learn how to preview the app so you actually can see what the user interface looks like then i'll show you how to use xcode to visually construct the user interface or just ui for short now up until now the learning has been pretty much passive meaning that you could just sit back and watch the videos but starting now we're going to switch into more active learning i want you to do what i do replicate it on your own xcode project and i want you to attempt any of the challenges that i have for you this is the best way to learn and quite frankly if you're just going to sit back and watch the lessons and not do any of the work you're not making the best of your time this has been my personal experience and i think it'll be the same for you so if you're ready we're going to start getting our hands dirty let's do it let's start by creating a brand new xcode project we're going to choose ios app and i'm going to call this one ui test just make sure interface is swift ui lifecycle is swift ui app and language is swift other than that you can name it anything you want let's go ahead and save our project and like i mentioned in the previous lesson contentview.swift represents your view but as you can see it's all code so how do you actually see what your ui looks like well there are two different ways the first way is to launch your app in an ios simulator like i mentioned before so let's go ahead and do that first select one that you fancy so i'm going to select iphone 11 and i'm going to hit this build and run button now if it's the first time you're launching the ios simulator it's going to take a while to boot up just like it would be to boot up a real device for me because i've launched the simulator before it's happening really really quickly as you can see by default your project has a hello world label we're going to talk about that in a second but first let me show you the other way you can preview your app so let's go ahead and stop our project and that's going to stop the app from running in the simulator the second way is to preview your app in this canvas right here that's part of the editor area if you don't see this you can click on this little button here and make sure that there's a check mark beside canvas and if you're looking at a dot swift file which is a view you're going to be able to see this canvas otherwise if you're looking at this entry point file here you can see that there's no preview so let's go back to content view make sure we have our preview here and click resume it's going to build and run it and then you're going to see the preview here again if this is the first time you're doing it it might take a little while let's use the zoom controls down here and zoom out a little bit so that we can see the whole thing now just off the bat there are a couple things i want to mention here this is simply a preview whereas when you launched it in the simulator you're actually installing that app in a virtual device so that you can interact with it and test it here this is a preview that you cannot interact with but there is a way that you can so if you click this button here live preview it goes into a mode where it's just like the simulator that you saw before but it's in this preview canvas so you can go ahead and hit stop and then again it just becomes a normal preview that's only for previewing purposes another cool thing about using this preview canvas is that you can hit this button here and you can choose a different device you can choose a layout you can choose dark mode or light mode and you can pick a number of different things this is the preferred way to preview your ui because as you are building your ui through code on this side you're going to be able to see things change on the right here without having to relaunch the app in the simulator all right now let's dive in and talk about how we're going to actually build the user interface so make sure you have contentview.swift highlighted and go ahead and hide the file navigator now there is a bunch of code here that make up the view but we're going to go through it in depth later on when you learn some of the swift programming basics for now to avoid confusion i just want to draw your attention to one thing which is this piece of code right here what i've highlighted on the screen is what is generating this label here that you see in the preview notice that we have a text keyword we have the hello world piece of text that you can see here and we also have this padding element here which gives the padding around the word let's take a look at this piece of code and break it down i'm actually just going to go ahead and delete it as you can see xcode is going to throw all sorts of complaints and errors but don't worry we're going to fix it right away now our user interface elements have to live in between this opening bracket and this closing bracket and you can only have one user interface element now obviously that doesn't make sense because our user interfaces are made up of more than one element but that's where container elements come into play and i'll show you a couple of those in this lesson as well for now let's recreate that text element so what we write is that text keyword followed by a pair of brackets like that rounded brackets and then inside there we have a pair of quotation marks and then we put the piece of text that we want to display so here i'm just going to put hello but you'll notice that this blue frame wraps very tightly against my hello text if you wanted to add the padding back then you would write dot and then you would just type in padding and using autocomplete you can just select that one right there and just like that we've recreated that label with padding this right here is the text element or the label this part with the dot padding this is called a modifier and you can think of a modifier as an attachment to an element that changes the look and behavior of it in this case this padding modifier adds padding to the text element so that if there is an element right beside it there will be some space surrounding our text element and there are actually many more modifiers that we can add to our user interface elements for instance i can add one called background and i'll just add it to the end of the padding one and i'm going to say that the background for this label should be blue so you can see that our preview canvas very nicely represents what we're writing here through code if there's any time that things get out of sync maybe the code you're writing here is saying the background should be green but you're not seeing it here the code is considered the source of truth because ultimately the preview canvas and even what you see in the inspector panel are just visual representations of the code and that brings me to my next point which is when you're building the user interface you don't have to write code there are so many visual ways for you to build the code let's erase this text element again and let me show you some of the ways in which you can we can visually build the user interface i talked about the library panel before so you can see here that we can simply select search for the text element select it and we can drag it into our code editor right here and then we can change the placeholder text but we don't even have to change the text here if you click on this text element and you go into the inspector panel you can change it here like that and then also in this inspector panel you'll see that there are a bunch of modifiers that we can add so to add the padding i could click this to add top padding only and you can see that the code changes and it's specifying that i only want padding on the top and you can see it reflected here or i can click this one here and turn padding on or off and you can see now i have padding on all sides so in addition to some of the modifiers that you see here down here there's a text box where you can search for more modifiers so i can search for the background one and click that and then select that blue background as you can see here and then i can also add that padding now in addition to using the modifiers that you see here and using this add modifier text box you can also use the library to add modifiers so this first tab gives you all of the user interface elements that you can add to your view here on the second tab are modifiers so as you can see there's the padding one there's the background one so how do you go about adding these modifiers well you just click and you drag it but here you have to make sure that you drag it to the end of the code because if you accidentally drag it in the middle of your code it might not take or you might get something like that and that clearly is an error so let's undo that so as if that weren't enough there are a couple more ways i want to show you on how you can modify your user interface elements uh visually instead of writing code first of all let's finish configuring this background and we're gonna select blue right there or maybe green okay that's not changing that so it is changing that but it's not changing here so i'm gonna go ahead and select color and uh okay we can do green lowercase g all right so you can hold down command on your keyboard and then you can click on the user interface element from your preview right here and then there are a number of things you can do with that element including this one show swift ui inspector and then again you get this add modifier text field which you can search for modifiers to add so i'm going to add one called blur you can see that it is blurring the color green and you can see that now my background is a blurry green now you can do the same thing on the code editor side so you can hold down command and you can click the text element and you get this menu you can again click show swift ui inspector and from here you can see that this menu looks like the inspector here and we can also add modifiers as well so to illustrate my point i've shown you a whole bunch of different ways for you to modify your user interface visually you don't have to write the code but over time as you're doing this in the visual manner you're seeing the code that is generated over and over again you're going to get to a point where it's so familiar it's going to be faster for you just to type it out rather than clicking everywhere so it's a really neat way to learn the user interface code isn't that pretty cool xcode has come a long way in the past it used to be very fussy to use the visual interface builder with xcode but swift ui has really changed things for the better now in this lesson you learned how to use the text element and how to modify its look and behavior using modifiers in addition to that you also learned that the ui is actually generated from swift code however there are a multitude of ways in xcode to build your ui visually and as you construct your ui visually through the preview canvas or the inspector panel as we demonstrated the swift code in the code editor updates automatically to reflect those changes so this is a great way to learn the swift code now to reinforce what you've learned in this lesson i have a quiz and a quick challenge for you in the next lesson so i highly recommend that you go through those to get familiar with using xcode to build uis the next time we sit together i'll introduce to you additional views and containers that you can use so that you can build more complicated user interfaces all right i'll see you there hello and welcome in this lesson you're going to learn how to use a variety of different user interface elements and containers and then at the end of the lesson i'll show you a couple of user interfaces that i'd like you to try to build yourself as practice remember you're going to get a lot more out of this course if you stop throughout the lesson and try to replicate what i've done on your own xcode project alright enough talking let's get to the fun part all right so you've learned about the text element now i want to show you the image element so we're going to go ahead and erase this and why don't we use the library to look for the image element so let's go ahead and drag and drop the image there now the problem is that we don't have any image to display but before i tell you how to specify that just notice that it's sort of in the same format as the text element right there is the image keyword here and then there is a set of round brackets and in the middle we're going to put our image name now this image name maps to whatever graphic asset we've put into our asset library so if we open up our file navigator and we go into our asset library you can see that it's all empty we don't have anything here so let's go ahead and put an image in here if you go into the lesson resources you're going to see a zip file called logo assets and let's go ahead and unzip them and then inside you're going to find a local image you're going to find three files actually and they're named the same way except with an at 2x and an at 3x and that is literally just two times as big as the first one and this one is three times as big as the first one and the reason why they come in different sizes is because there exists ios devices with different screen resolutions so by adding all three sizes the platform will pick the right size to use for the screen resolution that it's being displayed on so all you have to do is grab all three and then drag it into the asset library like this it's going to be smart enough to know that those three are in the same group and it's going to give it a name you can always rename this so you can click it and you can name it anything you want but this name right here is what you are going to be referencing in the image element so go ahead and put in quotation marks that image asset name and you should see it appear here oh actually automatic preview updating paused go ahead and hit resume all right and there we see our image now by default it displays the image at the size of the graphic asset that you imported however if you wanted to resize it scale it up or down you can add a modifier called resizable when you hit that it will be able to stretch when it stretches if you wanted to maintain the aspect ratio because you can see here it's all stretched out and it doesn't look like the original image you can add another modifier called aspect ratio and don't forget even though i am typing out these modifiers through code here you can always add them through this menu right you can find it right there and then the aspect ratio modifier allows you to select different ways in which this should scale so if i say fit it's going to scale it up to fit within the bounds but with maintaining aspect ratio and while we're adding these modifiers this would be a good point to mention that a good practice is to hit enter on your modifiers here so that they become aligned because some elements might have a list of modifiers and by putting them all on a new line they automatically indent under the user interface element that they pertain to and it becomes very easy to read all right now you know about text elements and image elements how do we go about combining the two how do we go about having more than one element for our user interface this is where container elements come into play so let's go ahead into our library and let's search for a vstack this is the one that i'm referring to vertical stack and you can go ahead and click and drag it in here now you're going to get some errors because this counts as an element too now it seems that xcode hasn't caught up but this wouldn't be a valid ui essentially we have two elements here what we want to do instead is we want to take our image and i'm going to cut that code and i'm going to paste it in between this opening bracket and closing bracket of the vertical stack inside the vertical stack you can put up to 10 elements and it's going to stack them vertically on top of each other so here i'm going to also put a text element like that and you can see that now i'm able to have two elements and they are automatically stacked on top of each other in addition to the vertical stack there is also a horizontal one and instead of v stack that is h stack and if you change that to an h stack you'll see that it's now stacked horizontally beside each other and there's also one called zed stack i'm in canada or z stack if you prefer and this places things on top of each other with the elements at the top being the farthest in the back so you can see that our text element hello sits on top of the image now a cool thing is that you can nest these different container elements so i can have let's say i want my image logo to be the background and on top i want to have two text elements side by side so then i can use an h stack in here and rather than typing it out or dragging it from the library i'm going to show you another way in which to embed your elements into these stacks if you hold down command and click on the element you've seen this menu before you can embed in h stack and it's just going to create that h stack for you and that's probably the easiest way to do it so in this h stack i'm going to add hello world you can see here that now my image is behind this h stack with two text elements now it seems pretty intuitive using these stacks right but how do you arrange the elements inside the stacks well there are some options so if i click on this z stack here actually let's take a look at the h stack so i'm going to go ahead and click that this one actually has alignment so does that stack doesn't because it just puts everything on top of each other but for the h stack and the v stack there's an alignment so you can choose to align everything by their middles align everything by their baselines or align everything by the top and you can also add spacing so you can see here i'm adding a spacing of three you can see how it changes the code and it actually adds a spacing there now it's too little for you to notice but let me add 20. you can see that there is a gap now all right so you've learned that you can align the elements inside a stack and you can also add spacing between elements in a stack but i want to show you another way of arranging elements inside of a stack in order to do that i'm going to change this z-stack into a v-stack so we're going to get something like that now let's say i wanted this logo to be at the top and i wanted my two text labels here to be at the bottom one way i could do it is actually by adding spacing in my v stack right so let's say i had a hundred you can see that they're pushed apart i can add more 300 but this is a fixed value and as you know there are a ton of different screen sizes and resolutions so this isn't a good way of approaching it let me get rid of this spacing value instead what we can use is an element called a spacer so let me show you how that works in between the image element and the h stack containing the two text elements i am going to insert a spacer element and the name of this element is spacer followed by two rounded brackets what this spacer element does is take up all the available space it just expands and pushes everything away so you can see i've got the image here i've got the spacer taking up as much space as i can and then my h stack containing the two elements there the cool thing about the spacer element however is that it plays nice with other spacer elements in the same stack so if i go up here above the logo and i add another spacer element what ends up happening is that the two spacer elements both take up an equal amount of space you can see above and below the war logo there is an equal amount of space if i add a third spacer element beneath my h stack what do you think is going to happen well all three spacer elements are going to share the available white space so the first space for elements here second one here and the third one is there and it's all having an equal amount of space this is a great way to space things out equally now in fact i could do the same thing with my h stack instead of specifying spacing here and notice this time i'm just going to delete that spacing 20 there instead of changing it in the inspector i can add a spacer there i'm going to copy that you can see here it takes up all the available space pushing my two labels to the side but if i add one here on the right side it's gonna push it to the middle and then if i add one in the middle then it's going to make it all equidistant awesome you learned how to use the image and spacer elements in addition to the text element you also learned how to use the v-stack h-stack and z-stack containers now it's time for you to practice using these views and containers in a few challenges that i have for you in the next lesson i highly recommend that you try them out the next time we sit together we'll be building the warcard game user interface i look forward to seeing you there and good luck with the challenges hello and welcome in this lesson we're going to be building the war card game user interface actually on second thought i'm going to have you try it first because i think you can do it come on you give it an honest try and then we'll go through the solution together now before we start i do have one request hit that thumbs up button below for some extra good luck all right let's get started alright so we're going to start with an xcode project launch xcode and let's create a brand new xcode project we're going to choose app under ios and you can name this anything you want but i am going to call this war challenge because that's what it is and it's a challenge that i'm confident you can do interfaces swift ui lifecycle is swift ui app and language is swift leave the rest unchecked and let's save it somewhere so i'm going to just save it on my desktop all right here's our brand new xcode project let's go to the asset library first because we're going to add all of the image assets that we need for this app if you go into the course resources folder under this lesson specifically you're going to find a zip file with all of the image assets so go ahead and unzip that and then let's drag all of these assets into the asset library now you should have the card back the background for the entire app and then you should have cards 2 to 14 and no you're not missing card number one the ace is card 14 and the reason i numbered them this way is because we're going to use this number at the end of the card names here to represent the value and we're going to compare this value to see which card trumps the other and then we're going gonna have a deal button image and a logo image now just in case i didn't mention it before we have three different sizes for each image because there are different screen resolutions for ios devices so all of the newer devices have a super retina display and so they're using the 3x ones and i don't think they actually make devices that use the one x image asset anymore but this app was from a long time ago and we've rebuilt it many different times so we still have all three now let me show you the finished user interface and this is the end result that you're going to try to achieve yourself so this is what it looks like don't pay too much attention to the spacing as long as you've got everything generally in the right place i think that's great another thing to mention is that this is supposed to be a button but since we haven't gone through buttons yet feel free to use an image element for that and that will be perfect for when we do transition to using buttons and i can show you how to change that image element to a button uh one other thing i have to mention to you is the concept of the safe area now the safe area is this region that starts about right here under the notch and it ends right here above this little handlebar and in some cases there are actually margins on the left and right side as well and anything within this region is in the safe area now this area is guaranteed not to be obstructed anything outside of the safe area so anything in this corner or this corner could be obstructed as you can see by icons or by the time and obviously there's this handlebar here that could be blocking things as well if you want a full screen background like this green background that we have here you're going to have to ignore the safe area because by default when you add elements onto the view it will try to stay within the safe area so there is a modifier that i haven't shown you yet it's called ignore safe area that you can apply to an image that will allow it to stretch beyond the safe area so that it reaches the edges and that's probably the only other piece of missing information you need other than that you've learned about stacks you've learned about image and text elements everything you could need to build this user interface so go ahead pause this video and give it a try yourself and then afterwards we will come back together and i will walk you through how to build this so welcome back how did you do were you able to build this user interface congratulations if you were able to build this or something that resembles this and if you got stuck or you weren't able to don't worry because we're gonna go through it now and oftentimes i find that if you try it yourself and get stuck and then later on find the solution those are oftentimes the best learning experiences all right let's go through this together now now before we dive in and start building this user interface i want to take a moment to sort of break down what elements that i can see here so first of all i can see that we will need a zed stack because we have an image behind all of these elements and so a z stack is going to allow us to position elements on top of each other next we have a v stack where elements are stacked on top of each other vertically so you can see a v stack running through this entire user interface top to bottom now some of the elements in this v stack will actually be contained within an h stack like these two cards side by side for instance and this element down here is going to be an h stack of two v stacks so this is a v stack containing the two text elements this is a v stack containing the two elements and then you encapsulate them in an h stack so that's the breakdown that i see and now we're going to jump into our contentview.swift and we'll build it out all right so here i'm looking at the contentview.swift the first thing i'm going to do is to change this simulator to iphone 11 and let's hit resume and in a few seconds time might be longer we'll see a preview here perfect now let's change this default text element get rid of that let's put a z stack there open up a pair of curly brackets now what's sitting behind all of those elements is an image right and the image that we have is called background notice that it doesn't reach all the way to the top now it does overlap that safe area a bit i said the safe area was under the notch right here so you do see that it overflows but doesn't quite really go all the way there so we can add a modifier called ignores safe area when you do that it's just going to cover everything so okay so what's going to be on top of this background well like i said before we're going to have a vertical stack containing all of those elements the first one being the logo and then we're gonna have it an h stack with two cards and then an image element representing the deal button and then after that we're going to have the score vertical stacks in a horizontal stack so let me let me type this out so it makes a little more sense let's start with the logo at the top we're going to have an image and our image asset name is logo so you can see it just um just appears at the right size there and that's because our image asset is that size okay now let's put an h stack in here and inside here we're going to put two more image elements we're going to put the uh let's put card two and then card three so we have two cards in an h stack and then after that we're going to put another image element and this is going to be the deal button and now comes the score labels so it's going to be an h stack but inside of the h stack we actually have two v stacks right each v stack contains two text elements so we're gonna have player and we're going to have the actual score and then for this one we're going to have cpu and we're going to have the actual score of the cpu so we basically have all of our elements laid out now let's add some spacing to them so to do that we can use spacers so let's start by adding a spacer uh right above right above the h stack of the two cards below the logo image so i'm going to put a spacer element right there and what you learned about spacer elements right it takes up all of the available space however if you have multiple spacer elements in the same container it's going to evenly divide that space between the two spacers so i'm going to put another spacer right below the cards so now you can see that there are two equal amount of spaces i'm going to put another spacer below the deal button or image for now and then i'm going to put a spacer below the score labels so you got to make sure that you don't put it in the wrong place here we want to put it below this h stack and if you click this ending bracket you can see that xcode briefly lights up the beginning bracket so you can verify that that's where you want it all right and the last thing to do is put a spacer element above that logo so that's right here now from a vertical point of view it's all spaced out nicely for this h stack with the two cards why don't we put some spacers in there so let's start by putting a spacer in between the two cards and then a spacer before all the cards and the spacer after the cards we're going to do the same thing with the text labels down here in this h stack we're going to put a spacer in between the two v stacks and then we're going to put a spacer before it and the spacer after it alright and now the last thing to do is just to change the font colors of these text elements and also to change their font weights and font sizes and maybe add a little bit of space in between the the score and the label okay so let's click on this text element and take a look at what we could do so if you look in the inspector panel for the font you can choose one of these pre-defined font sizes for this one let's choose headline and you can see it it gets a little bolder there let's change this to white and we're going to do the same thing for the cpu label we're going to change it to headline we're going to change the color to white then for the actual score we're going to change the font to let's say sub headline and we're going to change the color to white as well and for that score label we're going to change it to sub headline and we're going to change it to white as well all right and if we wanted to make it actually not i think in in the original uh user interface i had it as large title so i'm going to change it to that so i'm going to change the zero from sub headline to large title now in order to add some padding in between the label and the score here what you can do is choose the label let's start with the player here and let's click on just this bottom padding so enable that and then you can change that number to let's say 20. you're going to see that increase and that looks like a little bit too much so maybe we'll stick with 10. we'll do the same thing with cpu here we'll click just the bottom padding and then we'll add 10. you can see the corresponding code here it's adding padding but it's specifying only for the bottom edge and at 10 points and this is a good practice anytime you modify something visually adding a modifier or changing something in the inspector panel here it's a good practice to take a look at what has changed on the code side just so you can remember over time the more you see it the more you remember that hey if i wanted to change it to a headline style font i would just have to add a dot font modifier and pass in a dot headline option same thing for the foreground color for this text element dot foreground color color dot white you don't need to try to memorize it but just pay attention to it and over time you're just going to remember and typing it out will end up being faster than having to visually click around and configure things through the inspector panel or the preview canvas alright last thing to do make sure you save the project and you're done so in this lesson you built the ui for the war card game in order to respond to user interaction and to also programmatically change the card images we're going to have to learn some swift programming basics so in the next four lessons you're going to be introduced to coding basics with swift now if this is your first time learning to code take it slowly and don't try to memorize any of the keywords instead a better way is just to do all the quizzes and challenges at the end of each lesson and to make sure you have access to those visit codeworthchris.com create your code with chris account or log into your existing one and then enroll in the 14 day beginner challenge and there you can access all the of the supplementary material after learning those swift programming basics we're going to come back to this war card game ui and bring it to life with code alright thanks for watching and i'll see you in the next lesson hello and welcome in this lesson and in the next three you're going to be learning the basics of the swift programming language now these are the skills that you're going to have to have in order to complete the war card game as well as to build the feature apps that we're going to do together now if you've never coded before i know this might seem a little bit intimidating but i really want you to stick with this and really pay close attention in fact open up xcode on your own machine and type out exactly what i'm showing you this is really going to help reinforce the structure of the language and all of the keywords there's no need to memorize anything at all i guarantee that by the end of this module you'll be writing your own swift code all right let's dive in i want to start by looking at the view update lifecycle of a simple app and show you where swift code plays a part in each part of the lifecycle let's start with what you've already learned in the previous lessons that the ui is generated from swift code we'll call this your view code it generates a ui for your user to see now typically with an app we have some sort of data that we want to retrieve and display for example a news app we'd want to get that data from a data source and then retrieve it into our app and display it in our ui you can use swift code for this the swift code can go and fetch the data and then process it into a format that our app can understand then using swift code we can also link this data to our view code so that when the ui is rendered from that view code that data can be displayed to the user and furthermore when the user interacts with the ui suggest tapping a button we can use swift code to capture that event and respond to it now based on what the user tapped on we might use some swift code to change our data when this data change happens because we've linked that data to our view code that data change is automatically detected and the new ui is re-rendered with the updated data so that the user can see what has changed now this cycle is essentially all the app is doing over and over and we'll explore this app view update lifecycle in more detail in future lessons but for now i just want you to understand that swift code has a part to play in each part of this life cycle all right from the last few lessons you've already seen the code for building ui so you sort of know what that view code looks like let's shift our focus over to the data part where we can see what swift code is used for keeping track of the data and furthermore what does data even look like in our app in order to try out some of the swift code and to find the answer to our question let's use an xcode playground a playground is a lightweight way to test some of our code without committing to a full-fledged app project that we can do here think of an xcode playground like your doodle pad but for code now to start a new one go to file click on new and then let's click on playground we're going to choose a blank playground and let's give it a name and let's save it somewhere we're going to close this navigator tab by clicking this button because we don't need that now down here in the lower left hand corner you'll notice that we have a button that called show debug area go ahead and click that to reveal this tray this debug or console area is where we're going to output a lot of data so just turn that on make sure you see this little area down here and then this button i want you to click it right now it's going to be executing the playground it's going to run all of the lines of code in the editor area up here notice however that you also have this little blue run button along the line numbers and this lets you select which line you want to execute the code up to so if i hover over at line three and i hit the button right here it's gonna run lines one two and three as opposed to this button here which runs everything so the first time you run this playground it might take a while might show the spinner for up to even a minute i want you to do that and just let it run until it says ready to continue and that's going to set us up to run some code in the next part for now let's just go ahead and delete these lines of code so we can start fresh all right now that you're set up let's go back to our original question what does data look like and how do we use swift code to keep track of it let's look at a couple of different types of data first now let's start with a common data type a piece of text in swift you surround text with quotation marks like this and this is known as a piece of string data let's add a note for ourselves up here with two forward slashes when you do that it's called a comment and it's a way for us to leave a note or a little piece of documentation for us to remind ourselves or other people who might be looking at our code what that code does and when xcode sees these two forward slashes it's not going to execute this line now let's take a look at another data type integers so something that looks like this in swift this is known as int short for integer and what about decimal numbers well yes that's also a data type that swift can recognize and handle each of these they're known as a double and swift can also handle boolean values so things like true and false in swift this is known as bool now string int double and bool these are all called data types and it's how swift classifies data now these aren't all the data types that are available but these are the by far the most common ones that you'll be using at least in the beginning and it's a great starting point for us all right now let's take a look at creating and keeping track of data in swift there are many ways to keep track of data but two of the most basic ways are using variables and constants let's go back to our xcode playground and take a look at an example let's start with our hello string data here now this piece of data on its own is going to be useless to us unless we have a way to reference and track it and we can do this with a variable so let's see how we can declare a variable to keep track of this hello piece of data so we use the var keyword and that's for declaring a new variable and then we type the name of the variable this name is what we're going to use to reference that piece of data and recall it so i'm going to call this myvar and then we follow it with a colon and then after that we put the data type that this variable is going to track since the data that we want to reference is a piece of string data i'm going to put string here and then next we usually in the same line that we declare the variable we assign the data to the variable to keep track of and we can do that using the assignment operator which is just an equals symbol and then on the right hand side of that we put the data that we want to assign to this variable i'm going to take that and move that right here so essentially what this line of code is saying we're declaring a new variable called myvar we are saying that it keeps track of string type data and then we are assigning this hello string data to that variable it's kind of like we're attaching a label to this piece of data called myvar now whenever i want to reference that piece of data all i need to do is reference it by the variable name so let's give this a try we can use a special command that will output the data to the console area below here in the playground and that command is just print followed by two rounded brackets and in between those brackets you put the variable or whatever data that you want to output so i'm going to do that and then down here i'm going to stop my playground and execute all the code in it again and then as you can see down there it says hello that it's the contents of my var which is exactly what we would expect notice that when i reference my variable i don't need to use the var keyword anymore that was only to declare the variable and once i've declared my variable i can just reference it by its name and i can also reassign new data to it i can use it over and over again i don't have to redeclare it so for example after i declare it and assigned hello to it i can turn around and assign something else to it let's assign this piece of string data called world to my var and essentially what we've done here is we've told that variable instead to track this piece of data so what would you expect if i execute the code in the playground now we would only output world because myvar no longer is tracking that hello piece of data now one thing i want to emphasize is the data type of the variable if i specify that my var is a string type i can only track pieces of string data so for example if i had an integer like 100 and i tried to assign that to my var well i would get an error that's not allowed what i need to do instead is declare a new variable of the in type to keep track of this piece of in data so let's go ahead and use the var keyword and name it and then colon and then the data type that i want this to track and now that is completely okay let's try printing that out xcode is not going to help you autocorrect any spelling errors all right so we have world and 100. now as we're coding more together you'll start to notice different sorts of naming conventions like what you see here where my variable names start with a lowercase letter and then every subsequent word in my variable name starts with a capital letter so that's sort of just a standard naming convention you really could do anything you want but when you start coding more and working in teams it's important to have a standard that everybody uses and this is a common one all right now one more thing i want to talk about before we move on to the next topic is the fact that there are shorthands in xcode you don't really have to type in all the information for example here we're declaring that this variable myint is an int type and we're assigning integer data to it but the thing is we could actually omit that data type and simply assign 100 to it when we do that xcode can see that this is a piece of in data so it's going to assume that my int is going to only track in types now that same rule still applies i mean after xcode infers that this variable is in type because you've assigned 100 to it i cannot go and assign you know a string to it that's not going to be allowed because xcode has already detected that you know this should be an in type so same thing goes for up here i don't need to specify the data type if i'm going to assign a piece of string data to it right away because that tells xcode that this is going to be a string type variable so that's just a little shorthand to save you some typing all right so you learned how to declare a new variable assign data to it and recall that data by using the variable name you also learned how to assign new data to that variable let's talk about the other way to keep track of data constants so constants are just like variables except that you can't reassign data to it once you've assigned the first piece of data to it so let's take a look at how to declare a constant to keep track of this string data instead of the var keyword you use the let keyword and then the rest is just the same as a variable so we start with a constant name my const colon and then you guess that the data type followed by the assignment operator and then we're going to move that piece of data to the right-hand side of that assignment operator like that now let's try referencing this constant let's try printing out the data in my const as you can see it works as expected now let's try to do the thing that's not allowed let's try to assign something else to it and as expected we cannot reassign data to it because it is a constant now constants are useful it's an additional tool that we can use if we don't expect that piece of data to change and so we don't need to make any changes to it ever so when would you use a constant over a variable well it really depends what you're trying to do you'll probably find yourself using variables most of the time because of their versatility and because data changes however the best practice is to prefer constants over variables where it makes sense in fact xcode is smart enough to know if you use a variable and you never end up changing that variable it will suggest that you change that var keyword to a let keyword and use a constant instead all right let's do a quick recap before we wrap up the lesson you learned about the view update lifecycle and how swift code plays a part in it you learned about data types such as string int bool and double you learned about how to use variables and constants to reference data now i highly recommend that you go through the quiz and challenges for this lesson to practice what you've learned today there's actually some new training in those challenges such as how to perform math operations with variables also don't forget that you can print out the swift cheat sheet from the resources link in the top navbar and keep it handy there's no need to memorize anything you're making great progress so far and in the next lesson i'll teach you how to organize your code statements into functions alright i'll see you there hello and welcome in the previous lesson you learned about swift variables and constants you learn how to create some data and declare a variable or constant to keep track of it and if you did the challenge you also learned about math operations using variables well in this lesson you're going to learn how to organize and group together your code statements so that number one all of the code statements that you've grouped together can work together for a common task and number two once your code is organized into groups you can choose which group of code statements to run depending on what task you need to be done these groups of code statements are known as functions in swift all right now let's take a look at the view update lifecycle diagram from the previous lesson and see where functions might play a part in this life cycle remember that when the user interacts with the ui swift code captures that event and reacts to it well here we might have a couple of different functions depending on how the user interacts with our ui for example the user tapping a button might trigger the app to switch screens in that case maybe we'll run function a to perform that task or on the other hand what if the user taps on an item to see more detail then in that case we'll run function b to bring up the details screen now let's go over the code that performs the data retrieval for example we might have a function c that does the actual retrieval of the data maybe the networking code and it grabs the data and then gives it to function d as input and the responsibility of this function might be to process that data and turn it into a format that our app can understand so function d takes that data as input and it outputs the formatted data for our app now i could go on but as you can see functions are a basic component of swift programming it's everywhere so now let's go and see how we can create our own functions alright so here i have a brand new xcode playground and we're going to take a look at the function syntax and just in case i haven't explained it yet the word syntax is simply a word describing the structure or the grammar of the language so function syntax to declare a new function you start with the func keyword f u and c so it's a funky function and then you follow it by the name of the function and then a set of parentheses or rounded brackets and then a set of curly brackets inside the set of curly brackets you put your code statements anything you want to execute or run whenever we call this function so let me just put some statements here let's say declare two constants like this and then let's print you know a plus b so if i run this right now and execute all these lines of code nothing is going to happen you don't see any output and that's because we haven't actually called this function in order to call and to execute this function we just have to reference it by the function name so that's my f u n c followed by the pair parentheses and that is how you execute all of the code in between here so let's try this out i'm going to stop executing and then run my playground again and we get 30 as we expect if i wanted to run those set of instructions again then i can just simply call it again and if i print it out now it executes that code twice now i want to go back to that view update life cycle diagram for just a second because if you notice back in that data retrieval area i said that we might have two functions c and functions d where c would fetch the data and pass it into d as input parameters so that function d can work with that data and format it how we need so a function being able to accept data into it to work with it is a very powerful feature let's take a look at how we would declare a function that would accept some sort of input data all right so i'm going to erase these two lines and i'm going to modify my function here instead of declaring two constants a and b i am going to specify that a and b have to be passed into the function so the way we do that is through the use of function parameters in between the two rounded brackets that is where we would specify all of the parameters we want to be passed into this function you can pass in multiple parameters but actually let's just start with one let's just start with a so first i would put the name of the parameter so i would want that to be a and then i would put colon specified by the data type that this parameter is since i expect it to be int i'm going to declare this parameter as a followed by the data type int and then i can erase this constant from here as you can see this is almost like a variable declaration or a constant declaration except without the var and without the let here we're specifying that whenever this function is called one int parameter needs to be passed in along with it and it's going to be referenced by this parameter name a inside this function so now you can see that nowhere did i declare a variable a or constant a but i can still put a as part of my equation a plus b because a is being passed in as a parameter so let's take a look at what calling this function would look like now i'm going to rely on autocomplete so i'm going to type in m y f u n and you can see as soon as i do that it detects my function here so i'm going to go ahead and click that and you can see that now in the process of calling this function i also have to pass in an integer piece of data so i'm going to go ahead and pass in let's pass in something different let's pass in five you can see here there indicates this is the parameter that i'm passing in let's go ahead stop and execute run my lines of code again and this time the output is 25 because 5 was being passed into the function plus 20 is 25. now going back to the view update lifecycle diagram again function d accepts input as a parameter but it also returns output so that is another very powerful feature of functions being able to take in some input work with that data and provide some output back to the caller of the function so let's take a look at our playground and see how we can specify that a function should return some data so to modify this function to indicate that it will return some data we go up here right after the rounded bracket for the parameter and just before the start of the curly brackets in here we write a dash followed by a greater than symbol which makes sort of like an arrow like output and then we specify the data type of the output so what i'm going to do is i'm going to output the sum of a and b instead of printing it out to the console so i'm going to erase this line and then i'm going to output an int so that's where i specify that right after that dash greater than symbol now you can see that xcode throws some errors now because in addition to specifying that your function returns an in you actually have to return an int inside of the code statements so as the last line of our code we can use the return keyword meaning that this is the data we're going to return from the function and then we specify the in data that we want to return so i'm going to return a plus b and all is well now keep in mind that whatever the data type you specify up here in the function declaration that is the data type that you have to return if there's a mismatch for example if i specified that this function returns an int but i go ahead and return a string like a piece of text you're going to see xcode complain about that as well because that is that is incorrect so we're going to return a plus b and we're going to turn in so why don't we run our function now and see what happens nothing happens well what's going on i'm returning a plus b so here's what's happening calling this function is returning that data but i need to somehow reference and track that data right and that's what a variable is for so i am going to declare a variable up here var let's declare constant actually since i'm not going to change this let my sum equals the result of that function so you can understand this code statement right we're declaring a constant called mysum and then we are calling this function on the same line that returns uh 25 and we're assigning 25 to my sum so now i can print my sum and let's double check that we get the output there we go now before we move on there are two very important things that i want to mention so this return statement actually ends the execution of that function so once this return statement is run execution returns out of that function so any code statements that you put down here like let's say i had return a b right there and i printed a plus b right here that print statement is not going to be run see code after return will never be executed so that's just important to keep in mind that when you write return and it executes that line of code the execution stops and gets out of that function another thing that i wanted to mention is this return type so earlier when i told you that declaring a function didn't have a return type like that well it actually did it was just that the return type was void and void means nothing so let me let me do a basic demonstration actually let me just declare another function down here i'll just call this myfunc2 see back then i told you this was a basic declaration of a function but actually that was a shorthand the full declaration actually has a return type of void like that if you're not going to return anything but it's just that when you don't return anything then you don't actually have to specify the return type of void so so i just thought i'd mention that so you know what that void keyword means so if you see some function that has a return type of void you know that that basically means that it's not returning anything all right so now let's reset a little bit it's starting to get a little messy so let's erase everything except that except our function right here now i want to show you how we can pass in multiple parameters so instead of specifying b here let's put b into the parameter listing here and have it be passed in instead okay so let me erase this line of code so that we get b from up here well how do we add another parameter to this one what you do is simply put comma and then declare another parameter for your function easy right we're going to name this one b followed by colon and then the data type of b that's going to be another integer all right so now let's take a look at how we call this function with two parameters my func you can see that here now you just specify oh one quick thing is when you're calling functions an easy way to just fill in the parameters in the list is by pressing tab that just brings you over to the next parameter that you have to fill so i'll put two and three let's execute all of this code and we get a result we get no result remember i erased my line of code so why don't we just print out the result instead of assigning it to a variable this time so i'm going to go ahead and directly pass that function call into my print statement that's going to print out the output of my function let's go ahead and run that code and we get five now obviously you can have more than two parameters just put a comma in between each parameter in your function and another thing i want to mention that's pretty cool with parameters is that you can specify a default value for a parameter so for example for parameter b i could make this an optional input data by specifying a default value for this parameter if i do that that means that when this function is called passing in data for parameter b is going to be optional let's take a look at how this works so after i specify the data type for my b parameter i can put an equal sign and then i can give it a value let's say zero is the default value if b is not passed in then b is just going to be zero now let's erase my function call and let's try calling it again and take a look at what the autocomplete menu shows us here you can see that there are two different forms of my function call now one is with parameters a and b so i pass in both pieces of data and one is just simply passing in parameter a if i do that b is just going to be zero but if i pass in both of them let's say i pass in 2 and 3 again then b is going to be 3 instead of 0. so that's one way to make your parameters optional now i want to talk about argument labels as you can imagine the more parameters we have the more confusing things are going to be in terms of these function calls especially when it comes to parameter names like a and b well sometimes a and b makes sense in the context of the code inside of the function but to the caller of the function a and b they don't mean anything so there's a special feature called argument labels and let me show you what that looks like so i'm going to declare a new function right here i'm gonna call it myfunk as well and i am going to actually you know what i'm going to just copy this function and make a copy of it and show you how how argument labels change it so an argument label goes in front of each parameter so each parameter can have its own argument label and you're essentially just putting a name in front of that parameter i'm going to call this first parameter i'm going to give it a an argument label called first number and for my for the second parameter i'm going to give it an argument labeled called second number so that's literally all it is an argument label is a name in front of the parameter name separated by a space let's take a look at how this affects the function call if i type in my func you can see here i still have the these first two ones a and b and that's from the first function up here um but look down here i have first number and first number and second number and this corresponds to my second function right here because uh the second number is still optional right because i have this default value there so if i call that one my function call becomes this my func first number one and second number three however internally inside of that function i'm still referencing those parameters using a and b so argument labels they're they're a way for you to distinguish the naming for a function call um versus how it's referenced inside the code whereas if you omit the argument labels like we've done up here then the parameter names are used for both the function call and also the referencing of those parameters inside of the function so hopefully you notice the difference here one cool trick you can do with argument labels is if you don't want to show any text in your function call at all you can use an underscore as your argument label so if you do this let's see what happens to your function call so my funk you can see here these two correspond to what i've done right here using underscores for the argument labels so if you use an underscore for argument label the function calls just become my func and then the first piece of data comma second piece of data there's no parameter names there's no argument labels in your function call at all so this makes things really succinct and really neat and tidy but it also makes things more confusing if it's not clear what those parameters are supposed to be for so there's a lot of versatility here my personal preference is simply to do it this first way and i don't usually specify any argument labels at all and i simply use the parameter names okay last thing i promise before we end off with functions is i don't know if you've noticed but we've declared two different functions here both with the same function name we can't do that with variables right if you try to declare variable a and then variable a again then you're going to get an error on the second one the next code is going to complain you cannot redeclare variable a for functions things are a little bit different functions have what's called a function signature and that is comprised of the function name the parameter listing and then followed by the return type so let's type myfunc and take a look at what the autocomplete menu gives us as you can see all four of these variations have the same function name called myfunc but because the parameter values the argument labels they're different xcode is able to discern and to know which function we're trying to call right so if i call this one and i don't specify any parameter names or any argument labels it knows that i'm trying to call this second one right here because you know this method call this function call i mean it doesn't match this first one whereas if i do my func and i specify parameter labels a and b then it definitely knows that i'm trying to call the first one because this call this parameter listing here matches up here okay so i promise you that we went a little deeper than you probably need to know right now by showing you all of these um options and and ways that functions can be flexible as we code together more you'll see me just using more basic forms of functions but at least hey now you know a lot more and i'm sure you can appreciate how powerful these functions are all right this lesson was pretty action-packed let's do a recap before we wrap up the lesson first of all you learned how to declare basic functions and then you learned how to declare functions which accept input data as parameters furthermore you learn how to declare a function with multiple parameters and again functions wouldn't nearly be as useful if it couldn't output data right you learned how to do that using return types and the return keyword you also learned about argument labels and finally you learned about function signatures now to really get the hang of functions and to reinforce your learning make sure you do the quiz and challenge for this lesson and don't forget you have a swift cheat sheet that you can get from the nav link at the top of your student dashboard and print it out and keep it handy you don't need to memorize anything you're making great progress and in the next lesson i'll show you how to organize your functions into structures so i'll see you there hello and welcome so far you've learned about variables and constants and how they're used to keep track of data you've also learned about functions for organizing and grouping together your code statements well in this lesson you're going to learn about structures or structs for short and these are the basic building blocks to represent your data or to represent something in your app structures bring together the functions the variables and constants everything you've learned so far in the last two lessons all into a neat little package all right let's dive in and see what it's all about now let's do a quick recap first you had code statements like these and then i showed you how to use functions to organize and group them together now with structures you can group together your functions you can also have variables and constants keep track of data inside your structure but outside of any function and we're going to talk about these a little later in this lesson now let's take a look at our view update lifecycle diagram again for the view code that represents your ui you might create a structure to represent your home screen and all of the view code for your home screen would go into that structure if you had a second screen in your app you might create another structure for that second screen and all of the view code for that second screen would go into that structure in this case each structure represents a different screen in your app now let's move over to the data retrieval part of this diagram you might create a structure and call it a data manager and you're going to put all of the code and functions related to retrieving and processing the data inside of that data manager structure in this case the structure doesn't represent a screen in your app instead it represents a crucial component of your app so as you can see structures are very flexible and lightweight and they're used all over your app now let's go into an xcode playground and take a look at how we can declare our own structure all right so here i've got a brand new empty playground let's take a look at how we can define our own structures first you start with the struct keyword followed by a space and then the name of your structure so i'm going to call this one my struct and then you put a space and you open up a set of curly brackets inside the curly brackets you would put all of the code in your structure and that's it we've declared our own structure now before we move on and take a look at what's inside the structure i want to point out the naming convention of the structure notice that i've started it off with a capital letter this is the standard convention this is different from the camel casing that we used for the variables and constants and the function names those started with a lowercase letter and it had each subsequent word starting with a capital letter whereas for structures it starts off with a capital letter and then each subsequent word has a capital letter all right now that you know about naming structures let's go inside and take a look at how we organize the things inside of the structure so usually at the top of the structure inside the curly brackets we would declare here all of our variables and constants used to track data that is related to this structure now these have a special name as i mentioned earlier and we will get to that later on in this lesson so up here after you declare all of the variables and constants tracking data for the structure the next section you have are all of the functions related to the structure now there are no clearly defined sections in a structure you know all of the code really just goes in between the curly brackets but usually this is how you would organize all of the different pieces of code inside of your structure so at the top variables and constants and then at the bottom all of the functions so as you can see structures are great for grouping together functions variables and constants all related for one thing but structures are usually meant to represent something in your app in the view update lifecycle diagram that you saw earlier we saw examples of a structure being used to represent a screen of your app as well as to represent a crucial component of your app like that network manager so why don't we do another example and i'll show you a structure that is a little bit more concrete let's model it after something so earlier in the view update lifecycle diagram you saw that we could use structures to represent a view in our app so let's go with that let's have a hypothetical chat app and let's say that this structure represents my chat view so i'm going to change the name of my structure to chat view now under variables and constants i might have a variable to keep track of the message like the chat message that i'm typing into the chat box so i'm going to call this message and the type of data this would be would probably be a string and i'm going to assign it an empty string nothing in between just two quotes so that's what's known as an empty string now under functions i could have groups of code that would perform different tasks on this screen for example maybe when the user taps on the send chat button it would execute some code to send the chat message to the server so i would declare a function so that's funk followed by let's call this send chat and two rounded parentheses and i'm going to open up a pair of curly brackets and inside here i would put the code to send the chat message and then in between the variables and constants and the functions i would have the view code for this screen that's all of the code for the ui so now in this chat view structure we have a neat little package containing all of the code for that one screen now earlier i mentioned that the variables and constants that you declare up at the top of the structure they have a different name so now i want to tell you what that is this variable declaration that i have up here message this is known as a property of the chat view structure if i had additional variable or constant declarations those would be known as properties of the chat view structure as well and down here functions actually also have a different name a function inside of a structure is known as a method of that structure so this send chat function is actually a method of the chat view so now let's just update our comments here so that we use the proper terminology instead of variables and constants up here i'm going to rename this well not rename but just retype my comment and call those properties and instead of functions these are going to be called methods just so we're clear now inside of a structure properties and methods can actually work together to fulfill the duties of the chat view let's take a look at some of the special ways in which they can work together now let's take a look at this send chat method for instance if we were to write the code here to send the chat message it sure would be handy if we could access the actual message in this message property right well we actually can so if i wrote something like this print and then inside the parentheses i put the name of the property in fact i can access that data and the reason for this is because this property is declared in the scope of this structure so the scope of this structure is anything in between these two curly brackets essentially the opening and closing curly brackets of the structure so any of the methods that i declare in here for instance if i declare another one let's call this one delete chat because these two methods are also in the same scope you know it's inside of the scope of the chat view i am able to access the property the properties that you declare up here are accessible to everything within the same scope so that includes all the methods that are declared down here now i have to say that each method has its own local scope so this send chat method has a scope inside here and this delete chat method has its own scope in between these curly brackets so if i declare a variable inside my send chat method let's say var prefix equals chris says and then let's say i use this prefix and i prepend it to my chat message so the entire chat message would be chris says and then something so maybe i'll print prefix plus message to get that sort of effect and i wanted to do the same thing inside delete chat if i try to access the prefix variable and type print prefix plus message down here inside the delete chat method you'll see that it xcode complains and it says it cannot find prefix in the scope because this variable is not declared in the same scope it's declared inside the scope of send chat so how would we fix this well one of the ways we could do that is to turn this prefix variable into a property that we declare at the top of our structure you know move it outside of the scope of sendchat and put it up here into the scope of the chat view instead so now that i'm declaring my prefix as a property of the chat view you can see that the errors go away and i can access this prefix property inside both send chat and delete chat methods now i want to talk about another type of property first let's define what these properties up here are these are called stored properties and the reason is because when you access these properties and you reference them by their property name it just returns to you the value it's stored there's another type of property where when you access it it needs to compute or calculate the value before it returns it to you so let's take a look at what this second new type of property looks like so let me start by erasing this prefix property up here and deleting that and then i'm going to declare this new type of property it starts off just like a normal one you use var space and then the name of the computed property i'm going to call it message with prefix followed by the name instead of assigning it some data you open up a set of curly brackets and here you can put the computational code to compute the value that you will return when this property is called one thing though because the value is not immediately known xcode can't infer what the data type is so you actually have to specify the data type after the computed property name so after message with prefix i'm going to put colon and i'm going to put string because that is the type of value that this property is going to return this is different from this stored property up here message where i can actually use the shorthand and erase the data type so it's just var message equals string and i can do this because i am immediately assigning a value to that property so xcode can look at that value and it can determine and infer what the data type for that property should be with a computed property i have to explicitly specify the data type all right so for my computed property message with prefix let's take a look at the code inside of the curly brackets here i am going to use the return keyword just like with functions right i'm going to return chris says so this is a string plus message so now in my send chat method instead of printing prefix plus message i can just return message with prefix same thing for delete chat instead of prefix plus message i'm going to return message with prefix so every time this property is accessed it is going to run the code inside these curly brackets and return that as the value for that property it needs to compute it that's why it's called a computed property now with computed properties there's also a shortcut if there's only one line of code in here then i don't need the return keyword because xcode can assume that this single line of code will output the data that i want to return for my computer property so i can actually just delete the return keyword however if i have multiple lines of code then i would definitely need that return keyword because xcode doesn't know which line of code is meant to be the value that gets returned so for example inside my computed property if i say let prefix equals chris says and then down here i have prefix plus message it's not going to know uh which code statement returns the value so i actually have to use the return keyword like that and that's going to be fine now as far as computed properties go there's definitely more we can talk about but this will suffice for now in later chapters in this course we'll definitely go over computer properties again all right let's do a quick recap before we wrap up this lesson you learned how to declare a basic structure you learned about properties and methods in a structure you learned about scope and you learned about computed properties as well now i know that the hard part is wrapping your head around these concepts as we code further together you're going to see these concepts put into practice to help you remember what you learned today i highly recommend that you take the quiz and the challenge for this lesson and don't forget you have the swift cheat sheet as well i just want to say one thing before we end you did it if you're brand new to coding these three lessons were the mind-bending ones in the next lesson i'm going to show you how these concepts relate to your actual xcode project alright i'll see you there hello and welcome so you've learned a lot of swift in the last few lessons you started with variables and constants and data types then you learned about functions and then you learned about structures that you can group all of those things together to represent or model something in your app now this lesson is going to be the final piece of the puzzle not saying you're going to be a swift master or anything but by the end of this lesson you'll see how all of the concepts and code fits together and works together inside of a swift ui app all right with that said let's dive right in all right so let's start with an empty playground do you remember back then when you learned about functions and i taught you how to declare a function by using the func keyword followed by the function name let's say my function followed by a set of parentheses and then a set of curly brackets and inside of the curly brackets we would have the code for the function but this is just a function declaration the no code is run nothing happens it's not until we call the function that the code inside of that function gets executed right so i would call the function saying my function and then parentheses if i run my playground right now you can see that it outputs hello into the console so structures are like that as well when we declare a structure using the struct keyword followed by the structure name so let's say my structure followed by a set of curly brackets and then we put the code inside of the structure let me move my function in here let's declare a property up here var message equals hello and then let's print out my property message inside of my function this is just a declaration of a structure it doesn't actually do anything think of it like a blueprint for a building in order for us to use this structure we need to bring it to life we need to create what's called an instance of the structure you can think of it like turning this blueprint for a building into an actual building so how do we go about creating an instance of this structure well that's easy you just write the structure name followed by a pair of parentheses like that now just in case you're still fuzzy about the concept of creating an instance of a structure let me give you a couple of different analogies to help you try to understand this concept some people find it easier when i say that declaring a structure or the declaration of this structure is kind of like a blueprint for a car or an architecture plan for a house using that blueprint or using that architecture plan i can create cars and i can create houses and those are the actual objects whereas the blueprint or the architecture plan is more of like a template it simply describes how that thing is going to work once you bring it to life so that's what's happening right here this is a declaration of a structure it describes all of its properties and functions you know the things that it can do and then it's only until we bring it to life by creating an instance of it that we can actually use it so now that we have created an instance of it let's explore what we can do with it now first of all we need to keep track of this instance because it's considered a piece of data we need to keep track of it and have a way to reference it so let's create a variable called i'm just going to call it a for simplicity's sake and i'm going to assign that new instance to my variable a hey wait a minute if this instance is a piece of data then what's the data type of this piece of data and what data type is this variable holding well the data type is the name of your structure that's right so i can actually change my variable declaration from var a to var a colon my structure yes your structure is its own data type so this instance that you've created the data type of that is my structure now this little instance has superpowers because we've designed it that way it can hold data in its message property and it can output that message using the my function method so how can we go about accessing those things of this instance well that's where dot notation comes in let's take a look at what dot notation is so let's reference the variable a followed by a dot or a period and as you can see from the autocomplete menu you can choose message which is accessing the property or you can select my function which is going to execute the code in that method so using dot notation you can access the properties and the methods of that instance let's try this out so first of all i am going to assign something to the property of this instance i am going to assign let's say hi and then i'm going to print out a dot message just to show you that i can indeed access this property and i can print it out next instead of using this print name in here i'm simply going to call the method of that instance i'm going to call my function and i'm going to run this code again and we still get hi because the code inside of this method actually just prints out the property now this little instance is quite the action hero isn't it it can do all of the things that we designed it to do now because this structure declaration is like a blueprint or an architecture plan that means that we can create as many instances of it as we want so let's go ahead and create a second instance this time i'm going to declare another variable var b to store another instance of my structure now the important thing to note is that these are completely independent instances going back to the car blueprint analogy it's like the car factory made two cars from the same blueprint those two cars are treated as two different cars same thing here i've just created two instances of my structure for example if i assign a dot message to be hi and then i print out b dot message or let me assign something else to b dot message and i print that out you'll see that for a dot my function calling that method it prints out hi and when i print out b dot message it outputs world to the console so you can see that each instance keeps track of its own values inside the message property now you know that you need to create an instance of a structure in order to use it let's take a look at how instances of structures can work together now to use an earlier example from the previous lesson suppose i have a chat view in my app so i've declared a structure to represent this view it groups together all of the properties the view code and the methods related to my chat view and suppose that i had another structure to group together all of the networking code or the database code to save the data let's declare something like that here so struct let's call this the network or let's call it the database manager okay and suppose that i had a method in here so func let's call this save data and the input parameter for this is the data that we want to save so let's say let's declare a single parameter called data and make it a string type and it returns a value it's going to return a boolean value true or false indicating whether the save was successful or not true for successful false for unsuccessful and in real life it wouldn't be feasible to really return a result instantly like this because depending on network conditions and other factors you don't want to wait around for the data to save so you don't want execution to stop but for the sake of simplicity let's just say that we can return a result right away so in here this this code saves the data and returns a boolean result so in this example i'm just going to return true so i'm just going to return a hard-coded value because i'm not going to implement this method the main thing i want to show you is how the chat view is going to use the database manager to save the message so back in the chat view in this send chat method for example i could create an instance of the database manager so let's say var db equals database manager followed by a set of parentheses and just like that i've created a new instance of that database manager and now if i wanted to save my message i would call its save data method so db dot save data and i would pass in my message property as the input data i'm going to go ahead and pass in message but remember when i call this save data method it returns a boolean value for me to indicate whether that save was successful or not so i can assign the output of that method to a constant i'm going to call this was success right so i'm going to assign that boolean output into a new constant called was success or maybe i'll just call it successful and then down here i can write some code check the successful boolean value if unsuccessful show alert to user now in future lessons you're going to learn how to write these statements based on conditions but for now this comment will have to do the main takeaway for this example that i'm showing you is the fact that within the send chat method of the chat view structure it is using another structures methods by creating an instance of it so that's how instances of structures can work together to make your app function and this is essentially all your app is it's different instances of structures working together to produce the views to handle the user input and to run the logic now i want to talk about access levels for a second suppose for example in my database manager i had some sort of information that i was tracking as a property that only the database manager needed it wouldn't be relevant to any other structure maybe it is a server name or something like that so let me just write a new property in my database manager called server name and i will assign to it a string called server one now this property wouldn't be interesting to any other structure but as you can see in the send chat method i've declared this instance of the database manager if i write db dot using dot notation i can access that server name property and sometimes you might not want to expose these things so what you can do is you can specify an access level in front of that property so in front of var server name that property i can put the keyword private so now it becomes private var server name and by doing this it keeps that property accessible only within the scope of the database manager so as you can see i can still access server name inside of the save data method right it's in the same scope but in the send chat method of the chat view down here if i use dot notation again for my instance you can see that i cannot access that property anymore i can't see it and furthermore you can actually do the same thing with functions so i can put private in front of the funk keyword and now you can see that xcode complains i cannot run this method from the sendchat method of the chat view now it's a good practice to be aware of which properties and methods need to be accessible to other instances and other structures and mark everything else as private doing this is a proactive way to prevent unexpected behavior and bugs from cropping up alright and now for the final piece of the lesson i want to relate everything that you've learned so far back to a swift ui app inside xcode so let's go ahead and do that alright so now let's go ahead and start a brand new ios app project i'm just going to name this test project and make sure that interface is swift ui and lifecycle is swift ui app language is swift and we're good to go so i'm just going to save this on the desktop and we're going to first jump into contentview.swift now i'm just going to change this to iphone 12 and i'm going to hit resume but the important part is the main thing i wanted to show you really is the code right take a look at this struct you know that that means that content view is a structure there are some keywords and bits of code that we're going to gloss over for now because we haven't learned that yet and now is not the right time to go over it so i will gloss over a couple of things but i really want to point out the concepts that you have learned so far and show you where they fit in so this is a structured declaration let me just collapse this code for a second there you go so you can see that this is a struct the content view is the structure name followed by colon view and we're going to get to this in just a second and then you can see the curly brackets containing all of the code for that structure all right so let's expand it again and let's take a look at what else we've got okay down here we've got the var keyword so that's the start of a property the name of this property is body okay so after that we've got colon and then we've got some view now we're going to get to this again in just a second but you can see that there is a set of curly brackets in here so that tells you that this is a computed property so let me collapse the code again and you can see that indeed this looks like a computed property var body data type and then a set of curly brackets inside is the code that gets computed or calculated to return the value when this property is accessed so can you see all of these concepts that we learned in the last four lessons are they coming back now i want to talk about this view and some view so let's talk about this colon view in the declaration of the structure first judging by how you've used the colon before you might think that this is the data type for the structure but not quite that doesn't really make sense does it because remember the name of the structure itself is the data type for instances of that structure so what is this colon view after the structure name well when you're declaring a structure the colon after the structure name indicates that this structure follows a protocol in this case it follows the view protocol so what do you think about when you hear the word protocol well for me i think about it as a set of rules or a set of actions for example kind of like the fire emergency protocol that a building might have for what to do when a fire occurs or like the building code that a house developer has to follow to build a house that is safe similarly in swift a protocol is a specification or a set of rules that a structure has to follow this colon view part indicates that this content view follows the view protocol in formal swift terminology content view conforms to the view protocol now one important thing i have to mention is that writing colon followed by the protocol is saying and declaring that you conform to the protocol but do you actually it's kind of like raising your hand in and declaring something but do you actually follow the rules of that protocol and so the code inside of this structure actually has to satisfy the specifications for that protocol in this case for the view protocol to conform to it we have to have a body property that returns some view as you can see here our content view structure does indeed satisfy that rule so that's why it conforms to the view protocol so now that you understand what protocols are you can see that the data type for this body property is actually any value that conforms to the view protocol yes in this case the data type for this property isn't actually a data type but it's actually any data type that conforms to a certain protocol in this case the view protocol so inside of this code for this computed property it needs to return some instance that conforms to the view protocol let's open up this code and see what we have so what do we have here well we have a single code statement and remember what i said about computed properties if it's only a single code statement then you can omit the return keyword but you know i'm going to explicitly specify it so that it's clear for you so what's happening here it looks like we are creating an instance of a text structure now one way to figure that out is if you go into the utilities pane or the inspector pane and you go into the quick help tab right here and you just put your cursor over the thing you want to look at so i'm going to click into this text so as you can see here indeed text is a structure so we are creating an instance of the text structure however you'll notice that creating this instance is different from how we did it before because we used a empty set of parentheses here when we're creating an instance of this text structure we're passing in some input data so yes you can actually pass in input data as a parameter into the creation of an instance of a structure these are called initializers now we haven't talked about that yet and we will in upcoming lessons but for now just understand that there is a way for you to pass in input data into the creation of an instance of a structure so that's exactly what's happening right here now you might be wondering does this text structure conform to the view protocol well it must right because according to this body property whatever is returned for this computed property has to conform to this so again let's dive into the quick help so i'm going to hover over text i'm going to go down and in fact i'm going to open up the developer documentation now if you're using i think xcode 1 12.1 there was a bug that crashed when you tried to open this window so you just have to update xcode if this crashes for you okay so this is the documentation for text you can see that it is a structure and if you scroll all the way down i'm going to skip all this stuff because i want to just show you that it conforms to two protocols actually but what we're interested in is it does conform to the view protocol all right and another thing i want to point out is that this remember this from early on this is a modifier and now to you it must look pretty familiar right because it looks like we're calling a method this is dot notation right here we are creating an instance of the text structure and then we're calling the padding method on that instance see if i put it on the same line it might look a little more familiar for you right so i hope the dots are starting to connect no pun intended okay so to relate this back to the previous structures lesson where i showed you um how to declare a structure we had a couple of different sections right so at the top here we would declare our properties and in fact this body property is considered a property right but it also contains our view code so this would be where our view code goes and then down here we would declare the methods for this structure okay so i think you understand that this structure called content view represents the main view or the main screen of this app but then we say that structures by themselves don't really do anything you need to create an instance of it for it to work well where are we creating an instance of content view well for that we need to drill back up to the entry point of the app which is this right here so you can see this by itself is also a structure and the name of this structure is the name of your project and it conforms to a protocol called app so let's look at the quick help and see what this app protocol is all about create an app by declaring a structure that conforms to the app protocol implement the required body computed property to define the app's content now we have another body computed property i'm going to skip over some of this scene and window group stuff i want to point out that this is where we are creating an instance of that content view structure so do you see how everything fits together furthermore let's go back to content view and let me show you something else so for this i'm going to open up the canvas again and i'm going to resume the preview look at this structure down here this is what is powering the preview that you see here this structure isn't really used as part of your app it's only for previewing in the canvas right here so it conforms to the preview provider protocol and it's got a property called previews static keyword ignore for now we'll explain that in a future lesson and down here you can see that an instance of your content view structure is being created and that's actually what's being shown here in fact i can apply modifiers to this instance and it's going to change what we have here so i can use dot notation to call modifiers which now you know are just methods right of that view or of that instance actually instead of doing that why don't we use the visual way and see how it changes the code so why don't i preview this i change actually i'm going to change the scheme to dark mode so you can see it adds a modifier to that instance let's also change the device to ipod touch you can see it adds another modifier called preview device now what happens if i create another preview because you can click on this button right here and it's going to create another preview down here you can see what happens to the code well it created another instance of content view and it's got its own modifiers now this is grouped together by a container a view container called group which we haven't really covered yet but we will in the future just know that it groups together views so this instance of content view is for this one up here and this instance is this one down here see i can change this scheme to light and you can see it changes that here and i can change this device to iphone 12 and it changes that modifier there so they're independent instances phew that was a lot to take in and that's why i never recommend for you to memorize anything the more practice you get the sooner it's going to become second nature to you let's do a quick recap shall we you learned how to create instances of your structure you learn how to use dot notation to access the methods and the properties of your instances and you also learn about access levels so you can control which properties and which methods can be accessed with dot notation finally you saw how all of these concepts relate back to a swift ui app in xcode now you know what i'm going to say next reinforce your learnings with the quiz and get hands-on practice with the challenge and hey if you don't feel like you need the challenge do it anyways just to prove me wrong now in the following lessons we're going to go back to our war card game and take all of this newfound swift knowledge and bring that war card game to life in the next lesson i'll show you how to use the button element to handle user interaction alright i'll see you there hello and welcome in the previous few lessons you learned the basics of swift programming and i showed you how those concepts apply to your xcode project now let's get back to swift ui and views specifically today i want to talk about the button view let's dive right in all right so i've got a brand new swift ui project here i thought we would take a look at creating some button instances in a fresh project together before we go back to the war card game to use the button instance there so let's go ahead and delete this text view right here and create some button instances a button is a structure just like that text was and we need to create a button instance in other words we need to instantiate a button that's just another way of saying it so let's go ahead and type button followed by opening a left rounded bracket and that's going to bring up our autocomplete menu there are a couple of different initializer methods we can use to create a button instance and these initializer methods remember are just different ways of creating an instance while passing in some data two of the most common ones that you're going to be using is this one right here where you pass in a string and this data type string protocol just means anything that conforms to that string protocol and a piece of text does this one will allow you to just pass in a piece of text to use as the button label and it will also allow you to pass in a block of code to run when that button is tapped on so let's take a look at these parameters in more detail so this first parameter for the label of the button is pretty straightforward here you just pass in a piece of text i am going to call this button click me and if we update actually our preview won't do anything yet before we specify the second parameter the data type for this action parameter is something that you haven't seen yet but it kind of looks like a function signature without the function name right this is called a closure and simply put you can think of it as a block of code or like a function without the function name you pass in a block of code as a parameter and when the button is tapped on it's going to run that block of code again this is called a closure so let's take a look at how we can specify the closure as a parameter now one of the easiest things you can do is you can highlight this parameter and just hit enter and xcode is going to automatically open up a closure for you to type your block of code in but i'm not going to do that right now because i want to go through the steps and really break it down to you and show you what exactly you're specifying and then at the end i'll show you what happens when you do hit enter and just let xcode open the closure for you let's specify that closure manually for now all right so the type of closure that this expects is the simplest type that you can see it accepts no parameters these two brackets right here these two rounded brackets that is a parameter list just like you would have when you're declaring a function but it's empty so there are no parameters and then next you see a dash followed by a greater than symbol and you know that that means return type right and it returns void void means nothing so it doesn't return anything and it doesn't accept anything it's very simply a block of code all right so now that you know the type of function that it's expecting let's go ahead and specify it so i'm going to delete that and i'm going to open up a pair of curly brackets now i don't need to return anything i don't need to specify any parameters it's very simply just a block of code so you can specify that with just a set of curly brackets and in between those curly brackets you put any code statements you want so i'm going to just print out hello world and that is your completed button let's run this project and see what happens okay so we have a button in the middle that says click me when i tap on it it runs the closure it runs the code in the closure and you can see that in down there in the console it does print out hello world every time i click this button all right now let's go back to our xcode project because that's only one way to instantiate a button i'm going to add a comment here and call this button instance with closure okay and then i'm also going to put this inside of a v stack actually i'm going to show you a shorthand a cool way to do it i'm going to put in inside of v stack because i want to show you a couple of other ways to create buttons so we're going to create a couple of buttons together go ahead and command click on this button and you can just simply choose embed in v stack when you do that it puts the element into a v stack for you although it it failed to move my comment there so let's put that right there all right so we've got one button and i want to show you the same button but with the shorthand there's something called the trailing closure let me show you what that means so button instance with trailing closure i am going to copy and paste the button we just declared and create another copy of it so if in a parameter list the last parameter expects a closure there is a shorthand and how it works is you take that last parameter out of the parameter list and you simply put the closure after the method call let me show you what i mean so in this parameter list the closure is that last parameter right so this is a prime candidate for a trailing closure shortcut i take the closure itself so i'm going to cut this out of the parameter list and i am simply going to add a space after the ending rounded bracket and then just paste the closure like that and then i can go ahead and remove the parameter label or the argument label out of that parameter list like that and these two button declarations are exactly the same thing it's just that they are written differently one is specifying the closure inside the parameter list and the other one is specifying it using a trailing closure and this is why i wanted to show you this manually instead of just letting xcode open a closure for you because when you let xcode do it it's going to recognize that that closure parameter is the last one and it's going to turn it into a trailing closure for you automatically so let me show you that if i declare another button let's use the same one click me and then i tap on that action parameter and i either double click it or i hit enter and let xcode open up the closure it automatically changes it into a trailing closure so i thought that would be really confusing for you if you'd never seen that before and so at least now you know uh what a trailing closure is and why you know xcode does this for you okay so that is just creating one type of button both of these ways are to create buttons where you just have a piece of text as the label but what if you wanted your button to be an image or you know an icon or something like that not just a simple piece of text well there is another initializer method for the button that we can use for that so let's take a look at that button instance with um with label view so let's go ahead type button open up a bracket and now let's take a look at this other initializer method with an action and label parameter creates a button that displays a custom label and you can see from the parameter list that the first oh let me let me go back to that autocomplete menu taking a look at this parameter list now you can see that this action closure parameter is the first parameter and then the second parameter is a label now for this label parameter you can return any view that you want to represent your button so let's go ahead and choose this initializer method you can see for the action closure right here if i double click it it's not going to change into a trail enclosure and the reason for that is because it's not the last parameter in the parameter list so that doesn't qualify to be turned into a trail enclosure okay so when this button is tapped again i am just going to print out hello world into the console but for the label you'll notice that i have some freedom to specify what sort of view i want to return so here it's just returning a text view with a simple piece of text here called button but i can i can return an image view for example i could return a stack of different views you can return anything you want let me just resume the preview here so you can see the different buttons we've declared okay so what i'm going to return here is maybe let's return an h stack and i'm going to return a text that says edit and i'm also going to return an image in front of that and for this image i'm going to specify i haven't added any images to our asset library but i'm going to use something called an sf symbol now we haven't gone through sf symbols yet we will do so in a future lesson however sf symbols are great because they're basically an icon set that comes with xcode that you can just use in your apps and these there are very special features of these sf symbols that we will go through in a future lesson in this course there is a free mac app called sf symbols that you can download where you can browse all of the different symbols uh that are available to you for free so for example i'm just going to use this pencil one each of these has a name which you can simply specify and you'll be able to use it so for the image the initializer to use if you want to use sf symbols is called system name and then you specify the name which you saw underneath the icon the pencil i'm just going to put pencil right there and you can see that that icon appears all right so now let's run this app in the simulator and take a look at what happens okay so i can tap this one it says hello world tap that one it says hello world tap this one also says hello world those are the the closures that i specified for all of the buttons all right now you know how to specify a simple button with just the text for its label you know how to specify a button which you can use any view as the button we're going to go back to our war card game now and turn that deal button image into an actual button alright so now i have the war card game that we were working on all the way back in was it lesson four or five but this is where we got to and if you remember we had used an image for the steel button and this is the view code for that you can see that it's just an image now you know how to turn this into a button so i want you to just pause the video right now and try it on your own in your own project just as a little exercise after you've tried it out for yourself or if you just got stuck continue playing this video and we'll do it together okay let's try it out together so i am going to just create a little bit of space here and we are going to declare a button using a button let's open up brackets and let's choose this action label initializer method now inside the action we're just going to open up that block of code but we're not really going to do anything yet we will do that in the next lesson but for the label instead of a text button label and delete that view and i'm simply going to move our image with the deal button into the label for our button and just like that you you can't really see any visual change but however if you run this in the simulator then you will notice that you can tap it it's an actual button another way if you don't want to launch your simulator is you can hit this button right here for the live preview and after it gets started yeah then you can go ahead and i have to hit resume on that okay you can see now in the canvas because i have live preview turned on i can test out the button that was your first introduction to handling user interaction in a swift ui app the pieces are really coming together let's do a quick recap you learned how to instantiate buttons and that's just a fancy way of saying creating button instances you learned about closures and how they're just blocks of code like functions without a function name and then you learned about trailing closures which are just a shorthand and just to remind you a trail enclosure is when you have a closure as a parameter in a method call and then it gets taken out of that parameter list and instead is put at the end of that method call now to make sure you really understand all of these things make sure you do the quiz and attempt the challenge in the next lesson i'm going to show you a key swift ui concept that is going to allow you to change data and have the ui automatically detect the change and then update the ui by itself all right i'll see you in the next lesson hello and welcome in the last lesson you learned about the swift ui button and how to handle user interaction well in order to change the data and then reflect that change in the ui we have to learn about state properties and that's what this lesson is all about let's dive right in all right so i want to revisit that view update life cycle diagram for just a second do you remember when we showed a link from the data to the view code well let's go ahead and do that with our war card game project so what sort of data do we have in this project well if you take a look at the user interface here you can see that we need to keep track of which card the player has which card the cpu has and then also the scores of the player and the cpu so that's four pieces of data let's create four properties in our content view structure to represent those four pieces of data so right underneath the opening curly bracket of content view i'm going to go ahead and declare var uh cpu let's do player first player card equals and um i'll just mimic the cards that we have there so we're gonna have card two and well actually let me just i'll change it we can put something else to start and then cpu card equals let's say card nine and then let's represent the player score and this is going to be an integer let's start with zero as well cpu score equals zero all right so now we have these four properties representing the state of the game these four properties are our source of truth because it represents how the ui should look now how do we reflect these pieces of data in our user interface well we need to reference these properties inside our view code remember that these properties being declared in the scope of this structure means that it's available to be referenced in any of the methods in the same structure as well as in this block of code for our computed body property so if we look down here for this first card that is right here and we have hard-coded a string in there saying card two instead of hard-coding a string there let's put a dynamic value by specifying our playercard property so let's update our automatic preview just to make sure that that runs and everything's good and you can see that that card changes to card 5 because that is what the value of player card property is let's do the same thing for the cpu card instead of hard coding card three here let's put the cpu card property can you see that change and down here for the score instead of a string of zero let's put our player score property now you're going to notice an error here it says no exact matches in call to initializer and that's because for initializing a text instance we need to pass in a piece of string data but player score remember this is an int property so it contains int data but how we can get around this is we can turn our int into a string well at least the string representation of a number so the way we can do that is we can create a new string instance and just pass in the we can pass in the integer so this one would be player score and we're going to do the same thing for a cpu score we're going to create a new string and we're going to pass in the cpu score and just like that we have our four pieces of data being represented in the view code and in turn in the ui now all we have to do is when the user taps on the button we can update this data in the properties and have the ui automatically change right well not so fast why don't we go ahead and try and do that and let's take a look at what happens so in the last lesson we had changed this deal image into an actual button right now that action closure is empty let's put some code inside this action closure for our button here we are going to update the cards and we're also going to update the score now if you try to update the property like here let's try to update playercard equals card 11 you'll see that you can't xcode will complain and say cannot assign to property self is immutable now self refers to the instance of a content view and immutable means that it can't be changed you see instances are value types and because of the way that they are allocated in memory they can't be changed now i know that makes absolutely no sense to you right now but i promise you in a future lesson we will talk about that and then it will make complete sense for now just understand that we can't change the value of our property unless we use a property wrapper a property wrapper is a keyword in front of our property declaration that changes its behavior now specifically i'm talking about the state property wrapper so let's go ahead back up to our property declarations and see how we can use this state property wrapper to change the behaviors of these properties so that we can change the values all we have to do is in front of the var keyword of our property declaration we are going to write at state and by adding that keyword at state that is going to indicate that that player card property is actually a state property and it's going to allow us to update the value in it so let's go ahead and put this property wrapper in front of all four of our properties so that they are all state properties state properties have two special characteristics number one is that you can change the data in them we've already talked about that but number two is that inside the view code any references to state properties they will get notified of the data changes and then your ui will update automatically based on that new data so let's go ahead go down to the action closure of our button and try to update some of these state properties and let's watch the ui change okay so here we are and as you can see now the error is gone and i can put cpu card equals card 12 and let's go ahead and update the score as well might as well just do that so i'm going to say player score plus equals one that means to increment it by one cpu score plus equals one as well and we'll save this and then let's go ahead and do a live preview see if we can do that alright so this is a live preview when i tap on this button it's going to run the closure here wasn't that cool so when i tapped on that button we updated the data in the state properties right and because in our view code it references those state properties they got notified and the ui was re-rendered to show the new data now the problem is that every time we tap on the button i mean it's incrementing the score which is cool but the player cards aren't being randomized so what we can do is we can use the random method of the instructor generate a random number and then we are going to append that random number to the back of the card string to generate a new card so let's take a look at how that would work generate a random number between 2 and 13 because if you look at the asset library we have card 2 all the way to card 14 actually so i would probably want to generate from 2 to 14. so i'm going to say let player rand equals int dot random and this method allows us to specify a range you can specify a range with the lower end of the range dot dot dot and then the upper end and it should be inclusive if i remember correctly and we'll see in a second and let's declare another one cpu rand equals int dot random in two dot dot dot 14 and then what we're going to do is instead of specifying the number inside the hard-coded string i'm just going to specify card and then i'm going to add player rand right and add cpu rand now we might not be able to do this and as expected we can't because as you know from earlier in this lesson what we're trying to do here is we're trying to append a integer to a string and what we have to do instead is convert that integer to a string first get the string representation of that integer and there this should be dynamic now so let's take a look at this and see if it's what we expect this is perfect the cards are randomizing what's not perfect is the score down here we still need to determine which side wins and then increment the appropriate score so i am going to comment out these two pieces of code because we don't want to just be incrementing it by one each time now before we end off this lesson i really want to point out and stress how powerful this framework is what we're doing here is tapping a button it's running this closure and we are changing the value in this state property and because the state property is being referenced inside of our view code here it is detecting that data change and then re-rendering what we see in the ui and that happens automatically all we are doing is changing the data in the past with ui kit this system didn't exist what we would have to do instead is update the data just like we're doing here but we would also have to update each view element manually and tell it what to display so what we'd have to do is get a reference to this image and then generate an image from this asset name from the asset library and then set that image asset to this image view and we would have to do that for this one as well and then we'd have to do it for the text here and the labels so everything we had to do manually now all we have to do is update the data and any pieces of ui tied to those state properties will detect the change and update automatically now by definition a state property is a piece of data that this content view depends on it's not something that other views would care about or depend on and so by that nature we can add the keyword private and just control the access level to these pieces of data so that they are only accessible within the context or the scope of this content view structure since it's only this content view that depends on these state properties all right we're almost at the finishing line we just have to compare the card values and then update the score state properties appropriately let's do a quick recap now you learned how to reference properties in your view code you learned about the state property wrapper we also learned about some new terminology including hard-coded values dynamic values and immutable meaning that it can't be changed now remember you can get access to all these quizzes and challenges in the next lesson we're going to go over conditionals and how to compare values using if statements alright i'll see you there hello and welcome in this lesson we're going to talk about a swift construct that is going to allow you to write code that says if this then that now this easy to use but powerful syntax is going to allow you to express logic at a whole new level all right with that said let's dive right in all right so i've got a brand new playground here i want to show you how if statements work before we apply it to our war card game project all i have here are a couple of constants actually more than a couple i have a bunch of constants with different simple values some integers strings and boolean values and i want to use these constants to demonstrate how if statements work now again the if statement is very powerful because it allows you to run code based on some conditions so i'm going to use these constants as my conditions let's first take a look at a basic if statement declaration i'm going to type it out first and i'll explain each of the parts so you start with the if keyword and then you put some sort of value or condition that evaluates to a boolean result so i'm just going to put e and i'm going to open up a pair of curly brackets and inside here i will just print hello world all right and that by itself is the most simple if statement as you can see starts with the if keyword and then followed by either a boolean value or some sort of code statement that evaluates to a boolean result followed by a set of curly brackets and inside the curly brackets you put the code you want to run if the condition is true in this case e is false right so it's not going to run that code because it doesn't evaluate to true however if i changed this e and i was testing f instead then this code would run because it evaluates to true now it can get pretty crazy because you can chain these things together so one of the ways you can chain them together is using end and that's a double ampersand so let me just indicate that there and how this works is if you'd write f double ampersand let's say g then now you're testing both conditions and because you're using and both conditions have to be true in order for this code to be run so in this case because f and g are both true right true and true means true okay and another example is you can use or so these are double pipes the pipe key a lot of beginners they're not sure how to press it on my mac keyboard this key is right under the delete key and right above the return key and it's the character on the backslash key so i have to hold down shift and i have to hit backslash to get that pipe so double pipes it might be different on your keyboard this is or okay when you use an or instead of an end and you're chaining together two conditions like that you're saying if either condition 1 is true or condition 2 is true then run this code so for instance f and g are both true so that'll definitely run this code if i do f and e let's say e is false remember this code will still run because at least one of the conditions is true now again this can get pretty crazy because i can keep chaining it i can keep doing ors or i can even throw an end in there so let's do that but this sort of gets confusing now because this can be read in a couple of different ways is it e and g and then or f or is it f or e and g do you see what i'm saying so for if i put brackets around these this might make more sense if i do this that's saying if f is true or e and g are true then run the code however you know i could also put brackets around it like this if f or e is true and g is true then run the code so you can use brackets rounded brackets to help you differentiate which conditions to evaluate first all right so far we've been using just the boolean values but there's still more i want to show you with the syntax for an if statement before we go on to looking at integers and strings so along with the if statement you can also extend that if statement to test another condition because this is just testing one condition right you can then following the closing curly bracket of the first code block you write else if and then you write another condition so let's say else if e then put that else if g and then do that so what's going to happen here is it's going to test this condition if this evaluates to false it's going to then test the next one it's going to cascade down if this is false then it's going to go down to the next one at any point while it's checking these conditions if one of them is true then it's going to go into that branch it's going to run that block of code and it's going to skip the rest so this allows you to test in this case three different branches or pathways and only choosing one the first one being true but keeping in mind that it checks these branches from these conditions i mean from top to bottom so the first one that hits that is true that's the branch that's going to go on down and finally there is also another feature of if statements there can be a sort of catch-all branch if none of those conditions above are true then you can have an else code block so this code block runs at the very end if none of the conditions were true and it didn't execute any of those branches so this is sort of like your catch-all or fail-safe and again these are all optional you can have one else if you can have no else ifs you can not have any else's and you can just have an else so if this condition isn't true then it's just going to come down here right so this if statement is really powerful the syntax is really simple to understand but it gives you so much flexibility in which code statements to run depending on what is happening inside of your app okay so i'm going to undo this so we can see sort of like a full-fledged if statement here and i'm going to show you how maybe integers or strings can be evaluated as conditions now in the example so far i've just been referencing boolean values and that's simple but working with other data types like integers and strings you might have to use those in an actual statement in order to evaluate to get a boolean result right for example instead of g which is just a boolean value true let's use a in order to evaluate a boolean result i have to use a comparison operator right so i can use greater than if a is greater than zero right this can evaluate to a true or false and aside from greater than here are another a couple other you can use so greater than less than you have greater than or equal to and you have less than or equal to and then there's equality with equality you don't use a single equal sign because that's for assignment as you can see up here we are assigning these values into constants to compare equality you use a double equal sign instead so i can say down here does a equals zero and of course it doesn't so this statement here is going to evaluate to false and because this is an end operator both of these conditions have to be true and because this one is false already then it's not going to come into this branch anyways we can change these as well so you know if b is less than 3 or 4 i mean and if c is equal to 10. so those are some examples of comparison operators that evaluate to true or false now for strings you can also do that you can you can evaluate d for example as a string and you can test if it equals hello so that's one thing you can do with strings you can still use greater than or equal to for example if we had let h equals world and we can say if d is greater than h so we can do that in this case it's going to compare the h with the w and because h is not greater than w because it comes before w then this is going to be false one more interesting thing i want to show you is the use of the exclamation mark so this one it basically flips the boolean value so if g was g is true right if i put the exclamation mark in front of it it's basically going to flip the boolean value so g is true i have the exclamation mark it's going to turn it into false so it's not going to run this you could put it in front of this for example and a doesn't the a does not equal zero because a is one as you can see up there but having this in front of it is going to flip that to true and then now that i think of it you can test inequality as well so not equals so i can test if a is not equal to 0 which is true but then because i have this exclamation mark in front of it it's going to flip it to false so lots of flexibility here and this is just an example right so it doesn't have to be this complicated now i want to go back to our war card game and use the if statement to determine which card is larger and then increment either the player's score or the cpu score all right so here i have the war card game project and if you take a look at this part here where we were updating the score we're simply incrementing the cpu and player score with each dealing of the button now that you've learned about if statements in the xcode playground i'm sure it's very trivial for you to implement it so that you're comparing player rand versus cpurand seeing which number is bigger to determine which score to update now because we labeled our assets correctly 2 being the lowest an ace being the highest having a value of 14 it's very trivial to compare you just compare that ending number right and essentially that is the random number so if you think you can do this pause the video right now and try it out for yourself you'll learn a lot i promise even if you give it a shot and you don't get it the lesson is going to stick that much more so go ahead and pause the video try it out and then unpause it and watch me do it here all right so welcome back let's implement this if statement to see which card is bigger so i'm going to start with if and i'm going to first test if the player's number is bigger than the cpu's number right i'm going to use greater than if that is the case then i am going to increment the player score otherwise i am just going to increment the cpu score now i don't care about ties and that's why i'm not comparing equality between the two random numbers but you could definitely do that in your version if you'd like actually there is a problem with the way that i'm doing it here the cpu has an unfair advantage because in the case of a tie the cpu does get the score right using this else statement so therefore i kind of do have to test the other case so i'm going to test else if cpu rand is greater than player rand then cpu score plus one otherwise if those two conditions are not true then it's a tie and i don't want to do anything all right now let's try this out so i'm going to hit live preview again and we'll just do it right here in the canvas i'm going to hit deal so 14 is definitely bigger than 5 so the player gets a score jack is definitely well that's a that's an 11 it's greater than 3 4 is greater than three so it looks to be working correctly congratulations the war card game is complete you've learned how to build user interfaces how to code in swift and you've completed your first app think back on day one of this 14 day challenge how did you feel back then were you nervous did you think you could do all of this and now look how far you've come how do you feel about app development now now i've tried to make this as easy as possible to understand and i hope you're able to gain some new skills if there's one thing i could really use your help on though it's with user testimonials you see i haven't been asking people and i don't have very many and it would help a lot for people to hear from actual learners like yourself about how this challenge affected you this would really help me grow my brand and in turn help many more people discover that they too could learn how to code and make apps full transparency your testimonial might appear on my website or on my social media so if that's okay with you simply visit codewithchris.com 14 day and it'll bring you to a page where you can record your testimonial right from your browser don't worry if you don't know what to say i have a question for you and you can just simply answer it it won't take you more than two minutes thank you so much whether or not you can help me with that i really appreciate you learning with me and having stuck through this challenge now i know i'm making this sound like the end but really it's just the beginning of your app journey in the next lesson i'll tell you what are the next steps and where to go from here all right thank you so much for the testimonial and i'll see you in the next lesson hello and welcome to lesson 13. now in this lesson it's going to be more of a hands-on and practical challenge i want you to try to build this app on your own now you have all the skills you need based on lessons one to twelve and this exercise is going to be a great way to reinforce what you've learned and also to identify any gaps in your knowledge at this point so that we can go and review it and also go and figure out what it is that you need to get up to speed before continuing okay so let me just walk through this app you've got a title you've got number of credits you've got some images and when you hit this button it merely randomizes the images if they don't match then you're going to lose credits but however if you get three matching ones which i can't seem to do right now oh there we go then you would gain credits so this is very much like the war card game except that now there are three things that you randomize instead of two and the image assets are in the description in a link so you can make sure you grab those uh then you'll have everything you need whether you think this is too easy or if it's too hard either way i highly recommend that you try it because it's really the best way to learn even if you get stuck when you look at the solution and you figure out how to overcome that obstacle that you're stuck on it's going to be extra meaningful and it's going to really help commit it to memory and this belief about hands-on learning is due to my own failure in the beginning when i tried to learn ios so this is not just you know something i read or something i heard this is from my own personal experience that it's there's nothing else that can replace it's the best way to learn so long story short give this challenge a try we have a great forum that if you are viewing this on youtube or on our website feel free to post in the app development section for hints or you know if you want just a little guidance on the right direction so that you can complete it post here if you are in cwc plus and you are you have access to the course students area then post in the swift ui section in there and we'll support you there as well so that being said good luck with the challenge and i'll see you in the next lesson you've made it where do you go from here what do you learn next well there are still a ton of skills to master before you can finally build any sort of app you want but i hope in at least doing the war card game and completing this challenge it's helped you break through some mental barriers about whether or not you can do this because now you should know that you can do this and it's just a matter of time more learnings more obstacles overcome and more practice before you finally reach your goal by the way if you've made a mental breakthrough like i've just described i want to hear your story just visit codewithchris.com 14 day and spend two minutes telling me about how things have changed for you i love hearing these stories all right now back to the topic of today's lesson i'm going to share with you the next five things you can do to make progress on your app journey and then after that i want to tell you about my program cwc plus and how it can help you quickly and efficiently knock these five things down now even if you don't have any interest in joining a program hear me out on these next five steps because they are still the things that i think you should do in order to make progress next number one more views and containers through doing the war card game you already learned about a handful of them such as text image buttons stacks but there are a lot more views and containers that you can learn about such as toggles pickers status bars shapes grids lists and the list just goes on now learning how to use more views and containers is like getting a truckload of lego pieces your options are going to expand greatly number two more types of apps why well think about it nothing new ever comes from scratch you're always drawing upon your previous experiences what you've seen what you've done what you've tried so if you want to build your own app the best thing you can do at this point of your journey is to get exposed to as many different kinds of apps as possible with each new app you're going to learn new architectures new patterns and new ways of doing things for example how do you navigate from one screen to the next how do you download data from the internet how do you save data to a database and how do you let users create accounts and log in these are all different kinds of apps that you need to be exposed to before you can incorporate these same elements into your app number three more xcode and swift now in this challenge we've lightly touched on swift basics and how to navigate around in xcode but there's definitely more depth to both as your apps get more complex and your projects get bigger you're going to encounter more problems and more bugs to solve and you're going to need a deeper command of the swift programming language so how do you learn more swift and xcode well it goes back to building more apps as you build each app you're naturally going to learn more swift and xcode techniques number four mvvm now this one's pretty important in swift ui this is the main architecture pattern and it stands for model view view model in the war card game that you did we had the view part and we had some data properties in it but in a larger swift ui app you would have models representing your data as well and view models supporting your views this architecture pattern exists in any larger swift ui app so it's pretty important to know do some google or youtube searching on mvvm to understand it at a conceptual level and then next time you do a swift ui tutorial either try to spot the pattern yourself or if you're building your own swift ui apps definitely try to put the pattern into practice number five more apple frameworks apple has a ton of frameworks that you can tap into with your app simply add the framework to your xcode project read the documentation and you'll be adding new capabilities to your app such as machine learning augmented reality and so on now this is going to take a little more experience because you need to read and understand documentation but it's a good skill to start training because every year there's going to be new tools new platforms and new frameworks for you to learn as an app developer the learning never stops and your ability to learn quickly and to try things out will really determine your long-term success now those are the five areas i recommend that you explore to make progress on your app journey however i want to tell you about our program cwc plus which i believe is the best way for you to make progress on all five areas in a step-by-step manner just like you've done with this 14 day beginner challenge we've broken up your app journey into an acronym of three stages apprentice performer and pro now at the very top of the app journey you have this 14 day beginner challenge which is a huge accomplishment that you've finished because it's helped break down any mental barriers that you've had and it's primed you with the swift ui basics that you need to hit the ground running inside cwc plus you're going to continue on your app journey right where this challenge leaves off inside the ios foundations course this course is going to take you through building four apps of increasing difficulty and you're going to learn new skills with each app by the end of the course you'll be able to build multi-screened data-driven apps that means you'll confidently build apps that can fetch data from a source such as an api a data feed or your own data file and present that data to the user so apps like weather apps statistics apps or information apps and so on following that you'll take the ios databases course where you'll learn how to build more complex database driven apps and what does that mean well it means that you'll be able to build apps that produce data whether that's data from user accounts user generated content or user interaction finally you'll finish off the apprentice stage with a design course where you're going to learn industry standard tools like figma to design your apps now not only are these tools useful for designing apps but they're also really useful for producing graphic assets for your marketing materials or your website in fact many of the graphics that you see in my videos my websites and my apps they are produced in figma which is what you're going to learn in the course honestly after these three courses you'll be in really good shape and then it's just a matter of getting more lego pieces in your toolbox to build things with and this goes back to what i said earlier build more apps get exposed to more patterns architectures tools and services now this stage of the program contains more app tutorials and many courses to drive you towards that goal but it also provides you more opportunities to take the steering wheel yourself and that is the best way to learn there will be less handholding and there will be opportunities for you to compare your solutions with mine as well as with other learners on the same app journey going through this performer stage of the program will really make sure that you refine your knowledge into hard skills at the pro stage you'll be confident to start realizing your own goal if your goal is to work as an ios developer i'll show you how to put together your resume how to create your online portfolio and how to start creating opportunities on the other hand if your goal is to build apps then i'll share our process with you and you'll get an over-the-shoulder look as we build our own app business so that's the app journey that cwc plus will take you through if that sounds like something you want to try just visit codewithchris.com courses i really hope to see you in there but either way i want to thank you so much for sticking through this challenge and for learning with me i hope you've had an awesome experience and if you had please share it with your friends and family please help me get the word out and tell everyone about code with chris i appreciate you so much and thank you for letting me be a part of your app journey alright i'll see you in the next lesson

Channel: CodeWithChris

Views: 359,551

Rating: 4.9034162 out of 5

Keywords: SwiftUI Tutorial, Learn SwiftUI, SwiftUI Basics, SwiftUI for Beginners, SwiftUI example, Swift, Xcode, iOS app development, how to make an app, swiftui app, codewithchris, programming, coding, app development

Id: F2ojC6TNwws

Length: 200min 7sec (12007 seconds)

Published: Mon Jan 25 2021