Swagger API documentation tutorial for beginners 2023

hello everybody today in this video we are trying to document our API in order to document our API we are gonna be use Swagger so as you know the Swagger is like a UI whenever you create an API and you need to explain it on like how you can use this API and what kind of parameter you need to use in order to get results so those kind of things you can Define so it's it's called like API documentation like how you can use this API so Swagger is a base tool so how you can Define all this thing uh together and in this video we are trying to learn so as you can see here if I click here if I send request then I'll get all books so what I have used here so if you follow my tutorial in this video as you can see node.js SQL is warm tutorial so if you watch this video you can able to create create and you can learn what is worrying how you can queries in sqlize and all these things I have explained very well so I must suggest you to watch this video after end of this video you can come here and you can watch this video and if you watch this video and you can able to create this simply documentation and whenever you create any API you can able to create these things for this Simplicity you know you can add your authentication like zwt with JWT token you can able to get razor so it's very simple but I feel like let's share with you so that guys you can understand so we can get and we can achieve this thing very easily so how easy we can accept this thing now we are trying to jump into the actual coding in order to start this project you need to install two packages but how I can get this thing so as I told you that you need to watch this video or you will get the GitHub link if you follow this video then afterwards you you will get these things okay so you just need to your start then your server will be start uh you need to install two packages in order to make this documentation one is Swagger's this dog you know there is Swagger UI Express so you just need to hit enter and then you install soon well our package has been installed now we need to use this thing so in order to use so first of all we have to get the Swagger the stock from Swagger his dog so how we can get like we can give it a name anything or is w a double z Swagger this doc quicker the stock was coming from Swagger's Dock and also we need to Swagger UI Express as well so bigger do I have Express okay so these things we need so let's give it now I'm sorry all right so afterwards what you need to do so we need to use so well as you can see here is our app listening so approve here we just need to type we need to set up these things so in order to set up let's give it a name it's called spices or something like that and here we can Define the Swagger Z stock all these things so we just copy let's put in here so inside so we can pass in here something like we'll Define and also we need to use app.use so here our app dot use so what we are going to use so here we're going to use like so here let's uh use it here API so API is going to this parameter so API doc something like that so this will be the this will be our parameter I think the routes so after opening 3000 so we this will be the reference route and then we'll Swagger UI so things bigger anyway s here we need to use server start something like that and then we have to set up so I get a UI also here we can set up sorry varios set up and here we can fastly yeah this will be passed so you can pass in here like option but we need to create the option as well so how we can create of you can create here so let's const option so inside the option as you can see here we can Define the server so here the definition and also you have to define the open API version it's very very important and also you have to set up the server so it will go to this localhost 3000 since we are using localhost you have real server then you can Define the real server as well for production mode and also you have to define the API levels so where we'll get this thing so which route will get so like first of all it will go to this browse afterwards books so that means routes whatever folder inside the routes that will get automatically and that's it so if you save it so nothing is happening like there is no error that means something is happening so now we'll visit this 3000 so let's visit this three thousand and as you can see boom guys so it's automatically generated but nothing is here so we can Define like here is the server so we can say here info all right so we can say info um let's define the info so what kind of info you can Define like title so title should be like a repli doc and afterwards so you need to do this and then you can Define the version API version so what what is your API version first of all you can Define 0.1 something like that and also you can give it a like description now save it and if you reload and you can see something like this wow I read books API door so wait so it's working guys so this way you can Define also you can add here the description and contract name URL email and whatever you want afterwards finally you need to save and reload your browser so if you reload then as you can see it has been changed so also you can add here license whatever you want you can add but I'm not going to add for more information you can visit this Swagger UI documentation so why Swagger and what kind of tool so if you just head over in this documentation you can able to understand but how we can easily achieve these things now we are going to do so now our documentation our explanation our personal and contact information all is done now what kind of thing we need to do so so now we are going to add some kind of thing so that we can send get request Sports post request and also update delete everything so in order to do these things first of all you have to go to the routes folder inside the routes folder there is a file that's called book okay so in inside the book so what you need you just on the above and the top so you can just you need to paste it something here so that I did it so it's like a ymail file so you if you know yml how to configure it you can do it I can do it also but in this video I prefer to use in this file so you if you want in JS file you just need to comment out this way and afterwards you need to put install and also you have to type Swagger and also you need to type components and then a colon and then schema and then books so this book's name should be like this so this book so modern lamps so whatever you want to give this name afterwards you put in you have to put the same name uh later just need to remember so this is the schema and this is the book so type should be object and require it our books is title description finished something like that here we need to published okay for parties so our property should be id id should be string description Autos generate ID for books and title our books has one title so if you follow these models they will get title description publish so you just need to Define like whatever you already done in the database schema so just like this and afterwards published and created so you don't need to put this thing so you can remove this thing and if you save it so nothing is happening no error and let's jump into the documentation and reload it so after reload as you can see it's automatically added books so I read I tell Pop description or publish so everything has been added so we have not done anything we just Define here our schema so schema and components so but remember remember you will get error so if you just remove these things and that will not work and if you remove this thing then something like you will get error so you have to comment out it and the similar way you need to put these things so that way it is working for this school it will like demonstrate automatically so how basically we'll get this thing so what's the reason so as I explain you as I told you that here is the theorem so API so it will goes to this route so if I remove this routes s and save it afterwards if I reload this thing I'll not get these things because as I told you that we have already defined here which route will be in points to whatever file you will write this file and that will automatically cache these things so that is why you will get these things inside the book you just need to Swagger so if you make a ymail file you don't need to type Swagger you can type everything you don't need to comment but you know it's very important in this file okay so now we will add you just reload it and get so now we'll get how we can get this chapter verse so you have to set up the thing so like you need to put in something like this so how you can do so just remove this thing so comment out and you can paste it here so if you just put in one line then you'll get this thing so in this way you can just uh that all the yml file but remember one thing that is very very important so you have to so if your intendation is wrong then you will get error so like you just save these things it's working so far fine but uh what I have done let me explain you but if you just comment just this way it will not work so as you can see in your console you'll get ymail semantic error so remember you have to write whatever I have writing all right so it is very important so what is going on here first of all this is the tag so name books description the book mapping API um this is the route is very very important or is the route you have defined here this is the route and the way you have to define the route and we'll get all book that is why it's the gate and the summary list of books and tags is books response 200 and description the list of books contain his application Json type schema is already and finally you have to reference the component schema and books so how you can use this thing so you need to reference afterwards you have to put in this thing as you can see component schema and books so if you have another components then you need to put in here another reference so this way you can create as many as you want all right but it is very important you will get error intention so that is why you have to keep the same things so similar way to similar space so it's very very important okay I'll save it and if you just go to the browser then you can able to see reload and as you can see books now we'll get books if you try out and execute then as you can see it is will get all these books so it's coming from postgis database that I have already saved so now we get all these books so those similar way you can achieve all these things so like this so this is for gate so you can copy and paste for post so now I'm going to set up all right as you can see this is for getting books and we'll get all these books the response and that's it it's down it's component schema box and this is for get request afterwards we Define here the post request and here is the summary create a book Stacks books request body that means Port request you have to send something in body so that is why it's required contain application and it also goes through the component schema books and response type are also a perverse you define here book and book ID so here is the parameter in path and everything so it's getting booked by ID and if nothing is happening then you'll get 404 description that book was not found and put in here the put request that means update the books so this way you can Define all scheme about remember you will get indentation error or ymail 70 error so to in order to avoid this kind of error you have to uh Define all this thing exact the same way and you have to give the same space so yeah that's it so if you just save these things and go to the browser and then you can able to see so let's reload these things and as you can see here all these things added per delete you can see it's red boot and the gate and post so everything is updated automatically so whatever you want you can do these things very easily just we have to configure the yml file this way so it is very sensitive and you have to just learn these things so for more information you can visit here API design and development and yeah you can do these things here so if you just read this thing API documentation and yeah you will learn a lot of things so pretty much that's it and if you like this video just subscribe my channel give me motivation read content thank you very much

Channel: Skills With Arif

Views: 104,508

Keywords: Swagger tutorial, how to make api doc, api doc tutorial 2023, node js tutorial, Express js tutorial, web dev simplify, Skills with arif, web developer tutorial, swagger tutorial rest api, swagger tutorial for beginners hindi, swagger, swagger rest api documentation tutorial, web dev simplified javascript

Id: dhMlXoTD3mQ

Length: 18min 31sec (1111 seconds)

Published: Sat Jan 21 2023