Xcode Tutorial for Beginners - (using the new Xcode 11)

tako crew in this video you're going to get a practical and working knowledge of how to use Xcode specifically you're going to learn how to navigate and move around all of X codes various sections and menus I'm going to also touch upon how to write code in Xcode how to build your user interface using storyboards or swift UI how to debug and test your app and I'm going to touch upon how to distribute and submit your app to the App Store as well and what that process looks like and then I'm going to give you links into each of those topics to learn and dive deeper by the end of this Xcode tutorial my goal for you is to have a working knowledge of how to start using Xcode to start building apps if that sounds good to you then stay tuned hey there my name is Chris and if this is your first time here welcome to code with Chris where we teach beginners how to build apps even if they've never written a single line of code before we dive in I've got a question for you why are you trying to build an app let me know by leaving a quick comment below and on your way down there and make sure you hit the like button and subscribe if you haven't already I really appreciate that alright let's get started alright so you've downloaded Xcode it's finally installed you launch it you're ready to go you start a new project and then you realize you don't know what you're looking at because it's so confusing it is a lot to take in however this Xcode tutorial is going to cut through the confusion and it's going to show you how to navigate around Xcode how to write your code and how to build your user interfaces now it is targeted towards beginners to Xcode so if you know your way around you might find some tips and tricks throughout this video but by and large this tutorial is meant for someone who is new tax code all right so let's close out this project and let's start a brand new one because we're gonna start from step one alright so the shortcut to launch a new project is command shift and end so you can go ahead and just hit that on your keyboard or you can go to file new a new project or you might have a welcome screen in which case you can choose start a new Xcode project now don't start a new playground and a playground has its own purpose which is to play around with some code do some experiments experiment with some user interface work but if you're gonna build a full-fledged application then you want to start a new project and we're not just talking about iOS projects here if you look across the top you can build on multiple platforms right now on this channel we're talking about iOS apps and so we're going to be looking under the iOS tab now these are all different templates that you can start some of them will get you started in the right direction for building apps you probably want to start with a single view app or a tabbed app now if you start with a single view app it doesn't mean that you can add tabs to your app it just means that you're gonna have to add it yourself if you know you want to build a tab bar based app you could start with this I still recommend however for complete beginners to start with a single view out because that's the cleanest way if you start with a tabbed app you're gonna have a lot of extras which might actually add to the confusion so we're gonna start with a single view app let's click on next right here and we get to the project properties screen here you're going to configure some basic details about your project first off being what is the name of your app so you can put that there if you're brand new chances are you won't have a team and that's completely fine you can leave it as none if you do have one you can go ahead and add it there and a development team is just something that you're going to have to create once you want to deploy your app onto an actual device or send it to the app store or something like that next thing you want to configure is your organization name now organization is just a fancy name for your business name or maybe your personal name and on the next line the organization identifier is basically a way to identify your entity whether that's business or personal usually it follows the sort of format where you have com dot and then your business name or your personal name and that combined with your product name is going to form your bundle identifier which is going to be a unique ID to identify your app the next two are very important language you can choose from Swift or object see if you don't know what to choose choose swift that's kind of the standard right now it used to be our objective C and then Apple introduced Swift as a brand-new programming language and so that was you know years ago and everyone's migrated to using Swift same thing happened with the user interface it used to be only storyboards and then most recently Apple introduced Swift UI which is a new way of building user interfaces without getting into the technical details about what makes them different I'm just going to say that Swift UI is just released so it's very much in its infancy and learning so if UI is a great investment towards your future but if you want to let's say find a job in the near future like your focus is to become a freelancer or maybe to find a job fairly quickly then you're going to want to choose storyboards and learn how to use that instead because a lot of companies haven't invested the time and resources into using Swift UI just yet so I would say if you're just starting out you at this point in time you still want to learn how to use storyboards now this really should say UI kit which is the user interface framework because storyboards is a visual way for you to build your user interface by dragging and dropping things through this interface builder which I'm going to show you but you can also build it through code right and so storyboards is kind of a weird name for it but however just know that Swift UI is the new thing that Apple has introduced and storyboards with you choosing this option has been the existing and current way to do things over the next three four years everyone will probably be migrating to using Swift UI all right so that's what we're gonna choose there storyboards now the next couple of options if you're just starting out probably isn't something that you're going to want to enable this last two for unit testing and UI tests are ways for you to run some automated testing on your application which is very useful when your app gets really large lots of code you know lots of pieces of UI and you want to you want to be able to automatically run tests and scripts to test them without having to manually test things every time you make a change core data it's not technically a database but it's a way for you just think of it as a way for you to store local data on your device now it's something that isn't for beginners I'm just gonna say that but it is something that is useful to have once you get past the the basics of building apps and you want to look into how you can persist data locally on your device through app sessions alright so think of it as a local database although when you read all of the documentation from Apple that it's not technically a database it's a way of organizing information all right so we are going to fill out a product name I'm just gonna call this sample look we've taught so much and we haven't even gone into Xcode just yet but it's important that you know what all that stuff means now we're gonna save it save it somewhere where you're gonna remember where it is and source control here this is probably something that you don't need as well right now basically if you don't know what source control is it's a way for you to manage your source code and manage changes to the source code especially helpful for teams working together but also helpful for personal projects because if you let's say make a change and you delete some code or maybe you broke your code source control will allow you to roll back to a previous change in something like that however we're not going to enable it right now that in itself will take another tutorial in this one we're going to focus on going through Xcode so let's click create now source control is is kind of independent from Xcode it's its own system but it can be integrated into Xcode I know that's really confusing for a beginner just just ignore the source control part and you can find some other videos on so what source control is and how you can integrate it to use with Xcode alright so you've got your brand new project here there's a lot of button and text everywhere it looks really confusing so let me break it down there's only really five major areas of the Xcode user interface hard to believe because it looks like there's panels everywhere so starting on the left hand side you have the Navigator area and this navigator area actually has a bunch of different tabs you see all of these icons right here those are all different types of Navigator by default it's gonna be on this first one this is the file navigator and it shows you all of the files in your Xcode project now there are different ones here you can navigate issues or you know search results or things like that but we will get into that a little later next up on the right of the file navigator we have the editor area and it's this whole dark part right here this editor area is for editing the file or the thing that you select from the Navigator area so whether you're selecting a file or maybe you're selecting an issue or something like that whatever you select is going to show up in the editor area for you to edit or configure all right and to the right of the editor area is called the inspector area now the inspector area also has a couple of different tabs and these tabs kind of change depending on what you have selected in the editor area because what this inspector area is for is for you to configure or get additional information on inspect whatever you select in the editor area so you can think of it as a drill down so the top level is this file navigator you know you're selecting the main thing you want to look at then it moves to the editor area where you're editing what you selected a navigator and then whatever you select in the editor area it's going to show you some options or additional info in this rightmost inspector area so that's kind of how it moves across in those three different big areas now across the top you'll have the toolbar the toolbar has some pretty critical buttons and information which we will get into but that allows you to control your project so you can do things like build and run your project you can choose where to run it you can see the status of what's happening behind the scenes what Xcode is working on or crunching and then on the right hand side there are some navigational buttons which we will go into now where's this fit area because we've only gone through four well the fifth area is actually hidden by default and clicking this button is going to hide that hide or show that fifth area so you can see like that this area is called the console or debug area or might be called the debug console a lot of people use different names I call it personally the debug area now the bug if you're unfamiliar with that term you're brand new to programming debugging is the process of just working out all of the kinks and all of the weird behavior in your app because those are known as bugs so debugging is just to remove all of those errors and kinks in your app so this debug area helps you to do that by letting you inspect your code showing you diagnostics and information as your app is running so that you can get a handle on what's happening as your app is running so the process of debugging your app is another sort of skill that you need to learn but first you know we're not going to focus on that we're gonna focus on writing code and building user interfaces because those are kind of the two basic things that you need to know you need to walk before you can run right so now that we've gone through the five major areas I'm gonna do a little bit of a deep dive into each of the areas to show you how you actually use them actually one thing before we dive into the separate areas if you want this sort of dark theme and you don't have it well it's gonna require you to go into the Xcode preferences and other under fonts and colors you can choose a dark you know a dark theme but if you want the chrome of your Xcode to also be dark then you're gonna have to go into your preferences your system preferences and I don't don't remember exactly where it is but there is a parent's light darken Auto so you can do start so this combined with inside your Xcode preferences choosing a dark theme will give you this ultra dark mode so you can look really cool no but actually it's actually better on your eyes in low-light conditions so that's why a lot of people use this presumably because they code at night alright so now let's dive into the file navigator area I'm going to go through some of the default files that comes with your brand new project and explain what some of them do so that you can get an understanding now that app delegate and the scene delegate are two files which kind of act like starting points for your app this is when your app is launching and things are happening under the hood there are methods in here gives you an opportunity to run some code but this is by and large when your app is starting up or spinning down maybe the user switching apps or something like that so you get an opportunity to do stuff in the beginning and at the end of your app's life cycle that's what it's called the view controller is that place that controls the logic for the first screen of your app because by default when you start a new project you're going to get a single screen and a single view controller and the view controller is where you're going to write the logic and the code for that first screen now this main dot storyboard file you'll only have if you chose storyboards as your user interface option in those in the new project properties so if you are following along and chose storyboards like I did you're going to get this main dot storyboard file and as you can see the editor area actually changes depending on what I chose so if you're choosing these dots Swift files these are code files you're going to see code so because you can edit that and similarly in the inspector area because you are clicking and inspecting code you're going to see options like where that file exists and also some documentation depending on certain keywords it tells you what that keyword means if you choose the storyboard file this is interface builder like I was telling you before and this interface builder is for you to edit and configure your user interface in a visual manner so for example let me just give you a quick example clicking that plus icon opens up what's called an object library where you can see all of these different controls and elements and you can literally just drag and drop it into your view and then you can specify different rules and conditions called constraints the size and position all of those different elements and that's how you build your user interface using storyboards and because this editor area right now is visual when you select this visual element your inspector area also shows you things that you can do with that visual element so here you can configure all of these different options and properties specific to that switch that I just selected that's different from back here right when I selected a code keyword you don't get any of those options instead you get documentation on what that keyword is so it's all contextual right the editor area is contextual to what you selected here in the navigator and the inspector is contextual towards what you select inside the editor okay let's move on you'll notice that you have another storyboard file this one's called launch screen not to be confused with the main dot storyboard this launch screen storyboard specifies the launch screen for your app so when your app boots up there's a very brief time where this is shown and this is where you can configure how that looks like this is your asset catalog or asset library this is where you would add your app icon you would add any image graphics you'd have you literally just drag it into this catalog and then inside here where you're configuring your user interface and even in code files you'll be able to access and reference the images that you've added to your project here you also have something called an info.plist which give you actually a lot of these things you configured when you started the project this plist is short for property lists and it's kind of just different configuration values for your project now I'm going to quickly switch over to a new project and just briefly show you what your file list would look like had you selected Swift UI for the user interface instead of storyboards alright so you can see here this is a project but I chose swift UI for the user interface so we still have app delegate and scene delegate that doesn't change those are providing opportunities for you to interact with the different lifecycle events of your app such as when it starts and stops the content view is something that is new this kind of replaces that storyboard that you saw right and you still have your launch screen storyboard the content view actually describes that first screen of your app as you can see here when you click on this it still gives you a code file because Swift UI is all about declaring your user interface via writing code the editor area is actually split into two different panes here this is where you would specify the code for your user interface and over here is a preview canvas so if I just click resume right there it's actually going to show you a preview of what your user interface will look like based on the code that you have written here now in the storyboard project I showed you how you can open up the object library and you can drag and drop different elements into your storyboard you can also do that here so you can click this and you can open up for example this one right so I can add a button but I wouldn't drag it to my view here I would drag it into the code area because everything's using code right so I could for example if I wanted to put a button below my label right there I would there's an error here because that's kind of an illegal layout so I'm gonna add what's called a vertical stack and a vertical stack element basically puts two different elements or two or more elements on top of each other so by adding my text and my button inside this V stack now I get this sort of layout you can also customize your layout by interacting directly with the preview canvas right here for example the inspector right here shows me some things that I can configure but you can also hold down command on your keyboard and you can click these elements and you can do different things with them here so this is what Swift UI is all about not gonna dive into how to build apps with Swift UI right now but I just wanted to give you a taste of what building your user interface would be like using either storyboards or Swift UI let's continue with the Xcode walkthrough using our other project alright so we discussed the file navigator we went through cut some of the different files let's go through some of the different navigators here another one you might be using if your project gets long is the search navigator so this one would show you search results because what you can do is you can hold the command F to do a search and let's say you were searching for the term UIKit and what I'm typing here changes up here right you hit enter it's gonna show you all the locations in your project that contains that word so that is the search navigator right there or if you're running your project and let's say there are errors in your project so I'm gonna intentionally make an error right here there is an issues navigator right here which will show you all of the errors and when you click on the error it will jump you to where the problem is so those probably are the main navigators that you're going to use there are a couple of other ones like source control if you're using that this one is for your breakpoints when you're debugging your app which I alluded to earlier on this video but I think by and large the big ones you'll be using are the file navigator search navigator and the issues navigator next up let's talk about the editor area now there are some special abilities or special features of the editor area which make it easier to write code and build your us with so I'm gonna highlight some of those that might not immediately be obvious so if you're using version 11 of Xcode you're gonna notice this little button here which will basically add additional editor panes to your to your editor area this effectively splits it into multiple editors and this is useful if you've got a really large monitor and maybe you want to compare two files or something like that so there we go you can also add one not beside but you could add one below as well if you hold down option you can see that icon change right to point the pluses is below right now instead of on the right so when I click this it adds an editor below the current one and you can just close off these ones if you don't need them now what happens when you select a file well it just shows you shows you that file in your editor area but what if you wanted to choose which editor pane you want it to open your new file with well that's easy you can hold them option and shift on your keyboard while selecting a new file so let me select the storyboard and then you're gonna have this indicator that lets you choose which editor pane to launch your file in so I'm gonna choose that one alright so now let me close out this additional editor pane because I want to show you this next button here called editor options now this menu shows you some additional things that you can do with your editor area so for example let's go through from the bottom up Invisibles shows you all of the spaces and carriage returns things that you can't see you've also got code coverage now this is mostly for testing it shows you how well your code is covered by the testing the automated tests that I mentioned earlier when you created your project if you're not doing unit tests this might not apply authors gives you a history of whose modified the file and this pertains to having your project under source control because remember I told you source control was really useful for team members working together so if you did have that sort of set up you would able you would be able to see all of your team members and what they changed and when they changed it and that sort of information under this panel so I'm just gonna disable those because they don't really apply to us there's mini-map one let me just close that one to the mini-map one is useful it shows you a high-level outline of your code and also lets you jump to various parts of your code and while we're on the topic of talking about navigating around in your code another very useful way to do that is this bar up here this is the sort of breadcrumb that tells you exactly where your file is located within your project so you can see this is the project this is the folder or group that your file is in this is the file you're looking at and this is the the section or maybe I'll use the appropriate terms this is the class or method that you're looking at so when you pop that open you're going to see different sections of your code or different methods that you can just immediately jump to so when you're working around in your project writing code this is very very useful and then you can switch files very easily just by clicking any section of the breadcrumb and choosing a different file now also these arrows right here I use often as well clicking back will actually show you the thing or the file that you were previously looking at as you can see actually the previous thing that I jump to within the same file even so these are also very useful now going back to the editor options up here there are a couple of other views that you can add to your editor for example the canvas now I don't have this actually let's bring up our swift UI project because this makes sense in this context you can see here the canvas is this preview canvas if I turn that off then I'm only looking at the code so you turning the canvas on shows me that now in a storyboards project that doesn't really make sense so as you can see when I turn this on or off nothing really happens now the assistant looks like a different pain but what the assistant editor or assistant pain does is it shows you the complementary file to the file that you're looking at so most often it's used in the context of the storyboard so what I'm looking at this storyboard right here and this represents my main view well there's a view controller that represents or or powers that view and if I go and select the assistant here I will see the code file corresponding to my view right here so then I can work in tandem and connect these elements to my view controller so that I can manipulate them through code so that's what the assistant editor is and let me just close out that pane and here under layout it's just letting you shift the position of that editor pane if you've got multiple editors oh and before I forget oftentimes people asks me why I have line numbers and how they can get it as well they're very useful especially when I'm trying to teach something so those are just in Xcode preferences under text editing you can turn on line numbers like that alright next up let's talk about the inspector so we have kind of talked about it already but let me just explain a couple more things in detail so I think the inspector is very useful for determining where a file is for example on your file system you can come here into this and you can see the full path for your file you can also see the target membership now the target is your app and when you uncheck this that's going to mean that the file is not going to be included in your app the reason why this is here is because an Xcode project can actually have multiple targets so you can build multiple different outputs within the same Xcode project and this target membership area describes which targets this file should be included in so oftentimes when some beginners they've added the resources maybe the sound files or images into their project but they can't get them to show up or or they can't hear the sound oftentimes it's because under target membership here this is unchecked and that file that resource isn't actually being included inside that target alright another useful thing that I use a lot is in here this quick help if you are putting your cursor in a class or maybe it's a method this gives you some quick information about what it does sometimes you're using some sort of method or class here that you're not very familiar with the quick help right here can give you some pointers as to how to use it you can open up the full documentation for that and this can be helpful to do that as well because there is a link down here that allows you when you click it to open up this browsable and searchable documentation and it will just zoom you to exactly what you need and what your cursor was on and you can read up the details on that in addition to it showing up on here this inspector pane you can also hold down option and you can highlight under a certain keyword you can click it and it will also open up a summary like that and give you a documentation link that again leads to this documentation window and if you just want to open up this guy right here to take a look and browse around you can go to window and that's where that is right there oh and there's also a welcome to Xcode that's where that screen is all right now I mentioned the inspector panel will change depending on what you've got in the editor area so if we were looking at a storyboard file and I click on the the visual element you'll notice that there are additional tabs in the inspector so this one here this attributes inspector will let me configure that that element and there's also something called a size inspector where has everything related to do with sizing and constraints for that element which is how it gets positioned and sized as well so that's what the size inspector is and in our swift UI project when I selected something in here you can see the inspector pane I can also configure some properties for that element that I have selected next up let's talk about the toolbar across the top so I'm going to minimize this swift UI project now you've seen me run the project I believe by clicking this button here this is build and run your project this is to stop it and this is the target you want to run by default you're probably only gonna have one target unless you start adding multiple things to your project this is where to run your target on Xcode has a bunch of different simulators which are great for testing your app it's like having a virtual device on your screen where you can see your app running if you would have an actual device you can also plug it in to your laptop or a Mac or whatever and after going through a couple of dialogues to trust the device and to agree to use it for development you're going to see it show up up here and then you're going to be able to select that device and then run your app on a physical device which is really really cool to show off to your friends and family the simulator is plenty powerful though so if you don't have a device don't let that discourage you from starting iOS app development so that's what that is there I should also tell you that if you hold down click and you hold there are additional options for test profile and analyze these are different ways of either testing your app or monitoring its performance and diagnosing performance issues within stuff like that the status bar will show you the current state of the project or what is currently happening behind the scenes so when I hit this Run button you're gonna see you know a progress bar and and what Xcode is doing it's launching you know this thing in the simulator so this is actually what the simulator looks like and we'll dive into the simulator a little a little later because I want to go through the rest of the areas first so it's and for the first time the simulator is launched it does take a little while for it to boot up but subsequent times for running and launching your app is gonna be really quick it's kind of like starting up your phone when you power it down and you start up it does take a little while we have some buttons right here so this guy this object library you saw before you saw me open this up it has different if you're looking at a UI type of file you'll see elements that you can add if you're looking at a code file like this and you click this there are different snippets and sort of different syntax with syntax type of stuff that you can add into your code file by dragging and dropping now this button up here to compare different versions is useful for when you're working with source control and you want to look at maybe the current version of the file versus two versions back and you can see you want to compare how the code has changed that's what this button will help you do and then these buttons back here are just the hide and show various parts this is to hide and show the Navigator this is the for the debug area and this is for the inspector pane so that's pending on you know how much space you have on your desktop or your screen I mean all right now let's talk about the debug area since I ran the simulator you already see some output here now this might not make too much sense to you but however you can control what gets put out here so for example in your code right here you want to log some sort of output onto the console area this is you know the console area you can write print and then you can you can type something maybe you want to log some diagnostic information you can do that and it gets output here now do notice that this debug area is also split into two separate panes you've got you know that one right there and that one right there so let's go into a code file and if I run it you'll actually be able to see some more stuff so let me just run the project and you can see that output right there but had I done something like this this is called setting a breakpoint a breakpoint will actually pause the execution of the app at that line of code which will help you stop you're basically telling the execution of that stop I want to see what's going on right down in there and so you see this Green Line it stopped right there and you can peek into you know what's in memory you can take a look at different variables and different things by typing in commands here I've got a whole tutorial on how to debug your app and different techniques that you can use I will link to it down below in the description also I'll pop it up as a card right here on the upper right hand corner of the screen um then you can have more details into how to debug your app but I am NOT going to dive into that right now because that's a whole other topic in itself if you accidentally add these sort of blue markings these breakpoints you can just drag to get rid of them or you can click it to disable it either or all right and in the debug area if you've actually stopped and paused the execution there you can use these little buttons to control the flow the execution so you can kind of move the execution line by line so you can slowly see what's happening as your app is getting executed and one cool thing which everyone seems to love is this way to debug the view hierarchy or the view doing this kind of like blows everything out and you can see all of the different bits and of how your view is being rendered so that always gives a cool wow factor to people that's a way to see how your view is built so that's pretty much the five main areas I know we touched on them very lightly there are a couple of additional windows that I want to show you now one was the documentation window which is really helpful we already went through that another one is actually the let's go through organizer and basically this organizer shows you a bunch of your different archives know what are archives it's basically when you are ready to package up your app to be shipped off to someone's phone or maybe to the App Store this is where it would appear you would archive it and then you would get it will show up here in your archives and then what you would do is you can click on distribute app and it would send it to the the app review team to review but before you can actually click this button you in case you didn't know the way that Apple does this is that you have to pay them a membership fee I think it's $99 a year at the time of this recording it is I don't know how much he'll be in the future but that allows you to distribute apps into their app store so they it will also give you access to this place called app store Connect I might be wrong on that name because they keep changing the name but he used to be iTunes Connect and now it might be App Store Connect and it's basically a portal where you can go to create a directory listing for your app so you can add all the screenshots the description you can set the pricing for your app which countries it should be available and all of that those details and after you set that up then you can come in here in Xcode you can archive your project bundle it up it's going to show up here and then you click distribute app and it's gonna send it to Apple along with that description that catalog listing that you wrote and then the team at Apple is going to review it to make sure that your app follows all of the policies and guidelines that it has for its App Store and it's going to give you a pass or fail and if it fails no worries they'll give you what to fix up you fix it up you resubmit it they'll review it and then it's gonna pass and your app is gonna show up in the App Store so that's how that process works I hope this Xcode tutorial really helped you if you want to continue learning how to use Xcode to build apps make sure you're subscribed to this channel by hitting that subscribe button below and make sure you turn on that notification icon to get all the new videos as well if you're ready to take the next step and to start learning how to build iOS apps I've got some great beginner resources for you on this channel some great videos that helped millions of people and I know it's going to help you as well so I'm going to link to those resources right there on the screen you're gonna see them they're perfect for beginners perfect for people at your stage and I know it's gonna help you build your iOS skills so you can start building apps on your own we also have a great free community check the description below for that where myself and my team also help tons of people for free there alright so finally make sure you like this video make sure you leave a comment below and tell me why you're learning to build apps I really want to know unless of course you're just learning Xcode for fun I've never heard anyone do that but hey whatever floats your boat alright thanks for watching I'll see you in the next video

Channel: CodeWithChris

Views: 377,949

Keywords: xcode tutorial, xcode tutorial 2019, xcode tutorial for beginners, xcode tutorial swift, xcode, xcode tutorial for absolute beginners, xcode 11 tutorial, xcode 11, xcode tutorial apple, xcode tutorial app, xcode basic tutorial, xcode tutorial for mac, xcode and swift, xcode building app, xcode download, xcode debugging, xcode for beginners, xcode for windows, xcode on windows

Id: _YvAUgV6GYM

Length: 41min 10sec (2470 seconds)

Published: Tue Oct 22 2019