Flipper – ce este, capacități și aplicare

Ce este Flipper?

Flipper este o platformă deschisă pentru depanarea aplicațiilor mobile, creată de Facebook (Meta) în 2018. Inițial proiectul se numea Sonar și era destinat nevoilor interne ale companiei, dar în 2019 Meta a publicat codul sursă sub licența MIT. Platforma constă din două componente: o aplicație desktop pe Electron și un SDK care se integrează în proiectele Android și iOS.

Diferența principală dintre Flipper și alte instrumente de depanare este arhitectura modulară. În locul unui debugger monolitic, dezvoltatorul conectează doar pluginurile care sunt cu adevărat necesare în proiect. Aceasta reduce încărcarea aplicației și simplifică interfața: debuggerul arată exact ceea ce a selectat dezvoltatorul. Android Studio oferă profilere încorporate, dar acestea funcționează doar prin ADB și nu oferă nivelul de personalizare al Flipper.

Potrivit Meta, Flipper este utilizat în peste 2000 de proiecte în cadrul companiei și suportă integrarea cu Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite și alte biblioteci populare. Platforma este compatibilă cu Android API 16+ și iOS 11+.

Arhitectura Flipper: cum funcționează conexiunea desktop – dispozitiv

Arhitectura Flipper este construită pe modelul client-server. Aplicația desktop acționează ca server, iar dispozitivele mobile ca clienți. Conexiunea se stabilește prin USB sau TCP/IP, după care începe schimbul bidirecțional de mesaje prin protocolul Flipper Protocol bazat pe WebSocket.

Pe partea de Android, comunicarea este asigurată de biblioteca android-client, care utilizează ADB pentru tunelarea traficului. Clientul iOS se conectează prin idb (iOS Device Bridge) – o dezvoltare proprie Meta pentru interacțiunea cu dispozitivele iOS fără Xcode. În interiorul aplicației, fiecare plugin se înregistrează în FlipperClient și primește propriul canal de comunicare cu analogul desktop.

Procesul de transmitere a datelor arată astfel: pluginul de pe dispozitiv trimite un eveniment prin FlipperClient, clientul îl serializează în JSON și îl transmite prin WebSocket pe desktop. Aplicația desktop deserializează mesajul și îl trimite pluginului corespunzător din interfață. Potrivit blogului tehnic Meta (2024), întârzierea transmiterii mesajului este mai mică de 15 milisecunde la conexiunea USB.

Cum să instalați și configurați Flipper

Instalarea Flipper constă din trei pași: instalarea aplicației desktop, adăugarea SDK-ului în proiect și pornirea debuggerului. Aplicația desktop se descarcă de pe site-ul oficial fbflipper.com – sunt disponibile versiuni pentru Windows, macOS și Linux în formatele dmg, exe și AppImage. După instalare, aplicația detectează automat dispozitivele conectate prin ADB.

Pentru proiectul Android, Flipper se conectează prin dependențe în build.gradle. Trebuie specificată versiunea Flipper care corespunde versiunii clientului desktop și adăugate pluginuri pentru bibliotecile utilizate. Mai jos este dat un exemplu de configurare pentru un proiect în Kotlin:

// build.gradle (aplicație)
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"
    )
}

După sincronizarea Gradle, trebuie inițializat FlipperClient în clasa Application. Inițializarea se face în compilarea debug – în versiunea release biblioteca nu trebuie conectată pentru a nu dezvălui informații de depanare utilizatorilor.

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

Pentru iOS Flipper se adaugă prin CocoaPods. În Podfile se specifică frameworkurile Flipper și FlipperKit, precum și Flipper-Folly și Flipper-PeerTalk pentru organizarea canalului de comunicare. După pod install și lansarea aplicației pe simulator sau dispozitiv, clientul desktop va detecta automat o nouă sesiune.

Verificarea conexiunii

După lansarea aplicației, deschideți Flipper desktop – în panoul din stânga va apărea lista dispozitivelor conectate. Dacă dispozitivul nu este afișat, verificați: este instalat ADB, este activată depanarea prin USB pe Android, este pornit podul idb pentru iOS. Fiecare dispozitiv este afișat cu numele modelului și versiunea sistemului de operare.

Pluginuri Flipper pentru Android și iOS

Pluginurile Flipper sunt extensii modulare care adaugă panouri în interfața desktop pentru sarcini specifice. Meta suportă pluginuri oficiale pentru cele mai populare biblioteci: Network Plugin pentru OkHttp și URLSession, Database Plugin pentru SQLite și Realm, Layout Inspector pentru ierarhia View, SharedPreferences Plugin și Crash Reporter.

Pe lângă pluginurile oficiale, există un ecosistem de pluginuri terțe dezvoltate de comunitate. De exemplu, MMKV Plugin pentru depanarea stocării Tencent MMKV, Redux Debugger pentru React Native, LeakCanary Plugin pentru detectarea scurgerilor de memorie. Pluginurile sunt distribuite prin Maven Central și CocoaPods și se conectează ca dependențe obișnuite.

Un avantaj important al Flipper este posibilitatea de a scrie pluginuri proprii. Un plugin constă din două părți: partea client (în Kotlin sau Swift), care se înregistrează în aplicația mobilă, și partea desktop (în TypeScript sau JavaScript), care adaugă un panou UI în interfață. Meta oferă API pentru crearea de pluginuri personalizate cu suport pentru WebSocket și mesaje JSON.

Pluginuri principale pentru Android

Depanarea rețelei prin Flipper

Network Plugin – unul dintre cele mai solicitate pluginuri Flipper. Acesta interceptează toate cererile HTTP/HTTPS care trec prin OkHttp pe Android sau URLSession pe iOS și le afișează în interfața desktop în timp real. Pentru fiecare cerere sunt disponibile: URL, metoda, codul de status, antetele cererii și răspunsului, corpul cererii și răspunsului, timpul de execuție și dimensiunea.

Pentru a conecta Network Plugin pe Android, este suficient să adăugați dependența flipper-network-plugin și să transmiteți OkHttpClient în constructorul NetworkFlipperPlugin. Flipper împachetează automat OkHttpClient într-un interceptator. Pe iOS, pluginul de integrare cu URLSession necesită configurare prin FlipperNetworkInterceptor.

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

Caracteristica cheie a Network Plugin este suportul pentru căutarea și filtrarea cererilor. Dezvoltatorul poate filtra cererile după URL, metodă, cod de status sau tip de conținut. Se poate retransmite forțat orice cerere din interfață – acest lucru este util pentru testarea endpointurilor fără a scrie o cerere curl separată. Potrivit sondajului dezvoltatorilor Meta (2024), Network Plugin este utilizat în 78% dintre proiectele unde este instalat Flipper.

Depanarea bazei de date și SharedPreferences

Database Plugin deschide accesul la bazele de date SQLite și Realm direct din clientul desktop. Dezvoltatorul vede toate tabelele, schema și conținutul lor sub formă tabelară. Se pot executa interogări SQL arbitrare, adăuga, edita și șterge înregistrări fără a scrie cod. Aceasta accelerează semnificativ depanarea stărilor aplicației în comparație cu utilizarea adb shell.

SharedPreferences Plugin funcționează similar: afișează toate cheile și valorile stocate în SharedPreferences pe Android. Editarea are loc instantaneu – modificările sunt imediat vizibile în aplicație. Cu toate acestea, există o limitare importantă: după repornirea aplicației, Flipper se reconectează și toate modificările făcute prin plugin sunt păstrate, deoarece ele sunt aplicate direct fișierului SharedPreferences.

Pentru iOS, analogul este NSUserDefaults Plugin. Acesta lucrează cu UserDefaults și arată toate perechile cheie-valoare salvate. Pluginul suportă editarea șirurilor de caractere, numerelor, datelor și array-urilor. Modificările se aplică instantaneu, deoarece Flipper accesează UserDefaults prin interfața runtime.

Layout Inspector și logare

Layout Inspector de la Flipper oferă o reprezentare vizuală a ierarhiei View pe Android. Dezvoltatorul vede arborele componentelor, atributele lor (lățime, înălțime, margini, fundal, text) și poate selecta interactiv orice element de pe ecranul dispozitivului. Este o alternativă la Layout Inspector încorporat în Android Studio, dar cu o diferență importantă – Flipper arată ierarhia în timp real fără a opri aplicația.

Pentru logare se utilizează Logs Plugin. Toate logurile din Logcat ajung în interfața desktop cu filtrare după nivel (Debug, Info, Warn, Error) și tag. Spre deosebire de Android Studio Logcat, interfața Flipper nu supraîncarcă ecranul – logurile sunt grupate după tag și evidențiate după nivel. Este suportată căutarea și exportul logurilor în JSON.

O altă funcționalitate utilă este Console Plugin, care afișează console.log din codul JavaScript în React Native sau componente WebView. Aceasta simplifică depanarea aplicațiilor hibride: dezvoltatorul vede atât logurile native, cât și cele JS într-o singură interfață. Pluginul suportă filtrarea după sursă (Native sau JS) și nivelul de logare.

Configurarea pluginurilor Flutter

Pentru aplicațiile Flutter, Flipper se conectează prin pachetul flipper din pub.dev. Pluginul flutter_flipper oferă integrare cu stratul de rețea Dio, stocarea SharedPreferences și navigarea Flutter. Instalarea necesită adăugarea dependenței în pubspec.yaml și inițializarea FlipperClient în funcția main a aplicației. Pluginurile Flutter sunt momentan inferioare celor native ca funcționalitate, dar acoperă scenariile principale de depanare.

Performanța în timpul depanării

Flipper consumă resurse ale dispozitivului și desktopului proporțional cu numărul de pluginuri active. La conectarea tuturor pluginurilor simultan pe emulatorul Android, se observă o scădere a performanței cu 5–10% potrivit măsurătorilor Meta (2024). Se recomandă conectarea doar a pluginurilor necesare și dezactivarea celor neutilizate prin interfața aplicației desktop.