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