API How It Works With Practical Examples

hello guys how all the word welcome to a new video from my penis in today's one we aren't going to cover or talk about api's so what are IPOs I'm gonna explain them briefly and we're gonna go through like a real-world example I've created in here just to let you know or to like let you know more better understand how API will show why they exist anyway and why they are very very useful especially for web developers so what actually our API is API is the shortcut for or stands for application programming interface and what does that mean actually is it's like kind of software or tools that gonna help you create your application so it is as simple as that so this like two terms almost off your terms like are the set of tools resources and or debugging tools that gonna help you or libraries they're gonna help you create or achieve such such a functionality create such an algorithm or parse such there and on the like server side or like for web development side is like a server you request from any gonna get you data and stuff like this so like the web development think it's much more easy to understand much more easy to interact with so that's what I have put an example here I'm gonna show you or walk you through about step by step on that so I'm gonna show you what is API sexually in why they are variable or super useful for us as web developers up as a software engineer anyway so for api's I've created that very very explanatory or self-explanatory example or server in here as you can tell music Visual Studio code in here so after this or API server if you're not familiar with like cleaning service in no js' and expose framework I really do recommend go ahead and watch the note GSU's I've done in the channel so just go to the channel videos and can find LTS use in there make sure to wash it before continuing this one because it cannot help you will understand what you're doing here so first record just creates a server over here as simple as that just create server and for example and here we use the body parts then for this one you are using the access although origin and why actually this one is because we submitted Ajax request from another you wanna or from a number to me let's say there's a domain called I press calm and want to submit an AJAX request from another domain called Facebook but just for example so when we try to submit that if you're not gonna allow the headers to go through back and forth on the server and define itself this is not gonna work so we must do this one for it to work so you can check out this example on the end of the video so you gotta find github just go to the github repository I will get out to pasture diaperless and you're gonna find all the code in here you can just grab it and play with it or manipulate it however you want so here we just created a pokémon's we're gonna for example or this excel watchfully is specifically for pokemons so I just what but the Mo's just happened to be so pokemons I've gone here a name of Pokemon and ability what a pokemon is capable of doing and here just around a simple router that I'm gonna return a Pokemon list so that Pokemon list gonna like to return the list of pokemons and the over rocks is added of Pokemon and the last rows is remove a Pokemon from this way so just for this specific example I'm using an array or like a server stored array so for a much more real-world example all of this data is going to be stored on a database for example my sequel or my or MongoDB or any other kind of database service although but this one needs to be stored in a database do not store into a server sign in here because this is a really really bad thing to do it not gonna help you were not gonna work I'm not gonna make your application even an application at all so here actually I'm having to remove Pokemon so all we do is just loop through and find the Pokemon that we're going to send using the request so I'm gonna send that from the request and we're just gonna find it and remove it then send or send a response continue like success and pokemon removed successfully then we allow the so it kind of seems a bit complicated but as you go with it or it's gone through - Walker but step by step read it carefully and alongside just understanding how many OGS works is gonna help you will last you cancer said it's really very easy and very super useful thing then we'll listen to some reports and we start the silver so let me just start the server I haven't already so let me a pion server is just start it up here so we should see server running at 33,000 we're running to port 3000 now what I've gone and do is a create an index for each mo so this is like the server the API is a servant server has the data then we are going to submit the server go to the server and we tend get some kind of a request and actually when we send the request the server takes that request is gonna parse it and like take all the parameters that they are gonna send on the request take that data and parse and then returns us a response containing some useful data as well so this video is gonna be like respondent or sent us a response we're gonna contain also a useful data we need so this how much of the API works is just a request and respond and all kind of things and this like the term of server and client things so as I've said if through an index dot HTML and this is representing the client side I've just done creating the form for cleaning new Pokemon and a list for showing the available pokemons actually and here for the query API J's let me just grab this one in here and close this one I'll open all this kind of confusing things but as I've said up in this 20ml create a P I which gonna help us query from the API or from the server api in here we just using jQuery for some million in Ajax also another thing I want to mention if you're not gonna fit or if you're not really familiar with Ajax and if you can't like actually understand why Ajax is so important or why you use it in to you I really do recommend going in like in the channel I have dedicated a full dedicated video about agents in a real world or practical example so just go ahead and check it out then come over back in here and you can clearly understand what should you mean here so as I've said and have a few pop functions you need to request from the API and then do it or like it was submitted to our index dot HTML the Dom so let me just open up this index.html to show you what it's actually is open in default browser this should open up and stop HTML over here and as you can tell here is and so this just I've created that it's very simple thing here you can add a new pokemon with entering the name of Pokemon the ability and here you can tell this like the listed Pokemon so it grabs this from the circle if we go to the server and go all the way down to the area you're gonna find the same once in here so no changes all of them are listed on the server right here so all we are doing is just submitting the API and getting data back now if you try no pokemon for example you can use here culture and this is new ability and try to add a Pokemon it gets I'm just using here allows you get Pokemon on successfully reload and you get a new Pokemon listed in here if we go to the server you're not gonna see that array changes but a scan telling you I have just using console dot log and as you can tell we have new a Pokemon audit on the server so what I've done is Center requires to the server then a server responded back and well actually the server responded back with is just that response if we go to the add our Pokemon round this is what we're using to add a new Pokemon is responding with such a success and a message call message contains Pokemon and successful and just reload shoe so this is how it actually works a request and response it's very very simple if we now try to like I don't know the leaving you Pokemon the left just created we've got Pokemon removed successfully and the Pokemon um it has gone nuts so it's as simple as this is how API works and as you can tell notification you we don't have any instance of this data at all so all we do is just a cool an API and try to grab the data from it or change something on that service so all we're doing we are interacting with this server afternoon here we have no control over this data on the server I mean this pokemons list over here unless we just call or submit a request in to the server and server handle the requests and just give us a response to back so all this oh why is IP on is very very useful so you have a piece of Diana on such kind of service a user data private data and you just submit like request to that to that service specifically and you gets like you want to change something you want to change your username for example you submit to that server or even have that dealing here so you tell the server to change your password in this turbo or your username actually and the server cannot like respond back with success your username has been changed successfully and probably the new username or not so it's hot this is like the basic structure of it you can go through this code but all we doing here let me just example or like explain the API and to better understand that I have to be using here as the let me just open up personal so if you are not familiar with postman is just a tool by gonna do you send HTTP request and parse over there and best use it for testing a peons and this is what actually committed to use it for just testing this API and telling one in Thousand Year so let me just walk you through that we have around to Munich read-alouds pokémons list so whenever we request that route over here so forward slash Pokemon list and we should use the get request for that we're just gonna tell it if the pokemons here are not empty which indeed are not empty near the array is not empty and we just return response status success and with the pokemons Pokemon so we send that JSON and a Pokemon is Pokemon and like for the list of the pokemons or the array of pokemons in here and pretty much most of the time api's sends back or works with JSON so like JSON are the most user data types to send or to like for APS to work to interact with the user to send him back be era and to send data to the server optionally in order to parses so all you only need to know about JSON if not already is just some data type are gonna it's just works like our 2-butene here and a value then an RGB to the volume and it can hold any data typing in integers strings anything at all you can use it and put it into this one so you can also put your raises kintel of Pokemon linear arrays and send it back this all we do so now after postman has been or it or open up so it just resize this what do you exactly fetch that or fill it so here what we need to do is use or like submit the URL in here with children so for response pokemons list means the HTTP localhost is real starting on three thousand port and pokemons list and make sure to use the get request since we're using and get listed here just send it back or send it to the server and we should get some useful data back so here we have gods or not how to maximize this or something okay you're there any osaka success pokemons which is first fully in the pokemon slits itself so this how it actually works so we just submit a request and we get this response over here depending on what the server provide us if the server won't provide this one so it's not gonna work actually so we can't access it this one or we counts us this way until or unless the server give us Vance and which means eople or he provided a route with like an get requests in order to return these specific or the specified data we want to get so this how it actually works it's really simple this will get request for the post replies to me Oh ice cream so we help using or without are usually actually the post request and we are submitting or selling to the added pokemon rot so whenever you saw me at that we're just gonna console.log the data we've received from the request body pokemon name and this happens to be or the data that I'm gonna send on the request in order to add a new Pokemon so for having your Pokemon we need just add the new likely Pokemon name the Pokemon ability then we send it to the receiver or the server actually gonna store this on a database in another example for Austria just using this quick everything nasty thing don't use this please don't use this use database so yes I was telling so then we're gonna just use pokemon stop push and then push the new pokemon over here in very very simple way so I don't know what I'm having here so let me just delete this one okay here are we just sends back the poem message pokemon successfully with a real of now if we try to submit this one I believe if I have this one in year so I'll pokemon see yep I'll have this one and make sure on the body if you're going to use that make sure to use xwl for iran up and hold it because this is what just makes it leave the data and put in here the deal at the pokey name and the pokey its ability since we are specifying the protein and pokey ability you need to access under the body and request body pokey ability so make sure both of this like values in your matches unless it not work and here we just sending it over back send capture a lot jet fighters for example another pokemon and we try to send this one and wait and we get reset pokemon unsuccessfully if you go to the server we can see in here since we are also login and up here we see in pokemon or potential electrolyzer so like if you're confused abyss this server and this client things are completely different things this one is going to be like the other half of the world in this one and your computer so like your browser is running this one and the other one is located on somewhere or China somewhere on the USA on or something like this but like completely different things do not match or mix between them so they are not the same thing this one has no access to this one unless they use a POS as we were talking about so also a furthermost pokemon is we just submitted here remove pokemon for that let me just give you and explain this so also we're using a remove Pokemon route and whatever we send a post request we're going on just like console out of the pokey name and you all we need we don't need the ability for searching for a Pokemon and the limit from the array or the better say from the database so all we need is the Pokemon name and in most scenarios you're not gonna use the name you go you actually going to use a unique ID but is just assigned for a bad critique for objects only so you don't get some dealer deleted by mistake so something like this so this awesome as I still use an ID and here we use in pokemons and pokemons not an empty array just double-checking things in Pokemon for each looking for each Pokemon and then pushing it or create a new array but not including the one we need to delete then replacing the original one so as symbols that create a new array we do not include the one we want to remove then we replace them here as you can tell we're setting the pokemons this is the original array to the new array that have been created and that's not including the Pokemon that we want to remove so here this investigate the Pokemon that we have submitted new the bulky money that has been removed is does not exist on this array and just happens to replace it with this one and this how we talk to the diamonds you can use any other algorithm to do that but this my way to do it and this what we do need to do so we then we send response JSON and as I've said JSON is mostly used at the outside thing then we send this pokemon removed successfully now if we try to submit this one is good we just get pokemon and move successfully in here because she also happens here constantly blog in the name so it just works as simple as that this is how actual API work imagine it as a server and a client and a client in send in a request then a circle Park was handle it I'll do some changes on the database do something according to what they like the user or the client sent on his request so he saying something and just send him back a response whether I never responds whether an exception response weather is responsive it happens to be here also you can have here else can tell status error which just not gonna work and so on and so forth so this how it actually works it's very very simple very very useful for you as web developers or super useful for you to use it for your like website for your data not to make it more reliable and more useful and very very easy to work with so as I've said this is all of it you're gonna find this application on this quick demo in here using pokemons you can add you can delete I don't know just either Pokemon and try to test with it it's really nice things you can get his one on the github the link in description below I'll be very happy to have your thumbs are pointing us comments if you can yeah that was actually guys I will catch you in the next we get story on