Webbasierte Software für für E-Sport und Business

Chrome Developer Tools, Retrofit und Stetho - Schnelleinstieg für Android-Entwicklung

Veröffentlicht von Sebastian Schmidt am 09.09.2016

Sebastian Schmidt

Android-Apps entwickeln und dabei unkompliziert die Inhalte von Requests oder von Datenbanktabellen einsehen? Dieser Artikel zeigt in kurzen Schritten, wie man dieses Ziel unter Verwendung von Retrofit, Stetho und den Chrome Developer Tools erreichen kann.

Einrichtung der Komponenten

Für das aktuelle Beispiel gehen wir davon aus, dass das zu inspizierende Android-Projekt Retrofit2 für die HTTP-Kommunikation mit einem Server oder einer API verwendet. Grundsätzlich ist es für die folgenden Beispiele aber auch vollkommen ausreichend, OkHttp ohne Retrofit2 als Client zu nutzen.

Die Installation von Retrofit2 erfolgt in einem Android-Gradle Projekt durch einfaches Hinzufügen der unten aufgeführten Abhängigkeiten:

compile 'com.squareup.retrofit2:retrofit:2.0.2'
compile 'com.squareup.retrofit2:converter-gson:2.0.2'

Wird im Projekt Proguard verwendet, müssen zusätzlich die folgenden Regeln eingefügt werden:

-dontwarn retrofit2.**
-keep class retrofit2.** { *; }
-keepattributes Signature
-keepattributes Exceptions

Weitere Beispiel zum Ansprechen einer API findet man in der Retrofit-Dokumentation.

Die eigentliche Möglichkeit, die Daten der Applikation in den Chrome Developer Tools einzusehen, bietet die durch Facebook erstellte Debug-Bridge Stetho.

Um eine App mit Stetho zu versehen, reicht es aus die folgenden Zeilen in die Gradle-Konfiguration einzufügen:

compile 'com.facebook.stetho:stetho:1.3.1'
compile 'com.facebook.stetho:stetho-okhttp3:1.3.1'

Die konkrete Einrichtung einer Datenbank soll an dieser Stelle nicht behandelt werden. Das Android-Developers Portal bietet hier aber einen guten Einstiegspunkt. Mit DB-Flow gibt es darüber hinaus eine gute externe Lösung, die immer einen Blick wert ist.

Nutzung von Stetho

Im erste Schritt aktivieren wir Stetho, indem wir die onCreate-Methode unserer Application-Klasse wie folgt überschreiben:

public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initialize(Stetho.newInitializerBuilder(this)
                .enableDumpapp(Stetho.defaultDumperPluginsProvider(this))
                .enableWebKitInspector(Stetho.defaultInspectorModulesProvider(this))
                .build());
    }
}

Nun kann man sich einen Client-Builder für den OkHttpClient erstellen, der den Stetho Network-Interceptor nutzt. Das Ergebnis könnte wie folgt aussehen:

import com.facebook.stetho.okhttp3.StethoInterceptor;
import okhttp3.OkHttpClient;

import java.util.concurrent.TimeUnit;

public class MyClientBuilder {
    protected static OkHttpClient configureClient() {
        OkHttpClient client = null;
        OkHttpClient.Builder builder = new OkHttpClient.Builder();
        builder.readTimeout(180, TimeUnit.SECONDS);
        builder.addNetworkInterceptor(new StethoInterceptor());
        client = builder.build();
        return client;
    }

    public static OkHttpClient createClient() {
        return configureClient();
    }
}

Den ClientBuilder nutzen wir im Anschluß bei der Initialisierung von Retrofit:

protected Retrofit getRetrofit() {
    Gson gson = new GsonBuilder().excludeFieldsWithoutExposeAnnotation().setDateFormat("yyyy-MM-dd HH:mm:ss").create();
    Retrofit retrofit = new Retrofit.Builder()
        .baseUrl(MyApi.HOST)
        .addConverterFactory(GsonConverterFactory.create(gson))
        .client(MyClientBuilder.createClient())
        .build();
    return retrofit;
}

Nutzung der Chrome Developer Tools

Wird die App jetzt auf ein per ADB verbundenes Gerät im Debug-Modus aufgespielt und Chrome geöffnet, kann durch Eingabe von "chrome://inspect" in die Adresszeile eine Übersicht der verbundenen Geräte aufgerufen werden.

Hier sollte die App wie nachfolgend gezeigt aufgeführt sein.

 

 

Über den Button "Inspect" kann man die Chrome Developer Tools für die eigene App öffnen und beispielsweise im Tab Network die HTTP-Kommunikation der eigenen App einsehen.

Im Tab Resources findet man im Unterpunkt Web SQL den Inhalt der zugehörigen Datenbanken.

© 2021, Braune Digital GmbH, Niemannsweg 69, 24105 Kiel, +49 (0) 431 55 68 63 59