1 00:00:07,980 --> 00:00:08,990 Come back everybody. 2 00:00:09,010 --> 00:00:10,890 B be here with soap's dot com. 3 00:00:11,040 --> 00:00:18,360 In this lesson we are going to set up a local hosting environment right now like I already said. 4 00:00:18,420 --> 00:00:22,500 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,500 --> 00:00:24,220 by yourself just talking to yourself. 6 00:00:24,570 --> 00:00:31,740 But knowing how to set up local instances is extremely important since you should never do code changes 7 00:00:31,740 --> 00:00:33,380 on Live servers. 8 00:00:33,420 --> 00:00:36,090 You want to always develop and test things out locally first. 9 00:00:36,090 --> 00:00:36,720 OK. 10 00:00:37,050 --> 00:00:44,010 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,310 --> 00:00:47,620 video this lesson is completely optional. 12 00:00:47,670 --> 00:00:52,810 You do not have to have it locally hosted for the rest of the course. 13 00:00:52,890 --> 00:00:58,520 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,590 --> 00:01:03,300 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,300 --> 00:01:04,160 skill to know. 16 00:01:04,170 --> 00:01:04,620 All right. 17 00:01:04,620 --> 00:01:05,480 Moving on. 18 00:01:05,910 --> 00:01:13,350 So since the API is built on Node Yes and Mangu D-B we are going to need to download these libraries. 19 00:01:13,350 --> 00:01:16,290 Like I said earlier this isn't a course on API dev. 20 00:01:16,440 --> 00:01:22,310 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,460 --> 00:01:31,040 going to pull up a browser here and we are going to just Google. 22 00:01:31,250 --> 00:01:32,220 I was going to Google. 23 00:01:32,230 --> 00:01:33,840 No yes but it took me right to it. 24 00:01:33,840 --> 00:01:35,280 No just not. 25 00:01:35,660 --> 00:01:42,500 And all we need to do is download and you want the LDS version this is the recommended for most users. 26 00:01:42,630 --> 00:01:44,290 LTE stands for long term support. 27 00:01:44,310 --> 00:01:50,310 So when I click on that and that's just going to download a package and once that's done I'm just going 28 00:01:50,310 --> 00:01:53,910 to open that up and go through the install process music. 29 00:01:53,940 --> 00:01:58,860 Do you agree. 30 00:01:58,860 --> 00:02:02,920 Install it in your admin password 31 00:02:09,900 --> 00:02:16,150 and clubs and you can go ahead and move that thought to the trash. 32 00:02:16,270 --> 00:02:16,890 All right. 33 00:02:17,040 --> 00:02:20,390 Easy next step we need to get Mongo D-B. 34 00:02:20,550 --> 00:02:24,960 So I'm going to open up a new tab and Google mongered D.B 35 00:02:27,510 --> 00:02:31,730 and come down here to Mongolia before giant ideas. 36 00:02:32,580 --> 00:02:40,090 And we want to go to download and we have here instructions for installing with homebrew. 37 00:02:40,170 --> 00:02:42,380 So we're going to go ahead and do that with ROOM. 38 00:02:42,780 --> 00:02:44,390 OK so we're going to use homebrew. 39 00:02:44,430 --> 00:02:46,940 So let's see here we can. 40 00:02:47,240 --> 00:02:52,680 It's going to come down here install among would be community edition with homebrew. 41 00:02:53,040 --> 00:03:03,300 So you can click here to go to homebrew and to install it and you get a copy this you are l cup and 42 00:03:03,300 --> 00:03:09,060 go to open up a terminal and paste it and have it installed but it'll just update it. 43 00:03:09,150 --> 00:03:18,900 And if you press Return to continue on our Fun Size here and put in my password and that'll install 44 00:03:18,900 --> 00:03:21,060 I'll take a few minutes. 45 00:03:21,060 --> 00:03:22,600 All right so that's installed. 46 00:03:22,630 --> 00:03:27,040 And let's go back to our instructions. 47 00:03:27,090 --> 00:03:31,740 So it says to do a brew update brew update 48 00:03:34,710 --> 00:03:40,740 already up to date since I just installed it and now we just need to say brew install mongered D-B to 49 00:03:40,830 --> 00:03:43,210 install fungo D-B 50 00:03:47,090 --> 00:03:48,770 Anson's already had it installed. 51 00:03:48,990 --> 00:03:56,600 Then it just tells me that right so that's how you'll go about installing no J S and Mongo DB. 52 00:03:56,750 --> 00:03:59,740 So those are the two main tools that we are. 53 00:03:59,950 --> 00:04:01,850 Are libraries ever going to need. 54 00:04:02,030 --> 00:04:10,820 And so the node handles the no G-S is used for handling the API code and the mongered D-B is used for 55 00:04:10,820 --> 00:04:13,100 the databases database stuff. 56 00:04:13,240 --> 00:04:13,960 OK. 57 00:04:14,450 --> 00:04:19,760 All right so now that we've got those two down we're going to download a couple of tools that will help 58 00:04:19,760 --> 00:04:22,940 us in working with the API code. 59 00:04:22,940 --> 00:04:28,090 And the first one is called post man just Google. 60 00:04:28,280 --> 00:04:31,730 And then right here supercharger API workflow. 61 00:04:33,500 --> 00:04:42,250 So you can download the postman and just click on Mac OS and it'll start downloading for you. 62 00:04:42,560 --> 00:04:44,370 So that's downloading. 63 00:04:44,600 --> 00:04:46,010 I already have it installed. 64 00:04:46,070 --> 00:04:53,760 So you just can actually cancel that download but once you have it downloaded go ahead and open it up 65 00:04:56,410 --> 00:04:58,160 and guess what postman does. 66 00:04:58,160 --> 00:05:07,720 It's a really cool app that lets you do web requests using all of the important methods like get Post 67 00:05:07,730 --> 00:05:11,840 put all that kind of stuff and you can have headers. 68 00:05:11,850 --> 00:05:14,100 You can have a body. 69 00:05:14,180 --> 00:05:19,580 And so we're going to be using this a little bit in the local hosting environment to make sure things 70 00:05:19,580 --> 00:05:21,200 are working right again. 71 00:05:21,290 --> 00:05:28,550 So that's a really great tool and I have a collection so these are called collections different types 72 00:05:28,550 --> 00:05:32,030 of requests. 73 00:05:32,060 --> 00:05:38,880 So I'm actually going to show you how to import the one that I have for you guys when I delete my collection. 74 00:05:39,050 --> 00:05:46,950 And then inside of your assets folder Let's see here do this. 75 00:05:48,950 --> 00:05:57,220 So instead of your assets folder you have a file called Mac chat API collection. 76 00:05:57,220 --> 00:05:57,840 OK. 77 00:05:58,050 --> 00:06:07,710 So in postman and postman go to import here and then you can either drag that file in or choose files 78 00:06:08,500 --> 00:06:18,370 because when we say desktop assets and the one we want is right here maquette API collection. 79 00:06:19,370 --> 00:06:20,500 OK there we go. 80 00:06:20,640 --> 00:06:25,500 And that just reinforce those those requests that I had. 81 00:06:25,590 --> 00:06:31,580 And so what we can do is here for instance this one here says register users a post request. 82 00:06:31,890 --> 00:06:39,000 It has already the local host information you are l and the body and the header. 83 00:06:39,150 --> 00:06:46,110 And so once we have the local instance up and running all I have to do is press send and it will actually 84 00:06:46,350 --> 00:06:48,180 register a new user. 85 00:06:48,330 --> 00:06:52,190 And then you can off in that user you can add the user. 86 00:06:52,200 --> 00:06:57,940 You can you can do pretty much anything that the API is capable of doing right here from postman. 87 00:06:58,080 --> 00:07:01,970 You can run a request to find all the users of that user. 88 00:07:02,030 --> 00:07:10,500 So it's a really great tool for working in local environments or even even a live API is pretty much 89 00:07:10,500 --> 00:07:11,640 anything that you need to do. 90 00:07:11,640 --> 00:07:17,340 Web requests for and it's really helpful because you can you can do all of that right here and you can 91 00:07:17,340 --> 00:07:18,410 see the results. 92 00:07:18,600 --> 00:07:22,860 You don't have to set up all of the client site information. 93 00:07:23,010 --> 00:07:28,710 You don't have to code and Alan will file a request get the response of the saw and all that kind of 94 00:07:28,710 --> 00:07:31,650 stuff you can get already here in Postman. 95 00:07:31,740 --> 00:07:37,890 So the next program tool that we're going to use is one called the robo Mongo you can get that up portable 96 00:07:37,890 --> 00:07:43,830 Mangu dot org and just download that app OK. 97 00:07:44,160 --> 00:07:48,440 And I have that also on my computer already. 98 00:07:48,450 --> 00:07:55,380 So when you open it up you'll get this right here robo remotely be connections and I just named mine 99 00:07:55,530 --> 00:08:01,400 for the 27 0 1 7 is the one that you that you want and you can edit it. 100 00:08:01,680 --> 00:08:03,760 Change the name of it. 101 00:08:04,070 --> 00:08:13,830 But make sure but make sure that it's local host and 27 0 1 7 ok to save that and say connect but if 102 00:08:13,830 --> 00:08:17,150 you don't have Mangu up and running then nothing will happen. 103 00:08:17,160 --> 00:08:23,150 So quit that if you and I just hang on for the next step here. 104 00:08:23,820 --> 00:08:28,880 All right so I'm going to go ahead and quit this browser window. 105 00:08:29,040 --> 00:08:34,880 So we have our four tools that we did for this lesson. 106 00:08:34,950 --> 00:08:39,740 No Jack ass would be be postman and robo Mongo. 107 00:08:39,900 --> 00:08:46,290 So we got this superhero team of apps and now we need them to all work together to actually do something 108 00:08:46,470 --> 00:08:46,980 good. 109 00:08:47,040 --> 00:08:53,310 So we're going to do is I'm going to open up terminal again and I'm going to clean my terminal command 110 00:08:53,310 --> 00:08:53,850 key. 111 00:08:54,010 --> 00:09:05,430 I'm going to CD to the desktop CD into our Mac chat API and then I'm going to say I not to open Adam 112 00:09:05,720 --> 00:09:10,510 for for this project I'm to bring that over here. 113 00:09:10,510 --> 00:09:15,740 And so in the previous lessons we set up the poor and Mangu you IRL. 114 00:09:15,930 --> 00:09:22,830 And that's for using the hosted the web hosted servers but for local hosting I'm just going to comment 115 00:09:22,860 --> 00:09:26,460 those two lines out and we already have it set up here. 116 00:09:26,790 --> 00:09:29,890 So I'm going to comment these two lines. 117 00:09:29,940 --> 00:09:37,710 So now we are going to be listening on our local port of 2005 and our Mangu you are l is our local host 118 00:09:38,160 --> 00:09:40,620 2 7 0 1 7 chat API. 119 00:09:40,620 --> 00:09:41,180 Okay. 120 00:09:41,400 --> 00:09:52,500 So when to save that and then come back into terminal and to get NPM or to get the API code running 121 00:09:52,500 --> 00:10:03,380 with node when you're inside when you're seeded into the API you want to say NPM install and that's 122 00:10:03,380 --> 00:10:09,350 going to install the node packages that are required for this API to function. 123 00:10:09,950 --> 00:10:14,630 And I already did that so that's why it's saying no presentor field then you're going to do. 124 00:10:14,660 --> 00:10:20,460 N.P. am well first we need to get Mangu running. 125 00:10:20,500 --> 00:10:26,070 So do you can have multiple tabs open interm also if you say command t that will open up another commit 126 00:10:26,230 --> 00:10:28,020 another terminal tab. 127 00:10:28,120 --> 00:10:31,760 And so here we're going to just say Mongo D. 128 00:10:31,840 --> 00:10:35,950 And this gets the Mangu and up and running. 129 00:10:36,820 --> 00:10:43,540 And you can see here that it says waiting for connections on port 2 7 0 1 7. 130 00:10:43,540 --> 00:10:45,670 So among the D-B is up and running. 131 00:10:45,910 --> 00:10:50,180 So now I'm back in our chat API directory. 132 00:10:50,260 --> 00:10:58,540 We can now say NPM run Dev and that will fire up the API code on Node. 133 00:10:59,020 --> 00:11:05,090 Right there we go sevices started on port three thousand five just as we expect the Mung would be. 134 00:11:05,710 --> 00:11:12,580 You are all you see right here is the same as what we have in our in our API code and database connection 135 00:11:12,580 --> 00:11:13,640 is ready. 136 00:11:13,660 --> 00:11:15,720 So this is really cool stuff guys. 137 00:11:15,730 --> 00:11:23,620 We got our locally hosted API code running working with mongered TB and it's just waiting for us to 138 00:11:23,620 --> 00:11:24,100 do some work. 139 00:11:24,100 --> 00:11:37,820 So you know open postman backup and puts you over here on the left going to open up robo Mongo and going 140 00:11:37,890 --> 00:11:38,730 to say connect. 141 00:11:38,740 --> 00:11:45,520 And this time it should connect and then we have a database for a chat API that's going to put you over 142 00:11:45,520 --> 00:11:47,310 here on the right. 143 00:11:47,770 --> 00:11:53,740 And now here in postman actually it maybe I don't want this quite like that. 144 00:11:53,800 --> 00:11:54,010 OK. 145 00:11:54,010 --> 00:12:02,500 So with our in our Mac chat API collection I'm going to use registered user and this is all set up already 146 00:12:02,500 --> 00:12:06,850 so local host V-1 account register. 147 00:12:07,000 --> 00:12:13,300 And so this is the API function to register a user. 148 00:12:13,300 --> 00:12:16,760 So it looks like we have a few steps here first right here says one. 149 00:12:16,810 --> 00:12:19,530 We're going to register user 2. 150 00:12:19,540 --> 00:12:25,990 We are going to log in the user and three we are going to add create a user. 151 00:12:25,990 --> 00:12:26,470 OK. 152 00:12:26,590 --> 00:12:31,120 So the first step is to register the user and let's see here. 153 00:12:31,120 --> 00:12:34,110 Let me open up robo Mongo chat API. 154 00:12:34,120 --> 00:12:35,900 Let me see if we already have any collections. 155 00:12:35,980 --> 00:12:42,720 OK so we don't have we don't have any collections here so I'm going to just say press send. 156 00:12:42,820 --> 00:12:47,090 You can change the email on password if you want to verify that it's working for you. 157 00:12:47,110 --> 00:12:49,940 No say send and. 158 00:12:50,440 --> 00:12:55,250 OK it looks like the user exists with the given name already so I'm going to go ahead and just change 159 00:12:55,260 --> 00:13:05,870 this to is press and again OK so it looks like our API code crashed. 160 00:13:05,920 --> 00:13:13,420 So to stop the API code you can say control C and that will stop the process. 161 00:13:13,420 --> 00:13:14,960 Same thing with Mongomery. 162 00:13:15,310 --> 00:13:20,350 And so we're just going to fire that back up and say NPM around dev 163 00:13:23,050 --> 00:13:30,110 came in and we're back up and running I'm going to jump back into postman and I change the e-mail and 164 00:13:30,110 --> 00:13:32,640 I'm going to say send. 165 00:13:32,850 --> 00:13:33,690 And here we go. 166 00:13:33,690 --> 00:13:37,090 We see that we successfully created a new account. 167 00:13:37,230 --> 00:13:39,930 And so what is actually happening here. 168 00:13:39,960 --> 00:13:42,110 Let's let's take a quick detour. 169 00:13:42,110 --> 00:13:46,920 No I said it wasn't going to jump too much into it yet code but we can we can take a couple of minutes 170 00:13:46,920 --> 00:13:47,490 here. 171 00:13:47,490 --> 00:13:56,570 All right so we are sending a request to this you are Al V-1 account register. 172 00:13:56,610 --> 00:14:03,150 All right so let's open up Adam your project viewer is not showing you can use command shift backslash 173 00:14:04,350 --> 00:14:05,590 to get that to show. 174 00:14:05,830 --> 00:14:06,080 OK. 175 00:14:06,090 --> 00:14:15,450 So I wanted to show you some of the files and here's So if we go to a controller account here you see 176 00:14:16,070 --> 00:14:17,950 we want a count register. 177 00:14:17,970 --> 00:14:24,690 This is the API code that is called When we run this post man post. 178 00:14:24,690 --> 00:14:30,450 So we are passing two parameters the email and the password and it creates a new account and then sends 179 00:14:30,450 --> 00:14:34,760 back a status saying successfully created a new account. 180 00:14:34,800 --> 00:14:36,920 And so that's the message that we're seeing here. 181 00:14:37,020 --> 00:14:42,930 And so I feel free to browse through the through the API code kind of familiarize yourself with it a 182 00:14:42,930 --> 00:14:45,380 little bit better. 183 00:14:45,450 --> 00:14:45,810 Yes. 184 00:14:45,830 --> 00:14:50,010 So then the next thing that I want to show you what is once we do this with postman we're actually writing 185 00:14:50,010 --> 00:14:59,070 to our local Mangu database so if we open up robo Mongo and we we refresh our chat API and we click 186 00:14:59,070 --> 00:15:07,850 on collections and then click on accounts you'll see that we have the the account that we just created 187 00:15:07,870 --> 00:15:08,920 username G. 188 00:15:08,960 --> 00:15:10,090 G. 189 00:15:10,200 --> 00:15:11,090 BIZ. 190 00:15:11,270 --> 00:15:13,170 All right so that is pretty cool. 191 00:15:13,170 --> 00:15:20,160 Next up we can off a log in user and so we click on logging user. 192 00:15:20,260 --> 00:15:28,380 The body J.J dot com and we send that here we should actually get a lot more information returned. 193 00:15:28,380 --> 00:15:31,970 We're going to get the user name as well as a token. 194 00:15:31,980 --> 00:15:42,240 OK so most of the API requests are locked down which means that no one can access that information unless 195 00:15:42,240 --> 00:15:45,810 they are logged in and they have this off token. 196 00:15:45,810 --> 00:15:50,940 All right so I'm going to copy this off tokin and then we can add a user using that or token that we're 197 00:15:50,940 --> 00:15:59,400 going to go to had a user body or a headers and I'm going to replace that token with this valid one 198 00:15:59,400 --> 00:16:00,910 that we just generated. 199 00:16:01,390 --> 00:16:01,740 OK. 200 00:16:01,740 --> 00:16:09,810 And then in the body we can change this up name to see Johnny B. 201 00:16:09,810 --> 00:16:15,990 Email is J.A.G. dot com avatar name is dark 5 and the Avatar color is X a value. 202 00:16:15,990 --> 00:16:20,580 These these two things will make more sense here in a couple of lessons. 203 00:16:20,580 --> 00:16:28,500 When we were back in X code but I can do this and say Send and there we go we have a we've created a 204 00:16:28,500 --> 00:16:31,700 new user and it returns this information for us. 205 00:16:31,860 --> 00:16:36,800 And if we go back into Roboam Mangu and we refresh here. 206 00:16:36,870 --> 00:16:44,070 So if we right click on chat and say refresh then we see that we have a new collection here called users 207 00:16:44,130 --> 00:16:48,650 we click on that we have the information that we just send from postman. 208 00:16:48,660 --> 00:16:53,620 So this is really cool stuff guys I hope you're excited about this. 209 00:16:53,640 --> 00:16:57,480 I think this is super super interesting and cool stuff. 210 00:16:57,510 --> 00:17:05,150 I mean just the options that are open to you as a developer once you know how to create and use back 211 00:17:05,150 --> 00:17:08,300 and AP eyes is huge you know. 212 00:17:08,670 --> 00:17:11,760 So yeah I hope your guys are enjoying this. 213 00:17:11,800 --> 00:17:18,250 And I think this is about all we're undercover for right now in this lesson with local hosting. 214 00:17:18,270 --> 00:17:25,950 Just to recap we downloaded noti Yes mum would be a couple of helper programs using postman and robo 215 00:17:26,340 --> 00:17:27,430 mango. 216 00:17:27,740 --> 00:17:34,650 We were running the local instance of the API code using node. 217 00:17:34,710 --> 00:17:40,740 And to do that you in terminal you'll say NPM install then PM run dev. 218 00:17:41,100 --> 00:17:47,670 But first we have to have mongered be up and running with Mangu would be and yes that's pretty much 219 00:17:47,670 --> 00:17:48,330 it. 220 00:17:48,610 --> 00:17:53,430 And the next lesson is learning be jumping back into X code and actually implementing the client side 221 00:17:53,760 --> 00:17:56,120 code to communicate with our API. 222 00:17:56,130 --> 00:17:56,820 All right. 223 00:17:57,150 --> 00:18:00,400 So Kobe is enjoying this and I'll see you in the next one.