API debugger for Native Android App following MVVM architecture - Crypto Currency App

In this post, we will explore how to use Requestly Open Source SDK to debug HTTP requests.

What is Requestly Android Debugger?

Requestly is a tool that can be used by Android Developers for Intercepting & Debugging API traffic.

Cryypto Analyzer

Cryypto Analyzer is a native android app that will demonstrate the latest cryptocurrencies about their prices and trends.

In this article, we will see how we can integrate the Requestly SDK into our native android app and debug the API traffic.

In this project, we will use two APIs one for Cryptocurrency list and detail i.e Nomics API, and another one to show the historical data of currencies i.e. CryptoCompare API.

The app is following the MVVM architecture pattern.

What is MVVM?

MVVM is one of the architectural patterns which enhances separation of concerns, and it allows separating the user interface logic from the business logic. Its target is to achieve Keeping UI code free and straightforward of app logic to make it easier to manage.

We will hit the API call using Retrofit 2.0 and while hitting the API call Requestly SDK comes into action and you can see that Requestly will appear in the notification.

Before moving forward, here are all the libraries that have been used in the entire project.

1. Coroutines
2. ViewModel
3. Retrofit
4. Room
5. Glide
6. Coil
7. Shimmer effect by Facebook
8. Dagger Hilt dependency injection
9. Lottie Animation
10. ViewPager2
11. Activity KTX
12. Fragment KTX

These libraries are open source and available on Github. To checkout, the source code of this Crypto project clicks here github.com/prateekcode.

1. Add dependency on the build.gradle

All the required libraries will be added to this file.

2. Model class for the API response

We need to create the model class what are the values we want from the API and to know what are the keys are available by the API we can see the documentation of the Nomics API.

3. Retrofit call

Retrofit service class to make an API request and it will return to Response<ModelClass>.

4. Repository class

This class provides a singleton network request for hitting API and using LiveData for observing API responses. LiveData is an observable data holder class. Unlike a regular observable, LiveData respects the lifecycle of other app components, such as activities and fragments.

5. Make a ViewModel class — The ViewModel class is designed to store and manage UI-related data in a lifecycle-conscious way. The ViewModel class allows data to survive configuration changes such as screen rotations.

6. Activity/Fragment where we will use ViewModel for observing data —

The activity or fragment where we will show our response in the form of the UI.

Once this is all done, now we can see how a requestly debugger can be used. We need to add three lines of code in the Retrofit service class in the interceptor of OkHttp call.

interceptor code

If this is integrated successfully, then in the notification bar you will be able to see the requestly network requests debugger. Apart from the notification bar, we can see the network traffic in the WebApp provided by requestly that will give a better experience to explore the traffic.

How to integrate requestly in the WebApp?

Step 1: In your favorite browser, visit https://app.requestly.io/ and sign in with your Google Account.

Requestly Web App

Step 2: Once you logged in, on the left side, under the Others section, click on the Mobile Debugger. And click on create the app.

App Creation Requestly

Step 3: After this, you need to integrate the SDK code in the Okhttp interceptor call under the Retrofit Api service class in your Android Project.

Step 4: If this is integrated successfully into your Android App, you will see requestly notification in the notification tab. And then copy the device id from the notification and paste it under the Configure Interceptor inside the WebApp.

Configure Interceptor

Step 5: On correct addition of the device-id, Requestly dashboard looks something like this. Every web request will be added here in real-time and data like body, header, request URL can easily be found. It will be more helpful when the UI doesn’t show any data and to figure out what exactly the bug is like it from the UI side or server-side, this will help in that.

Requestly Web Traffic

This will show all the GET, POST, PATCH, and many more requests and you will be able to see all the responses once you hit the API call. This will help you if some data is not coming correctly in the UI and you’re not sure if either it is your error or API error you can check that on requestly.

The Code of this Cryppto project is a little bit big but it is open source and freely available on my GitHub. Check out the source code of the project here at https://github.com/prateekcode/Cryypto.

Thanks!