How to Make an App in 3 Hours (2023) — Step-by-Step Guide for Beginners

welcome to how to make an app for beginners now it doesn't matter if you've never coded before by the end of this video you will have built this app now I know it looks simple but it's so powerful because you will have proven to yourself that you can make a nap and oftentimes that singular belief is all it takes for you to continue growing your skills building bigger and better apps and potentially even starting a career in app development now maybe you've been doubting yourself or maybe you've been wanting to build that app in your head for the longest time or maybe you've even tried coding and failed we're going to turn that all around my singular purpose for this lesson is to help you believe that you can build an app and I think that once you realize that it's not as hard as people make it out to be you'll be excited to continue to grow your skills and build bigger and better apps so I really hope that you watch till the end and you see what happens quick note in case there's any doubt in your mind why I'm the right person to teach you this stuff my name is Chris and I've been teaching app development foundation since 2013. code with Chris is also the largest iOS Channel on YouTube and the last time we did this training series it was viewed by over 5.4 million people this lesson series that you're about to watch has even been used inside School classrooms and Apple retail stores now all that is just to say that you're in good hands I'm so excited you're here 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 they're 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 could 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 tester 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 xco 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 now that you have a general idea of the app ecosystem let's start by downloading xcode and I'll show you how easy it is to use it to build an app there are a couple of ways to download xcode if you already have it installed you can go ahead and skip this section however if you don't the easiest way to do it this is to hold command press spacebar to launch Spotlight on your computer and type in app store and let's open the Mac App Store on your computer and search for xcode and then you're going to click on the listing and then download it like that a couple of things to note here though don't be turned off by the ratings this is the official tool issued by Apple for us to build apps with also take note of the large file size in my experience it does take more free hard drive space than this in order to have it installed successfully and during the installation process there may be times where you don't think it's doing anything it seems stuck it's going to take a while now if for whatever reason you can't download it from the Mac App Store you can also Google Apple X code and click on the listing here and you can download it from the website this will just lead you back to where we just were on the Mac App Store however if you download it from the website do note that you have to sign up for a free Apple developer account or to sign in with an existing one okay so once you have an xcode downloaded and installed let's launch it and let's start a new project this is going to be the welcome dialog for xcode and we're going to start a new xcode project by clicking here you can also go if you don't see this you can go file new and you can choose project same thing both will bring you to a screen like this where you can choose what sort of project template you want to start with so we are working with iOS make sure you're on this tab and then go ahead and click app and for here I'm going to gloss over some of these project details because our goal is for you to get that result and make that discovery that you can build an app so I am going to save all the explanations for lesson two right now I would recommend that you just follow along exactly what I do and get that result and have that app in your hand alright so let's go ahead and call this L1 demo I think you probably have nothing for under the team organization identifier you can put in com Dot and then your name no spaces and interface make sure this says Swift UI it should be like that by default anyways and language should be Swift now uncheck all of those if they are checked go ahead click next and choose a place to save it um Source control this should be unchecked I'm just going to save it on my desktop for now since this is a temporary project now you're going to give it some time it's going to boot up your new app project I'm going to open this window up a little bit you see how fast I was able to see something here on the right hand side for you if it's a first launch it will take a little bit longer give it a couple of minutes even but while that is going we are actually going to go ahead on this left hand side here and click Assets Now this is the asset Library this is where you're going to store all of the image and color assets for your app project I've prepared a an image file that we're going to for this demo you can go ahead and pause the video and grab any image you want save it somewhere where you know where it is and what you're going to do is click and drag it into this panel right here or this panel doesn't really matter this is a big panel so let's drag it there what you're going to see is this image asset that you've added to your xcode project now take note of this name here because we're going to be referring to that image with that name you can rename it by tapping and clicking it like that and just typing in whatever you want or you can hit enter and you can also rename it like that so mine's gonna be named Niagara Falls that's perfectly fine for me so now that you've got that done let's go ahead and click on content view so by this time you should be seeing something on here and what you see here is a preview of your user interface so you can see what this screen looks like and this this screen right here on the right hand side is defined by the code that is written on the left hand side I'm going to make this really easy for you to understand we are going to delete all of this user interface and we're going to build it from scratch and you'll see how easy this is right now it looks like a whole bunch of code that you it's really hard to understand we're going to change that so let's highlight this code starting at v-stack and then going all the way to the end of this line 18 padding and I'm just going to highlight it all just hit delete and then we're going to press enter twice so I can make some space in here now xcode is going to throw a whole bunch of Errors because it can't detect anything to display but we are just about to add some new elements on there so in the upper right hand corner you see this plus icon if you put your mouse over it it's going to say library so we're gonna tap on that and then by default it should be on this first tab actually so I was using it before so it was on the second tab but I want you to go ahead and click on this first tab this one is all of the views that you can add to your screen and I want you to in here type in image and you're going to click on the second one called image and you're just going to drag and drop it right where all of that code was that was just deleted so this is an image view it's going to allow you to display an image you're going to click this middle part you're going to hit enter and you're going to change the text inside the quotes so I'm going to get rid of that notice that I still have the two quotes here in between those two quotes we're going to type in the asset name so just to remind ourselves let's go back to the asset Library mine is called Niagara Falls like that you're going to type in exactly Verbatim what you have here including any spaces dashes capital letters anything and type it exactly in between here because if it doesn't match it's not going to display and you can also at this point rename it to something that's easier to type if you want you could do that and what you're going to see is the image this is previewing what we have here now this doesn't look quite right to me so I am going to modify this image view I'm going to customize it we're going to open up the library Again by tapping that and this time we are going to switch over to the second Tab and these are where all the modifiers are so modifiers are things that we add to the view to change its properties and attributes first of all let's add something called resizable so you only have to type in the first couple of letters and you'll find this so this allows you to it tells the system that this image can be resized so I'm going to click and drag once again and put it you can either put it at the end or you can put it right underneath and right away give it a little bit of time you'll notice that it changes the other thing you'll notice though is that the image now looks a little bit squished right it looks squished and the aspect ratio is not correct we're going to also add a modifier to change that but first I want to round the corners that something nice and easy and it looks Pleasant so let's go ahead and do that let's add another modifier by opening up the library we are going to this time make sure you're on the second tab modifiers and search for Corner radius click drag and drop again and this is the nice thing we're going to put it underneath resizable you see that it it's automatically going to put a space for you make sure you don't accidentally put it down here or like after this bracket or anything like that you want to put it after the resizable so that's going to look neat and tidy like that and you're going to notice a slight Corner rounding but we can't really see it right so we are going to change this number let's change it to 10 and see if we see anything I can see slightly more rounding now but take a look at this as well I'm going to leave my Mouse anywhere on image resizable or Corner radius my cursor I mean and on the right most side here you can see a whole bunch of things you can configure after we added that corner radius modifier you see right here this reflects what we typed in right here and in fact if I press Plus you can see it's changing the number right so this is a very easy way for us to modify the code visually through through an interface here okay so I promised that we would unsquish this image right let's go ahead and open up the library and we are going to search for aspect ratio and we're going to drag and drop this one right under Corner radius so again make sure you put it right there and if you accidentally put it right here for example you can go ahead and delete it and try it again now I'm going to put my cursor on aspect ratio because I want to change the type of aspect ratio we can Define how we want this to behave let's make a little more space you can drag this and make the preview a little smaller so the code will fit on one line so you can see here it says fill which is exactly what we have here I'm going to pull down this drop down I want to find one that's called fit because um that will actually shrink the image down keeping the aspect ratio until it fits the screen which is what the the behavior that I want to see unfortunately it's not in this drop down maybe uh xcode can't detect it however don't forget we can modify it through the code as well so I am going to get rid of this fill by just I'm going to delete it like that and then I'm going to hit dot on my keyboard and out pops this menu this is called the autocomplete menu and it's going to allow you to select from different options without having to type too much so just by hitting dot it opens up this menu and it gives me different options now there we have fit right an option that resizes the content so that it's all within the available space both vertically and horizontally let's choose that and see how that looks perfect that's what I wanted now one thing to note if you press Dot and that menu doesn't pop up that's perfectly fine just type this out Dot f-i-t and you're going to get the same result next I don't really like how it's touching the edges so let's go ahead and add another modifier this time it's called padding so we're gonna drag and drop that so you can see how easy this is right you don't even have to write all of this code you can do this visually I like the way the picture looks now let's put a piece of text underneath so we're going to open up the library again and you see a common theme here this time we're going to switch over back to the Views tab and we're going to search for text I'm going to drag and drop that this displays a piece of text right and you want to make sure that you never you want to respect the brackets right so you never want to put anything outside of these two brackets because you see when I click it right when I click this it shows the opening bracket we have to put all of the components after this opening bracket and before this closing bracket so think of it as a sandwich so there's my text let's go ahead and double click placeholder and once again I can get rid of that text in between the quotes and I can type in whatever I want but you might get some errors in xcode now or worse yet xcode might not tell you what's wrong and it might just not show you anything as in what's happening right now so the problem is that it doesn't know how to lay out these two elements how do you want them arranged on top of each other beside each other it doesn't know luckily we have some thing called a layout container to tell the system how to lay out multiple elements on the screen so again let's open up the library under views let's search for vertical stack you can type in v-stack or vertical stack we're going to choose this one not not the lazy ones so vertical stack has drag and drop that I'm going to put this above the image this time you'll see that this one let's add some space in between it this one comes with an opening bracket and a closing bracket and in between it says content so what a v-stack does is whatever content is in between the opening bracket and closing bracket it will lay it out on top of each other so what we want to do is we're going to delete that content and we are going to move this image along with all of its modifiers as well as the text element inside the v-stack right in between these two brackets so I'm going to press command X to cut that code and put my cursor in between those two brackets and press command V to paste it what you're going to see on the right hand side is now it knows how you want to arrange those elements I want to change the text let's go ahead and add some modifiers right okay let's open up the library change to the modifiers Tab and we're going to choose one called font and you might not see it right away because I mean the search I guess the word font is in the descriptions of all of this but we're specifically going to look for one called font there we go put that at the end and then I'm going to hit enter to organize it a little bit and with this font one you can change already this is a title font so you can see that it made it bigger um on the right hand side if you put your cursor on the text you can see the font here it refers to title I can go ahead and choose that and choose a large title for example makes it a little bigger and let's say I wanted it to be bold let's change the weight to semi bold you see when I did that it added a font weight modifier and set it to semi-bold so I could have done this another way I could have actually you know I could delete that and then we could have gone via our trusty Library method you know and I could add the font weight modifier like that and change this to semi-bold so we would get the same result okay now let's put the finishing touches on this app so what I want to do is add a black background and then um we're done essentially okay so how do we add a background here so this is kind of not intuitive but you're going to get used to it is if you want to add a colored background you add a color element to the screen so let's open up our library it's under views and we're going to search for color and that's the one right there so we are going to drag and drop it once again I'm going to put it above the v stack like that and you can see you can specify different percentages of green and blue so if I wanted a black background this would be like they would be all zeros and that would be black however there's also a different way to specify black I can get rid of all of that like this is good if you want a really custom color but there are some presets that you can use as well so I'm going to put color and leave the two brackets like that and in between those two brackets I'm going to put dot it's going to open this up if it doesn't open for you that's fine just type out dot black but I'm going to choose it from here that's preset now notice how this color first of all it covers everything second of all it doesn't reach the edges okay and the reason why it doesn't reach the edges is because this is what's known as the safe area this is where things like the battery percentage and like the time displays and down here you have that little handle that you can grab and you can you know um change between apps or minimize an app so if you want your elements or your colors or whatever it may be to go into those zones the safe area you have to add a modifier to tell it to do so so let's go ahead and add that modifier hit open the library and then switch the modifiers and let's type in ignore and there's this one ignores a safe area so you're basically saying that you don't care about the safe area and you want this element to go into that danger zone or that safe area now you can see our color covers everything the problem is we don't see anything else so why don't we try making some space in our v-stack right here and highlighting our color with the modifier command X to cut it put it in here command V to paste it what do you know RV stack puts it arranges it on top of each other but it's probably not what we're expecting right and you can see that it did it in a way it's pretty smart where it gave each element enough space so this is as much space that like the text needs and then the image and then the black color takes up the rest whatever else is available that's not really what we're after we want the image and the text to sit on top of the color element right so there's another layout container we can use let's check it out let's go to views it's called a depth stack or in other words a z stack or Zed stack if you're Canadian like me so this one is going to be special things can actually sit on top of each other on the z-axis in sort of like a depth you can have uh yeah depth would be the best way to describe it right so let's try this out let's erase content and let's first of all move the color in there command X command V and next we are going to add our entire v stack in there okay so let me just remove some of the space make sure this is very um you got to be very careful because we're moving things around if you misalign one of the brackets here uh it it won't be able to read your code properly and it won't know what sort of layout to make so tap on this bracket and make sure that when you do this that it's highlighting the bracket that you expect it to so you want to grab the v-stack along with its opening bracket along with all the contents along with the closing bracket so I'm just highlight all of that command X and in here inside the Z stack before the closing bracket I'm going to put that in there so what it's going to do is it's going to put the color at the bottom and then it's good to put the v-stack along with all of its contents on top of that uh and and so we have this unfortunately our text is not visible so let's go ahead and add a modifier so I could just do this and choose white or we could add a modifier and the one that we're looking for is foreground color that's what we would add to change the color of the text however let's modify it here and see what happens see when I chose white it added the foreground color modifier for us and set it to color white pretty simple stuff right now comes the fun part let's launch our app now later in this video series I'll definitely show you how to launch this app or any app on your phone or your device for right now we are going to run this in the iOS simulator so up here you're going to notice it says iPhone whatever well it depends what version of xcode you have but I want you to tap on that and you can choose a bunch of different simulators choose choose the latest iPhone that you want I'm just going to choose iPhone 14 and I want to hit this run button now give it a couple of minutes and then you're going to see a virtual iPhone on your screen I have to warn you though if this is the first time you're running the iOS simulator it's going to take a few minutes to boot up but subsequent times it's going to be a lot faster now here it is this is the simulator now the cool thing about the simulator is that you there are some quick buttons here where you can rotate it to a different orientation so you can see what it looks like uh you can take a screenshot you can even take a video from the menus up here you can hit this to go back to the home screen this is a virtual iPhone for you to test your app now what is the difference between this simulator and the preview that we had inside xcode well this similar is great for testing your app because it has features to look you can simulate a shake you can you can test out face ID you can simulate locations like a custom location you can simulate a driving car or bicycle ride so there are lots of things or tools for you to test your app whereas the preview is good as exactly that a preview while you are building your user interface if you want to download this project just check in the video description below now I hope this lesson has showed you that building apps is not some mystical Dark Art granted this app was simple but every lesson that you complete after this one you're going to gain a new skill now just in case you get stuck we also have a free community where you can go and get help just visit code crew dot codewithchris.com so between this lesson series and the community I think you're gonna make pretty good progress while having fun and learning a lot I mean these people did did you think I made those app icons up in the next lesson we are going to dive a little deeper into xcode and I'll explain what the rest of the files in your app project do in the last lesson you use the xcode to build this now in this xcode tutorial I want to take a little more time and show you around so that you can understand what you did and begin to master this tool now you're going to want to pay close attention because over the course of your journey you're going to be spending a lot of time inside xcode turning your app ideas into reality oh and at the end of the video I'll be sharing my xcode tips and tricks with you that I use everyday okay so make sure you watch till the end okay quick note before we begin back in lesson one I showed you how to download and install xcode so if you haven't done that yet go ahead and do that first once you have xcode launched let's get into it all right let's create our new project click create a New Mexico project right here or go to file new and project now there are several options here actually they're templates and you can create apps for different platforms Mac OS watch OS TV OS for cars even multi-platform if you want to launch your app on multiple platforms however we are going to choose IOS app and actually look there's game AR apps there's iMessage sticker packs a ton of stuff we're going to stick with the basics for now this is a good starting Place let's click next and here let me explain some of these options for you so they don't look so cryptic first of all product name is easy right we're just going to put whatever we want to name this app now team is something that I want to explain remember packing less one when we talked about the process to launch your app into the store well the code from xcode that gets turned into a code package and then you have to code sign it as in put your digital signature on it so that people can't impersonate you and then that's the thing that gets put into the App Store well this here is how you're going to code sign it and to get a team on the drop down here you actually have to sign up for the Apple developer program which is that yearly paid program to allow you to submit apps it will give you access to a portal where you can upload your digital signature and that's how you're going to be able to create a team in here but for the purpose of these demos we can leave it as none now what's more important though is this bundle identifier because this is the unique ID for your app and this has to be unique for all apps on the App Store It's a combination of your product name as you can see as well as your organization identifier and here you can put anything typically people do com dot your company name or your personal name and together that is your bundle identifier now the next two pieces interface and language I want to draw your attention back to that diagram in lesson one where we said Swift UI is how you're going to build your user interfaces Swift is the coding language you're going to use to express your logic and together you're going to use those two tools to build your app and that's essentially what these two things are there are some options however in particular for interface if you pull this down you can select storyboard or Swift UI Swift UI is definitely a lot easier to learn and it is the UI framework moving forward because Swift UI is sort of the replacement for storyboards um right now as of today there are still companies out there using storyboards but Apple's full intention is to discontinue that and move forward with swift UI so I would definitely recommend learning Swift UI and if you do choose Swift UI you have to choose Swift if you choose storyboard you can still learn Objective C but again I wouldn't start with Objective C unless you had a very very good reason specifically to do so maybe you are trying to Target a job that only uses Objective C and that's what you would pick but Swift UI and Swift is where we want to be now these two options here core data and include tests these are options that you can always add to your app after the fact so you don't feel pressured that you have to check them here but even for the purposes of what we're learning these are unnecessary so core data is a way to have a local database on your device and test is used in software development where your project gets really big and you need to write automated test cases because once your software gets really large if you make a change it's not feasible for you to manually test all the features all over again for every single change that you make so you need to include automated testing that you can just click a button and run and it'll say pass fail pass fail and you can see what breaks after you make a change so again not for us leave these unchecked let's go ahead and click next and now now you can choose a place to save it I would recommend if you are taking this seriously and you are going to continue on learning create a space in your hard drive a folder perhaps for all of your apps and projects so they can stay organized for myself I'll admit I'm a bit of a messy person and this is a demo so I'm just going to create out my desktop Source control now this if you don't know what this is it's kind of like versioning so imagine being able to take snapshots of your project and code so that later on if you accidentally break your project and it's not working anymore you can always roll back to one of your snapshots this is kind of like time machine on the Mac if you've ever used that so definitely a very good practice in software development in fact kind of mandatory if you're working professionally for us right now we are going to leave this unchecked because I will introduce this to you later on okay let's go ahead and create it and let's check out our brand new project so here's our branding project before we dive into each of these files and tell you what they're for let us talk about the major big areas of xcode so you can get acquainted so there are five main areas of xcode firstly on the left hand side here you have your Navigator area in the middle the biggest area you have your editor area on the right hand side this is known as the inspectors or utility area across the top at the top here you have your toolbar area and at the bottom tucked away is this debug area which you really only need when you start working with code so we're going to hide that again so those are the five major areas of xcode let's dive into each one and I'll show you in the context of your project what these areas are for let's start with the file Navigator so here you have your xcode project and all of the files in your project so you can see these are collapsible folders these are the files these are the asset libraries that you learned about in lesson one but notice across the top here there are tabs to The Navigators this first tab is the file Navigator or project Navigator but there are different types of Navigator so you will encounter these when we get Farther Along right now there's not too much to see I would leave it on this first tab under a file Navigator project Navigator so you can take a look at all of your files next let's move on to the editor area the biggest area this is where you're going to be spending most of your time editing your files notice that this area changes depending on what you're looking at this file is a pure code file so it's all code this one is a view so you're going to get half code you're going to get the preview and asset Library again it changes so the editor area is very versatile it changes depending on what file you want to edit now inside the editor area there's also a lot of cool little tucked away things to make editing easier such as across the top here you can have tabs there's breadcrumb you can even jump within the file and you can open up you can split up this editor area into multiple panes window panes as well which I'll show you closer to the end of this lesson for now let's move on to the right most side this is the inspector area sometimes people call it the utility area which will work as well however what this is for is it allows you to configure whatever you are working on or looking at inside the editor area so for example if we um you know you've seen this if I put my cursor on one of the view elements here I would be able to configure it right if I put my cursor on this thing called view there's nothing I can configure with this keyword view however if I click across the tabs here there is a quick help tab now this is useful because it tells me what this view keyword means and what it does here this tab is the identity tab it tells me where this file exists where this content view exists on my hard drive right and what app membership does it belong to and things like that so that's what the inspector area is good for now I don't know if you've noticed but there is a cascading effect going on right if I select this it changes this if I select something in the editor area it changes what happens in the inspectors area so think left to right waterfall next up let's look at the top toolbar now first of all this leftmost button hides your Navigators if you need more space on your laptop maybe your screen is kind of small you can make more space on the right hand side there's a similar button to hide the inspectors area so now you get a full editor area for editing there is this run button to run your app inside a simulator like we did in lesson one and here you can click on the simulator select a different one you can test your app on all sorts of different simulators also if you plug in your device into your computer you are going to see that device here and you can choose it and you can actually launch your app on that device so that's something we're going to do in this video series so don't worry about that we'll get to that there when you first plug in your phone you're going to get a pop-up on your phone saying do you trust this computer and you're going to have to say trust before you can actually see it on this menu just in case you're doing it right now here it tells you what's happening behind the scenes sometimes you know if you're saying thinking xcode is slow it might be because it's doing something behind the scenes and this is the status bar that tells you what's going on now this Expo cloud is something that you don't have to worry about yet but it's a it's a way for you to be able to run your projects and test you know run those test cases that I told you about when we created the project it's a way to run those test cases on the cloud on Apple's servers the reason is because sometimes these take quite a while to run and also um you might want to run those tests on multiple different devices and so you can deploy those things to the cloud and run them there this icon we've used before it's the library right so if we go back to the content View and you click this plus icon there's our library that's so useful and then yeah we talked about this icon so that's the toolbar now that you know your way around xcode let's take a look at your project files so let's start at the very root of your xcode project which is inside your file Navigator this node right here now this is where you can configure different things for your project these are things like what is the version number what is the display name should it be able to display in various orientations and all the things like that actually this is probably pretty important what iOS version should it be able to install on you might set 16 and nothing lower than that we'll be able to install your app and this is for the reason that sometimes you're using features which are only available on let's say iOS 16. uh so that is the root project node here is also where you would configure different things like uh you might have to add different capabilities to your app such as Game Center or being able to do uh in-app purchases or notifications or things like that you have to add different things and just in general there's a whole ton of settings this is your project settings now after that there is a folder inside contains a couple more files you've got this entry point this is where your app starts okay this is the first thing that gets executed before it launches the first screen of your app and that is what this is content view if we click onto the next file that is content view you can see here this is what it looks like and uh the entry point if you click back here you can see that it creates a Content view so that makes sense right this is the entry point for your app when the app launches it creates this screen content view which is what you see here and in fact when you launch it in the simulator this is the first screen that you see so hopefully that makes a lot of sense and next you have your asset Library which stores all of your colors your image assets and even this is where you'd specify your app icon you just place an image into here to have that be your app icon and then inside preview content is another asset library but this is just only specifically for the previews here that you see so if you perhaps you know sometimes previewing doesn't make sense if there's no data to preview right like for example if you've got a scrollable list of photos but you don't have any actual photos there's nothing really to see right so this is where you would put those test or preview assets to be used and that in a nutshell are all of your files in your xcode project next up let's see how we can test our app now in terms of testing your app we mentioned the simulator in lesson one so just as a recap you can select a simulator of your choice here and then you can hit this run button and it's going to launch an on-screen virtual device if this is the first time you're doing it expect a couple of minutes for this to boot up but here this is a great way to test your app you can click through all the screens and interact with it you can simulate different device features such as low memory situations or low Network situations to see how your app would behave and in general just test your app this preview here in the editor area is actually great for seeing how your screen looks like as you build it and there are a couple of tools for that for example there are zooming capabilities here you can zoom in zoom out and zoom to fit and zoom to 100 that's what these different buttons do you can also look at variations for example I can look at what dark mode would look like on my phone or I could look at landscape orientation if this is too tedious you can look at multiple variations At Once by clicking this button right here and for example I can click color scheme and that's going to show me light and dark I can click on orientation for example or maybe Dynamic type and see how different font sizes look on the UI and then finally we have these two different modes by default it's on this live mode which lets you interact with the elements on your preview for example I may add a button let's open up the library under views search for button you'll see it there and click and drag it you'll see a button you can see by default I'm on live mode down here and I can interact with this there is another Mode called selectable mode or select mode and it allows you just simply to select your elements perhaps you want to see the corresponding code for that element so that's a great way to learn another functionality is selecting an element so that you can configure it in the inspector area that's pretty helpful as well and now I want to leave you with some xcode tips that I use every single day inside xcode these are so useful and it may not be apparent right now but as you start well as we start building the app in this video series you're going to see us using these so the first one probably the most basic one is this one here these go back and go forward arrows these work just like your web browser arrows and sometimes let's say you're moving from this file to this file to another file here and there these buttons just let you jump back to the place you were in so when you're working with code sometimes it the the code file gets really long and this breadcrumb right here allows you to jump between different sections in your file which is really handy here you can actually jump to different files as well clicking the spread Chrome right here on the upper right hand corner here there are a few useful things as well so this middle icon allows you to customize how the editor looks so if you choose show editor only you're you don't need to preview perhaps you can click that right you can also there's this mini map which is quite useful as well which lets you scrub your file so if your file was very very long this would be an easy way to just sort of navigate and you can see at a glance what your file is looking like uh if you want to let's say look at two files side by side you could do that by clicking this upper right hand corner button and opening two editors side by side and obviously the more screen real estate that you have the more useful this becomes um as for now it is probably not very useful for me with the size of this xcode window and with the size of the font that I have right here but nonetheless you know that this is available to you and there are different tabs right here as you can see here now as you code more you'll undoubtedly run into a situation where you're wondering what else can the v-stack do or can the v stack do this or that so I'm happy to say that documentation is embedded right into xcode now you can just Google vstack and find it or there are a couple of fast ways to do that with an xcode so one way is go into Windows developer documentation and you can just search up vstack in here I've already found it but yeah you can do that you can look look at what it can do how to use it and things like that an easier way even faster it's just put putting your cursor over it and using the inspector panel and going over to this quick help section and then you can even click on the link here to open it to that page even faster if you want to hold down the option or Alt key on your keyboard hover over v-stack and you can get a pop-up dialog for that again there's a link to open the developer documentation really handy stuff all right so now you know all about the file Navigator the editor area the inspector area the toolbar and the debug area and you know how to start your own xcode project and what each of the files in your project is for in the next lesson we're going to get Hands-On again and you're going to learn even more skills for building user interfaces aka the screens of our app in this lesson you're going to learn multiple ways of how to build a screen of your app now I know you're itching to build user interfaces like these these were done by our designer JC in a piece of software called figma as you improve your skills you'll be able to translate designs like these into your own app inside xcode by the end of the lesson you'll have built this using only these few basic elements a few layout containers a few views and a few modifiers considering that we're only three lessons in this is amazing progress okay buckle up let's get started oh and just a quick note in the last lesson you learned how to use xcode so if you need a refresher check it out right over there also if you're enjoying the series so far don't forget to give this video a thumbs up and subscribe so you don't miss the next lesson let's quickly review how these building blocks come together to form the user interface or UI for short so views are the elements that the user sees on the screen modifiers are applied to the Views to change its Behavior or look and feel finally layout containers organize and arrange views in various ways now fun fact layout containers are also considered as a view just think of them as container views alright let's start by creating our xcode project so go ahead and start a new project under iOS let's choose app I'm going to name mine L3 demo 2 actually because I've built this once before team you can leave as none organizational identifier should be the same as before and then make sure it says Swift UI and Swift core data and tests are unchecked then let's go ahead and click on next and I'm going to save it on my desktop you can leave create get repository unchecked as well okay so here is our brand new project let let's expand the window a little bit so we have some space and the first thing we are going to do is just add the image asset for that card into our asset library now again just like last time you can put whatever asset you want I'm going to reuse the Niagara Falls image asset that I used back in the lesson one demo so go ahead and do that okay now in order to build this card I first need some idea of what I'm going to be building now whether that's just in my imagination or maybe a rough sketch on a piece of paper or perhaps it's a design by a designer in this case I had this in my head and I wanted to lay out the biggest elements first and that would be the image and the two pieces of text in addition to that I also have in mind the basic layout container that I'm going to use First in this case that would be the vertical stack which arranges the views on top of each other so let's go into our content view first which is sort of the default view that gets created for you and I'm going to remove the v-stack along with its padding modifier so we should be left with body opening bracket ending bracket and then this content view here opening bracket ending bracket what we're going to type in so at this point actually the way we've been doing it is by using the library if you feel confident you can just type out the code if you don't feel that confident yet you can go ahead click this plus icon open up the library make sure you're on this views tab and just type in image and drag and drop it that's perfectly fine this is a perfectly safe way to build up to the point where you're comfortable just writing the code and then sooner or later you won't even be using this Library for the image name we are going to follow what we have in the asset Library whatever your asset is named right there so remember to use the quotation marks and we should see an image perfect now obviously it's too big I want it to fit on the screen so we are going to add the resizable modifier so what you do is press dot in the autocomplete menu will pop up and I'm just going to choose resizable again you can do that from the library but make sure you go to the second tab right which is the list of modifiers you're going to search for resizable you're going to just drag it and drop it there another one we're going to add is aspect ratio because this looks kind of squished right and this is all review right now from lesson one we've done this together before it's going to be exactly the same way so there's aspect ratio I'm going to hit dot to open up autocomplete again and choose I'm going to type in fit or just choose it from menu again if you don't see it from the menu you can just type dot fit and it'll still you'll still get the same result as what what I'm seeing here hit enter I'm going to do dot again this time I'm going to add Corner radius and this is going to round the corners nicely I'm going to put 15 as the amount of rounding that I want and remember in the inspector view here you can choose this tab to configure the modifiers and the view itself so you can see here this is the image on this Niagara Falls I can you know change the aspect ratio change the color I can change add some padding here's the corner radius I can increase or decrease it because my cursor is right now is on image if it's on body you know I won't see that there okay so that does it for the image now I said that we would use the vertical stack to arrange it right so let's go ahead and do that again I'm just going to type it out but feel free to use the image library and the vertical stack whatever is inside of this pair of brackets right here those are the views that get arranged on top of each other so we're going to have to move this image I'm going to press command X to cut it and put my cursor inside the brackets press Comm command V to paste it in there and then I'm going to add the text elements so let's go ahead and type in text quotation marks Niagara Falls next let's add the description so I'm going to put another text element here and then you can type whatever you want all right that's speaking pretty highly of the false now what we're going to do is I want everything to be left aligned and also to add some spacing between these elements so if I put my cursor on the v stack we can come over here and into the inspector panel and we can actually configure those things so let's see how that changes the code so that next time we can just type in the code straight away without having to use the user interface so I'm going to click this alignment and and that adds this alignment parameter here and changes it to Leading let's change the spacing I'm going to put 20 in there and you see that adds another parameter spacing equals 20. and then in the preview you can see those things have taken effect here now let's make the title a little bigger here Niagara Falls so I'm going to put my cursor on the text and we're going to change the font to perhaps a title font and let's make it bold let's change the weight bold next I want to create the ratings to the right of the Niagara Falls Title now when I see things side by side I think horizontal stack this is the same as a vertical stack but instead of arranging things on top of each other the horizontal stack arranges things side by side so let's go check it out so back inside the xcode here since this is the first time we're using it let's go ahead and bring it out from the library so we can see the code let's go into the views tab right here and type horizontal stack that's the one right here and let's drag it let's drag it right before the Niagara Falls text as you can see it looks exactly like the v-stack except it's an H stack so we're going to move this Niagara Falls Title into the brackets in between there command X to cut it command V to paste it now visually nothing changes because I don't have anything aside from that text inside the H stack but one thing I want you to notice right now is that we have an H stack inside of a v-stack so this is how you can begin to build a layout from the combination of layout containers to arrange the views as you want them you can Nest these layout containers now let's go ahead and add an image beside the Niagara Falls and use the image element just like how we displayed the waterfalls and we can search and find an image of four stars or 4.5 Stars whatever we want to display then we can add that to the our asset Library just like we've done here and then we can put the image name here to display it but I want to show you a different and arguably better way to do this using something called SF symbols let's remove this image view for now and let me bring up this browser window now SF symbols they are a set of 4400 symbols or icons on the iOS system that you can use for free because they're already installed on iOS all you have to do is you know the appropriate name for these icons and you can display them you don't need to search for any images or anything the best thing is that they behave like text so that you can change the foreground color of them you can change the size of them and things like that very very easily let's go back into xcode and see how we can use an SF symbol to display the Stars so just like displaying an image we use the image view but instead of specifying the the asset Library name like we have up here we're going to specify the system name of the SF symbol so we type in system name that should come up and notice that it's lowercase s uppercase n with a colon and then we're going to put a name the name of the SF symbol and this has got to be in quotations as well so I'm going to put star and you can see it instantly shows up I did not have to add this star image into our asset library or anything like that another really cool thing is that often these symbols come with an outline version as well as a filled version and typically the filled version you just have the add dot fill to the end of the name and that's what you get now you might be wondering how would I know this system name well that's where this comes in handy so SF symbols is a free download for an app that looks like this and it allows you to either browse through the symbols or search for it so if I search for Star I can see these are all of the system some names that I can use like they're star star.fill which is what we just used and there's even this one it's a half star now if you don't want to download this official app by Apple I'm sure I think in the past there were other websites which listed out all the SF symbols you can search SF symbol browser or something like that in Google but seeing as how this is the official Apple app and I'm sure this will get updated first before those third-party websites do I would recommend that you use this so what I'm going to do now is I'm going to give Niagara Falls 4.5 Stars so I'm going to put four of these in one of these so I'm going to actually copy this name and that's going to copy this part down here let's go back to xcode and I am going to image system name and paste oops I need quotations right and now I have one and a half so all I'm going to do is copy this paste it a couple of times so that we have there 4.5 Stars now this doesn't look quite right as well right I want to push the stars all the way to the right and they're also a little big and they're not the color that I want so how do we address this well first of all Let Me Explain how these elements are arranged inside an H stack so let's go into selection mode for now so that I can select these elements and and show you this outline you'll notice that inside this H stack this H stack only goes up to here what's happening is that this H stack is only as wide as it needs to be to fit all of the elements inside of it furthermore these elements inside of it you can see the outline is right up against the text element same thing with the images right that blue outline that's the surrounding frame that's how much space it takes up it is only as big as that view needs to be now this is typical of views they only have a frame as big as it needs to be but there are some views that actually take up as much space as it can so that is actually what we want to put one of these elements is called a spacer now the spacer view will basically take up as much space as it can so let me demonstrate again since it's the first time we've used this let's open up the library under views let's search for spacer there we go a flexible space that expands along the major axis of its containing stack layout or both axes if it's not contained in the stack essentially it's just saying that it's going to take up as much space as possible look at what happens here by putting a spacer in between the text and the Stars right here first of all it pushes the H stack right as wide as it can be because remember the H stack expands to as much space as the elements inside of it requires the text still requires just that bare minimum the Stars again requires the bare minimum but the spacer on the other hand is taking up all this empty space right here you don't see the outline but it's right there in the middle so the spacer is a great way to space elements apart as its name suggests now one handy tip before we move on if you have multiple spacers in the same container it divides up all of the available space by the number of spacers you have so if I put a spacer before the text and after the image is here you can see that this space and this space and this space are all equal so the spacers take up all the available space and divvies them up between each other evenly right but I'm gonna remove those two just gonna leave the spacer element in the middle it's going to take everything up here we're going to add some padding to the left and right later anyways okay so let's finish up this ratings by adding some text right below the stars in our initial design we had you know in Brackets a couple of reviews like or the number of reviews there so how would we do that so I could put a piece of text right here that said text um let's put some brackets reviews like that but you can see here it does that not the effect that we wanted why not Nest another layout container so what we're going to do here so this is an H stack right I'm going to put these five stars in a v-stack so that we can put the text right under it so let's create a v-stack right here and we are going to put the images in there as you can see it lays it out on top of each other as expected and I'm going to put the review text down there as well now this is sort of what I want but I need to lay these out horizontally right so I'm going to Nest an H stack in there and so that actually gives me what I want now the stars and the reviews text is a little large for my liking so and plus it's not the right color too so I am going to add some modifiers to it so what we're going to do is I'm going to type this out I encourage you to do so as well if you don't remember um following along and typing it out is a great way to remember so to change the color we use foreground color and I'm going to hit dot so we can bring up autocomplete I'm going to choose orange press enter that's there it is it's orange I am going to go to the end and hit dot again and this time I'm going to change the font and red dot again I'm going to choose caption to make it smaller so that's about the size that I would want it now I would have to apply let me just make some more space so it's easier to see yeah perfect now I could apply these two things to each star like that right and that would essentially get me what I want but there is a better way to do this and that is to put these two modifiers instead on the H stack right here okay Watch What Happens I'm going to take off these modifiers you can see that each of them have the orange color and the caption size the reason for this is because modifiers on a container view get applied to all the views inside of it that's awesome right so I actually want the same thing to happen to this so instead of applying it on the HVAC why don't we put it on the v-stack so that it includes this text element so command X command V now you can see um the orange color in the caption gets applied to the whole thing and now for the final piece of content on the card itself and those are the icons on the lower right corner so for this it is pretty simple because we have this description text already in a v-stack so under here we're going to add the icons we're going to use SF symbols we're going to use system name and let's bring up our trusty app here this is going to be let's use binoculars and we're going to choose the the filled one let's copy name and paste it in there whoops we need quotations like that those binoculars right there uh let's add another one this one is going to be uh I'm going to use a fork fork and knife copy that we're gonna put that we're gonna put the fork and knife first now I'm going to put these two into an H stack like that and I am going to space them so that it is on the right hand side so all I'm going to do is add a spacer element before the two images which pushes it all the way to the right and finally we are going to change the color and the size we're going to add a foreground of gray and the font of caption foreground color Gray font caption now you can see how typing it together with autocomplete is way faster than opening up the library each time to choose the modifiers and again if you're still more comfortable with doing it this way that's completely fine um I love this new version of xcode and Swift UI where you can have multiple ways of doing things you can configure things through the inspector because it makes it The Learning Experience much better and easier as you progress you'll probably be not even touching the library or an inspector panel just be typing and you'll be moving really really fast so don't worry if you're not there yet you will get there if you continue to progress along this journey okay so next up we have the background for this card now let's go ahead this is the vertical stack right you can see when I select this this blue outline highlights the boundaries or the frame of this v-stack so like the H stack the v-stack only takes up as as much space as it needs to so you can see that it's right up against the edge right there so uh if we go down this is the ending bracket for the v stack right here if you're not sure what you can do is collapse the code in between the opening bracket and the closing bracket just so it's easier to read so how you can do that is you press your uh click your cursor here inside the v-stack and you can go into um right here code folding and you can fold and unfold just take note of those shortcut keys inside xcode so you don't need to come into this menu all the time but I'm going to choose fold and Watch What Happens see it folds all of that stuff into these two brackets so that you know it's easier to work with and then it's just it's a visual thing that's all it is and if you want to open it back up you can double click it to open it back up and again once you get familiar with xcode you don't even need to bring out that menu you can use your keyboard and just do that and you can move really fast so the reason I wanted to do that is because I want to add a modifier to the v-stack and in particular the one I want to add is let's go under modifiers and choose background this one right here layers the given view behind this view so essentially it allows me to specify a view as a background to the v-stack so let's see how we can use this to our advantage so this is the background for the v-stack and I wonder why it changes it to Blue I haven't even specified any view but that was what I was going to do so I was going to put a rectangle to be specific so rectangle is a view you can find it actually inside The View Library here it's a simple shape that you can specify a foreground color Corner radius and things like that so I'm going to drag and put that in between the brackets of the modifier by default I guess it's black so this is where things start to get interesting I'm going to add modifiers to the rectangle to change its look and feel and that essentially is the background for the v-stack so let's go ahead and add a foreground color to my rectangle so I can say you know dark blue for example and that would be blue you can say green that would be green right um so let's leave it as green for now we're going to change it later uh because if I change it to White right now we won't be able to see it now the thing is we probably want some spacing right you can see this is right up against the edge so what we're going to do is add some padding we're just going to use the padding modifier like we've done before and great we have some padding between the edges of the screen and the card but what about padding inside of the card right you can see the green background we'd want some padding there so what I'm going to do is add the another padding modifier right here before the background modifier and you can see that that's this padding right here whereas this padding is this now I know that might be a little bit confusing but the way to think about this is that you have your v stack this is your original View and then these modifiers get applied in sequence that means in order so if you look at the code that we have right now first we have padding so that adds actually let me just remove this code for now I'm going to press command X so that you can see what we have so without this padding modifier you can see that the blue frame right is right there if I add the padding element essentially adds padding to all four sides and now I put the background modifier on there let me just remove that last padding bit right the background gets applied to the padding as well and then when I put another padding modifier it gets applied to the outside of the background like that what happens if let's say I move this padding modifier here right then we get padding and then another set of padding so that's why it's so thick and then the background gets applied if I take these two padding elements and I put it after the background then we get something like this where there's no padding right the background gets applied to the v-stack and then you have a set of outer padding and another set of outer padding so the order matters sequence matters here okay so now that you've understand that let's change this foreground color to white and we're going to add another modifier to the rectangle and let's create some space here dot Shadow now I'm just going to specify 15 for the radius and you can see that you have a nice shadow effect that's how easy it is to apply that now the last thing to do is to apply a corner radius to our card now I don't want to apply it after the shadow I actually want to apply it before the shadow because I want the shadow to apply to the rounded card and not round the corners of the Shadow because remember order matters right so if I do corner radius 15 you can see that let's choose this you can see that I have the rounded corners and then the shadow gets applied but let's see say we do it the other way around right and I put a corner radius on the shadow you can see it it completely breaks things so I want to round the card first and then apply the shadow to the rounded card essentially is the rectangle we're using it as a background for that v-stack okay so finally the last step is to put that mint green background on everything and just like in lesson one we've done this before so we are going to use a depth of Stack right and we're going to put a base color at the bottom and then this V this whole v-stack card this whole thing on top of that color so let's do that if you remember what is a depth stack right it is a set stack like that I'm going to put a color I'm going to choose mint system mint okay and again this is the safe area right so we have to apply another modifier to it so ignores safe area so it goes all the way and then what we're going to do is we're going to put the v-stack on top of it so this whole thing right here and keep in mind this is still collapsed which also makes it easy to select command X command V to paste it inside does that stack so there you have it so how was that as you build more user interfaces inside xcode you're just going to get faster and better remember that you can get the associated xcode project with this lesson as well as any challenges and quizzes by creating a free code with Chris account and taking this course on our learning platform we also have a free community where you can get help if you are stuck on something just visit codecrew.codewithchris.com in the next lesson we are going to build an app that is not just the user interface but also includes applogic and user interaction so it's going to be a good one I'll see you there today you're starting a brand new app that will teach you all of the basic skills for IOS app development in this lesson you're going to be building the user interface for that app and then in the following lessons I'm going to take you through the coding part so that you can add the logic and user interactivity to the app now hopefully you've been following since lesson one and if you've been learning a lot please show your appreciation by giving this video a thumbs up and consider subscribing so that you don't miss the next lesson alright buckle up let's go okay let's go ahead and start a new xcode project go to file new and let's choose project and then under iOS we are going to select app Now by this time this should start feeling pretty familiar to you I'm going to call this the war card game now this time we are going to come back to this project over several lessons so make sure you name it something that you like and also save it in a location that you can remember because you're going to need to launch this project again so you don't need to change anything with Team organization identifier interface should still be swift UI and language should still be swift you don't need to check any of the other options let's click next I'm going to save it on my desktop so it's easy to find you don't need to create a git repository for this let's just hit create and if you don't know what any of those options are I would suggest you review lesson two because that's where we went through all of those options let me adjust this window just a little bit so we can see what's going on and I'll shrink that a little bit and we will actually get rid of that inspector tab next we're going to add the image assets that we're going to need for this war card game so I've got the assets ready to go here in this folder in the video description below you'll find a link to a war card game image assets dot zip file if you unzip it you'll see the same image Assets Now if you're on desktop you might need to expand the video description that's underneath the title in order to see the link and if you're on mobile watching this on YouTube you might need to tap on the title of the video to open up the video description and then you can find the link link once you have that zip file unzipped and you have all these assets staring back at you I want you to highlight all of them notice that they're organized by folder and those folders are going to be preserved when we bring them into our asset Library so in xcode let's go ahead and click on assets and then back here we're going to drag this and just drop it in there you're going to see that this is preserved and so it's really nicely organized and if you've worked with IOS app development before you might have a scene that we did three different file sizes however these images if you notice they are SVG format this is a special vector format where you can scale up and down these image assets without any loss of quality so that's really neat and we only need to have this one size here okay after you've done that let's take a look at the UI that we're trying to build now based on what you've learned in the previous lesson how would you break this user interface up in terms of what view containers or layout containers if you want to call them that which one of those are you going to use to lay out these elements and second of all which view elements are you going to use to represent each of these things that you see now as an exercise I want you to pause this video and try building this UI yourself inside xcode trust me by doing this exercise you are going to cement your skills and you're going to identify what you need to review now before you start this challenge if you haven't watched the previous lesson you can do so right over there it's going to show you all the skills and techniques you need to accomplish this right now now for each of the elements that you see in the UI right here I want you to just use a swift UI view element to display the images that you've just added to the project now in terms of which view containers you want to use in order to lay out these different views it's all stuff that you've used in lesson three so there are no surprises and here are also some viewer modifiers that might come in handy so pause the video now and try it out and then resume it when you're ready to build it together all right how was it now if you got it to look relatively the same that's a win in my books but if you struggle that's also a good thing because as you follow along and we're going to walk through it together you're going to have context and that makes a huge big difference all right let's do it okay here's what I see we have a depth stack as the root element also known as a zed stack or Z stack and then we have an image which represents the background and then on top of the background we have a v-stack which is going to contain everything all of the elements that you see on the screen inside that v-stack first we're going to have the logo centered and then below the logo we're going to have an H stack containing two cards and then below the H stack we are going to have the button and then below that we're going to have another H stack inside that H stack will contain two v-stacks each of the V Stacks will contain two text elements representing the player label as well as the score and then it's just a matter of adding spacers and padding to make sure everything looks nice and spaced out now if you did it another way that's perfectly fine too okay let's implement this in xcode okay so here back in xcode make sure you have all these image assets added to the project if you haven't already and let's go into the content view here we see the preview this is all the default stuff let's get rid of that make sure you don't accidentally delete that bracket or else xcode will be complaining so you should have two opening brackets and two closing brackets right here so I'm going to type out my view containers and Views you can feel free to use the library just like I have shown you back there if you haven't gotten familiar with just typing it out nothing wrong with that so here we have our Zed stack I'm going to add an image and this is going to represent our background so I'm going to put background plane that's the one you could try different ones you could try out texture for example now what isn't that oh it's called cloth sorry no wonder cloth wood cartoon I think this one was called yeah now notice though before I said that the image doesn't reach over here and over here those are you know the safe area right unless we put the modifier ignore safe area so why is the image reaching all the way there uh now and that is because it's displaying the image at its full size all right because we haven't added the resizable modifier to it if we did it would actually resize the image to fit the screen so that's why the image is going full screen because the image is actually larger the native size of that image is larger than the screen size so I first of all I'm going to go back to plane and then I'm going to do resizable and you can see as soon as we do that we're allowing Swift UI to resize that image to fit the screen and you can see that it doesn't go past the safe area so we're going to have to add ignore safe area now for this type of background it doesn't really matter even if it's you know way too large for the screen because you can't really tell but if it's a landscape image like we had for the the Niagara Falls image in lesson one two three and lesson three uh you would see that it's like super zoomed in right so that's why we would have to add the resizable and then if you wanted to cover the whole screen you would do ignore safe area okay so that's that this v-stack next is going to contain all of our elements like I said first up is the logo there it is beautiful logo and then we have an H stack containing the two cards so uh H stack remember lays things out side by side so inside the H stack we're going to have two cards so I'm going to use card two foreign car 3 and there's a strategic reason why we named these the way we have card two three four five all the way up to card 14 for the ace uh you will see when we get to the later lessons uh where I show you some of the code and some of the logic and you're going to learn how to apply that don't worry if you've never coded before it's going to be really simple I promise you but naming the cards this way is going to make it easier for us as well next up we have I'm just going to use images for now for all of these elements we have the button right and then we have the the scores now a single score looks like this player and then the score right but there were two of them right so um what I'm going to do is create an H stack all right I'm going to put the player label and player score inside that H sac and then I'm going to copy this and paste it command C command V to copy and paste and then this is CPU and there you have it these are all of the elements that are on the UI now we just have to space them out one of the easiest ways to space things out proportionately is to use spacers remember a spacer takes up all available space if there are multiple spacers it divides the space up between them evenly so for example if we wanted to space these items out vertically to have an equal amount of space between all of these vertical items in this v stack here we could put a spacer just in between everything right here here right between the logo between the card H stack between the button between the scores H stack so let's try that I'm just going to copy that and we're going to paste it a bunch of times so you see just adding a single spacer it pushes everything down because it tries to get as much space as possible so that's a great thing to do if you want things to be bottom aligned for example I'm going to add a second spacer under the logo so now you can see it splits up the space between the two spacers I'm going to add a spacer below the card H stack now it's divided by the three spacers I'm gonna put another spacer below the button there you go and finally another spacer below the scores so now everything is spaced out vertically evenly for these cards I want to do the same thing for the h stack I'm going to put a spacer in between the two cards which pushes them off to the side but guess what we're going to add a spacer to the left of that card and to the right of that card and now they are spaced out evenly horizontally now we're going to do the same thing for the scores we're going to add in this H stack a spacer like that which pushes out to the side again we're going to add a spacer to the left and to the right so it divides the space up evenly there we go now we're going to change some of the font colors and sizes so why don't we first make everything white in the fun white now I could apply them to each text element but remember if you apply the modifier to a view container it gets it affects all of the views inside of it so I'm going to take a look at which outer parent view container contains all of those hex Elements which happens to be this H stack right I could you know I could put on this vsac and this vsac but by if I put it on the H stack then it applies to everything inside and I only have to do it once so let's do foreground color dot White you can see that all that turns white it gets applied to that that that and that all four text elements now this time for sizing I have to apply it to the individual text elements because I want them to they're going to look a little different for each one for the player I am going to do font and I'm going to say dot headline it's going to bold it a little bit same thing for the CPU label font headline it's going to make it a little bigger for the score I'm going to do font dot large title same thing for here font dot large title and then lastly I want to add a little bit of space underneath the player label so I'm going to add a second modifier under there and this time instead of just adding padding which does padding on all four sides what you can do here instead of just writing out the code sometimes if you don't know the code representation of something that you want to do you can always open up the inspector panel and you can take a look at what's happening so for for this player label padding is being applied on all four sides you can see here padding is all four sides I can hit X to get rid of the padding actually that deleted it and I can check just the bottom padding so and I can increase it to 10. so that's just going to pad the the CPU no it didn't apply it ah what did I apply that to okay so you got to be a little careful doing that let me just hit X on that uh I think I applied it sorry I applied it to this I'm gonna put my cursor over the player label I'm going to hit bottom now you can actually see the code it added padding bottom and I'm going to increase that to 10. by default it's 20. let's refresh it there we go so you see 10 right there and you can see the equivalent code modifier being applied to the player label now I can simply copy that and I can paste it for this CPU there you go awesome that is our UI now in order to apply some user interactivity to this button so that we can handle the user topic on it we're going to have to learn a little bit of basic Swift Code that's why we're going to take a few lessons to get some basic coding skills and then we're going to come back to the war card game apply what we've learned and bring this app to life now if this is going to be your first time coding don't be intimidated I'm going to make this so simple for you to understand and we are going to erase any fears that you might have if you're excited please give this video a thumbs up if you haven't already I really really appreciate it and I'll see you in the next lesson in the last lesson you built this user interface but in order to handle Taps on this button to change the cards up top we're going to need a little bit of Swift Code by the end of this lesson you'll be writing your own Swift Code statements and you'll realize that it's not so hard to read or write so please watch Until the End alright let's buckle up and let's go first of all let's make sure we're all on the same page what is coding well to me it is just the act of writing out code statements which represent instructions that we want the computer to do and then the computer reads the code statements and carries out our instructions well what is Swift then well Swift is the coding language that we use to write those code statements just like a language for instance English or Spanish has a structure and it has rules to follow and it allows us to express ourselves the Swift coding language is the same it has a structure and a grammar which we follow in order to write Swift Code statements these Swift Code statements are then converted into machine code which the computer can understand and carry out now you might ask why not just write machine code and skip this extra step well Swift code is easy to read write and to manage for us human beings but machine code is not so that's why we need this step now the thing that converts the high level code like Swift code to machine code is called a compiler in this case with building iOS apps xcode performs this compilation step now that you understand what it is let's try writing some Swift Code statements of our own and I know the perfect place to do this we're going to experiment with some Swift Code in something called xcode playgrounds now if you're brand new to this video series we downloaded and installed xcode back in lesson one so if you don't have xcode ready yet just go ahead and watch lesson one right over there and come back to this lesson when you have xcode ready to go now a playground is a lightweight way for us to practice with and experiment with swift code without creating a brand new app project which has a ton of views already set up for you and things that we don't need so here's how we can create our playground make sure that xcode is in Focus you can click on xcode the dialog window right here go up to file and then go new and choose playground you're going to get something like this now we are going to go under iOS and we're going to choose blank and that's going to be the most basic of basic playgrounds for us to test our code with click on next and we are going to save this somewhere I'm just going to call this uh code playground you can call it whatever you'd like is we're just going to use it to test some code okay so now first of all I'm going to close this left hand Navigator because we don't need that by clicking that button and then I'm going to make this window a little larger so we can see what we're working with okay so if you're following along you should have something that looks like this now in this brand new playground we have this single Swift statement you can ignore the import statement for now let's focus on this line of Swift Code and let's see what that does VAR greeting equals hello playground let's dissect this Swift statement first of all we're going to talk about this hello playground part on the right hand side of the statement now this is a piece of Text data and you've seen this before in the user interface that you've previously built I've highlighted the pieces of text Data here now I shouldn't really surprise you apps are all about manipulating data pulling data from various sources manipulating that data showing that data to users through the app user interface interacting capturing user interaction as data and then processing that storing data and retrieving data to and from databases and so on and so forth later on in this lesson we're going to talk about different types of data that you can work with but for now let's go back to the code statement this is a piece of text Data I want to ask you a question where does this piece of text Data live or in other words where does it exist well it exists in the computer's memory this is memory space that is allocated for our app to function okay great now how do we refer to this piece of data in the memory so that we can work with it and manipulate it so walk with me through this scenario imagine you have your first Swift Code statement that creates this piece of data in the computer's memory in your second Swift Code statement let's say you want to work with this piece of data perhaps you want to manipulate that text Data change it to all capitals or maybe you want to take it to display it on the user interface or something like that but how do you retrieve it and access it from the computer's memory we need some way to be able to access and reference that piece of data in memory and this is where the rest of that Swift Code statement comes in let's go back to it this is a variable and it is something that allows us to keep a reference to something else think about it like a sticky label that you can stick on a piece of data in this case our variable or label if you want to think about it that way is called greeting and the equal sign is what is called an assignment operator now its job is to assign the data on the right hand side to the variable on the left hand side it's like the process of sticking that label onto that piece of data right here VAR is a special Swift keyword and what it does is create a new variable so if you read this entire Swift Code statement from left to right these are the instructions it would be giving to the computer when the computer executes it so starting from the left first of all create a variable named greeting next assign to this variable the piece of text Data hello Playground now after this code statement is run we now have a way to refer to that piece of Text data in memory anytime we want to get access to it we just have to use the variable name in this case that is greeting in fact take a look at this second line this code statement prints out the text Data let's see how we can try this out on the playground the xcode playground has a way for us to run or execute the code to see what the results are or the output so here in the lower left hand corner you'll find this small play button and if you tap on that it's going to execute the playground now the first time you tap on it you can check the status bar it'll tell you it's running and uh when after you click it you're going to see the output now right here you won't see anything aside from something appearing over there because we haven't printed anything out but in the lower right hand corner you see this other button this brings up this little window down here and this is called the console area this is where output will happen so let's go ahead and write that second print statement and try out printing out our variable so I'm going to type in print Open Bracket greeting remember this variable is going to reference hello playground so let me hit stop here and hit execute again and this time it's going to run both lines of code starting from line three and then line four and you're going to see the result of line four printing out the text Data into the console here now I want you to notice something in line three we had the VAR keyword but then in line four when we wanted to use that variable we did not have to use the VAR keyword again because remember this VAR keyword is a special Swift keyword to create a new variable in line four we're not creating a new variable we are simply calling it and using the data that it references that's why we don't use the VAR keyword there now if you want to use proper terminology this process of using the VAR keyword to create a new variable is actually called declaring a new variable now I only use the word creating because in my experience teaching this creating makes more sense to beginners but now that I've explained this to you I'm going to start using the word declaring just so that in the future if you learn from different other training materials you won't get confused when you see them saying declaring now I want to show you something cool about variables remember that analogy about the variable being like a label that you can stick on data well just like labels how you can peel it off something and stick it on something else you can do the same thing with variables so in fact I can assign something else to my variable so let me reference the variable like that notice I don't have to use VAR again because I only need to create it once at the very beginning so greeting I'm going to use the assignment operator and I am going to assign another piece of data a different piece of data to it like that now if I moved my print statement so let me command X to cut it paste it here command V now if I do that what do you think this is going to print out let's go ahead and try it out so I'm going to hit stop and then hit run and it prints out I can write Swift because this has now assigned to my greeting variable the piece of text Data I can write Swift now what happens to the first piece of text Data hello playground while the computer will detect if nothing else needs to use that piece of data it's going to clear it out from memory now I mentioned before that there are different types of data that you can work with so here is a list now it's not exhaustive but these are the most common and basic data types that you will begin working with so first of all let's talk about the string data type this is what we've been working with so far it's text Data I know that's a little bit of a weird term but think of it as a string of characters and in fact this is the terminology for text Data across most programming languages so when you hear string think of text next up we have int and double so int represents integer data so those are like whole numbers including negatives and doubles are decimal numbers or fractional numbers Boolean or bull for short stands for true false that type thing this data type is useful when there are only two options like a light switch on or off now let's go into our playground and let's try out some of these data types alright so first of all let's try out the numbers because we already did strings like this is a string right here so that's Text data so let's try out an INT Pi we'll print out my int notice I'm using the VAR keyword to create a brand new variable called my int and I'm assigning to it the integer five and then I'm printing that let's see what we get in the console window so we get that five all right let's try to look at my double I'm just going to create the Boolean too now you'll notice as I'm typing autocomplete pops up and this is something in xcode that helps you xcode again to detect what sort of variables you have and as you're typing as I'm typing m y I can narrow down it Narrows out down the list to some possible selections and I I don't have to type out the rest of it I can just move down press enter and there we go so let's go ahead and execute this run this and see what we get all right so there's our string data there's our integer data there's our double data and there is our Boolean data so the just in case you didn't know that is going to be the flip side of false it's just going to be true all right next up now that you know about data types I need to mention that when you declare a new variable you also need to specify what data type it is going to be referencing now you might be saying that's not true here's the thing we've been using a short form to declare these variables right here here is the actual way after the variable name you put a colon followed by the data type that is to be expected that this variable will be referencing whether that's string int double Bool or something else now here's the kicker variables can only store data of the same type that you declared for that variable now you might be thinking looking at this playground where have I declared any data types in these variable declarations and none of them have that colon data type well what's Happening Here is a shorthand I don't have to say what type of data it'll hold but the system will look at what type of data I'm assigning to it and then it's going to know oh okay so this greeting variable is actually a string data type variable this my int it looks at this data that I'm assigning to it for the very first time and it's going to know oh this is an INT data type variable so the same thing goes for the other variables this is going to be a double this is going to be school now why is this important to know well let me show you an example for this variable greeting it is of the string data type so I can assign these two pieces of string to it in fact I can reassign another piece of Text data to it however let's say I try to assign an integer to it we're going to if we try to run this we're going to get an error cannot assign value of type int which is this to type string which is the greeting now even if we do not declare the data type up here so let me just get rid of that and let me run it again it will still end up with the same error because the first time you assign data to that variable you're locking in the type it's going to look at this and it's going to say this is string data type this is going to be a string data type variable and that's what it is from that point on okay so that's just something that is important to know now one last thing I want to show you before we move on from this lesson is something called a constant now constants are a special type of variable instead of using the VAR keyword to declare a new variable we use the let keyword to declare a new constant now everything about a constant is the same as a variable from how it's used to how it's declared and how it can only store data of the same data type as what you declare it with now the only difference there's one single difference and that is that with a constant you cannot reassign data to it once you assign data to it it is constant all right you guaranteed that that is the piece of data that it's affixed to think of it as like a label but instead of just sticking it on the piece of data you are super gluing it on with some industrial grade stuff and you cannot rip it off okay that is like a constant so let's go back to the playground and let's try this out so for example uh if I change this VAR for the greeting variable to a let that changes it to a constant we're going to get an error here because we cannot assign a value greeting is a let constant we've already assigned it this value so we cannot reassign it however if I change my int to a let constant this is going to be perfectly fine I can run this and it's going to produce output however if I try to reassign something to that label let's say 40 we are going to get an error now you might wonder why would we ever want to use a let instead of a VAR well the reason is that variables have special allowances in memory some stuff under the hood that gives us this flexibility but it comes at the cost of not being as efficient or optimized as a constant so if you know something is not going to change or you want the assurance that it will never change as you are using your constant then you should use the let keyword and in fact xcode will help you optimize this if you use VAR keywords and xcode detects that hey you've never reassigned anything into this variable why not use a let and it's going to prompt you as you're coding in in an actual app project it's going to prompt you why don't you change this VAR to a let instead because it's not going to impact anything and in fact under the hood there's going to be a Teensy bit of optimization congrats on writing your first Swift Code statements if you're learning a lot from this video series please support me by giving this video a thumbs up and if you're not shy please drop a comment below and let me know whether or not you are able to follow along this diagram sums up what you've learned today you learned about what variables are how to declare them and how to use them you learned about data types and finally you also learned about constants great progress today we are going to continue learning Swift and we're getting closer and closer to going back to that war card game and adding user interaction in this lesson you learned about code statements in the next lesson we're going to learn how to batch these code statements up so that we can execute them as a group so that we can assign that group to the button tab on the war card game and that is how we are making our way towards adding interactivity to that work our game I'll see you there in the last lesson you wrote your first Swift Code statements in this lesson you're going to learn how to group together code state is to perform a task now these groupings of code statements are called functions this is a very powerful concept because you can execute or call these functions whenever you want to perform that task let's dive in and see how we can write our first function okay so first of all how do you declare a brand new function now this is going to look somewhat similar to declaring a new variable or constant it's a keyword followed by a name so in this case of a function the keyword to use is f-u-n-c or func for short and Then followed by that you put the name of the function now just like a variable name you are going to be referring to this function name in order to execute the contents of the function now after the function name you're going to have two rounded brackets we're going to ignore these for now but these two brackets they are part of the name and then following that you have a set of curly brackets and you're going to find most of the time in Swift when you see a pair of curly brackets it's code that goes in between those two brackets in this case of a function that is where we are going to put our grouping of code statements so whatever code statements you want this function to run when you call it you are going to put those code statements in between those two curly brackets okay so let's put some code in there and see what it looks like you probably remember these two lines of code from the previous lesson if we put those two lines of code into our function and we change the name to say hello it's going to look like this okay so how do we call this function so that we can execute its code we simply use the function's name say hello followed by the two rounded brackets because that is also part of the function's name notice that we don't need to use the funk keyword again because that was only for declaring a new function so just like that you are able to execute all of the code inside that function now why don't we try it out in an xcode playground so we can see it in action so here I am with a brand new empty well empty aside from the default code xcode playground we have our VAR greeting equals hello playground string and why don't we put in our second line which is print greeting and just like you saw in the previous lesson when we run this we are going to get that output in the playground right there now let us declare a brand new function using the funk keyword followed by the function name say hello followed by two rounded brackets followed by a pair of curly brackets and oftentimes when you write these brackets you'll find that xcode helps you complete them so let me just go back for a second by holding a shift and hitting square bracket so on my keyboard that's how I get the curly brackets shift and do that if I hit enter it's automatically going to create a new line and it's going to create that closing bracket for me in here I am going to take these two lines of code I'm going to press command X to cut it and the command V to paste it in there and let's run our um our playground and see what happens so as expected nothing happens because all we've done here is we've declared this function say hello and we've put in the code in between the brackets it's not going to run this code unless we call the function so if I start typing my function this menu pops up this is called an autocomplete menu if I didn't mention that in the previous lesson and this just helps you write code faster you can just select it it's xcode being intelligent right so you could type this out if you want but notice this is the function name right followed by the two rounded brackets because that is part of the function name and you'll soon find out why okay but for now let me run the code again and see what happens now this time I get the output in the console because this line of code is calling the function which is executing the code in there now if I call the function again it's going to execute those two lines of code again so you can see this is really powerful because often times to perform a task it's multiple lines of code working together to achieve a common result and let's say there's 10 20 lines of Code by putting it in a function not only can you run that task whenever you want but it also saves you from repeatedly writing the same code and when you get to writing larger pieces of software not repeating code is actually pretty important because if you find an error in one instance of that repeated code you don't have to go and fix it in all the other places you repeated that code by putting it in a function once and calling it you know from wherever you need to call it you can edit the code and fix it from one place now that's pretty handy right if you like that you'll be even more impressed with this next part now to take it a step further functions can be even more useful because they can accept input into the function when you call it and that is what the two rounded brackets is for that comes after the function name in between those two rounded brackets you can put a series of what looks like variable declarations if you take a look at this slide here in between the two rounded brackets I have M colon string now what this is doing is declaring what's called a parameter for the function this means that whenever I call the say hello function I also need to supply the function a piece of string data and then inside my function within the two curly brackets I can work with that piece of data and I can reference that piece of data using the parameter name which in this case is M so you can imagine with this code now whenever the say hello function is called it also needs to be supplied with a piece of string data which we can reference using M and then within the function we have the code print M so in essence this function serves the purpose of outputting or printing to the console whatever piece of string data you pass to the function so let's try that out in the playground here so instead of saying VAR greeting I'm gonna erase that line right there and I'm going to declare a parameter of my function let's use m colon string this pretty much is a variable declaration right except without the VAR keyword but the proper terminology is this is a parameter of the function you can only use m inside these two curly brackets so we also need to modify our code here because there's no concept of what is a greeting now because we just deleted that variable so let's print out M and now you can see when we make these function calls say hello xcode recognizes that hey if you were to call this function the way that you declared it you need to supply a piece of string data so it's saying it's missing the argument for parameter m in the call so let's take a look at what that looks like I'm going to erase those two function calls and I'm going to type it out again now notice this time autocomplete detects that you need to supply string data and this is what that looks like so I'm going to press enter and this is where I would Supply that piece of string data and notice that it tells you that this is going to be the um the parameter name uh when you're building this for real you would probably use a more descriptive parameter name than just m so you might say message for example and uh it would make more sense as you're supplying the string data but we'll leave it as M because to follow the example in the slide I'm going to say I can be cool functions okay let's run the code and see what happens so as we expected prints out I can code functions because this piece of string data is being passed into the function as a parameter and it can be referenced by this parameter label M and then I am printing it out right there I have a reference to M from within the curly brackets but outside of the function declaration it doesn't know what m is right if I if I try to print M like that cannot find m in this scope this is called a scope so you can think of the area between these two curly brackets as a standalone scope or Standalone area and only in that area does this parameter exist in there that you can reference it using m now going back to our diagrams for a section what does it look like to have multiple parameters for a function because oftentimes we may require multiple inputs all it is simply is you declare your parameters separated by a comma in this example we have the same M parameter followed by a comma and then an N parameter notice that this parameter data type is different it's an INT so it expects integer data now whenever we call say hello we need to supply a piece of string data and a piece of integer data let's go back to the playground and try this out so instead of modifying this function I am going to declare a new one and this one let's say does addition and you haven't seen addition yet so this will be interesting so let's declare our first parameter a is an integer followed by comma so that I can declare the second parameter in this list and it will be also an INT and I'll call that b okay and then I have the opening curly bracket I hit enter it fills in the closing curly bracket and inside here I am going to put the code and I what I'm going to do in here is I'm going to add up A and B and then print it out to the console so I'm going to say VAR sum equals a plus b and then I'm going to print out the sum so you should be able to recognize this code VAR is declaring a new variable named sum equal is assigning this the right hand side to the variable sum and this plus symbol as you can guess adds to integers together so we just have a plus b But A and B are parameters that get passed in to this function call all right so let's try this out I'm going to call this function do add and xcode finds it on the menu so I'm just going to hit enter to auto complete that and all I have to do now is fill in the two integers that I need to pass in so let's say 2 and 3. let's run the code see what happens as expected it prints out a five so that is an example of providing single inputs and multiple inputs into a function now let us go back to the slides and extend it even more now functions can be made even better because functions have the ability to return output when you call them let's take a look at how this looks like if you look at this syntax notice that after the function name after the rounded brackets we have a dash followed by a greater than sign which makes it look like an arrow right in fact that is to signify that this function returns something like it produces some sort of output and Then followed by that makeshift Arrow we have the data type of the data that this function produces in this case I'm going to put int because I want to return or output a sum and then within the curly brackets of the function you have have to make sure that you have the return keyword because if you've specified that this function is going to produce some sort of output then you have to use that return keyword and actually produce the output that this function returns and you also have to make sure that what you are returning the output data matches the data type that you have said this function will return in this case I've indicated that do add will return an INT data and inside the body of my function I'm returning a piece of int data so all is well now before we go into xco playgrounds to try this out let's combine this with input parameters and see what that looks like so if you take a look at this slide I have two input parameters A and B they're both integer types they're separated by a comma in this parameter list and then after the rounded brackets I have that arrow and I am specifying that I'm going to be returning an INT data in the body of my function I am adding up the two inputs into a variable called sum and then I have the return keyword and I'm returning that sum as an output of the function let's take a look at this in action in our playground so let's modify our do add function here I'm going to put a space after the rounded brackets I am going to hit Dash greater than space and then I'm going to say that this returns into Data now actual is going to complain here because it detects that I've indicated I should return in data but I'm missing the return keyword for an expected int data so instead of printing this out I'm actually going to say return sum just like in our slides now let's run this code and see what happens notice here that I am calling that do add function and I'm passing in 2 and 3 as my input parameters now there is no output nothing pops out in the console why is that because we don't actually have a print statement that outputs it to the console now you might argue but we we're returning the data from here well returning the data doesn't mean printing it out returning the data means that this function produces that output but where does it go well what we have to do is we have to declare either a constant or variable to refer to that output so here's what we're going to do I'm going to declare a constant this time I'm going to say let result equals the um the output of do add right so what's going to happen here when I execute this function and it produces that sum and it returns it that output is going to get assigned to my constant result if I run it right now there also is no output well why is that because in this line of code I've merely kept track of the sum so now I can refer to that piece of data I still at the end of the day need to print it out so I'm going to right print result here I did this so I can illustrate to you how it's different printing it inside the function versus returning it out of the function and then capturing it uh capturing a reference to it with a constant or variable and then working with it now you might say that's redundant I could have printed it inside the function and that's true but I mean this is a really small scenario right this is important because sometimes you may need the output to further work with it maybe pass you might want to pass that result into a second function you might want to work with it in some way not just simply print it out right with the ability to take input and to produce output functions can truly live up to their name and help us group together sets of instructions now there are a couple more things I want to show you about functions before we are done with them one is called a parameter label so when we declared parameters here for our do add function what we could have also done right before the parameter name you can put a label so you can say let's say first num and before parameter B you could do the same thing you could put another label second num let's take a look at what that does to our function call now I am going to erase this line of code here and uh we're going to type do add and this time take a look at what autocomplete suggests for us it is now using the parameter labels instead of the actual parameter names it functionally the the function works exactly the same way so if I put 3 and 8 here and then I you know run the function it's going to Output 8. the only difference now is by putting these parameter labels in front of the parameter names it is going to change how you call the function the reason for doing this there there may be multiple reasons right one could be you want words that are more descriptive so that when you're calling your function you remember what data you are supplying for it this also allows you to you know notice inside your function you are still referencing them by the parameter names itself so that's something you can use to make your your functions a little more more intuitive as you're reading them and using them something else you can do is if you don't want to have these at all right if you don't want to put labels or parameter names at all you can replace your parameter labels with a simple underscore you can do this with one you can do this with both it doesn't matter let me just do it for both and show you what that looks like so I'm going to type do add again and this time take a look at what that what it shows up as so you'll still see that parameter name here but when you're now adding your data notice that you don't see any parameter names in the function call you also don't see any parameter labels in the function call so this might be good for a very intuitive function names so do add you pass in two numbers very obvious what that's going to do or it could be to shorten the function calls itself or things like that and the last thing I want to mention to you is what is a function signature and just like a written signature a function signature is used to identify a function and that consists of the function name as well as its parameter list including argument labels and such it may seem pretty obvious but let me introduce the scenario too so if I have another function called do add and this is going to be that right and maybe this is um I don't know maybe a plus a plus b plus B and then return the sum so obviously the calculations are a little bit different like what the each function does but they're both called do add and they both have parameters A and B so what is the function signature well the function signature of of this one up here do add is that and the function signature of this one is this right like this one is this and this one is this so they're different and it is a combination of function name like how you are using those parameter labels plus the parameter names itself if that is even a factor now in terms of the topics covered today I would say declaring functions it function inputs and outputs are the most important thing parameter labels and function signatures are nice to know especially when you get to reading Swift Code and you know you won't get confused about why some things look the way that they do but yeah all of that combined is a good working knowledge of Swift functions I hope that with these two lessons you're starting to realize that coding is completely within reach for you now if you're learning a lot from these lessons please give this video a thumbs up and don't forget to subscribe so you don't miss the next lesson now with functions under our belt we are able to execute a batch of code to change the cards up top when the user Taps on the deal button and you're going to learn that in the next lesson I'll see you there alright we're back in the war card game and now we're going to add functionality to the deal button so that the user can tap on it now if you're brand new to this series click over here to start from lesson one all right let's Dive In all right so here we are in xcode looking at our war card game just to give you a reminder let's just run it quickly and see what we can do with it alright so here it is it launches in the simulator we can see the cards this button is not interactive because it is actually just an image right now and these are the score labels so going into the code that represents that user interface if we scroll down we're going to see our image element that represents that button right there what we want to do is change that into an actual button not just an image right so what I'm going to do is create some space here so we can work and you can clearly see what we're doing I'm going to get rid of that image element and that's going to disappear as soon as we make this preview live there we go what we're going to do is First add a button from the library so if you remember that is this plus icon up here if you click that and you go under this first tab which is a library of all the views and buttons should be at the Top If it's not you can always type in button so we're going to drag and drop that right there now this is a basic text button and I know it's a little bit hard to see there in the UI but we're going to start with just a simple text button to demonstrate how it works and then we are going to customize that with the image the deal image let's change this string remember it's a string data type it's a piece of text we are going to customize that into deal and now notice that there are a pair of curly brackets here and in between those brackets you put the code that you want to be executed when the user Taps on that button so why don't we go ahead and just put up a simple print statement and we are going to just print out deal cards now when we tap on the button when it prints this out it will print it out into the console area that is down here in xcode so let me just drag this window up here it's called all sorts of information now if you don't see this part right here here's the button that you would click on in the lower right hand corner you would see this little button here you click it to bring up this debug area and if you don't see two different sides to it there are two buttons again in the lower right that you can turn on and off so make sure that this side with all the text that's the right hand side that is toggled on because that's where this is going to print out to so why don't we again run this in the simulator actually before we do that let me just add a simple modifier so that this text button is more visible because right now this blue text is really hard to see against the green background now do you remember how to add a modifier so you could very simply hit Dot and then foreground color and you can type in dot White to change that to white or if you didn't want to do that you could always go through the library by hitting this plus icon choosing the modifiers and selecting foreground color clicking and dragging right there changing that default blue text to White all right let's go ahead and rerun this in the simulator all right so here's the simulator I'm going to tap on this button and it's going to run this code right here print deal cards as you can see it is starting each time I press it it executes the code within those curly brackets so great our button works now the next thing I want to do is to incorporate what you learned about functions so instead of Simply writing the code here inside of these two curly brackets why don't we call a function from here so this function is going to perform the uh all the code related to dealing cards so why don't we find a space to put this function so this part you have to be kind of careful like about where to put this function because I haven't really explained yet what these structs are and you know where you would put your functions so I'm going to tell you where to do that now but it's very easy to make a mistake so here's what I want you to do so put your cursor let's say right under body right there and you're going to go to editor and you're going to go to code folding and you're going to hit fold you can also take note of these shortcut keys if you'd like so we're just going to choose fold and that's going to fold it all up neatly if you want to unfold it again you just go to you can either double click this actually you can double click that to open up that's probably the easiest way so again put your cursor under body if you don't have a blank space here and you know you can do it there all you need to do is actually make sure that your cursor is after that opening curly bracket of the body and we're going to go to editor we're going to go to code folding and hit fold and the reason I want you to do that is because we are going to create a new line right before this closing bracket but after the closing bracket of the body right there and we are going to declare a new function now I'm going to explain to you in future lessons why why we are putting this where it is and um you know what is a struct uh how do you know where to put your functions and things like that but for now I just want you to follow what I'm doing so type in func to declare a new function we're going to call this function deal if you remember the Syntax for it pair parentheses which in between there you would put in any input parameters right that you this function expects for the purpose of this code we don't need any input parameters so it's just going to be an empty pair of parentheses like that now let's open up a pair of curly brackets like that so that we can actually put the code in there now in here I'm going to put print deal up to declare a string we got to use the quotation marks right okay so this function all it does is print deal cards just like what the button did before and it'll execute this anytime you call deal so now let's open up the body again scroll down to our button and instead of calling print right here we are going to call our new function and look at that autocomplete recognizes it and all we need to do is that now let's run it into similar and just test that it still works because we don't want to make a mistake at this point so tap on that button as you can see it still works right what's happening is that when you're tapping on the button it's executing this function if you scroll lower this is what that function does all right so now in the future when we want to add functionality to the button right here all we need to do is add the code in here so that's a basic text button but what if we wanted to use an image for the button instead let's take a look at how we do that let's scroll back up to our button element as you can see here the button that you add through the library in this way it only allows you to specify a piece of text so this is a text button if you want to create a button which can be visually represented by anything you'd like um what you would have to do is type out button type out the first opening parentheses and you can see a couple of different options for buttons that you can create and what we were looking for is this one right here action and label so action is what happens when you tap on it and label allows you to put any sort of UI code in there any sort of UI visual elements so let's go ahead and double click this and you're going to see this these input parameters look a little bit different from this one right this one only had the one text parameter that you had to supply and that was for the text for the button this one has two different ones has action and it has labels so you can double click on any of these so go ahead double click on action this this part right here and what's going to happen is it's going to change in this this sort of format right here this first set of opening bracket this is the action for your button so let's stay organized here so I'm going to actually get rid of this text button first okay and in here uh under label this is actually where we're going to put the visual representation right label this set of curly brackets let's put in an image element and our image name was button right if we go back to assets that's what this is right here let's go back to content View and let's refresh this preview right here oh okay so we can't yet view the preview because we haven't filled in the code part yet so you can actually just delete that code part and that will be valid okay so as you can see here we've got now a visual image of our button and you see this is the visual representation of the button now in here this is supposed to be the action uh good thing that we created a function right we can simply call that deal function like that let's now run the app in the simulator again and take a look at what happens when we tap on our new button so you can see it is an image element but it is actually a button and when we tap on it it runs the deal function which prints out this statement in the console area all right now that we have the button looking the way we want let's add some more functionality to it so we want our deal button to do more than just print out deal cards we want it to actually deal cards right so how is tapping on this deal button and running this deal function right what sort of code can we put in here to actually change the images for this image element and this image element right and then how are we going to update the score labels here as well well let's first take a look at what represents these things and see what we can work with we scroll up we can see that we have an image element that represents card two and this is referencing the image asset in our asset library card two in fact we have card two all the way up to 14. so you'll notice that when I change this in here and I update the preview it's actually going to change the card right continue to 13 right change this to 14. and if I accidentally change it to a name that doesn't exist then it actually doesn't show anything right so what we need to do is when the user Taps on the deal button we need to run some code statements that would change what is being passed into this image element in this image element as well well if you think back at the Swift code that you have learned so far this is variables constants functions there is something that can help us here right what I'm referring to are variables so why don't we go at the top here and declare some variables to represent the cards for the player and the cards for the computer and that way when we hit the deal button we can change the value in those variables let me show you what I mean so put your cursor in front of VAR and just create a couple of lines right there like that and we are going to declare a brand new variable to store these two values right here instead of this is called hard coding a string meaning that when we just put a text a piece of text here there is nothing that can refer to that piece of text to change it so this is what's called a hard-coded value we are now going to change that so that can be dynamic so we declare a new variable using VAR right and I'm going to name this variable player card and I'm going to assign to It Card let's say seven and then I'm going to declare another variable let's call this one CPU card and I am going to assign to it card 13. that string right there and now you can probably see where this is going in the image element instead of passing this hard-coded string into here I can pass in the variable and because the variable is referencing this string card seven you can see that that is what this image element displays right and I'm going to do the same thing with this CPU card by putting in that variable referencing that variable and then passing it to the image element so now you can see where we're going when I tap on the deal button and it runs the deal function inside the deal function I can change the value that player card is pointing to I can change CPU card to another string value as well and that is going to cause the card images to change now I don't want you to do that just yet because there are a couple of details that we need to go through first but I'm just running through at high level what our thought process is okay so let's do the same thing for the scores down here because if you remember when we built this user interface the scores we also use it used some hard-coded values so down here under player we hard coded zero and under CPU we hard-coded another zero let's go up here and declare two more variables to store those scores however this time so I'm going to use an integer because that's going to make it really easy for us to add right we can add one add to we can perform these math operations on an integer let's do the same thing to represent the other score right there and let's go down and change these text elements to refer to these variables that we just created okay so here under player instead of passing in this hard-coded zero string we are going to put player score now you're going to see an error and I'll tell you why so let's change this window a little bit it says no exact matches in Call to initializer so that that doesn't really explain very much to be honest but I'll explain to you what the issue is so this text element expects a text piece of data as input as what to display you know for this label it displays text but what we are passing into it is an integer right it's a number so it doesn't know how to display that because it's only programmed it's only Built to display pieces of string data so what we can do is we can actually convert this number this integer data into string data and then um or rather the string representation of this number right so what this is how we would do that we would here let me get rid of this for for now we are going to create a new piece of string data type in capital S string and then open a pair of parentheses and then in the center in between it you are going to put a player score so let's break this down so first of all notice that the error goes away we're good what we're doing is we're taking this integer and we are turning it into the string representation of that integer so if it's you know the number 10 it's going to be turned into the string 10 and then that is now passed into the text element so everyone's happy let's do the same thing with this one so we're gonna type in string pair of parentheses in in between that we're going to put CPU score and this is called casting I know it's kind of a weird name but essentially we are converting the int data to string data and we're changing the data types it's called casting we're casting into a string that's what's happening all right so now we are all set up to modify these variables right player card CPU card player score CB score we're all set to modify these variables whenever the user Taps on the deal button right here inside this deal function here's something cool if you right click on any function you can jump to the definition that's basically saying that I want to see what is inside this function so jump it's just going to zoom you straight down it could be in another file even it'll jump you directly there to see what is this deal function right and all we have to do is modify the code here to change those variables that we just created okay this is the home stretch one more lesson to add to app logic and then we're done now if you've been learning a lot from this series don't forget to hit thumbs up to support this video and don't forget to subscribe so you don't miss that last lesson I'll see you in that video this is the final lesson we're going to implement the app logic to randomize the cards whenever we tap on the deal button and we're going to update the scores as well by the end of this lesson you're going to have a working war card game all right let's dive in let's do a quick recap of what we have so far when we tap on the deal button it prints out this deal card statement down here but what we actually want to happen is to randomize and display two new cards right here right let's dive into the code for the button and let's go from there so we're going to scroll down and this is our view code right here you can see this is our button element and when you tap on it it calls this function deal we scroll down a little further you'll see this is where we've defined it and it prints out the cards now what we're going to do is delete this statement and I'm going to add something that's called a comment or some people will call it documentation but essentially it is a little reminder that you can leave yourself that is not treated as code so xcode as you can see when I type this will treat it as this grayed out text and it's not going to be treated as code you can just leave yourself as many notes as you want and it's a good way to also uh write out the things that you're going to code so we can say randomize the players card randomize CPUs card and we are going to let's say update the score right that's essentially what we want to happen we when we tap on this we want to change the cards depending on who wins we are going to update the scores down here let's take a look at how we are going to change the cards up here we scroll up a little bit and we take a look at our view code we can see that we have an image element representing the player's card right here and another image element representing the CPU card you can see uh the card that is shown is driven by these two variables up here player card and CPU card scroll up here that is exactly where these things are this string card seven represents that this card 13 represents that and these are two variables now one thing I haven't taught you yet is something that's called the struct this is sort of an aside so you don't really need to know this yet but in the next module we'll talk about what a struct is and these are actually um what you know as variables when they are declared inside a struct like this this is actually also called a property but we will we will get there later so for now you can think of them still as variables now I want to point out one thing if you notice the the way that we've named these card assets here we go into our asset Library they all have the word lowercase card followed by a number from 2 to 14. and the reason why I named it this way is because it's going to make us really easy to randomize and choose new cards when we tap on the deal button because all we have to do is let's say we wanted to change the player card right is represented by this variable right here all we have to do is change this to card and then a random number from 2 to 14. and there is a function a built-in function that we can use that would randomly pick a number from whatever range we want so I'll show you how to do that but essentially when we tap on the deal button all we're going to do is assign card the string followed by a random number from 2 to 14. and we're going to do that for player card and CPU card and when we change the strings in these two variables it is automatically going to be picked up by this image element here these two image elements and then you'll see new cards all right so let's go ahead and do that so we're going to go back down to the deal button here and let me show you what we want to do so first of all player card right so player card equals remember this is referencing the variable up at the top equal is we're going to assign something new into it we're going to type in this word uh the string card and then we are going to attach to it a random number from 2 to 14. now we can use the plus symbol to join together two strings so I can do something like this right and that would essentially be one string card seven this is called string concatenation and ignore the air for now now I don't really want to put seven right I want this to be a random number so instead of attaching the string seven I am going to type in int Dot random right when you do that capital i Dot and then R you get gonna get this and we're gonna use this first one right here this first function and this is going to allow us to specify a range and how we specify our range is uh we put in the lower range followed by three dots and then the upper range and this will be inclusive of the lower and upper ranges so essentially this this function this random function of int gives us 2 to 14. now you won't understand exactly what this code means for now but in the next module after I teach you about structs and classes and things like that and Dot notation this will completely make sense to you for now just type in in capital I int dot random uh and then type in this range now you're going to get an error here and the reason why this error is occurring is for one there's two errors here actually the first error is because when you're trying to join do that string concatenation I was telling you about it has to be two strings right here we have the card string but here we have an integer data type they're different data types remember way back then you learned about data types how we have string into Bool double and things like that well this random number is actually an INT so what we can do is get the string representation of the int essentially we are converting or the proper term in app development and programming is called casting we're going to cast the int data to a piece of string data so then it becomes the right type and we do that by typing in string and then wrapping the INT in a pair of parentheses right there so now this would actually be proper and this now is actually another error so now you can see that the error that little red underline is on the variable player card so remember if I scroll all the way back up to the top remember how I said that when these variables are declared under the struct like this this is called a property well we're going to learn more about structs and properties in the next module but what we need to do here is essentially add a special keyword to this property or variable to Define it as something that powers the user interface like it's a piece of data that the user interface depends on and that totally makes sense right if you look down here this image element right here depends on player card same thing with this one this image element which is you know visually represented here it depends on the state of this variable or property right here so depending on the state of these two variables it changes how the user interface looks so what we have to do is add a special keyword in front of both of these called state right and the way we specify this is using the at keyword capital s State space so you can see xcode recognizes it as a special keyword and this is called a property wrapper so this is your property and this is the property wrapper and it essentially changes the behavior in attributes kind of like a modifier it modifies this property to um just indicate that it is a special property right it is one that powers the visual state so we're going to add the same keyword or property wrapper to the to the CPU card down here and then if we scroll down back to the deal button you can see that all the errors are gone and we're gonna now we're going to randomize the CPU card as well card plus and then we are going to say int random 2 to 14. all right and then we're going to have to I'll show you this error because last time I don't think we took a look at it so here cannot convert value of int to expected type string saying that this should be a string so we're going to turn it into a string all right no errors perfect so let's take a look at this we'll run it and we'll try it out because we should be able to visually see these cards change as we tap on this deal button it's going to run this function it's going to assign a random card number two player card and then CPU card as well you see that's that's really cool right it's actually working now if you accidentally specified a number that doesn't exist like these actually have to represent an image asset so if you put 15 and you hit deal and it randomizes the 15 it either will show a blank let's randomize from one to one and you can see what I mean because we don't actually have card one here so it's gonna be an error it's not going to be valid we have to stop the project and run it again and uh yeah there you go it can't find that image because randomizing one to one you're only going to get card one and there is no image asset named card one so just a little warning for that okay so let's change that command R to run it again now we get this okay now we need to add some conditional logic to the app this means code that can decide if this condition is true then do this otherwise if that condition is true do that and in Swift this is called an if statement let me show you how so here I have an empty playground to show you how simple it is to express conditional logic in Swift and all you have to do is use the keyword if just like that and next you're going to put up space and then you're going to put the condition that you want to test now with an if statement it is if the condition is true then execute this code and if it's not true then don't do anything so why don't we say if a is greater than b that's my condition so if that is true then execute the following code and you put that code inside a pair of curly brackets like that so I'm going to write a comment some code here like it's whatever you want as many lines of code as you want you can even call a function here or do anything like that so we are simply going to print let's say thing now what is a and what is B in this condition we haven't declared them so let's declare two variables so VAR a equals four VAR b equals uh five so actually why don't we make B um shorter or smaller so this condition becomes true right a is4 it's greater than b is 2 right that is true so this will get executed it will go into this code block let's run the playground and see if that actually is true let's click this button to open up the console and you can see that it gets printed out right here now what if I change the B to 20 and let's stop the playground let's run it again and you'll see that this time nothing gets this displayed because it comes down here and it tests this condition it finds out this condition is false then it's not going to run this code now the powerful thing with if statements is that you can specify multiple paths or multiple branches so if you think about this condition and this block of code being One path that it could go down you could also specify another you could say uh else if and again you specify the condition here and then another block of code so let's say if um or you know if B is yeah let's let's use another variable so it let's say if B is greater than C then do this so we'll print shoot we don't have a c yet let's go see there let's put C is equal to 10. so in this case what's going to happen it's going to first execute this right and is it going to be true or false a is four B is 20. this is false then if this is false it's going to skip this and it's going to test this else right else means like okay if that's not true then what about this right else if this is true B 20 C is 10 it is true so it's going to then come in here so it does this instead now what if C was 30 . let's run it can you guess what happens you pause the video and take a guess if you want nothing happens why because it comes in here this is false okay well let's test this one this is also false so it doesn't go into either path now what happens if I did this what if C is 10 right so it's gonna this is false and this is true right it's going to come in here but then I change a to 40. right so this becomes true do you think it's gonna type out bang and then type out shoot nope it's only going to take the path that is true the first path that is true and it goes it checks the conditions from top to bottom so test this one oh that is true 40 is greater than 20 so it's going to come into this path and it's going to ignore everything else it's just gonna not gonna even check the other paths so that's why you have that even though both of these conditions are true so the thing is you can specify more branches if you'd like you can see else if as many different paths as you want and then there is also a catch all or sort of like a last resort path if you want to do that and that is just simply else so if this is not true and this is not true then it's just going to execute this whatever's in here so if I run this it's gonna come in here because this is true so let's change a back to four so this is going to be false right 4 is not greater than 20 and then let's change C to um 40. so again this will be also false 20 is not greater than 40. and so it's going to come down here and it's going to execute this and this is sort of like a last resort you could have something like this the else if and else these two Clauses are completely optional you can only have one else catch all path but you can have as many else if paths or branches that you'd like so in this case it would execute hello because this is false then it just comes down here so hopefully that makes a lot of sense pretty simple to understand and in terms of testing for uh equality here's greater than there's less than and then you can do less than an equal to or greater than and equal to you can do not equals that's that's exclamation mark equals and if you want to test for equality it's not equals because remember the equal symbol is for assigning something to something so here we're assigning four to eight we're signing 20 to B so here we're not trying to assign B to a we're just trying to test it they're equal if you're trying to test if two things are equal you use equals equals like that and so if we make a equal to B so that will be true we'll see Bang all right now let's apply our Newfound knowledge to the war card game let's do it so back in our work hard game in the deal function here we want to update the scores so we can use if statements we want to say if the player score or card value is higher than the CPU card value then we want to increase the player score else if the CPU card or card value is greater than the player card value then we want to update the CPU score and if you scroll all the way back up here you'll see that we have two properties variables keeping track of the player score and CPU score so we're just going to increment this by one depending on Whose card value is higher so going back down here we're going to use the if statement if and then we're going to compare player card value with CPU card value and how do we get the card value because if you take a look at this we're randomizing the number here I've strategically chosen the numbers so that they represent the card image asset but they also represent the card value so down here card two two is smaller than any of these numbers right so Ace that's why I made it 14 because Ace should be the biggest so if someone randomizes an ace that would be 14 and that would beat 13 which is king So what we need to do is be to be able to compare this random number with this random number so we need a reference to it right but how do we get a reference to that number because I've specified it here and it's going to get joined together with this card so I can't actually refer to it so the strategy we're going to use is to instead of randomizing it here let's randomize a number from 2 to 14 and assign it to a variable and that way we have a reference to it right it goes back to that first Swift coding lesson you did a couple lessons back about using variables to keep track of values so here we are going to declare a new value let's call it player card value and we are going to assign to it this all right so we're going to randomize that number from 2 to 14 and we're going to assign it into this variable and then in here we can specify that variable right there right and turn it into a string because this is an integer right that's going to get assigned to this uh and then we're going to do the same thing with this CPU VAR CPU card value is equal to CPU card value and then we're going to now be able to write our if statement so if player card value is greater than CPU card value then we're going to add one to player score and to do that we can say player score and that's the the variable that we have way up at the top of this file we can do this we can say um Plus or sorry equals player score plus one but there's a short form where you can write this which is this plus equals one and that is just going to increment whatever score it is with one okay so we're going to do it the shorthand way and just like before we have an error because remember player score is a piece of data that the user interface is dependent on right it gets displayed in this text label right here you can see right here this text and this this text right here so what we have to do is add that State Property wrapper to it just like we did with the player card in the CPU card all right now we're going to come back down and no error so down here would I add an else or an else if if I want to now compare right if the CPU card value is greater than the player card value now I could use if and I can say you know in that case CPU score with plus equals one but there's a problem with this because this is comparing player card is greater than CPU card what if player card value equals CPU card value what if they rolled exactly the same value in this logic the CPU would win even if the values were tied up right so I I would not use else here I would use else if CPU card value is greater than player card value and then you can say else this is a tie right and then you can handle this how you want so in this case this would be like add one two CPU score you see how handy adding these comments are it really makes it a lot easier to understand your code especially for someone who is new and learning how to code um yeah so for this Thai scenario you can you can add one to each score you can minus one from each score or you can do nothing so I'm gonna choose to do nothing but you can do that differently so let's see if this works let's run our project oh what happened there I rolled the card ah take a look I made a mistake this is a perfect learning opportunity so um right here player card is equal to card Plus player card but that doesn't make sense right it should be equal to player card value right because this is the random number so I don't know if you caught that earlier on when I was writing that but if you did kudos to you props um but if you didn't then you're in the same boat as me I totally didn't see that either so you can see it works now well I'm going a little fast but uh Ace so player gets that oh there's a tie see there's a time so nothing happens all right looks like it's working and there's actually more ties than I thought there would be there was another one and there you have it you've built your very first app now before I tell you what you'll be building next let's do a quick recap of how far you've come you've learned how apps go from code to App Store you've learned your way around xcode you've learned how to read and write Swift at a basic level and you've learned how to build the simple user interfaces but more importantly you've stopped doubting yourself about whether or not this is for you now I want to introduce you to what comes after this war card game the menu app this series continues from where the war card game left off and prepares you for the next step in your iOS journey and Beyond now don't be fooled by this simple scrollable list this is something that you could learn from tons of tutorials out there but we're going to take it a step further not only will you learn the skills needed to build this app but we're going to modify the code afterwards to mimic that of a more complex app now let me explain many tutorials teach you how to build a simple single screen app and with good reason it's a great starting point and you need to learn to walk before you can Sprint the problem is that there's a conceptual leap from a single screen app with self-contained data to a multi-screen app that fetches data from a variety of external sources and not only is the code more complicated but you'll have to understand aspects of networking concurrency proper app architecture and coding for reusability just to name a few so in the second half of this menu app video series that's what we focus on explaining these Concepts in preparation for the next larger more complex app so that's all fine and good but when is this menu app video series going to be released and where can you watch it well I'm happy to announce that it is free to watch on the code with Chris learning platform the reason it's not currently on YouTube is because the menu app series is a step up from the war card game in terms of skill level so I wanted to enhance the learning experience with practical exercises quizzes and human support now these things are all available for free through the code with Chris learning platform now I want to be fully transparent aside from the quizzes the challenges and the human support that you're going to receive in our Forum you're also going to get a special offer to join CWC Plus where you can get access to all of our available courses you see code with Chris has grown into a business with a team of people behind the scenes making it all happen and I thank you for your support over the years and I hope you continue to find our iOS teaching valuable obviously you're free to ignore the offer if you're not interested either way you're still going to get access to the menu app video series the exercises the quizzes and our team will support you in your learning whether you are a paying customer or not so to get access to the free menu app series simply visit codewithchris.com in the upper right corner click on sign in and then click on the register link right below the form and create a free account right away you'll be redirected to the student dashboard where you'll find the menu app course card simply click Start course to begin learning thanks and I hope you enjoy this menu app video series which I've created I'll see you in the next lesson

Channel: CodeWithChris

Views: 37,250

Keywords: How to Make an App, How to Create an App, How Build a Mobile App, Xcode, Swift, iOS, Coding, Programming, iOS Development

Id: K0t-RCSlasE

Length: 180min 49sec (10849 seconds)

Published: Thu Apr 06 2023