Ionic 5 HTTP - Ionic http get

hey guys welcome to another code swag video in this tutorial I'm going to be giving you a basic demonstration of how to use the HTTP protocol in your ionic app in simple terms that means how to grab stuff from the internet and to display it in your application let's hit the intro music okay so when we are using the HTTP protocol we need to have an external resource of some sort so an API from which we're going to be fetching data and then it's that data that we're then going to display in our application so we need to create an API so the first thing is we want to go to this website called mockable io so in this basic demonstration we are not going to be using a real API so when the mockable dot IO website loads we want to click here where it says try now so we're not going to be using a real API we're going to be using this maka Boulder are your tool in order to create a mock ABI so mockable is very useful you can use it to quickly set up mock api's and create any sample responses that you want to create so it's very good for getting that set up very quickly [Music] [Music] [Music] okay so when getting started with mockable here we want to define a new rest Mach you don't want to use soap and we're gonna get this quick tutorial so it's just telling us how to configure our new Mach so we'll fill in the information here get to the next tip so here we can enable a dynamic response we are not going to be using this in this tutorial and here we can start and stop that okay so here we have a deep pot so when we hit this URL and whatever other thing we put here that is then going to return the response so first we're going to be making use of the HTTP GET method and we're not going to be using any headers at least to start with and we want our response is going to be 200 okay our content type is application slash JSON which is exactly what we want content encoding is utf-8 so all of that is great now this is the response body so when we hit the API this is the response that is going to come back so what we can actually do is we can just save this and it's going to take a while okay so the mock has been saved successfully let's dismiss about that okay so the mock has stopped is it stopped okay so we need to click this to start the the mock so we just saved it now it has started so that means it's now live so it started on this link and this one so one with HTTP and one with HTTP so if we open this link in a new tab we should get this response and that's exactly what we get so mockable allows us to create a mock API or a dummy API it's not a real API because it doesn't have anything happening in the background but it allows us to quickly get set up so we want to simulates some API that returns to us a list of friends so we're gonna get someone's name their age and the city that they live it so I'm going to just paste this data in here and we can see that the response body is going to be an array we have this square bracket here so that's for an array and it's going to be an array whose elements are objects so we have this one object and then we have another object here and so on and so forth so it's a list of objects so each object is going to have a name property so we have here George and we have an age property which is an integer value here this is a string we have a city and we have this property for avatar so this is going to help us in our application to include a nice picture with each friend of ours so we have a list of this is the second one third one fourth and five so we have five lists sorry five objects representing five friends so this is what's going to be returned by this mock API so let me save this and as soon as it is saved when we hit those API endpoints we are going to get that response so again it takes quite a while to say but in the wine okay so if you open this anomaly tab we get this JSON response which is a list of friend objects okay so that's great we have our mock API running so the next thing is we want to start developing our application if you enjoy our content please consider supporting us by becoming a patron for a small amount you can support the production of more great tutorials and also enjoy great perks such as early access to tutorials before they are uploaded on YouTube up to four weeks in advance special rights to make requests and to vote on the topics that we will cover as well as free access to my course ionic framework tips tricks and techniques bye Packt publishing it contains over 5 hours of material covering wide-ranging topics from UI design to performance improvement to security there are a limited number of copies that I'm giving away so become a patron today by visiting patreon.com forward slash code swag ok so we are in our command prompt I'm just going to go into my projects folder and clear the screen and then now I'm going to start a new ionic project so of course I do that with ionic start and we're going to use angular and our project name or gonna call that let's call it HTTP demo and we want to use the blank startup project so this is going to go ahead and download the blank startup do we want to integrate with capacitor we're gonna say no for now and that's gonna go ahead and fetch all the dependencies okay we're not gonna create an account and there we go our application starter project has been created so let's go into HTTP sorry that's HTTP demo okay so let's clear the screen and let's open our project in Visual Studio code so we just type in code and then appeared and that opens the application in vs code okay so in order to use the HTTP protocol in an ionic angular app what we want to do is to use the built in HTTP client from within angular so in order to do that we need to go to our app module file so let's go to okay before I do that let me increase the font size so that it's easier for you guys to see right now that was Indian we're gonna go to source here in our file explorer app and we want app dot module tortillas okay so within the app module file we want to go here to our inputs and we're going to import HTTP client and HTTP client module so this is going to be imported from at angular common slash HTTP okay so these are the two classes that we're going to need HDTV client and HTTP client module and we also need to make sure that here in our list of providers we we include the HTTP client so if we we need to import HTTP client and HTTP client module and include HTTP clients in the list of providers so we're gonna press ctrl s or command s on Mac in order to save and then the next step is we want to go to our home page HTML so we're not open the Explorer here and here on home we're gonna go to home page dot HTML so in our home dot page dot HTML we want to get rid of I'm gonna get rid of this header here and I also want to get rid of this content right here okay so here we've finished creating our HTML so basically we're gonna have an iron button and when we click on that button we're gonna run our HTTP method so this is going to run the HTTP call to our API and we are gonna have a list of items and then for each item we're gonna first have an avatar and then we're gonna have the person's name their age and the city that our friend lives in so here you can see that I've hard coded all this stuff the name age all of that stuff so I'm gonna make it dynamic in a second but what I want for now is for us to see what it looks like so let's run the app in our browser and check it out so to run it in our browser we're gonna type in the command ionic surf okay if we go into the mobile app linear then we can see what it looks like so we've got the person's name and the age and the city that they're in so this is going to be our list okay so we have it there on our screen I think let's go back to the code editor and I just want to make a few changes it's not really it's not really looking very nice here so I'm gonna go back to you could it sir and I just wanna make a few changes so here let's F everything so here let's have everything in one line so I want to put in a non-breaking space so we do that by putting the ampersand sign and and be SP and a semicolon and let me put a high from there and I'm just gonna copy this and have this non-breaking space as well okay so we're gonna have that - and then we gonna have the age and then the city so let's put on breaking space - non breaking space and the city so all of this is in one line and it's going to be spaced out much better so let's save that and go back to the application and there we go George 46 Minneapolis okay so this is the hard-coded stuff so this is what it's gonna look like but of course I need to put in variables because remember we are getting we're going to be getting this information from our mock server so in order to do that in angular there is the concept of interpolation where you can dynamically put in values in your HTML template so what I'm going to do is okay first of all I'm going to come up here and dynamically allocate the avatar okay perhaps let me explain this first there's this service called API there is this service called adorable dot IO which allows us to dynamically create avatars so you just pass in a random number here dot PNG and it will generate a nice avatar for you like that one there okay so here we if you remember we have the number for our avatar in our API so we're going to interpolate that using angular interpolation so this is going to be our friends this is going to be our friends avatar so we're gonna put in friend dot avatar that's friend singular and here for the name we're gonna get rid of that this is going to be a friend named yeah this is gonna be friend dot age and finally we're gonna put in friend dot city okay so also up here since this is a list it's going to be dynamically generated from the results that comes from our API so in angular we use a for loop so the syntax is like so ng for and we're gonna say let friend of friends right so what this means is that when we run the HTTP method we are going to get a list if you remember that list of friends let's go back to it if we are back here you'll see we have this list of objects right so we're calling this friends this list that we get back so a saying let friend of friends so each friend is going to represent one object alright so essentially what we're saying is let one object of the object list the object list being friends and then the object becomes friend so then we when we say friend dot avatar it's going to grab so in each object so this is the friend and this is the friends list so we have the friend so the friend dot avatar here is gonna be one forty five the friend avatar here is going to be 796 so what it does here is for each iteration of the loop as its looping through this list it's going to say let friend of friends so friend dot avatar for the first pass in the loop is going to be this one friend dot name will be this name here friend age here and friend dot city is gonna pick it from here and then when it's done creating for the first item and then it will loop into the second item here so it will once again make another ion list and then fill it in with the same information it will fill in the avatar it will fill in the friend name which in this case is Sandhya and it'll put in the age and city and then for the third one and so on and so forth so that's how we create a loop within our HTML templates in ionic angler okay so I think that's ready for dynamic allocation of data so let's press ctrl s to save or command S on a Mac let's check out what it looks like now in the browser okay so you see we have nothing on our screen that's because there's nothing to loop over if we look here we haven't really implemented this sorry we haven't implemented this that method so there is no friends array to loop over but we're gonna fix that in a second okay so there's nothing so we need to now create that method so if we go to our file explorer and when you go to your home page dot TS let's go okay so this is the place where we will implement the code that is going to do the actual fetching of data from our API using the HTTP protocol so in order to do that we have to first import the HTTP client okay so we've imported to be HTTP client but we now also need to bring it into our constructor so to do that we just create a private variable calling it HTTP and it's gonna be of type HTTP client okay awesome now we need to create the run HTTP method this one that we are running that we are supposed to run when we click on that iron button okay so we just run HTTP so each time we click on run HTTP it will run this method and each time we run this method we want to make an HTTP call to the mock API that we created so to do that we type this which is referring to this plus right here and we have HTTP there it's already showing so this and HTTP and then we want to use the get method alright so we're going to use HTTP GET and HTTP GET accepts one sorry multiple parameters the first one being the URL in the form of the string so we're gonna do that I'm gonna leave it blank for now but when we've done the HTTP GET we're then going to subscribe to the response and when we've subscribed to this response we're gonna get some data back and after we get that data we then want to do the following with it okay so we've got the data back so the first thing is we work let's just console dot log that data that we get back so here we are supposed to put the URL to our API let's go back to uni browser and here we are and our API URL is right here so I'm going to copy this link address and go back to the text editor clip so back in the text editor so I'm going to paste that in so what this is going to do is it's going to use the HTTP protocol and it's gonna run a get request on this URL this is equivalent to simply opening your browser and pasting in the URL so we're supposed to get a response like this that's what we expect so let's go to our app in the browser okay so maybe just to refresh okay so something is wrong let me pause the video and investigate what's wrong okay so there's something wrong and a figured out what it is if we go to the browser you'll see that the screen is suddenly blank and nothing is ready and if we go to our code what I forgot to do was in app module ts here we have our HTTP client module we are supposed to add it to our imports right here oh it says input they're supposed to put in HTTP client module and you'll notice that as soon as I save this it will refresh and our application will render so when we click run HTTP [Music] and HTTP call is going to be made in the background and we have a response logged here from line 16 and we can see we have the list of five friends within their age avatar city and name so that's great the code is working as we expect let's go back to our typescript file and in home type aged RTS let's have a an array we're gonna call this friends and our friends array he is where we want to then attach the data that is returned okay so this start friends is going to be equal to the data that comes back from okay not assignable let me look into this pretty quick okay so here I'm just supposed to make this equal to your type of any and it's gonna be a blank array and now everything is working as expected okay so let's save this go back to our application and when we run HTTP we then get a list of all our friends there's a slight delay there where it's downloading the different avatars for everyone but you can see the list of friends that we set up in our API George Santayana announcer James and kalenna so this is basically how you make use of the HTTP protocol in your ionic angular application if you like our content and would like to support us please head over to our online store at code swag dot code at UK Ford slash shop we sell a range of Awesome tech gadgets including this superfast two terabyte nvme SSD drive from Samsung that'll have your PC at its best we offer fast shipping worldwide so head over to code swag code at UK for a slash shop and buy today but as far as this basic introduction to HTTP in IARC angular that's it thank you very much for watching [Music] you

Channel: Code Swag

Views: 8,778

Keywords: ionic 4, ionic framework, ionic 5, ionic tutorial, angular http, ionic http, ionic angular tutorial, HttpClient, HttpClientModule, ionic 5 http, ionic 4 http, ionic pwa tutorial, ionic hybrid app development tutorial, ionic app api, ionic 3 http, hybrid app http, pwa http, ionic 4 http get example, ionic http get json, ionic 5 http get, ionic http get not working android, ionic http request, ionic http post, http ionic 5, ionic http example, ionic http get

Id: RuKr1-bRd44

Length: 29min 22sec (1762 seconds)

Published: Mon Jun 15 2020