How to Make an App - Lesson 1 (2023 / Xcode 14 / SwiftUI)

welcome to how to make an app for beginners  now it doesn't matter if you've never coded   before by the end of this video you will have  built this app now I know it looks simple but   it's so powerful because you will have proven to  yourself that you can make a nap and oftentimes   that singular belief is all it takes for you to  continue growing your skills building bigger and   better apps and potentially even starting a career  in app development now maybe you've been doubting   yourself or maybe you've been wanting to build  that app in your head for the longest time or   maybe you've even tried coding and failed we're  going to turn that all around my singular purpose   for this lesson is to help you believe that you  can build an app and I think that once you realize   that it's not as hard as people make it out to be  you'll be excited to continue to grow your skills   and build bigger and better apps so I really  hope that you watch till the end and you see   what happens quick note in case there's any doubt  in your mind why I'm the right person to teach you   this stuff my name is Chris and I've been teaching  app development foundation since 2013. code with   Chris is also the largest iOS Channel on YouTube  and the last time we did this training series   it was is viewed by over 5.4 million people  this lesson series that you're about to watch   has even been used inside School classrooms and  Apple retail stores now all that is just to say   that you're in good hands I'm so excited you're  here let's roll up our sleeves and get started   I'm going to walk through this diagram and  then after I'll tell you where to get all of   the pieces it all starts with the xcode IDE now  IDE stands for integrated development environment   which is a term for the application and all of  the tools a developer uses to build something   for the rest of this course we'll simply call it  xcode this is where we build our app by writing   Swift Code building the user interface or UI  for short and connecting it with all of our   data Swift is the programming language we use to  express our logic and to tell the system what we   want to do we can even build the UI through  Swift Code as you'll soon see now Swift UI   is a UI framework that makes it easy for us to  rapidly build apps for all of Apple's platforms   a nice benefit of learning xcode Swift and Swift  UI is that they're the same skills and tools used   to build all apps for all of Apple's platforms  including iOS iPad OS TV OS watch OS and Mac OS   and in some cases your app will be able to work  on multiple platforms without much changes at all   now once your app is built you 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 xco for free from the  Mac App Store I'll provide a link below you don't   need to get Swift or Swift UI those just come  with xcode as for the Apple developer program   I'll provide a link to the enrollment page below  I want to mention that joining the Apple developer   program is completely optional if your goal isn't  to distribute apps into the App Store don't join   it you'll still be able to learn how to build apps  for yourself now that you have a general idea of   the app ecosystem let's start by downloading  xcode and I'll show you how easy it is to use   it to build an app there are a couple of ways to  download xcode if you already have it installed   you can go ahead and skip this section however  if you don't the easiest way to do it this is to   hold command press spacebar to launch Spotlight on  your computer and type in app store and let's open   the Mac App Store on your computer and search  for xcode and then you're going to click on the   listing and then download it like that a couple of  things to note here though don't be turned off by   the ratings this is the official tool issued by  Apple for us to build apps with also take note   of the large file size in my experience it does  take more free hard drive space than this in order   to have it installed successfully and during the  installation process there may be times where you   don't think it's doing anything it seems stuck  it's going to take a while now if for whatever   reason you can't download it from the Mac App  Store you can also Google Apple X code and click   on the listing here and you can download it from  the website this will just lead you back to where   we just were on the Mac App Store however if you  download it from the website do note that you have   to sign up for a free Apple developer account or  to sign in with an existing one okay so once you   have a xcode downloaded and installed let's launch  it and let's start a new project this is going to   be the welcome dialog for xcode and we're going to  start a new xcode project by clicking here you can   also go if you don't see this you can go file new  and you can choose project same thing both will   bring you to a screen like this where you can  choose what sort of project template you want   to start with so we are working with iOS make sure  you're on this tab and then go ahead and click app   and for here I'm going to gloss over some of  these project details because our goal is for   you to get that result and make that discovery  that you can build an app so I am going to save   all the explanations for lesson two right now I  would recommend that you just follow along exactly   what I do and get that result and have that app  in your hand alright so let's go ahead and call   this L1 demo I think you probably have nothing  for under the team organization identifier you   can put in com Dot and then your name no spaces  and interface make sure this says Swift UI it   should be like that by default anyways and  language should be Swift now uncheck all of   those if they are checked go ahead click next and  choose a place to save it um Source control this   should be unchecked I'm just going to save it  on my desktop for now since this is a temporary   project now you're going to give it some time  it's going to boot up your new app project I'm   going to open this window up a little bit you  see how fast I was able to see something here   on the right hand side for you if it's a first  launch it will take a little bit longer give it a   couple of minutes even but while that is going we  are actually going to go ahead on this left hand   side here and click Assets Now this is the asset  Library this is where you're going to store all   of the image and color assets for your app project  I've prepared a an image file that we're going to   for this demo you can go ahead and pause the video  and grab any image you want save it somewhere   where you know where it is and what you're going  to do is click and drag it into this panel right   here or this panel doesn't really matter this is a  big panel so let's drag it there what you're going   to see is this image asset that you've added to  your xcode project now take note of this name here   because we're going to be referring to that image  with that name you can rename it by tapping and   clicking it like that and just typing in whatever  you want or you can hit enter and you can also   rename it like that so mine's gonna be named  Niagara Falls that's perfectly fine for me so   now that you've got that done let's go ahead and  click on content view so by this time you should   be seeing something on here and what you see here  is a preview of your user interface so you can see   what this screen looks like and this this screen  right here on the right hand side is defined by   the code that is written on the left hand side  I'm going to make this really easy for you to   understand we are going to delete all of this user  interface and we're going to build it from scratch   and you'll see how easy this is right now it looks  like a whole bunch of code that you it's really   hard to understand we're going to change that  so let's highlight this code starting at v-stack   and then going all the way to the end of this  line 18 padding and I'm just going to highlight   it all just hit delete and then we're going to  press enter twice so I can make some space in   here now xcode is going to throw a whole bunch of  Errors because it can't detect anything to display   but we are just about to add some new elements  on there so in the upper right hand corner you   see this plus icon if you put your mouse over it  it's going to say library so we're gonna tap on   that and then by default it should be on this  first tab actually so I was using it before so   it was on the second tab but I want you to go  ahead and click on this first tab this one is   all of the views that you can add to your screen  and I want you to in here type in image and you're   going to click on the second one called image and  you're just going to drag and drop it right where   all of that code was that was just deleted so  this is an image view it's going to allow you   to display an image you're going to click  this middle part you're going to hit enter   and you're going to change the text inside  the quotes so I'm going to get rid of that   notice that I still have the two quotes here  in between those two quotes we're going to   type in the asset name so just to remind  ourselves let's go back to the asset Library   mine is called Niagara Falls like that you're  going to type in exactly Verbatim what you have   here including any spaces dashes capital letters  anything and type it exactly in between here because if it doesn't match it's not going to  display and you can also at this point rename   it to something that's easier to type if you want  you could do that and what you're going to see is   the image this is previewing what we have here now  this doesn't look quite right to me so I am going   to modify this image view I'm going to customize  it we're going to open up the library Again by   tapping that and this time we are going to switch  over to the second Tab and these are where all   the modifiers are so modifiers are things that  we add to the view to change its properties and   attributes first of all let's add something called  resizable so you only have to type in the first   couple of letters and you'll find this so this  allows you to it tells the system that this image   can be resized so I'm going to click and drag once  again and put it you can either put it at the end   or you can put it right underneath and right away  give it a little bit of time you'll notice that it   changes the other thing you'll notice though is  that the image now looks a little bit squished   right it looks squished and the aspect ratio is  not correct we're going to also add a modifier to   change that but first I want to round the corners  that something nice and easy and it looks Pleasant   so let's go ahead and do that let's add another  modifier by opening up the library we are going   to this time make sure you're on the second  tab modifiers and search for Corner radius   click drag and drop again and this is the nice  thing we're going to put it underneath resizable   you see that it it's automatically going to put  a space for you make sure you don't accidentally   put it down here or like after this bracket or  anything like that you want to put it after the   resizable so that's going to look neat and tidy  like that and you're going to notice a slight   Corner rounding but we can't really see it right  so we are going to change this number let's change   it to 10. and let's see if we see anything I can  see slightly more rounding now but take a look at   this as well I'm going to leave my Mouse anywhere  on image resizable or Corner radius my cursor I   mean and on the right most side here you can see  a whole bunch of things you can configure after   we added that corner radius modifier you see right  here this reflects what we typed in right here and   in fact if I press Plus you can see it's changing  the number right so this is a very easy way for us   to modify the code visually through through an  interface here okay so I promised that we would   unsquish this image right uh let's go ahead  and open up the library and we are going to   search for aspect ratio and we're going to drag  and drop this one right under Corner radius so   again make sure you put it right there and if  you accidentally put it right here for example   you can go ahead and delete it and try it again  now I'm going to put my cursor on aspect ratio   because I want to change the type of aspect  ratio we can Define how we want this to behave   let's make a little more space you can drag this  and make the preview a little smaller so the code   will fit on one line so you can see here it says  fill which is exactly what we have here I'm going   to pull down this drop down I want to find one  that's called fit because um that will actually   shrink the image down keeping the aspect ratio  until it fits the screen which is what the the   behavior that I want to see unfortunately it's not  in this drop down maybe uh xcode can't detect it   however don't forget we can modify it through the  code as well so I am going to get rid of this fill   by just I'm going to delete it like that and then  I'm going to hit dot on my keyboard and out pops   this menu this is called the autocomplete menu and  it's going to allow you to select from different   options without having to type too much so just by  hitting dot it opens up this menu and it gives me   different options now there we have fit right an  option that resizes the content so that it's all   within the available space both vertically and  horizontally let's choose that and see how that   looks perfect that's what I wanted now one thing  to note if you press Dot and that menu doesn't   pop up that's perfectly fine just type this out  dot f i t and you're going to get the same result   next I don't really like how it's touching the  edges so let's go ahead and add another modifier   this time it's called padding so we're going to  drag and drop that so you can see how easy this   is right you don't even have to write all of this  code you can do this visually I like the way the   picture looks now and let's put a piece of text  underneath so we're going to open up the library   again and you see a common theme here this time  we're going to switch over back to the Views tab   and we're going to search for text I'm  going to drag and drop that this displays   a piece of text right and you want to make sure  that you never you want to respect the brackets   right so you never want to put anything outside of  these two brackets because you see when I click it   right when I click this it shows the opening  bracket we have to put all of the components   after this opening bracket and before this  closing bracket so think of it as a sandwich   so there's my text let's go ahead and  double click placeholder and once again   I can get rid of that text in between the  quotes and I can type in whatever I want but you might get some errors in xcode now  or worse yet xcode might not tell you what's   wrong and it might just not show you anything  as in what's happening right now so the problem   is that it doesn't know how to lay out these  two elements how do you want them arranged on   top of each other beside each other it doesn't  know luckily we have some thing called a layout   container to tell the system how to lay out  multiple elements on the screen so again let's   open up the library under views let's search  for vertical stack you can type in v-stack or   vertical stack we're going to choose this one  not not the lazy ones so vertical stack that's   drag and drop that I'm going to put this above  the image this time you'll see that this one let's   add some space in between it this one comes with  an opening bracket and a closing bracket and in   between it says content so what a v-stack does is  whatever content is in between the opening bracket   and closing bracket it will lay it out on top of  each other so what we want to do is we're going   to delete that content and we are going to move  this image along with all of its modifiers as well   as the text element inside the v-stack right in  between these two brackets so I'm going to press   command X to cut that code and put my cursor in  between those two brackets and press command V   to paste it what you're going to see on the right  hand side is now it knows how you want to arrange   those elements I want to change the text let's  go ahead and add some modifiers right okay let's   open up the library change to the modifiers  Tab and we're going to choose one called font   and you might not see it right away because I  mean the search I guess the word font is in the   descriptions of all of this but we're specifically  going to look for one called font there we go   put that at the end and then I'm going to  hit enter to organize it a little bit and   with this font one you can change already this is  a title font so you can see that it made it bigger   on the right hand side if you put your cursor on  the text you can see the font here it refers to   title I can go ahead and choose that and choose  large title for example makes it a little bigger   and let's say I wanted it to be bold let's change  the weight this semi-bolt you see when I did that   it added a font weight modifier and set it to  semi-bold so I could have done this another way   I could have actually you know I could delete that  and then we could have gone via our trusty Library   method you know and I could add the font  weight modifier like that and change this   to semi-bold so we would get the same  result okay now let's put the finishing   touches on this app so what I want to  do is add a black background and then   um we're done essentially okay so how do we  add a background here so this is kind of not   intuitive but you're going to get used to it  is if you want to add a colored background   you add a color element to the screen so  let's open up our library it's under views   and we're going to search for color and that's  the one right there so we are going to drag and   drop it once again I'm going to put it above the  v stack like that and you can see you can specify   different percentages of green and blue so if I  wanted a black background this would be like they   would be all zeros and that would be black however  there's also a different way to specify black   I can get rid of all of that like this is good  if you want a really custom color but there are   some presets that you can use as well so I'm going  to put color I'm going to leave the two brackets   like that and in between those two brackets I'm  going to put dot it's going to open this up if it   doesn't open for you that's fine just type out  dot black but I'm going to choose it from here   that's preset now notice how this color first  of all it covers everything second of all it   doesn't reach the edges okay and the reason  why it doesn't reach the edges is because this   is what's known as the safe area this is where  things like the battery percentage and like the   time displays and down here you have that little  handle that you can grab and you can you know   um change between apps or minimize an app so if  you want your elements or your colors or whatever   it may be to go into those zones the safe area  you have to add a modifier to tell it to do so so   let's go ahead and add that modifier hit open the  library and then switch the modifiers and let's   type in ignore and there's this one ignores a  safe area so you're basically saying that you   don't care about the safe area and you want this  element to go into that danger zone or that safe   area now you can see our color covers everything  the problem is we don't see anything else so why   don't we try making some space in our v-stock  right here and highlighting our color with the   modifier command X to cut it put it in here  command V to paste it what do you know our   v-stack puts it arranges it on top of each other  but it's probably not what we're expecting right   and you can see that it did it in a way it's  pretty smart where it gave each element enough   space so this is as much space that like the text  needs and then the image and then the black color   takes up the rest whatever else is available  that's not really what we're after we want   the image and the text to sit on top of the color  element right so there's another layout container   we can use let's check it out let's go to views  it's called a depth stack or in other words   a z stack or Zed stack if you're Canadian like  me so this one is going to be special things can   actually sit on top of each other on the z-axis  in sort of like a depth you can have uh yeah depth   would be the best way to describe it right so  let's try this out let's erase content and let's   first of all move the color in there command X  command V and next we are going to add our entire   v stack in there okay so let me just remove some  of the space make sure this is very um you got   to be very careful because we're moving things  around if you misalign one of the brackets here   uh it it won't be able to read your code properly  and it won't know what sort of layout to make so   tap on this bracket and make sure that when  you do this that it's highlighting the bracket   that you expect it to so you want to grab the  v-stack along with its opening bracket along   with all the contents along with the closing  bracket so I'm just highlight all of that   command X and in here inside the Z stack before  the closing bracket I'm going to put that in there   so what it's going to do is it's going to put the  color at the bottom and then it's good to put the   v-stack along with all of its contents on top of  that uh and and so we have this unfortunately our   text is not visible so let's go ahead and add um a  modifier so I could just do this and choose white   or we could add a modifier and the one that  we're looking for is foreground color that's   what we would add to change the color of the text  however let's modify it here and see what happens   see when I chose white it added the foreground  color modifier for us and set it to color white   pretty simple stuff right now comes the fun part  let's launch our app now later in this video   series I'll definitely show you how to launch  this app or any app on your phone or your device   for right now we are going to run this in the  iOS simulator so up here you're going to notice   it says iPhone whatever well it depends what  version of xcode you have but I want you to tap   on that and you can choose a bunch of different  simulators choose choose the latest iPhone that   you want I'm just going to choose iPhone 14 and I  want to hit this run button now give it a couple   of minutes and then you're going to see a virtual  iPhone on your screen I have to warn you though if   this is the first time you're running the iOS  simulator it's going to take a few minutes to   boot up but subsequent times it's going to be a  lot faster now here it is this is the simulator   now the cool thing about the simulator is that  you there are some quick buttons here where you   can rotate it to a different orientation so  you can see what it looks like you can take   a screenshot you can even take a video from  the menus up here you can hit this to go back   to the home screen this is a virtual iPhone for  you to test your app now what is the difference   between this simulator and the preview that we  had inside xcode well this similar is great for   testing your app because it has features to look  you can simulate a shake you can you can test out   face ID you can simulate locations like a custom  location you can simulate a driving car or bicycle   ride so there are lots of things or tools for  you to test your app whereas the preview is good   as exactly that a preview while you are building  your user interface if you want to download this   project just check in the video description  below now I hope this lesson has showed you   that building apps is not some mystical Dark Art  granted this app was simple but every lesson that   you complete after this one you're going to gain  a new skill now just in case you get stuck we also   have a free community where you can go and get  help just visit code crew dot codewithchris.com   so between this lesson series and the community  I think you're gonna make pretty good progress   while having fun and learning a lot I mean these  people did did you think I made those app icons up   in the next lesson we are going to dive a little  deeper into xcode and I'll explain what the rest   of the files in your app project do click over  here to visit lesson two and I'll see you there

Channel: CodeWithChris

Views: 151,525

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

Id: HJDCXdhQaP0

Length: 27min 20sec (1640 seconds)

Published: Wed Nov 16 2022