Connect local web server localhost api from .NET MAUI App android/ios emulator | Part-1 Http

hey guys so I'm back with another video and in this video we are going to see how can we connect our.net Maui app uh to web API hosted on our local system so basically connecting localhost web apis from.net mobile app so I'm working on a full stack food ordering app using.net Maui and Dot net core API so I have already uploaded two parts of that so in the second part I had this requirement to connect my DOT and Maui app with this localhost web API so it was not working so I did some research and finally I found out so I thought let's create a dedicated video for this so in this video we are going to see how can we connect it so for that food ordering app you can check it out so I'll add the link in my description and pin comment or maybe I'll add it on I button maybe here or here so let's create a new project so.net Maui app and maybe let's call it localhost movie .net6 find so first thing let's add a DOT net core AP project to the solution so add new project sp.net core web API or maybe call it in localhostmovie.api next [Music] slide so we have this API project we have one default controller this weather forecast controller and if we run it so we will be able to see the API okay it's running so we can see it has this one endpoint weather forecast and if we try it out execute and we can see this data and this is hosted on this localhost if we check the full URL this is https localhost 7167 weather forecast this URL okay so we'll try to connect to this URL from our DOT and Maui app so in dotnet Maui let's go to the main page and on click of this button or maybe let's change this button image Let It Be There hello world Dr Maui and let's change the text of this button um call Api try non-counter clicked maybe we can change this name as well um call Api button clipped we will change it we don't need this now and we don't need this as well okay so here uh we need to connect to that so we have couple of approaches so from Dot and Maui we can use HTTP client to connect to http apis so we can have this HTTP client directly here new HTTP client but if you have followed my previous videos I like to use dependency injection so for that we can add a dependencies here builder.services.ed HTTP client and this comes from we need a package we need to inject HTTP client factoring so that comes from I'm not managing the secrets packages and this comes from Microsoft action tensions dot http this one we are using version 6. let's install it looks like it is installed right let's check yes it is installed back to normal program yeah and we are registering HTTP client Factory so we can directly register it or we can add it with this name and then we can provide the default configuration so in this case uh we can skip it if we want but let's give it a name whatever name we want maybe now adjust API for now then it needs an action which gets HTTP client as in parameters so we can write it then we can add the default configuration so in this case we have default configuration of this Base address so we can use this um we'll press that this one right and this is new URI and then we can add this so like this we can add it but for our case we can simply omit this because we are simply we are simply demonstrating how can we use it so we can directly use it in here like this only okay so HTTP client next thing HTTP client dot get async we have this method and it needs in pori so we can provide this URI we saw this URL works right so this thing is today client get a sync and we can store or maybe we can use cat to finish phone equals get from Json async and we can give it the type of response so in this case the type of response we are going to get is two array of this type weather forecast right so in this case what we can do we can simply say let's use get testing only get a sync because it is async we need to add a weight and if we are adding away this method needs to be async so we will have response in here and this responses of type HTTP response message so we need to get the actual result so we can say response dot content dot read as string isync so we will have a Json string data in this data variable so for now first thing let's run API in a separate sessions so debug start without debugging and it is working try it out execute and we have this data so it is working now I am running it so let's change it to Startup project and let's run it so on Windows machine okay let's try on all machines because I'll be back once this runs so it's here now I already have breakpoint let me add one more breakpoint and call Api it came here and if I continue I can check response has status code 200 and the data it has this complete data we got it four windows now let's try to run it on Android okay so it's running on Android I'll be back once Android emulator opens so it's up and running and first thing let me increase the size okay fine so now if I click on this call Api debugger comes here continue continue and now fail to connect to localhost this port so this problem this is because localhost when we run it inside Android emulator this is a totally different uh it is kind of a virtual machine so it runs in on in within its own OS so localhost for this Android emulator that is different and this localhost is coming from we hosted localhost on our this Windows OS so these are not same right so if we want to get it running and so Microsoft already gave us how can we fix it so let's check and dotnet localhost net Local web services so if we check each instance of the Android emulator is isolated from your development machine network interface and runs behind a Virtual Router so emulator devices can't see your development machine or other emulator instances on the network so it cannot connect to localhost however the Virtual Router for each emulator manages a special Network space that includes pre-allocated address with this IP 10.0.2.2 so this address and address being an alias to your host loopback interface and this is localhost so what when we deploy something on a local host for this Android emulator it is actually deployed on this port we could say so we can connect to this using this thing now there is one more problem same goes for for iOS but iOS supports localhost so on iOS it shouldn't be a problem so over HTTP it is simpler to achieve but over https it is a bit tricky and it requires some more things to do so in this video Let's try it on HTTP maybe in future I'll try to do one video for https so Local web services running over HTTP we can check if it is Android then we can simply change our localhost to this port and if it is anything other than Android then we can directly connect to the localhost this is one thing then it says we don't need this okay let's try to do this now so first thing we need to run our API on localhost HTTP currently it is on https so in order to do this first thing we can do we can simply comment out this line This https redirection so it will not run on https and HTTP port this one is 5167 so let's copy this go to main page and let's change this URL to this HTTP localhost 5167 weather forecast now next thing we remove this now it runs the Android emulator for this we need to allow clear text transport so for that we have different approaches first approach we can try what this is suggesting this official documentation suggests clear text traffic permitted true and then we can add this domain and something changed from six stars so we can add this in our resources or we can use a simpler approach if we don't want to offset all these in resources so other approaches we will go to platform and Android then this main application so this application attribute it actually supports one property which says use Clear text traffic and we can set it to true so this is not safe so we should do it only for debug purpose not for production apps so we have done we have added this to our Android application the main application application attribute other thing we did we removed https for now and now if we try to check it first thing let's build API and it's here now let's run it run [Music] start without debugging so it's running you should be running on two different ports so one is this one https and there should be another one this one right and if we check it if we try it out execute it we got this right the same data over this HTTP code this STD protocol with this port 5167 so we'll use this now let me try to run Android app again so it's here and we still have that breakpoint main page yes let's try it now debugger came here and failed to connect to localhost did I miss something oh my bad because it is not on localhost it is on 10022 so the various main page this one yeah so I missed it so it is not on localhost it is actually on 10.0.2.2 this port right we just saw so let's re-run it came call Api okay let's try and now the request was successful with 200 and the data we can see the data data came here okay now if we will run it on Windows or on iOS on other devices so this is not going to work so what we should do we should have URL in just a second okay so for URL uh we can check what environment our app is currently running on so we can access device info dot platform if this platform is device platform dot Android if this is Android so this IP this 10 0 2 2 this IP is for Android only for all other environments localhost can work so if this is Android then the URL should be on me now we could say the base you are if this is Android then the base URL is this and if it is any other platform then what is localhost okay so this is base URL in this case this is the thing we can remove this in this space URL and now we should record for this you can maybe get these from configuration right and for API side also and one more thing uh for main application this this is not safe to use in production app so what we can do maybe we can simply have this compilation if this is debug then use this if this is not deeper foreign directive expected what I have given you are presenting stop among here okay what am I missing closed the bug can't we have this debug preprocessor in Maui app from you guys knows about it what is wrong with this line so maybe you can let me know in the comments below if this does not work then maybe we need to have some different approach maybe let me know in the comments if you know what is it if not then maybe I'll try to find some alternate approach and for API we should let's try if we can do this here oh okay I missed F5 if paper and if so if this is not debug in that case it should use HTTP Direction and if it is in debug mode then we can skip HTTP Direction for this hair and I've missed a flare if deeper else dates and if okay so if it is in debug mode then we will use this and if it is in production mode we will skip this usually attack traffic right because in production mode your app will talk to some hosted API so it will be on some domain okay fine so I think all said let's try one more time rebuild the API okay and now start API fine and let's test our application on Android first okay call Api it came here F10 F10 now base URL paste URL is this 10 0 2 2 5 1 6 7 this URL and we continue from here it was successful and we can see the data fine fine it is okay now next thing let's try it on Windows Windows machine run it should run on Windows as well right and for Windows the URL should be localhost okay so it's here call Api it came here continue now if we check base URL is localhost 5167 and for this we got the data okay so it's working and for iOS we can simply connect to localhost for iOS we can if it does not work then we can check we can add this to info p list and it should work right clear text local traffic we can add this thing if it should work so I'm on my Mac now and I have pushed my code from Windows to GitHub and let's clone it and then restore it foreign now we can try running okay first thing let me open the project share let's build the AP project okay fine API is here can we run API from here like uh we run start debugging project run with custom configuration run project okay I don't know how can we run it from vs for Max so let's try to run it from terminal so this thing copy this name CD and now let's run it and it is running the same HTTP port and https Port yes fine now we'll run our Maui project so first let's try to run it on Android emulator let's see if it is running on Android uh emulator on Mac as well because we saw it was running on Windows in breakpoint let me add breakpoint so it's here call Api yep it's here base URL and base URL is 10 0 2 2 5 1 6 7 same uh this one so device platform is Android and now it should yes we got this data successfully so on Android it is working as expected right now next thing let's try it on iPhone simulator let's try it on iPhone so device is up app is loading okay so app is here now call Api breakpoint base URL it is localhost and if we check data we got this data same thing we can try because for iOS simulator it works on localhost only and our API is running on localhost only so next thing let's try on Mac run so my cap is here and if we call Api breakpoint hit and base URL is localhost and we got the response and we got the data so with this thing everything is working fine so I'll give you a quick recap what all we need first thing we are using http so if you have created your API to support https we can simply skip this line we can comment this out or we can add this if directive if it is not debug then use the https direction if it is debug then skip this next thing for DOT and Maui app what we needed in the platform Android main application we need to enable this clear text traffic so uses this main application it was having this application attribute we can simply add users killer text traffic equals true so in this we have make it uh kind of generic so if it is debug then we are using this usage clear text traffic true and if it's in production mode then we are not using it so it is not safe for production and other thing whenever we are calling the API so for Android localhost is from Android device only so localhost actually Android provides us this 10022 this API so it is kind of loopback address which is using localhost so for Android we can connect to localhost owner Os from by using this 10 0 2 2 with the same port so this all we have done Okay so like this video if you liked it share it with your colleagues and friends and subscribe my channel I'll be posting more videos and don't miss too watch the app I'm working on right now that is that food ordering app so I already uploaded two parts and I'm going to drop third part very soon and that app uses this thing so you will get a quick recap in there so yeah I'll buy back with another video bye

Channel: Abhay Prince

Views: 8,811

Keywords:

Id: kvNhLKuAySA

Length: 35min 9sec (2109 seconds)

Published: Mon Feb 06 2023