Flipper – шта је то, могућности и примена

Шта је Flipper?

Flipper је отворена платформа за отклањање грешака у мобилним апликацијама, коју је створио Facebook (Meta) 2018. године. Првобитно се пројекат звао Sonar и био је намењен за интерне потребе компаније, али је 2019. Meta објавила изворни код под MIT лиценцом. Платформа се састоји од две компоненте: десктоп апликације на Electron-у и SDK-а који се интегрише у Android и iOS пројекте.

Главна разлика између Flipper-а и других алата за отклањање грешака је модуларна архитектура. Уместо монолитног отклањача грешака, програмер повезује само оне додатке који су стварно потребни у пројекту. То смањује оптерећење апликације и поједностављује интерфејс: отклањач грешака показује тачно оно што је програмер изабрао. Android Studio пружа уграђене профилере, али они раде само преко ADB-а и не дају ниво прилагођавања као Flipper.

Према подацима Meta, Flipper се користи у преко 2000 пројеката унутар компаније и подржава интеграцију са Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite и другим популарним библиотекама. Платформа је компатибилна са Android API 16+ и iOS 11+.

Архитектура Flipper: како функционише веза desktop – уређај

Архитектура Flipper је изграђена на моделу клијент-сервер. Десктоп апликација делује као сервер, а мобилни уређаји као клијенти. Веза се успоставља преко USB или TCP/IP, након чега почиње двострана размена порука преко Flipper протокола заснованог на WebSocket.

На страни Android-а, комуникацију обезбеђује библиотека android-client, која користи ADB за тунелирање саобраћаја. iOS клијент се повезује преко idb (iOS Device Bridge) – сопственог развоја Meta за интеракцију са iOS уређајима без Xcode. Унутар апликације, сваки додатак се региструје у FlipperClient и добија сопствени канал комуникације са десктоп аналогом.

Процес преноса података изгледа овако: додатак на уређају шаље догађај преко FlipperClient, клиент га серијализује у JSON и преноси преко WebSocket на десктоп. Десктоп апликација десеријализује поруку и шаље је одговарајућем додатку у интерфејсу. Према техничком блогу Meta (2024), кашњење преноса порука је мање од 15 милисекунди при USB вези.

Како инсталирати и подесити Flipper

Инсталација Flipper се састоји од три корака: инсталација десктоп апликације, додавање SDK-а у пројекат и покретање отклањача грешака. Десктоп апликација се преузима са званичног сајта fbflipper.com – доступне су верзије за Windows, macOS и Linux у форматима dmg, exe и AppImage. Након инсталације, апликација аутоматски открива повезане уређаје преко ADB.

За Android пројекат, Flipper се повезује преко зависности у build.gradle. Потребно је навести верзију Flipper-а која одговара верзији десктоп клијента и додати додатке за коришћене библиотеке. Испод је дат пример конфигурације за пројекат у Kotlin:

// build.gradle (апликација)
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"
    )
}

Након синхронизације Gradle, потребно је иницијализовати FlipperClient у Application класи. Иницијализација се врши у debug компилацији – у release верзији библиотека не треба да буде повезана како не би откривала информације за отклањање грешака корисницима.

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

За iOS Flipper се додаје преко CocoaPods. У Podfile-у се наводе оквири Flipper и FlipperKit, као и Flipper-Folly и Flipper-PeerTalk за организовање канала комуникације. Након pod install и покретања апликације на симулатору или уређају, десктоп клијент ће аутоматски открити нову сесију.

Провера повезивања

Након покретања апликације, отворите десктоп Flipper – у левом панелу ће се појавити листа повезаних уређаја. Ако се уређај не приказује, проверите: да ли је ADB инсталиран, да ли је омогућено отклањање грешака преко USB на Android-у, да ли је покренут idb мост за iOS. Сваки уређај се приказује са називом модела и верзијом оперативног система.

Додаци Flipper за Android и iOS

Додаци Flipper су модуларна проширења која додају панеле у десктоп интерфејс за специфичне задатке. Meta подржава званичне додатке за најпопуларније библиотеке: Network Plugin за OkHttp и URLSession, Database Plugin за SQLite и Realm, Layout Inspector за хијерархију View, SharedPreferences Plugin и Crash Reporter.

Поред званичних, постоји екосистем додатака трећих страна које је развила заједница. На пример, MMKV Plugin за отклањање грешака у складишту Tencent MMKV, Redux Debugger за React Native, LeakCanary Plugin за откривање цурења меморије. Додаци се дистрибуирају преко Maven Central и CocoaPods и повезују се као обичне зависности.

Важна предност Flipper-а је могућност писања сопствених додатака. Додатак се састоји из два дела: клијентског (на Kotlin или Swift), који се региструје у мобилној апликацији, и десктоп (на TypeScript или JavaScript), који додаје UI панел у интерфејс. Meta пружа API за креирање прилагођених додатака са подршком за WebSocket и JSON поруке.

Главни додаци за Android

Отклањање грешака на мрежи кроз Flipper

Network Plugin – један од најтраженијих додатака Flipper-а. Он пресреће све HTTP/HTTPS захтеве који пролазе кроз OkHttp на Android-у или URLSession на iOS-у и приказује их у десктоп интерфејсу у реалном времену. За сваки захтев су доступни: URL, метод, статус код, заглавља захтева и одговора, тело захтева и одговора, време извршења и величина.

За повезивање Network Plugin на Android-у довољно је додати зависност flipper-network-plugin и проследити OkHttpClient у конструктор NetworkFlipperPlugin. Flipper аутоматски облаже OkHttpClient у пресретач. На iOS-у, додатак за интеграцију са URLSession захтева подешавање преко FlipperNetworkInterceptor.

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

Кључна карактеристика Network Plugin-а је подршка за претрагу и филтрирање захтева. Програмер може филтрирати захтеве по URL-у, методу, статус коду или типу садржаја. Може се принудно поновити било који захтев из интерфејса – ово је корисно за тестирање endpoints без писања посебног curl захтева. Према анкети програмера Meta (2024), Network Plugin се користи у 78% пројеката где је инсталиран Flipper.

Отклањање грешака у бази података и SharedPreferences

Database Plugin отвара приступ SQLite и Realm базама података директно из десктоп клијента. Програмер види све табеле, њихову шему и садржај у табеларном приказу. Могу се извршавати произвољни SQL упити, додавати, уређивати и брисати записи без писања кода. Ово значајно убрзава отклањање грешака у стањима апликације у поређењу са коришћењем adb shell.

SharedPreferences Plugin ради слично: приказује све кључеве и вредности ускладиштене у SharedPreferences на Android-у. Уређивање се дешава тренутно – измене су одмах видљиве у апликацији. Међутим, постоји важно ограничење: након поновног покретања апликације, Flipper се поново повезује и све измене направљене преко додатка се чувају, јер се примењују директно на SharedPreferences датотеку.

За iOS аналог је NSUserDefaults Plugin. Ради са UserDefaults и приказује све сачуване парове кључ-вредност. Додатак подржава уређивање стрингова, бројева, датума и низова. Измене се примењују тренутно, јер Flipper приступа UserDefaults преко runtime интерфејса.

Layout Inspector и евидентирање

Layout Inspector од Flipper-а пружа визуелни приказ хијерархије View на Android-у. Програмер види стабло компоненти, њихове атрибуте (ширина, висина, маргине, позадина, текст) и може интерактивно да бира било који елемент на екрану уређаја. Ово је алтернатива уграђеном Layout Inspector у Android Studio, али са важном разликом – Flipper приказује хијерархију у реалном времену без заустављања апликације.

За евидентирање се користи Logs Plugin. Сви логови из Logcat-а стижу у десктоп интерфејс са филтрирањем по нивоу (Debug, Info, Warn, Error) и ознаци. За разлику од Android Studio Logcat, Flipper интерфејс не преоптерећује екран – логови су груписани по ознаци и истакнути по нивоу. Подржана је претрага и извоз логова у JSON.

Још једна корисна могућност је Console Plugin, који приказује console.log из JavaScript кода у React Native или WebView компонентама. Ово поједностављује отклањање грешака у хибридним апликацијама: програмер види и native логове и JS логове у једном интерфејсу. Додатак подржава филтрирање по извору (Native или JS) и нивоу евидентирања.

Подешавање Flutter додатака

За Flutter апликације, Flipper се повезује преко пакета flipper из pub.dev. Додатак flutter_flipper пружа интеграцију са мрежним слојем Dio, складиштем SharedPreferences и Flutter навигацијом. Инсталација захтева додавање зависности у pubspec.yaml и иницијализацију FlipperClient у main функцији апликације. Flutter додаци тренутно заостају за native по функционалности, али покривају основне сценарије отклањања грешака.

Перформансе при отклањању грешака

Flipper троши ресурсе уређаја и десктопа пропорционално броју активних додатака. При повезивању свих додатака истовремено на Android емулатору, примећује се пад перформанси од 5–10% према мерењима Meta (2024). Препоручује се повезивање само потребних додатака и искључивање неискоришћених кроз интерфејс десктоп апликације.