1

00:00:07,760 --> 00:00:14,010

Everyone welcome back Johnny be here with the COM and we're going to continue on with our chat app.



2

00:00:14,100 --> 00:00:21,610

And the last lesson we created this function that retrieves all of the channels from our API.



3

00:00:21,860 --> 00:00:23,660

And so now let's actually do something with it.



4

00:00:23,660 --> 00:00:30,500

All right we're going to we're going to actually display in our table view in the channel ABC controller



5

00:00:31,010 --> 00:00:31,670

these channels right.



6

00:00:31,680 --> 00:00:33,050

So this gets started.



7

00:00:33,050 --> 00:00:37,180

First thing we're going to do is we're going to start out with our custom Selar.



8

00:00:37,220 --> 00:00:43,190

So here in the view I'm going to right click and say new file and we're going to do it Ko-Ko touch class



9

00:00:44,940 --> 00:00:50,490

and it is a subclass of table view cell and the class is going to be called Channel.



10

00:00:50,580 --> 00:00:56,580

So you can impress next and create.



11

00:00:56,600 --> 00:00:57,690

Here we go.



12

00:00:57,990 --> 00:01:07,950

Let's go ahead and go to the main storyboard and let's sit the class of our prototype cell to let's



13

00:01:08,040 --> 00:01:11,490

just wait for the background to kick in here.



14

00:01:11,500 --> 00:01:12,630

There we go.



15

00:01:12,630 --> 00:01:16,920

All right so with the table view cell selected it would make this a little bit bigger.



16

00:01:16,930 --> 00:01:20,420

Table B-cell selected open up our right pain.



17

00:01:20,430 --> 00:01:26,020

And look at our identity inspector and change the class to channel so.



18

00:01:26,340 --> 00:01:30,350

And then here in the attributes inspector we need to give it a reverse identifiers.



19

00:01:30,360 --> 00:01:32,060

We're going to see a channel.



20

00:01:32,130 --> 00:01:41,340

So I am going to say that and then open up our assistant editor with the channel self-selected so holding



21

00:01:41,340 --> 00:01:49,400

option I'm going to click on channel Soldat Swift and then we can drag into our channel cell and the



22

00:01:49,420 --> 00:01:54,540

outlet for our channel label.



23

00:01:54,610 --> 00:01:58,030

OK so we're going to hold control and drag in here.



24

00:01:58,060 --> 00:02:02,560

And this I'm going to call channel name when I see it.



25

00:02:03,340 --> 00:02:08,680

And then let's go ahead and go back to our standard editor and go into our channel so swift.



26

00:02:08,980 --> 00:02:11,580

And let's go ahead and take a look at our mockups.



27

00:02:11,620 --> 00:02:15,280

So if we come down here let's see right here.



28

00:02:15,540 --> 00:02:15,760

OK.



29

00:02:15,760 --> 00:02:22,630

So it doesn't show here but when we select it we want to be able to have a light white background so



30

00:02:22,630 --> 00:02:29,710

showing that it's selected and then looks pretty plain how we got to do is make sure that we pass into



31

00:02:29,920 --> 00:02:32,170

our configure cell function the the right name.



32

00:02:32,170 --> 00:02:34,770

So let's go ahead and do that.



33

00:02:35,140 --> 00:02:38,680

So first off us go into the set selected.



34

00:02:38,830 --> 00:02:43,300

OK so you see here it comes with a function called Set selected.



35

00:02:43,300 --> 00:02:46,690

And it says here configure the view for the selected state.



36

00:02:46,690 --> 00:02:53,120

So basically that means what does the view look like for any of the rows in the table you that are selected.



37

00:02:53,350 --> 00:02:59,830

And so what we're doing is we're in the same if selected then we're going to set the background layer



38

00:02:59,830 --> 00:03:13,270

to a white with a low opacity itself that layer that background color is equal to by color and the color



39

00:03:13,270 --> 00:03:17,820

that we're going to do we're going to do a let's see here.



40

00:03:18,230 --> 00:03:25,570

This guy right here so a white and alpha so initialises and returns a color object using the specified



41

00:03:25,570 --> 00:03:28,200

opacity and grayscale values.



42

00:03:28,300 --> 00:03:34,060

They didn't actually selected this town here again right here.



43

00:03:34,180 --> 00:03:34,590

OK.



44

00:03:34,810 --> 00:03:41,140

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,140 --> 00:03:45,080

low opacity so it will be quite transparent at zero point two.



46

00:03:45,640 --> 00:03:58,000

And then else if it's not selected then we are going to say self-taught layer DOD background color is



47

00:03:58,030 --> 00:04:04,280

equal to you by color dot clear dot C-g color.



48

00:04:04,720 --> 00:04:05,350

All right there we go.



49

00:04:05,350 --> 00:04:07,440

So now we have that taken care of.



50

00:04:07,450 --> 00:04:14,260

So whenever we have a channel selected then we'll have a nice indicator that it's being selected to



51

00:04:14,260 --> 00:04:15,130

look really good.



52

00:04:15,550 --> 00:04:17,970

So now we've got to do our what do we have going on here.



53

00:04:18,040 --> 00:04:21,610

Oh I forgot to set this as a C-g color.



54

00:04:21,610 --> 00:04:23,110

There you go.



55

00:04:23,110 --> 00:04:25,740

All right so now we're going to do our configure cell function.



56

00:04:25,860 --> 00:04:37,390

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,420 --> 00:04:39,460

and channel.



58

00:04:40,510 --> 00:04:42,310

All right and what are we going to do with this channel.



59

00:04:42,310 --> 00:04:48,700

Well we're just going to grab the title from it and set our Iby outlet for the channel name to that



60

00:04:48,700 --> 00:04:49,060

title.



61

00:04:49,060 --> 00:04:58,720

So when I say let the title equal channel dot channel title and then just to be safe we are going to



62

00:04:58,720 --> 00:05:06,970

use the no coalescing to say if there if you can't find the value there then just return it empty string



63

00:05:07,420 --> 00:05:16,670

and then we can say channel name oh I just realized that I accidently drug over and lay out constraint



64

00:05:16,690 --> 00:05:17,580

doing it.



65

00:05:17,990 --> 00:05:28,040

So let me delete this hand real quick and delete this IPL it was a good chance to show you how to delete



66

00:05:28,590 --> 00:05:31,760

Alice and the actions that you may accidentally add.



67

00:05:31,880 --> 00:05:36,030

So you can delete it from right here but then make up storyboard.



68

00:05:36,050 --> 00:05:44,030

You also need to be sure to delete it here so then right here if we right click then you'll see right



69

00:05:44,030 --> 00:05:44,720

here.



70

00:05:44,800 --> 00:05:51,340

There is a little yellow warning and so you can get rid of that by clicking right there.



71

00:05:51,350 --> 00:05:52,080

I like it there we go.



72

00:05:52,340 --> 00:05:56,430

So now I'm going to open up with option.



73

00:05:57,070 --> 00:06:03,940

I'm going to open up the channel sell use so that we can actually set up the correct ballots.



74

00:06:04,080 --> 00:06:08,450

This time I'm going to make sure I'm going to grab it from right here this label right here so I'm going



75

00:06:08,450 --> 00:06:12,710

to drag over and say channel name.



76

00:06:13,080 --> 00:06:19,750

So much for that so I label this time I'm going to go back to our standard editor go into channel sell.



77

00:06:20,110 --> 00:06:31,360

And now we can say channel name dot text is equal to title it right and that's all we need for for now



78

00:06:31,360 --> 00:06:34,180

and you can feed yourself I'm going to say this.



79

00:06:34,600 --> 00:06:43,930

And now we're able now we're ready to go into our channel Visi and start to really cranking out those



80

00:06:43,930 --> 00:06:45,900

table view methods that we need.



81

00:06:45,950 --> 00:06:49,800

First off looks like we need an outlet and then we'll put in the protocols.



82

00:06:49,870 --> 00:06:55,030

So holding option again I'm going to click on I mean just on the board to open our assistant editor



83

00:06:56,830 --> 00:07:04,610

and then clicking on table view I am dragging control dragging over and releasing and naming this table



84

00:07:04,610 --> 00:07:05,160

view.



85

00:07:05,320 --> 00:07:11,570

And this is an outlet and connected and go back to our standard editor.



86

00:07:11,720 --> 00:07:14,030

And here we go we're going to add our protocols.



87

00:07:14,030 --> 00:07:20,960

Remember we have to conform to Table View delegate and table view data source.



88

00:07:21,230 --> 00:07:27,470

And then here in view to load under the super we're going to say table view dot delegate is equal to



89

00:07:27,680 --> 00:07:35,300

self and table view dot data sources to self.



90

00:07:35,330 --> 00:07:42,800

So we've got that down and now it's going to tell us that we need to conform to these protocols here.



91

00:07:43,010 --> 00:07:44,040

So let's do that.



92

00:07:44,210 --> 00:07:45,850

I'm done here at the bottom.



93

00:07:45,950 --> 00:07:48,710

What are the methods that we need to remember.



94

00:07:48,800 --> 00:07:54,710

We need to know how many sections that are we need to know how many rows are in that section and we



95

00:07:54,710 --> 00:07:59,650

need to have a function that sets up the cells for us all right.



96

00:07:59,840 --> 00:08:05,110

So that top one is called cell for Rove at index path.



97

00:08:05,110 --> 00:08:09,890

There we go and see right here right off the basons we already went through the work of setting up the



98

00:08:10,160 --> 00:08:15,470

custom cell and the reuse identifier and everything we can just jump right into it and we can say if



99

00:08:15,470 --> 00:08:25,840

that cell is equal to Table View dot dequeue reusable cell with identifier and that identifier remember



100

00:08:25,940 --> 00:08:32,090

Whoops I don't like how it doesn't know that identifier is channel.



101

00:08:32,120 --> 00:08:45,580

So for index path now we're in a cast that has a channel so I'm going to close this bottom pain and



102

00:08:45,670 --> 00:08:47,680

give us some more room down here.



103

00:08:48,040 --> 00:08:56,670

OK then we are going to create a variable for the specific channel that we want to pass into it.



104

00:08:56,680 --> 00:09:05,260

We're gonna say left channel and this channel is going to come from our message service array of channels.



105

00:09:05,270 --> 00:09:05,780

OK.



106

00:09:06,130 --> 00:09:13,030

So we're going to say let channel equal message service instance dot channels and the specific channel



107

00:09:13,060 --> 00:09:18,840

is which ever channel corresponds to the index path that we are currently in the table view.



108

00:09:18,940 --> 00:09:22,820

And so that's going to be index path that Roe.



109

00:09:23,260 --> 00:09:27,350

All right and then we're going to call the configure cell and say so.



110

00:09:28,170 --> 00:09:34,660

So that configure cell and we're going to pass in that channel right there and then we are going to



111

00:09:34,660 --> 00:09:35,720

return.



112

00:09:35,840 --> 00:09:43,890

So it for some reason we are unable to return our dequeue a cell.



113

00:09:44,000 --> 00:09:50,610

We're going to just return an empty UI table view.



114

00:09:50,650 --> 00:09:54,370

So all right that should do it.



115

00:09:54,380 --> 00:10:01,130

Next up we need to know how many sections and number of rows in that section sewing and say number of



116

00:10:01,130 --> 00:10:11,810

sections and we're just one one and then a number of rows in section and that is going to be however



117

00:10:11,810 --> 00:10:14,970

many channels there are in the message service so.



118

00:10:15,000 --> 00:10:20,380

Message is that instance dot Channel's dot count.



119

00:10:20,410 --> 00:10:20,660

All right.



120

00:10:20,660 --> 00:10:22,130

Perfect.



121

00:10:23,210 --> 00:10:26,640

And I think that's pretty much all we need for the for the table.



122

00:10:26,650 --> 00:10:32,980

We're going to build this see if we missed anything and we've got to build successful so that's good.



123

00:10:33,350 --> 00:10:36,190

And I'm going to go ahead and run this right now we're not going to.



124

00:10:36,260 --> 00:10:41,870

We're still not going to see anything because we don't we haven't called the function to download the



125

00:10:41,870 --> 00:10:43,610

cells or download the channels yet.



126

00:10:43,610 --> 00:10:48,740

I don't think actually maybe we do we still have that channel ABC.



127

00:10:48,770 --> 00:10:50,860

Are we downloading them in channel be seeing maybe



128

00:10:54,870 --> 00:10:55,930

or I'm sorry.



129

00:10:55,990 --> 00:10:59,010

See that's what we do don't know.



130

00:10:59,130 --> 00:11:01,630

Chad AVC So this might actually work.



131

00:11:03,780 --> 00:11:06,730

And see here you can come over here and oh hey yeah.



132

00:11:06,740 --> 00:11:07,670

So there we go.



133

00:11:07,880 --> 00:11:16,340

So I had forgotten that we had this function here in the chat you see which was to to actually download



134

00:11:16,340 --> 00:11:17,500

the channels.



135

00:11:17,630 --> 00:11:18,700

And so there you go.



136

00:11:18,710 --> 00:11:25,760

And if we select one that's not quite what we want for the for that view.



137

00:11:26,210 --> 00:11:28,310

But I mean yeah it's pretty close.



138

00:11:28,310 --> 00:11:30,310

Let's go and check out what's wrong here.



139

00:11:30,320 --> 00:11:31,950

I know what I forgot.



140

00:11:32,090 --> 00:11:39,560

Back here in the story board if you select a table and then on your channels sell here under selection



141

00:11:39,770 --> 00:11:48,430

this should be nutten And let's go ahead and run that again and click over here and.



142

00:11:48,520 --> 00:11:49,640

Yeah.



143

00:11:49,920 --> 00:11:53,900

It's look snazzy that looks real good.



144

00:11:53,900 --> 00:11:56,960

Very very cool.



145

00:11:56,960 --> 00:11:57,280

All right.



146

00:11:57,370 --> 00:12:00,350

So looks like we need a couple of things we need to hash tag.



147

00:12:00,350 --> 00:12:03,630

And I think this guy actually needs some constraints.



148

00:12:04,040 --> 00:12:07,300

He doesn't already have constraints here on the label



149

00:12:09,840 --> 00:12:12,560

label looks constraints look good actually.



150

00:12:12,570 --> 00:12:12,800

All right.



151

00:12:12,810 --> 00:12:18,320

So let's go back to our channel cell and let's get right here.



152

00:12:18,540 --> 00:12:26,450

We need to do some string interpolation so hash tag and then title.



153

00:12:26,460 --> 00:12:27,220

There we go.



154

00:12:27,220 --> 00:12:30,630

All right on that right.



155

00:12:30,660 --> 00:12:32,390

And there we go.



156

00:12:32,670 --> 00:12:36,010

Right now it looks real good.



157

00:12:38,310 --> 00:12:39,930

He is happy with that.



158

00:12:40,000 --> 00:12:41,870

Feeling pretty good.



159

00:12:42,020 --> 00:12:42,820

I think it looks good.



160

00:12:42,950 --> 00:12:45,270

All right so congratulations.



161

00:12:45,700 --> 00:12:47,480

It's starting to look like a chat up.



162

00:12:47,840 --> 00:12:53,990

You know don't got much right here but I mean if you open this up and compare that to like slack I mean



163

00:12:53,990 --> 00:12:57,540

this is looking pretty good and we have our profile.



164

00:12:57,650 --> 00:13:02,590

We have you know pretty much we have we're able to log in we're able to create users.



165

00:13:02,630 --> 00:13:04,440

Now we're showing our channels.



166

00:13:04,540 --> 00:13:09,470

So we're making great progress and it's only going to get better and better from here on out.



167

00:13:09,470 --> 00:13:11,520

So hope you're excited for that.



168

00:13:11,560 --> 00:13:17,040

And yes so we're going to finish off here by adding and committing.



169

00:13:17,120 --> 00:13:21,120

We said get dot get commit dash em.



170

00:13:21,140 --> 00:13:23,920

This has been less than 20.



171

00:13:24,620 --> 00:13:27,970

And I'll see you all in the next one.