1 00:00:00,300 --> 00:00:00,700 Beautiful. 2 00:00:00,960 --> 00:00:07,290 And once we have tested our appetite and a swagger at her, now we just want to add it to our application. 3 00:00:07,620 --> 00:00:10,190 And in order to do that, we'll need two packages. 4 00:00:10,470 --> 00:00:15,760 We'll need YAML Jayesh and the Swagga UI Express. 5 00:00:16,230 --> 00:00:22,160 Now, if you can see both packages in the packages, then of course you're good to go. 6 00:00:22,560 --> 00:00:28,460 But since I added these packages later, essentially they were not with initial staff. 7 00:00:28,680 --> 00:00:30,820 You might need to install them yourself. 8 00:00:31,080 --> 00:00:37,200 So if you don't see them, just run the command of NPM and I or install, it doesn't really matter. 9 00:00:37,410 --> 00:00:45,610 Then go for Yamal J.S. and Swagga, UI, UI and Express. 10 00:00:45,930 --> 00:00:53,430 So this one will convert the YAML one to something that the Swiger you I can understand and swagga you 11 00:00:53,430 --> 00:00:54,060 are express. 12 00:00:54,300 --> 00:01:01,020 Just add Swagga to our application so I'll install both packages even though I have them, and I'll 13 00:01:01,020 --> 00:01:03,000 start by creating a new file. 14 00:01:03,270 --> 00:01:07,050 And in my case I'm going to call this Swagga and YAML. 15 00:01:07,350 --> 00:01:08,900 Now the name is really up to you. 16 00:01:08,910 --> 00:01:15,700 Just make sure that the extension is YAML and now you want to take this entire thing again. 17 00:01:15,870 --> 00:01:19,170 This is a little bit different than what we have from API Mattick. 18 00:01:19,560 --> 00:01:24,060 This is already a working documentation copy and paste. 19 00:01:24,390 --> 00:01:27,960 And back in our APGAR'S, we want to do two things. 20 00:01:28,320 --> 00:01:30,660 We want to require the swagga. 21 00:01:30,660 --> 00:01:39,090 You express the YAML Jazz and then also the YAML file, and then we want to pass it on to the Swagga 22 00:01:39,090 --> 00:01:39,490 you are. 23 00:01:39,840 --> 00:01:48,750 So I'm going to go below the extra packages we'll add come here and say swagga and let's just start 24 00:01:48,750 --> 00:01:50,670 by grabbing the swagga. 25 00:01:50,670 --> 00:01:58,590 You can just come up with some kind of name and this will be equal to require than we're looking for. 26 00:01:58,770 --> 00:02:00,350 Swagga you express. 27 00:02:00,930 --> 00:02:08,970 And since I have YAML file, I also want to do that now will be equal to require and we're looking for 28 00:02:08,970 --> 00:02:11,570 the package and then we want to load the file. 29 00:02:12,090 --> 00:02:14,250 So in here, let's just come up with some kind of name. 30 00:02:14,680 --> 00:02:20,760 I'm going to go with Swagga document and that will be equal to Yamal. 31 00:02:21,120 --> 00:02:23,080 That's the variable then DOT. 32 00:02:23,340 --> 00:02:25,400 And the method you're looking for is load. 33 00:02:25,680 --> 00:02:29,430 And in here you want to point to the file, which of course is in the root. 34 00:02:29,430 --> 00:02:33,560 So we simply go swagga dot and yaml. 35 00:02:33,960 --> 00:02:38,670 And once we have all of this code in place now we just want to scroll down. 36 00:02:39,600 --> 00:02:45,510 And where we have here, we have that get above it, below it, it's really up to you. 37 00:02:45,870 --> 00:02:49,440 We'll go with Abduh use, then we need to come up with a path. 38 00:02:49,620 --> 00:02:52,950 And in my case, I'm going to go with forward slash API docs. 39 00:02:53,070 --> 00:02:54,810 And you know what actually changed my mind? 40 00:02:54,930 --> 00:02:57,500 I'll place it after the forward slash. 41 00:02:57,810 --> 00:02:58,980 So let's go here. 42 00:02:59,040 --> 00:03:05,820 Let's say API docs, as you can see, we're using abductor's, so it will be a middleware. 43 00:03:06,090 --> 00:03:09,720 And then as far as the code, we want to go with swagga. 44 00:03:09,870 --> 00:03:11,040 So that's our variable. 45 00:03:11,340 --> 00:03:16,570 And we're looking for reserve property and then we want to get that yanmei file. 46 00:03:16,920 --> 00:03:20,490 So again, we'll go with Swagga UI setup method. 47 00:03:20,670 --> 00:03:27,280 And in this case, we want to pass in that swagga document once all of this is in place. 48 00:03:27,660 --> 00:03:35,610 Now, I just want to go to App Target and instead of sending back Jobs API, what I want to do is send 49 00:03:35,610 --> 00:03:36,720 back the hiring one. 50 00:03:37,110 --> 00:03:39,810 That's a jobs API. 51 00:03:39,810 --> 00:03:47,130 I'll close the hiring one and then I'll just set up some link that goes to API and for some reason I 52 00:03:47,130 --> 00:03:48,260 went with API. 53 00:03:48,810 --> 00:03:50,390 Should be API docs. 54 00:03:50,910 --> 00:03:51,730 My apologies. 55 00:03:52,300 --> 00:03:53,460 So let me go here. 56 00:03:53,790 --> 00:04:02,430 I'm going to go with HSF and we're going to set it up as forward slash API docs and then let's close 57 00:04:02,430 --> 00:04:02,910 the link. 58 00:04:03,210 --> 00:04:05,340 I just say documentation. 59 00:04:05,640 --> 00:04:09,840 And once we have all of this in place now let's run and start. 60 00:04:09,840 --> 00:04:16,170 But I can tell you right away that if you'll try to test this on a local machine, it's not going to 61 00:04:16,170 --> 00:04:16,440 work. 62 00:04:16,680 --> 00:04:19,100 Basically, you'll get a bunch of hers. 63 00:04:19,380 --> 00:04:23,190 So everything is going to work once we push this up to the get up. 64 00:04:23,460 --> 00:04:26,840 For now, I just want to see whether the basic setup work. 65 00:04:27,090 --> 00:04:29,070 So let me look for localhost. 66 00:04:29,370 --> 00:04:32,940 When I'm looking for five thousand, I should see the documentation. 67 00:04:33,150 --> 00:04:38,090 And once we navigate here, voila, we have our documentation in place. 68 00:04:38,250 --> 00:04:41,730 Now, the only thing we need to do is just go back. 69 00:04:42,560 --> 00:04:46,340 And then add those three commands we want to look for get add. 70 00:04:46,760 --> 00:04:54,650 So this is going to add to the staging area, then we'll go get commit, let's just say swagga docs 71 00:04:55,280 --> 00:04:55,830 added. 72 00:04:56,220 --> 00:05:03,980 And lastly, remember the command get push, Heroku, main war master and my its master. 73 00:05:04,070 --> 00:05:12,290 Now we're pushing everything to the Heroku and if there are no weird bugs, we should be in a good place 74 00:05:12,590 --> 00:05:17,360 and the nice swagga condition should be added to our project. 75 00:05:17,640 --> 00:05:19,430 And to answer your question, yes. 76 00:05:19,760 --> 00:05:25,940 When you are setting up manually, basically when you're typing this yourself, you do need to provide 77 00:05:26,150 --> 00:05:27,330 all these properties. 78 00:05:28,190 --> 00:05:34,880 I just thought that it's much easier to show you how to do that automatically because you need to keep 79 00:05:34,880 --> 00:05:40,010 in mind that as we're progressing with, of course, our projects are going to get more complex. 80 00:05:40,250 --> 00:05:46,040 And I really don't want to spend five hours on a project and then another five on the documentation 81 00:05:46,040 --> 00:05:49,010 because it seems like a big waste of your time. 82 00:05:49,310 --> 00:05:52,850 So now let me navigate back to my Web browser. 83 00:05:53,130 --> 00:05:57,980 I'll close all of my tab since I have ten thousand of them open. 84 00:05:58,370 --> 00:05:59,780 I want to go to Hiroku. 85 00:05:59,780 --> 00:06:01,250 I want to open up the app. 86 00:06:01,460 --> 00:06:02,900 I have my documentation. 87 00:06:03,180 --> 00:06:03,840 Awesome. 88 00:06:04,090 --> 00:06:06,010 And now let's test start out. 89 00:06:06,020 --> 00:06:10,520 So before we do anything, why don't we remove that Bob user? 90 00:06:10,850 --> 00:06:16,480 Because I think that that way I don't have to waste too much time on changing developers. 91 00:06:16,610 --> 00:06:20,810 I'm not going to test every rock, but I want to test out the major ones. 92 00:06:20,960 --> 00:06:24,890 So let me delete the user just so I can see that everything works. 93 00:06:25,280 --> 00:06:27,740 We're looking for a registered user option. 94 00:06:28,160 --> 00:06:30,530 I want to go with it, try it out, of course. 95 00:06:30,890 --> 00:06:32,420 And we want to execute. 96 00:06:32,630 --> 00:06:36,290 We should get back the token, which is just awesome. 97 00:06:36,620 --> 00:06:38,960 Now let's quickly authorize the route. 98 00:06:39,380 --> 00:06:42,620 So it's out here, copy and paste authorized. 99 00:06:43,010 --> 00:06:46,520 We'll close it and let's create a job. 100 00:06:46,790 --> 00:06:47,780 So let's go here. 101 00:06:48,170 --> 00:06:51,650 We're going to go try out and execute. 102 00:06:51,920 --> 00:06:52,310 Yep. 103 00:06:52,580 --> 00:06:53,630 We're creating a job. 104 00:06:53,900 --> 00:06:59,150 And lastly, let's just get all the jobs, try it out and execute. 105 00:07:00,060 --> 00:07:08,700 I can see that I have my jobs zero with a count of one, so that's how we can add swagga UI documentation 106 00:07:08,700 --> 00:07:17,670 to our API without typing any of the code ourselves, using the Postman Docs and the API Matic Library.