How to use the Requestly Android Debugger with your Android Ap

·

4 min read

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:

Screenshot 2022-07-08 at 6.45.31 PM.png

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 an OkHttp3 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. Requestly Mobile Debugger

  • 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.

Requestly's mobile device_id

  • 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.

Requestly HTTP Rules

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.

Modifying Responses

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.

For more info do reach out to me on my Twitter or LinkedIn.