Xamarin: Debug locally running API
In this article, we will learn how to connect our Xamarin mobile app to our own API running locally. I will also share some of the issues I encountered and how I resolved them. To follow through, this might require a basic understanding of Xamarin and C# Web API, I however tried my best to keep it as simple as possible.
We will have two(2) independent applications each running on its own. The first application will be the mobile application or sometimes called the client application because it is user-facing, this will be the application that the user interacts with. The second application will be the data application AKA the server application, this is where the data will be stored and basically served from as and when it has been requested by the user (client app).
So in its simplest form, the client app(mobile phone) sends a request to the server to let's say to get a certain type of data, this is called the request. Then if all goes well the server then responds with the relevant data to the client and this is called the response or server response. Then the client displays the received data in our case on the phone’s UI. For simplicity’s sake, I will not dive into the different types of requests and response types.
For this tutorial, we will divide it into two parts, part A and part B, In part A we will build, run and test our server project which will be responsible for storing and rendering the data. Then in part B we will build, run, test the mobile client which will be responsible for displaying the data to the user.
PART A
Step 1: Create an ASP.NET Web API
In visual studio, create an ASP.NET Core Web API. Target framework .Net core 3.1. Set the Authentication type to none for now and also uncheck the configure for HTTPS for now. Then create the application.
Step 2: Run the application
Running the app, by clicking the green play button (IIS Express) should run the sample app and display the weather data in your browser. This is the data we are going to be making use of later in our mobile app.
Step 3: Configure your launch settings.
This is a very important step, In the properties folder, open the launchSettings.json file. At the bottom, you will have the weatherServerApp JSON with a field for the application URL, remove the localhost part and replace it with 0.0.0.0 this is so the server can be called from external devices like in our case the mobile phone.
PART B
Step 1: Create a file new Xamarin App
In a separate or new visual studio, create a file new Xamarin App name this WeatherClientApp and use the blank template to keep it simple. Run the app to ensure it works fine.
Step 2: Create the WeatherModel class
In the shared project create a new class, name it WeatherModel and this class will have the JSON data received from the server app and its properties, In our case, It will be the Date, TemperatureC, TemperatureF, and Summary fields.
Step 3: Prepare your UI
In the MainPage.xaml and a button to make the call and a CollectionView with an x: Name attribute to identify it from the code behind.
Step 4: Implement the code-behind
In the code-behind file (MainPage.xaml.cs) of your MainPage.xaml, make sure your Onbutton_clicked method is an async method, so we can make asynchronous calls to get the data from the server. Install the newstonSoft.json nuget package to help you deserialize the data you will receive.
Note: When you make the call to get your data, in the Request URL, replace the localhost part with your IP address (you can get this in your network and internet settings properties on windows or this for mac) and your request URL will look like this “http://192.XXX.X.XXX:5000/weatherforecast".
Step 5: Run the app
In your file explorer, navigate to where you saved the server app and right-click and open Powershell, then type dotnet run.
This will then start running your server project locally and notice you will see that it says Now listening on: http://0.0.0.0:5000 this is the application URL we edited earlier in part A step 3.
Now that our server app is running, let's fire up our mobile app (client) so we make the request to get our data. Click on the button to request the data, under normal circumstances we expect this call to fail, yes it will fail. Your android application will fail and throw a Java.IO.IOException: Cleartext HTTP traffic to 192.XXX.X.XXX is not permitted.
To resolve this issue, stop running your client app only for now, and in the android project, under properties open the AndroidManifest.xml and in the <application> tag add this android:usesCleartextTraffic=”true” and re-run your client app and request the data. Then boom there you go now we can get our data.
Afterthought
Debugging a local API on a local machine seems quite straightforward and one would not really expect much of an issue, that’s what I thought until I had a similar problem a while back, so the issue seems to be that the context of the term “localhost” changes once you are debugging on the phone or emulator and as such the computer running the server and the phone communicating with that server has two separate ideas of what “localhost” is. This for me was the root cause of my problem. At least locally.
In conclusion, I would like to thank you for your time to read this and I hope it helped solve your issue or at the very least lead you to another solution elsewhere. I am open to any kind of feedback on how I can improve be it the way the code is written or how I describe it.
