Flipper – apa itu, kemampuan dan penerapan

Apa itu Flipper?

Flipper adalah platform terbuka untuk debugging aplikasi mobile, dibuat oleh Facebook (Meta) pada tahun 2018. Awalnya proyek ini bernama Sonar dan ditujukan untuk kebutuhan internal perusahaan, tetapi pada tahun 2019 Meta merilis kode sumber di bawah lisensi MIT. Platform ini terdiri dari dua komponen: aplikasi desktop berbasis Electron dan SDK yang diintegrasikan ke dalam proyek Android dan iOS.

Perbedaan utama antara Flipper dan alat debugging lainnya adalah arsitektur modular. Alih-alih debugger monolitik, pengembang hanya menghubungkan plugin yang benar-benar diperlukan dalam proyek. Ini mengurangi beban pada aplikasi dan menyederhanakan antarmuka: debugger menampilkan tepat apa yang dipilih pengembang. Android Studio menyediakan profiler bawaan, tetapi mereka hanya bekerja melalui ADB dan tidak memberikan tingkat kustomisasi seperti Flipper.

Menurut Meta, Flipper digunakan di lebih dari 2000 proyek di dalam perusahaan dan mendukung integrasi dengan Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite, dan pustaka populer lainnya. Platform ini kompatibel dengan Android API 16+ dan iOS 11+.

Arsitektur Flipper: bagaimana koneksi desktop – perangkat bekerja

Arsitektur Flipper dibangun berdasarkan model klien-server. Aplikasi desktop bertindak sebagai server, dan perangkat mobile sebagai klien. Koneksi dibuat melalui USB atau TCP/IP, setelah itu pertukaran pesan dua arah dimulai melalui Protokol Flipper yang berbasis WebSocket.

Di sisi Android, komunikasi disediakan oleh pustaka android-client yang menggunakan ADB untuk tunneling lalu lintas. Klien iOS terhubung melalui idb (iOS Device Bridge) – pengembangan internal Meta untuk berinteraksi dengan perangkat iOS tanpa Xcode. Di dalam aplikasi, setiap plugin mendaftar di FlipperClient dan mendapatkan saluran komunikasi sendiri dengan mitra desktopnya.

Proses transmisi data terlihat seperti ini: plugin pada perangkat mengirimkan peristiwa melalui FlipperClient, klien menyerialisasikannya ke JSON dan mengirimkannya melalui WebSocket ke desktop. Aplikasi desktop men-deserialisasi pesan dan mengirimkannya ke plugin yang sesuai di antarmuka. Menurut blog teknis Meta (2024), latensi transmisi pesan kurang dari 15 milidetik pada koneksi USB.

Cara menginstal dan mengonfigurasi Flipper

Instalasi Flipper terdiri dari tiga langkah: instalasi aplikasi desktop, menambahkan SDK ke proyek, dan menjalankan debugger. Aplikasi desktop diunduh dari situs resmi fbflipper.com – tersedia versi untuk Windows, macOS, dan Linux dalam format dmg, exe, dan AppImage. Setelah instalasi, aplikasi secara otomatis mendeteksi perangkat yang terhubung melalui ADB.

Untuk proyek Android, Flipper dihubungkan melalui dependensi di build.gradle. Versi Flipper harus sesuai dengan versi klien desktop dan plugin harus ditambahkan untuk pustaka yang digunakan. Di bawah ini adalah contoh konfigurasi untuk proyek di Kotlin:

// build.gradle (aplikasi)
val flipperVersion = "0.265.0"

dependencies {
    debugImplementation("com.facebook.flipper:flipper:$flipperVersion")
    debugImplementation(
        "com.facebook.flipper:flipper-network-plugin:$flipperVersion"
    )
    debugImplementation(
        "com.facebook.flipper:flipper-litho-plugin:$flipperVersion"
    )
}

Setelah sinkronisasi Gradle, FlipperClient harus diinisialisasi di kelas Application. Inisialisasi dilakukan di build debug – dalam versi rilis, pustaka tidak boleh dihubungkan agar tidak mengungkapkan informasi debugging kepada pengguna.

class App : Application() {
    override fun onCreate() {
        super.onCreate()
        if (BuildConfig.DEBUG) {
            SoLoader.init(this, false)
            AndroidFlipperClient
                .getInstance(this)
                .addPlugin(NetworkFlipperPlugin())
                .start()
        }
    }
}

Untuk iOS, Flipper ditambahkan melalui CocoaPods. Di Podfile, tentukan kerangka kerja Flipper dan FlipperKit, serta Flipper-Folly dan Flipper-PeerTalk untuk mengatur saluran komunikasi. Setelah pod install dan menjalankan aplikasi di simulator atau perangkat, klien desktop secara otomatis akan mendeteksi sesi baru.

Memeriksa koneksi

Setelah menjalankan aplikasi, buka Flipper desktop – di panel kiri akan muncul daftar perangkat yang terhubung. Jika perangkat tidak ditampilkan, periksa: apakah ADB terinstal, apakah debugging USB diaktifkan di Android, apakah jembatan idb untuk iOS telah dimulai. Setiap perangkat ditampilkan dengan nama model dan versi sistem operasi.

Plugin Flipper untuk Android dan iOS

Plugin Flipper adalah ekstensi modular yang menambahkan panel ke antarmuka desktop untuk tugas-tugas tertentu. Meta mendukung plugin resmi untuk pustaka paling populer: Network Plugin untuk OkHttp dan URLSession, Database Plugin untuk SQLite dan Realm, Layout Inspector untuk hierarki View, SharedPreferences Plugin, dan Crash Reporter.

Selain plugin resmi, ada ekosistem plugin pihak ketiga yang dikembangkan oleh komunitas. Misalnya, MMKV Plugin untuk debugging penyimpanan Tencent MMKV, Redux Debugger untuk React Native, LeakCanary Plugin untuk mendeteksi kebocoran memori. Plugin didistribusikan melalui Maven Central dan CocoaPods dan dihubungkan sebagai dependensi biasa.

Keuntungan penting dari Flipper adalah kemampuan untuk menulis plugin sendiri. Plugin terdiri dari dua bagian: bagian klien (di Kotlin atau Swift) yang mendaftar di aplikasi mobile, dan bagian desktop (di TypeScript atau JavaScript) yang menambahkan panel UI ke antarmuka. Meta menyediakan API untuk membuat plugin khusus dengan dukungan untuk WebSocket dan pesan JSON.

Plugin utama untuk Android

Debugging jaringan melalui Flipper

Network Plugin – salah satu plugin Flipper yang paling banyak diminta. Plugin ini mencegat semua permintaan HTTP/HTTPS yang melalui OkHttp di Android atau URLSession di iOS dan menampilkannya di antarmuka desktop secara real-time. Untuk setiap permintaan tersedia: URL, metode, kode status, header permintaan dan respons, body permintaan dan respons, waktu eksekusi, dan ukuran.

Untuk menghubungkan Network Plugin di Android, cukup tambahkan dependensi flipper-network-plugin dan berikan OkHttpClient ke konstruktor NetworkFlipperPlugin. Flipper secara otomatis membungkus OkHttpClient dalam interceptor. Di iOS, plugin integrasi dengan URLSession memerlukan konfigurasi melalui FlipperNetworkInterceptor.

val networkPlugin = NetworkFlipperPlugin()
val client = OkHttpClient.Builder()
    .addNetworkInterceptor(networkPlugin)
    .build()

Fitur utama Network Plugin adalah dukungan untuk pencarian dan pemfilteran permintaan. Pengembang dapat memfilter permintaan berdasarkan URL, metode, kode status, atau jenis konten. Permintaan apa pun dapat dipaksa untuk dikirim ulang dari antarmuka – ini berguna untuk menguji endpoint tanpa menulis permintaan curl terpisah. Menurut survei pengembang Meta (2024), Network Plugin digunakan di 78% proyek tempat Flipper dipasang.

Debugging basis data dan SharedPreferences

Database Plugin membuka akses ke basis data SQLite dan Realm langsung dari klien desktop. Pengembang melihat semua tabel, skema, dan kontennya dalam tampilan tabel. Kueri SQL arbitrer dapat dijalankan, catatan dapat ditambahkan, diedit, dan dihapus tanpa menulis kode. Ini secara signifikan mempercepat debugging status aplikasi dibandingkan dengan menggunakan adb shell.

SharedPreferences Plugin bekerja dengan cara yang sama: menampilkan semua kunci dan nilai yang disimpan di SharedPreferences di Android. Pengeditan terjadi secara instan – perubahan segera terlihat di aplikasi. Namun, ada batasan penting: setelah aplikasi dimulai ulang, Flipper terhubung kembali dan semua perubahan yang dilakukan melalui plugin tetap tersimpan, karena perubahan diterapkan langsung ke file SharedPreferences.

Untuk iOS, padanannya adalah NSUserDefaults Plugin. Ia bekerja dengan UserDefaults dan menampilkan semua pasangan kunci-nilai yang disimpan. Plugin mendukung pengeditan string, angka, tanggal, dan array. Perubahan diterapkan secara instan, karena Flipper mengakses UserDefaults melalui antarmuka runtime.

Layout Inspector dan pencatatan log

Layout Inspector dari Flipper menyediakan representasi visual hierarki View di Android. Pengembang melihat pohon komponen, atributnya (lebar, tinggi, margin, latar belakang, teks) dan dapat secara interaktif memilih elemen apa pun di layar perangkat. Ini adalah alternatif untuk Layout Inspector bawaan di Android Studio, tetapi dengan perbedaan penting – Flipper menampilkan hierarki secara real-time tanpa menghentikan aplikasi.

Untuk pencatatan log, digunakan Logs Plugin. Semua log dari Logcat masuk ke antarmuka desktop dengan pemfilteran berdasarkan level (Debug, Info, Warn, Error) dan tag. Tidak seperti Android Studio Logcat, antarmuka Flipper tidak membebani layar – log dikelompokkan berdasarkan tag dan disorot berdasarkan level. Pencarian dan ekspor log ke JSON didukung.

Fitur berguna lainnya adalah Console Plugin, yang menampilkan console.log dari kode JavaScript di React Native atau komponen WebView. Ini menyederhanakan debugging aplikasi hybrid: pengembang melihat log native dan JS dalam satu antarmuka. Plugin mendukung pemfilteran berdasarkan sumber (Native atau JS) dan level pencatatan log.

Konfigurasi plugin Flutter

Untuk aplikasi Flutter, Flipper dihubungkan melalui paket flipper dari pub.dev. Plugin flutter_flipper menyediakan integrasi dengan lapisan jaringan Dio, penyimpanan SharedPreferences, dan navigasi Flutter. Instalasi memerlukan penambahan dependensi di pubspec.yaml dan inisialisasi FlipperClient di fungsi main aplikasi. Plugin Flutter saat ini kalah fungsionalitas dibandingkan plugin native, tetapi mencakup skenario debugging utama.

Kinerja saat debugging

Flipper mengonsumsi sumber daya perangkat dan desktop secara proporsional dengan jumlah plugin aktif. Saat menghubungkan semua plugin secara bersamaan di emulator Android, terjadi penurunan kinerja sebesar 5–10% menurut pengukuran Meta (2024). Disarankan untuk hanya menghubungkan plugin yang diperlukan dan menonaktifkan plugin yang tidak digunakan melalui antarmuka aplikasi desktop.