Already ladies and gents will come back Johnny B you would defer those scum.
And in this lesson we are going to do some really cool stuff.
We're going to get the API that is going to power our chat app up and running.
All right.
So you may have been wondering how we are going to actually send and receive messages and stuff.
And that is through the awesome API that we are providing for you.
But a lot of work into making it and so we're really excited for us to use it.
It's an awesome API.
It's built one node Express and the Mangu database.
It lets you send and receive messages create and log in with authenticated users create channels that
utilizes socket technologies our messaging will be instantaneous.
So like this is a legit API that you guys are getting access to.
But now this isn't a course about how to build an API.
So I'm not going to go into too much depth on how the actual API code works on my ticket.
We might take a quick tour but just about everything that the API does and contains You can learn in
Jack's awesome API courses available on our dev slopes platform and you to me.
So we are using our own API code but for this to be a real chat app you want to be able to have your
app hosted and be able to chat with other people on other computers right.
Otherwise you just be sitting there talking to yourself.
So we are going to host the code on an awesome service called Heroku hosting just means that our code
has a home somewhere on the internet so we can use it from anywhere.
We are also going to use a Mangu database service called Emel abs and everything we are using you can
use for free to get started.
And there are three ways that we can set up the API and we're going to go over all three.
The first is using heroin who's really cool.
One button deploy feature meaning you just click one button and if you have if you already have a an
account and a verified account set up it just automatically sets everything up for you.
But like I said for that to work you need to have a verified account which means you have to have a
credit card on file.
It's still free.
You won't get billed for anything but for whatever reason Heroku requires that you be a verified account
with a credit card on file to use to use that feature.
So if you're if you're if you're not comfortable giving them your credit card info or you just don't
have one or you're somewhere where you can't get one.
We're also going to cover another way to do the exact same thing.
I'm going to just take a little bit more work and set up.
All right.
So got you covered there too.
And I we'll go over hosting it locally though like I mentioned you'll only be talking to yourself.
However this can be super useful if you are you know you're feeling brave and you want to modify or
expand on the API code.
You can do all that locally.
Test it out and then push it to live when it looks good.
So let's get started and we're going to start out with this.
The easiest one which is the one button deployed.
So I'm just going to open up a browser window here and we're going to go to Heroku dot com
and take a look around their site.
They got some really cool stuff.
Basically it just makes getting your hosted app up and running a lot quicker.
All right.
And so you can sign up here.
So the Senate process is really straightforward gesture information.
The primary development language.
Go ahead and select node dodgiest since that's what our API is written.
And then once you're all signed up I'll see you on site.
All right so once you're signed up and you're in we're going to go and open up a new tab and we're going
to go to get hub dot com slash slopes and look for the Mac chat API.
Click on that and then just come down here and so here's the read me for it.
Go ahead and you can read through that learn a little bit about how it works but what you need to do
is come down here and click on deploy to Heroku.
So this is that one button that I was talking about.
So just click on it and then I'll jump over to Heroku and you can put in an app name optional.
If you leave it blank then they'll kind of just make up one for you.
But we're going to say chatty chat can't have it it's going to be all lowercase No spaces just just
letters and message and chat chat.
All right change chat doesn't really matter.
And this isn't going to be the this probably isn't going to be the one that we really use I'm just showing
you this for the one button deploy from the HHI chat and it shows the add on that we're going to be
using just say deploying.
And so right.
So here's where it pops up for.
To do the one button deploy.
Got to be a verified account.
So I'm going to go ahead and put in my credit card info and I'll see you guys in a second after that's
done someone you put in your account and your credit card information you may need to press the ploy
again but once you do that then it's going to start building out your app and getting it ready to deploy
on Heroku.
All right.
Once it's all done you'll see here is his app was successfully deployed.
So go ahead and click on view and that will open us up in a new window and is his message chat API is
alive.
So we now have our app actually hosted our API code at least and it's already hooked up.
So if we click on manage app it'll take us to text to the app and you have some some information here
overview.
So the resources we have here and in the lab would be.
And so this is where all of the data is actually stored.
So Heroku hosts the API code itself but we also need a place for all of the data to be held that the
messages the users that chat channels all of that information is going to be stored in this Mongo Mangu
database right here.
And if we click on it and you can actually it actually take you to that that account and you can see
here collections of collections is another name for the different types of data that will be used for
instance.
Once we have users there will be a question for users.
Once you start sending messages there will be a collection for messages and so forth don't you to miss
too much mess with too much in here yet.
That'll be for a little bit later on.
But basically that's all you need to do to get your API code posted with and with a database attached
to it.
All right.
So that's it.
We are pretty much ready to use this API as is.
All right.
And then so how you would do that is once we get in escrowed once we get the code up to log in and all
that kind of stuff we will use.
Let's see here and we'll use this.
We'll use this you r l for all of our API web requests.
All right.
So that's it.
Super super simple with the one button deploying.
And so if you can use the credit card.
Highly recommend using it doing it this way.
Super simple but like I said if you can't or don't want to don't fear we are going to show you how to
do it the other way right now.
OK.
So if you don't want to use your credit card information then there's a few more steps involved but
it's not too bad.
So let's go ahead and get started with that.
First thing we're going to do and this is just my other Heroku account.
First thing we're going to do is we're going to go get the API code.
So we're going to head back over to get dot com slash slopes.
Maquette API.
Well we're going to do is we're going to clone the repo.
So here I'm going to copy the copy of the euro and I'm going to open up terminal and no and publicize
them I'm going to CD and CD to the desktop.
And I'm just going to clone it to the desktop so I'm going to say get a clone and then I'm going to
paste that you are el.
There we go.
And then I am going to use them as my
text editor.
And so if you just say atom space period if you have it installed then it'll open it right up inside
of atom in case of here we are open an atom.
And here is our API code Mac chat API.
And if you want you can browse around.
Check things out.
Well we're going to be working on is right here in source config and then index.
Yes.
So this is where we're going to be making some changes right here in this Mongul you are.
But we're not quite ready to do that so we're going to jump back into safari.
And now we need to sign up for labs.
So just Google Labs and right here Mongo DB hosting is what we want
and you can sign up for free.
So just go ahead and put in an account name user name email passwords.
Time to and do that and I will see you inside.
OK.
So once you're in here if you're a first time user you're going to have to verify your e-mail.
So when just click that link to send the email for me for some reason it took like half an hour for
the verification email to arrive.
Hopefully that doesn't happen to you but if so hang tight it's on its way and just come on back whenever
that whenever you're able to verify your account.
But once you do so here we're going to create a new Mangu D-B deployment.
So we're going to say create new and we're going to use a single node sandbox set up and that's that's
the that's their free version.
OK.
You get up to a half gig.
So choosing the sandbox come down here you can set a database name so we're going to just see chat chat
chat.
I'm going to create the new Mongo DB deployment by clicking here.
And we we have our Mongo database deployment set up so we can click here.
And so it says here to connect using a driver via the standard mongered to be you are.
You are all we are going to use this guy right here so this right here is what is going to go inside
of our API code right here for the Mangu you are.
But first we have to create a user.
So you see here in the URL that's asking for a database user in a database password that's not the that's
not your account email and password.
You have to come here to harass as users and then add database user and the database user name you can
name whatever you want.
When I say joining the database password I'm just going to say one two three four five six one two three
four five six and don't click make read only.
This would be if you had a database where you only wanted people to read poll data.
You don't want them adding anything to your database at all.
But we obviously want to write to it because we're going to be sending in chat messages and all that
kind of stuff.
So make sure that's unchecked and then say create.
No.
OK.
Now we have a user here.
And so then we can go ahead and copy this your L here and head back over to our at home or whatever
text editor you are using to edit the API code.
And again it's in the API folder under source config index.
Yes and we are editing the Mangu you RL.
OK.
So I'm going to just replace quotation marks and that I guess I didn't copy it.
OK so select this.
Copy it and paste and then replace the DBI user with the user that you just created.
And right here replace it with the password one two three four five six.
You should probably choose him or seek your password.
All right.
And I'm going to save that.
So now our API code will be linked up with the Mangu database because of because of this work that we
just did but now we need to get our local modified version of our API code onto our Heroku account.
Case I'm going to come back to Safari and head over to our apps and I'm going to say create new app
and name it I say Chaddy chat.
J.B. Oh looks can change.
J.B. is available and to say create app
and then it gives us some options for how to get our code up there.
We are going to use the Heroku CLID.
All right.
So if you haven't ever done this we're going to just go ahead and follow the instructions here.
So we're going to download and install the heroic UCLA mean click there and you can either do it with
homebrew or you can click on the Mac OS installer.
So with homebrew if you don't already have homebrew installed then you're going to need to click this
link and install homebrew and they have instructions on how to do that.
Right here in this link.
OK.
So all you got to do is paste that in a terminal command.
So once you have homebrew installed if you don't have it already then you can do Brou install Heroku
already have it installed.
But I'll do it again anyways just because it'll probably just reinstall that's when I say brew install
Heroku So if it needs to It'll update homebrew.
Right so that's done.
So now we have the Heroku Seelye installed on our computer the other way to do it is just download and
run the Mac OS installer.
Pretty simple downloads.
You open up the download folder.
Open up the installer and just follow instructions.
I'm not going to do that since I just did it with Brou.
OK so once we have the Selye dulled.
See here come back to our instructions here.
We are going to log in to Heroku So we're going to come back to terminal and clean my terminal with
command K and I'm going to say Horo to log in and it's going to prompt for your Heroku credentials.
I say Johnny at the slowest com press return and I'll ask you for your password and can grab my password
here paste it and then press return.
All right so now you know I'm logged in.
And then what we're gonna do is just following these instructions we're going to create a new repository.
We're going to add the remote to to her Roku so I'm going to just copy this.
They have it pre-populated with our app name so copy then come back to terminal and say paste
here and we failed for some reason.
Oh I know.
Because where are we right now PWT.
Because we are not in the project so I need to CD to our project is going to CCV Mac chat API.
Oh yeah there we go.
And then I'm going to copy that command to terminal and paste it.
And there we go.
And so then the next step is just to add and commit our changes which was to change the one would be
your URL and then to push.
So we're just going to say it's just it bit soon to say add that committed cache and added Mangu d d
l and get push Heroku M..
So now it's going to do the same thing more or less that the one button deploy did you'll be able to
see the same output right here.
The Says deployed to Heroku.
So we're all done.
So let's go ahead and click back on here and you can just click on personal apps and there we have our
Heroku.
You can click on it.
Let's head over to Merhi.
Click on open app and if it worked.
Yep there you go.
Message chat API is alive.
All right so that is pretty cool.
All right guys so in this video we got our API up and running with two of the three ways that you can
do it with the one button click deploy.
And then also with the other slightly more involved way both without having to use a credit card and
learning a little bit about the Heroku Seelye and pushing projects to Heroku.
All right so our API code is now live on the Internet hosted.
And so once we get once we're ready and back into X code we'll be able to actually start interacting
with the API registering and creating users logging in sending messages and all that awesome stuff.
But first offer first up in the next video we're going to cover the third option which is to host it
locally and we're going to talk about some of the different tools that you can use to make local development
easier using tools like post man Roboam Mongo D.B and some other things are so because I'm excited for
that.
And I will see you in the next one.