0 1 00:00:00,600 --> 00:00:07,230 Now that we've seen how to create and set up a brand new iOS project and we've landed inside Xcode, 1 2 00:00:07,590 --> 00:00:13,740 it's time to get an overview of this piece of software that we'll be using to do all of the work of building 2 3 00:00:13,740 --> 00:00:20,730 our iOS apps, including designing the app user interface, as well as programming the code for the 3 4 00:00:20,730 --> 00:00:22,110 functionality of the app. 4 5 00:00:22,890 --> 00:00:29,460 So the first thing you want to do if you haven't already is to expand your Xcode to take up as much 5 6 00:00:29,460 --> 00:00:31,950 space as you have on your computer. 6 7 00:00:32,490 --> 00:00:38,130 Now, I don't recommend going full screen because then it's harder to get access to the menu items and 7 8 00:00:38,130 --> 00:00:38,940 it makes it difficult 8 9 00:00:38,940 --> 00:00:41,910 drag and dropping files into our Xcode project as well. 9 10 00:00:42,420 --> 00:00:49,290 So without having to go to full screen, make sure the Xcode window is as large as possible, and then 10 11 00:00:49,380 --> 00:00:52,990 we're going to go on a guided tour of the Xcode software. 11 12 00:00:53,460 --> 00:00:58,470 So the first place we're going to look at is the page that we land on when we first create an app, 12 13 00:00:58,800 --> 00:01:01,190 which is the general tab here. 13 14 00:01:01,710 --> 00:01:07,750 So you can always come back to the screen if you select your project, go to the target, 14 15 00:01:07,770 --> 00:01:10,890 so this is your app, and then go to the general section. 15 16 00:01:11,400 --> 00:01:18,920 And here we have bits of data that we've already entered, such as the display name and the bundle identifier 16 17 00:01:19,320 --> 00:01:24,570 and you can change things such as the version. Now scrolling a little bit further down, 17 18 00:01:24,570 --> 00:01:28,830 we've got information for how our app is going to be deployed. 18 19 00:01:29,010 --> 00:01:32,490 So when it's run, where is it going to be running on? 19 20 00:01:33,690 --> 00:01:40,050 So, for example, we can change the iOS version that we target and keeping in mind that this is going 20 21 00:01:40,050 --> 00:01:44,020 to be the minimum version that we want to target. 21 22 00:01:44,040 --> 00:01:51,870 So if we select iOS 13, then it means that anybody who has an iOS version that's above 13 will be able 22 23 00:01:51,870 --> 00:01:53,610 to use our app and download it. 23 24 00:01:53,880 --> 00:01:57,400 But if it's lower than that, then they won't be able to access it. 24 25 00:01:57,870 --> 00:02:04,190 So depending on how far back you want to support, you would select a minimum target here. 25 26 00:02:04,920 --> 00:02:11,420 And then we get to select whether our app should be able to run on iPad and iPhone or just the iPhone. 26 27 00:02:11,940 --> 00:02:17,670 Now, later on, we'll take a look at Project Catalyst, which will allow us to run our app on Mac as 27 28 00:02:17,670 --> 00:02:17,990 well. 28 29 00:02:18,450 --> 00:02:21,480 But for now, let's just keep everything as the default. 29 30 00:02:22,090 --> 00:02:28,320 And then let's take a look at where we get to select the device orientation. If you want your app to 30 31 00:02:28,320 --> 00:02:31,450 be able to display in all four dimensions, 31 32 00:02:31,740 --> 00:02:37,620 so when you turn the phone it should turn with you to show the app upside-down, landscape, 32 33 00:02:37,620 --> 00:02:38,490 left, right, 33 34 00:02:39,120 --> 00:02:41,250 then you have all these check boxes checked. 34 35 00:02:41,610 --> 00:02:48,420 But if you want to limit it to only portrait or one particular landscape orientation, which you'll 35 36 00:02:48,420 --> 00:02:52,580 see in a lot of games, then you can select the ones that you need. 36 37 00:02:52,830 --> 00:02:55,170 But again, I'm going to leave it as the default. 37 38 00:02:55,920 --> 00:03:01,200 Now, finally, you get to choose your status bar style, so whether if you want a white status bar or 38 39 00:03:01,200 --> 00:03:07,200 a dark status bar and whether if you just simply want to hide the status bar. You can set those things 39 40 00:03:07,200 --> 00:03:07,750 right there. 40 41 00:03:09,000 --> 00:03:16,620 That's pretty much all for the settings page and some of these other tabs we'll explore as we build more 41 42 00:03:16,620 --> 00:03:22,850 and more complex apps that might actually need us to go into some of these settings and tweak them around. 42 43 00:03:22,920 --> 00:03:28,980 But in most cases, you'll be keeping these settings as the defaults and we'll be doing most of our important 43 44 00:03:28,980 --> 00:03:31,790 work inside the swift files. 44 45 00:03:31,800 --> 00:03:37,060 So these are your code files and the storyboard files, which are your design files. 45 46 00:03:37,500 --> 00:03:41,610 So notice how they have different icons, depending on which type of file they are. 46 47 00:03:42,000 --> 00:03:47,880 So if you see the little swift bird, that's a Swift programming file, and the design files have a yellow 47 48 00:03:47,880 --> 00:03:49,290 icon like this. 48 49 00:03:50,040 --> 00:03:57,140 So this is a good time to point out that usually the default layout of Xcode is split into four areas. 49 50 00:03:57,630 --> 00:04:04,440 First, we've got the top status bar here, which kind of reminds me at least a little bit of things 50 51 00:04:04,440 --> 00:04:11,010 like iTunes and other music players, because you have the play and stop button, you have the status 51 52 00:04:11,010 --> 00:04:15,840 of your app and you have the selection for where you want to run your app. 52 53 00:04:16,890 --> 00:04:23,610 Now, if you hit the play button, it's going to run your app onto whatever device you selected here. 53 54 00:04:23,760 --> 00:04:27,360 And if you press stop, then obviously it just stops running the app. 54 55 00:04:28,110 --> 00:04:32,370 Now, over here on the left hand side, we've got the navigator pane. 55 56 00:04:32,850 --> 00:04:39,450 And inside each of these panes, there's further subdirectories because there are lots of little tab 56 57 00:04:39,450 --> 00:04:40,020 bars. 57 58 00:04:40,830 --> 00:04:45,780 Now, for most of these, I'm going to mention as they come up as we have a need for them. 58 59 00:04:46,260 --> 00:04:53,100 But the most important one you'll always pretty much want selected is the project navigator here, the 59 60 00:04:53,100 --> 00:04:54,330 one on the left most. 60 61 00:04:54,900 --> 00:04:58,480 And this simply displays your project. 61 62 00:04:58,500 --> 00:04:59,910 So if I open my project 62 63 00:04:59,980 --> 00:05:07,930 inside the finder and I expand my project, my I am Rich, then you'll see that each of these files correspond 63 64 00:05:07,930 --> 00:05:15,580 to what we see in Xcode, in our Project Navigator. Now, because it usually takes multiple files to 64 65 00:05:15,580 --> 00:05:17,970 actually create a single app, 65 66 00:05:18,520 --> 00:05:23,960 it's really handy when we can see all of them at a glance right here where we need them. 66 67 00:05:24,400 --> 00:05:29,980 So when we need to go into our code, we can simply click onto the ViewController.swift, 67 68 00:05:30,340 --> 00:05:34,630 if we need to go into our design, then we click on our main.storyboard. 68 69 00:05:35,410 --> 00:05:40,120 Now the main.storyboard is where you'll be designing most of your app. 69 70 00:05:40,600 --> 00:05:49,870 And here you get to access various components, things such as labels, buttons, all of the default 70 71 00:05:49,870 --> 00:05:55,410 iOS components and you can simply drag and drop them onto the screen like so. 71 72 00:05:56,050 --> 00:06:01,330 And once you have something on screen, then the right-hand pane becomes really handy. 72 73 00:06:01,990 --> 00:06:05,190 The right hand pane are a bunch of inspectors. 73 74 00:06:05,350 --> 00:06:10,870 So when you click on something in your design or in your code, you might be able to inspect certain 74 75 00:06:10,870 --> 00:06:11,670 things about them. 75 76 00:06:12,280 --> 00:06:19,300 Now, by default, you will usually see the attribute inspector selected, especially when you're designing 76 77 00:06:19,300 --> 00:06:19,870 your app. 77 78 00:06:20,320 --> 00:06:24,610 And this allows you to change various things about the components that you've selected. 78 79 00:06:24,970 --> 00:06:32,380 For example, we can change the color, we can change the alignments, we can change whether if there's 79 80 00:06:32,560 --> 00:06:39,610 text shadows and it's pretty much similar to any sort of other design program you might have come across 80 81 00:06:39,610 --> 00:06:41,870 like Photoshop or Illustrator. 81 82 00:06:42,670 --> 00:06:45,450 Now there's a couple of other tabs here. 82 83 00:06:46,450 --> 00:06:54,760 One that's really useful is the size inspector, and this one simply tells you the positioning of our 83 84 00:06:54,880 --> 00:06:56,500 component that's selected. 84 85 00:06:56,830 --> 00:07:02,830 So in this case, it's 144 pixels from the left and 228 pixels from the top. 85 86 00:07:03,520 --> 00:07:08,680 Next, we've got the width and height which is pretty self-explanatory, and we've got lots of other 86 87 00:07:08,680 --> 00:07:12,790 inspectors as well, which we're pretty much going to leave as it is 87 88 00:07:13,090 --> 00:07:16,870 but at the point where we need to use them, then I'll explain them in detail. 88 89 00:07:17,680 --> 00:07:23,620 So now that you see we have a label on screen, you can see that this little pane becomes quite handy. 89 90 00:07:23,800 --> 00:07:26,520 And this is what we call the document outline. 90 91 00:07:26,800 --> 00:07:31,170 So it shows an outline of all the components that are in your design file. 91 92 00:07:31,780 --> 00:07:37,120 So if you ever use any sort of design software, you'll probably understand this best if you think of 92 93 00:07:37,120 --> 00:07:39,130 this as where the layers exist. 93 94 00:07:39,400 --> 00:07:46,660 So if I had two labels, one on top of each other, then we'll be able to see them both as separate layers 94 95 00:07:46,840 --> 00:07:48,340 inside our document outline. 95 96 00:07:48,970 --> 00:07:53,290 Now, if you don't know what a layer is or if you never used Photoshop or Illustrator, it doesn't matter. 96 97 00:07:53,650 --> 00:07:55,660 This is just where your components are listed. 97 98 00:07:56,020 --> 00:08:04,510 And as you drag on different things, such as a button and a label or a slider, then you see them show 98 99 00:08:04,510 --> 00:08:04,720 up. 99 100 00:08:05,200 --> 00:08:10,660 And sometimes when your design has a lot of these components which are very close to each other, then 100 101 00:08:10,660 --> 00:08:13,330 it's actually quite hard to select the right one that you need. 101 102 00:08:13,540 --> 00:08:15,610 So it's much easier doing it inside here. 102 103 00:08:16,090 --> 00:08:21,040 But if you don't like this taking up the extra space, then you can just pop it away using this little 103 104 00:08:21,040 --> 00:08:21,430 button 104 105 00:08:21,430 --> 00:08:24,540 here. And all of these panes can be toggled. 105 106 00:08:25,030 --> 00:08:28,300 So the main toggles are for the three major panes; 106 107 00:08:28,450 --> 00:08:32,620 so the right side pane is here, the left side pane and the bottom pane. 107 108 00:08:33,370 --> 00:08:36,550 Now the bottom pane is called the debug area, 108 109 00:08:37,030 --> 00:08:41,910 and this is where you get messages if your app crashes. 109 110 00:08:42,490 --> 00:08:46,350 So this is the area that is pretty much just for the developer. 110 111 00:08:46,630 --> 00:08:52,150 So while you're developing the app and you need to see what's going on with your app, then this is 111 112 00:08:52,150 --> 00:08:56,430 where we'll be looking to and we'll be exploring that a lot within the course. 112 113 00:08:57,790 --> 00:09:02,650 So if you want to get rid of these screens, then you can always use these toggles. 113 114 00:09:03,070 --> 00:09:09,100 But if you prefer using shortcuts, so for example, to pop this bottom screen down, you can hold down 114 115 00:09:09,100 --> 00:09:14,560 the command, the shift, and press the 'Y' key on your keyboard and you can toggle that. 115 116 00:09:15,070 --> 00:09:22,510 And if you look inside the resources for this lesson, there you will find a list of shortcuts which 116 117 00:09:22,510 --> 00:09:26,590 are commonly used with Xcode to speed up your workflow. 117 118 00:09:27,130 --> 00:09:28,750 Now, a word of warning. 118 119 00:09:28,750 --> 00:09:33,430 It does take a little bit of memorization if you want to go down this route and everything that you 119 120 00:09:33,430 --> 00:09:36,760 can do with the keyboard shortcut, you can always do with the mouse. 120 121 00:09:37,060 --> 00:09:41,500 So depending on what sort of person you are, you might want to choose what kind of path where you 121 122 00:09:41,500 --> 00:09:44,600 want to go down; shortcuts or clicking with mouse. 122 123 00:09:45,310 --> 00:09:48,900 So now I'm going to go ahead and delete everything that I have on screen, 123 124 00:09:48,910 --> 00:09:55,540 I don't need it anymore, and I'm going to pop the bottom area away to give myself as much space as I 124 125 00:09:55,540 --> 00:09:55,990 can. 125 126 00:09:56,530 --> 00:09:59,590 And I'm going to go over to the ViewController.swift file 126 127 00:09:59,930 --> 00:10:04,550 to take a look at it. Now, this is where most of your code will live. 127 128 00:10:05,030 --> 00:10:10,010 So when you want to change the behavior of your app, then you're going to be writing some code right 128 129 00:10:10,010 --> 00:10:10,390 here. 129 130 00:10:10,940 --> 00:10:17,390 And notice, when we head over to the code file, then the inspector tabs, they actually change because 130 131 00:10:17,390 --> 00:10:24,260 when you're in a code file, then you can't change, say, the color of your code or the size of your 131 132 00:10:24,260 --> 00:10:24,530 code. 132 133 00:10:24,530 --> 00:10:29,330 So it doesn't make sense to have a size inspector or to have the color menu dropdown. 133 134 00:10:29,840 --> 00:10:34,520 But it does have other things that are related to the code files, such as if you want to change the 134 135 00:10:34,520 --> 00:10:40,580 name of the code file or what type of file it is, then you might be doing it inside the inspector over 135 136 00:10:40,580 --> 00:10:41,290 here as well. 136 137 00:10:41,900 --> 00:10:47,500 So the right-hand pane is for changing certain properties of what's showing in the middle, 137 138 00:10:47,930 --> 00:10:52,460 the left-hand pane is mostly used for navigating between different files. 138 139 00:10:53,150 --> 00:10:56,980 Now, the last thing I want to show you is something to do with settings. 139 140 00:10:57,380 --> 00:11:04,940 So if you head over to Xcode and go to preferences and you'll notice that in the general section you 140 141 00:11:04,940 --> 00:11:12,950 can change the appearance of your Xcode version. So you can change it to the light mode which is what 141 142 00:11:12,950 --> 00:11:18,680 I currently have, or the dark mode which you might prefer because it's easier on the eyes. 142 143 00:11:20,390 --> 00:11:25,730 Now, you can also change the way that your code is being colored by going to the fonts and colors, 143 144 00:11:26,120 --> 00:11:29,180 and there's a whole bunch of different themes that you can choose from. 144 145 00:11:29,780 --> 00:11:35,480 So you can click through each of these and see what you prefer and land on whichever one you like. 145 146 00:11:35,810 --> 00:11:38,830 But I'm going to be choosing the default light version. 146 147 00:11:38,840 --> 00:11:45,680 And if you're a beginner to programming, then I recommend you choose the same theme as I have because 147 148 00:11:45,680 --> 00:11:51,110 it means that all the keywords in your version of Xcode will be highlighted in the same color as mine 148 149 00:11:51,410 --> 00:11:52,610 that you'll see in the videos 149 150 00:11:52,610 --> 00:11:57,260 and it just makes it a little bit easier to keep up with what's going on in the lessons. 150 151 00:11:57,830 --> 00:12:03,170 But if you're already a programmer and you have strong preferences as to what you like to see in your 151 152 00:12:03,170 --> 00:12:05,490 color scheme, then feel free to change that here. 152 153 00:12:06,170 --> 00:12:10,240 Now, more important than colors are actually the font sizes. 153 154 00:12:10,730 --> 00:12:16,070 Now, I know from teaching a lot of students in class, they like to have really small fonts and I don't 154 155 00:12:16,070 --> 00:12:22,480 know if it's because I'm going blind, but I find it really hard to read font sizes that are very small. 155 156 00:12:23,090 --> 00:12:30,320 So if you have a font size that's this big, then it's really going to hurt your eyes after a few hours 156 157 00:12:30,320 --> 00:12:30,860 of coding. 157 158 00:12:31,250 --> 00:12:33,380 So make life easy for yourself. 158 159 00:12:33,770 --> 00:12:36,920 Increase the font size so that you can actually see what's going on. 159 160 00:12:37,280 --> 00:12:42,770 And the shortcut to do that is holding down command and hitting the minus key on the keyboard or the 160 161 00:12:42,770 --> 00:12:48,650 plus key on the keyboard and adjust it to a point where you're happy and you can see quite easily. 161 162 00:12:49,830 --> 00:12:55,170 For me, I'm going to keep that fun a little bit bigger than usual, just so that you can see it easily 162 163 00:12:55,170 --> 00:13:00,700 if you're watching this on a phone or an iPad, but feel free to adjust yours as you see fit. 163 164 00:13:01,500 --> 00:13:04,220 So that's pretty much the grand tour of Xcode. 164 165 00:13:04,620 --> 00:13:08,270 Now, if you enjoyed the tour, then feel free to leave me a review. 165 166 00:13:08,790 --> 00:13:14,820 But in the coming lessons, as we come across different parts of Xcode that we'll need to use, then 166 167 00:13:14,820 --> 00:13:17,370 I'll introduce them to you individually as well. 167 168 00:13:17,820 --> 00:13:20,960 And don't worry if all of this is a little bit overwhelming. 168 169 00:13:20,970 --> 00:13:24,900 You can't remember which part was the navigator pane or the identity 169 170 00:13:24,900 --> 00:13:25,610 inspector. 170 171 00:13:25,920 --> 00:13:30,370 I'll always be showing you exactly where you need to go and what you need to do anyways. 171 172 00:13:30,870 --> 00:13:36,600 Plus, if you head over to the resources for this lesson, you'll also find a map of Xcode. 172 173 00:13:37,050 --> 00:13:43,500 So you'll be able to see the areas highlighted, say, the status area at the top, the inspector's area 173 174 00:13:43,500 --> 00:13:46,530 on the right, and the navigator pane over here. 174 175 00:13:46,860 --> 00:13:53,070 And it might just be worth getting used to some of those words that might be used quite frequently and 175 176 00:13:53,070 --> 00:13:58,970 as well as for you to get used to the different areas of Xcode and their purpose. 176 177 00:13:59,760 --> 00:14:06,960 But now that we've toured Xcode, it's time to actually do some work and build the design and the layout 177 178 00:14:06,960 --> 00:14:07,590 of our app. 178 179 00:14:08,010 --> 00:14:10,280 So that's what we're going to be doing in the lesson. 179 180 00:14:10,500 --> 00:14:11,670 So I'll see you there.