1

00:00:07,540 --> 00:00:08,680

You know how you all doing.



2

00:00:08,680 --> 00:00:10,740

Joining me here with those slopes dot com.



3

00:00:10,750 --> 00:00:11,740

Welcome back.



4

00:00:11,830 --> 00:00:18,040

And we're going to do some cool stuff in this lesson in the last video we wrote our functions so that



5

00:00:18,040 --> 00:00:25,270

we can fetch our messages from our channel on our API but we don't have any messages yet or at least



6

00:00:25,270 --> 00:00:28,200

you guys don't because you're doing your API fresh.



7

00:00:28,420 --> 00:00:30,780

But in this lesson we are going to fix that.



8

00:00:30,780 --> 00:00:34,840

We're going to send our first message so I hope you're excited for that.



9

00:00:35,050 --> 00:00:36,800

And let's get going.



10

00:00:36,850 --> 00:00:38,630

First thing we're going to do is get are you ready.



11

00:00:38,650 --> 00:00:45,350

We're going to jump into main story board and come on down here to our chat.



12

00:00:45,360 --> 00:00:52,820

P.S. One of my right panel here and we are going to put in some text fields and some buttons.



13

00:00:52,810 --> 00:00:53,220

All right.



14

00:00:53,410 --> 00:00:57,190

So if we check out our mockups



15

00:01:04,830 --> 00:01:06,350

done here we have a text field.



16

00:01:06,360 --> 00:01:08,780

And when we are typing I believe.



17

00:01:08,790 --> 00:01:10,840

Let's see if we have a yes.



18

00:01:10,850 --> 00:01:14,040

When we're typing then this button is going to show up.



19

00:01:14,040 --> 00:01:14,460

All right.



20

00:01:14,670 --> 00:01:17,860

So let's let's get to it pretty easy.



21

00:01:18,030 --> 00:01:24,270

The other thing I want to show you is that when we're at when we're typing the entire view is shifted



22

00:01:24,270 --> 00:01:25,820

up so that it doesn't.



23

00:01:25,860 --> 00:01:29,760

So it's not covered by the keyboard or anything so we won't have that problem the entire view is shifted



24

00:01:29,760 --> 00:01:31,860

up with the keyboard.



25

00:01:31,860 --> 00:01:37,100

All right so here in storyboard let's put in a text field.



26

00:01:37,380 --> 00:01:43,770

So I'm just going to try this in down here over in the corner I'm going to constrain it to say zero



27

00:01:43,770 --> 00:01:51,740

from the left right from the bottom and zero from the right I'm going to set the height to 40.



28

00:01:52,260 --> 00:01:57,230

Add four constraints and then we're going to need a button.



29

00:01:57,540 --> 00:02:01,900

So I'm just going to search for a button and drag a button on here.



30

00:02:02,310 --> 00:02:14,750

Get rid of the title and set the image to send it go and zooming you are



31

00:02:17,590 --> 00:02:20,260

in we're going to set some constraints.



32

00:02:20,260 --> 00:02:29,740

This is going to be heat from the right and then I'm going to control and drag to the text field so



33

00:02:29,740 --> 00:02:31,960

that we can say center vertically.



34

00:02:32,110 --> 00:02:32,380

Go.



35

00:02:32,470 --> 00:02:36,330

So now that's also constrained.



36

00:02:37,030 --> 00:02:41,660

All right so that's pretty much all we need as far as UI elements.



37

00:02:41,660 --> 00:02:47,400

Let's go ahead and modify this text fill a little bit over and change the color to a dark gray color.



38

00:02:47,510 --> 00:02:55,670

The font is of course custom but it can new That's fine and is put in a placeholder text we can say



39

00:02:56,120 --> 00:02:57,820

message.



40

00:02:57,830 --> 00:02:58,750

There we go.



41

00:02:59,090 --> 00:02:59,710

All right.



42

00:03:00,050 --> 00:03:01,610

So that's that's looking good.



43

00:03:01,610 --> 00:03:03,100

I think that's all we need now.



44

00:03:03,120 --> 00:03:08,010

Go ahead and open up our assistant editor with chat visi.



45

00:03:08,120 --> 00:03:09,120

Where are we at right here.



46

00:03:09,120 --> 00:03:10,020

Chad this got swift



47

00:03:12,800 --> 00:03:16,640

we'll close this right pain and come down here.



48

00:03:16,790 --> 00:03:21,590

So we need an outlet for the text field and an action for the button.



49

00:03:21,910 --> 00:03:26,110

So make sure you have the textfield selected and not one of the constraints.



50

00:03:26,140 --> 00:03:28,560

And I'm going to control direct from here.



51

00:03:28,680 --> 00:03:33,910

So I'm going to say message text box.



52

00:03:34,030 --> 00:03:34,520

OK.



53

00:03:34,750 --> 00:03:36,950

That's can be a UI textfield.



54

00:03:37,040 --> 00:03:40,890

And then for the button we need an action.



55

00:03:41,450 --> 00:03:42,820

And now go ahead and



56

00:03:46,820 --> 00:03:51,560

put that right here under our update with channel.



57

00:03:51,590 --> 00:03:59,040

And again make sure you have the button selected control drag when it called the Send Message pressed.



58

00:03:59,360 --> 00:04:02,830

OK and that is an action going to connect that.



59

00:04:03,350 --> 00:04:06,780

And that's all that's all we need here.



60

00:04:06,800 --> 00:04:09,060

So we're ready to send a message.



61

00:04:09,530 --> 00:04:11,210

But how do we do that.



62

00:04:11,280 --> 00:04:13,720

We're going to need to create a couple of functions.



63

00:04:13,730 --> 00:04:16,670

So let's jump over to our socket service we have.



64

00:04:17,270 --> 00:04:23,360

Just like adding channels is handled by the sockets are hiding of messages is also going to be handled



65

00:04:23,360 --> 00:04:25,140

by our web socket.



66

00:04:25,280 --> 00:04:31,250

So we were trying to send a message that message is going to travel to the API with its all of its message



67

00:04:31,250 --> 00:04:32,220

information.



68

00:04:32,270 --> 00:04:38,150

The app is going to receive that message and construct a new message object and then send that information



69

00:04:38,150 --> 00:04:43,340

back to our app as well as any other apps that happen to be connected at that point in time.



70

00:04:43,340 --> 00:04:44,840

All right so we're going to need Hey.



71

00:04:44,960 --> 00:04:46,430

Message function.



72

00:04:46,790 --> 00:04:55,370

Let's go ahead and open up our API code and if we come down here to where new message is detected.



73

00:04:55,670 --> 00:04:57,920

So the event is called new message.



74

00:04:58,040 --> 00:05:07,070

And then the information that we need to pass to it is message body user ID channel ID user name user



75

00:05:07,070 --> 00:05:09,540

Avatar and user Avatar color.



76

00:05:09,860 --> 00:05:13,630

So the API is going to detect a new message event.



77

00:05:14,190 --> 00:05:20,570

Get these parameters create a new message and then save it to the database and then you get back out



78

00:05:21,050 --> 00:05:26,650

a message with these parameters and that is going to be a message created.



79

00:05:26,660 --> 00:05:33,450

All right so we know what what parameters we need to send to our function.



80

00:05:33,580 --> 00:05:39,220

Lets say funk and message Okay.



81

00:05:39,330 --> 00:05:50,400

And so we need to pass into this function message body thats going to be a strong user id thats going



82

00:05:50,400 --> 00:06:00,110

to be a string channel ID and thats going to be a string and then we are going to have a completion



83

00:06:00,120 --> 00:06:12,610

handlers so I say completion and then at scaping and completion handler we go all right.



84

00:06:12,720 --> 00:06:19,330

And then just so I don't have to write user data service for instance a whole bunch of times I'm going



85

00:06:19,330 --> 00:06:29,200

to say user or user or equal user data service that instance and you'll see right here in just a second.



86

00:06:29,830 --> 00:06:35,370

So now we're going to do the socket document was going to say socket Umit.



87

00:06:36,010 --> 00:06:37,020

And this is the one we want.



88

00:06:37,030 --> 00:06:43,810

And even with items that we can pass so the event we look at it in the API code the event is called



89

00:06:44,110 --> 00:06:51,740

new message and the items are going to be the message body.



90

00:06:51,740 --> 00:07:03,130

This is passed in from the function user ID Channel D and then we have some that we need to just get



91

00:07:03,130 --> 00:07:19,500

from the user data service which is user name user dot avatar name and lastly user that Avatar color.



92

00:07:19,840 --> 00:07:20,370

OK.



93

00:07:20,470 --> 00:07:27,900

So message body id ID name have a name have dark color that is going to match up with what we have right



94

00:07:28,160 --> 00:07:30,140

here.



95

00:07:30,370 --> 00:07:35,740

Message body ID channel Id use the name of dark color of dark color or I should say that that will match



96

00:07:35,740 --> 00:07:37,830

up with what we pass in right here.



97

00:07:38,110 --> 00:07:40,030

We want one we get it back.



98

00:07:40,030 --> 00:07:41,340

It actually comes with a little bit more.



99

00:07:41,340 --> 00:07:46,320

It comes back with the message ID and the message time stamp which is generated by the API itself.



100

00:07:46,340 --> 00:07:47,030

Right.



101

00:07:47,650 --> 00:07:49,120

So back to X code.



102

00:07:49,120 --> 00:07:54,010

We emit the new message and then we are going to receive it back.



103

00:07:54,040 --> 00:07:58,870

We're not actually going to write the message to receive it back.



104

00:07:58,870 --> 00:08:07,650

At this point we'll do that in the next lesson but we're going to see completion His true.



105

00:08:07,930 --> 00:08:08,400

All righty.



106

00:08:08,420 --> 00:08:15,430

So we now have our mess our function to add messages to our API.



107

00:08:15,620 --> 00:08:20,890

I'm going to say this and we're going to go for it and go work on that and the check.



108

00:08:21,010 --> 00:08:22,460

PC All right.



109

00:08:22,460 --> 00:08:29,120

So if we run this and I click on here and I'm wanting to send a message then what it's going to happen



110

00:08:29,150 --> 00:08:31,620

if you're on a device is the keyboard is going to pop up right.



111

00:08:31,730 --> 00:08:33,100

And it's going to cover it.



112

00:08:33,140 --> 00:08:36,550

We don't have that problem because this is the simulator and you don't have to have the keyboard pop



113

00:08:36,550 --> 00:08:43,740

up but it'll pop up and it's going to cover our keep our message and then we can't click on this button.



114

00:08:43,760 --> 00:08:44,330

Right.



115

00:08:44,660 --> 00:08:47,250

So we need a way of.



116

00:08:47,720 --> 00:08:50,450

Or Also you won't even be able to see what you're typing.



117

00:08:50,460 --> 00:08:52,160

And we want to be able to see what we're typing.



118

00:08:52,310 --> 00:08:57,080

So what we want to do is we want to have a way so that when we click on this you'll see this in lots



119

00:08:57,080 --> 00:09:02,790

of apps that have these these types of things with slacke messages and stuff.



120

00:09:02,820 --> 00:09:09,500

When you click on the message text box the entire view kind of shifts up right.



121

00:09:09,770 --> 00:09:12,260

So that's what we're going to do.



122

00:09:12,260 --> 00:09:16,840

So what I want you to do is go find our assets folder



123

00:09:22,770 --> 00:09:25,830

and look for the folder called keyboard to find view.



124

00:09:25,920 --> 00:09:26,330

OK.



125

00:09:26,370 --> 00:09:33,080

And we're going to grab this and we're going to drag it into our view folder.



126

00:09:33,540 --> 00:09:38,680

And when I say copy items if needed create folder references add to targets and finish.



127

00:09:38,880 --> 00:09:47,730

And so what this file is is a file that lets us do just that we're going to call a function and send



128

00:09:47,740 --> 00:09:49,520

an extension for a UI view.



129

00:09:49,590 --> 00:09:50,210

OK.



130

00:09:50,580 --> 00:09:59,850

What we can do is we combined any of view to the keyboard so that when we click on the text box and



131

00:09:59,850 --> 00:10:05,430

the keyboard opens up we can say we can have it so that the the view will shift up with it.



132

00:10:05,430 --> 00:10:05,770

All right.



133

00:10:05,770 --> 00:10:10,710

And so I'm not going to go through this entire file right here if you want.



134

00:10:10,710 --> 00:10:11,560

You can look through it.



135

00:10:11,580 --> 00:10:16,830

But just for the sake of time this section is already running long and this is some pretty complicated



136

00:10:16,830 --> 00:10:17,500

stuff.



137

00:10:17,610 --> 00:10:22,780

So feel free to look through it but all you need to know is that it's an extension of a wide view and



138

00:10:22,800 --> 00:10:29,040

that we are going to use this function right here bind to keyboard to bind a view to the keyboard so



139

00:10:29,040 --> 00:10:34,470

that when we click on the textfield and the keyboard opens up that the view that it is bound to the



140

00:10:34,470 --> 00:10:36,210

keyboard will move up with it.



141

00:10:36,240 --> 00:10:36,760

OK.



142

00:10:37,020 --> 00:10:40,850

So that's what we're going to be using this file for.



143

00:10:40,850 --> 00:10:51,700

All right so let's jump in to chat Visi And here in feuded load view that bind to keyboard.



144

00:10:52,080 --> 00:10:52,400

All right.



145

00:10:52,410 --> 00:10:53,970

We're going to save for that.



146

00:10:54,180 --> 00:10:58,550

And let's let's run that again.



147

00:10:58,590 --> 00:11:00,020

All right so let's try this out.



148

00:11:00,030 --> 00:11:05,770

When I click on this I'm going to toggle it to make sure the keyboard toggles.



149

00:11:05,790 --> 00:11:09,250

All right so there we go.



150

00:11:09,270 --> 00:11:13,260

So now you can see the message that you are typing.



151

00:11:13,260 --> 00:11:14,700

See the message.



152

00:11:14,930 --> 00:11:15,170

OK.



153

00:11:15,180 --> 00:11:17,050

So that's pretty cool.



154

00:11:17,220 --> 00:11:18,990

But now we need a way to make it go back down.



155

00:11:18,990 --> 00:11:19,590

Right.



156

00:11:19,890 --> 00:11:24,690

So let's go ahead and do the same type of thing that we did in I think it was our create a count see



157

00:11:26,040 --> 00:11:31,320

which is to add added tap gesture recognizer to the views so that when we tap off of the keyboard that



158

00:11:31,320 --> 00:11:33,440

it will dismiss.



159

00:11:33,660 --> 00:11:42,960

So to do that we're going to say let tap equal you by tap gesture recognizer and we are going to need



160

00:11:42,960 --> 00:11:44,980

a target and a selector.



161

00:11:45,000 --> 00:11:46,690

So let's go in and create that selector.



162

00:11:46,710 --> 00:11:47,830

Real quick.



163

00:11:47,890 --> 00:12:00,540

She is going to be at objectives see don't handle tap and that's going to be just like that and we're



164

00:12:00,540 --> 00:12:06,480

going to zoom in and say View and editing and this causes the view or one of its embedded text fields



165

00:12:06,510 --> 00:12:09,180

to resign the first responder status.



166

00:12:09,180 --> 00:12:11,000

So we're going to say true.



167

00:12:11,290 --> 00:12:11,880

All right.



168

00:12:12,180 --> 00:12:17,760

And then back up here for the target we're going to say self for the action we're going to say hash



169

00:12:17,760 --> 00:12:19,490

tag selector.



170

00:12:20,040 --> 00:12:25,420

And this is chat and B see that handle tap.



171

00:12:25,520 --> 00:12:26,580

So let's try that again.



172

00:12:26,880 --> 00:12:27,500

OK hold up.



173

00:12:27,500 --> 00:12:35,460

I forgot to add our gesture recognize to the viewers who will say you dot and gesture recognizer and



174

00:12:35,460 --> 00:12:35,770

grin.



175

00:12:35,790 --> 00:12:38,310

The gesture recognizes that we're adding is tap.



176

00:12:38,380 --> 00:12:39,680

Nice try that again.



177

00:12:40,320 --> 00:12:47,740

All right so when we click on this we pop up and then click off and it goes back down around.



178

00:12:47,850 --> 00:12:49,110

Beautiful.



179

00:12:49,860 --> 00:12:50,520

OK.



180

00:12:50,840 --> 00:12:58,770

So now we're ready to write our function that will send the message here and send message preste.



181

00:12:59,230 --> 00:13:02,820

So we're going to say I'm going to make it so that we can only send a message if we're logged in.



182

00:13:02,830 --> 00:13:13,200

And I say if off service dot instance dot is logged in then we are going to get the channel ID because



183

00:13:13,200 --> 00:13:19,050

we need to know we need to associate a message with a channel and then we're going to get the the text



184

00:13:19,050 --> 00:13:21,420

from our textfield.



185

00:13:21,420 --> 00:13:33,300

All right so I'm going to say guard that channel ID equal to the message service instance selected channel



186

00:13:33,810 --> 00:13:42,330

dot I d else return to run to make sure we have a channel selected and that it has a channel ID.



187

00:13:42,610 --> 00:13:45,850

Then we're going to get the text from the message box.



188

00:13:45,850 --> 00:13:58,060

I want to see a guarded message equal and then we're going to say message text box dot text pulse returns.



189

00:13:58,680 --> 00:13:59,290

All right.



190

00:13:59,590 --> 00:14:07,890

Now we are ready to call our socket function that we just wrote in to say socket service for instance



191

00:14:08,690 --> 00:14:21,740

dot ad message and the message that we are adding is the message the user ID is user data service instance



192

00:14:21,740 --> 00:14:33,980

that I am the channel ID is channel ID and the completion handler is going to press enter and say success



193

00:14:34,940 --> 00:14:37,060

and then if we're successful



194

00:14:39,860 --> 00:14:41,120

then what do we want to have happen.



195

00:14:41,120 --> 00:14:48,180

Typically when you send a message you want the textfield to go back to being blank.



196

00:14:48,290 --> 00:14:52,430

So we're going to say self that message.



197

00:14:52,690 --> 00:14:57,370

Self-taught message text box that text is equal to an empty string.



198

00:14:57,710 --> 00:15:01,330

And then we're going to dismiss the keyboards we're going to say self-taught



199

00:15:03,530 --> 00:15:13,440

message text box dot resign first responder and I believe that's all we need.



200

00:15:13,440 --> 00:15:16,520

So I going to this and save it and run it.



201

00:15:16,620 --> 00:15:23,560

And if this works then you will see your first message pop up in your labs database.



202

00:15:24,430 --> 00:15:27,930

All right so let's go ahead and test this out.



203

00:15:28,010 --> 00:15:33,080

So sending our first message.



204

00:15:33,630 --> 00:15:34,990

Whoo.



205

00:15:34,990 --> 00:15:35,350

All right.



206

00:15:35,360 --> 00:15:39,130

So here we go click and dismisses.



207

00:15:39,140 --> 00:15:42,020

Now let's go check out our lab



208

00:15:44,970 --> 00:15:52,320

and for you guys if you come to your database you should now have a collection called messages.



209

00:15:52,320 --> 00:15:59,010

And if I click on here on the messages and jumped on her to the bottom there it is sending our first



210

00:15:59,010 --> 00:16:01,600

message right.



211

00:16:01,830 --> 00:16:06,920

And then now see here come back to code.



212

00:16:06,990 --> 00:16:10,700

Now I'm going to stop it and run it again.



213

00:16:10,950 --> 00:16:15,950

And our print statement for our messages should also work.



214

00:16:16,260 --> 00:16:17,220

And there it is.



215

00:16:17,250 --> 00:16:19,340

Message sending our first message.



216

00:16:19,500 --> 00:16:28,590

So now we can confirm that our function that we created last lesson which was find all message for channel



217

00:16:28,590 --> 00:16:31,540

is working because now you have a message to actually fetch.



218

00:16:31,550 --> 00:16:36,500

All right so this is super exciting you have now use sockets to send a message.



219

00:16:36,720 --> 00:16:43,680

And in the next lesson we're going to actually kind of get this table view up and running and be able



220

00:16:43,680 --> 00:16:50,340

to populate with our messages and we're going to do some really fun and cool stuff from here on out



221

00:16:50,730 --> 00:16:55,110

and really make it into a chat app or so because they're excited for that.



222

00:16:55,110 --> 00:17:00,000

I'm going to finish up here with committing and adding my changes and then I will see you guys in the



223

00:17:00,000 --> 00:17:01,130

next one.