1 00:00:07,760 --> 00:00:10,090 Already ladies and gents will come back. 2 00:00:10,100 --> 00:00:12,180 Joining me with this soapstar. 3 00:00:12,380 --> 00:00:15,280 And in this lesson we are going to do some really cool stuff. 4 00:00:15,320 --> 00:00:19,460 We're going to get the API that is going to power our chat app up and running. 5 00:00:19,460 --> 00:00:19,960 All right. 6 00:00:20,180 --> 00:00:25,100 So you may have been wondering how we are going to actually send and receive messages and stuff. 7 00:00:25,250 --> 00:00:29,140 And that is through the awesome API that we are providing for you. 8 00:00:29,450 --> 00:00:31,230 But a lot of work into making it. 9 00:00:31,250 --> 00:00:33,750 And so we're really excited for us to use it. 10 00:00:33,920 --> 00:00:34,970 It's an awesome API. 11 00:00:35,210 --> 00:00:39,110 It's built to one node Express and the Mangu database. 12 00:00:39,370 --> 00:00:45,380 It lets you send and receive messages create and log in with authenticated users create channels that 13 00:00:45,410 --> 00:00:49,640 utilizes socket technology so our messaging will be instantaneous. 14 00:00:49,640 --> 00:00:53,580 So like this is a legit API that you guys are getting access to. 15 00:00:54,080 --> 00:00:57,810 But now this isn't a course about how to build an API. 16 00:00:57,830 --> 00:01:04,060 So I'm not going to go into too much depth on how the actual API code works on my ticket. 17 00:01:04,070 --> 00:01:10,100 We might take a quick tour but just about everything that the API does and contains You can learn in 18 00:01:10,130 --> 00:01:15,900 Jack's awesome API courses available on our dev slopes platform and you do me. 19 00:01:16,160 --> 00:01:22,850 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 20 00:01:22,850 --> 00:01:28,370 app hosted and be able to chat with other people on other computers right. 21 00:01:28,370 --> 00:01:30,640 Otherwise you'd just be sitting there talking to yourself. 22 00:01:30,650 --> 00:01:37,010 So we are going to host the code on an awesome service called Heroku hosting just means that our code 23 00:01:37,010 --> 00:01:41,010 has a home somewhere on the internet so we can use it from anywhere. 24 00:01:41,040 --> 00:01:48,560 We are also going to use a Mangu database service called M labs and everything we are using you can 25 00:01:48,560 --> 00:01:50,710 use for free to get started. 26 00:01:51,080 --> 00:01:57,490 And there are three ways that we can set up the API and we're going to go over all three. 27 00:01:57,500 --> 00:02:04,270 The first is using Heroku who's really cool one button deploy feature meaning you just click one button 28 00:02:04,340 --> 00:02:09,980 and if you have if you already have a an account and a verified account set up it just automatically 29 00:02:09,980 --> 00:02:12,890 sets everything up for you. 30 00:02:13,130 --> 00:02:16,910 But like I said for that to work you need to have a verified account which means you have to have a 31 00:02:16,910 --> 00:02:19,350 credit card on file. 32 00:02:19,430 --> 00:02:20,450 It's still free. 33 00:02:20,450 --> 00:02:27,920 You won't get billed for anything but for whatever reason Heroku requires that you be a verified account 34 00:02:28,220 --> 00:02:32,370 with a credit card on file to use to use that feature. 35 00:02:32,930 --> 00:02:39,650 So if you're if you're if you're not comfortable giving them your credit card info or you just don't 36 00:02:39,650 --> 00:02:43,500 have one or you're somewhere where you can't get one. 37 00:02:43,580 --> 00:02:48,810 We're also going to cover another way to do the exact same thing. 38 00:02:48,980 --> 00:02:51,080 I'm going to just take a little bit more work and set up. 39 00:02:51,170 --> 00:02:52,270 All right. 40 00:02:52,280 --> 00:02:54,680 So got you covered there too. 41 00:02:55,160 --> 00:03:01,080 And I we'll go over hosting it locally though like I mentioned you'll only be talking to yourself. 42 00:03:01,310 --> 00:03:06,680 However this can be super useful if you are you know you're feeling brave and you want to modify or 43 00:03:06,680 --> 00:03:08,320 expand on the API code. 44 00:03:08,420 --> 00:03:09,840 You can do all that locally. 45 00:03:09,890 --> 00:03:13,170 Test it out and then push it to live when it looks good. 46 00:03:13,430 --> 00:03:14,300 So let's get started. 47 00:03:14,300 --> 00:03:15,990 And we're going to start out with this. 48 00:03:16,010 --> 00:03:18,960 The easiest one which is the one button deploying. 49 00:03:19,490 --> 00:03:26,500 So I'm just going to open up a browser window here and we're going to go to Heroku dot com 50 00:03:29,650 --> 00:03:34,350 and take a look around their site and they got some really cool stuff. 51 00:03:34,630 --> 00:03:40,210 Basically it just makes getting your hosted app up and running a lot quicker. 52 00:03:40,210 --> 00:03:40,730 All right. 53 00:03:40,960 --> 00:03:44,270 And so you can sign up here. 54 00:03:44,450 --> 00:03:50,010 So the Senate process is really straightforward gesture information. 55 00:03:50,150 --> 00:03:51,800 The primary development language. 56 00:03:51,830 --> 00:03:54,630 Go ahead and select node dodgier. 57 00:03:54,660 --> 00:03:57,280 Since that's what our API is written. 58 00:03:57,500 --> 00:04:00,850 And then once you're all signed up I'll see you on site. 59 00:04:00,860 --> 00:04:05,900 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 60 00:04:05,900 --> 00:04:15,220 to go to get Herb dot com slash slopes and look for the Mac chat API. 61 00:04:15,550 --> 00:04:22,190 Click on that and then just come down here and so here's the read me for it. 62 00:04:22,390 --> 00:04:26,390 Go ahead and you can read through that learn a little bit about how it works. 63 00:04:26,530 --> 00:04:32,000 But what you need to do is come down here and click on deploy to Heroku. 64 00:04:32,040 --> 00:04:34,590 This is that one button that I'm talking about. 65 00:04:34,600 --> 00:04:41,760 So just click on it and then I'll jump over to Heroku and you can put in an app name optional. 66 00:04:41,770 --> 00:04:45,380 If you leave it blank then they'll kind of just make up one for you. 67 00:04:45,460 --> 00:04:49,930 But we're going to say Chaddy chat. 68 00:04:49,990 --> 00:04:57,190 Can't have it it's got to be all lowercase No spaces just just letters and message and a chat chat. 69 00:04:58,360 --> 00:04:58,840 All right. 70 00:04:58,880 --> 00:05:01,180 Change doesn't really matter. 71 00:05:01,270 --> 00:05:05,500 And this isn't going to be the it's probably isn't going to be the one that we really use I'm just showing 72 00:05:05,500 --> 00:05:12,490 you this for the one button deploy it H.H. at chat and it shows the add on that we're going to be using 73 00:05:12,730 --> 00:05:17,220 just say deploying and so. 74 00:05:17,330 --> 00:05:17,690 Right. 75 00:05:17,690 --> 00:05:21,360 So here's where it pops up for. 76 00:05:21,420 --> 00:05:25,320 To do that one button deploy got to be a verified account. 77 00:05:25,320 --> 00:05:32,880 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 78 00:05:32,880 --> 00:05:35,690 done. 79 00:05:35,860 --> 00:05:41,350 So once you put in your account and your credit card information you may need to press the ploy again 80 00:05:41,920 --> 00:05:47,920 but once you do that then it's going to start building out your app and getting it ready to deploy on 81 00:05:47,920 --> 00:05:48,880 Heroku. 82 00:05:49,230 --> 00:05:49,480 All right. 83 00:05:49,470 --> 00:05:54,510 Once it's all done you'll see here is has your app was successfully deployed. 84 00:05:54,820 --> 00:06:01,390 So go ahead and click on view and that will open us up in a new window and it's his message chat API 85 00:06:01,390 --> 00:06:02,470 is alive. 86 00:06:02,620 --> 00:06:10,120 So we now have our app actually hosted our API code at least and it's already hooked up. 87 00:06:10,120 --> 00:06:17,640 So if we click on manage app it'll take us to text to the app and you have some some information here 88 00:06:17,650 --> 00:06:18,700 overview. 89 00:06:18,700 --> 00:06:23,320 So the resources we have here and in the lab Mangu D-B. 90 00:06:23,470 --> 00:06:27,870 And so this is where all of the data is actually stored. 91 00:06:27,880 --> 00:06:35,280 So Heroku hosts the API code itself but we also need a place for all of the data to be held that the 92 00:06:35,280 --> 00:06:42,670 messages the users that chat channels all of that information is going to be stored in this Mongo Mangu 93 00:06:42,670 --> 00:06:43,640 database right here. 94 00:06:43,810 --> 00:06:50,920 And if we click on it and you can actually it actually take you to that that account and you can see 95 00:06:50,920 --> 00:06:59,140 here collections of collections is another name for the different types of data that will be used for 96 00:06:59,140 --> 00:06:59,640 instance. 97 00:06:59,680 --> 00:07:03,210 Once we have users there will be a question for users. 98 00:07:03,220 --> 00:07:09,700 Once you start sending messages there will be a collection for messages and so forth don't you to miss 99 00:07:09,700 --> 00:07:12,540 too much mess with too much in here yet. 100 00:07:12,750 --> 00:07:14,550 That'll be for a little bit later on. 101 00:07:14,830 --> 00:07:24,040 But basically that's all you need to do to get your API code posted with and with a mongerer database 102 00:07:24,040 --> 00:07:24,700 attached to it. 103 00:07:24,700 --> 00:07:25,150 All right. 104 00:07:25,360 --> 00:07:27,550 So that's it. 105 00:07:27,730 --> 00:07:35,290 We are pretty much ready to use this API as is. 106 00:07:35,320 --> 00:07:35,560 All right. 107 00:07:35,560 --> 00:07:42,430 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 108 00:07:42,430 --> 00:07:44,410 that kind of stuff we will use. 109 00:07:44,500 --> 00:07:48,470 Let's see here and we'll use this. 110 00:07:49,300 --> 00:07:54,910 We'll use this u r l for all of our API web requests. 111 00:07:54,910 --> 00:07:55,150 All right. 112 00:07:55,180 --> 00:07:56,110 So that's it. 113 00:07:56,110 --> 00:07:59,790 Super super simple with the one button deploying. 114 00:07:59,980 --> 00:08:02,480 And so if you can use the credit card. 115 00:08:02,500 --> 00:08:04,340 Highly recommend using it doing it this way. 116 00:08:04,360 --> 00:08:11,830 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 117 00:08:11,830 --> 00:08:13,540 do it the other way right now. 118 00:08:13,950 --> 00:08:14,280 OK. 119 00:08:14,320 --> 00:08:21,010 So if you don't want to use your credit card information then there's a few more steps involved but 120 00:08:21,160 --> 00:08:22,100 it's not too bad. 121 00:08:22,120 --> 00:08:25,090 So let's let's go ahead and get started with that. 122 00:08:25,090 --> 00:08:29,920 First thing we're going to do and this is just my other Heroku account. 123 00:08:30,040 --> 00:08:34,000 First thing we're going to do is we're going to go get the API code. 124 00:08:34,000 --> 00:08:41,630 So we're going to head back over to get dot com slash slopes maquette API. 125 00:08:42,250 --> 00:08:45,220 Well we're going to do is we're going to clone the repo. 126 00:08:45,460 --> 00:08:58,270 So here I'm going to copy the copy of the euro and I'm going to open up terminal and know size. 127 00:08:58,330 --> 00:09:04,780 Here to get a CD and CD to the desktop and I'm just going to clone it to the desktop so I'm going to 128 00:09:04,780 --> 00:09:12,680 say get a clone and then I'm going to paste that you are all. 129 00:09:12,710 --> 00:09:13,400 There we go. 130 00:09:13,640 --> 00:09:18,950 And then I am going to use them as my 131 00:09:22,280 --> 00:09:23,140 text editor. 132 00:09:23,390 --> 00:09:30,420 And so if you just say atom space period if you have it installed then it'll open it right up inside 133 00:09:30,440 --> 00:09:31,890 of atom. 134 00:09:33,260 --> 00:09:35,220 OK so here we are open an atom. 135 00:09:35,270 --> 00:09:39,420 And here is our API code Mac chat API. 136 00:09:39,650 --> 00:09:44,090 And if you want you can browse around and check things out. 137 00:09:44,270 --> 00:09:50,160 Well we're going to be working on is right here in source config and then index Dot. 138 00:09:50,230 --> 00:09:51,160 Yes. 139 00:09:51,230 --> 00:09:56,380 So this is where we're going to be making some changes right here in this Mungo you are. 140 00:09:56,870 --> 00:09:58,130 But we're not quite ready to do that. 141 00:09:58,130 --> 00:10:02,660 We're going to jump back into safari and now we need to sign up for labs. 142 00:10:02,840 --> 00:10:09,510 So just Google Labs and right here Mongo DB hosting is what we want. 143 00:10:12,160 --> 00:10:14,180 And you can sign up for free. 144 00:10:14,380 --> 00:10:22,810 So just go ahead and put in an account name user name email passwords accept time to do that and I will 145 00:10:22,810 --> 00:10:24,220 see you inside. 146 00:10:24,430 --> 00:10:24,660 OK. 147 00:10:24,670 --> 00:10:31,060 So once you're in here if you're a first time user you're going to have to verify your e-mail as well 148 00:10:31,170 --> 00:10:37,780 and just click that link to send the email for me for some reason it took like half an hour for the 149 00:10:37,840 --> 00:10:40,510 verification e-mail to arrive. 150 00:10:40,540 --> 00:10:46,690 Hopefully that doesn't happen to you but if so hang tight it's on its way and just come on back whenever 151 00:10:46,690 --> 00:10:49,330 that whenever you're able to verify your account. 152 00:10:49,540 --> 00:10:55,020 But once you do so here we're going to create a new monkhood D-B deployment. 153 00:10:55,020 --> 00:11:05,620 It's going to create new and we're going to use a single node sandbox setup and that's that's the that's 154 00:11:05,620 --> 00:11:06,470 their free version. 155 00:11:06,470 --> 00:11:07,110 OK. 156 00:11:07,490 --> 00:11:09,650 You get up to a half gig and get. 157 00:11:09,910 --> 00:11:17,210 So choosing the sandbox we come down here you can set a database name so we're good. 158 00:11:17,400 --> 00:11:21,100 We can just see chat chat chat. 159 00:11:21,510 --> 00:11:25,870 I'm going to create the new Mongo DB deployment by clicking here. 160 00:11:28,270 --> 00:11:36,860 And we we have our Mongo database deployment set up so we can click here. 161 00:11:37,360 --> 00:11:42,840 And so it says here to connect using a driver via the standard mongered would be you are and you are 162 00:11:42,900 --> 00:11:45,280 all we are were going to use this guy right here. 163 00:11:45,280 --> 00:11:52,930 So this right here is what is going to go inside of our API code right here for the Mangu you rl. 164 00:11:53,440 --> 00:11:55,240 But first we have to create a user. 165 00:11:55,240 --> 00:12:03,760 So you see here in the URL that's asking for a database user in a database password that's not the that's 166 00:12:03,760 --> 00:12:10,740 not your account email and password have to come here to where it says users and then add database user 167 00:12:11,590 --> 00:12:17,350 and the database user name you can name whatever you want to see joining the database password. 168 00:12:17,350 --> 00:12:22,040 I'm just going to say one two three four five six one two three four five six. 169 00:12:22,180 --> 00:12:24,280 And don't click make read only. 170 00:12:24,430 --> 00:12:30,360 This would be if you had a database where you only wanted people to read poll data. 171 00:12:30,360 --> 00:12:34,390 You don't want them adding anything to your database at all. 172 00:12:34,750 --> 00:12:41,380 But we obviously want to write to it because we're going to be sending him chat messages and all that 173 00:12:41,380 --> 00:12:41,860 kind of stuff. 174 00:12:41,860 --> 00:12:47,500 So make sure that's unchecked and then say create not no. 175 00:12:47,920 --> 00:12:48,430 OK. 176 00:12:48,470 --> 00:12:50,280 Now we have a user here. 177 00:12:50,500 --> 00:12:58,150 And so then we can go ahead and copy this your L here and head back over to our home or whatever text 178 00:12:58,150 --> 00:13:01,310 editor you're using to edit the API code. 179 00:13:01,540 --> 00:13:07,920 And again it's in the API folder under saurus config index. 180 00:13:08,010 --> 00:13:11,940 Yes and we are editing the Mangu you are l. 181 00:13:12,010 --> 00:13:12,660 OK. 182 00:13:13,000 --> 00:13:19,450 So I'm going to just replace quotation marks and that I guess I didn't copy it. 183 00:13:19,600 --> 00:13:22,060 OK so select this. 184 00:13:22,060 --> 00:13:32,470 Copy it and paste and then replace the DBI user with the user that you just created. 185 00:13:32,630 --> 00:13:37,730 And right here replace it with the password one two three four five six. 186 00:13:37,780 --> 00:13:40,280 You should probably choose him more secure password. 187 00:13:40,500 --> 00:13:40,790 All right. 188 00:13:40,840 --> 00:13:42,820 And I'm going to save that. 189 00:13:43,360 --> 00:13:51,730 So now our API code will be linked up with the Mangu database because of because of the work that we 190 00:13:51,730 --> 00:13:59,440 just did but now we need to get our local modified version of our API code onto our Heroku account. 191 00:13:59,640 --> 00:14:02,610 OK so I'm going to come back to Safari. 192 00:14:02,710 --> 00:14:13,240 Head over to our apps and I'm going to say create new app and name it say chatty chat. 193 00:14:13,240 --> 00:14:17,170 J.B. looks can change IGB is available in this way. 194 00:14:17,200 --> 00:14:18,120 Create app 195 00:14:22,000 --> 00:14:26,700 and then it gives us some options for how to get our code up there. 196 00:14:26,770 --> 00:14:30,950 We are going to use the Heroku CLID. 197 00:14:31,090 --> 00:14:31,350 All right. 198 00:14:31,360 --> 00:14:36,990 So if you haven't ever done this we're going to just go ahead and follow the instructions here. 199 00:14:37,000 --> 00:14:45,940 So we're going to download and install the heroic UCLA quit there and you can either do it with homebrew 200 00:14:46,030 --> 00:14:48,160 or you can click on the Mac OS installer. 201 00:14:48,350 --> 00:14:55,450 So with homebrew if you don't already have homebrew installed then you're going to need to click this 202 00:14:55,450 --> 00:15:01,900 link and install homebrew and they have instructions on how to do that. 203 00:15:02,320 --> 00:15:03,280 Right here in this link. 204 00:15:03,280 --> 00:15:03,800 OK. 205 00:15:04,060 --> 00:15:08,960 So all you got to do is paste that in a terminal command. 206 00:15:09,010 --> 00:15:14,140 So once you have homebrew installed if you don't have it already then you can do Brou install Heroku 207 00:15:14,860 --> 00:15:16,590 already have it installed. 208 00:15:17,030 --> 00:15:23,380 But I'll do it again anyways just because it'll probably just reinstall that's when I say Brou install 209 00:15:24,010 --> 00:15:29,650 Heroku So if it needs to It'll update homebrew. 210 00:15:30,140 --> 00:15:32,870 Right so that's done. 211 00:15:32,870 --> 00:15:39,590 So now we have the Heroku Seelye installed on our computer the other way to do it is just download and 212 00:15:39,590 --> 00:15:41,070 run the Mac OS installer. 213 00:15:41,090 --> 00:15:43,920 Pretty simple downloads. 214 00:15:45,360 --> 00:15:48,550 Open up download folder. 215 00:15:48,850 --> 00:15:53,920 Open up the installer and just follow instructions. 216 00:15:54,220 --> 00:15:56,770 I'm not going to do that since I just did it with Brou. 217 00:15:57,250 --> 00:16:02,410 OK so once we have Selye dulled. 218 00:16:02,800 --> 00:16:06,680 See here come back to our instructions here. 219 00:16:06,760 --> 00:16:09,450 We are going to log in to Heroku. 220 00:16:09,740 --> 00:16:11,620 We're going to connect to terminal. 221 00:16:11,680 --> 00:16:21,250 Going to clean my terminal with command K and I'm going to say Horo to log in and it's going to prompt 222 00:16:21,250 --> 00:16:23,210 for your Heroku credentials. 223 00:16:23,290 --> 00:16:30,160 I see Johnny at the slopes dot com press return and I'll ask you for your password and can I grab my 224 00:16:30,160 --> 00:16:36,840 password here and paste it and then press return. 225 00:16:36,860 --> 00:16:39,520 All right so now you know I'm logged in. 226 00:16:39,880 --> 00:16:46,750 And then what we're going to do is just following these instructions we're going to create a new repository 227 00:16:46,760 --> 00:16:54,010 we're going to add the remote to two Heroku so I'm going to just copy this to have it pre-populated 228 00:16:54,010 --> 00:17:00,220 with our name so copy then connect to terminal and say paste 229 00:17:04,960 --> 00:17:07,450 and we failed for some reason. 230 00:17:07,700 --> 00:17:08,280 Oh I know. 231 00:17:08,390 --> 00:17:11,800 Because where are we right now. 232 00:17:12,140 --> 00:17:13,070 BW D. 233 00:17:13,220 --> 00:17:20,490 Because we are not in the project so I need to CD to our project is going to say CD Mac chat API. 234 00:17:20,880 --> 00:17:21,590 Oh yeah. 235 00:17:21,680 --> 00:17:29,140 And then I'm going to copy that command into terminal and paste it. 236 00:17:30,350 --> 00:17:31,330 And there we go. 237 00:17:31,670 --> 00:17:39,530 And so then the next step is just to add and commit our changes which was to change the language to 238 00:17:39,530 --> 00:17:41,760 be your L and then to push. 239 00:17:41,810 --> 00:17:55,780 So we're just going to say it's just permit me to say good and not to commit cash am anded Mongo d d 240 00:17:55,780 --> 00:18:04,860 u r l and get push Heroku M.. 241 00:18:05,020 --> 00:18:05,470 K. 242 00:18:08,120 --> 00:18:17,270 so now it's going to do the same thing more or less than the one byte deploy did you'll be able to see 243 00:18:17,270 --> 00:18:19,310 the same output right here. 244 00:18:20,430 --> 00:18:23,320 OK officers deployed to Heroku. 245 00:18:23,460 --> 00:18:31,760 So we're all done so let's go ahead and click back on here and you can just click on personal apps and 246 00:18:31,880 --> 00:18:34,930 there we have our Heroku app we can click on it. 247 00:18:35,280 --> 00:18:37,710 Let's head over to RAHE. 248 00:18:37,730 --> 00:18:40,200 Click on open app and if it worked. 249 00:18:40,230 --> 00:18:41,340 Yep there you go. 250 00:18:41,350 --> 00:18:44,090 Message chat API is alive. 251 00:18:44,540 --> 00:18:47,140 All right so that is pretty cool. 252 00:18:47,340 --> 00:18:53,790 All right guys so in this video we got our API up and running with two of the three ways that you can 253 00:18:53,790 --> 00:18:57,420 do it with the one button click deploy. 254 00:18:57,720 --> 00:19:04,920 And then also with the other slightly more involved way but without having to use a credit card and 255 00:19:04,980 --> 00:19:11,410 learning a little bit about the Heroku Seelye and pushing projects to Heroku. 256 00:19:11,580 --> 00:19:16,890 All right so our API code is now live on the Internet hosted. 257 00:19:17,180 --> 00:19:22,620 And so once we once we're ready and back into X code we'll be able to actually start interacting with 258 00:19:22,680 --> 00:19:29,080 the API registering and creating users logging in sending messages and all that awesome stuff. 259 00:19:29,310 --> 00:19:30,180 But first. 260 00:19:30,300 --> 00:19:35,490 First up in the next video we're going to cover the third option which is to host it locally and we're 261 00:19:35,490 --> 00:19:41,280 going to talk about some of the different tools that you can use to make local development easier using 262 00:19:41,550 --> 00:19:43,850 tools like post man robot man would be. 263 00:19:43,860 --> 00:19:48,550 And some other things are so so excited for that and I will see you in the next one.