0 1 00:00:00,600 --> 00:00:05,190 To start building the Todoey App, we're going to first clone the starting project. 1 2 00:00:05,190 --> 00:00:11,910 So head over to the course resources link and click on the Todoey Starter Project. That should take 2 3 00:00:11,910 --> 00:00:18,920 you to our GitHub repo, and then click on Clone or download, and copy the URL. 3 4 00:00:19,080 --> 00:00:26,700 Now, head back into Xcode and click on Clone an existing project or go via Source Control and click Clone. 4 5 00:00:26,730 --> 00:00:33,320 Now, let's paste in that URL, click Clone. And now go ahead and save it any way you like. 5 6 00:00:33,880 --> 00:00:37,020 So I'm gonna put it on my desktop for now. 6 7 00:00:37,090 --> 00:00:42,310 Now, once that's done, you should end up with a pretty much blank project. 7 8 00:00:42,310 --> 00:00:48,460 You won't find much code in the ViewController, and Main.storyboard also has a blank screen. 8 9 00:00:48,490 --> 00:00:56,110 So, effectively, this is just a blank project, but it's been set up to be compatible with iOS 12 and 13. 9 10 00:00:56,110 --> 00:01:01,570 The first thing you have to do is head over to the Todoey Project and change the bundle identified 10 11 00:01:01,570 --> 00:01:03,690 to something unique. 11 12 00:01:03,820 --> 00:01:08,310 For example, just change that London App Brewery to your own name. 12 13 00:01:08,320 --> 00:01:15,010 Now, we can start by designing our app in the Main.storyboard, and I'm going to drag on a table 13 14 00:01:15,010 --> 00:01:16,750 view controller. 14 15 00:01:16,750 --> 00:01:23,890 Now, this is a normal UIViewController which we've been working with thus far, but now I'm going to 15 16 00:01:23,890 --> 00:01:30,580 use a table view controller. And once I drag it on, you can see that there are some important differences. 16 17 00:01:30,580 --> 00:01:38,230 The table view controller comes with a table view linked up, as well as prototype cells, and all of the 17 18 00:01:38,320 --> 00:01:42,460 delegates and data source is already linked up and ready to go. 18 19 00:01:42,880 --> 00:01:48,650 So for the keen-eyed amongst you, you'll realize that this is a little bit different from how we implemented 19 20 00:01:48,700 --> 00:01:50,620 table view in FlashChat. 20 21 00:01:50,860 --> 00:01:58,270 And this is on purpose so that I can show you there's actually many ways to skin a cat, or in more 21 22 00:01:58,270 --> 00:02:00,130 pet-friendly lingo, 22 23 00:02:00,130 --> 00:02:06,820 there's many ways of doing the same thing. But I'm going to delete this view control them. Now, before 23 24 00:02:06,820 --> 00:02:07,670 you delete it, 24 25 00:02:07,690 --> 00:02:13,330 if you remember, there's this little arrow here which points to the initial view controller, 25 26 00:02:13,660 --> 00:02:17,310 so that's the view controller that is going to show up on the screen 26 27 00:02:17,380 --> 00:02:20,070 once the app has first loaded up. 27 28 00:02:20,260 --> 00:02:27,220 Now, what we want to do is we want to use this arrow and move it to our table view controller. 28 29 00:02:27,220 --> 00:02:33,760 This is now going to be our initial view controller because we are going to delete this view controller. 29 30 00:02:33,760 --> 00:02:41,800 Now, if you forget this step and you accidentally got rid of this view controller with the arrow along 30 31 00:02:41,800 --> 00:02:45,470 with it, then it's not a problem. 31 32 00:02:45,580 --> 00:02:52,120 You can simply select the table view controller, go to the attribute inspector, and just click this part 32 33 00:02:52,120 --> 00:02:55,920 where it says, "Is Initial View Controller," and you see that arrow come back. 33 34 00:02:56,440 --> 00:02:58,530 So both ways do the same thing, 34 35 00:02:58,540 --> 00:03:03,400 basically, show this view controller as the first screen when the app loads up. 35 36 00:03:03,460 --> 00:03:11,320 Now, you'll notice that this view controller is not linked with the ViewController.swift file here, 36 37 00:03:12,220 --> 00:03:17,200 and that was, in fact, linked to that view controller that we just deleted. 37 38 00:03:17,200 --> 00:03:26,410 So in order to create a bond between this ViewController.swift file and our Main.storyboard, 38 39 00:03:26,410 --> 00:03:32,440 the first thing we have to do is to go into the ViewController and change its superclass or the class which 39 40 00:03:32,440 --> 00:03:39,640 inherits from, and change it from UIViewController to UITableViewController, not UITableView 40 41 00:03:39,910 --> 00:03:42,980 but a UITableViewController. 41 42 00:03:43,060 --> 00:03:50,230 Hit enter. And now I'm also going to change the name of this ViewController to something else so that 42 43 00:03:50,230 --> 00:03:51,600 it's a little bit more clear. 43 44 00:03:51,880 --> 00:03:54,820 So I'm going to change the name of this to 44 45 00:03:54,900 --> 00:04:01,910 TodoListViewController. 45 46 00:04:02,300 --> 00:04:04,540 Now, it might give you this little warning here, 46 47 00:04:04,550 --> 00:04:09,980 this little pop up saying that TodoListViewController could not be saved. The file has been changed 47 48 00:04:09,980 --> 00:04:15,840 by another application. And all you have to do is just click Save Anyways, and it will get rid of that 48 49 00:04:15,840 --> 00:04:21,420 little pop up. Now, because we've changed the file name of this ViewController, 49 50 00:04:21,440 --> 00:04:29,100 it's also a good idea to change it here as well. So we're gonna change it to TodoListViewController 50 51 00:04:29,220 --> 00:04:34,730 and make sure that it's capitalized because that's the name of our class. 51 52 00:04:35,070 --> 00:04:42,540 So, now if we hit save and make that not gray, then we can go back to the Main.storyboard, select the 52 53 00:04:42,540 --> 00:04:50,550 table view controller and go into its identity inspector and specify the custom class. 53 54 00:04:50,550 --> 00:04:56,220 You can see that at the moment, it doesn't have a class associated with it because we haven't specified 54 55 00:04:56,220 --> 00:04:56,860 one. 55 56 00:04:56,880 --> 00:05:02,190 So if you click here, and you can either click the down button, or you can start typing, but, basically, 56 57 00:05:02,190 --> 00:05:06,630 the one we want to link it with is the TodoListViewController. 57 58 00:05:06,630 --> 00:05:11,790 Now, just before I add that, I want to show you how you can tell that it's not linked up. 58 59 00:05:12,270 --> 00:05:19,650 When you select this ViewController on the left and you've got automatic selected, it should show you 59 60 00:05:19,650 --> 00:05:25,260 the Swift file that's linked to this ViewController in the Main.storyboard. 60 61 00:05:25,260 --> 00:05:33,160 Now, in our case, it's not, because this ViewController is not yet linked with any Swift file. 61 62 00:05:33,330 --> 00:05:41,020 So let's go ahead and do what we plan on doing which is select TodoListViewController and hit enter. 62 63 00:05:41,460 --> 00:05:49,260 And now you can see automatically to show the corresponding Swift code file with this ViewController. 63 64 00:05:49,500 --> 00:05:53,700 So, now this is how we can tell that it's all linked up. 64 65 00:05:53,700 --> 00:06:01,170 Now, we've got one warning here which is telling us that prototype cells must have reused identifiers 65 66 00:06:01,410 --> 00:06:04,920 so that we can identify them in our code file. 66 67 00:06:05,130 --> 00:06:06,520 So let's go ahead and do that. 67 68 00:06:06,540 --> 00:06:11,880 Let's select that cell and go to the attributes and you can see it's got to Reuse Identifier which 68 69 00:06:11,880 --> 00:06:19,930 is blank and we're going to call it ToDoItemCell and hit enter. 69 70 00:06:20,040 --> 00:06:25,990 And now that warning will go away. And I'm going to hit command S to save the Main.storyboard 70 71 00:06:25,990 --> 00:06:26,410 as well. 71 72 00:06:26,410 --> 00:06:32,920 So while we're here at the Main.storyboard, I'm going to design a little bit and modify its UI a little 72 73 00:06:32,920 --> 00:06:33,470 bit more. 73 74 00:06:33,490 --> 00:06:39,130 Now, the first thing I want to do is I don't really want an app that's just a table view. 74 75 00:06:39,130 --> 00:06:46,810 I want my app to have a nav bar at the top. And to do that, I have to select the ViewController and go 75 76 00:06:46,810 --> 00:06:54,490 to Editor, and Embed In, and I'm going to select Navigation Controller. So Navigation Controller comes with 76 77 00:06:54,490 --> 00:06:58,420 the top bar and the tab bar comes with the bottom bar. 77 78 00:06:58,450 --> 00:07:01,510 So this is the one that we want in this case. 78 79 00:07:02,260 --> 00:07:08,950 So let's arrange it nicely. And you can see now our table view controller and everything else subsequently 79 80 00:07:09,250 --> 00:07:12,200 will inherit this top bar. 80 81 00:07:12,250 --> 00:07:15,330 Now, the top bar doesn't yet say anything because it doesn't have a title. 81 82 00:07:15,340 --> 00:07:16,550 So let's give it one. 82 83 00:07:16,750 --> 00:07:19,190 So you can either select it here 83 84 00:07:19,210 --> 00:07:22,710 or you can select it in the document outline over here. 84 85 00:07:23,470 --> 00:07:32,310 So the title is going to be Todoey and you can see it shows up over here.Sso we can set the background 85 86 00:07:32,310 --> 00:07:39,990 color of the navigation bar by selecting it in the document outline and heading over to Bar Tint, and 86 87 00:07:40,080 --> 00:07:47,660 we can select a nice color, maybe a nice blue. And the next thing I want to do is change the text color. 87 88 00:07:47,660 --> 00:07:51,060 So I'm going to change it from black to white. 88 89 00:07:51,120 --> 00:07:52,860 So that's looking pretty good. 89 90 00:07:52,920 --> 00:07:55,010 So I'm pretty happy with the design. 90 91 00:07:55,020 --> 00:08:00,750 Now, the next thing I want to do is to set up the code file. So let's go over to 91 92 00:08:00,830 --> 00:08:06,960 TodoListViewController.swift, and we've already inherited UITableViewController. 92 93 00:08:06,990 --> 00:08:12,830 So whereas before in FlashChat, we kept the view controller as a subclass of 93 94 00:08:12,890 --> 00:08:13,770 UIViewController, 94 95 00:08:13,890 --> 00:08:19,380 in which case, we needed to add the whole self.tableView.delegate, and we need to link up 95 96 00:08:19,410 --> 00:08:26,400 those IBOutlets by simply inheriting a UITableViewController and adding a table view controller 96 97 00:08:26,430 --> 00:08:30,130 to the storyboard instead of a normal view controller. 97 98 00:08:30,210 --> 00:08:36,230 All of that is automated behind the scenes by Xcode. And we don't need to link up any IBOutlet, 98 99 00:08:36,240 --> 00:08:39,150 we don't have to set ourselves as the delegate or data source. 99 100 00:08:39,180 --> 00:08:43,680 It's all taken care of by Xcode. 100 101 00:08:43,680 --> 00:08:49,020 Now, the first thing I'm gonna do is I'm going to delete this didReceiveMemoryWarning to de clutter 101 102 00:08:49,140 --> 00:08:50,760 our code a little bit. 102 103 00:08:50,760 --> 00:08:59,190 So I'm going to create a brand-new item array. And in this array, I'm going to create some hardcoded 103 104 00:08:59,220 --> 00:09:04,440 items to be listed in our to-do list on startup. 104 105 00:09:04,470 --> 00:09:09,780 So obviously, you can put a to-do list items you want here, but I'm going to go with the "Stranger Things" 105 106 00:09:09,840 --> 00:09:14,020 theme and I'm going to list some to-dos. 106 107 00:09:14,190 --> 00:09:20,790 So I've got three strings in my item array and they are going to be the tech for cell 1, cell 2, and 107 108 00:09:20,790 --> 00:09:23,140 cell 3 in my table view. 108 109 00:09:23,190 --> 00:09:34,560 So, now at this stage, I want to set you the challenge of creating the Tableview Datasource Methods. 109 110 00:09:35,570 --> 00:09:43,250 So if you remember, there are two methods that we created in FlashChat which allowed us to specify what 110 111 00:09:43,250 --> 00:09:52,370 the cells should display, and also how many rows we wanted in our table view. So you can pause the video 111 112 00:09:52,490 --> 00:09:54,590 and complete the challenge. 112 113 00:09:54,590 --> 00:09:56,250 And if you've done it right, 113 114 00:09:56,270 --> 00:10:03,920 once you run your app, you should be able to see these three items listed in three cells on your table view. 114 115 00:10:03,920 --> 00:10:09,810 So go ahead and do that. 115 116 00:10:10,060 --> 00:10:10,390 All right. 116 117 00:10:10,420 --> 00:10:11,600 So how did that go? 117 118 00:10:12,080 --> 00:10:18,090 So the first data source method that we're going to add is the number of rows. 118 119 00:10:18,110 --> 00:10:24,470 So if we just start writing tableView, then you can see that we've got this whole big selection of different 119 120 00:10:24,470 --> 00:10:26,960 things that we might want to include. 120 121 00:10:27,050 --> 00:10:31,790 And the one that I want is number of rows in section. 121 122 00:10:31,940 --> 00:10:39,140 So I'm gonna go and click enter and it's expecting an output in a return statement that will be the 122 123 00:10:39,140 --> 00:10:40,330 number of rows. 123 124 00:10:40,340 --> 00:10:49,280 So I'm going to simply return the itemArray.account. And that is going to create three cells for me 124 125 00:10:49,340 --> 00:10:51,010 in my tableView. 125 126 00:10:51,050 --> 00:10:56,450 Now, the next Datasource Method I want is another one beginning with tableView, 126 127 00:10:56,600 --> 00:11:01,160 but this is going to be self a row at indexPath 127 128 00:11:01,160 --> 00:11:09,300 and I think it's this one. "Asks the data source for a cell to insert in a particular location of the table 128 129 00:11:09,300 --> 00:11:09,850 view." 129 130 00:11:09,900 --> 00:11:11,560 So that sounds pretty much like it. 130 131 00:11:11,610 --> 00:11:14,550 And it's tableView cellForRow at nextPath. 131 132 00:11:14,570 --> 00:11:14,800 Okay. 132 133 00:11:14,850 --> 00:11:15,920 So perfect. 133 134 00:11:15,990 --> 00:11:19,200 Now, here firstly delete the placeholder. 134 135 00:11:19,260 --> 00:11:24,970 Next, we are going to create a cell that is going to be a reusable cell. 135 136 00:11:25,020 --> 00:11:31,980 So we're going to use tableView, and you can see that there's two tableViews that come up that looks 136 137 00:11:31,980 --> 00:11:34,010 pretty much identical to each other. 137 138 00:11:34,530 --> 00:11:38,820 But the only difference is this little symbol on the left here. 138 139 00:11:38,850 --> 00:11:44,130 Now, if you want to know what all of these symbols mean, I'm going to include a link in the resources 139 140 00:11:44,130 --> 00:11:52,820 for this lesson to a list for the geeky ones out there who want to see what each and every symbol mean. 140 141 00:11:53,130 --> 00:12:00,720 And this is called Code Sense and it's a whole bunch of symbols that help you make sense of what it 141 142 00:12:00,720 --> 00:12:02,910 is that autosuggest is recommending. 142 143 00:12:02,910 --> 00:12:04,730 So this is a really good reference 143 144 00:12:04,770 --> 00:12:11,280 if you want to understand that a little bit more. So on the top, we've got what's called a local variable. 144 145 00:12:11,490 --> 00:12:14,490 And at the bottom, we've got the global variable. 145 146 00:12:14,490 --> 00:12:17,120 So where did these two come from? 146 147 00:12:17,130 --> 00:12:22,430 Now, this global variable is what we get by subclassing 147 148 00:12:22,440 --> 00:12:24,420 this UITableViewController. 148 149 00:12:24,570 --> 00:12:31,740 It's the same as if we created an IBOutlet from the tableView on the Main.storyboard and called it 149 150 00:12:31,740 --> 00:12:33,080 tableView here. 150 151 00:12:33,150 --> 00:12:37,800 It's just the default name that's given to that tableView outlet. 151 152 00:12:37,860 --> 00:12:44,560 Now, the local variable here comes from this method as one of the parameters. 152 153 00:12:44,640 --> 00:12:49,200 Now, in this case, it doesn't actually matter which one you choose because they're both going to refer 153 154 00:12:49,200 --> 00:12:50,550 to the same thing. 154 155 00:12:50,640 --> 00:12:56,820 And once you click enter and you hit dot, then you're going to be able to tap into dequeueReusableCell(withIdentifier:) 155 156 00:12:57,120 --> 00:13:02,070 for IndexPath which is the method that we want. 156 157 00:13:02,100 --> 00:13:08,430 So the identifier is, of course, the identifier which we gave to our prototype cell which was ToDoItemCell. 157 158 00:13:08,520 --> 00:13:17,260 And we can paste that in here. And the IndexPath is going to be the current indexPath that the 158 159 00:13:17,290 --> 00:13:20,050 tableView is looking to populate. 159 160 00:13:20,050 --> 00:13:27,920 So once we've got our cell dequeued, the next thing to do is we're going to set the textLabel, right? 160 161 00:13:27,940 --> 00:13:34,840 This is the label that's in every single cell and we're going to set its text property and we're going 161 162 00:13:34,840 --> 00:13:45,250 to set it to equal the items in our itemArray. And at the indexPath that we're currently populating, 162 163 00:13:45,280 --> 00:13:46,050 ".row," 163 164 00:13:46,070 --> 00:13:48,860 so the current row of the current IndexPath. 164 165 00:13:49,180 --> 00:13:58,330 And finally, we're going to return our cell, as this method expects an output, and that cell that's been 165 166 00:13:58,480 --> 00:14:06,940 created using our reused prototype cell and that has been populated with text for the current row is 166 167 00:14:06,940 --> 00:14:12,250 now returned to the tableView and displayed as a row. 167 168 00:14:12,250 --> 00:14:17,030 So let's go ahead and hit run and see what it looks like. 168 169 00:14:17,390 --> 00:14:17,620 All right. 169 170 00:14:17,650 --> 00:14:24,130 So you can see that we've now got three hardcoded items that's populated our tableView and you can 170 171 00:14:24,130 --> 00:14:27,100 drag up and down, but there's not really much else to see. 171 172 00:14:27,100 --> 00:14:30,840 So if you manage to get this far all by yourself, then that's great. 172 173 00:14:30,880 --> 00:14:38,140 If you didn't and anything seemed confusing, then make sure that you have a look back at the part where 173 174 00:14:38,140 --> 00:14:44,530 we coded up the tableView and where we did the animated explanations of tableViews in the FlashChat 174 175 00:14:44,560 --> 00:14:50,590 module, because a tableView is part of the bread and butter of any iOS developer. 175 176 00:14:50,590 --> 00:14:54,400 So it's really, really important that you know how to get it right. 176 177 00:14:54,880 --> 00:15:00,640 Now, this table view that we've created in this case is a lot simpler than the one that we had 177 178 00:15:00,640 --> 00:15:06,430 in FlashChat because FlashChat was all about tableViews, whereas it's only gonna be a very little part of this 178 179 00:15:06,490 --> 00:15:06,760 app. 179 180 00:15:07,150 --> 00:15:13,300 So we're using as much help as we can get from Xcode and using a lot of the template code that they 180 181 00:15:13,300 --> 00:15:19,860 can provide for us by subclassing this TodoListViewController. As a UITableViewController, 181 182 00:15:19,870 --> 00:15:22,560 we've gotten a lot of stuff for free. 182 183 00:15:22,630 --> 00:15:25,350 We didn't need to create our IBOutlet. 183 184 00:15:25,450 --> 00:15:29,170 We already have access to this thing called tableView. 184 185 00:15:29,230 --> 00:15:37,450 And we also didn't need to say tableView.delegate = self or tableView.dataSource = self, 185 186 00:15:37,450 --> 00:15:43,390 and that's all because of this one single powerful subclassing that we've done here. 186 187 00:15:43,600 --> 00:15:45,880 So this is a good time to review table views 187 188 00:15:45,880 --> 00:15:50,950 if you're at all confused, otherwise, we're going to continue on to the next lesson and we are going 188 189 00:15:50,950 --> 00:15:55,810 to start making our app work as a to-do list app. 189 190 00:15:55,810 --> 00:16:02,610 So I want to be able to click on these cells and to be up to know which cell I clicked on. 190 191 00:16:02,800 --> 00:16:05,020 So I'll see you in the next lesson.