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