Using Capacitor Native HTTP with Ionic

what's up cymotics and welcome back to a new quick win today we're talking once again about http calls and especially we will use the capacitor native http plugin this plugin is pretty great as it will help you to solve course issues only on the device more on that later uh you can manage cookies with that plugin and you can even download files with that plugin and we will take a look at the first and the third option we won't take a closer look at cookies if you want to see something about that just leave a comment if you want to follow along the course at the code of this video go check out link below the video for all ionic academy members and if you're not yet a member go check it out ionicacademy.com my place to help you with everything ionic courses community templates everything that you need to get started and get fast with ionic so let's dive into today's topic and build a cool application to solve course issues and download files [Music] [Music] all right let's get started with our application we're going to start today as always with a blank new ionic application and we're going to generate one service because we will make the native http calls in that service and then you can continue by installing the capacitor community http plugin we'll take a look at this in a second as well i recommend to run the first ionic build so you can add the native platforms because we really need to test those things on a real device now let's take a quick look at the plug-in can we make this a bit bigger right there we go um a very nice plug-in that i think makes lunch actually himself started like a year ago perhaps even more can we use as well with capacitor 2 uh but right now it's already made for capacitor 3 so if you want to use an older version or your application is still using capacitor 2 make sure you install it in that way otherwise the cool thing is we don't need any configuration anymore so previously with capacitor 2 we still had to register the plug-in in the main activity of enright that's completely unnecessary and we can dive directly into the usage uh but actually we won't do that because first i want to show you a little problem that you usually encounter uh and that maybe brought you to this video so let's say you have a standard http call like that you're using uh the angular http client you've injected that into your module so then you try to access that url and just try to log out some data cool uh usually that works pretty good if you're api is nice but if you're using a public api it can lead to some problems especially if you implement it in the servers while you want to implement it in the home page that of course makes no sense so this should just be a quick uh showcase uh standard let's just call it like this and what we're gonna see with that call is once we hit the call we get that nice little course issue no access control or written header now you got multiple ways to solve that problem one way that we used in the past as well is to create your own proxy that is possible as well uh we had a quick win and video on that in the past uh it looked like this how to fix ionic course issues with a proxy uh it's actually not too hard to create your course anywhere proxy and upload it to heroku so give that a try if you want to second option is to well maybe it's even worse recommendation zero because try to fix that course issue on the server side but sometimes that's just not possible the api is controlled by someone else they just don't want to enable cores in that case we're left only with one option and that is using a different plugin so on the web we can't access it i can also show you the same i tried to open my inspect tools i'm using the inspect app for debugging ios right now so in that case we see the same result cannot load due to excess control checks now everything that we do with the native hdp plug-in from capacitor in the next steps won't solve the problem on the web the reason is simple um the web implementation yeah i'm really prepared today uh the web implementation of the capacitor http plugin looks like this uh we can scroll down where the request function is for the web they will simply use fetch it's not like they use any magic on the web or anything else they just use plain fetch and that won't solve your course issues um that's a nice fallback for the web you could if you want to and we've done this in the past also uh provide your own logic so only hybrid meaning native ios and android apps make use of the hdp plugin and on the web you will use the angular http client if you prefer that to the standard fetch api that is completely up to you today we will just stick to that just as a quick uh behind the scenes why it's not working on the web but at least we can fix this for our uh application on a real device so let's inject now the http service and get into the code within our http service we're going to implement a simple function that we call do get that's basically what we or the application now should call for every http call that you want to make and what we need to do is basically call the http plugin nice import things and then we can use a bunch of functions now today we won't get into cookies uh just a quick word with that plugin you can quite easily manage set delete your cookies if you're working with cookies otherwise you can use the standard hdb functions get patch post put those are specific functions and like delete or you could just use request and then use the the method like this so that's completely up to you uh that's not the sign yeah it still requires the url so it could look like this that would be just fine otherwise you can also do it like this you can define your own options object and if you're not sure what the options object looks like just dive into the interface that's basically always my recommendation http options only requires a url and everything else is optional method params data headers timeout really response type a lot of those things should be enough to configure your call now usually if i now call the http plugin get function and pass in my options as a result i will get a promise http response if you're used to working with observables from the angular hdp client i recommend that you simply wrap this with from by wrapping it with from and can we get the import nice uh the signature of our function changes to an observable hdp response and that feels well just a bit more natural um if you're otherwise have used or perhaps even use in other places the standard hdp client next to this a quick example this could also be a post request once again specifying your options and then doing the same request or get or post really multiple ways to do this now let's see how we can put that into action in our page i will actually bring in the content for our html so we can see something i just added two buttons for native call to our function and a download file which we will also implement in the second step so let's put those into our class and then we got well we can command out the image part for now i will definitely forget about uh recommending that in my image now it's also for the second part uh as a result from the ap i will get one object which has well a lot of items and we can just iterate them that's really not the most important part we can also just lock it out that's fine for today as well and we're gonna go ahead with our http service now to make a get request now the only thing we need to specify is the url um another idea would be to actually have another kind of api service um because i really wouldn't recommend to have those urls in your pages so you would then use this http service are treated more like a utility service which you use then from your api service that means your api service has something like get games or get something where the url is specified and then makes a call to the http service and your pages would never really work with that http service or utility just for today i didn't want to add just another service but i would highly recommend it and not have the url in here okay with that information in place let's hit the subscribe block and we're going to lock out our response and at the same time set our data to response that i think specials was the key within that result so let's see on the web uh what is that i've never seen that before a message that yeah i think the live reload may be messed up or homepage do you get does not exist on http servers well it kinda exists i don't know what you see in that service but i would definitely say it exists uh anyway let's just restart just as a quick information if you've been wondering how i got the live reload on the device that is exactly what i run ionic cabron ios live reload external i usually use source map faults because it made debugging easier but i read that it's deprecated so perhaps this will be removed in the future anyway now it's working again and we see on the web we are still getting the same error that's what i explained before we're using fetch so no wonder let's do the same native http call in here and inspect our application and as a result can we do we actually implement something yeah we see that we get back this result and in fact the result is wrapped in data specials but the good news is we actually get a result so we can just put in the data in here and then let's do a call once again and we're finally able to get the data on the device um i was kind of hidden api from steam maybe we should do a tutorial about this let me know if you're interested in something with the steam api could be possible in the future now that was part one we've now been able to overcome the course issues that we encountered before by using the native capacitor http plugin as i said there are many more functionalities on that plug-in like uh working with cookies defining headers and other information for the http call but that is the rough or the basic setup that i recommend plus another service that basically handles this as a utility service so your pages won't really work with that hdp service but what you can do as well with the plug-in is downloading and uploading files that was quite interesting so in order to do so we can extend our start ss or start shell script because you now need to install the capacitor file system okay i've already done that of course as a little preparation and then we can dive directly into our http service and create a function download file so to download a file we first of all need to define some options i've uploaded a file to digitalocean and at this point we already see we need access to the file system because this time we also need to specify a file path and a file directory and that directory comes directly from capacitor file system uh once we've got those in place we can make the actual call now in this case i will just stick to okay that's a long word http download file result i will just stick to promises but as a little exercise for you perhaps try and wrap that whole function as an observable as well so you can integrate it a lot better into your stream uh no into your code we pass in the options and we should be able to get a nice little response for this let's just call our function here this dot http service download file and because it's a promise we're now using then okay let's look out finally the result in here as well as a little well exercise and let's see what's happening on the web on the web we get back a blob that's interesting we should be able to convert that blob somehow into an image uh let's take a look at a device and the debugging tools here download a file and we get back a path to a file so on a device the plugin has really downloaded that file already with just really with just those few lines into your local file i think that's pretty cool and i think that's a very good use case of that plugin perhaps um maybe if you don't even encounter course issues but only want to download a file maybe it's worth giving this plugin just for that a try now um if you also want to display it let me quickly bring in a few functions because first we need a little helper function for the web to convert a blob to a base64 string once we got that in place we can put in our logic so we've seen on the web we got a blob on a mobile device we got a path so if we got a pad we will use the capacitor file system plugin to read that file uh actually the pad isn't doesn't look like that this should be the name right so let's do quick change what could go wrong with my code of course everything will go wrong but just make sure you're using the same directory and then we can return uh the data from that file plus the base64 information in case we're on the web we just gonna return our function which converts a blob to base64 string and now let's hit save and check out the applications again on the web we now finally get back this cool little string here that looks good uh on the mobile device we in the end get back this little string no that's pretty good that means we just need to set my image to the data let's start my image equals result and then we're mostly good especially on a mobile device we are at this point fine that means we've downloaded the file stored it locally and read the file from there and presented it just with a few lines of capacitor code on the web the story is a bit different because well because it just works um that wasn't what i what i expected that's certainly not what happened before um well well that's interesting because in the past it didn't work like that you still had to use the uh private dump sanitizer i will just to make this complete bring it in because i'm not sure if that is really that is correct right now in that case uh we would just use it like this to uh bypass trust resource url and then uh it will be fine for angular i don't know why it was fine for angular right now already that really doesn't look right to me so i think you definitely need the dump sanitizer to synthesize the base64 string but then you're able to have the same code running on the web and on ios once again the native http call which is preventing the course issues is only working on here on the web it is still using the fetch api so for the web you still have to either fix the api or use the course proxy like shown in my other quick way all right and that's it for today i hope you enjoyed this quick introduction to the native capacitor hdp plugin once again as a recap if you encounter course issues this plugin will help you to at least solve them on a device if you also need a web implementation well you need to either talk to the api and let course be enabled in there or you can use your own proxy to overcome course issues on the web but with that plugin it won't just magically work also this plugin is definitely great for managing your cookies and for downloading and uploading files perhaps we will just use it for that later part as in the past we had a cordova plug-in uh at some point that was discontinued so perhaps it's just worth using it only for downloading and applying files because that worked really great with just a small snippet of code we were able to download files and it worked both on the web and on a mobile device so give the plugin a try and of course leave a like and hit the subscribe button so you get notified about all the upcoming ionic videos you know fresh content every week with that i hope you will have a great week and i will catch you next time so happy coding simon you

Channel: Simon Grimm

Views: 2,526

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial, capacitor native http

Id: U063-oyC3DY

Length: 19min 26sec (1166 seconds)

Published: Tue Sep 28 2021