1

00:00:08,030 --> 00:00:14,210

Come back everybody Johnny B you with soap's dot com in this lesson we are going to set up a local hosting



2

00:00:14,210 --> 00:00:15,300

environment.



3

00:00:15,740 --> 00:00:18,230

Now like I already said.



4

00:00:18,470 --> 00:00:22,550

Once you have it all set up and you're chatting in your app it's going to be like you're in a room all



5

00:00:22,550 --> 00:00:24,270

by yourself just talking to yourself.



6

00:00:24,620 --> 00:00:31,790

But knowing how to set up local instances is extremely important since you should never do code changes



7

00:00:31,790 --> 00:00:33,470

on Live servers.



8

00:00:33,470 --> 00:00:36,140

You want to always develop and test things out locally first.



9

00:00:36,140 --> 00:00:36,950

OK.



10

00:00:37,100 --> 00:00:44,060

That being said if you already got the API code hosted using one of the two prior methods in the previous



11

00:00:44,360 --> 00:00:47,350

video this lesson is completely optional.



12

00:00:47,720 --> 00:00:52,880

You do not have to have it locally hosted for the rest of the course.



13

00:00:52,970 --> 00:00:58,610

We will touch on it a couple more times and do a few things but you don't have to have it.



14

00:00:58,640 --> 00:01:03,350

I do recommend that you stick around though because we're going to do some cool stuff and it's a great



15

00:01:03,350 --> 00:01:04,220

skill to know.



16

00:01:04,220 --> 00:01:04,570

All right.



17

00:01:04,670 --> 00:01:05,530

Moving on.



18

00:01:05,960 --> 00:01:13,400

So since the API is built on Node Yes and Mongo D-B we are going to need to download these libraries.



19

00:01:13,400 --> 00:01:16,490

Like I said earlier this isn't a course on API dev.



20

00:01:16,490 --> 00:01:22,810

So I'm going to show you how to use the tools but we may not go into too much of the details or I'm



21

00:01:23,540 --> 00:01:31,310

going to pull up a browser here and we are going to just Google.



22

00:01:31,400 --> 00:01:33,920

I was going to google no yes but it took me right to it.



23

00:01:33,920 --> 00:01:40,460

No just dot org and all we need to do is download and you want the LDS version this is the recommended



24

00:01:40,460 --> 00:01:42,480

for most users.



25

00:01:42,680 --> 00:01:44,360

Althea stands for long term support.



26

00:01:44,360 --> 00:01:50,360

So when I click on that and that's just going to download a package and once that's done I'm just going



27

00:01:50,360 --> 00:01:54,060

to open that up and go through the install process music.



28

00:01:54,090 --> 00:01:58,640

Do you agree.



29

00:01:59,020 --> 00:02:02,990

Install putting in your admin password



30

00:02:09,930 --> 00:02:17,880

and clubs and you can go ahead with that store to the trash easy.



31

00:02:17,900 --> 00:02:20,520

Next up we need to get Mongul D-B.



32

00:02:20,600 --> 00:02:25,010

So I'm going to open up a new tab and Google mongered D-B



33

00:02:27,560 --> 00:02:31,750

and come down here too among Would you be for giant ideas.



34

00:02:32,630 --> 00:02:40,130

And we want to go to download and we have here instructions for installing with homebrew.



35

00:02:40,220 --> 00:02:42,410

So we're going to go ahead and do that with homebrew.



36

00:02:42,830 --> 00:02:44,440

OK so we're going to use homebrew.



37

00:02:44,480 --> 00:02:51,770

So let's see here we can it's going to come down here install among would be community edition with



38

00:02:51,770 --> 00:02:52,750

homebrew.



39

00:02:53,090 --> 00:03:03,350

So you can click here to go to homebrewed and to install it and you can't copy this you are l copy and



40

00:03:03,350 --> 00:03:09,020

go to open up a terminal and paste it and have it installed but it'll just update it.



41

00:03:09,200 --> 00:03:18,980

And if you press Return to continue on pop or font size here and put in my password and that'll install



42

00:03:18,980 --> 00:03:21,110

I'll take a few minutes.



43

00:03:21,110 --> 00:03:22,670

All right so that's installed.



44

00:03:22,700 --> 00:03:27,100

And let's go back to our instructions.



45

00:03:27,140 --> 00:03:31,780

So it says to do a brew update brew update



46

00:03:34,780 --> 00:03:35,590

already up to date.



47

00:03:35,600 --> 00:03:43,290

As I just installed it and then we just been to say Brue install mongered D-B to install fungo DBI



48

00:03:46,900 --> 00:03:51,020

and since I already had it installed then it just tells me that.



49

00:03:51,100 --> 00:03:56,810

All right so that's how you'll go about installing no japes and Mongo D-B.



50

00:03:56,830 --> 00:04:01,920

So those are the two main tools that we are or libraries that we're going to need.



51

00:04:02,100 --> 00:04:10,890

And so the node handles the energy is used for handling the API code and the mongrel D-B is used for



52

00:04:10,890 --> 00:04:13,140

the databases database stuff.



53

00:04:13,270 --> 00:04:14,030

OK.



54

00:04:14,490 --> 00:04:19,800

All right so now that we got those two done we're going to download a couple of tools that will help



55

00:04:19,800 --> 00:04:22,880

us in working with the API code.



56

00:04:23,010 --> 00:04:33,320

And the first one is called post man just Google that and then find out here supercharge your API workflow.



57

00:04:33,730 --> 00:04:42,310

So you can download the postman and just click on Mac OS and it'll start downloading for you.



58

00:04:42,620 --> 00:04:44,420

So that's downloading.



59

00:04:44,640 --> 00:04:46,080

I already have it installed.



60

00:04:46,130 --> 00:04:50,130

So I'm just going can actually cancel that download.



61

00:04:50,780 --> 00:04:58,180

But once you have it download go ahead and open it up OK so the postman does.



62

00:04:58,230 --> 00:05:07,760

It's a really cool app that lets you do web requests using all of the important methods like get Post



63

00:05:07,770 --> 00:05:14,020

put all that kind of stuff and you can have headers and you can have a body.



64

00:05:14,240 --> 00:05:19,640

And so we're going to be using this a little bit in the local hosting environment to make sure things



65

00:05:19,640 --> 00:05:20,550

are working right.



66

00:05:21,350 --> 00:05:28,610

So that's a really great tool and I have a collection so these are called collections different types



67

00:05:28,610 --> 00:05:32,060

of requests.



68

00:05:32,090 --> 00:05:36,540

So I'm actually going to show you how to import the one that I have for you guys.



69

00:05:36,530 --> 00:05:42,590

I'm going to delete my collection and then inside of your assets folder.



70

00:05:42,770 --> 00:05:46,980

Let's see here do this.



71

00:05:48,750 --> 00:05:57,780

OK so instead of your assets folder you have a file called MacT chat API collection.



72

00:05:58,110 --> 00:06:07,770

So in postman and postman go to import here and then you can either drag that file in or choose files



73

00:06:08,540 --> 00:06:18,690

because when we say desktop assets and the one we want is right here MAXjet API collection.



74

00:06:19,370 --> 00:06:20,520

OK there we go.



75

00:06:20,700 --> 00:06:25,470

And that just reinforce those those requests that I had.



76

00:06:25,620 --> 00:06:32,550

And so what we can do is here for instance this one here says register user it's a post request it has



77

00:06:32,760 --> 00:06:39,210

already the local host information you Earl and the body and the header.



78

00:06:39,210 --> 00:06:46,170

And so once we have the local instance up and running all I have to do is press send and it will actually



79

00:06:46,410 --> 00:06:48,110

register a new user.



80

00:06:48,390 --> 00:06:52,240

And then you can off in that user you can add a user.



81

00:06:52,260 --> 00:06:57,970

You can you can do pretty much anything that the API is capable of doing right here from postman.



82

00:06:58,140 --> 00:07:02,010

You can run a request to find all the users of that user.



83

00:07:02,070 --> 00:07:10,530

So it's a really great tool for working in local environments or even even a live API is pretty much



84

00:07:10,530 --> 00:07:12,880

anything that you need to do web requests for.



85

00:07:12,990 --> 00:07:18,480

And it's really helpful because you can you can do all of that right here and you can see the results.



86

00:07:18,660 --> 00:07:22,840

You don't have to set up all of the client side information.



87

00:07:23,070 --> 00:07:28,740

You don't have to code an Alamo file request to get the response parse the saw and all that kind of



88

00:07:28,740 --> 00:07:29,070

stuff.



89

00:07:29,070 --> 00:07:31,690

You can get it all right here in Postman.



90

00:07:31,690 --> 00:07:37,540

All right so the next program tool that we're going to use is one called robo Mongo you can get that



91

00:07:37,540 --> 00:07:43,740

up portable Mangu dot org and just download that app OK.



92

00:07:44,220 --> 00:07:48,380

And I have that also on my computer already.



93

00:07:48,480 --> 00:07:54,200

So when you open it up you'll get this right here robo remotely connections.



94

00:07:54,300 --> 00:08:02,220

And I just named mine for the 27 0 1 7 is the one that you that you want and you can edit it and change



95

00:08:02,550 --> 00:08:03,970

the name of it.



96

00:08:04,180 --> 00:08:08,780

But make sure but make sure that it's local host and 27 0 1 7.



97

00:08:08,790 --> 00:08:09,360

OK.



98

00:08:09,510 --> 00:08:18,850

Save that and say connect but if you don't have Mangu up and running then nothing will happen so quick



99

00:08:19,050 --> 00:08:23,870

that if you and I just hang on for the next step here.



100

00:08:23,880 --> 00:08:28,960

All right so I'm going to go ahead and quit this browser window.



101

00:08:29,100 --> 00:08:34,980

So we have our four tools that we did for this lesson.



102

00:08:35,030 --> 00:08:37,750

No mom would be the postman.



103

00:08:37,920 --> 00:08:39,780

And robo Mongo.



104

00:08:39,930 --> 00:08:46,370

So we got this superhero team of apps and now we need them to all work together to actually do something



105

00:08:46,470 --> 00:08:47,070

good.



106

00:08:47,090 --> 00:08:53,070

So what we're going to do is I'm going to open up a terminal again and I'm going to clean my terminal



107

00:08:53,100 --> 00:09:03,080

command key I'm going to CD to the desktop CD into our Mac chat API and then I'm going to say have time



108

00:09:04,530 --> 00:09:05,240

to open.



109

00:09:05,310 --> 00:09:10,550

Adam for this project I'm going to bring that over here.



110

00:09:10,550 --> 00:09:15,800

And so in the previous lessons we set up the poor and Mangu you are l.



111

00:09:15,970 --> 00:09:22,880

And that's for using the hosted the web hosted servers but for local hosting I'm just going to comment



112

00:09:22,920 --> 00:09:26,780

those two lines out and we already have it set up here.



113

00:09:26,850 --> 00:09:29,950

So I'm going to uncomment these two lines.



114

00:09:30,000 --> 00:09:36,180

So now we are going to be listening on our local port of three thousand five and our Mangu you are l



115

00:09:36,300 --> 00:09:40,580

is our local host 2 7 0 1 7 chat API.



116

00:09:40,680 --> 00:09:41,260

Okay.



117

00:09:41,460 --> 00:09:52,560

So when to save that and then come back into terminal and to get NPM or to get the API code running



118

00:09:52,560 --> 00:10:03,210

with node when you're inside when you're seeded into the achcha API you want to say NPM install and



119

00:10:03,210 --> 00:10:10,830

that's going to install the no packages that are required for for this API to function and I already



120

00:10:10,830 --> 00:10:14,680

did that so that's why it's saying a predatory field then you're going to do.



121

00:10:14,700 --> 00:10:20,520

N.P. am well first we need to get Mangu running.



122

00:10:20,560 --> 00:10:26,050

So do you can have multiple tabs open interm also if you say command t that will open up another commit



123

00:10:26,290 --> 00:10:27,940

another terminal tab.



124

00:10:28,180 --> 00:10:31,750

And so here we're going to just say Mongo D.



125

00:10:31,870 --> 00:10:36,040

And this gets the Mangu Daymond up and running.



126

00:10:36,880 --> 00:10:43,430

And you can see here that it says waiting for connections on port 2 7 0 1 7.



127

00:10:43,600 --> 00:10:45,770

So among the D-B is up and running.



128

00:10:45,940 --> 00:10:50,240

So now I'm back in our chat API directory.



129

00:10:50,320 --> 00:10:58,480

We can now say NPM run Dev and that will fire up the API code on Node.



130

00:10:59,100 --> 00:11:06,070

Right there we go sevices started on port three thousand five just as we expect the Mongul D-B you are



131

00:11:06,070 --> 00:11:12,790

all you see right here is the same as what we have in our in our API code and database connection is



132

00:11:12,790 --> 00:11:13,680

ready.



133

00:11:13,690 --> 00:11:15,760

So this is really cool stuff guys.



134

00:11:15,760 --> 00:11:23,650

We got our locally hosted API code running working with mongrel D.B and it's just waiting for us to



135

00:11:23,650 --> 00:11:24,160

do some work.



136

00:11:24,160 --> 00:11:35,850

So when the open postman backup and puts you over here on the left we're going to open up robo Mongo



137

00:11:37,050 --> 00:11:38,790

and you say connect.



138

00:11:38,790 --> 00:11:44,460

And this time it should connect and then we have a database for a chat API.



139

00:11:44,570 --> 00:11:47,330

It's going to put you over here on the right.



140

00:11:47,820 --> 00:11:53,780

And now here in Bozeman I actually maybe I don't want this quite like that.



141

00:11:53,850 --> 00:11:54,060

OK.



142

00:11:54,060 --> 00:12:02,190

So with our and our Mac chat API collection I'm going to use a registered user and this is all set up



143

00:12:02,190 --> 00:12:07,050

already so local host V-1 account register.



144

00:12:07,050 --> 00:12:13,330

And so this is the API function to register a user.



145

00:12:13,350 --> 00:12:16,820

So looks like we have a few steps here first right here says one.



146

00:12:16,860 --> 00:12:19,580

We're going to register user 2.



147

00:12:19,590 --> 00:12:26,060

We are going to log in the user and three we are going to add create a user.



148

00:12:26,070 --> 00:12:26,520

OK.



149

00:12:26,640 --> 00:12:31,140

So the first step is to register the user and let's see here.



150

00:12:31,170 --> 00:12:34,160

Let me open up robo Mongo chat API.



151

00:12:34,170 --> 00:12:35,950

Let me see if we already have any collections.



152

00:12:36,030 --> 00:12:42,780

OK so we don't have we don't have any collections here so I'm going to just say press send.



153

00:12:42,870 --> 00:12:47,140

You can change the email on password if you want to verify that it's working for you.



154

00:12:47,160 --> 00:12:50,120

No say send and.



155

00:12:50,590 --> 00:12:55,290

OK it looks like the user exists with the given name already so I'm going to go ahead and just change



156

00:12:55,290 --> 00:13:09,140

this to Doc is press and again OK so it looks like our API code crashed so to stop the API code you



157

00:13:09,140 --> 00:13:13,490

can say control C and that will stop the process.



158

00:13:13,490 --> 00:13:15,030

Same thing with Mongo D.



159

00:13:15,380 --> 00:13:20,410

And so we're just going to fire that back up and say NPM around dev



160

00:13:23,290 --> 00:13:26,270

K and we're back up and running.



161

00:13:26,290 --> 00:13:32,680

I'm going to jump back into postman and I change the e-mail and I'm going to say send.



162

00:13:32,900 --> 00:13:33,740

And here we go.



163

00:13:33,740 --> 00:13:36,800

We see that we successfully created a new account.



164

00:13:37,280 --> 00:13:40,110

And so what is actually happening here.



165

00:13:40,250 --> 00:13:45,750

Let's take a quick detour and always said it wasn't going to jump too much into API code but we can



166

00:13:45,770 --> 00:13:47,540

we can take a couple of minutes here.



167

00:13:47,540 --> 00:13:56,630

All right so we are sending a request to this you are Al V-1 account register.



168

00:13:56,660 --> 00:14:03,200

All right so let's open up Adam your project viewer is not showing you can use command shift backslash



169

00:14:04,400 --> 00:14:05,650

to get that to show.



170

00:14:05,910 --> 00:14:10,340

OK so I wanted to show you some of the files in here.



171

00:14:10,340 --> 00:14:18,020

So if we go to a controller account here you see the one account register.



172

00:14:18,020 --> 00:14:24,390

This is the API code that is called When we run this post man post.



173

00:14:24,740 --> 00:14:30,500

So we are passing two parameters the email and the password and it creates a new account and then sends



174

00:14:30,500 --> 00:14:34,800

back a status saying successfully created a new account.



175

00:14:34,850 --> 00:14:36,940

And so that's the message that we're seeing here.



176

00:14:37,070 --> 00:14:43,190

And so feel free to browse through the through the API code kind of familiarize yourself with it a little



177

00:14:43,190 --> 00:14:45,280

bit.



178

00:14:45,470 --> 00:14:45,850

Yes.



179

00:14:45,880 --> 00:14:49,700

So then the next thing that I wanted to show you what was once we do this with postman we're actually



180

00:14:49,700 --> 00:14:58,880

writing to our local Mangu database so if we open up robo Mongo and we we refresh our chat API and we



181

00:14:58,880 --> 00:15:07,550

click on collections and then click on accounts you'll see that we have the the account that we just



182

00:15:07,550 --> 00:15:08,980

created username G.



183

00:15:09,020 --> 00:15:11,120

G dot biz.



184

00:15:11,320 --> 00:15:13,220

All right so that is pretty cool.



185

00:15:13,220 --> 00:15:23,390

Next up we can off a log in user and so we click on off logging user the body J.J dot com and we send



186

00:15:23,390 --> 00:15:28,430

that here we should actually get a more information return.



187

00:15:28,430 --> 00:15:31,740

We're going to get the user name as well as a token.



188

00:15:32,030 --> 00:15:42,320

OK so most of the API requests are locked down which means that no one can access that information unless



189

00:15:42,320 --> 00:15:45,860

they are logged in and they have this off token.



190

00:15:45,860 --> 00:15:50,990

All right so I'm going to copy this off token and then we can add a user using that token that we're



191

00:15:50,990 --> 00:15:55,330

going to go to had a user body or headers.



192

00:15:55,340 --> 00:16:01,050

And I'm going to replace that token with this valid one that we just generated.



193

00:16:01,480 --> 00:16:01,780

OK.



194

00:16:01,790 --> 00:16:09,840

And then in the body we can change this up name to say Johnny B.



195

00:16:09,860 --> 00:16:16,040

Email is J.A.G. dot com avatar name is dark 5 and the Avatar color is hexa value.



196

00:16:16,040 --> 00:16:20,630

These these two things will make more sense here in a couple of lessons.



197

00:16:20,630 --> 00:16:25,260

When we were back in Aix code but I can do this and say send.



198

00:16:25,670 --> 00:16:31,770

And there we go we have a we've created a new user and it returns this information for us.



199

00:16:31,910 --> 00:16:36,850

And if we go back into robot Mangu and we refresh here.



200

00:16:36,920 --> 00:16:44,120

So if we right click on chat and say refresh then we see that we have a new collection here called users



201

00:16:44,360 --> 00:16:45,250

click on that.



202

00:16:45,380 --> 00:16:48,670

We have the information that we just sent from postman.



203

00:16:48,710 --> 00:16:51,130

So this is some really cool stuff guys.



204

00:16:51,130 --> 00:16:53,670

I hope you're excited about this.



205

00:16:53,690 --> 00:16:57,540

I think this is super super interesting and cool stuff.



206

00:16:57,560 --> 00:17:05,190

I mean just the options that are open to you as a developer once you know how to create and use back



207

00:17:05,190 --> 00:17:08,310

and a.p eyes is huge you know.



208

00:17:08,820 --> 00:17:11,770

So I hope your guys are enjoying this.



209

00:17:11,810 --> 00:17:18,300

And I think this is about all we're going to cover right now in this lesson with local hosting.



210

00:17:18,320 --> 00:17:26,030

Just to recap we downloaded noti Yes mum would we be a couple of helper programs using postman and robo



211

00:17:26,510 --> 00:17:27,530

mango.



212

00:17:27,600 --> 00:17:34,710

We we were running the local instance of the API code using node.



213

00:17:34,760 --> 00:17:40,790

And to do that you in terminal you'll say NPM install then PM run dev.



214

00:17:41,150 --> 00:17:45,780

But first you have to have mung would you be up and running with Mongo D.



215

00:17:46,090 --> 00:17:48,420

And yes that's pretty much it.



216

00:17:48,670 --> 00:17:53,480

And the next lesson is learning be jumping back into X code and actually implementing the client side



217

00:17:53,810 --> 00:17:56,870

code to communicate with our API is all right.



218

00:17:57,200 --> 00:18:00,500

So Kobe is enjoying this and I'll see you in the next one.