Hey guys this is Caleb with Debb slopes dot com and in this video we're going to set up our view controller
that's going to allow us to make posts on feed visi.
It's called create post-PC and we're also going to set up a model layer for messages.
And we're also going to set up the function that pushes our messages up to firebase.
Very very cool stuff.
Let's pull up on our tax code project and let's go ahead and create post visi.
So close the assistant editor.
If you had it open from the last video and now what we're going to do is we're going to Dragon you I
view controller.
OK.
And I'm going to put it near my feet because those are kind of logically connected and I'm going to
line them up something I do.
Very cool.
And now we're just like we've been doing.
I'm going to go ahead and copy and paste this.
And you know it's OK that I'm doing that because there are no outlets at the moment.
If there were they could be stuck.
They could be residual outlets that carry over and that can cause crashes and all kinds of unwanted
behavior.
So just check and make sure or just rebuild it from scratch if you want to.
So now we're going to do.
We're going to zoom on in here.
We're going to set the background of this view controller it's just far too bright.
Set it to be our light ish gray color.
You can tell the difference between these two here.
Set this label is not the constraint set the label say.
Post some thing.
And of course we need to fix the constraint there so that the width is more like 200.
That looks good although why didn't it change
oh that's because.
Yeah.
There we go.
OK.
Very cool.
That looks great.
And now it's centered but our view here has not been pinned anywhere.
So give it a left top and right constraint of zero.
It already has a height constraint of 70.
Add those in.
Now we're good.
The cancel button is going to actually be over here as an X..
And so what I'm going to do is I'm going to take note that it's 30 from the top 20 from the right.
So I'm going to basically mirror that on the other side.
I'm going to set it here.
I'm going to remove the 20 from the right and instead I'm going to set it 20 from the left and it stays
in place right there.
Now remember we are centering these on each other so they'll always stay centered.
But now we need to change the image of our button.
So go ahead and set the image in the identity inspector or sorry the attributes inspector from compose
to close.
And that button will be used to close that controller.
Very simple.
Next we're going to drop in a UI image.
And this is basically going to hold the profile image for the user.
OK so make it a square let's make it 50 by 50.
I think that's a good size.
Maybe a little bigger maybe 60 by 60 would look.
Yeah that's good.
All righty.
Now let's go ahead and pin this 20 from the top and we're going to use the margin here which is basically
20 from the left and that's great.
But now we need to give it a fixed height and width so that doesn't change on us either.
Very cool.
Next up let's add a UI label and that's going to hold the user names.
We can see for what user are we posting drag on that label there.
Drag it over to the far side and let's go ahead.
Let's pin it 20 from the left 0 to the margin which is the same thing as 20 from the right.
And you know what.
Let's give it a fixed height of 20.
And now we need to go ahead and select both image and the label and we're going to click on the alignment
button and give them vertical centers.
Add one constraint and that looks great.
Now let's go ahead and change the font of this as well as the color set the color to blue set the font
to be Menlo like we've been doing.
I wish you could set a system font like you can set a global tent or a Global Fund but you can't anyway.
So that is Menlo 18.
And let's just go ahead and do user at breakpoint dot com com like we've been doing and that looks awesome.
So next up we need to add a text view in order to provide space for the user to post.
So instead of using a text field we're going to use a text view.
So they have a little bit more space to actually write something.
So go ahead and type UI text view and let's drag that on OK.
That looks good.
Let's move it down here and let's just change a few things about it really fast.
We want the background to be clear because we don't need that ugly white background.
We want the font to be blue white or blue.
Let's see which looks better blue versus white.
I think Blue looks way cooler.
Let's go with that and let's set the font to also be Menlo.
OK.
And let's set it to be 18.
Awesome.
That looks very cool.
Now we'll replace this Latin with say something here because if you look a text you does not inherently
have a placeholder.
So we're going to actually write a function later that when it detects that we're editing the place
view it's going to go ahead or editing the text it's going to remove this text to make it blank.
It's just a really easy way to modify that.
So that's cool that's in place.
Say something here is showing.
Now we need to add the button down here at the bottom.
So go ahead and type UI button.
We're going to drag on a button here and we're going to make this the width of the screen.
We're going to raise it up to be let's do 50.
That's great.
And let's go ahead and pin that to the bottom left and right and give it a fixed height of 50.
We're going to also set the text color to be Green K to indicate sending or you know pushing something
out.
Go green.
And of course we want this to say Send Now the font.
We can change to Menlo and let's make that size 18 Menlo.
That looks good.
Let's set the image to be the center image and you'll notice these greens are different.
And it's too close.
So let's go ahead and let's just maybe put two spaces there to give it some room.
Let's go ahead and set the green here.
We can actually use the eyedropper to choose the proper green for our text.
That looks much better.
And you'll notice though that the font when back so change it back to mean low and low 18 and Menlo.
I guess the spaces are bigger.
So just one space should do.
And of course this button is the same color as the background so we should change it to be the darker
gray so that it stands out.
Very cool.
We can also set our textfield here to be constrained 20 from the top 20 from the bottom.
All we need to do is change it and then zero from the left and right and add those constraints and it's
all perfectly in place.
That looks awesome.
Very very very cool.
So next up we need to write a function that will allow us to upload a message to firebase So we're going
to write the upload post function in our data service.
OK.
And that's going to allow us to just throw a message up to firebase and save it in the feed child in
firebase.
So let's go ahead and let's go to our data service and we'll write that first go down below create DB
user.
And we're going to write phunk upload post.
OK.
Now a post we need to think about what it's supposed to have it should have a message right.
It should have words.
We're going to need to link each post to each user who posted so we know who posted what.
And we need to basically be able to tell is this message being posted in a group or is it being posted
in the public feed.
So let's go ahead and let's type out some of our parameters here.
Upload post with message and message is going to be an internal parameter there for you I.D. meaning
for the unique identifier you I.D. of type string.
That's what we're using for are you IDs let's do with group key and the internal parameter would just
be group key.
And now that's optional because we may or may not have a group key.
So we'll just go and put a question mark there and at the end we need to be able to understand is the
send complete or is it not.
So we're going to use a completion handler.
So let's just say send complete.
That's going to be the name of our handler.
And of course it's escaping because in order to get out of some of these firebase closures we need to
be able to escape the value out of it.
And of course we use a function when doing this and we will return an empty function because it doesn't
matter what we return.
All that matters is that we get a boolean back saying yes it was sent.
No it was not.
So for that we're going to use a parameter called status of type Boolean.
OK simple as that.
Next what we're going to do is we are basically going to see if the group key exists because that will
really change where this message goes.
So we'll see it will say if the group key is not equal to nil meaning if there is a group key We're
going to go ahead and send this into the groups reference send to groups ref.
Otherwise we're going to go ahead and we will pass it in to the feed and we have access to the feed
with this variable right here.
So let's go ahead and call ref feed dot child and you know what.
There's a really cool thing called child by auto ID.
This will generate a unique identifier for every message that comes in.
That's what we want because we don't need to necessarily give it a specific name because the exact idea
of the message doesn't matter.
But inside we're going to be keeping the idea of the users so the child by Auto-ID function is perfect.
And then inside of that child that we have made we're going to go ahead and update child values with
the dictionary.
Now we need to think what dictionary are we going to use.
Let's go ahead and think about what a message needs.
It needs content it needs like some words and it needs a Sender ID.
So we know who sent it.
So let's give those keys and values here.
The first one I said was content and of course the value for that is going to come from the message
parameter we pass in.
So go ahead and call message and then we need a Sender ID and the sender ID is going to be the ID that
we pass in from wherever we call this function.
Now as soon as that has been updated and firebase we can use our send complete handler to call.
True.
OK.
Simple as that will come back to the groups later when we add groups we see stuff.
But for now we're just focusing on the feed so upload Post is now ready to go.
And so now we need to go into create post Visi and let's go ahead and let's send a message that will
be really cool.
So let's do it.
We need to go where where we create post AVC.
Oh and you know what we never created a new controller for that.
So here it is.
Let's go ahead and Right-Click new file.
Touch class and we're going to call it create post Visi awesome so click Next click Create and it'll
show up of course.
Get rid of the boilerplate nastiness and go back to main storyboard so that we can set the identity.
So choose the view controller choose the identity inspector and call create post AVC.
Very cool.
And you know what.
This will actually not even show because we have not set up a Segway to present it.
So we're going to click on our button here right click and drag to this view controller present Motilal
is what we want because otherwise it'll use a navigation controller to show it.
But we just want to present it mostly on top of the view that's fine.
And when we select that button it's going to go ahead and present that view controller like we want.
And now we can go ahead and set up some of our stuff in here so that when we type a message we can set
up our Send button to upload our post and then automatically dismiss our view.
It will be really cool.
Let's go ahead and do that now.
Open the assistant editor select Create post visi.
And it should open it automatically.
That's exactly what we want.
And that to begin we're actually going to create some Iby outlets here.
One first for the profile image profile image next for the e-mail label.
Then we need one for the text field text field.
Awesome.
And what else we need the send button here.
And you know what we need an IB action for our close button close button was pressed.
And beneath that we're going to go ahead and we're going to call or know how but above that.
Change it to an action and call send button was pressed.
Very cool.
Now the close button is easy we just call dismiss.
True.
You know that's way down there at the bottom let me give you some space here.
You can see we're called dismiss.
True and the completion we don't care if it's complete or not does not matter to us at this point.
But what is really important is the send button.
OK.
Now I'm just clearing up some space here.
And you know what what we're going to do is we're going to set the send button.
So that is good to go.
So what we're going to do is we're going to set up an extension of UI textfield delegates so that we
can tell when it edits so that we can remove say something here.
So go ahead and create an extension of create post-PC of UI text field delegate and we can just call
did begin editing.
Very cool.
Oh you know what though.
This is wrong.
We need text view delegate not textfield delegate sorry.
They're very similar and I confused them sometimes.
So let's let's call that again.
Did begin editing text view to begin editing and it begins editing set text view text to be equal to
nothing that'll clear it out just like it's a placeholder.
Very cool.
So next up what we're going to do is we're going to go ahead and in order to actually set this delegate
to work properly we need to call text view.
Delegate equals self.
That makes this view controller the delegate for the text view.
And oh you know what I just realized we called it textfield didn't we.
It's a text view that's going to cause us some issues.
So of course we need to go in here and get rid of this and then reconnect it hopefully it'll let us
might not interesting.
Might need to go off and come back.
And I go in here let's try it again.
It won't.
Interesting.
I wonder why OK well I guess we just do it again text view.
Get rid of this old one that we no longer need and we're good.
OK.
Very cool.
So text viewer text equals blank.
We have a text to you here.
The delegate has been set.
Now let's go ahead and let's set up how we are going to send our message.
So we need to verify though that there is some text so let's go ahead and type if text view text is
not equal to nil meaning if there is text and you know what we should make sure that it doesn't just
say say something here because that is text and it will pass.
If we don't run a check against it so we need to say.
And if text you that text is not equal to say some thing here.
All right we're checking against that as well.
If that's good what we're going to do is for the time that it's sending We're going to disable the send
button send button is enabled equals false.
That way we can't double send or triple send.
As soon as we press it it's disabled.
Now we can call create post or upload posts from our data service data service instance upload post
with message comes from comes from text field or text view sorry text ok for you I.D. We're going to
go ahead and use our fire base off abilities to pull out the unique ID of this user.
So we need to import firebase to get that.
All right.
So we can go ahead and call off off.
Current User and we can just grab the ID because we've already downloaded the user and authenticated
them.
That's great.
So we can get that you I.D. that way.
Perfect with group key.
This is the feed we don't need a group case we can pass in nyl and send complete.
We can just press enter and in our completion handler assuming that it returns True we can say is complete.
And now if is complete meaning if it is actually done sending we'll go ahead and call a self send button
that is enabled and will re-enable it then we're going to dismiss the view controller.
So we'll call self dot dismiss.
Animated is true.
Completion is nil.
But what if the message does not send properly we can call it else and we can re-enable the button at
that point as well.
And then we're going to go ahead and print.
There was an error.
All right.
So very cool.
We are getting an error and it's going to tell me that the off right here if I go off the current user
id it needs to be unwrapped because it's optional.
It could change at any time if maybe the token expires.
So it's optional so we unwrap it.
And right now we are able to send a message let's build and run let's go test to see if our Send button
is going to work properly we'll pull up our simulator here.
We'll pull up in firebase as well so we can watch to see if it pops up in the right place select feed
there's our message say something here.
Hey what's up.
And it looks like our button was hidden by our keyboard.
So I'm going to go ahead and I'll toggle the software a keyboard will make this button slide up so that
it stays with the keyboard later.
But for now let's press send.
It looks like it went somewhere and hey look at that.
The feed has shown up and there's our message sender ID got past our message content got past and it
has its own unique ID.
Now this is amazing.
We have now successfully been able to upload a message to firebase.
It saved online and we can now start to pull it down and show it in our feed.
We'll get into that in a little bit.
But for now we're going to actually write that function so that our button can slide up when the keyboard
shows in our app because on an iPhone of course you can't use the MacBook keyboard.
So we're going to set that up in the next video.
Amazing job with this one.
Let's head that way now.