You know how you all doing.
Joining me here with those slopes dot com.
Welcome back.
And we're going to do some cool stuff in this lesson in the last video we wrote our functions so that
we can fetch our messages from our channel on our API but we don't have any messages yet or at least
you guys don't because you're doing your API fresh.
But in this lesson we are going to fix that.
We're going to send our first message so hope you're excited for that.
And let's get going.
First thing we're going to do is get are you ready to run and jump into main storyboard and come on
down here to our chat.
P.S. One of my right panel here and we are going to put in some text fields and some buttons.
All right.
So if we check out our mockups
done here we have a text field.
And when we are typing I believe.
Let's see if we have a yes.
When we're typing.
Then this button is going to show up.
All right.
So let's let's get to it pretty easy.
The other thing I want to show you is that when we're at when we're typing the entire view is shifted
up so that it doesn't.
So it's not covered by the keyboard or anything so we won't have that problem the entire view is shifted
up with the keyboard.
All right so here in storyboard let's put in a text field.
So we're just going to drop this in down here.
Over in the corner I'm going to constrain it going to say zero from the left right from the bottom and
zero from the right.
I'm going to set the height to 40.
Add four constraints and then we're going to need a button.
So I'm just going to search for a button and drag a button on here.
Get rid of the title and set the image to send Eric go and zooming you your in we're going to set some
constraints this is going to be it from the right.
And then I'm going to control and drag to the text field so that we can say center vertically.
There you go.
Now that's also constrained.
All right so that's pretty much all we need as far as UI elements that go ahead and modify this text
feel a little bit to change the color to a dark gray color.
The font is of course custom but it can new That's fine and is put in a placeholder text.
We can say message and there we go.
All right.
So that's that's looking good.
I think that's all we need now is go ahead and open up our assistant editor with chat and see where
we at right here.
Chad this that Swift
will close this right pain and come down here.
So we need an outlet for the text field and an action for the button.
So make sure you have the textfield selected and not one of the constraints and I'm going to control
drag from here.
So I'm going to say message text box.
OK.
This can be a UI textfield.
And then for the button we need an action.
And now go ahead and
put that right here under our update with channel.
And again make sure you have the button selected control drag when it called the Send Message pressed.
OK.
And that is an action going to connect that.
And that's all that's all we need here.
So we're ready to send a message.
But how do we do that.
We're going to need to create a couple of functions.
So let's jump over to our socket service also just like adding channels is handled by the sockets are
hiding of messages is also going to be handled by our web socket.
So we are trying to send a message that message is going to travel to the API with its all of its message
information.
The API is going to receive that message and construct a new message object and then send that information
back to our app as well as any other apps that happen to be connected at that point in time.
All right so we're going to need.
Hey add message function.
Let's go ahead and open up our API code and if we come down here to where new message is detected.
So the event is called new message.
And then the information that we need to pass to it is message body user ID channel ID user name use
your avatar and use your avatar color.
So the API is going to detect a new message event.
Get these parameters create a new message and then save it to the database and then you get back out
a message with these parameters and that is going to be a message created.
All right so we know what to what parameters we need to send to our function lets say funk and message
Okay.
And so we need to pass into the function the message body and thats going to be a strong user id thats
going to be a string channel ID and thats going to be a string and then we are going to have a completion
handlers and say completion and then at scaping and completion handler we go.
All right.
And then just so I don't have to write user data service for instance a whole bunch of times I'm going
to say user let user equal user data services instance and you'll see right here in just a second.
So now we're going to do the socket document and say socket Mitt and this is the one we want an event
with items that we can pass.
So the event we looked at it in the API code the event is called new message and the items are going
to be the message body.
This is passed in from the function user ID channel ID and then we have some that we need to just get
from the user data service which is user data name user dot avatar name and lastly user dot Avatar color.
OK.
So message body id ID name have a name of dark color that is going to match up with what we have right
here.
Message body ID channel Id use a name of dark color of dark color or I should say that that will match
up with what we pass in right here.
We love them when we get it back.
It actually comes with a little bit more.
It comes back with the message ID and the message time stamp which is generated by the API itself.
All right.
So back to X code we met the new message.
And then we are going to receive it back.
We're not actually going to write the message to receive it back at this point.
We'll do that in the next lesson.
But we're going to say completion is true.
All right.
So we now have our mess our function to add messages to our API.
I'm going to say this and we're going to go for it and go work on that.
And the PC.
All right.
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
if you're on a device is the keyboard is going to pop up right.
And it's going to cover it.
We don't have that problem because this is the simulator and you don't have to have the keyboard pop
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
right.
So we need a way of.
Or also you won't even be able to see what you're typing.
And we want to be able to see what you're typing.
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
of apps that have these types of things with slacke messages and stuff.
When you click on the message text box the entire view kind of shifts up right.
So that's what we're going to do.
So what I want you to do is go find our assets folder
and look for the folder called keyboard to find the view.
OK.
And we're going to grab this and we're going to drag it into our view folder.
And when I say copy items if needed create folder references add to targets and finish.
And so what this file is is a file that lets us do just that we're going to call a function and send
an extension for a UI view.
OK.
What we can do is we combined any UI view to the keyboard so that when we click on the text box and
the keyboard opens up we can say we can have it so that the the view will shift up with it.
All right.
And so I'm not going to go through this entire file right here if you want.
You can look through it.
But just for the sake of time this section is already running long and this is some pretty complicated
stuff.
So feel free to look through it but all you need to know is that it's an extension of a wide view and
that we are going to use this function right here bind to keyboard to bind a view to the keyboard so
that when we click on the textfield and the keyboard opens up that the view that it is bound to the
keyboard will move up with it.
OK.
So that's what we're going to be using this file for.
So let's jump back to chat see.
And here in view did load view that bind to keyboard.
All right.
We're going to say for that and let's let's run that again.
All right so let's try this out.
When I click on this I'm going to toggle it to make sure the keyboard toggles.
All right so there we go.
So now you can see the message that you are typing.
See the message.
OK.
So that's pretty cool.
But now we need a way to make it go back down.
Right.
So let's go ahead and do the same type of thing that we did in I think it was our create Krita count
PC which is to add added tap gesture recognizer to the views so that when we tap off of the keyboard
that it will business.
So to do that we're going to say let tap equal you by tap gesture recognizer and we are going to need
a target and a selector.
So let's go in and create that selector real quick.
That's just going to be at Objective-C you don't handle tap and that's going to be just like that.
And we're going to we're going to view and editing and this causes the view or one of its embedded text
fields to resign the first responder status.
So we're going to say true.
All right.
And then back up here for the target we're going to say self for the action we're going to say hash
tag selector.
And this is chat room b c dot handle tab tap.
Let's try that again.
OK hold up I forgot to add our gesture recognize it to the viewers who will say you dot and gesture
recognizer and.
The just you recognize that we're adding is tap.
Nice try that again.
All right so then we click on this.
We pop up and then click off and it goes back down around.
Beautiful.
OK.
So now we're ready to write our function that will send the message here and send message preste.
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.
And say if off service dot instance dot is logged in then we are going to get the channel ID because
we need to know we need to associate a message with the channel and then we're going to get the text
from our textfield.
All right so I'm going to say God that channel Id be equal to the message service instance selected
channel dot I d else returned to run to make sure we have a channel selected and that it has a channel
ID then we're going to get the text from the message box want to see a guarded message equal and then
we're going to say message text box dot text pulse return.
All right.
Now we are ready to call our socket function that we just wrote in to say socket service for instance
dot ad message and the message that we are adding is the message the user ID is user data service that
instance that ID the channel ID is channel ID and the completion handler is going to press enter and
say success and then if we're successful
then what do we want to have happen.
Typically when you send a message you want the textfield to go back to being blank.
So we're going to say self that message.
So if that message text box top text is equal to an empty string.
And then we're going to dismiss the keyboards we're going to say self-taught message text box dot resign
first responder and I believe that's all we need.
Let's go and test this and save it and run it.
And if this works then you will see your first message pop up in your labs database.
All right so let's go ahead and test this out.
So sending our first message.
Whew.
So here we go click and dismisses.
Now let's go check out our lab
and for you guys if you come to your database you should now have a collection called the messages.
And if I click on here on the messages and jumped on to the bottom there it is sending our first message
right.
And then now see here come back to code.
Now I'm going to stop it and run it again.
And our print statement for our messages should also work.
And there it is.
Message sending our first message.
So now we can confirm that our function that we created last lesson which was find all message for channel
is working because now you have a message to actually fetch.
All right so this is super exciting you have now use sockets to send a message.
And in the next lesson we're going to actually kind of get this table view up and running and be able
to populate with our messages and we're going to do some really fun and cool stuff from here on out
and I really make it into a chat app or so because they're excited for that.
I'm going to finish up here with committing and adding my changes and then I will see you guys in the
next one.