Flipper – bu nima, imkoniyatlari va qo'llanilishi

Flipper nima?

Flipper 2018 yilda Facebook (Meta) tomonidan yaratilgan mobil ilovalarni tuzatish uchun ochiq platformadir. Dastlab loyiha Sonar deb nomlangan va kompaniyaning ichki ehtiyojlari uchun mo'ljallangan edi, ammo 2019 yilda Meta MIT litsenziyasi ostida manba kodini nashr etdi. Platforma ikki komponentdan iborat: Electron dagi desktop ilovasi va Android va iOS loyihalariga integratsiyalanadigan SDK.

Flipper-ni boshqa tuzatish vositalaridan asosiy farqi modulli arxitekturadir. Monolit tuzatuvchi o'rniga dasturchi faqat loyihada haqiqatan zarur bo'lgan plaginlarni ulaydi. Bu ilovaga yukni kamaytiradi va interfeysni soddalashtiradi: tuzatuvchi dasturchi tanlagan ma'lumotlarni aniq ko'rsatadi. Android Studio o'rnatilgan profillovchilarni taqdim etadi, ammo ular faqat ADB orqali ishlaydi va Flipper kabi moslashtirish darajasini bermaydi.

Meta ma'lumotlariga ko'ra, Flipper kompaniya ichida 2000 dan ortiq loyihalarda qo'llaniladi va Fresco, Litho, RxJava, Retrofit, OkHttp, Picasso, Realm, SQLite va boshqa mashhur kutubxonalar bilan integratsiyani qo'llab-quvvatlaydi. Platforma Android API 16+ va iOS 11+ bilan mos keladi.

Flipper arxitekturasi: desktop – qurilma aloqasi qanday ishlaydi

Flipper arxitekturasi mijoz-server modeli asosida qurilgan. Desktop ilovasi server rolini o'ynaydi, mobil qurilmalar esa mijozlardir. Ulanish USB yoki TCP/IP orqali o'rnatiladi, shundan so'ng WebSocket asosidagi Flipper Protokoli orqali ikki tomonlama xabar almashinuvi boshlanadi.

Android tomonida aloqa trafikni tunnellash uchun ADB dan foydalanadigan android-client kutubxonasi tomonidan ta'minlanadi. iOS mijoz Xcode siz iOS qurilmalari bilan o'zaro aloqa qilish uchun Meta ning o'z ishlanmasi bo'lgan idb (iOS Device Bridge) orqali ulanadi. Ilova ichida har bir plagin FlipperClient da ro'yxatdan o'tadi va desktop analogi bilan o'z aloqa kanalini oladi.

Ma'lumot uzatish jarayoni quyidagicha: qurilmadagi plagin FlipperClient orqali hodisa yuboradi, mijoz uni JSON ga seriyalaydi va WebSocket orqali desktop ga uzatadi. Desktop ilovasi xabarni deseriyalaydi va interfeysdagi tegishli plaginga yuboradi. Meta texnik blogi (2024) ma'lumotlariga ko'ra, USB ulanishida xabar uzatish kechikishi 15 millisekunddan kam.

Flipper-ni qanday o'rnatish va sozlash

Flipper o'rnatish uch bosqichdan iborat: desktop ilovasini o'rnatish, SDK ni loyihaga qo'shish va tuzatuvchini ishga tushirish. Desktop ilovasi rasmiy fbflipper.com saytidan yuklab olinadi – Windows, macOS va Linux uchun dmg, exe va AppImage formatlarida yig'imlar mavjud. O'rnatishdan so'ng ilova ADB orqali ulangan qurilmalarni avtomatik aniqlaydi.

Android loyihasi uchun Flipper build.gradle dagi bog'liqliklar orqali ulanadi. Desktop mijoz versiyasiga mos keladigan Flipper versiyasini belgilash va ishlatiladigan kutubxonalar uchun plaginlar qo'shish talab qilinadi. Quyida Kotlin tilidagi loyiha uchun misol konfiguratsiya keltirilgan:

// build.gradle (ilova)
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 sinxronizatsiyasidan so'ng Application sinfida FlipperClient ni ishga tushirish kerak. Ishga tushirish debug yig'imida amalga oshiriladi – release versiyasida kutubxona foydalanuvchilarga tuzatish ma'lumotlarini oshkor qilmaslik uchun ulanmasligi kerak.

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

iOS uchun Flipper CocoaPods orqali qo'shiladi. Podfile da Flipper va FlipperKit freymvorklari, shuningdek aloqa kanalini tashkil qilish uchun Flipper-Folly va Flipper-PeerTalk ko'rsatiladi. Pod install va ilovani simulyator yoki qurilmada ishga tushirishdan so'ng desktop mijoz avtomatik ravishda yangi sessiyani aniqlaydi.

Ulanishni tekshirish

Ilovani ishga tushirgandan so'ng desktop Flipper-ni oching – chap panelda ulangan qurilmalar ro'yxati paydo bo'ladi. Agar qurilma ko'rsatilmasa, tekshiring: ADB o'rnatilganmi, Android da USB orqali tuzatish yoqilganmi, iOS uchun idb ko'prigi ishga tushirilganmi. Har bir qurilma model nomi va operatsion tizim versiyasi bilan ko'rsatiladi.

Android va iOS uchun Flipper plaginlari

Flipper plaginlari – muayyan vazifalar uchun desktop interfeysiga panellar qo'shadigan modulli kengaytmalar. Meta eng mashhur kutubxonalar uchun rasmiy plaginlarni qo'llab-quvvatlaydi: OkHttp va URLSession uchun Network Plugin, SQLite va Realm uchun Database Plugin, View ierarxiyasi uchun Layout Inspector, SharedPreferences Plugin va Crash Reporter.

Rasmiy plaginlardan tashqari, jamiyat tomonidan ishlab chiqilgan uchinchi tomon plaginlari ekotizimi mavjud. Masalan, Tencent MMKV saqlashini tuzatish uchun MMKV Plugin, React Native uchun Redux Debugger, xotira oqishlarini aniqlash uchun LeakCanary Plugin. Plaginlar Maven Central va CocoaPods orqali tarqatiladi va oddiy bog'liqliklar kabi ulanadi.

Flipper ning muhim afzalligi o'z plaginlarini yozish imkoniyatidir. Plagin ikki qismdan iborat: mobil ilovada ro'yxatdan o'tadigan mijoz qismi (Kotlin yoki Swift da) va interfeysga UI paneli qo'shadigan desktop qismi (TypeScript yoki JavaScript da). Meta WebSocket va JSON xabarlarini qo'llab-quvvatlaydigan maxsus plaginlar yaratish uchun API taqdim etadi.

Android uchun asosiy plaginlar

Flipper orqali tarmoqni tuzatish

Network Plugin – Flipper ning eng ko'p talab qilinadigan plaginlaridan biri. U Android da OkHttp yoki iOS da URLSession orqali o'tadigan barcha HTTP/HTTPS so'rovlarini tutib oladi va ularni desktop interfeysida real vaqtda ko'rsatadi. Har bir so'rov uchun mavjud: URL, metod, status kodi, so'rov va javob sarlavhalari, so'rov va javob tanasi, bajarilish vaqti va hajmi.

Android da Network Plugin ni ulash uchun flipper-network-plugin bog'liqligini qo'shish va OkHttpClient ni NetworkFlipperPlugin konstruktoriga uzatish kifoya. Flipper avtomatik ravishda OkHttpClient ni interceptorga o'raydi. iOS da URLSession bilan integratsiya plagin FlipperNetworkInterceptor orqali sozlashni talab qiladi.

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

Network Plugin ning asosiy xususiyati so'rovlarni qidirish va filtrlashni qo'llab-quvvatlashidir. Dasturchi so'rovlarni URL, metod, status kodi yoki kontent turi bo'yicha filtrlashi mumkin. Interfeysdan istalgan so'rovni majburiy takrorlash mumkin – bu alohida curl so'rovini yozmasdan endpointlarni sinash uchun foydali. Meta dasturchilar so'rovi (2024) ga ko'ra, Network Plugin Flipper o'rnatilgan loyihalarning 78% ida ishlatiladi.

Ma'lumotlar bazasi va SharedPreferences ni tuzatish

Database Plugin to'g'ridan-to'g'ri desktop mijozidan SQLite va Realm ma'lumotlar bazalariga kirish imkonini beradi. Dasturchi barcha jadvallarni, ularning sxemasini va mazmunini jadval ko'rinishida ko'radi. Kod yozmasdan o'zboshimchalik bilan SQL so'rovlarini bajarish, yozuvlarni qo'shish, tahrirlash va o'chirish mumkin. Bu adb shell ishlatish bilan solishtirganda ilova holatlarini tuzatishni sezilarli darajada tezlashtiradi.

SharedPreferences Plugin xuddi shunday ishlaydi: Android da SharedPreferences da saqlangan barcha kalitlar va qiymatlarni ko'rsatadi. Tahrirlash bir zumda amalga oshadi – o'zgarishlar darhol ilovada ko'rinadi. Biroq muhim cheklov mavjud: ilova qayta ishga tushirilgandan so'ng Flipper qayta ulanadi va plagin orqali qilingan barcha o'zgarishlar saqlanadi, chunki ular to'g'ridan-to'g'ri SharedPreferences fayliga qo'llaniladi.

iOS uchun analog NSUserDefaults Plugin dir. UserDefaults bilan ishlaydi va barcha saqlangan kalit-qiymat juftliklarini ko'rsatadi. Plagin satrlar, raqamlar, sanalar va massivlarni tahrirlashni qo'llab-quvvatlaydi. O'zgarishlar bir zumda qo'llaniladi, chunki Flipper UserDefaults ga runtime interfeysi orqali murojaat qiladi.

Layout Inspector va loglash

Layout Inspector Flipper dan Android da View ierarxiyasining vizual tasvirini taqdim etadi. Dasturchi komponentlar daraxtini, ularning atributlarini (kenglik, balandlik, chekkalar, fon, matn) ko'radi va qurilma ekranida istalgan elementni interaktiv tanlashi mumkin. Bu Android Studio dagi o'rnatilgan Layout Inspector uchun muqobildir, ammo muhim farq bilan – Flipper ierarxiyani ilovani to'xtatmasdan real vaqtda ko'rsatadi.

Loglash uchun Logs Plugin ishlatiladi. Logcat dan barcha loglar daraja (Debug, Info, Warn, Error) va teg bo'yicha filtrlash bilan desktop interfeysiga tushadi. Android Studio Logcat dan farqli o'laroq, Flipper interfeysi ekranni yuklamaydi – loglar teg bo'yicha guruhlanadi va daraja bo'yicha ajratib ko'rsatiladi. Qidirish va loglarni JSON ga eksport qilish qo'llab-quvvatlanadi.

Yana bir foydali imkoniyat – React Native yoki WebView komponentlarida JavaScript kodidan console.log ni ko'rsatadigan Console Plugin. Bu gibrid ilovalarni tuzatishni osonlashtiradi: dasturchi ham native, ham JS loglarini bir interfeysda ko'radi. Plagin manba bo'yicha (Native yoki JS) va loglash darajasi bo'yicha filtrlashni qo'llab-quvvatlaydi.

Flutter plaginlarini sozlash

Flutter ilovalari uchun Flipper pub.dev dan flipper paketi orqali ulanadi. flutter_flipper plagin Dio tarmoq qatlami, SharedPreferences saqlashi va Flutter navigatsiyasi bilan integratsiyani taqdim etadi. O'rnatish pubspec.yaml ga bog'liqlik qo'shishni va ilovaning main funksiyasida FlipperClient ni ishga tushirishni talab qiladi. Flutter plaginlari hozirda funksionallik jihatidan native plaginlardan orqada, ammo asosiy tuzatish stsenariylarini qamrab oladi.

Tuzatish paytida unumdorlik

Flipper faol plaginlar soniga mutanosib ravishda qurilma va desktop resurslarini iste'mol qiladi. Barcha plaginlar bir vaqtda ulanganda Android emulyatorida Meta o'lchovlari (2024) ga ko'ra unumdorlikning 5–10% pasayishi kuzatiladi. Faqat zarur plaginlarni ulash va foydalanilmayotganlarni desktop ilovasi interfeysi orqali o'chirish tavsiya etiladi.