1
00:00:07,370 --> 00:00:08,650
You know how you all doing.

2
00:00:08,650 --> 00:00:10,710
Joining me here with those slopes dot com.

3
00:00:10,720 --> 00:00:11,680
Welcome back.

4
00:00:11,770 --> 00:00:17,980
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:17,980 --> 00:00:25,210
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,210 --> 00:00:27,920
you guys don't because you're doing your API fresh.

7
00:00:28,360 --> 00:00:30,710
But in this lesson we are going to fix that.

8
00:00:30,710 --> 00:00:34,980
We're going to send our first message so hope you're excited for that.

9
00:00:34,990 --> 00:00:36,740
And let's get going.

10
00:00:36,790 --> 00:00:43,240
First thing we're going to do is get are you ready to run and jump into main storyboard and come on

11
00:00:43,240 --> 00:00:45,150
down here to our chat.

12
00:00:45,160 --> 00:00:52,830
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,830 --> 00:00:53,170
All right.

14
00:00:53,380 --> 00:00:57,130
So if we check out our mockups

15
00:01:04,730 --> 00:01:06,290
done here we have a text field.

16
00:01:06,310 --> 00:01:08,730
And when we are typing I believe.

17
00:01:08,740 --> 00:01:10,780
Let's see if we have a yes.

18
00:01:10,790 --> 00:01:11,770
When we're typing.

19
00:01:11,920 --> 00:01:13,940
Then this button is going to show up.

20
00:01:13,980 --> 00:01:14,400
All right.

21
00:01:14,620 --> 00:01:17,750
So let's let's get to it pretty easy.

22
00:01:17,980 --> 00:01:24,220
The other thing I want to show you is that when we're at when we're typing the entire view is shifted

23
00:01:24,220 --> 00:01:25,790
up so that it doesn't.

24
00:01:25,810 --> 00:01:29,710
So it's not covered by the keyboard or anything so we won't have that problem the entire view is shifted

25
00:01:29,710 --> 00:01:31,810
up with the keyboard.

26
00:01:31,810 --> 00:01:36,990
All right so here in storyboard let's put in a text field.

27
00:01:37,340 --> 00:01:39,610
So we're just going to drop this in down here.

28
00:01:39,640 --> 00:01:46,990
Over in the corner I'm going to constrain it going to say zero from the left right from the bottom and

29
00:01:46,990 --> 00:01:48,470
zero from the right.

30
00:01:48,760 --> 00:01:51,590
I'm going to set the height to 40.

31
00:01:52,210 --> 00:01:57,460
Add four constraints and then we're going to need a button.

32
00:01:57,490 --> 00:02:01,850
So I'm just going to search for a button and drag a button on here.

33
00:02:02,260 --> 00:02:19,680
Get rid of the title and set the image to send Eric go and zooming you your in we're going to set some

34
00:02:19,680 --> 00:02:24,400
constraints this is going to be it from the right.

35
00:02:25,830 --> 00:02:32,060
And then I'm going to control and drag to the text field so that we can say center vertically.

36
00:02:32,080 --> 00:02:32,430
There you go.

37
00:02:32,520 --> 00:02:36,960
Now that's also constrained.

38
00:02:36,960 --> 00:02:42,970
All right so that's pretty much all we need as far as UI elements that go ahead and modify this text

39
00:02:42,970 --> 00:02:47,470
feel a little bit to change the color to a dark gray color.

40
00:02:47,470 --> 00:02:54,900
The font is of course custom but it can new That's fine and is put in a placeholder text.

41
00:02:54,900 --> 00:02:58,680
We can say message and there we go.

42
00:02:59,050 --> 00:02:59,810
All right.

43
00:02:59,980 --> 00:03:01,570
So that's that's looking good.

44
00:03:01,570 --> 00:03:08,200
I think that's all we need now is go ahead and open up our assistant editor with chat and see where

45
00:03:08,200 --> 00:03:09,020
we at right here.

46
00:03:09,040 --> 00:03:09,990
Chad this that Swift

47
00:03:12,800 --> 00:03:16,630
will close this right pain and come down here.

48
00:03:16,740 --> 00:03:21,520
So we need an outlet for the text field and an action for the button.

49
00:03:21,860 --> 00:03:27,350
So make sure you have the textfield selected and not one of the constraints and I'm going to control

50
00:03:27,350 --> 00:03:28,630
drag from here.

51
00:03:28,630 --> 00:03:33,880
So I'm going to say message text box.

52
00:03:33,970 --> 00:03:34,480
OK.

53
00:03:34,700 --> 00:03:36,970
This can be a UI textfield.

54
00:03:37,000 --> 00:03:40,790
And then for the button we need an action.

55
00:03:41,400 --> 00:03:42,770
And now go ahead and

56
00:03:46,740 --> 00:03:51,490
put that right here under our update with channel.

57
00:03:51,510 --> 00:03:58,960
And again make sure you have the button selected control drag when it called the Send Message pressed.

58
00:03:59,290 --> 00:03:59,550
OK.

59
00:03:59,550 --> 00:04:02,780
And that is an action going to connect that.

60
00:04:03,300 --> 00:04:06,730
And that's all that's all we need here.

61
00:04:06,750 --> 00:04:09,000
So we're ready to send a message.

62
00:04:09,480 --> 00:04:11,220
But how do we do that.

63
00:04:11,220 --> 00:04:13,670
We're going to need to create a couple of functions.

64
00:04:13,680 --> 00:04:20,910
So let's jump over to our socket service also just like adding channels is handled by the sockets are

65
00:04:21,010 --> 00:04:25,090
hiding of messages is also going to be handled by our web socket.

66
00:04:25,230 --> 00:04:31,170
So we are trying to send a message that message is going to travel to the API with its all of its message

67
00:04:31,170 --> 00:04:32,180
information.

68
00:04:32,220 --> 00:04:38,100
The API is going to receive that message and construct a new message object and then send that information

69
00:04:38,100 --> 00:04:43,290
back to our app as well as any other apps that happen to be connected at that point in time.

70
00:04:43,290 --> 00:04:44,270
All right so we're going to need.

71
00:04:44,310 --> 00:04:46,350
Hey add message function.

72
00:04:46,740 --> 00:04:55,620
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,620 --> 00:04:57,740
So the event is called new message.

74
00:04:57,990 --> 00:05:06,870
And then the information that we need to pass to it is message body user ID channel ID user name use

75
00:05:06,870 --> 00:05:09,670
your avatar and use your avatar color.

76
00:05:09,810 --> 00:05:13,520
So the API is going to detect a new message event.

77
00:05:14,130 --> 00:05:20,520
Get these parameters create a new message and then save it to the database and then you get back out

78
00:05:21,000 --> 00:05:26,610
a message with these parameters and that is going to be a message created.

79
00:05:26,610 --> 00:05:36,720
All right so we know what to what parameters we need to send to our function lets say funk and message

80
00:05:37,950 --> 00:05:39,160
Okay.

81
00:05:39,270 --> 00:05:50,210
And so we need to pass into the function the message body and thats going to be a strong user id thats

82
00:05:50,220 --> 00:06:00,060
going 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,060 --> 00:06:12,210
handlers and say completion and then at scaping and completion handler we go.

84
00:06:12,210 --> 00:06:12,600
All right.

85
00:06:12,690 --> 00:06:19,260
And then just so I don't have to write user data service for instance a whole bunch of times I'm going

86
00:06:19,260 --> 00:06:29,190
to say user let user equal user data services instance and you'll see right here in just a second.

87
00:06:29,790 --> 00:06:37,460
So now we're going to do the socket document and say socket Mitt and this is the one we want an event

88
00:06:37,530 --> 00:06:39,270
with items that we can pass.

89
00:06:39,270 --> 00:06:48,690
So the event we looked at it in the API code the event is called new message and the items are going

90
00:06:48,690 --> 00:06:51,690
to be the message body.

91
00:06:51,690 --> 00:07:03,090
This is passed in from the function user ID channel ID and then we have some that we need to just get

92
00:07:03,090 --> 00:07:19,450
from the user data service which is user data name user dot avatar name and lastly user dot Avatar color.

93
00:07:19,760 --> 00:07:20,240
OK.

94
00:07:20,400 --> 00:07:27,900
So message body id ID name have a name of dark color that is going to match up with what we have right

95
00:07:28,130 --> 00:07:30,060
here.

96
00:07:30,330 --> 00:07:35,700
Message body ID channel Id use a name of dark color of dark color or I should say that that will match

97
00:07:35,700 --> 00:07:37,800
up with what we pass in right here.

98
00:07:38,050 --> 00:07:39,970
We love them when we get it back.

99
00:07:39,980 --> 00:07:41,280
It actually comes with a little bit more.

100
00:07:41,280 --> 00:07:46,230
It comes back with the message ID and the message time stamp which is generated by the API itself.

101
00:07:46,230 --> 00:07:47,020
All right.

102
00:07:47,580 --> 00:07:50,680
So back to X code we met the new message.

103
00:07:51,090 --> 00:07:53,900
And then we are going to receive it back.

104
00:07:53,970 --> 00:08:00,530
We're not actually going to write the message to receive it back at this point.

105
00:08:00,760 --> 00:08:02,080
We'll do that in the next lesson.

106
00:08:02,080 --> 00:08:05,210
But we're going to say completion is true.

107
00:08:07,920 --> 00:08:08,330
All right.

108
00:08:08,370 --> 00:08:15,400
So we now have our mess our function to add messages to our API.

109
00:08:15,570 --> 00:08:20,140
I'm going to say this and we're going to go for it and go work on that.

110
00:08:20,160 --> 00:08:21,820
And the PC.

111
00:08:22,170 --> 00:08:22,390
All right.

112
00:08:22,410 --> 00:08:29,070
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

113
00:08:29,100 --> 00:08:31,570
if you're on a device is the keyboard is going to pop up right.

114
00:08:31,680 --> 00:08:33,030
And it's going to cover it.

115
00:08:33,090 --> 00:08:36,510
We don't have that problem because this is the simulator and you don't have to have the keyboard pop

116
00:08:36,510 --> 00:08:43,670
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

117
00:08:43,690 --> 00:08:44,270
right.

118
00:08:44,610 --> 00:08:47,110
So we need a way of.

119
00:08:47,680 --> 00:08:50,400
Or also you won't even be able to see what you're typing.

120
00:08:50,410 --> 00:08:52,080
And we want to be able to see what you're typing.

121
00:08:52,190 --> 00:08:57,030
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

122
00:08:57,030 --> 00:09:02,740
of apps that have these types of things with slacke messages and stuff.

123
00:09:02,740 --> 00:09:09,440
When you click on the message text box the entire view kind of shifts up right.

124
00:09:09,690 --> 00:09:12,200
So that's what we're going to do.

125
00:09:12,210 --> 00:09:16,790
So what I want you to do is go find our assets folder

126
00:09:22,720 --> 00:09:25,780
and look for the folder called keyboard to find the view.

127
00:09:25,870 --> 00:09:26,270
OK.

128
00:09:26,320 --> 00:09:33,090
And we're going to grab this and we're going to drag it into our view folder.

129
00:09:33,490 --> 00:09:38,660
And when I say copy items if needed create folder references add to targets and finish.

130
00:09:38,830 --> 00:09:47,690
And so what this file is is a file that lets us do just that we're going to call a function and send

131
00:09:47,700 --> 00:09:49,480
an extension for a UI view.

132
00:09:49,540 --> 00:09:50,140
OK.

133
00:09:50,530 --> 00:09:59,800
What we can do is we combined any UI view to the keyboard so that when we click on the text box and

134
00:09:59,800 --> 00:10:05,120
the keyboard opens up we can say we can have it so that the the view will shift up with it.

135
00:10:05,380 --> 00:10:05,700
All right.

136
00:10:05,710 --> 00:10:10,660
And so I'm not going to go through this entire file right here if you want.

137
00:10:10,660 --> 00:10:11,510
You can look through it.

138
00:10:11,530 --> 00:10:16,780
But just for the sake of time this section is already running long and this is some pretty complicated

139
00:10:16,780 --> 00:10:17,440
stuff.

140
00:10:17,560 --> 00:10:22,730
So feel free to look through it but all you need to know is that it's an extension of a wide view and

141
00:10:22,750 --> 00:10:28,960
that we are going to use this function right here bind to keyboard to bind a view to the keyboard so

142
00:10:28,960 --> 00:10:34,420
that when we click on the textfield and the keyboard opens up that the view that it is bound to the

143
00:10:34,420 --> 00:10:36,160
keyboard will move up with it.

144
00:10:36,190 --> 00:10:36,720
OK.

145
00:10:36,970 --> 00:10:40,820
So that's what we're going to be using this file for.

146
00:10:40,880 --> 00:10:43,190
So let's jump back to chat see.

147
00:10:43,570 --> 00:10:51,980
And here in view did load view that bind to keyboard.

148
00:10:52,000 --> 00:10:52,320
All right.

149
00:10:52,360 --> 00:10:56,340
We're going to say for that and let's let's run that again.

150
00:10:58,540 --> 00:10:59,960
All right so let's try this out.

151
00:10:59,980 --> 00:11:05,720
When I click on this I'm going to toggle it to make sure the keyboard toggles.

152
00:11:05,740 --> 00:11:08,150
All right so there we go.

153
00:11:09,220 --> 00:11:13,210
So now you can see the message that you are typing.

154
00:11:13,210 --> 00:11:14,650
See the message.

155
00:11:14,890 --> 00:11:15,130
OK.

156
00:11:15,130 --> 00:11:17,170
So that's pretty cool.

157
00:11:17,170 --> 00:11:18,940
But now we need a way to make it go back down.

158
00:11:18,940 --> 00:11:19,550
Right.

159
00:11:19,840 --> 00:11:24,200
So let's go ahead and do the same type of thing that we did in I think it was our create Krita count

160
00:11:24,240 --> 00:11:30,970
PC which is to add added tap gesture recognizer to the views so that when we tap off of the keyboard

161
00:11:31,120 --> 00:11:33,110
that it will business.

162
00:11:33,590 --> 00:11:42,880
So to do that we're going to say let tap equal you by tap gesture recognizer and we are going to need

163
00:11:42,880 --> 00:11:44,930
a target and a selector.

164
00:11:44,950 --> 00:11:47,710
So let's go in and create that selector real quick.

165
00:11:47,850 --> 00:11:59,070
That's just going to be at Objective-C you don't handle tap and that's going to be just like that.

166
00:11:59,440 --> 00:12:06,100
And we're going to we're going to view and editing and this causes the view or one of its embedded text

167
00:12:06,100 --> 00:12:09,090
fields to resign the first responder status.

168
00:12:09,130 --> 00:12:10,930
So we're going to say true.

169
00:12:11,230 --> 00:12:11,830
All right.

170
00:12:12,130 --> 00:12:17,700
And then back up here for the target we're going to say self for the action we're going to say hash

171
00:12:17,700 --> 00:12:19,700
tag selector.

172
00:12:19,990 --> 00:12:25,510
And this is chat room b c dot handle tab tap.

173
00:12:25,580 --> 00:12:26,540
Let's try that again.

174
00:12:26,830 --> 00:12:33,670
OK hold up I forgot to add our gesture recognize it to the viewers who will say you dot and gesture

175
00:12:33,670 --> 00:12:35,690
recognizer and.

176
00:12:35,730 --> 00:12:38,270
The just you recognize that we're adding is tap.

177
00:12:38,330 --> 00:12:39,550
Nice try that again.

178
00:12:40,270 --> 00:12:42,590
All right so then we click on this.

179
00:12:42,970 --> 00:12:47,550
We pop up and then click off and it goes back down around.

180
00:12:47,790 --> 00:12:49,060
Beautiful.

181
00:12:49,810 --> 00:12:50,440
OK.

182
00:12:50,800 --> 00:12:58,720
So now we're ready to write our function that will send the message here and send message preste.

183
00:12:59,170 --> 00:13:02,780
So we're going to say we're going to make it so that we can only send a message if we're logged in.

184
00:13:02,820 --> 00:13:13,150
And say if off service dot instance dot is logged in then we are going to get the channel ID because

185
00:13:13,150 --> 00:13:19,000
we need to know we need to associate a message with the channel and then we're going to get the text

186
00:13:19,000 --> 00:13:21,340
from our textfield.

187
00:13:21,340 --> 00:13:32,320
All right so I'm going to say God that channel Id be equal to the message service instance selected

188
00:13:32,650 --> 00:13:41,710
channel dot I d else returned to run to make sure we have a channel selected and that it has a channel

189
00:13:41,710 --> 00:13:49,240
ID then we're going to get the text from the message box want to see a guarded message equal and then

190
00:13:49,240 --> 00:13:58,230
we're going to say message text box dot text pulse return.

191
00:13:58,630 --> 00:13:59,250
All right.

192
00:13:59,530 --> 00:14:07,840
Now we are ready to call our socket function that we just wrote in to say socket service for instance

193
00:14:08,640 --> 00:14:20,990
dot ad message and the message that we are adding is the message the user ID is user data service that

194
00:14:21,090 --> 00:14:32,610
instance that ID the channel ID is channel ID and the completion handler is going to press enter and

195
00:14:32,620 --> 00:14:37,000
say success and then if we're successful

196
00:14:39,790 --> 00:14:41,080
then what do we want to have happen.

197
00:14:41,080 --> 00:14:48,200
Typically when you send a message you want the textfield to go back to being blank.

198
00:14:48,220 --> 00:14:52,510
So we're going to say self that message.

199
00:14:52,600 --> 00:14:57,250
So if that message text box top text is equal to an empty string.

200
00:14:57,640 --> 00:15:06,700
And then we're going to dismiss the keyboards we're going to say self-taught message text box dot resign

201
00:15:08,440 --> 00:15:13,400
first responder and I believe that's all we need.

202
00:15:13,440 --> 00:15:16,460
Let's go and test this and save it and run it.

203
00:15:16,560 --> 00:15:23,620
And if this works then you will see your first message pop up in your labs database.

204
00:15:24,390 --> 00:15:27,670
All right so let's go ahead and test this out.

205
00:15:27,970 --> 00:15:33,190
So sending our first message.

206
00:15:33,600 --> 00:15:34,920
Whew.

207
00:15:35,290 --> 00:15:39,060
So here we go click and dismisses.

208
00:15:39,090 --> 00:15:41,980
Now let's go check out our lab

209
00:15:44,920 --> 00:15:52,100
and for you guys if you come to your database you should now have a collection called the messages.

210
00:15:52,270 --> 00:15:59,740
And if I click on here on the messages and jumped on to the bottom there it is sending our first message

211
00:16:00,550 --> 00:16:01,560
right.

212
00:16:01,780 --> 00:16:06,880
And then now see here come back to code.

213
00:16:06,940 --> 00:16:10,730
Now I'm going to stop it and run it again.

214
00:16:10,900 --> 00:16:15,880
And our print statement for our messages should also work.

215
00:16:16,210 --> 00:16:17,170
And there it is.

216
00:16:17,200 --> 00:16:19,300
Message sending our first message.

217
00:16:19,450 --> 00:16:28,510
So now we can confirm that our function that we created last lesson which was find all message for channel

218
00:16:28,510 --> 00:16:31,300
is working because now you have a message to actually fetch.

219
00:16:31,510 --> 00:16:36,560
All right so this is super exciting you have now use sockets to send a message.

220
00:16:36,670 --> 00:16:43,600
And in the next lesson we're going to actually kind of get this table view up and running and be able

221
00:16:43,600 --> 00:16:50,290
to populate with our messages and we're going to do some really fun and cool stuff from here on out

222
00:16:50,670 --> 00:16:54,990
and I really make it into a chat app or so because they're excited for that.

223
00:16:55,060 --> 00:16:59,950
I'm going to finish up here with committing and adding my changes and then I will see you guys in the

224
00:16:59,950 --> 00:17:01,170
next one.