Transcript for:
14-Day Beginner App Development Challenge Lecture Notes by Chris - Code with Chris

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