How to Create and Test API with Swagger Tutorial - For Dummies

all right no here you are clearly going to learn how to create API server how to test apis with the help of swagger I'm going to do all of it with the help of Chad GPT or AI which you should already be using as well this video will be helpful for QA Engineers software Engineers software developers ASAT whatever you call yourself the main idea is if you're working with API this video will be hyper helpful for you you if you are from Junior up to the beginner of the senior level cool since I already got your attention let me introduce myself within 20 seconds before we get into the all of this technical stuff which you are about to learn and by the way while I'm going to be introducing myself you feel free to hit that like button below to subscribe to your channel and also make sure to hit that share button below this video because I promise you you're going to love it so much that you are going to share it with your friends afterwards all right my name is Sergi kenko I am a founder of kodify QA boot camp which helps people like you to become a software QA Engineers or ke automation Engineers from scratch or to improve your existing skills but today we're even going to help some of the software developers or those who are planning to become one to learn how to create API servers and how to set Swagger for it and also how to test API through Swagger because all of you developers you got to know how to test apis so we QA Engineers wouldn't have have to find all of the bugs in a world so you could find some as well all right now let's get started all right let's rock it first of all I want you guys to open up your browser go to google.com and type Chad GPT and open up a first link which is chat. opi.com and you have to register a new account if you don't have one and you'll have to log in at this moment of recording this video I'm utilizing Chad GPT 4 which is a paid version there's a free version which is 3 3.5 you can use that that will give you very similar results but since I already have a paid version and at this time I'm paying 20 bucks per month I will use that for the benefit cool with the help of chat GPT we're going to create an API server and set up Swagger and then I'll show you how to test it so let's kick it off step by step and by the way no worries I'm going to walk you step by step and show you how everything is done and I will explain the code to you cool now let's CH ask chat GPT how to you create an API server in nodejs and have and set up Swagger in it please share the code wave explanation so we're we're asking as you can see we're asking chat GPT to create us a server and set up Swagger for and also explain it so let's see what we're going to get in response below is a simplified guide to get you started first of all initialize the project okay while we are getting all these instructions I'm I'm going to ask you guys to kick off your not a browser but kick off your ID of your preference in my case it is vs code and in a few words Visual Studio code or vs code is the place where you can write the code it's a code add edor or integrated development environment the place where we can write a lot of code so or create any programs automated them Etc if you are not technical if you have not done it before please navigate to google.com and type in vs code and get to the download page and download it either for Windows or for mac and after you set it up you will have something like this and from here I'm going to inct you cool let's continue so by the way I've opened a terminal by uh clicking terminal and a new terminal on the top of the screen or you can do with the help of the shortcut either way you do it first of all I'm going to take a look where am I and I'm going to create a new folder so and I will do it on a desktop so I'm going to navigate to the desktop and I think I have a I have a project whatever let me clear it I'm going to create a new folder make there on Mac and I'm going to call it let's see ap- Server actually API unor server and now I'm going to open up this folder and for those who are not familiar with a terminal commands feel free to just Google them but what I did I've created a new folder by the way you can do it with your UI with the help of finder okay I've created a API F API server folder and I've opened it up now let me quickly open it on in the UI so you guys could all see it I'm going to go to I believe that was desktop API server perfect I'm going to open it up cool I'm going to close it and I'm going to press function option Tilda or that's not it what is it Control Function control Tilda yeah there we go function control Tilda on a Mac on Windows it will be something else but whenever you click terminal you will see a shortcut right here cool now we can get back since our ID is already set up and we can start creating the server let's get back to the browser and see what we have received so far so first of all we have to initialize a new project when you're working with the NOS or with the JavaScript you have to create a new project pretty much initialize it and npm in it is the command that will do it and Dy means that we are agreeing with all the questions that we will get when we run npm init and you can do it on your own you can just run npm init and then it will ask you a lot of questions and you can just keep hitting enter so you could get the default value or you could simply add- Y and it will do it automatically for you and as you can see it created package.json and also chat GPT did specify to us awesome step number two install all dependencies whenever we are working with JavaScript we have to install quite a few libraries that will help us to do multiple things and I will explain it to you quickly Express is a framework that helps us that helps us to let me see it that helps us to actually run the back end run the API server and you will see it in a moment Swagger UI Express will help us to build the UI for the Swagger and the yamel Jazz will help us to work with I guess with a yaml in JavaScript yaml is the file format and JavaScript is the programming language so I assume this one will be needed in order to work with the yl in some interesting way cool then we have to create actual server so create a file name called server.js and then I'm going to copy this code so I'm going to going to navigate here touch server.js and I'm got to hit enter and you'll see the file popping up right here cool I'm going to paste the code that I have just copied and let's scroll down step four setup Swagger documentation okay so we are going to copy this code and we're going to create Swagger file called Swagger yaml once again yaml is just a file format so touch on a Mac on Windows will be something else Swagger do yaml cool and now I'm going to click here command V to paste the code okay I'm going to go back and I'm going to scroll down update your server JS to serve Swagger documentation using swagger UI Express okay are they saying I should completely update the file why should I have created it at the beginning updated server Jaz okay well I guess chat GPT is not that smart or maybe I'm missing something let's update it I guess that was the first version right here where we did not have the Swagger and now we did add Swagger so if you would like to you could go through and see the differences you could see that there is no Swagger UI uh imported at all and then here we have a Swagger UI imported from the library and then we have uh let's see we require yam Jazz we load yaml we read it with the help of the yaml library and then we run it on the server uh on the port 3000 okay let's finish going through let's finish going through this instruction and then I will explain you the code okay this code sets up an endpoint API docks okay so pretty much we're done we're done running we're done creating everything now we can simply run this command we can just click here copy or triple click here to select entire line command C and get back here and run command V and let's make an attempt to run it cool and you guys might not get this problem I know what it is because somewhere else I'm running I'm already running another server on my local on the port 3000 so I'm going to make a change if you do not see this error message you do not have to change it but I will change the server to 3000 let's see oh we do not specify Port here okay cool so it's only one place awesome okay let's run it now let's run our code again no server Jazz so we're pretty much saying hey no JS or JavaScript can you please run server JS file and when we run it here's what happens computer first reads all of the requirs uh or all of the Imports then uh we are specifying let's see the app will uh will be expressjs will be Express which is the backend server software then the port will be 1,000 and that's where we are running it and by the way for new people Local Host is pretty much our Base website and the port is just like a door hey on this website which is my computer we have a door number 1,000 and that's where we are running our server and then we're saying app use API docks which is our path to the to the Swagger I will show it to you in a moment if you are lost here then we're saying hey uh we're using swagger and pretty much we're setting up Swagger to this path right here and I will do it right after I explain this piece of the code then we're saying hey there will be one API request and this this one will be sent this one will be get request and it will be not the default but the base URL so all of this plus slash will get us hello world so let's check it and by the way this is just the beginning we're going to make it much more complicated so on my Mac I'm going to press command and just click it and it will automatically send it to the uh to the base URL of the API server and we can see Hello World here it is the very base we're going to improve it quite a lot in a second cool now add app is listening and we're just specifying whatever is going to be our output whenever we're listening whenever the server is running and this output is right here and we are interpolating our uh our text here with the base URL plus the port number cool now I'm going to show you how does the Swagger look like so let's click here uh let's press command click here again or just right click copy and paste in a browser and at the end here we got to add slash API docs I'm going to hit enter cool now you can see the very basic of the Swagger by the way we're just creating it we're going to be testing it in a few minutes I think you forgot to hit that like button below and to subscribe to our Channel please make sure to do so so you could give me some energy back because I'm giving you such a useful content right and if you do think that it is useful make sure to leave a comment below and than thank me for it by the way if you guys are interested in learning more apis or if you are interested in becoming a QA engineer or QA automation engineer feel free to check out the links that I have for our courses that you can find right below this video all right let's continue and the in this Swagger documentation we are going to be able to test it and to see the documented version so for developers it is amazing because they can keep the documentation of all the apis for now we have only one that gets returns greeting which is kind of the dummy but I will show it to you a much more expanded version in a second so usually it looks like this you expand it you see that we have a get request and now we you want to try it out so we have a button here try it out and since it is a get request we cannot cannot pass any data or any parameters so we can simply execute it and this is an example value in response so we're going to send request and now after we have sent it you can see the response so our request was as following and by the way you can copy it and paste it in a terminal as it is a curl which is an API client the requested URL and the response body and also response headers so this and also you can see the Response Code uh 2 100 etc etc etc so this is very useful for the very beginners but now now we're going to improve it a little bit before we proceed with more in-depth testing okay cool now let's ask chat GPT if the chat GPT can create uh can add all of the all of the most popular API requests can you add crude to this API server and Swagger and by crude I mean create read update and delete and in the world of API that means create which is post read which is get you uh U which is update I'm sorry uh update which is put and also what else we got here uh D is delete which is delete great let's take a look what does chat GPT tells us step one extend server JS for crew pretty much we can just copy it and you can see in now we're going to have multiple uh we're have a few new things and I will explain it to you guys in a moment since this one is ready to go I'm going to copy it with the command tab I'm switching back to another window and I'm going to replace all of this code with a lot of the code cool let's come back this file is not done yet let's give another moment to Chad GPT to finish our Swagger yel file which I will show you in a moment and just FYI that one is purely for for the Swagger in order to create Swagger you simply have to create a Swagger yaml file awesome it is a good time to copy it and replace our previous one boom now we have n90 lines of code which is amazing I'm going to scroll down and see if we need to do anything else great nothing else is needed we just have to restart our server I'm going to press here and press contrl C Arrow up on your keyboard and return awesome I've got a same error you guys will not have it one more time I have to update my server to be something else instead of 3,000 let me just do 333 instead and let me make sure that we don't have another uh we don't specify it anywhere in Swagger let me just uh command F three ,000 not here amazing cool that means we're good all right let's let's start the server Arrow up run it again amazing Local Host 3333 I'm going to this time I'm going just highlight it copy it switch back to the browser and navigate to actually I'm just going to update this one to 3 3 3 3 because I'm running different uh different port number and one more time I'm just doing it so you guys could see that that is just a door that you are choosing on your own and whoa look at this we've got three actually Four apis now get post put delete which is create read update and delete all righty now we're back here so let me read the code to you again first of all we're importing all of the libraries uh second of all we are uh we're specifying the um the app that we're going to be using using we're specifying the port Middle where to parse Json bodies okay we are parsing Json which is a response we're going to be uh which it's pretty much the response is coming in Json format and we're going to have to parse it and the next we are creating a database for now it is going to be in in a code only that is not going to be something that we can see it's only going to be saved in an array for non-technical people if you can ignore it's just going to be saved in a database that we' created right here for more technical it's just an array of object of objects which is a very simple version of database that we can use in our code okay crude first one get we are getting our base URL Right Here Local Host 3333 slash items that's our get request and we're going to be uh getting response we're going to yeah after we get response we is going to we just going to parse it that's it post items same URL uh it's going to be exactly the same URL so this base plus SL items and we're going to be passing an ID and name and then we're going to be adding though these items to array items right here in form of object as we have specified and then we're going to verify the result actually we're not going to verify we're just going to send result uh 2011 cool the next one is a little bit different put or update in this URL so base right here slash item slid so slid is a parameter and that will come from here uh let's see I ID right there yep so we're going to be updating one of the items by specifying an ID and aside of the rest of the code I'm going to show it to you right now so you guys could match what you have in the UI to whatever you have on your API server okay now is actual testing part so welcome to API testing with swagger so we have a four calls get post put and delete first one we've already seen but let's run it just in case one more time so I'm going to click try it so we could see number one we're going to see execute button here so this button will whenever we click it it's going to send the API request number two this section is for the response so here we see an example value but when we send it we're going to see actual value and and this this is an example of the response let's send it cool we have just sent it first of all we see what we have sent we've sent this request by the way with the help of curl which one more time you can copy and you can paste it in your terminal which I will do just right now I will paste it in my terminal and I will hit run button and you will see same response right here in the terminal that's just for you to know that curl API client from from the Swagger you can copy commands and run them in a terminal cool then we can see URL right here separately aside of seeing it in the same curl request and and mainly the server response we've got 200 status code so we have to test it and make sure it is what it was expected acted number two we've got our response body and we need to verify that it is in the format that we were supposed to receive and usually you guys will get it in the form of ticket or developers will tell you what you need to verify or the some of the requirements that your team will provide will tell you that and we've got our array of objects at the moment it is one but we're going to verify it soon that we're going to have more response headers there we go so all of them are there and usually you will have your requirements specifying what heads should be there and which ones are required at this moment that should we should be it the rest is just an example as you've seen before cool so this was all about get request now let's get into the fun part post API request so one more time after the base we're going to we're going to uh append slash items which is our path and then we are we're not not seen any parameters yet but as soon as we click try it out we should see parameters there we go and name example item let's call it item is name actually is sery so we're creating a new item and looks like this API server is creating some items saving some items and removing some items and we're completely fine with that so let's update our Quest body and send the name cool we've sent it let's scroll down here's our curl request and you can see all of the headers by the way minus X means both if I'm not mistaken uh then we have URL and then we have minus H which is a header and then minus D which means body right here that's for you just to know if you're not familiar with the curl but regardless that is not needed to be tested also you can see the U request URL and finally response body the ID is unique and I'll show you how we can use it in the future the name is what I have requested in the body right here so now we know that we've sent this uh this body in request and we got it in response plus we got an ID which is required since I do know that we have to get it based on a code that we have written and let's see we got a headers here and we got two1 as you all know two1 is created okay I'm going to move move forward this is the fun part this is the first part of the fun part now for developers and also for QA whenever you create something you have to also get it after you post it you have to send a get request and make sure you got it so I hit execute and now I see two items the name one and name sergy id1 id2 cool but that's not ex exactly what you want it it's great that we can get all items and see it on the list but the best test for it is actual uh get hold on we don't have that one here so we don't have get by ID we only have update by ID so this one should be okay for now but usually you will have another get request which would be just like this one where you specify items slash ID so it could get you it could return you only one item for now we're getting many and we're fine with that for an example great now let's move to put and update our ID or update our item let's click try it out and we have to specify an idea of the item we want to update so the first one was some Dum one remember it was like test item or something item one I want to update that I'm going to click here so I've Chang it to one I'm going to update an item with the name with the ID one and the name is going to be updated item name name and I'm fine with that cool let's send it execute let's send a request and execute it so curl body URL response body an item with ID one is now containing the name updated item name which used to be different let me come back to get items is still saved here as item one now I'm going back to put or update and response is updated item which means means after also developers and qas if or everyone else whenever you update data through put request you have to go back to get request by ID in our case it's just get all items which is fine and you have to verify that after you get it that name is different now because there might be a bug you might get a response that it was updated but when you actually get it by ID or you just get all items you will see that it was not great we did test items we did we did test get we did test post we did test put now let's test delete so delete will also accept one parameter and this is also an ID so let's try it out okay let's click try let's remove item with ID one and let's get EX let's get it executed awesome we've sent it and we've got 204 oo no content usually actually I have rarely seen 204 usually people just specify 200 but in our code we have probably specified two4 right here great job Chad GPT thank you for following the rules and now after we have removed can you guys what we got to do you know what's up we have to send a request again so I'm going to click execute and now we have only one one item and that one with I id2 because we removed id1 right easy peasy so id1 Al all was already removed and now if I try to remove id2 I also get 204 so now I should get back to execute uh to get request send it verify it awesome we have an empty array which means we do not have any any items at all which means we did remove all of the uh all the items that we have created amazing that means that we've tested all the apis the only one thing here that we have not tested at this moment is actual authorization and this will be out of scope of this video if you guys are interested to learn more about how to test Swagger with authorization or how to add it in a form of code feel free to leave a comment below this video and meanwhile I'm going to get back to the code and explain it for you guys so so we' have finished on let's see we've gone through get request we've gone through pulse request as soon as we would receive request we would send this response in body and we would do ID and then we would take a link pretty much we would take how many items we already have in our database we would just plus one to that ID and we would same we would send same body that we have received from the request and then we number one we before we send it we add it to our database right here and then we will send it to uh to the app as a response then put we're going to do the same thing uh but we're going to find that item by the uh by the ID that we have by the ID that is specified right here as the parameter so we grab it and then we parse it and then if item does not exist exclamation mark means doesn't so it does not exist we're going to return 404 item not found by the way I have missed that test case let's get back and test it that's actually really good case because weft only tested positive cases now let's test the negative case so if I'm going to send this one now no let's say no items exist in a page as you can see the body is empty so I'm going to send a put request test and response should be 404 undocumented perfect or not found item not found so that means our code works as expected right here next we're going to let's see grab the body from the request from the request body and assign it to the response body name and we're going to send it back and delete is the same thing we're going to filter out uh or pretty much we're yeah we're going to filter our ID we're going to also parse it and afterwards we're going to filter out our ID and a filter will do very similar thing it will just filter out the ID from the database and then it will send two or4 which means that it is gone now and then one more time as I've said before we are saying that our app is using swagger and it will be available by this uh by this path so pretty much base URL plus SL API ducks and whenever we're uh we're running our server it will specify this message right here awesome and now Swagger yaml so this is a bit more technical but in a short in a few words Swagger is a structured file that that gives pretty much it is an instruction file that explains to our application or specifically to our Swagger UI Library what exactly it is going to include and as you can see we have a different items and this items has a line right here which goes all the way down and this line will include number one get number two post number three put and number four delete and uh put and delete you can see they they are in the different section which is items SL items slid and if you remember that that's exactly what we have right here put and delete they have little bit different URLs or paths item slid instead of instead of just items uh and ARR rest then inside with specify put then under put with specify summary by utilizing indentation if you guys want to learn more about yaml about API testing or even creating apis feel free to check out links that I'm going to live right below this video I'm pretty sure you guys are amazed with the amount of knowledge that you got and I do want to encourage you to number one hit the like button number two leave a comment below number three subscribe to our Channel and the main one click the share button and send it to your friends this will help the most to this video to become one of the most popular ones on YouTube thank you for your time and I'll see you next time

Channel: Codemify

Views: 3,913

Keywords: qa, python, job online, learn by coding, software engineer, software developer, qa engineer, quality assurance, qa school, qa bootcamp, how to become a qa engineer, qa tester, software testing mentor, what is software testing, software testing tutorial, remote job, software testing course, swagger, Chat GPT coding, api testing, swagger api tutorial for beginners, how to use swagger for api testing, api documentation using swagger, swagger api testing, swagger api, api server

Id: 4sR77vaEhy8

Length: 33min 6sec (1986 seconds)

Published: Sun Apr 07 2024