1 00:00:00,300 --> 00:00:02,850 ‫-: Hi, welcome to the Xcode. 2 00:00:02,850 --> 00:00:06,360 ‫Within this lecture, we are going to see the overview 3 00:00:06,360 --> 00:00:08,160 ‫of the XCode. 4 00:00:08,160 --> 00:00:13,160 ‫For example, we are going to see what does this left pain do 5 00:00:13,230 --> 00:00:16,050 ‫or what does this right pane do? 6 00:00:16,050 --> 00:00:18,750 ‫And if you don't see this panes over here, 7 00:00:18,750 --> 00:00:22,470 ‫the left little windows over here, 8 00:00:22,470 --> 00:00:26,370 ‫you can just go to this button and if you click on this 9 00:00:26,370 --> 00:00:28,560 ‫you will see it will hide 10 00:00:28,560 --> 00:00:32,700 ‫or show the left pane and the right pane, okay? 11 00:00:32,700 --> 00:00:36,870 ‫So, if you don't see any of this windows over here, 12 00:00:36,870 --> 00:00:41,793 ‫you can always come and show and hide over this button. 13 00:00:42,630 --> 00:00:46,950 ‫So, these are generally the helper panes. 14 00:00:46,950 --> 00:00:49,740 ‫In the left pane we see the files and folders, 15 00:00:49,740 --> 00:00:52,530 ‫and in the right pane we generally see the options 16 00:00:52,530 --> 00:00:53,363 ‫and attributes. 17 00:00:53,363 --> 00:00:56,850 ‫So, I'm going to show you what are they, don't worry. 18 00:00:56,850 --> 00:01:01,170 ‫And in here, we have the files and folders. 19 00:01:01,170 --> 00:01:03,060 ‫So, let's start with the first one. 20 00:01:03,060 --> 00:01:04,260 ‫If you click on the top 21 00:01:04,260 --> 00:01:08,670 ‫you will see this general settings page, okay? 22 00:01:08,670 --> 00:01:11,370 ‫This is where we do the general settings 23 00:01:11,370 --> 00:01:14,040 ‫of our app, like display name. 24 00:01:14,040 --> 00:01:16,050 ‫So, whatever I write here, 25 00:01:16,050 --> 00:01:18,090 ‫it will appear when 26 00:01:18,090 --> 00:01:21,480 ‫I actually upload my app 27 00:01:21,480 --> 00:01:24,300 ‫to the app store and when somebody downloads it, 28 00:01:24,300 --> 00:01:28,590 ‫it will see this name on their iPhone, okay? 29 00:01:28,590 --> 00:01:32,100 ‫So, this will be literally the display name for me. 30 00:01:32,100 --> 00:01:35,130 ‫And in here we can see the bundle identifier 31 00:01:35,130 --> 00:01:36,720 ‫that we have chosen 32 00:01:36,720 --> 00:01:38,550 ‫when we create this app. 33 00:01:38,550 --> 00:01:42,180 ‫Of course, we can choose a new bundle identifier 34 00:01:42,180 --> 00:01:44,880 ‫if you want, from here. 35 00:01:44,880 --> 00:01:49,590 ‫So, we have something like iOS 13 over here, 36 00:01:49,590 --> 00:01:52,980 ‫and on the right hand side you can see iPad or iPhone. 37 00:01:52,980 --> 00:01:57,840 ‫So, if I want to disable this app to be working on iPad 38 00:01:57,840 --> 00:02:00,510 ‫I can just uncheck and check again. 39 00:02:00,510 --> 00:02:04,050 ‫And the important thing to do is right now, just go here 40 00:02:04,050 --> 00:02:07,890 ‫to signing and capabilities in which you will see 41 00:02:07,890 --> 00:02:09,600 ‫this checkbox. 42 00:02:09,600 --> 00:02:12,450 ‫So, make sure this is checked, okay? 43 00:02:12,450 --> 00:02:14,580 ‫Automatically manage signing. 44 00:02:14,580 --> 00:02:19,290 ‫So, this will sign you in using your Apple ID. 45 00:02:19,290 --> 00:02:22,020 ‫So, you can say enable automatic. 46 00:02:22,020 --> 00:02:24,360 ‫And in here, if you don't see anything, 47 00:02:24,360 --> 00:02:26,640 ‫you can just say add account. 48 00:02:26,640 --> 00:02:31,380 ‫And over here, it will pop up a window asking you 49 00:02:31,380 --> 00:02:34,350 ‫to just enter your Apple ID. 50 00:02:34,350 --> 00:02:37,260 ‫And if you don't have an Apple ID, you can create, 51 00:02:37,260 --> 00:02:39,720 ‫just click on this create Apple ID thing 52 00:02:39,720 --> 00:02:43,590 ‫and you can create a free Apple ID for yourself. 53 00:02:43,590 --> 00:02:46,890 ‫Later on we are going to see how to create a developer 54 00:02:46,890 --> 00:02:48,720 ‫account as well. 55 00:02:48,720 --> 00:02:53,720 ‫Right now, I have my ID signed in so I can just select one 56 00:02:54,330 --> 00:02:58,440 ‫and it will just automatically manage the signing for me. 57 00:02:58,440 --> 00:03:01,050 ‫And this will associate my Apple ID 58 00:03:01,050 --> 00:03:03,990 ‫with my project so that Xcode 59 00:03:03,990 --> 00:03:07,623 ‫and Apple will know this project actually belongs to me. 60 00:03:08,910 --> 00:03:11,370 ‫So, this is for general settings right now. 61 00:03:11,370 --> 00:03:14,610 ‫We're going to come back here later on when 62 00:03:14,610 --> 00:03:19,560 ‫we need something for this project settings, okay? 63 00:03:19,560 --> 00:03:22,290 ‫And in here the most important file is 64 00:03:22,290 --> 00:03:24,840 ‫the viewController.switft. 65 00:03:24,840 --> 00:03:28,140 ‫So, this is where we write our code, okay? 66 00:03:28,140 --> 00:03:31,950 ‫This is where we are going to code our app. 67 00:03:31,950 --> 00:03:34,830 ‫This is where we are going to do our stuff. 68 00:03:34,830 --> 00:03:36,900 ‫This is where we are going to do everything. 69 00:03:36,900 --> 00:03:41,220 ‫And in here, we see some automatically generated swift files 70 00:03:41,220 --> 00:03:43,290 ‫like app delegate. 71 00:03:43,290 --> 00:03:46,170 ‫So, we have a lot of quotes here 72 00:03:46,170 --> 00:03:49,350 ‫and right now you don't understand any of this. 73 00:03:49,350 --> 00:03:50,610 ‫We are going to come back 74 00:03:50,610 --> 00:03:53,430 ‫to here later on, don't worry about it. 75 00:03:53,430 --> 00:03:56,790 ‫So, this is another automatically generated file 76 00:03:56,790 --> 00:03:58,590 ‫called scene delegate, 77 00:03:58,590 --> 00:04:01,800 ‫in which we actually define 78 00:04:01,800 --> 00:04:03,240 ‫the UI window, 79 00:04:03,240 --> 00:04:06,840 ‫the window that we are seeing in our app. 80 00:04:06,840 --> 00:04:09,450 ‫And we are going to come back here later on just 81 00:04:09,450 --> 00:04:12,810 ‫for right now, know that we are not gonna do much 82 00:04:12,810 --> 00:04:14,610 ‫in the app delegator scene delegate. 83 00:04:14,610 --> 00:04:16,800 ‫We're just going to write our codes 84 00:04:16,800 --> 00:04:20,730 ‫inside of our ViewController.swift. 85 00:04:20,730 --> 00:04:23,310 ‫And in here, you will see something called 86 00:04:23,310 --> 00:04:25,050 ‫Main.storyboard. 87 00:04:25,050 --> 00:04:26,760 ‫If you click on this file, 88 00:04:26,760 --> 00:04:31,350 ‫it will open an empty iPhone screen for you. 89 00:04:31,350 --> 00:04:34,560 ‫So, in here we do the design of our app, 90 00:04:34,560 --> 00:04:37,680 ‫user interface of our apps. 91 00:04:37,680 --> 00:04:42,240 ‫So, we drag in images, we drag in texts, 92 00:04:42,240 --> 00:04:47,240 ‫we create some user interface in this file, okay? 93 00:04:47,940 --> 00:04:51,270 ‫And this file, this file is actually connected 94 00:04:51,270 --> 00:04:54,120 ‫with the ViewController.swift. 95 00:04:54,120 --> 00:04:56,490 ‫It means that we get to design our app 96 00:04:56,490 --> 00:05:00,570 ‫in this main storyboard and you can zoom in and out 97 00:05:00,570 --> 00:05:03,600 ‫like this in here and we get to write our codes 98 00:05:03,600 --> 00:05:06,840 ‫in the ViewController.swift. 99 00:05:06,840 --> 00:05:09,420 ‫And actually, it's very easy to work 100 00:05:09,420 --> 00:05:13,500 ‫with main storyboards and we are gonna see that later on. 101 00:05:13,500 --> 00:05:17,550 ‫And here we have some folder called Assets. 102 00:05:17,550 --> 00:05:20,940 ‫And we place some images, we place some icons 103 00:05:20,940 --> 00:05:22,980 ‫in this folder, okay? 104 00:05:22,980 --> 00:05:25,740 ‫We have some LaunchScreen.storyboard. 105 00:05:25,740 --> 00:05:28,800 ‫So, this is a welcome screen for you. 106 00:05:28,800 --> 00:05:30,960 ‫If you put something over here 107 00:05:30,960 --> 00:05:33,870 ‫it'll be shown in the welcome section of your app, 108 00:05:33,870 --> 00:05:37,380 ‫like a logo of your icon of your app, okay? 109 00:05:37,380 --> 00:05:41,250 ‫And in here we have an info.plist file. 110 00:05:41,250 --> 00:05:45,180 ‫We are going to change some of this options over here. 111 00:05:45,180 --> 00:05:48,270 ‫This is for general settings, again. 112 00:05:48,270 --> 00:05:50,280 ‫We're going to use all 113 00:05:50,280 --> 00:05:52,590 ‫of those files during our course. 114 00:05:52,590 --> 00:05:54,270 ‫So, don't worry about it. 115 00:05:54,270 --> 00:05:56,760 ‫Right now, know that we are going to use 116 00:05:56,760 --> 00:05:59,160 ‫ViewController.swift and we are going 117 00:05:59,160 --> 00:06:03,930 ‫to use Main.storyboard a lot, okay? 118 00:06:03,930 --> 00:06:04,763 ‫Because why? 119 00:06:04,763 --> 00:06:08,340 ‫Because, this is where we write our code. 120 00:06:08,340 --> 00:06:10,620 ‫So, let me go over these buttons over here. 121 00:06:10,620 --> 00:06:12,583 ‫You will see something called Editor options, 122 00:06:12,583 --> 00:06:17,160 ‫adjust editor options, adjust editors. 123 00:06:17,160 --> 00:06:21,060 ‫So, this is the main page, this is the main section 124 00:06:21,060 --> 00:06:24,990 ‫in which we write our code, but we can change this screen. 125 00:06:24,990 --> 00:06:28,860 ‫So, if you click on Editor only, nothing will change. 126 00:06:28,860 --> 00:06:31,680 ‫But if you click on Editor and Canvas 127 00:06:31,680 --> 00:06:34,290 ‫if we were building for SwiftUI, 128 00:06:34,290 --> 00:06:37,560 ‫it will open a preview layout for you. 129 00:06:37,560 --> 00:06:39,990 ‫Right now, we don't have to worry for that 130 00:06:39,990 --> 00:06:44,990 ‫because in the regular programming way without the SwiftUI 131 00:06:45,540 --> 00:06:49,980 ‫we don't need, we won't have any canvas. 132 00:06:49,980 --> 00:06:51,210 ‫Instead of canvas, 133 00:06:51,210 --> 00:06:55,560 ‫we have main story board in this project, okay? 134 00:06:55,560 --> 00:06:58,440 ‫And in here we have some other options as well 135 00:06:58,440 --> 00:07:00,390 ‫like editor assistant. 136 00:07:00,390 --> 00:07:04,110 ‫If you click on this, it'll open another editor for you. 137 00:07:04,110 --> 00:07:06,780 ‫So, you get to write 138 00:07:06,780 --> 00:07:10,080 ‫code in both screens right now, and we are going to 139 00:07:10,080 --> 00:07:13,050 ‫see how to leverage this two editor thing 140 00:07:13,050 --> 00:07:17,040 ‫in our apps because you can choose any file over here 141 00:07:17,040 --> 00:07:19,770 ‫so you can compare the files or you can work 142 00:07:19,770 --> 00:07:22,860 ‫with ViewController.swift on the one hand side. 143 00:07:22,860 --> 00:07:26,010 ‫And on the other hand you can work with the storyboard 144 00:07:26,010 --> 00:07:29,040 ‫and we are going to do all of those things. 145 00:07:29,040 --> 00:07:31,710 ‫So, we can close this editor right now 146 00:07:31,710 --> 00:07:34,680 ‫and we can continue actually seeing 147 00:07:34,680 --> 00:07:36,750 ‫the other options over here. 148 00:07:36,750 --> 00:07:39,090 ‫So, if you go to your Main.storyboard 149 00:07:39,090 --> 00:07:41,190 ‫and if you click on this, 150 00:07:41,190 --> 00:07:43,650 ‫you can just say editor and assistant. 151 00:07:43,650 --> 00:07:45,990 ‫So, you can work with the main storyboard 152 00:07:45,990 --> 00:07:49,500 ‫on the one side and view controller on the other side. 153 00:07:49,500 --> 00:07:51,540 ‫So, you get to design your app here 154 00:07:51,540 --> 00:07:55,170 ‫and you get to write your code over here. 155 00:07:55,170 --> 00:07:58,950 ‫And we will connect our views, connect our objects 156 00:07:58,950 --> 00:08:03,950 ‫like images to the code using this technique later on. 157 00:08:04,080 --> 00:08:08,340 ‫So again, in here we see an add editor below button. 158 00:08:08,340 --> 00:08:10,890 ‫So, this does exactly the same thing. 159 00:08:10,890 --> 00:08:14,133 ‫You add another editor over here. 160 00:08:15,000 --> 00:08:18,060 ‫So, that's it for the main section, actually. 161 00:08:18,060 --> 00:08:21,300 ‫So, on the left hand side we see the folder files. 162 00:08:21,300 --> 00:08:24,870 ‫On the middle side we see the coding section 163 00:08:24,870 --> 00:08:26,070 ‫or design section. 164 00:08:26,070 --> 00:08:27,690 ‫On the right hand side 165 00:08:27,690 --> 00:08:30,660 ‫we generally see the properties, okay? 166 00:08:30,660 --> 00:08:34,500 ‫Of the chosen object or chosen view. 167 00:08:34,500 --> 00:08:37,110 ‫So for example, in the Main.storyboard 168 00:08:37,110 --> 00:08:40,920 ‫if you choose something from this section, okay? 169 00:08:40,920 --> 00:08:43,410 ‫Like a view controller or a view 170 00:08:43,410 --> 00:08:47,760 ‫and we will have some images or texts over here 171 00:08:47,760 --> 00:08:51,900 ‫in later on you can see the properties of that view. 172 00:08:51,900 --> 00:08:55,950 ‫You can see the properties of that object in this pane. 173 00:08:55,950 --> 00:09:00,150 ‫For example, we see something called history over here. 174 00:09:00,150 --> 00:09:04,080 ‫And this is related to Git that we have talked about. 175 00:09:04,080 --> 00:09:07,650 ‫So, this is like a save point, checkpoint control, 176 00:09:07,650 --> 00:09:11,550 ‫and the first place you will see where it is located 177 00:09:11,550 --> 00:09:13,290 ‫on your computer. 178 00:09:13,290 --> 00:09:15,750 ‫So, in here we have help section. 179 00:09:15,750 --> 00:09:19,350 ‫So, this is the official documentation of Apple. 180 00:09:19,350 --> 00:09:21,540 ‫We can read on that, always. 181 00:09:21,540 --> 00:09:24,520 ‫And in here we see the Identity Inspector 182 00:09:25,530 --> 00:09:27,990 ‫just connecting views with each other. 183 00:09:27,990 --> 00:09:30,540 ‫We are gonna see what this does later on. 184 00:09:30,540 --> 00:09:33,600 ‫So, in here we see the Attributes inspector 185 00:09:33,600 --> 00:09:36,690 ‫it really gives you the options to choose, 186 00:09:36,690 --> 00:09:39,180 ‫like if you're working with a text, 187 00:09:39,180 --> 00:09:41,670 ‫you can change the font 188 00:09:41,670 --> 00:09:45,600 ‫and the size of the text, color of the text and everything. 189 00:09:45,600 --> 00:09:48,480 ‫And for the fifth one, 190 00:09:48,480 --> 00:09:51,330 ‫we have this view over here 191 00:09:51,330 --> 00:09:54,240 ‫in which we can choose the place 192 00:09:54,240 --> 00:09:56,940 ‫and the size of the related object. 193 00:09:56,940 --> 00:09:59,460 ‫And on the last one we have something 194 00:09:59,460 --> 00:10:02,430 ‫called Connections Inspector, okay? 195 00:10:02,430 --> 00:10:05,460 ‫We are going to connect some of the views with the code 196 00:10:05,460 --> 00:10:09,510 ‫and we can break them or change them if we want later on. 197 00:10:09,510 --> 00:10:11,580 ‫And this doesn't make any sense 198 00:10:11,580 --> 00:10:13,800 ‫to you right now because you don't know anything 199 00:10:13,800 --> 00:10:16,440 ‫about iOS programming or Swift. 200 00:10:16,440 --> 00:10:20,760 ‫But I'm just trying to explain the options, the buttons, 201 00:10:20,760 --> 00:10:25,760 ‫the view of this XCode right now, okay? 202 00:10:25,980 --> 00:10:28,410 ‫In here you will see a button called library. 203 00:10:28,410 --> 00:10:31,200 ‫If you click on this, you can see the objects, 204 00:10:31,200 --> 00:10:35,040 ‫you can see the views that you can take and drag 205 00:10:35,040 --> 00:10:40,040 ‫and drop on your view controller in the Main.storyboard. 206 00:10:40,410 --> 00:10:42,900 ‫Just for an example, you can choose any 207 00:10:42,900 --> 00:10:47,730 ‫of this and try to drag and drop on your iPhone screen. 208 00:10:47,730 --> 00:10:49,320 ‫For example, this is a button. 209 00:10:49,320 --> 00:10:50,850 ‫You can click on this 210 00:10:50,850 --> 00:10:53,400 ‫and you can write a code inside of a button. 211 00:10:53,400 --> 00:10:56,190 ‫And this is a label, this is just a text. 212 00:10:56,190 --> 00:11:00,840 ‫You can write whatever you want inside of your label. 213 00:11:00,840 --> 00:11:03,000 ‫So, for right now, for example, 214 00:11:03,000 --> 00:11:05,910 ‫just take this label and drag it on your screen. 215 00:11:05,910 --> 00:11:10,500 ‫And as you can see, we can place the text anywhere we want. 216 00:11:10,500 --> 00:11:13,980 ‫And right now if you click on this Attributes inspector 217 00:11:13,980 --> 00:11:16,980 ‫we can change the color of this label. 218 00:11:16,980 --> 00:11:20,970 ‫We can change the font size of this label. 219 00:11:20,970 --> 00:11:23,010 ‫We can do whatever we want with this. 220 00:11:23,010 --> 00:11:25,380 ‫So, this is actually very easy. 221 00:11:25,380 --> 00:11:28,950 ‫You can change the alignment, you can make it black, 222 00:11:28,950 --> 00:11:31,830 ‫you can make it bigger, you can make it smaller, 223 00:11:31,830 --> 00:11:33,690 ‫whatever you want. 224 00:11:33,690 --> 00:11:37,380 ‫And this is actually fun and this is very easy to 225 00:11:37,380 --> 00:11:39,813 ‫create user interfaces. 226 00:11:40,830 --> 00:11:43,980 ‫And again, if you double click on this 227 00:11:43,980 --> 00:11:46,680 ‫you can change the size 228 00:11:46,680 --> 00:11:49,200 ‫or you can change the actual text over here. 229 00:11:49,200 --> 00:11:52,380 ‫Like, we can write Hello Swift. 230 00:11:52,380 --> 00:11:54,600 ‫So, this is cool, right? 231 00:11:54,600 --> 00:11:56,880 ‫This is very easy to work on. 232 00:11:56,880 --> 00:12:00,660 ‫So, we can create some stunning user interfaces 233 00:12:00,660 --> 00:12:03,750 ‫using this Main.storyboard. 234 00:12:03,750 --> 00:12:07,110 ‫If you go to here, XCode preferences, 235 00:12:07,110 --> 00:12:11,250 ‫you can access the settings of the XCode. 236 00:12:11,250 --> 00:12:12,680 ‫We can change the settings 237 00:12:12,680 --> 00:12:16,200 ‫of XCode using this pane over here, okay? 238 00:12:16,200 --> 00:12:18,840 ‫If you come to general or let me close this 239 00:12:18,840 --> 00:12:22,020 ‫down and go to ViewController so you can see it better 240 00:12:22,020 --> 00:12:24,777 ‫because I'm going to change the font size of XCode 241 00:12:24,777 --> 00:12:27,450 ‫and you will see how to do that. 242 00:12:27,450 --> 00:12:31,950 ‫So, let me go to XCode preferences one more time. 243 00:12:31,950 --> 00:12:34,350 ‫If I come to general, 244 00:12:34,350 --> 00:12:37,383 ‫I will see the general settings of the XCode. 245 00:12:38,430 --> 00:12:42,060 ‫It's actually wise to leave those as it is. 246 00:12:42,060 --> 00:12:45,750 ‫And in the accounts tab you can see your own Apple ID 247 00:12:45,750 --> 00:12:47,820 ‫because you have already connected 248 00:12:47,820 --> 00:12:51,390 ‫to your Apple ID in the signing and capabilities section. 249 00:12:51,390 --> 00:12:55,860 ‫So, I'm going to just skip this behaviors and navigation 250 00:12:55,860 --> 00:12:58,110 ‫and I'm going to go for fonts 251 00:12:58,110 --> 00:13:02,160 ‫and colors because you can start with the basics 252 00:13:02,160 --> 00:13:06,540 ‫and the most part will be you will start with the basic one. 253 00:13:06,540 --> 00:13:08,610 ‫And this is too small for me. 254 00:13:08,610 --> 00:13:12,780 ‫So, I'm going to go for presentation light or dark. 255 00:13:12,780 --> 00:13:16,020 ‫So, since I'm recording this video 256 00:13:16,020 --> 00:13:20,190 ‫I'm not going to go for presentation large, okay? 257 00:13:20,190 --> 00:13:22,680 ‫I'm going to go for presentation 258 00:13:22,680 --> 00:13:26,370 ‫because the presentation large will be too big for me. 259 00:13:26,370 --> 00:13:29,520 ‫If you like darker things, you can go for dark. 260 00:13:29,520 --> 00:13:32,610 ‫I'm not gonna do that since I'm recording this. 261 00:13:32,610 --> 00:13:34,410 ‫If I wasn't recording, 262 00:13:34,410 --> 00:13:38,760 ‫I would have definitely gone for the dark, okay? 263 00:13:38,760 --> 00:13:42,240 ‫So, presentation light is the choice for me. 264 00:13:42,240 --> 00:13:45,993 ‫You can choose your own from here. 265 00:13:46,890 --> 00:13:50,910 ‫And you can just go over these other settings as well. 266 00:13:50,910 --> 00:13:55,710 ‫But, if we need something from here in one of our projects, 267 00:13:55,710 --> 00:13:59,160 ‫I will definitely show you how to do that later on. 268 00:13:59,160 --> 00:14:02,340 ‫But, right now I'm going to leave all of the settings 269 00:14:02,340 --> 00:14:03,510 ‫as it is. 270 00:14:03,510 --> 00:14:05,040 ‫So, let's stop here 271 00:14:05,040 --> 00:14:09,843 ‫and continue building our first app within the next lecture.