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