1
00:00:07,720 --> 00:00:13,330
Everyone welcome back Johnny be here with slopes dot com and we're going to continue on with our chat

2
00:00:13,330 --> 00:00:14,100
app.

3
00:00:14,140 --> 00:00:21,660
The last lesson we created this function that retrieves all of the channels from our API.

4
00:00:21,820 --> 00:00:23,610
And so now let's actually do something with that.

5
00:00:23,610 --> 00:00:23,860
All right.

6
00:00:23,860 --> 00:00:31,120
We're going to we're going to actually display in our table view in the channel ABC controller these

7
00:00:31,120 --> 00:00:32,990
channels All right so let's get started.

8
00:00:33,010 --> 00:00:38,080
First thing we're going to do is we're going to start out with our custom cell or so here in view going

9
00:00:38,080 --> 00:00:42,010
to right click and say new file and we're going to do it.

10
00:00:42,010 --> 00:00:50,430
Cocoa touch class and it is a subclass of table view cell and the class is going to be called Channel.

11
00:00:50,520 --> 00:01:01,640
So you can press next and create and he can do is go ahead and go to the main storyboard and let's set

12
00:01:01,640 --> 00:01:07,610
the class of our prototype cell too.

13
00:01:07,680 --> 00:01:11,340
And let's just wait for the background to kick in here.

14
00:01:11,340 --> 00:01:12,560
There we go.

15
00:01:12,560 --> 00:01:16,830
All right so with the cell selected it to make this little bit bigger.

16
00:01:16,830 --> 00:01:19,960
Table B-cell selected open up our right pain.

17
00:01:20,360 --> 00:01:26,020
And look at our identity inspector and change the class to channel cell.

18
00:01:26,300 --> 00:01:30,900
And then here in the attributes inspector we need to give it a Rieves identifiers who are going to say

19
00:01:31,250 --> 00:01:32,020
channel.

20
00:01:32,090 --> 00:01:41,270
So I'm going to say that and then open up our assistant editor with the channel self-selected so holding

21
00:01:41,270 --> 00:01:49,330
option I'm going to click on channel Soldat Swift and then we can drag into our channel cell and Iby

22
00:01:49,370 --> 00:01:54,490
outlet for our channel label.

23
00:01:54,560 --> 00:02:01,630
OK so we're going to hold control and drag in here and this I'm going to call channel name when I see

24
00:02:01,640 --> 00:02:02,530
it.

25
00:02:03,290 --> 00:02:09,230
And then let's go ahead and go back to our standard editor and go into our channel so swift and let's

26
00:02:09,230 --> 00:02:11,540
go ahead and take a look at our mockups.

27
00:02:11,570 --> 00:02:15,710
So if we come down here let's see right here OK.

28
00:02:15,710 --> 00:02:22,580
So it doesn't show here but when we select it we want to be able to have a light white background so

29
00:02:22,580 --> 00:02:29,660
showing that it's selected and then looks pretty plain how we got to do is make sure that we pass into

30
00:02:29,870 --> 00:02:32,120
our configure cell function the the right name.

31
00:02:32,120 --> 00:02:35,090
So let's go ahead and do that.

32
00:02:35,090 --> 00:02:38,690
So first off first go into the set selected.

33
00:02:38,780 --> 00:02:44,720
OK so you see here it comes with a function called Set selected and it says here configure the view

34
00:02:44,720 --> 00:02:46,620
for the selected state.

35
00:02:46,620 --> 00:02:53,180
So basically that means what does the view look like for any of the rows in the table you that are selected.

36
00:02:53,300 --> 00:02:59,780
And so what we're doing is we're in the same if selected then we're going to set the background layer

37
00:02:59,780 --> 00:03:03,630
to a white with a low opacity.

38
00:03:03,650 --> 00:03:13,640
So I say itself that there that background color is equal to you by color and the color that we're going

39
00:03:13,640 --> 00:03:23,600
to do we're going to do a let's see here and this guy right here so a white and Alpha souces initialises

40
00:03:23,600 --> 00:03:28,200
and returns a color object using the specified opacity and grayscale values.

41
00:03:28,260 --> 00:03:30,500
They didn't actually selected.

42
00:03:31,170 --> 00:03:33,990
Let's go back down here again right here.

43
00:03:34,110 --> 00:03:34,550
OK.

44
00:03:34,750 --> 00:03:41,090
So the white We're going to set at one the highest white value and the alpha are going to sit at a pretty

45
00:03:41,090 --> 00:03:50,300
low opacity so it will be quite transparent at 0.2 and then else if it's not selected then we are going

46
00:03:50,300 --> 00:04:04,380
to say self-taught layer dot background color is equal to you by color dot clear dot C-g color.

47
00:04:04,670 --> 00:04:05,270
All right there we go.

48
00:04:05,280 --> 00:04:07,390
So now we have that taken care of.

49
00:04:07,400 --> 00:04:14,420
So whenever we have a channel selected then we'll have a nice indicator that is being selected to look

50
00:04:14,420 --> 00:04:15,100
really good.

51
00:04:15,470 --> 00:04:16,770
So now we've got to do our.

52
00:04:17,060 --> 00:04:17,940
What do we have going on here.

53
00:04:18,000 --> 00:04:21,560
Oh I forgot to set this as a C.G. color.

54
00:04:21,560 --> 00:04:23,030
There you go.

55
00:04:23,030 --> 00:04:25,590
All right so now we're going to do our configure cell function.

56
00:04:25,700 --> 00:04:37,340
So when I say configure cell can we are going to pass into this function a channel object to say channel

57
00:04:37,370 --> 00:04:39,920
and channel.

58
00:04:40,480 --> 00:04:42,260
All right and what are we going to do with this channel.

59
00:04:42,260 --> 00:04:49,000
Well we're just going to grab the title from it and set our IP outlet for the channel name to that title.

60
00:04:49,000 --> 00:04:58,930
So when I say let a title equal channel dot channel title and then just to be safe we are going to use

61
00:04:58,930 --> 00:05:07,120
the no coalescing to say if there if you can't find the value there then just return it from the string.

62
00:05:07,310 --> 00:05:16,620
And then we can say channel name oh I just realized that I accidently drug over and lay out constraint

63
00:05:16,640 --> 00:05:17,580
thing.

64
00:05:17,910 --> 00:05:23,110
So let me delete this hand real quick.

65
00:05:23,190 --> 00:05:30,060
Going to delete this ibl it was a good chance to show you how to delete Alice and the actions that you

66
00:05:30,060 --> 00:05:31,730
may accidentally add.

67
00:05:31,830 --> 00:05:35,970
So you can delete it from right here but then make up storyboard.

68
00:05:36,000 --> 00:05:43,980
You also need to be sure to delete it here so then right here for we right click then you'll see right

69
00:05:43,980 --> 00:05:44,680
here.

70
00:05:44,860 --> 00:05:51,430
There's a little yellow warning and so you can get rid of that by clicking right there like.

71
00:05:51,440 --> 00:05:52,030
There we go.

72
00:05:52,290 --> 00:05:56,390
So now I'm going to open up with option.

73
00:05:57,030 --> 00:06:04,010
I'm going to open up the channel sell the so that we can actually set up the correct ballots.

74
00:06:04,040 --> 00:06:07,380
This time I'm going to make sure I'm going to grab it from right here this label right here.

75
00:06:07,590 --> 00:06:12,670
So I'm going to drag over and say channel name.

76
00:06:12,720 --> 00:06:18,440
There we go make sure that's They label this time I'm going to go back to our standard editor go into

77
00:06:18,450 --> 00:06:28,270
channel sell and now we can say channel name dot text is equal to title.

78
00:06:28,560 --> 00:06:29,100
All right.

79
00:06:29,140 --> 00:06:32,440
And that's all we need for for now in the can for yourself.

80
00:06:32,440 --> 00:06:34,090
I'm going to say this.

81
00:06:34,540 --> 00:06:36,250
And now we're able.

82
00:06:36,280 --> 00:06:39,700
Now we're ready to go into our channel visi.

83
00:06:39,910 --> 00:06:45,660
And you start to really cranking out those table view methods that we need.

84
00:06:45,840 --> 00:06:49,840
But first off looks like we need an outlet and then we'll put in the the protocols.

85
00:06:49,840 --> 00:06:50,750
So holding option.

86
00:06:50,800 --> 00:06:58,650
Again I'm going to click on I mean just to open our assistant editor and then clicking on table view

87
00:06:58,840 --> 00:07:05,070
I am dragging control dragging over and releasing and naming this table view.

88
00:07:05,270 --> 00:07:11,540
And this is an outlet and connected and go back to our standard editor.

89
00:07:11,670 --> 00:07:13,980
And here we go we're going to add our protocols.

90
00:07:13,980 --> 00:07:21,420
Remember we have to conform to your table view delegate and you table view data datasource and then

91
00:07:21,420 --> 00:07:30,240
here in view did load under the super we're going to say table view that delegate is equal to self and

92
00:07:30,360 --> 00:07:35,260
table view dot data sources equal to self.

93
00:07:35,280 --> 00:07:42,520
So we got that down and now it's going to tell us that we need to conform to these protocols right here.

94
00:07:42,960 --> 00:07:44,010
So let's do that.

95
00:07:44,290 --> 00:07:45,800
Down here at the bottom.

96
00:07:45,900 --> 00:07:48,700
What are the methods that we need do you remember.

97
00:07:48,750 --> 00:07:54,660
We need to know how many sections that are we need to know how many rows are in that section and we

98
00:07:54,660 --> 00:07:59,530
need to have a function that sets up the cells for us.

99
00:07:59,790 --> 00:08:05,170
So that top one is called cell for Rove at index path.

100
00:08:05,250 --> 00:08:10,770
Go and see right here right off the bat since we already went through the work of setting up the custom

101
00:08:11,460 --> 00:08:16,530
cell and the reuse identifier and everything we can just jump right into and we can say if that cell

102
00:08:16,560 --> 00:08:26,220
is equal to table view dot dequeue reusable cell with identifier and that identifier I remember Whoops

103
00:08:27,240 --> 00:08:37,030
I don't like how it doesn't know that identifier is channel so for index path.

104
00:08:37,520 --> 00:08:46,700
Now we're in a cast that has a channel so I'm going to close this bottom pain and give some more room

105
00:08:46,700 --> 00:08:47,630
down here.

106
00:08:47,990 --> 00:08:56,610
OK then we are going to create a variable for the specific channel that we want to pass into it.

107
00:08:56,630 --> 00:09:05,210
We're gonna say left channel and this channel is going to come from our message service array of channels.

108
00:09:05,270 --> 00:09:05,770
OK.

109
00:09:06,050 --> 00:09:12,980
So we're going to say let channel equal message service instance that channels and the specific channel

110
00:09:12,980 --> 00:09:18,800
is which ever channel corresponds to the index path that we are currently in the table view.

111
00:09:18,890 --> 00:09:22,810
And so that's going to be index path that Roe.

112
00:09:23,210 --> 00:09:27,420
All right and then we're going to call the configure cell to say so.

113
00:09:27,650 --> 00:09:28,150
Whoops.

114
00:09:28,220 --> 00:09:35,670
So that configure cell and we're going to pass in that channel right there and then we're going to return.

115
00:09:35,790 --> 00:09:43,870
So it for some reason we are unable to return our dequeue a cell.

116
00:09:43,950 --> 00:09:52,300
We're going to just return an empty UI table view so.

117
00:09:52,320 --> 00:09:54,330
All right that should do it.

118
00:09:54,330 --> 00:10:01,710
Next up we need to know how many sections and number of rows in that section and say number of sections

119
00:10:01,740 --> 00:10:03,620
and we're just one one.

120
00:10:04,050 --> 00:10:13,890
And then number of rows in section and that is going to be however many channels there are in the message

121
00:10:14,190 --> 00:10:20,180
service message sure is that instance dot Channel's dot count.

122
00:10:20,380 --> 00:10:20,610
All right.

123
00:10:20,610 --> 00:10:22,180
Perfect.

124
00:10:23,160 --> 00:10:26,600
And I think that's pretty much all we need for the for the table.

125
00:10:26,600 --> 00:10:27,510
We're going to build this.

126
00:10:27,570 --> 00:10:32,960
If we missed anything and we've got to build successful so that's good.

127
00:10:33,300 --> 00:10:36,150
And I'm going to go ahead and run this right now we're not going to.

128
00:10:36,180 --> 00:10:41,790
We're still not going to see anything because we don't we haven't called the function to download the

129
00:10:41,790 --> 00:10:43,560
cells or download the channels yet.

130
00:10:43,560 --> 00:10:48,680
I don't think actually maybe we do we still have that one inch channel ABC.

131
00:10:48,720 --> 00:10:50,820
Are we downloading them in channel seeing maybe

132
00:10:54,810 --> 00:10:55,180
or.

133
00:10:55,210 --> 00:10:55,880
I'm sorry.

134
00:10:55,930 --> 00:10:59,590
See that's what we do don't know the chad.

135
00:10:59,770 --> 00:11:01,540
So this might actually work.

136
00:11:03,780 --> 00:11:06,680
And see here can come over here and oh hey yeah.

137
00:11:06,690 --> 00:11:07,830
So there we go.

138
00:11:07,830 --> 00:11:16,440
So I had forgotten that we had this function here in the chat DC which was to to actually download the

139
00:11:16,440 --> 00:11:17,580
channels.

140
00:11:17,580 --> 00:11:18,650
And so there you go.

141
00:11:18,660 --> 00:11:25,730
And if we select one that's not quite what we want for the for that view.

142
00:11:26,160 --> 00:11:28,260
But I mean yeah it's pretty close.

143
00:11:28,260 --> 00:11:30,270
Let's go and check out what's wrong here.

144
00:11:30,270 --> 00:11:31,920
I know what I forgot.

145
00:11:32,040 --> 00:11:39,510
Back here in the story board if you select a table and then on your channels sell here under selection

146
00:11:39,720 --> 00:11:41,100
this should be nutten.

147
00:11:41,320 --> 00:11:51,750
And so let's go ahead and run that again and click over here and our Yeah it's well look snazzy Alex.

148
00:11:51,840 --> 00:11:53,850
Real good.

149
00:11:53,850 --> 00:11:56,910
Very very cool.

150
00:11:56,910 --> 00:12:00,310
All right so it looks like we need a couple of things we need to hash tag.

151
00:12:00,310 --> 00:12:03,660
And I think this guy actually needs some constraints.

152
00:12:03,980 --> 00:12:07,250
He doesn't already have constraints here on the label

153
00:12:09,790 --> 00:12:10,670
label looks.

154
00:12:10,830 --> 00:12:12,510
Constraints look good actually.

155
00:12:12,520 --> 00:12:12,740
All right.

156
00:12:12,760 --> 00:12:18,200
So let's go back to our channel sell here and let's get right here.

157
00:12:18,490 --> 00:12:26,390
We need to do some string interpolation so hash tag and then title.

158
00:12:26,410 --> 00:12:27,030
There we go.

159
00:12:27,220 --> 00:12:28,810
All right on that.

160
00:12:29,650 --> 00:12:30,560
Right.

161
00:12:30,600 --> 00:12:32,410
And there we go.

162
00:12:32,430 --> 00:12:34,150
All right.

163
00:12:34,520 --> 00:12:35,930
It looks real good.

164
00:12:38,270 --> 00:12:39,910
He is happy with that.

165
00:12:39,930 --> 00:12:41,860
Feeling pretty good.

166
00:12:41,970 --> 00:12:42,870
I think it looks good.

167
00:12:42,870 --> 00:12:45,540
All right so congratulations.

168
00:12:45,610 --> 00:12:47,560
It's starting to look like a chat up.

169
00:12:47,780 --> 00:12:49,310
You know don't got much right here.

170
00:12:49,320 --> 00:12:55,110
But I mean if you open this up and compare that to like slack I mean this is looking pretty good and

171
00:12:55,110 --> 00:12:57,510
we have our profile.

172
00:12:57,600 --> 00:13:02,520
We have you know pretty much we have we're able to log in we're able to create users.

173
00:13:02,580 --> 00:13:04,300
Now we're showing our channels.

174
00:13:04,300 --> 00:13:09,420
Yes so we're making great progress and it's only going to get better and better from here on out.

175
00:13:09,420 --> 00:13:11,490
So I hope you're excited for that.

176
00:13:11,510 --> 00:13:19,410
And yes so we're going to finish off here by adding and committing and we said get at DOT get commit

177
00:13:20,070 --> 00:13:21,080
dash am.

178
00:13:21,090 --> 00:13:23,820
This has been less than 20.

179
00:13:24,570 --> 00:13:27,990
And I'll see you all in the next one.