Photo by Caspar Camille Rubin on Unsplash
How to use the Requestly Android Debugger with your Android Ap
Requestly is a Powerful Open-Source Android App Debugger featured in Product Hunt's Product of the Day.
Today we're going to break down integrating the requestly android debugger with your android app and use the requestly dashboard to monitor network requests coming from your android app, modify requests as well as responses to make life easier while building apps.
Firstly, we're gonna take a look at the simple app that we've created for this tutorial, that interacts with the Rick and Morty API to fetch and show a list of Rick and Morty characters and a details screen showing each character's details.
The app is built using Clean Architecture on top of MVVM, where components have been made following SOLID principles, de-coupled and testable.
The codebase is split into the following directory structure:
We've used
dagger-hilt
for dependency injection,jetpack compose
for UI, &retrofit
for network calls
Finally, let's move onto setting up Requestly
Setting up requestly's android debugger is a three step process,
- Add the requestly android sdk to your app, (inside your app's
build.gradle
file).
dependencies {
...
...
debugImplementation "io.requestly:requestly-android:2.0.0"
releaseImplementation "io.requestly:requestly-android-noop:2.0.0"
debugImplementation "io.requestly:requestly-android-okhttp:2.0.0"
releaseImplementation "io.requestly:requestly-android-okhttp-noop:2.0.0"
}
- Initialise the requestly android sdk inside your application classe's
onCreate()
override fun onCreate() {
super.onCreate()
....
....
Requestly.Builder(this, "<Requestly App Token>")
.build()
}
The reqeustly app token can be generated on their dashboard by going to Reqeustly Mobile Debugger --> Create New App
- Add the requestly network interceptor to your
OkHttpClient
's configuration
val client = OkHttpClient.Builder()
// Initialise Requestly Collector
val collector = RQCollector(context=appContext)
// Initialise Requestly Interceptor
val rqInterceptor = RQInterceptor.Builder(appContext).collector(collector).build()
// Add it to your OkHttpClient config
client.addInterceptor(rqInterceptor).build()
return client.build()
This step is required in order for Requestly to be able to listen to your app's network calls properly. The
Interceptor
is anOkHttp3
abstraction, a component in your network stack that gets
Using the Requestly Dashboard
After succesfuly integrating the requestly android debugger into our apps, we can head to the Requestly Dashboard.
Requestly allows you to monitor and modify all of your app's outgoing network requests and responses.
In order to view your device's network activity,
Go to the Requestly Dashboard.
Choose Mobile Debugger from the sidebar.
Select the app you created on the dashboard, in this case, it's the Rick & Morty Characters app that we created.
Click on Mobile Interceptor to start monitoring our app's network data.
At this step we'll be asked to enter the device_id for which we want to intercept network traffic. Now the Requestly Mobile SDK makes this fairly simple, there's an active notification on the device our app is running on, that shows the device_id generated by Requestly's SDK for identification purposes. Simply copy and paste this ID onto the field in Requestly's dashboard.
- As soon as you make some network acitivity on the app, you should now be able to see all network calls in detail on the Requestly Mobile Debugger dashboard. Here you will also be able to edit specific responses of some api endpoint by editing the json. This can also be done by creating rules, which we'll talk about in the next point.
Requestly also allows you to create specific rules that apply to your app's network activity.
You can create rules for,
- Redirecting Requests,
- Auto Cancelling Requests,
- Modifying Request Headers (to bypass CORS, or modify auth tokens),
- Modifying Query Params, &
- Modifying Responses (like we did in the last step).
A lot of these features also apply only the desktop/chrome extension app of Requestly that monitors and modifies network traffic on your browsers, and we'll touch those on some other day.
If we go inside the option of Modifying Responses we are given the option of overriding response data for a specific api endpoint by,
- either providing static JSON responses to be returned, or
- even allowing us to run custom programming logic (using JavaScript only for now) on the incoming Response and then return it.
This is super helpful for cases when you want to run large scale dynamic modifications while testing and building around public APIs that you can't change.
With this we've reached the end of this tutorial, and we'll be discussing more about the other super features or Requestly in blogs in the future.
I have also tried to make a small tutorial video for you to code along and try the Requestly Mobile Debugger yourself.