What's up everybody.
JOHNNY B here with slopes dot com.
And welcome back to.
Welcome back to class.
We're continuing to work on our chat app and it's starting to shape up pretty well indeed.
We're back in X code now we've spent the last few lessons talking about web requests and setting up
our API eyes on Heroku and optionally Azi on a local host as well.
So but now we're ready to jump back into X code and actually hook up with the API and start getting
and sending data back and forth between the API and our client apps.
So it's going to be some pretty cool stuff.
So let's jump into it.
This is where we left off in our app.
You know we we've got the menu open menu working we can click on loggin and this isn't working yet but
if we go to don't have an account to sign up here and this is where we're going to start working now
because the how the API is set up when you don't have a user yet when you want to create a user there's
three steps you got to go through socialist pull up postman here if you see over here in our in our
requests from the collection that you imported the postman you'll see we have three numbers here.
We got one two and three.
The first is two off is to register a new user.
OK.
And so what that does is it sends to the API an email and password and registers a user for that account.
The next step is to log in that user.
And when you log in the user.
This is where we get back the token that we talked about in Lesson 6 about web requests an API is and
this token is necessary to do any of the further requests that we want to do like sending a message
retrieving chat messages you know adding channels.
Anything on the API that is locked down meaning you know the API has lots of functions for doing different
things and some of them are locked down.
So you have to have that API her sorry you have to have that off tokin key that is inside of the head
or to access those functions.
Right.
So first we're going to register a user they're going to log that user in and then we're going to create
a new user.
All right so registering a user and creating a user or a little bit different when you register it it
just creates an email and password user.
When we do the AD user what we're going to be doing is we're going to be adding things like the avatar
name the Avatar background color and some other information that we need for it.
All right.
So let's get started in this video.
All we're going to do is get the registering the user set up.
OK.
So let's let's take a look at just this.
Register user call OK.
So right now it's set up to be on our local host.
So let's go ahead and fire our local host up to an open terminal and open up a new tab.
And if you remember from our last video to get the local hosts up and running we also have to have Mongo
d the the database running's we're going to say Mongo DE
and wait for that to get up and running you can see here it says that waiting for connections on port
2 7 0 1 7.
And that's just what we want to see them open up a new tab and we need to change directory into our
Power Chat API folders.
I'm going to say CD and that's on our desktop so I'd say CD to desktop and then CD Mac chat API.
OK.
So once we're in here after you've done your NPM install all we got to do is do any AM run dev.
All right so that is up and running says database connection ready.
So now we can actually send this register call to our local hosted API and I can say something like
Jay at test her register dot com.
So we talked about web requests in the past and as part of the content that you can send with an HDTV
request is a header and a body.
So like I said some of them are locked down this API request is not.
So you can see here that we don't have an authorization header or anything.
All we're doing is saying what kind of the content type is but then here in the body we're actually
sending Jaison in the form of an email with a email string value and a key of password and a string
value for that key password.
And if we say send here what we're doing is we're we're sending this message the post request to our
local LEA hosted API at the path of V-1 account register.
OK.
And so if I say send.
It's going to send it to it.
And you can see here it says that we successfully created a new account.
And if we open up one of our other tools that we downloaded in the last couple of videos robo Mungo
if we come over here and we look at our chat happy I am and we come down here to accounts and double
click if I scroll down here to the bottom.
There we go we can actually see that we just registered user.
All right so Jay at test register dot com.
So I'm I'm showing you all this in postman so that you can get an idea of what kind of stuff we're going
to be passing back and forth to the API and what the kind of responses are in the next videos that we'll
be looking at the off and create user.
But for now we're just going to stick with this registry user so we're know that we're going to be needing
to send something to a an API with it with a Ural and a post.
We know that we're going to need to be sending somebody and we know that we're going to need a simple
header in the type of application.
Jason So let's jump into X code and get started on that.
So first thing I think we need to create some a service so all this stuff is going to be handled inside
of a file called Office service.
So let's create a new group that will click right click on SMAC here and say new group and that new
group is going to be called
services.
OK.
We're going to create a new file here inside of it and this can just be a swift file.
All right.
Call it off service ok and create.
OK so this service is going to handle all of our log in create user register user functions as well
as some some other variables that we're going to want to code up.
OK.
So let's go ahead and create it.
So we're going to take class off service.
OK.
This is going to be a singleton.
Meaning that this is going to be accessible globally and there can only be one instance of it at a times
when say static let instance cool off service and we're just going to initialize that and then we're
going to create a few variables here that we are going to store in the user defaults meaning that those
are going to be persisted even after the user closes the app.
And these are going to be things like whether they whether the user has logged in so that we don't have
to enter in the username and password every single time we open the app.
The other thing is going to be the office token and the last thing is the user e-mail so that when we
reopen the app we can get all of the info for for the user.
OK.
So go ahead and create those.
Like I said we're going to be using the user defaults and we say let defaults equal user defaults dot
standard game.
So for click on here on use default it says an interface to the user's default database where you store
key value pairs persistently across invocations of your app on a given device.
So basically this is the most simple way of saving data and your app and you don't want to use it for
things like images and any like heavy duty data.
All right.
So just use the user defaults for simple things like strings and booleans and that kind of stuff for
it.
It's also not super secure so you don't want to store passwords and stuff.
So it's just out we're going to say a VAR is logged in and this is going to be a big deal.
And like I said this is just a bully and that will help us to be able to do checks on how we want the
UI to display.
So for instance if we're logged in then we're going to show in the menu that logon button is actually
going to show the users name.
But if we're not logged in then it's going to say log.
OK.
And we're to create some getters and setters for this so we're going to get.
And so what we want to do is when we when we try to access this we're going to look into the user defaults
and see if see if this value exists.
So I say return defaults dot bhool for key and the key is going to be a constant that we haven't created
yet but it's going to be called whip's logged in key.
OK so let's go and I was going to create that right now.
So let's jump into Constans and create a new header here called user defaults.
And we're going to have we're going to have three use of default constants here so we're going to add
all of them right now.
First we're going to say let tokin underscore key equal tokin we're going to have the logged in key
and that's just going to be logged in.
And lastly we're going to have user e-mail and that's going to be equal to user e-mail.
I was going to say that and jump back into service.
OK so now when we try to access all service ADOT instance that is locked in we're going to look into
our user defaults and see if that exists.
Okay.
And then if we want to set it we need a set or services set and we are going to say
defaults got set and the one that we want is that value for key in case we're going to see new value
for key and that same key logged in key.
Perfect.
So it's going to create a little bit of space here.
All right so the next one is for the tokens would say bar off token and this is going to be a string
and we're going to create a couple of getters and setters again from the they get.
And this is going to be return defaults to value for key string and Kim and so the key for the token
is token key.
And then we have to cast it as a string because you will see here if we click right here on the first
value this returns an optional any.
OK so we got to cast it as a string.
And when we said it we are going to say defaults that set.
And what we want here is the value and the value is new value meaning whatever it is that we set this
equal to when we're calling it up and I need to fix this.
That should be a token.
And the key is again token key.
And lastly we have our user emails and we save our user e-mail and this is also a string.
And you know I can actually just copy these getters and setters because this is going to be the same
thing except for the key which is user email.
Perfect.
So now we have just created these three variables that we'll be able to access anywhere.
And also be reading and writing to and from our user defaults so these these these variables will be
persisted across.
App launches.
All right.
So that's perfect.
All right so now we are actually ready to create our registered user function.
So how do we do that in X code.
You know here in Postman it seems pretty simple all we got to do is press the send button and it does
it for us.
But we got a code that all out here in X code ourselves so we're going to got to do is create an actual
web request specify the headers specify the body specify how we want to see that response come back
and everything.
And what we're going to do is we're going to use something a library called Allum of fire.
And what this does what Alma fire does is it's a it's a library built on top of Apple's you r l session
framework that makes making web requests a lot easier.
OK so here we're going to import Alamo fire CBSA import Alamo fire.
It's super easy to use.
Let me open up Safari and show you where to find some more documentation if you just Google Alamo fire
and come up here to the get hub Alamo fire page.
Then you can see a lot of great information.
Alamo fire is one of the best documented and maintain libraries out there so highly highly recommended.
See here.
So here's where usage making a request.
So it's super simple.
All you have to do is say you call Alamo fire.
Then you say Doc request and then you pass in the your L that we're trying to hit.
So in our case it would be something like this local host account register and then you specify how
you want the response to be.
Most the time we want it to be a song but in the case of the register function what we actually want
what we actually want is response string.
Yes so the response string handler uses the response string serialized to convert the data returned
by the server into a string.
OK.
So the register user api function is just a little bit unique in that way and that the response that
we get back is actually a string.
So it's pretty simple so let's go ahead and create a function to do that register and say func register
user.
And I remember from our postman some of the things that we're going to need to be able to pass to the
API.
It an e-mail and a password.
OK.
So we're going to say e-mail which is a type of string and pass word which is also a string.
OK.
But we need one more thing here because web requests are asynchronous meaning that we send off the web
request and then we don't know when the response is going to come back do we.
And so as a result we can't say register user and then immediately try to do something with what we
expect to come back.
OK so what we need to do is have a way of knowing once it's finished and we do this with something called
the completion handler.
So if we come back over here into Constans we're going to create a new constant.
And this is going to be called type alias and the name is completion handler and the type is just going
to write this and then we'll talk about it.
OK so those underscore success bool and then dash and arrow and then open close parentheses.
I said Don't freak out if you don't understand what's going on right here.
And let's go through it a little bit at a time.
So first off what does a type Illyas type alias is simply renaming a type.
I can do this I could say type alias and I'm going to say Johnny and type expression is string.
Then I could say something like.
Let name of type Jhonny equal.
And so you'll see here what we've done is simply remapped the type of string to this type called Johnny.
So that's what the type alias's all we're doing is saying completion handler is of this type.
And what does this type.
Well this is a closure.
OK we're creating a very simple custom closure.
And what a closure is is it's a first class function that can be passed around in code.
So basically how we're going to be using it is we're going to send off a web request.
OK.
And then once that web request is done we are going to say completed and pass into that closure.
True or false.
And then we can do a check on that later on to see whether the request was successful or not.
OK.
So it's a little bit complicated.
And so this is a very simple example of a closure called the completion handler.
A little bit later on we're going to do a little bit more complex work with closures and I'm hoping
that at that point you'll have used the simple one a little bit more and that once we get into the other
uses of it it will click into place a little bit better.
Right.
So don't worry if you don't fully understand this completion handler right now it'll it'll become more
clear as we use it.
And as we go on.
OK.
So here we go we got a completion Hendler here.
And so jump back to our office service start swift and right here at the end.
We're going to say completion
at this being which is just the key word that we need for our completion.
And then we're going to say completion handler and you'll see here that is passing in a bull and returning
nothing.
OK.
So first thing we're going to do is we're going to set the e-mail to be all lowercase.
Just to make things easier.
When I say lower case e-mail you go to the email that is passed in hand just say lowercase.
OK then we're going to need a header.
All right.
So remember back in less than six we talked about web requests with headers and headers are kind of
like kind of like an attachment to the HTP request where you can specify the type of content you can
add to authorization headers API keys and other things like that.
OK.
And so what that looks like here in X code is we're going to create a jigsaw Jason object.
OK and we do that by saying Let header equal square bracket and then we put in a key and a value in
the type of strings during the same head or ball and content type
Colin Lissa's application slash Jason and character set is equal to T F dash 8.
OK.
And you build this if this these errors go away.
OK so looks good.
And you might remember this from our postman if we come up here and look at these hetter you see something
similar here.
Content-Type.
Application J song.
And so we're just kind of replicating the what we have here in postman in here.
Here in ex-coach crafting out our very own web request from X code.
All right so let's keep going.
The next thing that we're going to need is a body in case of that body.
And the same thing we're going to create a J on object and we're going to say this one is of type string
with kand and the light is equal to again opening close square brackets.
I'm going to say are two key value pairs.
If we look in postman What do we need.
We look at our body here.
We're going to need an email and a string and a password and a string.
OK.
So let's go ahead and do that.
So this is going to be e-mail and the email is lowercase e-mail and then you do a comma to denote that
we have multiple key value pairs.
And the next one is going to be password.
OK.
And that is going to be the password that we pass in.
All right.
And it's extremely important that what you have here and here matches up exactly with what you have
here and here.
OK.
So now we have defined what our header is what our body is.
And so now we're actually ready to create the web request.
OK.
And so like we were looking in on their hub page all we got to do is say Hello Mo fire dot request.
So we create the request and what we want is this one right here because we're going to be doing a little
bit more complicated stuff than just simply making a web request.
We need to be able to send a web request with a specific type of method whether it's get post you know
et cetera.
We need to be able to pass in parameters which is our body here and we need to be able to specify the
type of encoding and we need to be able to say Pass headers as well.
All right.
So that might seem a little bit daunting at first but I promise as we keep using this you're going to
get the hang of it real quick.
OK.
So we see here that we need it you are well and we haven't actually defined that yet so let's come over
here to Constance as well as open up Safari and just run over to our Heroku page.
OK.
All right so here in her Roku go ahead and click on your chat to be app.
Come over here to settings and we are going to grab this.
You are right here and you can click on it if you want and you'll see that wait for it to come back
on a line.
All right there we go.
This is Chaddy P.I. is alive.
All right.
So good.
So if we come over here to a postman what you see here is the local host 2005 for our online Heroku
version that is this guy right here.
OK so jump back to X code with that you are Ehle copy and we are going to set up our Ural Constance
and the first one is our base Yoro because it's a base.
You are all equal to piano that you are all that we just copied plus the one at the end for version
1.
Then if we look in Postman the what comes after that his account slash register.
OK.
So are you are all or register is going to be equal to base hopes and need to do the string interpolation
here.
So that's going to be bass you are l Plus account slash register tacked onto the end.
So when I say that and jam packed into our office service here and we're going to pass in the U r l
n that u r l he is u r l underscore register.
The method is of course Dr. Post and which you can again see here in post-Mandela post.
The parameters is the body soon to say body.
The encoding is just on.
Let's see here Jewson encoding the default and the headers is of course our header that we created right
above.
And then we're going to say Dot.
And this is where we specify our response.
And you see that there's a whole bunch you can do response data where the response just comes as data
as the sun for this particular case we're going to do a response string.
Most of the time you'll be working with response Jason.
But in this particular case for the register API call it a response string.
Ok.
Press that and then press return again so that we get the completion handler.
And when I say here with this selected here I'm going to say response so I'm just renaming what we get
past to use as response and hearing code.
We're just going to say if response does result that error is equal to nil.
So if everything went hunky dory then we're going to see a completion.
Tis true.
All right and so this completion is right here the custom completion handler that we that we coded so
that we'll know when the web request is completed and when it's successful.
So if everything didn't go well else then we're going to say completion is false and we're going to
go ahead and do it.
Debug print to see see what went wrong.
Debug print.
And we're going to.
Response result that error as any.
So that's just going to print out what went wrong for us.
I just going to save that and you know we are running really long on this whole mess and so I'm afraid
I'm going to have to cut it short right here.
But so far in this lesson what we've done is we've created our three office service variable's is logged
in off token user e-mail.
And then we have created our register user function and the next lesson and we're going to actually
use it.
OK.
So just to finish off real quick I'm going to go ahead and commit our changes.
So I'm back here at PWT to make sure I'm in the right directory get status and then get add that get
commit dash.
And this is lesson nine.
All right guys I will see you in the next one when we are going to work more with the API.